Forms improvements for trending and playlists

Shared/CoverSectionRowView.swift

@@ -0,0 +1,20 @@
+import SwiftUI
+
+struct CoverSectionRowView<ControlContent: View>: View {
+    let label: String?
+    let controlView: ControlContent
+
+    init(_ label: String? = nil, @ViewBuilder controlView: @escaping () -> ControlContent) {
+        self.label = label
+        self.controlView = controlView()
+    }
+
+    var body: some View {
+        HStack {
+            Text(label ?? "")
+
+            Spacer()
+            controlView
+        }
+    }
+}

Shared/CoverSectionView.swift

@@ -0,0 +1,52 @@
+import SwiftUI
+
+struct CoverSectionView<Content: View>: View {
+    let title: String?
+
+    let actionsView: Content
+    let divider: Bool
+    let inline: Bool
+
+    init(_ title: String? = nil, divider: Bool = true, inline: Bool = false, @ViewBuilder actionsView: @escaping () -> Content) {
+        self.title = title
+        self.divider = divider
+        self.inline = inline
+        self.actionsView = actionsView()
+    }
+
+    var body: some View {
+        VStack(alignment: .leading) {
+            if inline {
+                HStack {
+                    if title != nil {
+                        sectionTitle
+                    }
+
+                    Spacer()
+                    actionsView
+                }
+            } else if title != nil {
+                sectionTitle
+            }
+
+            if !inline {
+                actionsView
+            }
+        }
+
+        if divider {
+            Divider()
+                .padding(.vertical)
+        }
+    }
+
+    var sectionTitle: some View {
+        Text(title ?? "")
+
+            .font(.title2)
+        #if os(macOS)
+            .bold()
+        #endif
+        .padding(.bottom)
+    }
+}

Shared/PlaylistFormView.swift

@@ -0,0 +1,194 @@
+import Siesta
+import SwiftUI
+
+struct PlaylistFormView: View {
+    @State private var name = ""
+    @State private var visibility = Playlist.Visibility.public
+
+    @State private var valid = false
+    @State private var showingDeleteConfirmation = false
+
+    @Binding var playlist: Playlist!
+
+    @Environment(\.dismiss) private var dismiss
+
+    var editing: Bool {
+        playlist != nil
+    }
+
+    var body: some View {
+        #if os(macOS) || os(iOS)
+            VStack(alignment: .leading) {
+                HStack(alignment: .center) {
+                    Text(editing ? "Edit Playlist" : "Create Playlist")
+                        .font(.title2.bold())
+
+                    Spacer()
+
+                    Button("Cancel") {
+                        dismiss()
+                    }.keyboardShortcut(.cancelAction)
+                }
+                Form {
+                    TextField("Name", text: $name, onCommit: validate)
+                        .frame(maxWidth: 450)
+                        .padding(.leading, 10)
+
+                    Picker("Visibility", selection: $visibility) {
+                        ForEach(Playlist.Visibility.allCases, id: \.self) { visibility in
+                            Text(visibility.name)
+                        }
+                    }
+                    .pickerStyle(SegmentedPickerStyle())
+                }
+                Divider()
+                    .padding(.vertical, 4)
+                HStack {
+                    if editing {
+                        deletePlaylistButton
+                    }
+
+                    Spacer()
+
+                    Button("Save", action: submitForm).disabled(!valid)
+                        .keyboardShortcut(.defaultAction)
+                }
+            }
+            .onChange(of: name) { _ in validate() }
+            .onAppear(perform: setFieldsFromPlaylist)
+            .padding(.horizontal)
+            #if !os(iOS)
+                .frame(width: 400, height: 150)
+            #endif
+
+        #else
+            HStack {
+                Spacer()
+
+                VStack {
+                    Spacer()
+
+                    CoverSectionView(editing ? "Edit Playlist" : "Create Playlist") {
+                        CoverSectionRowView("Name") {
+                            TextField("Playlist Name", text: $name, onCommit: validate)
+                                .frame(maxWidth: 450)
+                        }
+
+                        CoverSectionRowView("Visibility") { visibilityButton }
+                    }
+
+                    CoverSectionRowView {
+                        Button("Save", action: submitForm).disabled(!valid)
+                    }
+
+                    if editing {
+                        CoverSectionView("Delete Playlist", divider: false, inline: true) { deletePlaylistButton }
+                            .padding(.top, 50)
+                    }
+
+                    Spacer()
+                }
+                .frame(maxWidth: 800)
+
+                Spacer()
+            }
+            .background(.thinMaterial)
+            .onAppear {
+                guard editing else {
+                    return
+                }
+
+                self.name = self.playlist.title
+                self.visibility = self.playlist.visibility
+
+                validate()
+            }
+        #endif
+    }
+
+    func setFieldsFromPlaylist() {
+        guard editing else {
+            return
+        }
+
+        name = playlist.title
+        visibility = playlist.visibility
+
+        validate()
+    }
+
+    func validate() {
+        valid = !name.isEmpty
+    }
+
+    func submitForm() {
+        guard valid else {
+            return
+        }
+
+        let body = ["title": name, "privacy": visibility.rawValue]
+
+        resource.request(editing ? .patch : .post, json: body).onSuccess { response in
+            if let modifiedPlaylist: Playlist = response.typedContent() {
+                playlist = modifiedPlaylist
+            }
+
+            dismiss()
+        }
+    }
+
+    var resource: Resource {
+        editing ? InvidiousAPI.shared.playlist(playlist.id) : InvidiousAPI.shared.playlists
+    }
+
+    var visibilityButton: some View {
+        #if os(macOS)
+            Picker("Visibility", selection: $visibility) {
+                ForEach(Playlist.Visibility.allCases) { visibility in
+                    Text(visibility.name)
+                }
+            }
+        #else
+            Button(self.visibility.name) {
+                self.visibility = self.visibility.next()
+            }
+            .contextMenu {
+                ForEach(Playlist.Visibility.allCases) { visibility in
+                    Button(visibility.name) {
+                        self.visibility = visibility
+                    }
+                }
+            }
+        #endif
+    }
+
+    var deletePlaylistButton: some View {
+        Button("Delete", role: .destructive) {
+            showingDeleteConfirmation = true
+        }.alert(isPresented: $showingDeleteConfirmation) {
+            Alert(
+                title: Text("Are you sure you want to delete playlist?"),
+                message: Text("Playlist \"\(playlist.title)\" will be deleted.\nIt cannot be undone."),
+                primaryButton: .destructive(Text("Delete"), action: deletePlaylistAndDismiss),
+                secondaryButton: .cancel()
+            )
+        }
+        #if os(macOS)
+            .foregroundColor(.red)
+        #endif
+    }
+
+    func deletePlaylistAndDismiss() {
+        let resource = InvidiousAPI.shared.playlist(playlist.id)
+        resource.request(.delete).onSuccess { _ in
+            playlist = nil
+            dismiss()
+        }
+    }
+}
+
+struct PlaylistFormView_Previews: PreviewProvider {
+    static var previews: some View {
+        PlaylistFormView(playlist: .constant(Playlist.fixture))
+    }
+}

