Add initial version of music mode

Shared/Player/Controls/PlayerControls.swift

@@ -1,10 +1,12 @@
 import Foundation
+import SDWebImageSwiftUI
 import SwiftUI
 
 struct PlayerControls: View {
     static let animation = Animation.easeInOut(duration: 0.2)
 
     private var player: PlayerModel!
+    private var thumbnails: ThumbnailsModel!
 
     @EnvironmentObject<PlayerControlsModel> private var model
 
@@ -20,8 +22,9 @@ struct PlayerControls: View {
         @FocusState private var focusedField: Field?
     #endif
 
-    init(player: PlayerModel) {
+    init(player: PlayerModel, thumbnails: ThumbnailsModel) {
         self.player = player
+        self.thumbnails = thumbnails
     }
 
     var body: some View {
@@ -86,10 +89,26 @@ struct PlayerControls: View {
         }
         #else
                 .background(PlayerGestures())
+                .background(controlsBackground)
         #endif
                 .environment(\.colorScheme, .dark)
     }
 
+    @ViewBuilder var controlsBackground: some View {
+        if player.musicMode,
+           let item = self.player.currentItem,
+           let url = thumbnails.best(item.video)
+        {
+            WebImage(url: url)
+                .resizable()
+                .placeholder {
+                    Rectangle().fill(Color("PlaceholderColor"))
+                }
+                .retryOnAppear(true)
+                .indicator(.activity)
+        }
+    }
+
     var timeline: some View {
         TimelineView(duration: durationBinding, current: currentTimeBinding, cornerRadius: 0)
     }
@@ -186,9 +205,11 @@ struct PlayerControls: View {
 
                 closeVideoButton
 
+                button("Music Mode", systemImage: "music.note", active: player.musicMode, action: player.toggleMusicMode)
+                    .disabled(player.activeBackend == .appleAVPlayer)
+
                 Spacer()
             #endif
-//            button("Music Mode", systemImage: "music.note")
         }
     }
 
@@ -355,6 +376,7 @@ struct PlayerControls: View {
         systemImage: String = "arrow.up.left.and.arrow.down.right",
         size: Double = 30,
         cornerRadius: Double = 3,
+        active: Bool = false,
         action: @escaping () -> Void = {}
     ) -> some View {
         Button {
@@ -367,7 +389,7 @@ struct PlayerControls: View {
                 .contentShape(Rectangle())
         }
         .buttonStyle(.plain)
-        .foregroundColor(.primary)
+        .foregroundColor(active ? .accentColor : .primary)
         .frame(width: size, height: size)
         #if os(macOS)
             .background(VisualEffectBlur(material: .hudWindow))
@@ -396,7 +418,7 @@ struct PlayerControls_Previews: PreviewProvider {
         let view = ZStack {
             Color.gray
 
-            PlayerControls(player: PlayerModel())
+            PlayerControls(player: PlayerModel(), thumbnails: ThumbnailsModel())
                 .injectFixtureEnvironmentObjects()
                 .environmentObject(model)
         }

Shared/Player/VideoPlayerView.swift

@@ -48,6 +48,7 @@ struct VideoPlayerView: View {
     @EnvironmentObject<AccountsModel> private var accounts
     @EnvironmentObject<PlayerControlsModel> private var playerControls
     @EnvironmentObject<PlayerModel> private var player
+    @EnvironmentObject<ThumbnailsModel> private var thumbnails
 
     var body: some View {
         #if os(macOS)
@@ -126,9 +127,7 @@ struct VideoPlayerView: View {
                 #else
                     GeometryReader { geometry in
                         VStack(spacing: 0) {
-                            if player.currentItem.isNil {
-                                playerPlaceholder(geometry: geometry)
-                            } else if player.playingInPictureInPicture {
+                            if player.playingInPictureInPicture {
                                 pictureInPicturePlaceholder(geometry: geometry)
                             } else {
                                 playerView
@@ -140,6 +139,7 @@ struct VideoPlayerView: View {
                                         fullScreen: playerControls.playingFullscreen
                                     )
                                 )
+                                .overlay(playerPlaceholder(geometry: geometry))
                                 #endif
                             }
                         }
@@ -273,7 +273,7 @@ struct VideoPlayerView: View {
                 PlayerGestures()
             #endif
 
-            PlayerControls(player: player)
+            PlayerControls(player: player, thumbnails: thumbnails)
         }
         #if os(iOS)
         .onAppear {
@@ -298,38 +298,41 @@ struct VideoPlayerView: View {
         #endif
     }
 
-    func playerPlaceholder(geometry: GeometryProxy) -> some View {
-        ZStack(alignment: .topLeading) {
-            HStack {
-                Spacer()
-                VStack {
+    @ViewBuilder func playerPlaceholder(geometry: GeometryProxy) -> some View {
+        if player.currentItem.isNil {
+            ZStack(alignment: .topLeading) {
+                HStack {
                     Spacer()
-                    VStack(spacing: 10) {
-                        #if !os(tvOS)
-                            Image(systemName: "ticket")
-                                .font(.system(size: 120))
-                        #endif
+                    VStack {
+                        Spacer()
+                        VStack(spacing: 10) {
+                            #if !os(tvOS)
+                                Image(systemName: "ticket")
+                                    .font(.system(size: 120))
+                            #endif
+                        }
+                        Spacer()
                     }
+                    .foregroundColor(.gray)
                     Spacer()
                 }
-                .foregroundColor(.gray)
-                Spacer()
-            }
 
-            #if os(iOS)
-                Button {
-                    player.hide()
-                } label: {
-                    Image(systemName: "xmark")
-                        .font(.system(size: 40))
-                }
-                .buttonStyle(.plain)
-                .padding(10)
-                .foregroundColor(.gray)
-            #endif
+                #if os(iOS)
+                    Button {
+                        player.hide()
+                    } label: {
+                        Image(systemName: "xmark")
+                            .font(.system(size: 40))
+                    }
+                    .buttonStyle(.plain)
+                    .padding(10)
+                    .foregroundColor(.gray)
+                #endif
+            }
+            .background(Color.black)
+            .contentShape(Rectangle())
+            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: geometry.size.width / Self.defaultAspectRatio)
         }
-        .contentShape(Rectangle())
-        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: geometry.size.width / Self.defaultAspectRatio)
     }
 
     func pictureInPicturePlaceholder(geometry: GeometryProxy) -> some View {