check for fullscreen before initializing new stream player

Author: MichaelMuenzenhofer

src/components/streamFeed/StreamPlayer.tsx

@@ -1,7 +1,8 @@
 import { useRef, useState } from 'react'
+import { useFullscreen } from '../../hooks/useFullscreen'
 import { useInitPlayer } from '../../hooks/useInitPlayer'
-import { useUpdatePlayerHeight } from '../../hooks/useUpdatePlayerHeight'
 import { useSetPlayerHeight } from '../../hooks/useSetPlayerHeight'
+import { useUpdatePlayerHeight } from '../../hooks/useUpdatePlayerHeight'
 
 interface StreamPlayerProps {
     channel: string
@@ -13,7 +14,8 @@ const StreamPlayer: React.FC<StreamPlayerProps> = ({ channel }) => {
     const [height, setHeight] = useState(0)
     const volume = 0.5
 
-    useUpdatePlayerHeight(containerRef, setHeight)
+    const isFullscreen = useFullscreen()
+    useUpdatePlayerHeight(containerRef, isFullscreen, setHeight)
     useInitPlayer(channel, containerRef, height, playerRef, volume)
     useSetPlayerHeight(height, playerRef)
 

src/hooks/useFullscreen.ts

@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react'
+
+export const useFullscreen = () => {
+    const [isFullscreen, setIsFullscreen] = useState(false)
+
+    useEffect(() => {
+        const handler = () => {
+            setIsFullscreen(!!document.fullscreenElement)
+        }
+        document.addEventListener('fullscreenchange', handler)
+        return () => document.removeEventListener('fullscreenchange', handler)
+    }, [])
+
+    return isFullscreen
+}

src/hooks/useUpdatePlayerHeight.ts

@@ -2,17 +2,19 @@ import { useEffect } from 'react'
 
 export const useUpdatePlayerHeight = (
     containerRef: React.MutableRefObject<HTMLDivElement | null>,
+    isFullscreen: boolean,
     setHeight: (value: React.SetStateAction<number>) => void
 ) => {
     useEffect(() => {
         const updateHeight = () => {
-            if (containerRef.current) {
+            if (containerRef.current && !isFullscreen) {
                 const width = containerRef.current.offsetWidth
                 setHeight(Math.round((width * 9) / 16))
             }
         }
+
         updateHeight()
         window.addEventListener('resize', updateHeight)
         return () => window.removeEventListener('resize', updateHeight)
-    }, [containerRef, setHeight])
+    }, [containerRef, isFullscreen, setHeight])
 }