refactor(player): replace fake css fullscreen with real one

AppQuality · Oct 20, 2023 · c5967a6 · c5967a6
1 parent 1079810
commit c5967a6
Showing 1 changed file with 55 additions and 35 deletions.
diff --git a/src/pages/UxDashboard/UxForm/VideoParts/VideoPlayer/index.tsx b/src/pages/UxDashboard/UxForm/VideoParts/VideoPlayer/index.tsx
@@ -1,10 +1,9 @@
 import Video from "@appquality/stream-player";
 import styled from "styled-components";
 import { VideoControls } from "./VideoControls";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 const PlayerWrapper = styled.div<{
-  isFullScreen?: boolean;
   isLoading?: boolean;
 }>`
   position: relative;
@@ -28,35 +27,15 @@ const PlayerWrapper = styled.div<{
       }
     }
   `}
-
-  ${({ isFullScreen, theme }) =>
-    !isFullScreen &&
-    `
-    border-top-left-radius: ${theme.general.borderRadius};
-    border-top-right-radius: ${theme.general.borderRadius};
-    // from card to list item in desktop  
-    @media (min-width: ${theme.grid.breakpoints.lg}) {
-      border-top-right-radius: 0;
-      border-bottom-left-radius: ${theme.general.borderRadius};
-    }
-  `}
-
-  ${({ isFullScreen }) =>
-    isFullScreen &&
-    `
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background-color: black;
-    z-index: 1000;
-    video {
-      max-height: 100vh;
-    }
-  `}
 `;
 
+interface ElementWithFullscreen extends HTMLDivElement {
+  webkitEnterFullscreen?: () => Promise<void>;
+  webkitRequestFullscreen?: () => Promise<void>;
+  mozRequestFullScreen?: () => Promise<void>;
+  msRequestFullscreen?: () => Promise<void>;
+}
+
 const VideoPlayer = ({
   videoFieldName,
   title,
@@ -68,6 +47,51 @@ const VideoPlayer = ({
   const [isLoading, setIsLoading] = useState(true);
   const playerRef = useRef<HTMLDivElement>(null);
 
+  const handleFullScreen = useCallback(async () => {
+    if (playerRef) {
+      const ref = playerRef.current as ElementWithFullscreen;
+      if (!isFullScreen || !document.fullscreenElement) {
+        setFullScreen(true);
+        if (ref.requestFullscreen) {
+          await ref.requestFullscreen();
+        } else if (ref.webkitRequestFullscreen) {
+          await ref.webkitRequestFullscreen();
+        } else if (ref.mozRequestFullScreen) {
+          await ref.mozRequestFullScreen();
+        } else if (ref.webkitEnterFullscreen) {
+          // iOS
+          await ref.webkitEnterFullscreen();
+        } else if (ref.msRequestFullscreen) {
+          await ref.msRequestFullscreen();
+        } else {
+          console.error("Fullscreen API is not supported");
+          setFullScreen(false);
+        }
+      } else {
+        if (document.fullscreenElement) {
+          await document.exitFullscreen();
+        }
+        setFullScreen(false);
+      }
+    }
+  }, [playerRef, isFullScreen]);
+
+  useEffect(() => {
+    if (playerRef && playerRef.current) {
+      playerRef.current.addEventListener("fullscreenchange", () => {
+        setFullScreen(!!document.fullscreenElement);
+      });
+    }
+
+    return () => {
+      if (playerRef && playerRef.current) {
+        playerRef.current.removeEventListener("fullscreenchange", () => {
+          setFullScreen(!!document.fullscreenElement);
+        });
+      }
+    };
+  }, [playerRef]);
+
   useEffect(() => {
     playerRef.current
       ?.querySelector("video")
@@ -76,18 +100,14 @@ const VideoPlayer = ({
       });
   }, []);
   return (
-    <PlayerWrapper
-      isFullScreen={isFullScreen}
-      isLoading={isLoading}
-      ref={playerRef}
-    >
+    <PlayerWrapper isLoading={isLoading} ref={playerRef}>
       <Video.Player />
       {!isLoading && (
         <VideoControls
           videoFieldName={videoFieldName}
           title={title}
           isFullScreen={isFullScreen}
-          setFullScreen={setFullScreen}
+          setFullScreen={handleFullScreen}
         />
       )}
     </PlayerWrapper>