|
|
@ -1,3 +1,4 @@
|
|
|
|
|
|
|
|
import { DEV } from 'env'
|
|
|
|
import { MouseEventHandler, useEffect, useRef, useState } from 'react'
|
|
|
|
import { MouseEventHandler, useEffect, useRef, useState } from 'react'
|
|
|
|
import { getNormalisedCoordinates } from '../lib/utils'
|
|
|
|
import { getNormalisedCoordinates } from '../lib/utils'
|
|
|
|
import Loading from './Loading'
|
|
|
|
import Loading from './Loading'
|
|
|
@ -20,6 +21,8 @@ export const Stream = () => {
|
|
|
|
const { overallState } = useNetworkContext()
|
|
|
|
const { overallState } = useNetworkContext()
|
|
|
|
const [isFreezeFrame, setIsFreezeFrame] = useState(false)
|
|
|
|
const [isFreezeFrame, setIsFreezeFrame] = useState(false)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const IDLE = false
|
|
|
|
|
|
|
|
|
|
|
|
const isNetworkOkay =
|
|
|
|
const isNetworkOkay =
|
|
|
|
overallState === NetworkHealthState.Ok ||
|
|
|
|
overallState === NetworkHealthState.Ok ||
|
|
|
|
overallState === NetworkHealthState.Weak
|
|
|
|
overallState === NetworkHealthState.Weak
|
|
|
@ -65,14 +68,16 @@ export const Stream = () => {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// Teardown everything if we go hidden or reconnect
|
|
|
|
// Teardown everything if we go hidden or reconnect
|
|
|
|
if (globalThis?.window?.document) {
|
|
|
|
if (IDLE && DEV) {
|
|
|
|
globalThis.window.document.onvisibilitychange = () => {
|
|
|
|
if (globalThis?.window?.document) {
|
|
|
|
if (globalThis.window.document.visibilityState === 'hidden') {
|
|
|
|
globalThis.window.document.onvisibilitychange = () => {
|
|
|
|
clearTimeout(timeoutIdIdleA)
|
|
|
|
if (globalThis.window.document.visibilityState === 'hidden') {
|
|
|
|
timeoutIdIdleA = setTimeout(teardown, IDLE_TIME_MS)
|
|
|
|
clearTimeout(timeoutIdIdleA)
|
|
|
|
} else if (!engineCommandManager.engineConnection?.isReady()) {
|
|
|
|
timeoutIdIdleA = setTimeout(teardown, IDLE_TIME_MS)
|
|
|
|
clearTimeout(timeoutIdIdleA)
|
|
|
|
} else if (!engineCommandManager.engineConnection?.isReady()) {
|
|
|
|
engineCommandManager.engineConnection?.connect(true)
|
|
|
|
clearTimeout(timeoutIdIdleA)
|
|
|
|
|
|
|
|
engineCommandManager.engineConnection?.connect(true)
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -89,26 +94,38 @@ export const Stream = () => {
|
|
|
|
timeoutIdIdleB = setTimeout(teardown, IDLE_TIME_MS)
|
|
|
|
timeoutIdIdleB = setTimeout(teardown, IDLE_TIME_MS)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
globalThis?.window?.document?.addEventListener('keydown', onAnyInput)
|
|
|
|
if (IDLE && DEV) {
|
|
|
|
globalThis?.window?.document?.addEventListener('mousemove', onAnyInput)
|
|
|
|
globalThis?.window?.document?.addEventListener('keydown', onAnyInput)
|
|
|
|
globalThis?.window?.document?.addEventListener('mousedown', onAnyInput)
|
|
|
|
globalThis?.window?.document?.addEventListener('mousemove', onAnyInput)
|
|
|
|
globalThis?.window?.document?.addEventListener('scroll', onAnyInput)
|
|
|
|
globalThis?.window?.document?.addEventListener('mousedown', onAnyInput)
|
|
|
|
globalThis?.window?.document?.addEventListener('touchstart', onAnyInput)
|
|
|
|
globalThis?.window?.document?.addEventListener('scroll', onAnyInput)
|
|
|
|
|
|
|
|
globalThis?.window?.document?.addEventListener('touchstart', onAnyInput)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
timeoutIdIdleB = setTimeout(teardown, IDLE_TIME_MS)
|
|
|
|
if (IDLE && DEV) {
|
|
|
|
|
|
|
|
timeoutIdIdleB = setTimeout(teardown, IDLE_TIME_MS)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
return () => {
|
|
|
|
globalThis?.window?.document?.removeEventListener('paste', handlePaste, {
|
|
|
|
globalThis?.window?.document?.removeEventListener('paste', handlePaste, {
|
|
|
|
capture: true,
|
|
|
|
capture: true,
|
|
|
|
})
|
|
|
|
})
|
|
|
|
globalThis?.window?.document?.removeEventListener('keydown', onAnyInput)
|
|
|
|
if (IDLE && DEV) {
|
|
|
|
globalThis?.window?.document?.removeEventListener('mousemove', onAnyInput)
|
|
|
|
globalThis?.window?.document?.removeEventListener('keydown', onAnyInput)
|
|
|
|
globalThis?.window?.document?.removeEventListener('mousedown', onAnyInput)
|
|
|
|
globalThis?.window?.document?.removeEventListener(
|
|
|
|
globalThis?.window?.document?.removeEventListener('scroll', onAnyInput)
|
|
|
|
'mousemove',
|
|
|
|
globalThis?.window?.document?.removeEventListener(
|
|
|
|
onAnyInput
|
|
|
|
'touchstart',
|
|
|
|
)
|
|
|
|
onAnyInput
|
|
|
|
globalThis?.window?.document?.removeEventListener(
|
|
|
|
)
|
|
|
|
'mousedown',
|
|
|
|
|
|
|
|
onAnyInput
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
globalThis?.window?.document?.removeEventListener('scroll', onAnyInput)
|
|
|
|
|
|
|
|
globalThis?.window?.document?.removeEventListener(
|
|
|
|
|
|
|
|
'touchstart',
|
|
|
|
|
|
|
|
onAnyInput
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}, [])
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
|
|
|
@ -128,7 +145,6 @@ export const Stream = () => {
|
|
|
|
|
|
|
|
|
|
|
|
// Do not immediately play the stream!
|
|
|
|
// Do not immediately play the stream!
|
|
|
|
videoRef.current.srcObject = context.store.mediaStream
|
|
|
|
videoRef.current.srcObject = context.store.mediaStream
|
|
|
|
videoRef.current.pause()
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
send({
|
|
|
|
send({
|
|
|
|
type: 'Set context',
|
|
|
|
type: 'Set context',
|
|
|
|