Simplify video views

Shared/AppSidebarNavigation.swift

@@ -44,15 +44,54 @@ struct AppSidebarNavigation: View {
                 SubscriptionsView()
             }
             label: {
-                Label("Subscriptions", systemImage: "star")
+                Label("Subscriptions", systemImage: "play.rectangle.fill")
+                    .accessibility(label: Text("Subscriptions"))
             }
 
             NavigationLink(tag: TabSelection.popular, selection: navigationState.tabSelectionOptionalBinding) {
-                PopularVideosView()
+                PopularView()
             }
             label: {
                 Label("Popular", systemImage: "chart.bar")
+                    .accessibility(label: Text("Popular"))
+            }
+
+            NavigationLink(tag: TabSelection.trending, selection: navigationState.tabSelectionOptionalBinding) {
+                TrendingView()
+            }
+            label: {
+                Label("Trending", systemImage: "chart.line.uptrend.xyaxis")
+                    .accessibility(label: Text("Trending"))
+            }
+
+            NavigationLink(tag: TabSelection.playlists, selection: navigationState.tabSelectionOptionalBinding) {
+                PlaylistsView()
+            }
+            label: {
+                Label("Playlists", systemImage: "list.and.film")
+                    .accessibility(label: Text("Playlists"))
+            }
+
+            NavigationLink(tag: TabSelection.search, selection: navigationState.tabSelectionOptionalBinding) {
+                SearchView()
+            }
+            label: {
+                Label("Search", systemImage: "magnifyingglass")
+                    .accessibility(label: Text("Search"))
             }
         }
+        #if os(macOS)
+            .toolbar {
+                Button(action: toggleSidebar) {
+                    Image(systemName: "sidebar.left").help("Toggle Sidebar")
+                }
+            }
+        #endif
     }
+
+    #if os(macOS)
+        private func toggleSidebar() {
+            NSApp.keyWindow?.contentViewController?.tryToPerform(#selector(NSSplitViewController.toggleSidebar(_:)), with: nil)
+        }
+    #endif
 }

Shared/AppTabNavigation.swift

