change(tracker/player): change feeds updating

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 (
     <div
       className={'flex-1'}

tracker/tracker-assist/src/Assist.ts

@@ -12,7 +12,6 @@ import AnnotationCanvas from './AnnotationCanvas.js'
 import ConfirmWindow from './ConfirmWindow/ConfirmWindow.js'
 import { callConfirmDefault, } from './ConfirmWindow/defaults.js'
 import type { Options as ConfirmOptions, } from './ConfirmWindow/defaults.js'
-import { makeObservable, } from './util'
 
 // TODO: fully specified strict check with no-any (everywhere)
 
@@ -53,18 +52,12 @@ type Agent = {
   //
 }
 
-interface VideoFeeds {
-	[key: string]: boolean
-}
-export const videoFeeds = makeObservable<VideoFeeds>({})
-
 
 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<string, string> = 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)

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<typeof setInterval>
+	private remoteVideo: MediaStreamTrack
 
 	private readonly load: Promise<void>
 
@@ -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
+		}
+	}
 }