diff --git a/src/AppState.tsx b/src/AppState.tsx index ee7c8b4e7..7ecb30fdc 100644 --- a/src/AppState.tsx +++ b/src/AppState.tsx @@ -39,3 +39,32 @@ export const AppStateProvider = ({ children }: { children: ReactNode }) => { ) } + +interface AppStream { + mediaStream: MediaStream + setMediaStream: (mediaStream: MediaStream) => void +} + +const AppStreamContext = createContext({ + mediaStream: undefined as unknown as MediaStream, + setMediaStream: () => {}, +}) + +export const useAppStream = () => useContext(AppStreamContext) + +export const AppStreamProvider = ({ children }: { children: ReactNode }) => { + const [mediaStream, setMediaStream] = useState( + undefined as unknown as MediaStream + ) + + return ( + + {children} + + ) +} diff --git a/src/components/Stream.tsx b/src/components/Stream.tsx index abc499baa..992bb6808 100644 --- a/src/components/Stream.tsx +++ b/src/components/Stream.tsx @@ -9,6 +9,7 @@ import { ClientSideScene } from 'clientSideScene/ClientSideSceneComp' import { btnName } from 'lib/cameraControls' import { sendSelectEventToEngine } from 'lib/selections' import { kclManager, engineCommandManager, sceneInfra } from 'lib/singletons' +import { useAppStream } from 'AppState' export const Stream = () => { const [isLoading, setIsLoading] = useState(true) @@ -17,6 +18,7 @@ export const Stream = () => { const videoRef = useRef(null) const { settings } = useSettingsAuthContext() const { state, send, context } = useModelingContext() + const { mediaStream } = useAppStream() const { overallState } = useNetworkContext() const [isFreezeFrame, setIsFreezeFrame] = useState(false) @@ -124,12 +126,10 @@ export const Stream = () => { ) return if (!videoRef.current) return - const _mediaStream = - context.store?.mediaStream || (window as any).mediaStream - if (!_mediaStream) return + if (!mediaStream) return // Do not immediately play the stream! - videoRef.current.srcObject = _mediaStream + videoRef.current.srcObject = mediaStream videoRef.current.pause() send({ @@ -138,7 +138,7 @@ export const Stream = () => { videoElement: videoRef.current, }, }) - }, [context.store?.mediaStream]) + }, [mediaStream]) const handleMouseDown: MouseEventHandler = (e) => { if (!isNetworkOkay) return diff --git a/src/hooks/useSetupEngineManager.ts b/src/hooks/useSetupEngineManager.ts index 1791f9097..506589ccf 100644 --- a/src/hooks/useSetupEngineManager.ts +++ b/src/hooks/useSetupEngineManager.ts @@ -4,7 +4,7 @@ import { deferExecution } from 'lib/utils' import { Themes } from 'lib/theme' import { makeDefaultPlanes, modifyGrid } from 'lang/wasm' import { useModelingContext } from './useModelingContext' -import { useAppState } from 'AppState' +import { useAppState, useAppStream } from 'AppState' export function useSetupEngineManager( streamRef: React.RefObject, @@ -28,6 +28,7 @@ export function useSetupEngineManager( } ) { const { setAppState } = useAppState() + const { setMediaStream } = useAppStream() const streamWidth = streamRef?.current?.offsetWidth const streamHeight = streamRef?.current?.offsetHeight @@ -54,13 +55,7 @@ export function useSetupEngineManager( settings.modelingSend ) { engineCommandManager.start({ - setMediaStream: (mediaStream) => { - settings.modelingSend({ - type: 'Set context', - data: { mediaStream }, - }) - ;(window as any).mediaStream = mediaStream - }, + setMediaStream: setMediaStream, setIsStreamReady: (isStreamReady) => setAppState({ isStreamReady }), width: quadWidth, height: quadHeight, diff --git a/src/index.tsx b/src/index.tsx index e893c0d13..49b11ba77 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -13,6 +13,7 @@ import { UpdaterRestartModal, createUpdaterRestartModal, } from 'components/UpdaterRestartModal' +import { AppStreamProvider } from 'AppState' // uncomment for xstate inspector // import { DEV } from 'env' @@ -26,28 +27,30 @@ const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement) root.render( - - + + - + className: + 'bg-chalkboard-10 dark:bg-chalkboard-90 text-chalkboard-110 dark:text-chalkboard-10 rounded-sm border-chalkboard-20/50 dark:border-chalkboard-80/50', + success: { + iconTheme: { + primary: 'oklch(89% 0.16 143.4deg)', + secondary: 'oklch(48.62% 0.1654 142.5deg)', + }, + duration: + window?.localStorage.getItem('playwright') === 'true' + ? 10 // speed up e2e tests + : 1500, + }, + }} + /> + + ) diff --git a/src/machines/modelingMachine.ts b/src/machines/modelingMachine.ts index 8115a3378..4912a2b8c 100644 --- a/src/machines/modelingMachine.ts +++ b/src/machines/modelingMachine.ts @@ -138,7 +138,6 @@ export type SegmentOverlayPayload = } interface Store { - mediaStream?: MediaStream videoElement?: HTMLVideoElement buttonDownInStream: number | undefined didDragInStream: boolean