From 324cff18cc36361bda5c2db7f6e3eb04b19bf7d8 Mon Sep 17 00:00:00 2001
From: Pas <74743263+Pasithea0@users.noreply.github.com>
Date: Wed, 5 Nov 2025 10:25:48 -0700
Subject: [PATCH] fix some grey overlays on the video player with some browsers

---
 src/components/player/atoms/ProgressBar.tsx        | 5 ++++-
 src/components/player/base/SubtitleView.tsx        | 1 +
 src/components/player/internals/VideoContainer.tsx | 1 +
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/player/atoms/ProgressBar.tsx b/src/components/player/atoms/ProgressBar.tsx
index 90b91dcc..17af477a 100644
--- a/src/components/player/atoms/ProgressBar.tsx
+++ b/src/components/player/atoms/ProgressBar.tsx
@@ -62,7 +62,10 @@ function ThumbnailDisplay(props: { at: number; show: boolean }) {
                 className="h-24 border rounded-xl border-gray-800"
               />
             )}
-            <p className="mt-1 mx-auto text-center border rounded-xl border-gray-800 px-3 py-1 backdrop-blur-lg bg-black bg-opacity-20 w-max">
+            <p
+              className="mt-1 mx-auto text-center border rounded-xl border-gray-800 px-3 py-1 backdrop-blur-lg bg-black bg-opacity-20 w-max"
+              style={{ isolation: "isolate" }}
+            >
               {formattedTime}
             </p>
           </div>
diff --git a/src/components/player/base/SubtitleView.tsx b/src/components/player/base/SubtitleView.tsx
index 83a6946b..3339d315 100644
--- a/src/components/player/base/SubtitleView.tsx
+++ b/src/components/player/base/SubtitleView.tsx
@@ -98,6 +98,7 @@ export function CaptionCue({
           styling.backgroundBlur !== 0
             ? `blur(${Math.floor(styling.backgroundBlur * 64)}px)`
             : "none",
+        isolation: styling.backgroundBlur !== 0 ? "isolate" : "auto",
         fontWeight: styling.bold ? "bold" : "normal",
         ...textEffectStyles,
       }}
diff --git a/src/components/player/internals/VideoContainer.tsx b/src/components/player/internals/VideoContainer.tsx
index 89d34433..ff935d51 100644
--- a/src/components/player/internals/VideoContainer.tsx
+++ b/src/components/player/internals/VideoContainer.tsx
@@ -103,6 +103,7 @@ function VideoElement() {
     <video
       id="video-element"
       className="absolute inset-0 w-full h-screen bg-black"
+      style={{ isolation: "isolate" }}
       autoPlay
       playsInline
       ref={videoEl}