@@ -16,7 +16,7 @@ struct AppTabNavigation: View {
             .tag(TabSelection.subscriptions)
 
             NavigationView {
-                PopularVideosView()
+                PopularView()
             }
             .tabItem {
                 Label("Popular", systemImage: "chart.bar")

Shared/PearvidiousApp.swift

@@ -6,5 +6,10 @@ struct PearvidiousApp: App {
         WindowGroup {
             ContentView()
         }
+        #if !os(tvOS)
+            .commands {
+                SidebarCommands()
+            }
+        #endif
     }
 }

Shared/PlaylistsView.swift

@@ -0,0 +1,157 @@
+import Defaults
+import Siesta
+import SwiftUI
+
+struct PlaylistsView: View {
+    @ObservedObject private var store = Store<[Playlist]>()
+
+    @Default(.selectedPlaylistID) private var selectedPlaylistID
+
+    @State private var showingNewPlaylist = false
+    @State private var createdPlaylist: Playlist?
+
+    @State private var showingEditPlaylist = false
+    @State private var editedPlaylist: Playlist?
+
+    var resource: Resource {
+        InvidiousAPI.shared.playlists
+    }
+
+    init() {
+        resource.addObserver(store)
+    }
+
+    var body: some View {
+        Section {
+            VStack(alignment: .center, spacing: 2) {
+                #if os(tvOS)
+                    HStack {
+                        if store.collection.isEmpty {
+                            Text("No Playlists")
+                                .foregroundColor(.secondary)
+                        } else {
+                            Text("Current Playlist")
+                                .foregroundColor(.secondary)
+
+                            selectPlaylistButton
+                        }
+
+                        if currentPlaylist != nil {
+                            editPlaylistButton
+                        }
+
+                        newPlaylistButton
+                            .padding(.leading, 40)
+                    }
+                    .scaleEffect(0.85)
+                #endif
+
+                if currentPlaylist != nil {
+                    if currentPlaylist!.videos.isEmpty {
+                        Spacer()
+
+                        Text("Playlist is empty\n\nTap and hold on a video and then tap \"Add to Playlist\"")
+                            .foregroundColor(.secondary)
+                            .multilineTextAlignment(.center)
+
+                        Spacer()
+                    } else {
+                        VideosView(videos: currentPlaylist!.videos)
+                    }
+                } else {
+                    Spacer()
+                }
+            }
+        }
+        #if !os(macOS)
+            .fullScreenCover(isPresented: $showingNewPlaylist, onDismiss: selectCreatedPlaylist) {
+                PlaylistFormView(playlist: $createdPlaylist)
+            }
+            .fullScreenCover(isPresented: $showingEditPlaylist, onDismiss: selectEditedPlaylist) {
+                PlaylistFormView(playlist: $editedPlaylist)
+            }
+        #endif
+        .onAppear {
+            resource.loadIfNeeded()?.onSuccess { _ in
+                selectPlaylist(selectedPlaylistID)
+            }
+        }
+        #if !os(tvOS)
+            .navigationTitle("Playlists")
+        #elseif os(iOS)
+            .navigationBarItems(trailing: newPlaylistButton)
+        #endif
+    }
+
+    func selectPlaylist(_ id: String?) {
+        selectedPlaylistID = id
+    }
+
+    func selectCreatedPlaylist() {
+        guard createdPlaylist != nil else {
+            return
+        }
+
+        resource.load().onSuccess { _ in
+            self.selectPlaylist(createdPlaylist?.id)
+
+            self.createdPlaylist = nil
+        }
+    }
+
+    func selectEditedPlaylist() {
+        if editedPlaylist == nil {
+            selectPlaylist(nil)
+        }
+
+        resource.load().onSuccess { _ in
+            selectPlaylist(editedPlaylist?.id)
+
+            self.editedPlaylist = nil
+        }
+    }
+
+    var currentPlaylist: Playlist? {
+        store.collection.first { $0.id == selectedPlaylistID } ?? store.collection.first
+    }
+
+    var selectPlaylistButton: some View {
+        Button(currentPlaylist?.title ?? "Select playlist") {
+            guard currentPlaylist != nil else {
+                return
+            }
+
+            selectPlaylist(store.collection.next(after: currentPlaylist!)?.id)
+        }
+        .contextMenu {
+            ForEach(store.collection) { playlist in
+                Button(playlist.title) {
+                    selectPlaylist(playlist.id)
+                }
+            }
+        }
+    }
+
+    var editPlaylistButton: some View {
+        Button(action: {
+            self.editedPlaylist = self.currentPlaylist
+            self.showingEditPlaylist = true
+        }) {
+            HStack(spacing: 8) {
+                Image(systemName: "pencil")
+                Text("Edit")
+            }
+        }
+    }
+
+    var newPlaylistButton: some View {
+        Button(action: { self.showingNewPlaylist = true }) {
+            HStack(spacing: 8) {
+                Image(systemName: "plus")
+                #if os(tvOS)
+                    Text("New Playlist")
+                #endif
+            }
+        }
+    }
+}

Shared/PopularView.swift

@@ -0,0 +1,22 @@
+import Siesta
+import SwiftUI
+
+struct PopularView: View {
+    @ObservedObject private var store = Store<[Video]>()
+
+    var resource = InvidiousAPI.shared.popular
+
+    init() {
+        resource.addObserver(store)
+    }
+
+    var body: some View {
+        VideosView(videos: store.collection)
+        #if !os(tvOS)
+            .navigationTitle("Popular")
+        #endif
+        .onAppear {
+            resource.loadIfNeeded()
+        }
+    }
+}

Shared/SearchView.swift

@@ -0,0 +1,73 @@
+import Defaults
+import Siesta
+import SwiftUI
+
+struct SearchView: View {
+    @Default(.searchQuery) private var queryText
+    @Default(.searchSortOrder) private var searchSortOrder
+    @Default(.searchDate) private var searchDate
+    @Default(.searchDuration) private var searchDuration
+
+    @ObservedObject private var store = Store<[Video]>()
+    @ObservedObject private var query = SearchQuery()
+
+    var body: some View {
+        VStack {
+            if !store.collection.isEmpty {
+                VideosView(videos: store.collection)
+            }
+
+            if store.collection.isEmpty && !resource.isLoading && !query.isEmpty {
+                Text("No results")
+
+                if searchFiltersActive {
+                    Button("Reset search filters") {
+                        Defaults.reset(.searchDate, .searchDuration)
+                    }
+                }
+
+                Spacer()
+            }
+        }
+        .searchable(text: $queryText)
+        .onAppear {
+            changeQuery {
+                query.query = queryText
+                query.sortBy = searchSortOrder
+                query.date = searchDate
+                query.duration = searchDuration
+            }
+        }
+        .onChange(of: queryText) { queryText in
+            changeQuery { query.query = queryText }
+        }
+        .onChange(of: searchSortOrder) { order in
+            changeQuery { query.sortBy = order }
+        }
+        .onChange(of: searchDate) { date in
+            changeQuery { query.date = date }
+        }
+        .onChange(of: searchDuration) { duration in
+            changeQuery { query.duration = duration }
+        }
+        #if !os(tvOS)
+            .navigationTitle("Search")
+        #endif
+    }
+
+    func changeQuery(_ change: @escaping () -> Void = {}) {
+        resource.removeObservers(ownedBy: store)
+        change()
+
+        resource.addObserver(store)
+        resource.loadIfNeeded()
+    }
+
+    var resource: Resource {
+        InvidiousAPI.shared.search(query)
+    }
+
+    var searchFiltersActive: Bool {
+        searchDate != nil || searchDuration != nil
+    }
+}

Shared/SubscriptionsView.swift

@@ -0,0 +1,24 @@
+import SwiftUI
+
+struct SubscriptionsView: View {
+    @ObservedObject private var store = Store<[Video]>()
+
+    var resource = InvidiousAPI.shared.subscriptions
+
+    init() {
+        resource.addObserver(store)
+    }
+
+    var body: some View {
+        VideosView(videos: store.collection)
+            .onAppear {
+                resource.loadIfNeeded()
+            }
+            .refreshable {
+                resource.load()
+            }
+        #if !os(tvOS)
+            .navigationTitle("Subscriptions")
+        #endif
+    }
+}

Shared/TrendingView.swift

@@ -0,0 +1,89 @@
+import Siesta
+import SwiftUI
+
+struct TrendingView: View {
+    @State private var category: TrendingCategory = .default
+    @State private var country: Country = .pl
+    @State private var selectingCountry = false
+
+    @ObservedObject private var store = Store<[Video]>()
+
+    var resource: Resource {
+        InvidiousAPI.shared.trending(category: category, country: country)
+    }
+
+    init() {
+        resource.addObserver(store)
+    }
+
+    var body: some View {
+        Section {
+            VStack(alignment: .center, spacing: 2) {
+                #if os(tvOS)
+                    HStack {
+                        Text("Category")
+                            .foregroundColor(.secondary)
+
+                        categoryButton
+
+                        Text("Country")
+                            .foregroundColor(.secondary)
+
+                        countryFlag
+                        countryButton
+                    }
+                    .scaleEffect(0.85)
+                #endif
+
+                VideosView(videos: store.collection)
+            }
+        }
+        #if !os(tvOS)
+            .navigationTitle("Trending")
+        #endif
+        .onAppear {
+            resource.loadIfNeeded()
+        }
+    }
+
+    var categoryButton: some View {
+        Button(category.name) {
+            setCategory(category.next())
+        }
+        .contextMenu {
+            ForEach(TrendingCategory.allCases) { category in
+                Button(category.name) { setCategory(category) }
+            }
+        }
+    }
+
+    var countryFlag: some View {
+        Text(country.flag)
+            .font(.system(size: 60))
+    }
+
+    var countryButton: some View {
+        Button(country.rawValue) {
+            selectingCountry.toggle()
+            resource.removeObservers(ownedBy: store)
+        }
+        #if os(tvOS)
+            .fullScreenCover(isPresented: $selectingCountry, onDismiss: { setCountry(country) }) {
+                TrendingCountrySelectionView(selectedCountry: $country)
+            }
+        #endif
+    }
+
+    fileprivate func setCategory(_ category: TrendingCategory) {
+        resource.removeObservers(ownedBy: store)
+        self.category = category
+        resource.addObserver(store)
+        resource.loadIfNeeded()
+    }
+
+    fileprivate func setCountry(_ country: Country) {
+        self.country = country
+        resource.addObserver(store)
+        resource.loadIfNeeded()
+    }
+}

Shared/VideoView.swift

@@ -1,20 +1,301 @@
-//
-//  VideoView.swift
-//  VideoView
-//
-//  Created by Arkadiusz Fal on 26/07/2021.
-//
-
+import Defaults
 import SwiftUI
 
 struct VideoView: View {
+    @EnvironmentObject<NavigationState> private var navigationState
+
+    @Environment(\.isFocused) private var focused: Bool
+
+    #if os(iOS)
+        @Environment(\.verticalSizeClass) private var verticalSizeClass
+    #endif
+
+    var layout: ListingLayout?
+
+    var video: Video
+
+    init(video: Video, layout: ListingLayout? = nil) {
+        self.video = video
+        self.layout = layout
+
+        #if os(tvOS)
+            if self.layout == nil {
+                self.layout = Defaults[.layout]
+            }
+        #endif
+    }
+
     var body: some View {
-        Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/)
+        #if os(tvOS)
+            if layout == .cells {
+                tvOSButton
+                    .buttonStyle(.plain)
+                    .padding(.vertical)
+            } else {
+                tvOSButton
+            }
+        #elseif os(macOS)
+            NavigationLink(destination: VideoPlayerView(video)) {
+                verticalRow
+            }
+        #else
+            ZStack {
+                #if os(macOS)
+                    verticalRow
+                #else
+                    if verticalSizeClass == .compact {
+                        horizontalRow(padding: 4)
+                    } else {
+                        verticalRow
+                    }
+                #endif
+
+                NavigationLink(destination: VideoPlayerView(video)) {
+                    EmptyView()
+                }
+                .buttonStyle(PlainButtonStyle())
+                .opacity(0)
+                .frame(height: 0)
+            }
+        #endif
+    }
+
+    #if os(tvOS)
+        var tvOSButton: some View {
+            Button(action: { navigationState.playVideo(video) }) {
+                if layout == .cells {
+                    cellRow
+                } else {
+                    horizontalRow(detailsOnThumbnail: false)
+                }
+            }
+        }
+    #endif
+
+    func horizontalRow(detailsOnThumbnail: Bool = true, padding: Double = 0) -> some View {
+        HStack(alignment: .top, spacing: 2) {
+            if detailsOnThumbnail {
+                thumbnailWithDetails()
+                    .padding(padding)
+            } else {
+                thumbnail(.medium, maxWidth: 320, maxHeight: 180)
+            }
+
+            VStack(alignment: .leading, spacing: 0) {
+                videoDetail(video.title, bold: true)
+                    .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
+
+                if !detailsOnThumbnail {
+                    videoDetail(video.author, color: .secondary, bold: true)
+                }
+
+                Spacer()
+
+                additionalDetails
+            }
+            .padding()
+            .frame(minHeight: 180)
+
+            if !detailsOnThumbnail {
+                if video.playTime != nil || video.live || video.upcoming {
+                    Spacer()
+
+                    VStack(alignment: .center) {
+                        Spacer()
+
+                        if let time = video.playTime {
+                            HStack(spacing: 4) {
+                                Image(systemName: "clock")
+                                Text(time)
+                                    .fontWeight(.bold)
+                            }
+                            .foregroundColor(.secondary)
+                        } else if video.live {
+                            DetailBadge(text: "Live", style: .outstanding)
+                        } else if video.upcoming {
+                            DetailBadge(text: "Upcoming", style: .informational)
+                        }
+
+                        Spacer()
+                    }
+                }
+            }
+        }
+    }
+
+    var verticalRow: some View {
+        VStack(alignment: .leading) {
+            thumbnailWithDetails(minWidth: 250, maxWidth: 600, minHeight: 180)
+                .frame(idealWidth: 320)
+                .padding([.leading, .top, .trailing], 4)
+
+            VStack(alignment: .leading) {
+                videoDetail(video.title, bold: true)
+                    .padding(.bottom)
+
+                additionalDetails
+                    .padding(.bottom, 10)
+            }
+            .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
+            .padding(.horizontal, 8)
+        }
+    }
+
+    var cellRow: some View {
+        VStack(alignment: .leading) {
+            thumbnailWithDetails(minWidth: 550, maxWidth: 550, minHeight: 310, maxHeight: 310)
+                .padding([.leading, .top, .trailing], 4)
+
+            VStack(alignment: .leading) {
+                videoDetail(video.title, bold: true, lineLimit: additionalDetailsAvailable ? 2 : 3)
+                    .frame(minHeight: 80, alignment: .top)
+                    .padding(.bottom)
+
+                if additionalDetailsAvailable {
+                    additionalDetails
+                        .padding(.bottom, 10)
+                } else {
+                    Spacer()
+                }
+            }
+            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 150, alignment: .leading)
+            .padding(10)
+        }
+        .frame(width: 558)
+    }
+
+    var additionalDetailsAvailable: Bool {
+        video.publishedDate != nil || video.views != 0
+    }
+
+    var additionalDetails: some View {
+        HStack(spacing: 8) {
+            if let date = video.publishedDate {
+                Image(systemName: "calendar")
+                Text(date)
+            }
+
+            if video.views != 0 {
+                Image(systemName: "eye")
+                Text(video.viewsCount)
+            }
+        }
+        #if os(tvOS)
+            .foregroundColor(.secondary)
+        #else
+            .foregroundColor(focused ? .white : .secondary)
+        #endif
+    }
+
+    func thumbnailWithDetails(
+        minWidth: Double = 250,
+        maxWidth: Double = .infinity,
+        minHeight: Double = 140,
+        maxHeight: Double = .infinity
+    ) -> some View {
+        ZStack(alignment: .trailing) {
+            thumbnail(.maxres, minWidth: minWidth, maxWidth: maxWidth, minHeight: minHeight, maxHeight: maxHeight)
+
+            VStack {
+                HStack(alignment: .top) {
+                    if video.live {
+                        DetailBadge(text: "Live", style: .outstanding)
+                    } else if video.upcoming {
+                        DetailBadge(text: "Upcoming", style: .informational)
+                    }
+
+                    Spacer()
+
+                    DetailBadge(text: video.author, style: .prominent)
+                }
+                .padding(10)
+
+                Spacer()
+
+                HStack(alignment: .top) {
+                    Spacer()
+
+                    if let time = video.playTime {
+                        DetailBadge(text: time, style: .prominent)
+                    }
+                }
+                .padding(10)
+            }
+        }
+    }
+
+    func thumbnail(
+        _ quality: Thumbnail.Quality,
+        minWidth: Double = 320,
+        maxWidth: Double = .infinity,
+        minHeight: Double = 180,
+        maxHeight: Double = .infinity
+    ) -> some View {
+        Group {
+            if let url = video.thumbnailURL(quality: quality) {
+                AsyncImage(url: url) { image in
+                    image
+                        .resizable()
+                        .aspectRatio(contentMode: .fill)
+                        .frame(minWidth: minWidth, maxWidth: maxWidth, minHeight: minHeight, maxHeight: maxHeight)
+                } placeholder: {
+                    ProgressView()
+                }
+                .mask(RoundedRectangle(cornerRadius: 12))
+            } else {
+                Image(systemName: "exclamationmark.square")
+            }
+        }
+        .frame(minWidth: minWidth, maxWidth: maxWidth, minHeight: minHeight, maxHeight: maxHeight)
+    }
+
+    func videoDetail(_ text: String, color: Color? = .primary, bold: Bool = false, lineLimit: Int = 1) -> some View {
+        Text(text)
+            .fontWeight(bold ? .bold : .regular)
+        #if os(tvOS)
+            .foregroundColor(color)
+            .lineLimit(lineLimit)
+            .truncationMode(.middle)
+        #elseif os(iOS) || os(macOS)
+            .foregroundColor(focused ? .white : color)
+        #endif
     }
 }
 
