Listing styles

Shared/Views/ChannelPlaylistView.swift

@@ -1,3 +1,4 @@
+import Defaults
 import Siesta
 import SwiftUI
 
@@ -12,6 +13,7 @@ struct ChannelPlaylistView: View {
 
     @Environment(\.colorScheme) private var colorScheme
     @Environment(\.navigationStyle) private var navigationStyle
+    @Default(.channelPlaylistListingStyle) private var channelPlaylistListingStyle
 
     @ObservedObject private var accounts = AccountsModel.shared
     var player = PlayerModel.shared
@@ -58,6 +60,7 @@ struct ChannelPlaylistView: View {
             VerticalCells(items: items)
                 .environment(\.inChannelPlaylistView, true)
         }
+        .environment(\.listingStyle, channelPlaylistListingStyle)
         .onAppear {
             if navigationStyle == .tab {
                 DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
@@ -69,7 +72,15 @@ struct ChannelPlaylistView: View {
         }
         #if os(tvOS)
         .background(Color.background(scheme: colorScheme))
-        #else
+        #endif
+        #if os(iOS)
+        .toolbar {
+            ToolbarItem(placement: .principal) {
+                playlistMenu
+            }
+        }
+        #endif
+        #if os(macOS)
         .toolbar {
             ToolbarItem(placement: .cancellationAction) {
                 if showCloseButton {
@@ -84,20 +95,58 @@ struct ChannelPlaylistView: View {
 
             ToolbarItem(placement: playlistButtonsPlacement) {
                 HStack {
+                    ListingStyleButtons(listingStyle: $channelPlaylistListingStyle)
                     ShareButton(contentItem: contentItem)
 
-                    if let playlist = presentedPlaylist {
-                        FavoriteButton(item: FavoriteItem(section: .channelPlaylist(accounts.app.appType.rawValue, playlist.id, playlist.title)))
-                    }
+                    favoriteButton
 
                     playButton
                 }
             }
         }
-        .navigationTitle(presentedPlaylist?.title ?? "")
+        .navigationTitle(label)
         #endif
     }
 
+    @ViewBuilder private var favoriteButton: some View {
+        if let playlist = presentedPlaylist {
+            FavoriteButton(item: FavoriteItem(section: .channelPlaylist(accounts.app.appType.rawValue, playlist.id, playlist.title)))
+        }
+    }
+
+    #if os(iOS)
+        private var playlistMenu: some View {
+            Menu {
+                favoriteButton
+
+                ListingStyleButtons(listingStyle: $channelPlaylistListingStyle)
+
+                Section {
+                    SettingsButtons()
+                }
+            } label: {
+                HStack(spacing: 12) {
+                    ThumbnailView(url: store.item?.thumbnailURL ?? playlist?.thumbnailURL)
+                        .frame(width: 60, height: 30)
+                        .clipShape(RoundedRectangle(cornerRadius: 2))
+                    Text(label)
+                        .font(.headline)
+                        .foregroundColor(.primary)
+
+                    Image(systemName: "chevron.down.circle.fill")
+                        .foregroundColor(.accentColor)
+                        .imageScale(.small)
+                }
+                .frame(maxWidth: 320)
+                .transaction { t in t.animation = nil }
+            }
+        }
+    #endif
+
+    private var label: String {
+        presentedPlaylist?.title ?? ""
+    }
+
     private var playlistButtonsPlacement: ToolbarItemPlacement {
         #if os(iOS)
             .navigationBarTrailing
@@ -132,7 +181,8 @@ struct ChannelPlaylistView: View {
 
 struct ChannelPlaylistView_Previews: PreviewProvider {
     static var previews: some View {
-        ChannelPlaylistView(playlist: ChannelPlaylist.fixture)
-            .injectFixtureEnvironmentObjects()
+        NavigationView {
+            ChannelPlaylistView(playlist: ChannelPlaylist.fixture)
+        }
     }
 }

Shared/Views/ChannelVideosView.swift

@@ -1,3 +1,4 @@
+import Defaults
 import SDWebImageSwiftUI
 import Siesta
 import SwiftUI
@@ -27,6 +28,8 @@ struct ChannelVideosView: View {
     @ObservedObject private var subscriptions = SubscribedChannelsModel.shared
     @Namespace private var focusNamespace
 
+    @Default(.channelPlaylistListingStyle) private var channelPlaylistListingStyle
+
     var presentedChannel: Channel? {
         store.item ?? channel ?? recents.presentedChannel
     }
@@ -56,11 +59,6 @@ struct ChannelVideosView: View {
                         viewsLabel
 
                         subscriptionToggleButton
-
-                        if let channel = presentedChannel {
-                            FavoriteButton(item: FavoriteItem(section: .channel(accounts.app.appType.rawValue, channel.id, channel.name)))
-                                .labelStyle(.iconOnly)
-                        }
                     }
                     contentTypePicker
                         .pickerStyle(.automatic)
@@ -72,6 +70,7 @@ struct ChannelVideosView: View {
                 banner
             }
             .environment(\.inChannelView, true)
+            .environment(\.listingStyle, channelPlaylistListingStyle)
             #if os(tvOS)
                 .prefersDefaultFocus(in: focusNamespace)
             #endif
@@ -100,6 +99,9 @@ struct ChannelVideosView: View {
                 ToolbarItem(placement: .navigation) {
                     thumbnail
                 }
+                ToolbarItem {
+                    ListingStyleButtons(listingStyle: $channelPlaylistListingStyle)
+                }
                 ToolbarItem {
                     contentTypePicker
                 }
@@ -217,6 +219,8 @@ struct ChannelVideosView: View {
                         subscriptionToggleButton
                         FavoriteButton(item: FavoriteItem(section: .channel(accounts.app.appType.rawValue, channel.id, channel.name)))
                     }
+
+                    ListingStyleButtons(listingStyle: $channelPlaylistListingStyle)
                 }
             } label: {
                 HStack(spacing: 12) {

Shared/Views/ContentItemView.swift

@@ -3,12 +3,20 @@ import SwiftUI
 
 struct ContentItemView: View {
     let item: ContentItem
+    @Environment(\.listingStyle) private var listingStyle
 
     var body: some View {
         Group {
             switch item.contentType {
             case .video:
-                VideoCell(video: item.video)
+                if listingStyle == .cells {
+                    VideoCell(video: item.video)
+                } else {
+                    PlayerQueueRow(item: .init(item.video))
+                        .contextMenu {
+                            VideoContextMenuView(video: item.video)
+                        }
+                }
             case .playlist:
                 ChannelPlaylistCell(playlist: item.playlist)
             case .channel:

Shared/Views/ListingStyleButtons.swift

@@ -0,0 +1,41 @@
+import SwiftUI
+
+struct ListingStyleButtons: View {
+    @Binding var listingStyle: ListingStyle
+
+    var body: some View {
+        #if os(iOS)
+            picker
+        #else
+            Button {
+                listingStyle = listingStyle.next()
+            } label: {
+                Label(listingStyle.rawValue.capitalized, systemImage: listingStyle.systemImage)
+                #if os(tvOS)
+                    .font(.caption2)
+                    .imageScale(.small)
+                #endif
+            }
+        #endif
+    }
+
+    var picker: some View {
+        Picker("Listing Style", selection: $listingStyle) {
+            ForEach(ListingStyle.allCases, id: \.self) { style in
+                Button {
+                    listingStyle = style
+                } label: {
+                    Label(style.rawValue.capitalized, systemImage: style.systemImage)
+                }
+            }
+        }
+    }
+}
+
+struct ListingStyleButtons_Previews: PreviewProvider {
+    static var previews: some View {
+        VStack {
+            ListingStyleButtons(listingStyle: .constant(.cells))
+        }
+    }
+}

Shared/Views/PopularView.swift

@@ -1,3 +1,4 @@
+import Defaults
 import Siesta
 import SwiftUI
 
@@ -6,6 +7,8 @@ struct PopularView: View {
 
     @ObservedObject private var accounts = AccountsModel.shared
 
+    @Default(.popularListingStyle) private var popularListingStyle
+
     var resource: Resource? {
         accounts.api.popular
     }
@@ -20,6 +23,7 @@ struct PopularView: View {
                 resource?.addObserver(store)
                 resource?.loadIfNeeded()
             }
+            .environment(\.listingStyle, popularListingStyle)
         #if !os(tvOS)
             .navigationTitle("Popular")
             .background(
@@ -31,6 +35,12 @@ struct PopularView: View {
             )
         #endif
         #if os(iOS)
+        .toolbar {
+            ToolbarItem(placement: .principal) {
+                popularMenu
+            }
+        }
+        .navigationBarTitleDisplayMode(.inline)
         .refreshControl { refreshControl in
             resource?.load().onCompletion { _ in
                 refreshControl.endRefreshing()
@@ -47,10 +57,53 @@ struct PopularView: View {
         }
         .navigationBarTitleDisplayMode(RefreshControl.navigationBarTitleDisplayMode)
         #endif
-        #if !os(macOS)
-        .onReceive(NotificationCenter.default.publisher(for: UIApplication.willEnterForegroundNotification)) { _ in
-            resource?.loadIfNeeded()
+        #if os(macOS)
+        .toolbar {
+            ToolbarItem {
+                ListingStyleButtons(listingStyle: $popularListingStyle)
+            }
         }
+        #else
+                .onReceive(NotificationCenter.default.publisher(for: UIApplication.willEnterForegroundNotification)) { _ in
+                    resource?.loadIfNeeded()
+                }
         #endif
     }
+
+    #if os(iOS)
+        private var popularMenu: some View {
+            Menu {
+                ListingStyleButtons(listingStyle: $popularListingStyle)
+
+                Section {
+                    SettingsButtons()
+                }
+            } label: {
+                HStack(spacing: 12) {
+                    HStack(spacing: 6) {
+                        Image(systemName: "arrow.up.right.circle.fill")
+                            .foregroundColor(.primary)
+                            .imageScale(.small)
+
+                        Text("Popular")
+                            .font(.headline)
+                            .foregroundColor(.primary)
+                    }
+
+                    Image(systemName: "chevron.down.circle.fill")
+                        .foregroundColor(.accentColor)
+                        .imageScale(.small)
+                }
+                .transaction { t in t.animation = nil }
+            }
+        }
+    #endif
+}
+
+struct PopularView_Previews: PreviewProvider {
+    static var previews: some View {
+        NavigationView {
+            PopularView()
+        }
+    }
 }