Shared/PlaylistsView.swift

@@ -21,56 +21,71 @@ struct PlaylistsView: View {
         resource.addObserver(store)
     }
 
+    var videos: [Video] {
+        currentPlaylist?.videos ?? []
+    }
+
+    var videosViewMaxHeight: CGFloat {
+        #if os(tvOS)
+            videos.isEmpty ? 150 : .infinity
+        #else
+            videos.isEmpty ? 0 : .infinity
+        #endif
+    }
+
     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)
+        VStack {
+            #if os(tvOS)
+                toolbar
+                    .font(.system(size: 28))
 
-                            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()
-                }
+            #endif
+            if currentPlaylist != nil, videos.isEmpty {
+                hintText("Playlist is empty\n\nTap and hold on a video and then tap \"Add to Playlist\"")
+            } else if store.collection.isEmpty {
+                hintText("You have no playlists\n\nTap on \"New Playlist\" to create one")
+            } else {
+                VideosView(videos: videos)
             }
+
+            #if os(iOS)
+                toolbar
+                    .font(.system(size: 14))
+                    .animation(nil)
+                    .padding(.horizontal)
+                    .padding(.vertical, 10)
+                    .overlay(Divider().offset(x: 0, y: -2), alignment: .topTrailing)
+            #endif
         }
-        #if !os(macOS)
+        #if os(tvOS)
             .fullScreenCover(isPresented: $showingNewPlaylist, onDismiss: selectCreatedPlaylist) {
                 PlaylistFormView(playlist: $createdPlaylist)
             }
             .fullScreenCover(isPresented: $showingEditPlaylist, onDismiss: selectEditedPlaylist) {
                 PlaylistFormView(playlist: $editedPlaylist)
             }
+        #else
+            .sheet(isPresented: $showingNewPlaylist, onDismiss: selectCreatedPlaylist) {
+                PlaylistFormView(playlist: $createdPlaylist)
+            }
+            .sheet(isPresented: $showingEditPlaylist, onDismiss: selectEditedPlaylist) {
+                PlaylistFormView(playlist: $editedPlaylist)
+            }
         #endif
