change(ui): fix ui removing etc

frontend/app/components/Assist/components/AssistActions/AssistActions.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Popup, Icon, Button, IconButton } from 'UI';
-import logger from 'App/logger';
+import { Popup, Button } from 'UI';
 import { connect } from 'react-redux';
 import cn from 'classnames';
 import { toggleChatWindow } from 'Duck/sessions';
@@ -19,14 +18,13 @@ function onReject() {
     toast.info(`Call was rejected.`);
 }
 
-function onError(e) {
+function onError(e: any) {
     console.log(e)
     toast.error(typeof e === 'string' ? e : e.message);
 }
 
 interface Props {
     userId: string;
-    toggleChatWindow: (state) => void;
     calling: CallingState;
     annotating: boolean;
     peerConnectionStatus: ConnectionStatus;
@@ -38,7 +36,6 @@ interface Props {
 }
 
 function AssistActions({
-    toggleChatWindow,
     userId,
     calling,
     annotating,
@@ -77,7 +74,7 @@ function AssistActions({
         });
     }
 
-    function call(agentIds?: string[]) {
+    function call(additionalAgentIds?: string[]) {
         RequestLocalStream().then(lStream => {
             setLocalStream(lStream);
             setCallArgs(
@@ -88,8 +85,8 @@ function AssistActions({
                 onError
             )
             setCallObject(callPeer());
-            if (agentIds) {
-                callPeer(agentIds)
+            if (additionalAgentIds) {
+                callPeer(additionalAgentIds)
             }
         }).catch(onError)
     }
@@ -97,7 +94,7 @@ function AssistActions({
     React.useEffect(() => {
         if (!onCall && isCallActive && agentIds) {
             setPrestart(true);
-            call(agentIds)
+            // call(agentIds); do not autocall on prestart, can change later
         }
     }, [agentIds, isCallActive])
 
@@ -109,7 +106,7 @@ function AssistActions({
                 confirmation: `Are you sure you want to call ${userId ? userId : 'User'}?`,
             })
         ) {
-            call();
+            call(agentIds);
         }
     };
 
@@ -156,8 +153,8 @@ function AssistActions({
                     onClick={onCall ? callObject?.end : confirmCall}
                     role="button"
                 >
-                    <Button icon="headset" variant={onCall ? 'text-red' : 'primary'} style={{ height: '28px' }}>
-                        {onCall ? 'End' : 'Call'}
+                    <Button icon="headset" variant={onCall ? 'text-red' : isPrestart ? 'green' : 'primary'} style={{ height: '28px' }}>
+                        {onCall ? 'End' : isPrestart ? 'Join Call' : 'Call'}
                     </Button>
                     {/* <IconButton size="small" primary={!onCall} red={onCall} label={onCall ? 'End' : 'Call'} icon="headset" /> */}
                 </div>

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

@@ -3,7 +3,7 @@ import React, { useEffect, useRef } from 'react'
 interface Props {
   stream: MediaStream | null
   muted?: boolean,
-  width?: number
+  height?: number
 }
 
 function VideoContainer({ stream, muted = false, height = 280 }: Props) {
@@ -20,15 +20,15 @@ function VideoContainer({ stream, muted = false, height = 280 }: Props) {
     if (!stream) { return }
     const iid = setInterval(() => {
       const settings = stream.getVideoTracks()[0]?.getSettings()
-      const isDummyVideoTrack = settings.width === 2 || settings.frameRate === 0
+      const isDummyVideoTrack = settings ? (settings.width === 2 || settings.frameRate === 0) : true
       const shouldBeEnabled = !isDummyVideoTrack
       isEnabled !== shouldBeEnabled ? setEnabled(shouldBeEnabled) : null;
-    }, 1000)
+    }, 500)
     return () => clearInterval(iid)
   }, [ stream, isEnabled ])
 
   return (
-    <div className="flex-1" style={{ display: isEnabled ? undefined : 'none', border: "1px solid grey" }}>
+    <div className={"flex-1"} style={{ display: isEnabled ? undefined : 'none', width: isEnabled ? undefined : "0px!important" , height: isEnabled ? undefined : "0px!important" , border: "1px solid grey" }}>
       <video autoPlay ref={ ref } muted={ muted } style={{ height: height }} />
     </div>
   )

frontend/app/components/ui/Button/Button.tsx

@@ -8,7 +8,7 @@ interface Props {
     onClick?: () => void;
     disabled?: boolean;
     type?: 'button' | 'submit' | 'reset';
-    variant?: 'default' | 'primary' | 'text' | 'text-primary' | 'text-red' | 'outline'
+    variant?: 'default' | 'primary' | 'text' | 'text-primary' | 'text-red' | 'outline' | 'green'
     loading?: boolean;
     icon?: string;
     rounded?: boolean;
@@ -31,6 +31,7 @@ export default (props: Props) => {
     } = props;
 
     let classes = ['relative flex items-center h-10 px-3 rounded tracking-wide whitespace-nowrap'];
+    let iconColor = variant === 'text' || variant === 'default' ? 'gray-dark' : 'teal';
 
     if (variant === 'default') {
         classes.push('bg-white hover:bg-gray-light border border-gray-light');
@@ -40,6 +41,11 @@ export default (props: Props) => {
         classes.push('bg-teal color-white hover:bg-teal-dark');
     }
 
+    if (variant === 'green') {
+        classes.push('bg-green color-white hover:bg-green-dark');
+        iconColor = 'white';
+    }
+
     if (variant === 'text') {
         classes.push('bg-transparent color-gray-dark hover:bg-gray-light hover:color-gray-dark');
     }
@@ -60,7 +66,6 @@ export default (props: Props) => {
         classes.push('opacity-40 pointer-events-none');
     }
 
-    let iconColor = variant === 'text' || variant === 'default' ? 'gray-dark' : 'teal';
     if (variant === 'primary') {
         iconColor = 'white';
     }

frontend/app/player/MessageDistributor/managers/AssistManager.ts

@@ -2,11 +2,10 @@ import type { Socket } from 'socket.io-client';
 import type Peer from 'peerjs';
 import type { MediaConnection } from 'peerjs';
 import type MessageDistributor from '../MessageDistributor';
-import type { Message } from '../messages'
 import store from 'App/store';
 import type { LocalStream } from './LocalStream';
 import { update, getState } from '../../store';
-import { iceServerConfigFromString } from 'App/utils'
+// import { iceServerConfigFromString } from 'App/utils'
 import AnnotationCanvas from './AnnotationCanvas';
 import MStreamReader from '../messages/MStreamReader';
 import JSONRawMessageReader from '../messages/JSONRawMessageReader'

tracker/tracker-assist/src/RemoteControl.ts

@@ -24,7 +24,7 @@ export default class RemoteControl {
 
   constructor(
     private readonly options: AssistOptions,
-    private readonly onGrand: (sting?) => void, 
+    private readonly onGrand: (sting?) => void,
     private readonly onRelease: (sting?) => void) {}
 
   reconnect(ids: string[]) {
@@ -40,7 +40,7 @@ export default class RemoteControl {
   requestControl = (id: string) => {
     if (this.agentID !== null) {
       this.releaseControl(id)
-      return 
+      return
     }
     setTimeout(() =>{
       if (this.status === RCStatus.Requesting) {
@@ -56,7 +56,14 @@ export default class RemoteControl {
       } else {
         this.releaseControl(id)
       }
-    }).catch(e => console.error(e))
+    })
+    .then(() => {
+      this.confirm?.remove()
+    })
+    .catch(e => {
+        this.confirm?.remove()
+        console.error(e)
+      })
   }
   grantControl = (id: string) => {
     this.agentID = id
@@ -69,7 +76,6 @@ export default class RemoteControl {
 
   releaseControl = (id: string) => {
     if (this.agentID !== id) { return }
-    this.confirm?.remove()
     this.mouse?.remove()
     this.mouse = null
     this.status = RCStatus.Disabled
@@ -81,16 +87,16 @@ export default class RemoteControl {
   scroll = (id, d) => { id === this.agentID && this.mouse?.scroll(d) }
   move = (id, xy) => { id === this.agentID && this.mouse?.move(xy) }
   private focused: HTMLElement | null = null
-  click = (id, xy) => { 
+  click = (id, xy) => {
     if (id !== this.agentID || !this.mouse) { return }
-    this.focused = this.mouse.click(xy) 
+    this.focused = this.mouse.click(xy)
   }
   focus = (id, el: HTMLElement) => {
     this.focused = el
   }
   input = (id, value: string) => {
     if (id !== this.agentID || !this.mouse || !this.focused) { return }
-    if (this.focused instanceof HTMLTextAreaElement 
+    if (this.focused instanceof HTMLTextAreaElement
       || this.focused instanceof HTMLInputElement) {
       setInputValue.call(this.focused, value)
       const ev = new Event('input', { bubbles: true,})