77 lines
2.1 KiB
TypeScript
77 lines
2.1 KiB
TypeScript
import { useRef, useLayoutEffect } from 'react'
|
|
import { _executor } from '../lang/executor'
|
|
import { useStore } from '../useStore'
|
|
import { EngineCommandManager } from '../lang/std/engineConnection'
|
|
|
|
export function useSetupEngineManager(
|
|
streamRef: React.RefObject<HTMLDivElement>,
|
|
token?: string
|
|
) {
|
|
const {
|
|
setEngineCommandManager,
|
|
setMediaStream,
|
|
setIsStreamReady,
|
|
setStreamDimensions,
|
|
executeCode,
|
|
} = useStore((s) => ({
|
|
setEngineCommandManager: s.setEngineCommandManager,
|
|
setMediaStream: s.setMediaStream,
|
|
setIsStreamReady: s.setIsStreamReady,
|
|
setStreamDimensions: s.setStreamDimensions,
|
|
executeCode: s.executeCode,
|
|
}))
|
|
|
|
const streamWidth = streamRef?.current?.offsetWidth
|
|
const streamHeight = streamRef?.current?.offsetHeight
|
|
|
|
const width = streamWidth ? streamWidth : 0
|
|
const quadWidth = Math.round(width / 4) * 4
|
|
const height = streamHeight ? streamHeight : 0
|
|
const quadHeight = Math.round(height / 4) * 4
|
|
const eng = useRef<{
|
|
engine: EngineCommandManager
|
|
width: number
|
|
height: number
|
|
} | null>(null)
|
|
|
|
useLayoutEffect(() => {
|
|
setStreamDimensions({
|
|
streamWidth: quadWidth,
|
|
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 = {
|
|
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?.engine?.tearDown()
|
|
}
|
|
}, [quadWidth, quadHeight])
|
|
}
|