Listing styles

2025-08-04 01:34:10 +00:00 · 2022-12-12 01:18:29 +01:00
parent c2d16774f7
commit 25da312966
19 changed files with 305 additions and 45 deletions
--- a/Shared/Defaults.swift
+++ b/Shared/Defaults.swift
@@ -203,6 +203,13 @@ extension Defaults.Keys {
    static let mpvEnableLogging = Key<Bool>("mpvEnableLogging", default: false)

    static let subscriptionsViewPage = Key<SubscriptionsView.Page>("subscriptionsViewPage", default: .feed)
+
+    static let subscriptionsListingStyle = Key<ListingStyle>("subscriptionsListingStyle", default: .cells)
+    static let popularListingStyle = Key<ListingStyle>("popularListingStyle", default: .cells)
+    static let trendingListingStyle = Key<ListingStyle>("trendingListingStyle", default: .cells)
+    static let playlistListingStyle = Key<ListingStyle>("playlistListingStyle", default: .cells)
+    static let channelPlaylistListingStyle = Key<ListingStyle>("channelPlaylistListingStyle", default: .cells)
+    static let searchListingStyle = Key<ListingStyle>("searchListingStyle", default: .cells)
 }

 enum ResolutionSetting: String, CaseIterable, Defaults.Serializable {
--- a/Shared/EnvironmentValues.swift
+++ b/Shared/EnvironmentValues.swift
@@ -1,3 +1,4 @@
+import Defaults
 import Foundation
 import SwiftUI

@@ -21,6 +22,24 @@ private struct NavigationStyleKey: EnvironmentKey {
    static let defaultValue = NavigationStyle.tab
 }

+private struct ListingStyleKey: EnvironmentKey {
+    static let defaultValue = ListingStyle.cells
+}
+
+enum ListingStyle: String, CaseIterable, Defaults.Serializable {
+    case cells
+    case list
+
+    var systemImage: String {
+        switch self {
+        case .cells:
+            return "rectangle.grid.2x2"
+        case .list:
+            return "list.dash"
+        }
+    }
+}
+
 private struct CurrentPlaylistID: EnvironmentKey {
    static let defaultValue: String? = nil
 }
@@ -70,4 +89,9 @@ extension EnvironmentValues {
        get { self[ScrollViewBottomPaddingKey.self] }
        set { self[ScrollViewBottomPaddingKey.self] = newValue }
    }
+
+    var listingStyle: ListingStyle {
+        get { self[ListingStyleKey.self] }
+        set { self[ListingStyleKey.self] = newValue }
+    }
 }
--- a/Shared/Navigation/AccountViewButton.swift
+++ b/Shared/Navigation/AccountViewButton.swift
@@ -1,7 +1,7 @@
 import Defaults
 import SwiftUI

