separate tvOS View

Shared/Player/Video Details/ChapterView.swift

@@ -3,6 +3,7 @@ import Foundation
 import SDWebImageSwiftUI
 import SwiftUI
 
+#if !os(tvOS)
     struct ChapterView: View {
         var chapter: Chapter
         var nextChapterStart: Double?
@@ -23,15 +24,12 @@ struct ChapterView: View {
                 player.backend.seek(to: chapter.start, seekType: .userInteracted)
             }) {
                 Group {
-                #if os(tvOS)
-                    horizontalChapter
-                #else
                     verticalChapter
-                #endif
                 }
                 .contentShape(Rectangle())
             }
             .buttonStyle(.plain)
+
             .onReceive(PlayerTimeModel.shared.$currentTime) { cmTime in
                 let time = CMTimeGetSeconds(cmTime)
                 if time >= self.chapter.start, self.nextChapterStart == nil || time < self.nextChapterStart! {
@@ -43,25 +41,6 @@ struct ChapterView: View {
             }
         }
 
-    #if os(tvOS)
-
-        var horizontalChapter: some View {
-            HStack(spacing: 12) {
-                if !chapter.image.isNil {
-                    smallImage(chapter)
-                }
-
-                VStack(alignment: .leading, spacing: 4) {
-                    Text(chapter.title)
-                        .font(.headline)
-                    Text(chapter.start.formattedAsPlaybackTime(allowZero: true) ?? "")
-                        .font(.system(.subheadline).monospacedDigit())
-                        .foregroundColor(.secondary)
-                }
-            }
-            .frame(maxWidth: .infinity, alignment: .leading)
-        }
-    #else
         var verticalChapter: some View {
             VStack(spacing: 12) {
                 if !chapter.image.isNil {
@@ -80,7 +59,6 @@ struct ChapterView: View {
                 .frame(maxWidth: !chapter.image.isNil ? Self.thumbnailWidth : nil, alignment: .leading)
             }
         }
-    #endif
 
         @ViewBuilder func smallImage(_ chapter: Chapter) -> some View {
             WebImage(url: chapter.image, options: [.lowPriority])
@@ -90,11 +68,8 @@ struct ChapterView: View {
                 }
                 .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 {
@@ -106,9 +81,69 @@ struct ChapterView: View {
         }
     }
 
+#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) {
+                if !chapter.image.isNil {
+                    smallImage(chapter)
+                }
+
+                VStack(alignment: .leading, spacing: 4) {
+                    Text(chapter.title)
+                        .font(.headline)
+                    Text(chapter.start.formattedAsPlaybackTime(allowZero: true) ?? "")
+                        .font(.system(.subheadline).monospacedDigit())
+                        .foregroundColor(.secondary)
+                }
+            }
+            .frame(maxWidth: .infinity, 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: 12))
+        }
+
+        static var thumbnailWidth: Double {
+            250
+        }
+
+        static var thumbnailHeight: Double {
+            thumbnailWidth / 1.7777
+        }
+    }
+#endif
+
 struct ChapterView_Preview: PreviewProvider {
     static var previews: some View {
-        ChapterView(chapter: .init(title: "Chapter", start: 30), chapterIndex: 0)
+        #if os(tvOS)
+            ChapterViewTVOS(chapter: .init(title: "Chapter", start: 30))
                 .injectFixtureEnvironmentObjects()
+        #else
+            ChapterView(chapter: .init(title: "Chapter", start: 30), nextChapterStart: nil, chapterIndex: 0)
+                .injectFixtureEnvironmentObjects()
+        #endif
     }
 }

Shared/Player/Video Details/ChaptersView.swift

@@ -21,7 +21,7 @@ struct ChaptersView: View {
                     List {
                         Section {
                             ForEach(chapters) { chapter in
-                                ChapterView(chapter: chapter)
+                                ChapterViewTVOS(chapter: chapter)
                             }
                         }
                         .listRowBackground(Color.clear)
@@ -29,51 +29,53 @@ struct ChaptersView: View {
                     .listStyle(.plain)
                 #else
                     ScrollView(.horizontal) {
-                        LazyHStack(spacing: 20) {
+                        LazyHStack(spacing: 20) { chapterViews(for: chapters.prefix(3), opacity: 1.0) }.padding(.horizontal, 15)
-                            ForEach(Array(chapters.indices), id: \.self) { index in
-                                let chapter = chapters[index]
-                                let nextChapterStart: Double? = index < chapters.count - 1 ? chapters[index + 1].start : nil
-                                ChapterView(chapter: chapter, nextChapterStart: nextChapterStart, chapterIndex: index)
-                            }
-                        }
-                        .padding(.horizontal, 15)
                     }
                 #endif
             } else if expand {
+                #if os(tvOS)
                     Section {
-                    ForEach(Array(chapters.indices), id: \.self) { index in
+                        ForEach(chapters) { chapter in
-                        let chapter = chapters[index]
+                            ChapterViewTVOS(chapter: chapter)
-                        let nextChapterStart: Double? = index < chapters.count - 1 ? chapters[index + 1].start : nil
-                        ChapterView(chapter: chapter, nextChapterStart: nextChapterStart, chapterIndex: index)
                         }
                     }
-                .padding(.horizontal)
+                #else
+                    Section { chapterViews(for: chapters[...], opacity: 1.0) }.padding(.horizontal)
+                #endif
             } else {
                 #if os(iOS)
                     Button(action: {
                         self.expand.toggle()
                     }) {
-                        contents
+                        Section {
+                            chapterViews(for: chapters.prefix(3), opacity: 0.3)
+                        }.padding(.horizontal)
                     }
+                #elseif os(macOS)
+                    Section {
+                        chapterViews(for: chapters.prefix(3), opacity: 0.3)
+                    }.padding(.horizontal)
                 #else
-                    contents
+                    Section {
+                        ForEach(chapters) { chapter in
+                            ChapterViewTVOS(chapter: chapter)
+                        }
+                    }
                 #endif
             }
         }
     }
 
-    var contents: some View {
+    #if !os(tvOS)
-        Section {
+        private func chapterViews(for chaptersToShow: ArraySlice<Chapter>, opacity: Double = 1.0) -> some View {
-            ForEach(Array(chapters.prefix(3).indices), id: \.self) { index in
+            ForEach(Array(chaptersToShow.indices), id: \.self) { index in
-                let chapter = chapters[index]
+                let chapter = chaptersToShow[index]
-                let nextChapterStart: Double? = index < chapters.count - 1 ? chapters[index + 1].start : nil
+                let nextChapterStart: Double? = index < chaptersToShow.count - 1 ? chaptersToShow[index + 1].start : nil
                 ChapterView(chapter: chapter, nextChapterStart: nextChapterStart, chapterIndex: index)
-                    .allowsHitTesting(expand)
+                    .opacity(index == 0 ? 1.0 : opacity)
-                    .opacity(index == 0 ? 1.0 : 0.3)
             }
         }
-        .padding(.horizontal)
+    #endif
-    }
 }
 
 struct ChaptersView_Previews: PreviewProvider {

tvOS/NowPlayingView.swift

@@ -130,7 +130,7 @@ struct NowPlayingView: View {
                         } else {
                             Section(header: Text("Chapters")) {
                                 ForEach(video.chapters) { chapter in
-                                    ChapterView(chapter: chapter)
+                                    ChapterViewTVOS(chapter: chapter)
                                         .padding(.horizontal, 40)
                                 }
                             }