fix(player): use new slot to place theater icon properly

Zibbp · Feb 18, 2024 · 25366a1 · 25366a1
1 parent b5f5587
commit 25366a1
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 46 deletions.
diff --git a/src/components/Vod/TheaterModeIcon.module.css b/src/components/Vod/TheaterModeIcon.module.css
@@ -1,14 +1,7 @@
 .theaterIcon {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 100;
-  padding: 0.5rem;
   cursor: pointer;
   color: #f5f5f5;
   transition: all 0.2s ease-in-out;
-
-
 }
 .customFullScreenButton {
   color: #f5f5f5;

diff --git a/src/components/Vod/TheaterModeIcon.tsx b/src/components/Vod/TheaterModeIcon.tsx
@@ -22,7 +22,7 @@ const TheaterModeIcon = () => {
           onTouchStart={toggleTheaterMode}
           className={classes.customFullScreenButton}
         >
-          <IconMaximize size="1.8rem" />
+          <IconMaximize size="1.7rem" />
         </ActionIcon>
       </Tooltip>
     </div>

diff --git a/src/components/Vod/VideoPlayer.tsx b/src/components/Vod/VideoPlayer.tsx
@@ -41,31 +41,16 @@ const NewVideoPlayer = ({ vod }: any) => {
   const [videoPoster, setVideoPoster] = useState<string>("");
   const [videoTitle, setVideoTitle] = useState<string>("");
   const startedPlayback = useRef(false);
-  const [playerIsHovered, setPlayerIsHovered] = useState(true);
   const [isFullscreen, setIsFullscreen] = useState(false);
 
   const searchParams = useSearchParams()
 
-  const handleHover = () => {
-    setPlayerIsHovered(true);
-  };
-
-  const handleMouseLeave = () => {
-    setPlayerIsHovered(false);
-  };
-
-  const handleTouch = () => {
-    setPlayerIsHovered(!playerIsHovered);
-  };
-
   useEffect(() => {
     eventBus.on("theaterMode", (data) => {
       setIsFullscreen(data);
     });
   }, []);
 
-
-
   // Fetch playback data
   const { data } = useQuery({
     refetchOnWindowFocus: false,
@@ -172,20 +157,6 @@ const NewVideoPlayer = ({ vod }: any) => {
       player.current!.currentTime = parseInt(time);
     }
 
-    // const mediaFullscreenButton = document.querySelector("#media-menu-2");
-    // console.log(mediaFullscreenButton)
-    // const buttonContainer = document.createElement("div");
-
-    // if (mediaFullscreenButton) {
-    //   mediaFullscreenButton.parentNode.insertBefore(
-    //     buttonContainer,
-    //     mediaFullscreenButton.nextSibling
-    //   );
-    //   // Render the button component inside the container
-    //   ReactDOM.render(<TheaterModeIcon />, buttonContainer);
-    // }
-
-
   }, [data, player]);
 
 
@@ -262,26 +233,24 @@ const NewVideoPlayer = ({ vod }: any) => {
         src={videoSource}
         aspect-ratio={16 / 9}
         ref={player}
-        crossorigin
-        onMouseEnter={handleHover}
-        onMouseLeave={handleMouseLeave}
-        onTouchStart={handleTouch}
-        playsinline
+        crossOrigin={true}
+        playsInline={true}
       >
 
         <MediaProvider >
           <Poster className="vds-poster" src={videoPoster} alt={vod.title} />
-          {playerIsHovered && (
-            <TheaterModeIcon />
-          )}
           <Track
             src={`${publicRuntimeConfig.API_URL}/api/v1/chapter/video/${vod.id}/webvtt`}
             kind="chapters"
             default={true}
           />
         </MediaProvider>
 
-        <DefaultVideoLayout icons={defaultLayoutIcons} > </DefaultVideoLayout>
+        <DefaultVideoLayout icons={defaultLayoutIcons} noScrubGesture={false}
+          slots={{
+            beforeFullscreenButton: <TheaterModeIcon />,
+          }}
+        />
       </MediaPlayer>
     </div>
   );