Pause stream when exiting sketch or extruding (#2900)

* Pause when exiting sketch or extruding

* tsc

src/components/ModelingMachineProvider.tsx

@@ -128,7 +128,7 @@ export const ModelingMachineProvider = ({
         'enable copilot': () => {
           editorManager.setCopilotEnabled(true)
         },
-        'sketch exit execute': () => {
+        'sketch exit execute': ({ store }) => {
           ;(async () => {
             await sceneInfra.camControls.snapToPerspectiveBeforeHandingBackControlToEngine()
 
@@ -162,7 +162,10 @@ export const ModelingMachineProvider = ({
               })
             }
 
-            kclManager.executeCode(true)
+            store.videoElement?.pause()
+            kclManager.executeCode(true).then(() => {
+              store.videoElement?.play()
+            })
           })()
         },
         'Set mouse state': assign({

src/components/Stream.tsx

@@ -68,6 +68,13 @@ export const Stream = () => {
     if (!videoRef.current) return
     if (!context.store?.mediaStream) return
     videoRef.current.srcObject = context.store.mediaStream
+
+    send({
+      type: 'Set context',
+      data: {
+        videoElement: videoRef.current,
+      },
+    })
   }, [context.store?.mediaStream])
 
   const handleMouseDown: MouseEventHandler<HTMLDivElement> = (e) => {

src/machines/modelingMachine.ts

@@ -133,6 +133,7 @@ export type SegmentOverlayPayload =
 
 interface Store {
   mediaStream?: MediaStream
+  videoElement?: HTMLVideoElement
   buttonDownInStream: number | undefined
   didDragInStream: boolean
   streamDimensions: { streamWidth: number; streamHeight: number }
@@ -978,7 +979,7 @@ export const modelingMachine = createMachine(
       'set new sketch metadata': assign((_, { data }) => ({
         sketchDetails: data,
       })),
-      'AST extrude': async (_, event) => {
+      'AST extrude': async ({ store }, event) => {
         if (!event.data) return
         const { selection, distance } = event.data
         let ast = kclManager.ast
@@ -1010,6 +1011,7 @@ export const modelingMachine = createMachine(
         if (trap(extrudeSketchRes)) return
         const { modifiedAst, pathToExtrudeArg } = extrudeSketchRes
 
+        store.videoElement?.pause()
         const updatedAst = await kclManager.updateAst(modifiedAst, true, {
           focusPath: pathToExtrudeArg,
           zoomToFit: true,
@@ -1018,6 +1020,7 @@ export const modelingMachine = createMachine(
             type: 'start_path',
           },
         })
+        store.videoElement?.play()
         if (updatedAst?.selections) {
           editorManager.selectRange(updatedAst?.selections)
         }