From 0c08052b8f79e87f32b57c0b52480ca1b2907b77 Mon Sep 17 00:00:00 2001
From: Pas <74743263+Pasithea0@users.noreply.github.com>
Date: Sun, 9 Nov 2025 12:47:47 -0700
Subject: [PATCH] remove top and bottom controls when caption bg blur is
 disabled to prevent hdr flicker

Updated TopControls and BottomControls to render the background gradient transitions only if backgroundBlurEnabled is true in the subtitle store. This ensures the UI matches the subtitle styling preferences.
---
 src/components/player/base/BottomControls.tsx | 16 +++++++++-----
 src/components/player/base/TopControls.tsx    | 22 ++++++++++++-------
 2 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/components/player/base/BottomControls.tsx b/src/components/player/base/BottomControls.tsx
index 61b854a1..009d7f38 100644
--- a/src/components/player/base/BottomControls.tsx
+++ b/src/components/player/base/BottomControls.tsx
@@ -2,6 +2,7 @@ import { useEffect } from "react";
 
 import { Transition } from "@/components/utils/Transition";
 import { usePlayerStore } from "@/stores/player/store";
+import { useSubtitleStore } from "@/stores/subtitles";
 
 export function BottomControls(props: {
   show?: boolean;
@@ -10,6 +11,9 @@ export function BottomControls(props: {
   const setHoveringAnyControls = usePlayerStore(
     (s) => s.setHoveringAnyControls,
   );
+  const backgroundBlurEnabled = useSubtitleStore(
+    (s) => s.styling.backgroundBlurEnabled,
+  );
 
   useEffect(() => {
     return () => {
@@ -19,11 +23,13 @@ export function BottomControls(props: {
 
   return (
     <div className="w-full text-white">
-      <Transition
-        animation="fade"
-        show={props.show}
-        className="pointer-events-none flex justify-end pt-32 bg-gradient-to-t from-black to-transparent transition-opacity duration-200 absolute bottom-0 w-full"
-      />
+      {backgroundBlurEnabled && (
+        <Transition
+          animation="fade"
+          show={props.show}
+          className="pointer-events-none flex justify-end pt-32 bg-gradient-to-t from-black to-transparent transition-opacity duration-200 absolute bottom-0 w-full"
+        />
+      )}
       <div
         onMouseOver={() => setHoveringAnyControls(true)}
         onMouseOut={() => setHoveringAnyControls(false)}
diff --git a/src/components/player/base/TopControls.tsx b/src/components/player/base/TopControls.tsx
index 8aa96002..2e688635 100644
--- a/src/components/player/base/TopControls.tsx
+++ b/src/components/player/base/TopControls.tsx
@@ -4,6 +4,7 @@ import { Transition } from "@/components/utils/Transition";
 import { useBannerSize } from "@/stores/banner";
 import { BannerLocation } from "@/stores/banner/BannerLocation";
 import { usePlayerStore } from "@/stores/player/store";
+import { useSubtitleStore } from "@/stores/subtitles";
 
 export function TopControls(props: {
   show?: boolean;
@@ -13,6 +14,9 @@ export function TopControls(props: {
   const setHoveringAnyControls = usePlayerStore(
     (s) => s.setHoveringAnyControls,
   );
+  const backgroundBlurEnabled = useSubtitleStore(
+    (s) => s.styling.backgroundBlurEnabled,
+  );
 
   useEffect(() => {
     return () => {
@@ -22,14 +26,16 @@ export function TopControls(props: {
 
   return (
     <div className="w-full text-white">
-      <Transition
-        animation="fade"
-        show={props.show}
-        style={{
-          top: `${bannerSize}px`,
-        }}
-        className="pointer-events-none flex justify-end pb-32 bg-gradient-to-b from-black to-transparent [margin-bottom:env(safe-area-inset-bottom)] transition-opacity duration-200 absolute top-0 w-full"
-      />
+      {backgroundBlurEnabled && (
+        <Transition
+          animation="fade"
+          show={props.show}
+          style={{
+            top: `${bannerSize}px`,
+          }}
+          className="pointer-events-none flex justify-end pb-32 bg-gradient-to-b from-black to-transparent [margin-bottom:env(safe-area-inset-bottom)] transition-opacity duration-200 absolute top-0 w-full"
+        />
+      )}
       <div className="relative z-10">
         <BannerLocation location="player" />
       </div>