make chapters collapsible

Chapters are now collapsible by default only the first two chapters are shown. The second will be shown opaque to indicate more chapters.

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 ?? []
@@ -14,7 +15,7 @@ struct ChaptersView: View {
     }
 
     var body: some View {
-        if !chapters.isEmpty {
+        if expand && !chapters.isEmpty {
             #if os(tvOS)
                 List {
                     Section {
@@ -45,15 +46,22 @@ struct ChaptersView: View {
                     .padding(.horizontal)
                 }
             #endif
-        } else {
-            NoCommentsView(text: "No chapters information available".localized(), systemImage: "xmark.circle.fill")
+        } else if !chapters.isEmpty {
+            Section {
+                ChapterView(chapter: chapters[0])
+                if chapters.count > 1 {
+                    ChapterView(chapter: chapters[1])
+                        .opacity(0.3)
+                }
+            }
+            .padding(.horizontal)
         }
     }
 }
 
 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)
@@ -317,10 +318,9 @@ struct VideoDetails: View {
                                 if player.videoBeingOpened.isNil {
                                     if showChapters,
                                        !video.isLocal,
-                                       !video.chapters.isEmpty
-                                    {
+                                       !video.chapters.isEmpty {
                                         Section(header: chaptersHeader) {
-                                            ChaptersView()
+                                            ChaptersView(expand: $chaptersExpanded)
                                         }
                                     }
 
@@ -331,8 +331,7 @@ struct VideoDetails: View {
 
                                     if showRelated,
                                        !sidebarQueue,
-                                       !(player.videoForDisplay?.related.isEmpty ?? true)
-                                    {
+                                       !(player.videoForDisplay?.related.isEmpty ?? true) {
                                         RelatedView()
                                             .padding(.horizontal)
                                             .padding(.top, 20)
@@ -390,8 +389,7 @@ struct VideoDetails: View {
             if showScrollToTopInComments,
                page == .comments,
                comments.loaded,
-               comments.all.count > 3
-            {
+               comments.all.count > 3 {
                 Button {
                     withAnimation {
                         proxy.scrollTo(Self.pageMenuID)
@@ -441,10 +439,17 @@ struct VideoDetails: View {
     }
 
     var chaptersHeader: some View {
-        Text("Chapters".localized())
-            .padding(.horizontal)
-            .font(.caption)
-            .foregroundColor(.secondary)
+        HStack {
+            Text("Chapters".localized())
+            Spacer()
+            Button(action: { chaptersExpanded.toggle() }) {
+                Image(systemName: chaptersExpanded ? "chevron.up" : "chevron.down")
+                    .imageScale(.small)
+            }
+        }
+        .padding(.horizontal)
+        .font(.caption)
+        .foregroundColor(.secondary)
     }
 }
 

Shared/Settings/PlayerSettings.swift

@@ -282,7 +282,7 @@ struct PlayerSettings: View {
         }
 
         private var showChaptersToggle: some View {
-            Toggle("Chapters", isOn: $showChapters)
+            Toggle("Chapters (if available)", isOn: $showChapters)
         }
 
         private var showRelatedToggle: some View {