|
|
@ -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,6 +68,7 @@ export const Stream = () => {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// Teardown everything if we go hidden or reconnect
|
|
|
|
// Teardown everything if we go hidden or reconnect
|
|
|
|
|
|
|
|
if (IDLE && DEV) {
|
|
|
|
if (globalThis?.window?.document) {
|
|
|
|
if (globalThis?.window?.document) {
|
|
|
|
globalThis.window.document.onvisibilitychange = () => {
|
|
|
|
globalThis.window.document.onvisibilitychange = () => {
|
|
|
|
if (globalThis.window.document.visibilityState === 'hidden') {
|
|
|
|
if (globalThis.window.document.visibilityState === 'hidden') {
|
|
|
@ -76,6 +80,7 @@ export const Stream = () => {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
let timeoutIdIdleB: ReturnType<typeof setTimeout> | undefined = undefined
|
|
|
|
let timeoutIdIdleB: ReturnType<typeof setTimeout> | undefined = undefined
|
|
|
|
|
|
|
|
|
|
|
@ -89,27 +94,39 @@ export const Stream = () => {
|
|
|
|
timeoutIdIdleB = setTimeout(teardown, IDLE_TIME_MS)
|
|
|
|
timeoutIdIdleB = setTimeout(teardown, IDLE_TIME_MS)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (IDLE && DEV) {
|
|
|
|
globalThis?.window?.document?.addEventListener('keydown', onAnyInput)
|
|
|
|
globalThis?.window?.document?.addEventListener('keydown', onAnyInput)
|
|
|
|
globalThis?.window?.document?.addEventListener('mousemove', onAnyInput)
|
|
|
|
globalThis?.window?.document?.addEventListener('mousemove', onAnyInput)
|
|
|
|
globalThis?.window?.document?.addEventListener('mousedown', onAnyInput)
|
|
|
|
globalThis?.window?.document?.addEventListener('mousedown', onAnyInput)
|
|
|
|
globalThis?.window?.document?.addEventListener('scroll', onAnyInput)
|
|
|
|
globalThis?.window?.document?.addEventListener('scroll', onAnyInput)
|
|
|
|
globalThis?.window?.document?.addEventListener('touchstart', onAnyInput)
|
|
|
|
globalThis?.window?.document?.addEventListener('touchstart', onAnyInput)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (IDLE && DEV) {
|
|
|
|
timeoutIdIdleB = setTimeout(teardown, IDLE_TIME_MS)
|
|
|
|
timeoutIdIdleB = setTimeout(teardown, IDLE_TIME_MS)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
return () => {
|
|
|
|
globalThis?.window?.document?.removeEventListener('paste', handlePaste, {
|
|
|
|
globalThis?.window?.document?.removeEventListener('paste', handlePaste, {
|
|
|
|
capture: true,
|
|
|
|
capture: true,
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
if (IDLE && DEV) {
|
|
|
|
globalThis?.window?.document?.removeEventListener('keydown', onAnyInput)
|
|
|
|
globalThis?.window?.document?.removeEventListener('keydown', onAnyInput)
|
|
|
|
globalThis?.window?.document?.removeEventListener('mousemove', onAnyInput)
|
|
|
|
globalThis?.window?.document?.removeEventListener(
|
|
|
|
globalThis?.window?.document?.removeEventListener('mousedown', onAnyInput)
|
|
|
|
'mousemove',
|
|
|
|
|
|
|
|
onAnyInput
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
globalThis?.window?.document?.removeEventListener(
|
|
|
|
|
|
|
|
'mousedown',
|
|
|
|
|
|
|
|
onAnyInput
|
|
|
|
|
|
|
|
)
|
|
|
|
globalThis?.window?.document?.removeEventListener('scroll', onAnyInput)
|
|
|
|
globalThis?.window?.document?.removeEventListener('scroll', onAnyInput)
|
|
|
|
globalThis?.window?.document?.removeEventListener(
|
|
|
|
globalThis?.window?.document?.removeEventListener(
|
|
|
|
'touchstart',
|
|
|
|
'touchstart',
|
|
|
|
onAnyInput
|
|
|
|
onAnyInput
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
}, [])
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
useEffect(() => {
|
|
|
@ -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',
|
|
|
|