diff --git a/webapp/components/player/whep-player.tsx b/webapp/components/player/whep-player.tsx index fa36e12..e21bad1 100644 --- a/webapp/components/player/whep-player.tsx +++ b/webapp/components/player/whep-player.tsx @@ -11,6 +11,7 @@ import SvgProgress from '../svg/progress' export default function WhepPlayer(props: { streamId: string, status: UserStatus, width: string }) { const refEnabled = useRef(false) + const refTimer = useRef | null>(null) const refPC = useRef(null) const [loading, setLoading] = useState(true) const [connectionState, setConnectionState] = useState("unknown") @@ -19,6 +20,8 @@ export default function WhepPlayer(props: { streamId: string, status: UserStatus name: props.streamId, }) const [presentationStream, setPresentationStream] = useAtom(presentationStreamAtom) + const refUserStatus = useRef(props.status) + refUserStatus.current = props.status const newPeerConnection = () => { const pc = new RTCPeerConnection() @@ -35,6 +38,8 @@ export default function WhepPlayer(props: { streamId: string, status: UserStatus refPC.current = pc } + const run = () => refUserStatus.current.state !== "connected" ? restart(props.streamId) : null + const start = async (resource: string) => { setLoading(false) if (refPC.current) { @@ -57,6 +62,7 @@ export default function WhepPlayer(props: { streamId: string, status: UserStatus useEffect(() => { if (!refEnabled.current && props.status.state === "connected") { refEnabled.current = true + refTimer.current = setInterval(run, 5000) newPeerConnection() start(props.streamId) } diff --git a/webapp/components/player/whip-player.tsx b/webapp/components/player/whip-player.tsx index 4ae90a7..b02ae07 100644 --- a/webapp/components/player/whip-player.tsx +++ b/webapp/components/player/whip-player.tsx @@ -15,10 +15,12 @@ import SvgProgress from '../svg/progress' export default function WhipPlayer(props: { streamId: string, width: string }) { const refEnabled = useRef(false) + const refTimer = useRef | null>(null) const refPC = useRef(null) const refClient = useRef(null) const [localStream] = useAtom(localStreamAtom) const [localUserStatus, setLocalUserStatus] = useAtom(localUserStatusAtom) + const refUserStatus = useRef(localUserStatus) const [loading, setLoading] = useState(true) @@ -26,6 +28,7 @@ export default function WhipPlayer(props: { streamId: string, width: string }) { const [currentDeviceVideo] = useAtom(currentDeviceVideoAtom) const [presentationStream, setPresentationStream] = useAtom(presentationStreamAtom) + refUserStatus.current = localUserStatus const newPeerConnection = () => { const stream = localStream.stream @@ -85,10 +88,13 @@ export default function WhipPlayer(props: { streamId: string, width: string }) { start(resource) } + const run = () => refUserStatus.current.state !== "connected" ? restart(props.streamId) : null + const init = () => { if (!!localStream.stream.getTracks().length) { if (!refEnabled.current) { refEnabled.current = true + refTimer.current = setInterval(run, 5000) newPeerConnection() start(props.streamId) } @@ -104,6 +110,8 @@ export default function WhipPlayer(props: { streamId: string, width: string }) { init() return () => { if (refEnabled.current && refClient.current) { + clearInterval(refTimer.current!) + refTimer.current = null refClient.current.stop() refClient.current = null refEnabled.current = false