PlaylistView adjustments (the regular SwiftUI layout break on each SD…

…K) (#22) * PlaylistView adjustments (the regular SwiftUI layout break on each SDK) * Playlist SwiftUI fix - minor padding adjustment * Playlist Selector view iOS16 migration * Playlist Picker view iOS16 migration
sitomani · Oct 11, 2023 · b19608d · b19608d
1 parent bdb2d09
commit b19608d
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 23 deletions.
diff --git a/4champ/Scenes/PlaylistSelector/PlaylistPickerView.swift b/4champ/Scenes/PlaylistSelector/PlaylistPickerView.swift
@@ -66,12 +66,12 @@ struct PlaylistPickerView: View {
                 }.background(Color.black.opacity(0.25))
                 VStack {
                     VStack {
-                        Spacer()
-                        Text(self.store.viewModel.module).foregroundColor(Color(.black))
+                        Text(self.store.viewModel.module).foregroundColor(Color(.black)).padding(.init(top: 16, leading: 0, bottom: 0, trailing: 0))
                         Text("PlaylistSelector_Title").foregroundColor(Color(.black))
                         Picker(selection: $store.viewModel.currentPlaylistIndex, label: Text("")) {
-                            ForEach(0..<self.store.viewModel.playlistOptions.count) {
-                                Text(self.store.viewModel.playlistOptions[$0]).foregroundColor(Color(.black))
+                            ForEach(0..<self.store.viewModel.playlistOptions.count, id: \.self) { index in
+                                Text(self.store.viewModel.playlistOptions[index])
+                                    .foregroundColor(Color(.black))
                             }
                         }.labelsHidden().background(Color(Appearance.veryLightGray))
                     }.frame(maxWidth: .infinity)

diff --git a/4champ/Scenes/Playlists/PlaylistView.swift b/4champ/Scenes/Playlists/PlaylistView.swift
@@ -10,6 +10,20 @@ import Foundation
 import UIKit
 import SwiftUI
 
+struct ListBackgroundModifier: ViewModifier {
+
+    @ViewBuilder
+    func body(content: Content) -> some View {
+        if #available(iOS 16.0, *) {
+            content
+            .background(Color(Appearance.ampBgColor))
+            .scrollContentBackground(.hidden)
+        } else {
+            content
+        }
+    }
+}
+
 struct SUIModule: View {
     let module: MMD
     let faveCallback: ((MMD) -> Void)?
@@ -27,7 +41,7 @@ struct SUIModule: View {
                         .resizable()
                         .frame(width: 30, height: 30).offset(x: -15)
                 }
-            }.padding(EdgeInsets(top: 10, leading: 10, bottom: 3, trailing: 0))
+            }
             VStack(alignment: .leading) {
                 Text("\(module.name)")
                     .font(.system(size: 18))
@@ -43,7 +57,7 @@ struct SUIModule: View {
             Image(module.favorite ? "favestar-yellow" : "favestar-grey").padding(8).onTapGesture {
                 self.faveCallback?(self.module)
             }.padding(7)
-        }
+        }.padding(.init(top: 2, leading: 0, bottom: 6, trailing: 0))
         Divider().background(Color(Appearance.separatorColor))
         }.frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
     }
@@ -101,29 +115,37 @@ struct PlaylistView: View {
       }) .sheet(isPresented: self.$showModal) {
         PlaylistSelectorSUI(showModal: self.$showModal).environment(\.managedObjectContext, self.managedObjectContext).onDisappear {
           self.navigationButtonID = UUID()
-        }.background(Color(Appearance.darkBlueColor))
+        }
       }
       ZStack {
         List {
-          ForEach(store.viewModel.modules) { mod in
-            SUIModule(module: mod, faveCallback: self.favorite(module:))
-              .contentShape(Rectangle())
-              .onTapGesture {
-                self.store.interactor?.playModule(request: Playlists.Play.Request(mmd: mod))
-              }.onLongPressGesture {
-                self.store.router?.toPlaylistSelector(module: mod)
-              }
-          }.onMove(perform: move)
-            .onDelete(perform: deleteItems)
-            .listRowBackground(Color.clear)
-            .listRowInsets(EdgeInsets())
+          Group {
+            ForEach(store.viewModel.modules) { mod in
+              SUIModule(module: mod, faveCallback: self.favorite(module:))
+                .contentShape(Rectangle())
+                .onTapGesture {
+                  self.store.interactor?.playModule(request: Playlists.Play.Request(mmd: mod))
+                }.onLongPressGesture {
+                  self.store.router?.toPlaylistSelector(module: mod)
+                }
+                .listRowBackground(Color(Appearance.ampBgColor))
+                .listRowInsets(.init(top: 0, leading: 10, bottom: 0, trailing: 10))
+            }.onMove(perform: move)
+              .onDelete(perform: deleteItems)
+            if store.viewModel.modules.count == 0 {
+              Spacer().listRowBackground(Color(Appearance.ampBgColor))
+            }
+          }
         }
+        .padding(.init(top: 8, leading: 0, bottom: 0, trailing: 0))
+        .listStyle(.plain)
+        .modifier(ListBackgroundModifier())
         .navigationBarTitle(Text("TabBar_Playlist".l13n().uppercased()), displayMode: .inline)
         .navigationBarItems(leading: HStack {
           Button(action: {self.toggleShuffle()}, label: {Image(store.viewModel.shuffle ? "shuffled" : "sequential")})
           Button(action: {self.store.interactor?.startPlaylist()}, label: {Image("play-small")})
         },
-                            trailing: HStack {
+          trailing: HStack {
           Button(action: {self.startImport()},
                  label: {Image(systemName: "square.and.arrow.down")
               .padding(EdgeInsets(top: -3, leading: 0, bottom: 0, trailing: 0))
@@ -170,7 +192,7 @@ func randomMMD() -> MMD {
   return mmd
 }
 
-var st = PlaylistStore(viewModel: Playlists.Select.ViewModel(playlistName: "foo", shuffle: false, modules: [randomMMD(), randomMMD(), randomMMD()])
+var st = PlaylistStore(viewModel: Playlists.Select.ViewModel(playlistName: "foo", shuffle: false, modules: [randomMMD(), randomMMD(), randomMMD(), randomMMD()])
 )
 
 struct PlaylistPreview: PreviewProvider {

diff --git a/4champ/Scenes/Playlists/SelectPlaylistView.swift b/4champ/Scenes/Playlists/SelectPlaylistView.swift
@@ -99,7 +99,7 @@ struct PlaylistSelectorSUI: View {
                             .foregroundColor(Color(.white))
                             .background(RoundedRectangle(cornerRadius: 5)
                                 .foregroundColor(Color(Appearance.ampTextfieldBgColor))
-                                .frame(minHeight: 32)
+                                .frame(minHeight: 48)
                                 .padding(EdgeInsets(top: 0, leading: -10, bottom: 0, trailing: 8)))
                             .padding(EdgeInsets(top: 8, leading: 20, bottom: 2, trailing: 0)).frame(minHeight: 44)
                         Button(action: {
@@ -133,7 +133,9 @@ struct PlaylistSelectorSUI: View {
                             }
                         }
                     }.onDelete(perform: delete).listRowBackground(Color.clear)
-                }.contentShape(Rectangle()).id(listId)
+                }.listStyle(.plain).contentShape(Rectangle()).id(listId)
+                .modifier(ListBackgroundModifier())
+
             }.navigationBarTitle("PlaylistView_Playlists", displayMode: .inline)
                 .navigationBarItems(leading: Button(action: {
                     self.showModal.toggle()