Watch Now section, horizontal cells

Shared/Videos/VideoView.swift

@@ -9,6 +9,7 @@ struct VideoView: View {
     #endif
 
     @Environment(\.inNavigationView) private var inNavigationView
+    @Environment(\.horizontalCells) private var horizontalCells
 
     var video: Video
     var layout: ListingLayout
@@ -34,7 +35,7 @@ struct VideoView: View {
         VStack {
             if layout == .cells {
                 #if os(iOS)
-                    if verticalSizeClass == .compact {
+                    if verticalSizeClass == .compact, !horizontalCells {
                         horizontalRow
                             .padding(.vertical, 4)
                     } else {
@@ -64,14 +65,31 @@ struct VideoView: View {
             .frame(maxWidth: 320)
 
             VStack(alignment: .leading, spacing: 0) {
-                videoDetail(video.title)
+                videoDetail(video.title, lineLimit: 5)
                     .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
 
                 videoDetail(video.author)
 
-                Spacer()
+                if additionalDetailsAvailable {
+                    Spacer()
 
-                additionalDetails
+                    HStack {
+                        if let date = video.publishedDate {
+                            VStack {
+                                Image(systemName: "calendar")
+                                Text(date)
+                            }
+                        }
+
+                        if video.views != 0 {
+                            VStack {
+                                Image(systemName: "eye")
+                                Text(video.viewsCount!)
+                            }
+                        }
+                    }
+                    .foregroundColor(.secondary)
+                }
             }
             .padding()
             .frame(minHeight: 180)
@@ -101,11 +119,10 @@ struct VideoView: View {
                 }
             #endif
         }
-        .padding(.trailing)
     }
 
     var verticalRow: some View {
-        VStack(alignment: .leading) {
+        VStack(alignment: .leading, spacing: 0) {
             thumbnail
 
             VStack(alignment: .leading) {
@@ -121,7 +138,18 @@ struct VideoView: View {
 
                 Group {
                     if additionalDetailsAvailable {
-                        additionalDetails
+                        HStack(spacing: 8) {
+                            if let date = video.publishedDate {
+                                Image(systemName: "calendar")
+                                Text(date)
+                            }
+
+                            if video.views != 0 {
+                                Image(systemName: "eye")
+                                Text(video.viewsCount!)
+                            }
+                        }
+                        .foregroundColor(.secondary)
                     } else {
                         Spacer()
                     }
@@ -129,6 +157,8 @@ struct VideoView: View {
                 .frame(minHeight: 30, alignment: .top)
                 .padding(.bottom, 10)
             }
+            .padding(.top, 4)
+            .frame(minWidth: 0, maxWidth: .infinity, alignment: .topLeading)
             #if os(tvOS)
                 .padding(.horizontal, 8)
             #endif
@@ -139,21 +169,6 @@ struct VideoView: View {
         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!)
-            }
-        }
-        .foregroundColor(.secondary)
-    }
-
     var thumbnail: some View {
         ZStack(alignment: .leading) {
             thumbnailImage(quality: .maxresdefault)
@@ -184,8 +199,6 @@ struct VideoView: View {
                 .padding(10)
             }
         }
-        .padding([.leading, .top, .trailing], 4)
-        .frame(maxWidth: 600)
     }
 
     func thumbnailImage(quality: Thumbnail.Quality) -> some View {
@@ -196,19 +209,17 @@ struct VideoView: View {
                         .resizable()
                 } placeholder: {
                     ProgressView()
-                        .aspectRatio(contentMode: .fill)
                 }
             } else {
                 Image(systemName: "exclamationmark.square")
             }
         }
-        .frame(minWidth: 300, maxWidth: .infinity, minHeight: 180, maxHeight: .infinity)
         .background(.gray)
         .mask(RoundedRectangle(cornerRadius: 12))
         #if os(tvOS)
             .frame(minHeight: layout == .cells ? 320 : 200)
         #endif
-        .aspectRatio(1.777, contentMode: .fit)
+        .modifier(AspectRatioModifier())
     }
 
     func videoDetail(_ text: String, lineLimit: Int = 1) -> some View {
@@ -218,6 +229,21 @@ struct VideoView: View {
             .truncationMode(.middle)
     }
 
+    struct AspectRatioModifier: ViewModifier {
+        @Environment(\.horizontalCells) private var horizontalCells
+
+        func body(content: Content) -> some View {
+            Group {
+                if horizontalCells {
+                    content
+                } else {
+                    content
+                        .aspectRatio(1.777, contentMode: .fill)
+                }
+            }
+        }
+    }
+
     struct ButtonStyleModifier: ViewModifier {
         var layout: ListingLayout
 
@@ -236,41 +262,3 @@ struct VideoView: View {
         }
     }
 }
-
-struct VideoListRowPreview: PreviewProvider {
-    static var previews: some View {
-        #if os(tvOS)
-            List {
-                ForEach(Video.allFixtures) { video in
-                    VideoView(video: video, layout: .list)
-                }
-            }
-            .listStyle(.grouped)
-
-            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/Videos/VideosCellsHorizontal.swift

@@ -0,0 +1,61 @@
+import Defaults
+import SwiftUI
+
+struct VideosCellsHorizontal: View {
+    #if os(iOS)
+        @Environment(\.verticalSizeClass) private var verticalSizeClass
+    #endif
+
+    var videos = [Video]()
+
+    var body: some View {
+        ScrollViewReader { scrollView in
+            ScrollView(.horizontal, showsIndicators: false) {
+                LazyHStack(spacing: 20) {
+                    ForEach(videos) { video in
+                        VideoView(video: video, layout: .cells)
+                            .environment(\.horizontalCells, true)
+                        #if os(tvOS)
+                            .frame(width: 580)
+                            .padding(.trailing, 20)
+                            .padding(.bottom, 40)
+                        #else
+                            .frame(maxWidth: 300)
+                        #endif
+                    }
+                }
+                #if os(tvOS)
+                    .padding(.horizontal, 40)
+                    .padding(.vertical, 30)
+                #else
+                    .padding(.horizontal, 15)
+                    .padding(.vertical, 20)
+                #endif
+            }
+            .onChange(of: videos) { [videos] newVideos in
+                #if !os(tvOS)
+                    guard !videos.isEmpty, let video = newVideos.first else {
+                        return
+                    }
+
+                    scrollView.scrollTo(video.id, anchor: .leading)
+                #endif
+            }
+        }
+        #if os(tvOS)
+            .frame(height: 560)
+        #else
+            .frame(height: 320)
+        #endif
+
+        .edgesIgnoringSafeArea(.horizontal)
+    }
+}
+
+struct VideoCellsHorizontal_Previews: PreviewProvider {
+    static var previews: some View {
+        VideosCellsHorizontal(videos: Video.allFixtures)
+            .environmentObject(NavigationState())
+            .environmentObject(Subscriptions())
+    }
+}

Shared/Videos/VideosCellsVertical.swift

@@ -1,7 +1,7 @@
 import Defaults
 import SwiftUI
 
-struct VideosCellsView: View {
+struct VideosCellsVertical: View {
     #if os(iOS)
         @Environment(\.verticalSizeClass) private var verticalSizeClass
     #endif
@@ -49,7 +49,7 @@ struct VideosCellsView: View {
         [GridItem(.adaptive(minimum: adaptiveGridItemMinimumSize))]
     }
 
-    var adaptiveGridItemMinimumSize: CGFloat {
+    var adaptiveGridItemMinimumSize: Double {
         #if os(iOS)
             return verticalSizeClass == .regular ? 320 : 800
         #elseif os(tvOS)

Shared/Videos/VideosView.swift

@@ -14,12 +14,12 @@ struct VideosView: View {
         VStack {
             #if os(tvOS)
                 if layout == .cells {
-                    VideosCellsView(videos: videos)
+                    VideosCellsVertical(videos: videos)
                 } else {
                     VideosListView(videos: videos)
                 }
             #else
-                VideosCellsView(videos: videos)
+                VideosCellsVertical(videos: videos)
             #endif
         }
         #if os(macOS)