Add playing indicator

Shared/Videos/VideoBanner.swift

@@ -250,12 +250,18 @@ struct VideoBanner: View {
     }
 
     @ViewBuilder private var timeView: some View {
-        if let timeLabel {
-            Text(timeLabel)
-                .font(.caption2.weight(.semibold).monospacedDigit())
-                .allowsTightening(true)
-                .padding(2)
-                .modifier(ControlBackgroundModifier())
+        VStack(alignment: .trailing, spacing: 2) {
+            PlayingIndicatorView(video: video, height: 10)
+                .frame(width: 12, alignment: .trailing)
+                .padding(.trailing, 3)
+
+            if let timeLabel {
+                Text(timeLabel)
+                    .font(.caption2.weight(.semibold).monospacedDigit())
+                    .allowsTightening(true)
+                    .padding(2)
+                    .modifier(ControlBackgroundModifier())
+            }
         }
     }
 

Shared/Videos/VideoCell.swift

@@ -418,14 +418,19 @@ struct VideoCell: View {
 
                 Spacer()
 
-                HStack {
-                    Spacer()
+                VStack(alignment: .trailing, spacing: 4) {
+                    PlayingIndicatorView(video: video, height: 20)
+                        .frame(width: 15, alignment: .trailing)
+                        .padding(.trailing, 3)
+                    HStack {
+                        Spacer()
 
-                    if timeOnThumbnail,
-                       !video.live,
-                       let time
-                    {
-                        DetailBadge(text: time, style: .prominent)
+                        if timeOnThumbnail,
+                           !video.live,
+                           let time
+                        {
+                            DetailBadge(text: time, style: .prominent)
+                        }
                     }
                 }
                 #if os(tvOS)

Shared/Views/PlayingIndicatorView.swift

@@ -0,0 +1,43 @@
+import SwiftUI
+
+struct PlayingIndicatorView: View {
+    var video: Video?
+    var height = 65.0
+
+    @State private var drawingHeight = true
+
+    @ObservedObject private var player = PlayerModel.shared
+
+    var body: some View {
+        HStack(spacing: 2) {
+            bar(low: 0.4)
+                .animation(animation.speed(1.5), value: drawingHeight)
+            bar(low: 0.3)
+                .animation(animation.speed(1.2), value: drawingHeight)
+            bar(low: 0.5)
+                .animation(animation.speed(1.0), value: drawingHeight)
+        }
+        .opacity(player.currentVideo == video && player.isPlaying ? 1 : 0)
+        .onAppear {
+            drawingHeight.toggle()
+        }
+    }
+
+    func bar(low: Double = 0.0, high: Double = 1.0) -> some View {
+        RoundedRectangle(cornerRadius: 3)
+            .foregroundColor(.white)
+            .frame(height: (drawingHeight ? high : low) * height)
+            .frame(height: height, alignment: .bottom)
+            .shadow(radius: 3)
+    }
+
+    var animation: Animation {
+        .easeIn(duration: 0.5).repeatForever()
+    }
+}
+
+struct PlayingIndicatorView_Previews: PreviewProvider {
+    static var previews: some View {
+        PlayingIndicatorView(video: .fixture)
+    }
+}