Use default HTML5 fullscreen for video

equinor · Feb 13, 2025 · 3c5f70b · 3c5f70b
1 parent bd97660
commit 3c5f70b
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 119 deletions.
diff --git a/frontend/src/components/Pages/MissionPage/VideoStream/FullScreenVideo.tsx b/frontend/src/components/Pages/MissionPage/VideoStream/FullScreenVideo.tsx
diff --git a/frontend/src/components/Pages/MissionPage/VideoStream/VideoPlayerSimpleStream.tsx b/frontend/src/components/Pages/MissionPage/VideoStream/VideoPlayerSimpleStream.tsx
@@ -1,5 +1,6 @@
-export const VideoPlayerSimpleStream = ({ videoStream }: { videoStream: MediaStream }) => (
+export const VideoPlayerSimpleStream = ({ videoStream, id }: { videoStream: MediaStream; id: string }) => (
     <video
+        id={id}
         autoPlay
         muted
         playsInline

diff --git a/frontend/src/components/Pages/MissionPage/VideoStream/VideoStreamCards.tsx b/frontend/src/components/Pages/MissionPage/VideoStream/VideoStreamCards.tsx
@@ -24,32 +24,27 @@ const StyledVideoSection = styled.div`
 interface IVideoStreamCardProps {
     videoStream: MediaStream
     videoStreamName?: string
-    toggleFullScreenMode: VoidFunction
-    setFullScreenStream: (videoStream: MediaStream) => void
+    videoStreamId: string
 }
 
-export const VideoStreamCard = ({
-    videoStream,
-    videoStreamName,
-    toggleFullScreenMode,
-    setFullScreenStream,
-}: IVideoStreamCardProps) => {
-    const turnOnFullScreen = () => {
-        setFullScreenStream(videoStream)
-        toggleFullScreenMode()
+export const VideoStreamCard = ({ videoStream, videoStreamName, videoStreamId }: IVideoStreamCardProps) => {
+    const setFullScreen = () => {
+        const elem = document.getElementById(videoStreamId)
+        if (elem && elem.requestFullscreen) {
+            elem.requestFullscreen()
+        }
     }
-
     const fullScreenButton = (
-        <FullscreenButton color="secondary" onClick={turnOnFullScreen}>
+        <FullscreenButton color="secondary" onClick={setFullScreen}>
             <Icon name={Icons.Fullscreen} size={32} />
         </FullscreenButton>
     )
 
     return (
         <VideoCard style={{ boxShadow: tokens.elevation.raised }}>
-            <div onDoubleClick={turnOnFullScreen}>
+            <div onDoubleClick={setFullScreen}>
                 <StyledVideoSection>
-                    <VideoPlayerSimpleStream videoStream={videoStream} />
+                    <VideoPlayerSimpleStream videoStream={videoStream} id={videoStreamId} />
                     {fullScreenButton}
                 </StyledVideoSection>
             </div>

diff --git a/frontend/src/components/Pages/MissionPage/VideoStream/VideoStreamWindow.tsx b/frontend/src/components/Pages/MissionPage/VideoStream/VideoStreamWindow.tsx
@@ -1,9 +1,6 @@
-import { useState } from 'react'
 import { Typography } from '@equinor/eds-core-react'
-import { FullScreenVideoStreamCard } from './FullScreenVideo'
 import { VideoStreamCard } from './VideoStreamCards'
 import styled from 'styled-components'
-import ReactModal from 'react-modal'
 import { useLanguageContext } from 'components/Contexts/LanguageContext'
 
 const VideoStreamContent = styled.div`
@@ -13,61 +10,27 @@ const VideoStreamContent = styled.div`
     padding-top: 1rem;
     padding-bottom: 1rem;
 `
-const VideoFullScreen = styled(ReactModal)`
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 90%;
-    transform: translate(-50%, -50%);
-    padding-top: 5rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-`
 
 interface VideoStreamWindowProps {
     videoStreams: MediaStreamTrack[]
 }
 
 export const VideoStreamWindow = ({ videoStreams }: VideoStreamWindowProps) => {
     const { TranslateText } = useLanguageContext()
-    const [fullScreenMode, setFullScreenMode] = useState<boolean>(false)
-    const [fullScreenStream, setFullScreenStream] = useState<MediaStream>()
-
-    const toggleFullScreenMode = () => {
-        setFullScreenMode(!fullScreenMode)
-    }
-    const updateFullScreenStream = (videoStream: MediaStream) => {
-        setFullScreenStream(videoStream)
-        toggleFullScreenMode()
-    }
 
     const videoCards = videoStreams.map((videoStream, index) => (
         <VideoStreamCard
             key={index}
             videoStream={new MediaStream([videoStream])}
             videoStreamName={undefined}
-            toggleFullScreenMode={toggleFullScreenMode}
-            setFullScreenStream={updateFullScreenStream}
+            videoStreamId={'videostreamid-' + index}
         />
     ))
 
-    const videoStream = fullScreenStream
     return (
         <>
             <Typography variant="h2">{TranslateText('Camera')}</Typography>
-            <VideoStreamContent>
-                {fullScreenMode === false && videoCards}
-                {videoStream && (
-                    <VideoFullScreen isOpen={fullScreenMode} onRequestClose={toggleFullScreenMode}>
-                        <FullScreenVideoStreamCard
-                            videoStream={videoStream}
-                            videoStreamName={undefined}
-                            toggleFullScreenMode={toggleFullScreenMode}
-                        />
-                    </VideoFullScreen>
-                )}
-            </VideoStreamContent>
+            <VideoStreamContent>{videoCards}</VideoStreamContent>
         </>
     )
 }