Make stream size based on container element, not window

Author: franknoirot

src/components/EngineStream.tsx

@@ -92,6 +92,15 @@ export const EngineStream = (props: {
     setStreamIdleMode(settings.app.streamIdleMode.current)
   }, [settings.app.streamIdleMode.current])
 
+  useEffect(() => {
+    // Will cause a useEffect loop if not checked for.
+    if (engineStreamState.context.containerElementRef.current !== null) return
+    engineStreamActor.send({
+      type: EngineStreamTransition.SetContainerElementRef,
+      containerElementRef: { current: videoWrapperRef.current },
+    })
+  }, [videoWrapperRef.current, engineStreamState])
+
   useEffect(() => {
     // Will cause a useEffect loop if not checked for.
     if (engineStreamState.context.videoRef.current !== null) return
@@ -298,6 +307,8 @@ export const EngineStream = (props: {
     // But if the user resizes, and we're stopped or paused, then we want
     // to try to restart the stream!
 
+    const wrapper = engineStreamState.context.containerElementRef?.current
+    if (!wrapper) return
     const video = engineStreamState.context.videoRef?.current
     if (!video) return
     const canvas = engineStreamState.context.canvasRef?.current
@@ -312,8 +323,8 @@ export const EngineStream = (props: {
         last.current = Date.now()
 
         if (
-          (Math.abs(video.width - window.innerWidth) > 4 ||
-            Math.abs(video.height - window.innerHeight) > 4) &&
+          (Math.abs(video.width - wrapper.clientWidth) > 4 ||
+            Math.abs(video.height - wrapper.clientHeight) > 4) &&
           engineStreamState.matches(EngineStreamState.Playing)
         ) {
           timeoutStart.current = Date.now()
@@ -322,7 +333,7 @@ export const EngineStream = (props: {
       })
     })
 
-    observer.observe(document.body)
+    observer.observe(wrapper)
 
     return () => {
       observer.disconnect()
@@ -562,7 +573,7 @@ export const EngineStream = (props: {
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     <div
       ref={videoWrapperRef}
-      className="fixed inset-0 z-0"
+      className="absolute inset-[-4px] z-0"
       id="stream"
       data-testid="stream"
       onMouseUp={handleMouseUp}

src/machines/engineStreamMachine.ts

@@ -22,6 +22,7 @@ export enum EngineStreamTransition {
   // Our dependencies to set
   SetPool = 'set-pool',
   SetAuthToken = 'set-auth-token',
+  SetContainerElementRef = 'set-container-element-ref',
   SetVideoRef = 'set-video-ref',
   SetCanvasRef = 'set-canvas-ref',
   SetMediaStream = 'set-media-stream',
@@ -39,6 +40,7 @@ export enum EngineStreamTransition {
 export interface EngineStreamContext {
   pool: string | null
   authToken: string | undefined
+  containerElementRef: MutableRefObject<HTMLDivElement | null>
   videoRef: MutableRefObject<HTMLVideoElement | null>
   canvasRef: MutableRefObject<HTMLCanvasElement | null>
   mediaStream: MediaStream | null
@@ -48,6 +50,7 @@ export interface EngineStreamContext {
 export const engineStreamContextCreate = (): EngineStreamContext => ({
   pool: null,
   authToken: undefined,
+  containerElementRef: { current: null },
   videoRef: { current: null },
   canvasRef: { current: null },
   mediaStream: null,
@@ -99,12 +102,13 @@ export const engineStreamMachine = setup({
         }
       }) => {
         if (!context.authToken) return Promise.reject()
+        if (!context.containerElementRef.current) return Promise.reject()
         if (!context.videoRef.current) return Promise.reject()
         if (!context.canvasRef.current) return Promise.reject()
 
         const { width, height } = getDimensions(
-          window.innerWidth,
-          window.innerHeight
+          context.containerElementRef.current.clientWidth,
+          context.containerElementRef.current.clientHeight
         )
 
         context.videoRef.current.width = width
@@ -273,6 +277,14 @@ export const engineStreamMachine = setup({
             assign({ authToken: ({ context, event }) => event.authToken }),
           ],
         },
+        [EngineStreamTransition.SetContainerElementRef]: {
+          target: EngineStreamState.WaitingForDependencies,
+          actions: [
+            assign({
+              containerElementRef: ({ event }) => event.containerElementRef,
+            }),
+          ],
+        },
         [EngineStreamTransition.SetVideoRef]: {
           target: EngineStreamState.WaitingForDependencies,
           actions: [