PlaylistView adjustments (the regular SwiftUI layout break on each SDK)

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)

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 {

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()