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) {
+      // Before we go further, we're going to check to see if the
+      // width/height is the same as the last go-around. If it is, we
+      // can continue as normal, but if it's different, we should be
+      // clearing out the manager and going again.
+      let c = eng.current
+      if (width !== c.width || height !== c.height) {
+        eng.current = null
+      }
+    }
+
     if (eng.current === null) {
-      eng.current = new EngineCommandManager({
+      eng.current = {
+        engine: new EngineCommandManager({
           setMediaStream,
           setIsStreamReady,
           width: quadWidth,
           height: quadHeight,
           token,
-      })
+        }),
+        width: width,
+        height: height,
       }
-    setEngineCommandManager(eng.current)
+    }
-    eng.current.waitForReady.then(() => {
+    setEngineCommandManager(eng.current.engine)
+    eng.current.engine.waitForReady.then(() => {
       executeCode()
     })
     return () => {
-      eng.current?.tearDown()
+      eng.current?.engine?.tearDown()
     }
   }, [quadWidth, quadHeight])
 }