diff --git a/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx b/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx index 92518bcb5..97b8c9f9e 100644 --- a/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx +++ b/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx @@ -1,5 +1,4 @@ import React, { useEffect, useRef } from 'react'; -import { videoFeeds } from 'Player/MessageDistributor/managers/AssistManager'; interface Props { stream: MediaStream | null; @@ -23,13 +22,14 @@ function VideoContainer({ stream, muted = false, height = 280, setRemoteEnabled return; } const iid = setInterval(() => { - const settings = stream.getVideoTracks()[0]?.getSettings(); + const track = stream.getVideoTracks()[0] + const settings = track?.getSettings(); const isDummyVideoTrack = settings ? settings.width === 2 || settings.frameRate === 0 || (!settings.frameRate && !settings.width) : true; - const shouldBeEnabled = !isDummyVideoTrack; + const shouldBeEnabled = track.enabled && !isDummyVideoTrack; if (isEnabled !== shouldBeEnabled) { setEnabled(shouldBeEnabled); @@ -39,19 +39,6 @@ function VideoContainer({ stream, muted = false, height = 280, setRemoteEnabled 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 (
({}) - export default class Assist { readonly version = 'PACKAGE_VERSION' private socket: Socket | null = null private peer: Peer | null = null - private videoTracks: MediaStreamTrack[] = [] private assistDemandedRestart = false private callingState: CallingState = CallingState.False @@ -142,12 +135,6 @@ export default class Assist { } const peerID = `${app.getProjectKey()}-${sessionId}` - videoFeeds.observe((key: string, value: boolean) => { - const track = this.videoTracks.find(track => track.id === key) - if (track) { - track.enabled = value - } - }) // SocketIO const socket = this.socket = connect(app.getHost(), { path: '/ws-assist/socket', @@ -262,7 +249,7 @@ export default class Assist { updateCallerNames() }) socket.on('videofeed', ({ streamId, enabled, }) => { - videoFeeds[streamId] = enabled + callUI?.changeVideoFeed({ streamId, enabled, }) }) const callingAgents: Map = new Map() // !! uses socket.io ID @@ -333,7 +320,6 @@ export default class Assist { }) Object.values(lStreams).forEach((stream) => { stream.stop() }) Object.keys(lStreams).forEach((peerId: string) => { delete lStreams[peerId] }) - this.videoTracks = [] // UI closeCallConfirmWindow() if (remoteControl.status === RCStatus.Disabled) { @@ -413,11 +399,6 @@ export default class Assist { initiateCallEnd() }) call.on('stream', (rStream) => { - rStream.getVideoTracks().forEach(track => { - videoFeeds[track.id] = track.enabled - this.videoTracks.push(track) - }) - callUI?.addRemoteStream(rStream) const onInteraction = () => { // do only if document.hidden ? callUI?.playRemote() @@ -435,7 +416,6 @@ export default class Assist { } app.debug.log('sender found:', sender) void sender.replaceTrack(vTrack) - this.videoTracks.push(vTrack) }) call.answer(lStreams[call.peer].stream) diff --git a/tracker/tracker-assist/src/CallWindow.ts b/tracker/tracker-assist/src/CallWindow.ts index bcaa25197..bd7d51917 100644 --- a/tracker/tracker-assist/src/CallWindow.ts +++ b/tracker/tracker-assist/src/CallWindow.ts @@ -20,6 +20,7 @@ export default class CallWindow { private localVideoOn = false private onToggleVideo: (args: any) => void private tsInterval: ReturnType + private remoteVideo: MediaStreamTrack private readonly load: Promise @@ -132,6 +133,7 @@ export default class CallWindow { // Video if (this.vRemote && !this.vRemote.srcObject) { this.vRemote.srcObject = rStream + this.remoteVideo = rStream.getVideoTracks()[0] if (this.vPlaceholder) { this.vPlaceholder.innerText = 'Video has been paused. Click anywhere to resume.' @@ -143,7 +145,7 @@ export default class CallWindow { } // just in case let enabled = false this.checkRemoteVideoInterval = setInterval(() => { - const settings = rStream.getVideoTracks()[0]?.getSettings() + const settings = this.remoteVideo?.getSettings() const isDummyVideoTrack = !!settings && (settings.width === 2 || settings.frameRate === 0) const shouldBeEnabled = !isDummyVideoTrack @@ -318,4 +320,10 @@ export default class CallWindow { sessionStorage.removeItem(SS_START_TS_KEY) this.localStreams = [] } + + changeVideoFeed({ streamId, enabled, }: { streamId: string, enabled: boolean}) { + if (this.remoteVideo.id === streamId) { + this.remoteVideo.enabled = enabled + } + } }