Video listing improvement

Shared/Videos/VideoBanner.swift

@@ -14,6 +14,7 @@ struct VideoBanner: View {
     @Default(.saveHistory) private var saveHistory
     @Default(.watchedVideoStyle) private var watchedVideoStyle
     @Default(.watchedVideoBadgeColor) private var watchedVideoBadgeColor
+    @Default(.timeOnThumbnail) private var timeOnThumbnail
 
     @Environment(\.inChannelView) private var inChannelView
     @Environment(\.inNavigationView) private var inNavigationView
@@ -35,13 +36,20 @@ struct VideoBanner: View {
 
     var body: some View {
         HStack(alignment: .top, spacing: 12) {
-            VStack(spacing: 2) {
+            VStack(alignment: .trailing, spacing: 2) {
                 smallThumbnail
 
                 #if !os(tvOS)
                     progressView
                 #endif
+
+                if !timeOnThumbnail, let timeLabel {
+                    Text(timeLabel)
+                        .font(.caption.monospacedDigit())
+                        .foregroundColor(.secondary)
                 }
+            }
+
             VStack(alignment: .leading, spacing: 2) {
                 Group {
                     if let video {
@@ -65,10 +73,19 @@ struct VideoBanner: View {
                 Spacer()
 
                 HStack {
+                    HStack {
+                        if !inChannelView {
+                            ThumbnailView(url: video?.channel.thumbnailURL)
+                                .frame(width: 30, height: 30)
+                                .clipShape(Circle())
+                        }
+
+                        VStack(alignment: .leading) {
                             Group {
                                 if let video {
                                     if !inChannelView, !video.isLocal || video.localStreamIsRemoteURL {
                                         channelControl
+                                            .font(.subheadline)
                                     } else {
                                         #if os(iOS)
                                             if DocumentsModel.shared.isDocument(video) {
@@ -92,17 +109,12 @@ struct VideoBanner: View {
                                         .redacted(reason: .placeholder)
                                 }
                             }
-                    .lineLimit(1)
 
-                    #if os(tvOS)
                             extraAttributes
-                    #endif
+                        }
                     }
                     .foregroundColor(.secondary)
-
+                }
-                #if !os(tvOS)
-                    extraAttributes
-                #endif
             }
             .frame(maxWidth: .infinity, alignment: .leading)
             .frame(maxHeight: .infinity)
@@ -141,17 +153,6 @@ struct VideoBanner: View {
                     }
                 }
             }
-
-            if timeInfo {
-                Spacer()
-
-                #if os(tvOS)
-                    progressView
-                #endif
-
-                timeLabel
-                    .layoutPriority(1)
-            }
         }
         .font(.caption)
         .lineLimit(1)
@@ -159,9 +160,11 @@ struct VideoBanner: View {
     }
 
     @ViewBuilder private var smallThumbnail: some View {
+        ZStack(alignment: .bottomTrailing) {
             ZStack(alignment: .bottomLeading) {
                 ZStack {
                     Color("PlaceholderColor")
+
                     if let video {
                         if let thumbnail = video.thumbnailURL(quality: .medium) {
                             ThumbnailView(url: thumbnail)
@@ -188,11 +191,15 @@ struct VideoBanner: View {
                         .offset(x: 5, y: -5)
                 }
             }
-        #if os(tvOS)
+
+            if timeOnThumbnail {
+                timeView
+            }
+        }
         .frame(width: thumbnailWidth, height: thumbnailHeight)
+        #if os(tvOS)
             .mask(RoundedRectangle(cornerRadius: 12))
         #else
-        .frame(width: thumbnailWidth, height: thumbnailHeight)
             .mask(RoundedRectangle(cornerRadius: 6))
         #endif
     }
@@ -212,7 +219,7 @@ struct VideoBanner: View {
         #if os(tvOS)
             250
         #else
-            100
+            120
         #endif
     }
 
@@ -220,7 +227,7 @@ struct VideoBanner: View {
         #if os(tvOS)
             140
         #else
-            60
+            72
         #endif
     }
 
@@ -239,16 +246,24 @@ struct VideoBanner: View {
         videoDurationLabel != nil && (video == nil || !video!.localStreamIsDirectory)
     }
 
-    @ViewBuilder private var timeLabel: some View {
+    private var timeLabel: String? {
-        Group {
         if let watch, let watchStoppedAtLabel, let videoDurationLabel, !watch.finished {
-                Text("\(watchStoppedAtLabel) / \(videoDurationLabel)")
+            return "\(watchStoppedAtLabel) / \(videoDurationLabel)"
         } else if let videoDurationLabel {
-                Text(videoDurationLabel)
+            return videoDurationLabel
         } else {
-                EmptyView()
+            return nil
         }
     }
+
+    @ViewBuilder private var timeView: some View {
+        if let timeLabel {
+            Text(timeLabel)
+                .font(.caption2.weight(.semibold).monospacedDigit())
+                .allowsTightening(true)
+                .padding(2)
+                .modifier(ControlBackgroundModifier())
+        }
     }
 
     private var progressView: some View {