Cache the width/height with the engine manager

src/hooks/useSetupEngineManager.ts

@@ -28,7 +28,11 @@ export function useSetupEngineManager(
   const quadWidth = Math.round(width / 4) * 4
   const height = streamHeight ? streamHeight : 0
   const quadHeight = Math.round(height / 4) * 4
-  const eng = useRef<EngineCommandManager | null>(null)
+  const eng = useRef<{
+    engine: EngineCommandManager
+    width: number
+    height: number
+  } | null>(null)
 
   useLayoutEffect(() => {
     setStreamDimensions({
@@ -36,21 +40,37 @@ export function useSetupEngineManager(
       streamHeight: quadHeight,
     })
     if (!width || !height) return
-    if (eng.current === null) {
+
-      eng.current = new EngineCommandManager({
+    if (eng.current) {
-        setMediaStream,
+      // Before we go further, we're going to check to see if the
-        setIsStreamReady,
+      // width/height is the same as the last go-around. If it is, we
-        width: quadWidth,
+      // can continue as normal, but if it's different, we should be
-        height: quadHeight,
+      // clearing out the manager and going again.
-        token,
+      let c = eng.current
-      })
+      if (width !== c.width || height !== c.height) {
+        eng.current = null
+      }
     }
-    setEngineCommandManager(eng.current)
+
-    eng.current.waitForReady.then(() => {
+    if (eng.current === null) {
+      eng.current = {
+        engine: new EngineCommandManager({
+          setMediaStream,
+          setIsStreamReady,
+          width: quadWidth,
+          height: quadHeight,
+          token,
+        }),
+        width: width,
+        height: height,
+      }
+    }
+    setEngineCommandManager(eng.current.engine)
+    eng.current.engine.waitForReady.then(() => {
       executeCode()
     })
     return () => {
-      eng.current?.tearDown()
+      eng.current?.engine?.tearDown()
     }
   }, [quadWidth, quadHeight])
 }