Merge pull request #564 from stonerl/collapsible-chapters

make chapters collapsible and highlight current chapter

Shared/Player/Video Details/ChapterView.swift

@@ -2,28 +2,85 @@ import Foundation
 import SDWebImageSwiftUI
 import SwiftUI
 
-struct ChapterView: View {
-    var chapter: Chapter
+#if !os(tvOS)
+    struct ChapterView: View {
+        var chapter: Chapter
 
-    var player = PlayerModel.shared
+        var chapterIndex: Int
+        @ObservedObject private var player = PlayerModel.shared
 
-    var body: some View {
-        Button {
-            player.backend.seek(to: chapter.start, seekType: .userInteracted)
-        } label: {
-            Group {
-                #if os(tvOS)
-                    horizontalChapter
-                #else
-                    verticalChapter
-                #endif
-            }
-            .contentShape(Rectangle())
+        var isCurrentChapter: Bool {
+            player.currentChapterIndex == chapterIndex
+        }
+
+        var body: some View {
+            Button(action: {
+                player.backend.seek(to: chapter.start, seekType: .userInteracted)
+            }) {
+                Group {
+                    verticalChapter
+                }
+                .contentShape(Rectangle())
+            }
+            .buttonStyle(.plain)
+        }
+
+        var verticalChapter: some View {
+            VStack(spacing: 12) {
+                if !chapter.image.isNil {
+                    smallImage(chapter)
+                }
+                VStack(alignment: .leading, spacing: 4) {
+                    Text(chapter.title)
+                        .lineLimit(3)
+                        .multilineTextAlignment(.leading)
+                        .font(.headline)
+                        .foregroundColor(isCurrentChapter ? Color("AppRedColor") : .primary)
+                    Text(chapter.start.formattedAsPlaybackTime(allowZero: true) ?? "")
+                        .font(.system(.subheadline).monospacedDigit())
+                        .foregroundColor(.secondary)
+                }
+                .frame(maxWidth: !chapter.image.isNil ? Self.thumbnailWidth : nil, alignment: .leading)
+            }
+        }
+
+        @ViewBuilder func smallImage(_ chapter: Chapter) -> some View {
+            WebImage(url: chapter.image, options: [.lowPriority])
+                .resizable()
+                .placeholder {
+                    ProgressView()
+                }
+                .indicator(.activity)
+                .frame(width: Self.thumbnailWidth, height: Self.thumbnailHeight)
+
+                .mask(RoundedRectangle(cornerRadius: 6))
+        }
+
+        static var thumbnailWidth: Double {
+            250
+        }
+
+        static var thumbnailHeight: Double {
+            thumbnailWidth / 1.7777
         }
-        .buttonStyle(.plain)
     }
 
-    #if os(tvOS)
+#else
+    struct ChapterViewTVOS: View {
+        var chapter: Chapter
+        var player = PlayerModel.shared
+
+        var body: some View {
+            Button {
+                player.backend.seek(to: chapter.start, seekType: .userInteracted)
+            } label: {
+                Group {
+                    horizontalChapter
+                }
+                .contentShape(Rectangle())
+            }
+            .buttonStyle(.plain)
+        }
 
         var horizontalChapter: some View {
             HStack(spacing: 12) {
@@ -41,53 +98,36 @@ struct ChapterView: View {
             }
             .frame(maxWidth: .infinity, alignment: .leading)
         }
-    #else
-        var verticalChapter: some View {
-            VStack(spacing: 12) {
-                if !chapter.image.isNil {
-                    smallImage(chapter)
+
+        @ViewBuilder func smallImage(_ chapter: Chapter) -> some View {
+            WebImage(url: chapter.image, options: [.lowPriority])
+                .resizable()
+                .placeholder {
+                    ProgressView()
                 }
-                VStack(alignment: .leading, spacing: 4) {
-                    Text(chapter.title)
-                        .lineLimit(2)
-                        .multilineTextAlignment(.leading)
-                        .font(.headline)
-                    Text(chapter.start.formattedAsPlaybackTime(allowZero: true) ?? "")
-                        .font(.system(.subheadline).monospacedDigit())
-                        .foregroundColor(.secondary)
-                }
-                .frame(maxWidth: Self.thumbnailWidth, alignment: .leading)
-            }
+                .indicator(.activity)
+                .frame(width: Self.thumbnailWidth, height: Self.thumbnailHeight)
+                .mask(RoundedRectangle(cornerRadius: 12))
         }
-    #endif
 
-    @ViewBuilder func smallImage(_ chapter: Chapter) -> some View {
-        WebImage(url: chapter.image, options: [.lowPriority])
-            .resizable()
-            .placeholder {
-                ProgressView()
-            }
-            .indicator(.activity)
-            .frame(width: Self.thumbnailWidth, height: Self.thumbnailHeight)
-        #if os(tvOS)
-            .mask(RoundedRectangle(cornerRadius: 12))
-        #else
-            .mask(RoundedRectangle(cornerRadius: 6))
-        #endif
-    }
+        static var thumbnailWidth: Double {
+            250
+        }
 
-    static var thumbnailWidth: Double {
-        250
+        static var thumbnailHeight: Double {
+            thumbnailWidth / 1.7777
+        }
     }
-
-    static var thumbnailHeight: Double {
-        thumbnailWidth / 1.7777
-    }
-}
+#endif
 
 struct ChapterView_Preview: PreviewProvider {
     static var previews: some View {
-        ChapterView(chapter: .init(title: "Chapter", start: 30))
-            .injectFixtureEnvironmentObjects()
+        #if os(tvOS)
+            ChapterViewTVOS(chapter: .init(title: "Chapter", start: 30))
+                .injectFixtureEnvironmentObjects()
+        #else
+            ChapterView(chapter: .init(title: "Chapter", start: 30), chapterIndex: 0)
+                .injectFixtureEnvironmentObjects()
+        #endif
     }
 }

Shared/Player/Video Details/ChaptersView.swift

@@ -4,6 +4,7 @@ import SwiftUI
 
 struct ChaptersView: View {
     @ObservedObject private var player = PlayerModel.shared
+    @Binding var expand: Bool
 
     var chapters: [Chapter] {
         player.videoForDisplay?.chapters ?? []
@@ -15,45 +16,71 @@ struct ChaptersView: View {
 
     var body: some View {
         if !chapters.isEmpty {
-            #if os(tvOS)
-                List {
-                    Section {
-                        ForEach(chapters) { chapter in
-                            ChapterView(chapter: chapter)
-                        }
-                    }
-                    .listRowBackground(Color.clear)
-                }
-                .listStyle(.plain)
-            #else
-                if chaptersHaveImages {
-                    ScrollView(.horizontal) {
-                        LazyHStack(spacing: 20) {
+            if chaptersHaveImages {
+                #if os(tvOS)
+                    List {
+                        Section {
                             ForEach(chapters) { chapter in
-                                ChapterView(chapter: chapter)
+                                ChapterViewTVOS(chapter: chapter)
                             }
                         }
-                        .padding(.horizontal, 15)
+                        .listRowBackground(Color.clear)
                     }
-                    .frame(minHeight: ChapterView.thumbnailHeight + 100)
-                } else {
+                    .listStyle(.plain)
+                #else
+                    ScrollView(.horizontal) {
+                        LazyHStack(spacing: 20) { chapterViews(for: chapters[...]) }.padding(.horizontal, 15)
+                    }
+                #endif
+            } else if expand {
+                #if os(tvOS)
                     Section {
                         ForEach(chapters) { chapter in
-                            ChapterView(chapter: chapter)
+                            ChapterViewTVOS(chapter: chapter)
                         }
                     }
-                    .padding(.horizontal)
-                }
-            #endif
-        } else {
-            NoCommentsView(text: "No chapters information available".localized(), systemImage: "xmark.circle.fill")
+                #else
+                    Section { chapterViews(for: chapters[...]) }.padding(.horizontal)
+                #endif
+            } else {
+                #if os(iOS)
+                    Button(action: {
+                        self.expand.toggle()
+                    }) {
+                        Section {
+                            chapterViews(for: chapters.prefix(3), opacity: 0.3, clickable: false)
+                        }.padding(.horizontal)
+                    }
+                #elseif os(macOS)
+                    Section {
+                        chapterViews(for: chapters.prefix(3), opacity: 0.3, clickable: false)
+                    }.padding(.horizontal)
+                #else
+                    Section {
+                        ForEach(chapters) { chapter in
+                            ChapterViewTVOS(chapter: chapter)
+                        }
+                    }
+                #endif
+            }
         }
     }
+
+    #if !os(tvOS)
+        private func chapterViews(for chaptersToShow: ArraySlice<Chapter>, opacity: Double = 1.0, clickable: Bool = true) -> some View {
+            ForEach(Array(chaptersToShow.indices), id: \.self) { index in
+                let chapter = chaptersToShow[index]
+                ChapterView(chapter: chapter, chapterIndex: index)
+                    .opacity(index == 0 ? 1.0 : opacity)
+                    .allowsHitTesting(clickable)
+            }
+        }
+    #endif
 }
 
 struct ChaptersView_Previews: PreviewProvider {
     static var previews: some View {
-        ChaptersView()
+        ChaptersView(expand: .constant(false))
             .injectFixtureEnvironmentObjects()
     }
 }

Shared/Player/Video Details/VideoDetails.swift

@@ -169,6 +169,7 @@ struct VideoDetails: View {
     @State private var subscriptionToggleButtonDisabled = false
     @State private var page = DetailsPage.info
     @State private var descriptionExpanded = false
+    @State private var chaptersExpanded = false
 
     @Environment(\.navigationStyle) private var navigationStyle
     #if os(iOS)
@@ -190,6 +191,7 @@ struct VideoDetails: View {
         @Default(.showScrollToTopInComments) private var showScrollToTopInComments
     #endif
     @Default(.expandVideoDescription) private var expandVideoDescription
+    @Default(.expandChapters) private var expandChapters
 
     var body: some View {
         VStack(alignment: .leading, spacing: 0) {
@@ -245,6 +247,7 @@ struct VideoDetails: View {
         .background(colorScheme == .dark ? Color.black : .white)
         .onAppear {
             descriptionExpanded = expandVideoDescription
+            chaptersExpanded = expandChapters
         }
     }
 
@@ -320,7 +323,7 @@ struct VideoDetails: View {
                                        !video.chapters.isEmpty
                                     {
                                         Section(header: chaptersHeader) {
-                                            ChaptersView()
+                                            ChaptersView(expand: $chaptersExpanded)
                                         }
                                     }
 
@@ -440,11 +443,48 @@ struct VideoDetails: View {
         #endif
     }
 
+    var chaptersHaveImages: Bool {
+        player.videoForDisplay?.chapters.allSatisfy { $0.image != nil } ?? false
+    }
+
     var chaptersHeader: some View {
-        Text("Chapters".localized())
-            .padding(.horizontal)
-            .font(.caption)
-            .foregroundColor(.secondary)
+        Group {
+            if !chaptersHaveImages {
+                #if canImport(UIKit)
+                    Button(action: {
+                        chaptersExpanded.toggle()
+                    }) {
+                        HStack {
+                            Text("Chapters".localized())
+                            Spacer()
+                            Image(systemName: chaptersExpanded ? "chevron.up" : "chevron.down")
+                                .imageScale(.small)
+                        }
+                        .padding(.horizontal)
+                        .font(.caption)
+                        .foregroundColor(.secondary)
+                    }
+                #elseif canImport(AppKit)
+                    HStack {
+                        Text("Chapters".localized())
+                        Spacer()
+                        Button(action: { chaptersExpanded.toggle() }) {
+                            Image(systemName: chaptersExpanded ? "chevron.up" : "chevron.down")
+                                .imageScale(.small)
+                        }
+                    }
+                    .padding(.horizontal)
+                    .font(.caption)
+                    .foregroundColor(.secondary)
+                #endif
+            } else {
+                // No button, just the title when there are images
+                Text("Chapters".localized())
+                    .font(.caption)
+                    .foregroundColor(.secondary)
+                    .padding(.horizontal)
+            }
+        }
     }
 }