-struct VideoView_Previews: PreviewProvider {
+struct VideoListRowPreview: PreviewProvider {
     static var previews: some View {
-        VideoView()
+        #if os(tvOS)
+            List {
+                ForEach(Video.allFixtures) { video in
+                    VideoView(video: video, layout: .list)
+                }
+            }
+            .listStyle(GroupedListStyle())
+
+            HStack {
+                ForEach(Video.allFixtures) { video in
+                    VideoView(video: video, layout: .cells)
+                }
+            }
+            .frame(maxHeight: 600)
+        #else
+            List {
+                ForEach(Video.allFixtures) { video in
+                    VideoView(video: video, layout: .list)
+                }
+            }
+            #if os(macOS)
+                .frame(minHeight: 800)
+            #endif
+
+            #if os(iOS)
+                List {
+                    ForEach(Video.allFixtures) { video in
+                        VideoView(video: video, layout: .list)
+                    }
+                }
+                .previewInterfaceOrientation(.landscapeRight)
+            #endif
+        #endif
     }
 }

Shared/VideosListView.swift

@@ -0,0 +1,37 @@
+import Defaults
+import SwiftUI
+
+struct VideosListView: View {
+    var videos: [Video]
+
+    var body: some View {
+        Section {
+            List {
+                ForEach(videos) { video in
+                    VideoView(video: video, layout: .list)
+                        .contextMenu { VideoContextMenuView(video: video) }
+                    #if os(tvOS)
+                        .listRowInsets(listRowInsets)
+
+                    #elseif os(iOS)
+                        .listRowInsets(EdgeInsets(.zero))
+                        .listRowSeparator(.hidden)
+                    #endif
+                }
+            }
+            #if os(tvOS)
+                .listStyle(GroupedListStyle())
+            #endif
+        }
+    }
+
+    var listRowInsets: EdgeInsets {
+        EdgeInsets(top: .zero, leading: .zero, bottom: .zero, trailing: 30)
+    }
+}
+
+struct VideosListView_Previews: PreviewProvider {
+    static var previews: some View {
+        VideosListView(videos: Video.allFixtures)
+    }
+}

Shared/VideosView.swift

@@ -0,0 +1,49 @@
+import Defaults
+import SwiftUI
+
+struct VideosView: View {
+    @EnvironmentObject<NavigationState> private var navigationState
+
+    @State private var profile = Profile()
+
+    #if os(tvOS)
+        @Default(.layout) var layout
+    #endif
+
+    @Default(.showingAddToPlaylist) var showingAddToPlaylist
+
+    #if os(iOS)
+        @Environment(\.verticalSizeClass) private var horizontalSizeClass
+    #endif
+
+    var videos: [Video]
+
+    var body: some View {
+        VStack {
+            #if os(tvOS)
+                if layout == .cells {
+                    VideosCellsView(videos: videos, columns: self.profile.cellsColumns)
+                } else {
+                    VideosListView(videos: videos)
+                }
+            #else
+                VideosListView(videos: videos)
+                #if os(macOS)
+                    .frame(minWidth: 400)
+                #endif
+            #endif
+        }
+
+        #if os(tvOS)
+            .fullScreenCover(isPresented: $navigationState.showingVideo) {
+                if let video = navigationState.video {
+                    VideoPlayerView(video)
+                }
+            }
+            .fullScreenCover(isPresented: $showingAddToPlaylist) {
+                AddToPlaylistView()
+            }
+
+        #endif
+    }
+}