From cf3047ebcf0094cf5860b649ce9f468f721b96ad Mon Sep 17 00:00:00 2001
From: aidenlx <31102694+aidenlx@users.noreply.github.com>
Date: Thu, 15 Feb 2024 13:33:58 +0800
Subject: [PATCH] fix(player): fix video controls not hidden when not focused

---
 apps/app/src/components/player/layouts/video-layout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/app/src/components/player/layouts/video-layout.tsx b/apps/app/src/components/player/layouts/video-layout.tsx
index 79273b4b..a1bc8950 100644
--- a/apps/app/src/components/player/layouts/video-layout.tsx
+++ b/apps/app/src/components/player/layouts/video-layout.tsx
@@ -18,7 +18,7 @@ export function VideoLayout({ thumbnails }: VideoLayoutProps) {
       <Captions
         className={`mx-captions media-preview:opacity-0 media-controls:bottom-[85px] media-captions:opacity-100 absolute inset-0 bottom-2 z-10 select-none break-words opacity-0 transition-[opacity,bottom] duration-300`}
       />
-      <Controls.Root className="absolute inset-0 z-10 flex h-full w-full flex-col bg-gradient-to-t from-black/10 to-transparent opacity-100 transition-opacity">
+      <Controls.Root className="media-controls:opacity-100 not-media-can-load:opacity-100 absolute inset-0 z-10 flex h-full w-full flex-col bg-gradient-to-t from-black/10 to-transparent opacity-0 transition-opacity">
         <Tooltip.Provider>
           <div className="flex-1" />
           <Controls.Group className="flex w-full items-center px-2">