change(tracker): add reactive value for video feeds

frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx

@@ -30,7 +30,7 @@ function VideoContainer({ stream, muted = false, height = 280, setRemoteEnabled
           (!settings.frameRate && !settings.width)
         : true;
       const shouldBeEnabled = !isDummyVideoTrack;
-      console.log(stream.getVideoTracks());
+
       if (isEnabled !== shouldBeEnabled) {
         setEnabled(shouldBeEnabled);
         setRemoteEnabled?.(shouldBeEnabled);

tracker/tracker-assist/src/Assist.ts

@@ -12,6 +12,7 @@ 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)
 
@@ -52,11 +53,18 @@ 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
 
@@ -134,6 +142,12 @@ 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',
@@ -247,6 +261,9 @@ export default class Assist {
       callingAgents.set(id, name)
       updateCallerNames()
     })
+    socket.on('videofeed', ({ streamId, enabled, }) => {
+      videoFeeds[streamId] = enabled
+    })
 
     const callingAgents: Map<string, string> = new Map() // !! uses socket.io ID
     // TODO: merge peerId & socket.io id  (simplest way - send peerId with the name)
@@ -316,7 +333,7 @@ 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) {
@@ -396,6 +413,11 @@ 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()
@@ -413,6 +435,7 @@ 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/util.ts

@@ -0,0 +1,32 @@
+/* eslint-disable prefer-rest-params */
+const handlers = Symbol('handlers')
+
+export type ProxyResult<T extends Record<any, any>> = T & {
+	observe: (handler: (key: string, value: any) => any) => void
+  // @ts-ignore
+	[key: typeof handlers]: (() => void)[]
+}
+
+export function makeObservable<T extends Record<any, any>>(target: T): ProxyResult<T> {
+	// @ts-ignore
+	target[handlers] = []
+
+	// @ts-ignore
+	target.observe = function (handler) {
+    // @ts-ignore
+		this[handlers].push(handler)
+	}
+
+	// @ts-ignore
+	return new Proxy(target, {
+		set(target, property, value) {
+			// @ts-ignore
+			const success = Reflect.set(...arguments)
+			if (success) {
+				// @ts-ignore
+				target[handlers].forEach((handler: (property: string, value: any) => void) => handler(property, value))
+			}
+			return success
+		},
+	})
+}