+        .toolbar {
+            ToolbarItemGroup {
+                #if !os(iOS)
+                    if !store.collection.isEmpty {
+                        selectPlaylistButton
+                    }
+
+                    if currentPlaylist != nil {
+                        editPlaylistButton
+                    }
+                #endif
+                newPlaylistButton
+            }
+        }
         .onAppear {
             resource.loadIfNeeded()?.onSuccess { _ in
                 selectPlaylist(selectedPlaylistID)
@@ -83,6 +98,51 @@ struct PlaylistsView: View {
         #endif
     }
 
+    var scaledToolbar: some View {
+        toolbar.scaleEffect(0.85)
+    }
+
+    var toolbar: some View {
+        HStack {
+            if store.collection.isEmpty {
+                Text("No Playlists")
+                    .foregroundColor(.secondary)
+            } else {
+                Text("Current Playlist")
+                    .foregroundColor(.secondary)
+
+                selectPlaylistButton
+            }
+
+            #if os(iOS)
+                Spacer()
+            #endif
+
+            if currentPlaylist != nil {
+                editPlaylistButton
+            }
+
+            #if !os(iOS)
+                newPlaylistButton
+                    .padding(.leading, 40)
+            #endif
+        }
+    }
+
+    func hintText(_ text: String) -> some View {
+        VStack {
+            Spacer()
+            Text(text)
+                .foregroundColor(.secondary)
+                .multilineTextAlignment(.center)
+            Spacer()
+        }
+        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
+        #if os(macOS)
+            .background()
+        #endif
+    }
+
     func selectPlaylist(_ id: String?) {
         selectedPlaylistID = id
     }
@@ -116,20 +176,34 @@ struct PlaylistsView: View {
     }
 
     var selectPlaylistButton: some View {
-        Button(currentPlaylist?.title ?? "Select playlist") {
-            guard currentPlaylist != nil else {
-                return
-            }
+        #if os(tvOS)
+            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)
+                selectPlaylist(store.collection.next(after: currentPlaylist!)?.id)
+            }
+            .contextMenu {
+                ForEach(store.collection) { playlist in
+                    Button(playlist.title) {
+                        selectPlaylist(playlist.id)
+                    }
                 }
             }
-        }
+        #else
+            Menu(currentPlaylist?.title ?? "Select playlist") {
+                ForEach(store.collection) { playlist in
+                    Button(action: { selectPlaylist(playlist.id) }) {
+                        if playlist == self.currentPlaylist {
+                            Label(playlist.title, systemImage: "checkmark")
+                        } else {
+                            Text(playlist.title)
+                        }
+                    }
+                }
+            }
+        #endif
     }
 
     var editPlaylistButton: some View {
@@ -138,7 +212,7 @@ struct PlaylistsView: View {
             self.showingEditPlaylist = true
         }) {
             HStack(spacing: 8) {
-                Image(systemName: "pencil")
+                Image(systemName: "slider.horizontal.3")
                 Text("Edit")
             }
         }
@@ -155,3 +229,10 @@ struct PlaylistsView: View {
         }
     }
 }
+
+struct PlaylistsView_Provider: PreviewProvider {
+    static var previews: some View {
+        PlaylistsView()
+            .environmentObject(NavigationState())
+    }
+}

Shared/TrendingCountrySelection.swift

@@ -18,7 +18,10 @@ struct TrendingCountrySelection: View {
                 HStack {
                     TextField("Country", text: $query, prompt: Text(TrendingCountrySelection.prompt))
                         .focused($countryIsFocused)
+
                     Button("Done") { selectCountryAndDismiss() }
+                        .keyboardShortcut(.defaultAction)
+                        .keyboardShortcut(.cancelAction)
                 }
                 .padding([.horizontal, .top])
 

Shared/VideoView.swift

@@ -188,7 +188,7 @@ struct VideoView: View {
         }
         .frame(minWidth: 320, maxWidth: .infinity, minHeight: 180, maxHeight: .infinity)
         #if os(tvOS)
-            .frame(minHeight: 320)
+            .frame(minHeight: layout == .cells ? 320 : 200)
         #endif
         .aspectRatio(1.777, contentMode: .fit)
     }

Shared/VideosCellsView.swift

@@ -22,11 +22,13 @@ struct VideosCellsView: View {
                 .padding()
             }
             .onChange(of: videos) { [videos] newVideos in
-                guard !videos.isEmpty, let video = newVideos.first else {
-                    return
-                }
+                #if !os(tvOS)
+                    guard !videos.isEmpty, let video = newVideos.first else {
+                        return
+                    }
 
-                scrollView.scrollTo(video.id, anchor: .top)
+                    scrollView.scrollTo(video.id, anchor: .top)
+                #endif
             }
             #if os(tvOS)
                 .padding(.horizontal, 10)
@@ -37,7 +39,7 @@ struct VideosCellsView: View {
 
     var items: [GridItem] {
         #if os(tvOS)
-            videos.count < 3 ? Array(repeating: GridItem(.fixed(540)), count: videos.count) : adaptiveItem
+            videos.count < 3 ? Array(repeating: GridItem(.fixed(540)), count: [videos.count, 1].max()!) : adaptiveItem
         #else
             adaptiveItem
         #endif

Shared/VideosListView.swift

@@ -13,11 +13,14 @@ struct VideosListView: View {
                             .listRowInsets(EdgeInsets())
                     }
                     .onChange(of: videos) { videos in
-                        guard let video = videos.first else {
-                            return
-                        }
+                        #if !os(tvOS)
 
-                        scrollView.scrollTo(video.id, anchor: .top)
+                            guard let video = videos.first else {
+                                return
+                            }
+
+                            scrollView.scrollTo(video.id, anchor: .top)
+                        #endif
                     }
                 }
             }