diff --git a/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx b/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx index fc8fb8e29..e84a3b651 100644 --- a/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx +++ b/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx @@ -1,10 +1,11 @@ -import React, { useEffect, useRef } from 'react' +import React, { useEffect, useRef } from 'react'; +import { videoFeeds } from 'Player/MessageDistributor/managers/AssistManager'; interface Props { - stream: MediaStream | null - muted?: boolean, - height?: number | string, - setRemoteEnabled?: (isEnabled: boolean) => void + stream: MediaStream | null; + muted?: boolean; + height?: number | string; + setRemoteEnabled?: (isEnabled: boolean) => void; } function VideoContainer({ stream, muted = false, height = 280, setRemoteEnabled }: Props) { @@ -15,28 +16,55 @@ function VideoContainer({ stream, muted = false, height = 280, setRemoteEnabled if (ref.current) { ref.current.srcObject = stream; } - }, [ ref.current, stream, stream.getVideoTracks()[0]?.getSettings().width ]) + }, [ref.current, stream, stream.getVideoTracks()[0]?.getSettings().width]); useEffect(() => { - if (!stream) { return } + if (!stream) { + return; + } const iid = setInterval(() => { - const settings = stream.getVideoTracks()[0]?.getSettings() - const isDummyVideoTrack = settings ? (settings.width === 2 || settings.frameRate === 0 || !settings.frameRate && !settings.width) : true - const shouldBeEnabled = !isDummyVideoTrack - console.log(stream.getVideoTracks()) + const settings = stream.getVideoTracks()[0]?.getSettings(); + const isDummyVideoTrack = settings + ? settings.width === 2 || + settings.frameRate === 0 || + (!settings.frameRate && !settings.width) + : true; + const shouldBeEnabled = !isDummyVideoTrack; + console.log(stream.getVideoTracks()); if (isEnabled !== shouldBeEnabled) { - setEnabled(shouldBeEnabled) - setRemoteEnabled?.(shouldBeEnabled) + setEnabled(shouldBeEnabled); + setRemoteEnabled?.(shouldBeEnabled); } - }, 500) - return () => clearInterval(iid) - }, [ stream, isEnabled ]) + }, 500); + return () => clearInterval(iid); + }, [stream, isEnabled]); + + useEffect(() => { + if (!stream) return; + // @ts-ignore + videoFeeds.observe((key, value) => { + const track = stream.getVideoTracks()[0]; + if (key === track.id) { + track.enabled = value; + setEnabled(value); + setRemoteEnabled?.(value); + } + }); + }, [stream]); return ( -
-