refactor(player): partially abstract Socket interface for assist components

frontend/app/player/common/types.ts

@@ -2,6 +2,10 @@ export interface Timed {
   time: number
 }
 
+export interface Indexed {
+  index: number
+}
+
 export interface Moveable {
   move(time: number): void
 }

frontend/app/player/web/assist/AssistManager.ts

@@ -111,7 +111,7 @@ export default class AssistManager {
       this.socketCloseTimeout = setTimeout(() => {
         const state = this.store.get()
         if (document.hidden &&
-          // TODO: should here be disabled?
+          // TODO: should it be RemoteControlStatus.Disabled? (check)
           (state.calling === CallingState.NoCall && state.remoteControl === RemoteControlStatus.Enabled)) {
           this.socket?.close()
         }
@@ -162,7 +162,7 @@ export default class AssistManager {
       })
       socket.on("connect", () => {
         waitingForMessages = true
-        this.setStatus(ConnectionStatus.WaitingMessages) // TODO: happens frequently on bad network
+        this.setStatus(ConnectionStatus.WaitingMessages) // TODO: reconnect happens frequently on bad network
       })
       socket.on('messages', messages => {
         jmr.append(messages) // as RawMessage[]
@@ -209,6 +209,7 @@ export default class AssistManager {
       })
 
       // Maybe  do lazy initialization for all?
+      // TODO: socket proxy (depend on interfaces)
       this.callManager = new Call(
         this.store,
         socket,
@@ -284,6 +285,7 @@ export default class AssistManager {
     this.socket?.close()
     this.clearDisconnectTimeout()
     this.clearInactiveTimeout()
+    this.socketCloseTimeout && clearTimeout(this.socketCloseTimeout)
     document.removeEventListener('visibilitychange', this.onVisChange)
   }
 }

frontend/app/player/web/assist/Call.ts

@@ -1,8 +1,8 @@
 import type Peer from 'peerjs';
 import type { MediaConnection } from 'peerjs';
-import type { Socket } from 'socket.io-client';
 
 import type { LocalStream } from './LocalStream';
+import type { Socket } from './types'
 import type { Store } from '../../common/types'
 
 import appStore from 'App/store';

frontend/app/player/web/assist/RemoteControl.ts

@@ -1,6 +1,5 @@
-import type { Socket } from 'socket.io-client';
-
 import AnnotationCanvas from './AnnotationCanvas';
+import type { Socket } from './types'
 import type Screen from '../Screen/Screen'
 import type { Store } from '../../common/types'
 
@@ -136,23 +135,20 @@ export default class RemoteControl {
       const annot = this.annot = new AnnotationCanvas()
       annot.mount(this.screen.overlay)
       annot.canvas.addEventListener("mousedown", e => {
-        if (!this.socket) { return }
         const data = this.screen.getInternalViewportCoordinates(e)
         annot.start([ data.x, data.y ])
         this.socket.emit("startAnnotation", [ data.x, data.y ])
       })
       annot.canvas.addEventListener("mouseleave", () => {
-        if (!this.socket) { return }
         annot.stop()
         this.socket.emit("stopAnnotation")
       })
       annot.canvas.addEventListener("mouseup", () => {
-        if (!this.socket) { return }
         annot.stop()
         this.socket.emit("stopAnnotation")
       })
       annot.canvas.addEventListener("mousemove", e => {
-        if (!this.socket || !annot.isPainting()) { return }
+        if (!annot.isPainting()) { return }
 
         const data = this.screen.getInternalViewportCoordinates(e)
         annot.move([ data.x, data.y ])

frontend/app/player/web/assist/ScreenRecording.ts

@@ -1,16 +1,9 @@
 import { toast } from 'react-toastify'
 
-import type { Socket as SocketIO } from 'socket.io-client';
-
+import type { Socket } from './types'
 import type { Store } from '../../common/types'
 
 
-interface Socket {
-	emit: SocketIO['emit'],
-	on: SocketIO['on'],
-}
-
-
 export enum SessionRecordingStatus {
   Off,
   Requesting,