-struct AccountsMenuView: View {
+struct AccountViewButton: View {
    @ObservedObject private var model = AccountsModel.shared
    private var navigation = NavigationModel.shared

@@ -17,7 +17,13 @@ struct AccountsMenuView: View {
            } label: {
                HStack {
                    if !accountPickerDisplaysUsername || !(model.current?.isPublic ?? true) {
-                        Image(systemName: "globe")
+                        if let name = model.current?.app?.rawValue.capitalized {
+                            Image(name)
+                                .resizable()
+                                .frame(width: 30, height: 30)
+                        } else {
+                            Image(systemName: "globe")
+                        }
                    }

                    if accountPickerDisplaysUsername {
--- a/Shared/Navigation/AppSidebarNavigation.swift
+++ b/Shared/Navigation/AppSidebarNavigation.swift
@@ -76,7 +76,7 @@ struct AppSidebarNavigation: View {
            }

            ToolbarItemGroup(placement: accountsMenuToolbarItemPlacement) {
-                AccountsMenuView()
+                AccountViewButton()
            }

            #if os(macOS)
--- a/Shared/Navigation/AppTabNavigation.swift
+++ b/Shared/Navigation/AppTabNavigation.swift
@@ -159,7 +159,7 @@ struct AppTabNavigation: View {
                            Label("Open Videos", systemImage: "play.circle.fill")
                        }
                    }
-                    AccountsMenuView()
+                    AccountViewButton()
                }
            }
        #endif
--- a/Shared/Playlists/PlaylistsView.swift
+++ b/Shared/Playlists/PlaylistsView.swift
@@ -21,6 +21,8 @@ struct PlaylistsView: View {

    @Namespace private var focusNamespace

+    @Default(.playlistListingStyle) private var playlistListingStyle
+
    var items: [ContentItem] {
        var videos = currentPlaylist?.videos ?? []

@@ -88,6 +90,7 @@ struct PlaylistsView: View {
                            #endif
                        }
                        .environment(\.currentPlaylistID, currentPlaylist?.id)
+                        .environment(\.listingStyle, playlistListingStyle)
                    }
                }
            }
@@ -151,11 +154,17 @@ struct PlaylistsView: View {
        )
        #endif

-        #if !os(macOS)
-        .onReceive(NotificationCenter.default.publisher(for: UIApplication.willEnterForegroundNotification)) { _ in
-            model.load()
-            loadResource()
+        #if os(macOS)
+        .toolbar {
+            ToolbarItem {
+                ListingStyleButtons(listingStyle: $playlistListingStyle)
+            }
        }
+        #else
+                .onReceive(NotificationCenter.default.publisher(for: UIApplication.willEnterForegroundNotification)) { _ in
+                    model.load()
+                    loadResource()
+                }
        #endif
        #if !os(tvOS)
        .background(
@@ -210,21 +219,27 @@ struct PlaylistsView: View {

                selectPlaylistButton

+                ListingStyleButtons(listingStyle: $playlistListingStyle)
+
                Section {
                    SettingsButtons()
                }
            } label: {
                HStack(spacing: 12) {
-                    Text(currentPlaylist?.title ?? "Playlists")
-                        .font(.headline)
-                        .foregroundColor(.primary)
+                    HStack(spacing: 6) {
+                        Image(systemName: "list.and.film")
+
+                        Text(currentPlaylist?.title ?? "Playlists")
+                            .font(.headline)
+                    }
+                    .foregroundColor(.primary)

                    Image(systemName: "chevron.down.circle.fill")
                        .foregroundColor(.accentColor)
-                        .imageScale(.small)
                }
+                .imageScale(.small)
                .lineLimit(1)
-                .frame(maxWidth: 300)
+                .frame(maxWidth: 320)
                .transaction { t in t.animation = nil }
            }
            .disabled(!accounts.signedIn)
@@ -247,7 +262,7 @@ struct PlaylistsView: View {
                if let playlist = currentPlaylist {
                    editPlaylistButton

-                    FavoriteButton(item: FavoriteItem(section: .playlist(playlist.id)))
+                    FavoriteButton(item: FavoriteItem(section: .playlist(accounts.current.id, playlist.id)))
                        .labelStyle(.iconOnly)

                    playButton
--- a/Shared/Search/SearchView.swift
+++ b/Shared/Search/SearchView.swift
@@ -29,6 +29,7 @@ struct SearchView: View {
    @Default(.recentlyOpened) private var recentlyOpened
    @Default(.saveRecents) private var saveRecents
    @Default(.showHome) private var showHome
+    @Default(.searchListingStyle) private var searchListingStyle

    private var videos = [Video]()

@@ -68,9 +69,11 @@ struct SearchView: View {
                }
            #endif
        }
+        .environment(\.listingStyle, searchListingStyle)
        .toolbar {
            #if os(macOS)
                ToolbarItemGroup(placement: toolbarPlacement) {
+                    ListingStyleButtons(listingStyle: $searchListingStyle)
                    FavoriteButton(item: favoriteItem)
                        .id(favoriteItem?.id)

@@ -212,6 +215,8 @@ struct SearchView: View {
                    }
                }

+                ListingStyleButtons(listingStyle: $searchListingStyle)
+
                Section {
                    SettingsButtons()
                }
--- a/Shared/Subscriptions/FeedView.swift
+++ b/Shared/Subscriptions/FeedView.swift
@@ -6,6 +6,10 @@ struct FeedView: View {
    @ObservedObject private var feed = FeedModel.shared
    @ObservedObject private var accounts = AccountsModel.shared

+    #if os(tvOS)
+        @Default(.subscriptionsListingStyle) private var subscriptionsListingStyle
+    #endif
+
    var videos: [ContentItem] {
        ContentItem.array(of: feed.videos)
    }
@@ -15,6 +19,7 @@ struct FeedView: View {
            HStack {
                #if os(tvOS)
                    SubscriptionsPageButton()
+                    ListingStyleButtons(listingStyle: $subscriptionsListingStyle)
                #endif

                Spacer()
--- a/Shared/Subscriptions/SubscriptionsView.swift
+++ b/Shared/Subscriptions/SubscriptionsView.swift
@@ -8,6 +8,7 @@ struct SubscriptionsView: View {
    }

    @Default(.subscriptionsViewPage) private var subscriptionsViewPage
+    @Default(.subscriptionsListingStyle) private var subscriptionsListingStyle

    var body: some View {
        SignInRequiredView(title: "Subscriptions".localized()) {
@@ -21,12 +22,20 @@ struct SubscriptionsView: View {
                #endif
            }
        }
+        .environment(\.listingStyle, subscriptionsListingStyle)

        #if os(iOS)
-        .navigationBarTitleDisplayMode(.inline)
+            .navigationBarTitleDisplayMode(.inline)
+            .toolbar {
+                ToolbarItem(placement: .principal) {
+                    subscriptionsMenu
+                }
+            }
+        #endif
+        #if os(macOS)
        .toolbar {
-            ToolbarItem(placement: .principal) {
-                subscriptionsMenu
+            ToolbarItem {
+                ListingStyleButtons(listingStyle: $subscriptionsListingStyle)
            }
        }
        #endif
@@ -40,6 +49,10 @@ struct SubscriptionsView: View {
                    Label("Channels", systemImage: "person.3.fill").tag(Page.channels)
                }

+                if subscriptionsViewPage == .feed {
+                    ListingStyleButtons(listingStyle: $subscriptionsListingStyle)
+                }
+
                Section {
                    SettingsButtons()
                }
@@ -59,6 +72,7 @@ struct SubscriptionsView: View {
        var menuLabel: some View {
            HStack {
                Image(systemName: subscriptionsViewPage == .channels ? "person.3.fill" : "film")
+                    .imageScale(.small)
                Text(subscriptionsViewPage.rawValue.capitalized.localized())
                    .font(.headline)
            }
--- a/Shared/Trending/TrendingView.swift
+++ b/Shared/Trending/TrendingView.swift
@@ -9,6 +9,8 @@ struct TrendingView: View {
    @Default(.trendingCategory) private var category
    @Default(.trendingCountry) private var country

+    @Default(.trendingListingStyle) private var trendingListingStyle
+
    @State private var presentingCountrySelection = false

    @State private var favoriteItem: FavoriteItem?
@@ -46,6 +48,7 @@ struct TrendingView: View {
                        .environment(\.scrollViewBottomPadding, 70)
                #endif
            }
+            .environment(\.listingStyle, trendingListingStyle)
        }

        .toolbar {
@@ -119,10 +122,16 @@ struct TrendingView: View {
            }
        }
        #endif
-        #if !os(macOS)
-        .onReceive(NotificationCenter.default.publisher(for: UIApplication.willEnterForegroundNotification)) { _ in
-            resource.loadIfNeeded()
+        #if os(macOS)
+        .toolbar {
+            ToolbarItem {
+                ListingStyleButtons(listingStyle: $trendingListingStyle)
+            }
        }
+        #else
+                .onReceive(NotificationCenter.default.publisher(for: UIApplication.willEnterForegroundNotification)) { _ in
+                    resource.loadIfNeeded()
+                }
        #endif
    }

@@ -163,6 +172,8 @@ struct TrendingView: View {
                    categoryButton
                }

+                ListingStyleButtons(listingStyle: $trendingListingStyle)
+
                Section {
                    SettingsButtons()
                }
--- a/Shared/Videos/VerticalCells.swift
+++ b/Shared/Videos/VerticalCells.swift
@@ -8,6 +8,7 @@ struct VerticalCells<Header: View>: View {

    @Environment(\.scrollViewBottomPadding) private var scrollViewBottomPadding
    @Environment(\.loadMoreContentHandler) private var loadMoreContentHandler
+    @Environment(\.listingStyle) private var listingStyle

    var items = [ContentItem]()
    var allowEmpty = false
@@ -70,7 +71,11 @@ struct VerticalCells<Header: View>: View {
    }

    var adaptiveItem: [GridItem] {
-        [GridItem(.adaptive(minimum: adaptiveGridItemMinimumSize, maximum: adaptiveGridItemMaximumSize))]
+        if listingStyle == .list {
+            return [.init(.flexible())]
+        }
+
+        return [GridItem(.adaptive(minimum: adaptiveGridItemMinimumSize, maximum: adaptiveGridItemMaximumSize))]
    }

    var adaptiveGridItemMinimumSize: Double {
--- a/Shared/Views/ChannelPlaylistView.swift
+++ b/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)
+        }
    }
 }
--- a/Shared/Views/ChannelVideosView.swift
+++ b/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) {
--- a/Shared/Views/ContentItemView.swift
+++ b/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:
--- a/Shared/Views/ListingStyleButtons.swift
+++ b/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))
+        }
+    }
+}
--- a/Shared/Views/PopularView.swift
+++ b/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()
+        }
+    }
 }