Fix gradient

Shared/Player/Controls/PlayerControls.swift

@@ -250,14 +250,6 @@ struct PlayerControls: View {
             } else if player.videoForDisplay == nil {
                 Color.black
             }
-
-            if model.presentingControls {
-                Rectangle()
-                    .fill(
-                        LinearGradient(stops: gradientStops, startPoint: .top, endPoint: .bottom)
-                    )
-                    .transition(.opacity)
-            }
         }
     }
 
@@ -271,15 +263,6 @@ struct PlayerControls: View {
         return nil
     }
 
-    var gradientStops: [Gradient.Stop] {
-        [
-            Gradient.Stop(color: .black.opacity(0.3), location: 0.0),
-            Gradient.Stop(color: .clear, location: 0.33),
-            Gradient.Stop(color: .clear, location: 0.66),
-            Gradient.Stop(color: .black.opacity(0.3), location: 1)
-        ]
-    }
-
     var timeline: some View {
         TimelineView(context: .player).foregroundColor(.primary)
     }

Shared/Player/ControlsGradientView.swift

@@ -0,0 +1,31 @@
+import SwiftUI
+
+struct ControlsGradientView: View {
+    @ObservedObject private var controls = PlayerControlsModel.shared
+
+    var body: some View {
+        if controls.presentingControls {
+            Rectangle()
+                .fill(
+                    LinearGradient(stops: gradientStops, startPoint: .top, endPoint: .bottom)
+                )
+                .transition(.opacity)
+        }
+    }
+
+    var gradientStops: [Gradient.Stop] {
+        [
+            Gradient.Stop(color: .black.opacity(0.3), location: 0.0),
+            Gradient.Stop(color: .clear, location: 0.33),
+            Gradient.Stop(color: .clear, location: 0.66),
+            Gradient.Stop(color: .black.opacity(0.3), location: 1)
+        ]
+    }
+}
+
+
+struct ControlsGradientView_Previews: PreviewProvider {
+    static var previews: some View {
+        ControlsGradientView()
+    }
+}

Shared/Player/PlayerBackendView.swift

@@ -9,11 +9,19 @@ struct PlayerBackendView: View {
     var body: some View {
         ZStack(alignment: .top) {
             Group {
-                switch player.activeBackend {
-                case .mpv:
-                    player.mpvPlayerView
-                case .appleAVPlayer:
-                    player.avPlayerView
+                ZStack {
+                    Group {
+                        switch player.activeBackend {
+                        case .mpv:
+                            player.mpvPlayerView
+                        case .appleAVPlayer:
+                            player.avPlayerView
+                        }
+                    }
+                    .zIndex(0)
+
+                    ControlsGradientView()
+                        .zIndex(1)
                 }
             }
             .overlay(GeometryReader { proxy in