change(ui): add await window for call request

frontend/app/components/Assist/RequestingWindow/RequestingWindow.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { INDEXES } from 'App/constants/zindex'
+import { connect } from 'react-redux';
+import { Button, Loader, Icon } from 'UI'
+import { initiateCallEnd } from 'Player';
+
+interface Props {
+  userDisplayName: string
+}
+
+function RequestingWindow({ userDisplayName }: Props) {
+
+  return (
+    <div className="w-full h-full absolute top-0 left-0 flex items-center justify-center" style={{ background: "rgba(0,0,0, 0.30)", zIndex: INDEXES.PLAYER_REQUEST_WINDOW}}>
+      <div className="rounded bg-white py-4 px-8 flex flex-col text-lg items-center max-w-md text-center">
+          <Icon size={40} name="call" className='mb-4'/>
+          <span>Waiting for</span>
+          <span className="font-semibold">{userDisplayName}</span>
+          <span>to accept the call</span>
+          <Loader size={30} style={{ minHeight: 60 }} />
+        <Button variant="text-primary" onClick={initiateCallEnd}>cancel</Button>
+      </div>
+    </div>
+  )
+}
+
+export default connect((state) => ({ userDisplayName: state.getIn(['sessions', 'current', 'userDisplayName']) }))(RequestingWindow)

frontend/app/components/Assist/RequestingWindow/index.ts

@@ -0,0 +1 @@
+export { default } from './RequestingWindow'

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

@@ -54,9 +54,11 @@ function AssistActions({
     const [callObject, setCallObject] = useState<{ end: () => void } | null>(null);
 
     const onCall = calling === CallingState.OnCall || calling === CallingState.Reconnecting;
+    const callRequesting = calling === CallingState.Connecting
     const cannotCall = peerConnectionStatus !== ConnectionStatus.Connected || (isEnterprise && !hasPermission);
     const remoteActive = remoteControlStatus === RemoteControlStatus.Enabled;
 
+
     useEffect(() => {
         return callObject?.end()
     }, [])
@@ -101,6 +103,8 @@ function AssistActions({
     }, [agentIds, isCallActive])
 
     const confirmCall = async () => {
+        if (callRequesting) return;
+
         if (
             await confirm({
                 header: 'Start Call',
@@ -112,6 +116,11 @@ function AssistActions({
         }
     };
 
+    const requestControl = () => {
+        if (callRequesting) return;
+        requestReleaseRemoteControl()
+    }
+
     React.useEffect(() => {
         if (!livePlay) {
             if (annotating) {
@@ -145,8 +154,8 @@ function AssistActions({
                 </>
             )}
             <div
-                className={cn('cursor-pointer p-2 flex items-center', { [stl.disabled]: cannotCall || !livePlay })}
-                onClick={requestReleaseRemoteControl}
+                className={cn('cursor-pointer p-2 flex items-center', { [stl.disabled]: cannotCall || !livePlay || callRequesting })}
+                onClick={requestControl}
                 role="button"
             >
                 <Button
@@ -162,7 +171,7 @@ function AssistActions({
 
             <Popup content={cannotCall ? `You don't have the permissions to perform this action.` : `Call ${userId ? userId : 'User'}`}>
                 <div
-                    className={cn('cursor-pointer p-2 flex items-center', { [stl.disabled]: cannotCall })}
+                    className={cn('cursor-pointer p-2 flex items-center', { [stl.disabled]: cannotCall || callRequesting })}
                     onClick={onCall ? callObject?.end : confirmCall}
                     role="button"
                 >

frontend/app/components/Session_/Player/Overlay.tsx

@@ -2,13 +2,14 @@ import React, {useEffect} from 'react';
 import { connectPlayer, markTargets } from 'Player';
 import { getStatusText } from 'Player/MessageDistributor/managers/AssistManager';
 import type { MarkedTarget } from 'Player/MessageDistributor/StatedScreen/StatedScreen';
-import { ConnectionStatus } from 'Player/MessageDistributor/managers/AssistManager';
+import { CallingState, ConnectionStatus } from 'Player/MessageDistributor/managers/AssistManager';
 
 import AutoplayTimer from './Overlay/AutoplayTimer';
 import PlayIconLayer from './Overlay/PlayIconLayer';
 import LiveStatusText from './Overlay/LiveStatusText';
 import Loader from './Overlay/Loader';
 import ElementsMarker from './Overlay/ElementsMarker';
+import RequestingWindow from 'App/components/Assist/RequestingWindow';
 
 interface Props {
   playing: boolean,
@@ -21,6 +22,7 @@ interface Props {
   autoplay: boolean,
   markedTargets: MarkedTarget[] | null,
   activeTargetIndex: number,
+  calling: CallingState,
 
   nextId: string,
   togglePlay: () => void,
@@ -43,13 +45,16 @@ function Overlay({
   togglePlay,
   closedLive,
   livePlay,
+  calling,
 }: Props) {
   const showAutoplayTimer = !live && completed && autoplay && nextId
   const showPlayIconLayer = !live && !markedTargets && !inspectorMode && !loading && !showAutoplayTimer;
   const showLiveStatusText = live && livePlay && liveStatusText && !loading;
 
+  console.log(calling, live)
   return (
     <>
+      {live && calling === CallingState.Connecting ? <RequestingWindow /> : null}
       { showAutoplayTimer && <AutoplayTimer /> }
       { showLiveStatusText &&
         <LiveStatusText text={liveStatusText} concetionStatus={closedLive ? ConnectionStatus.Closed : concetionStatus} />
@@ -77,4 +82,5 @@ export default connectPlayer(state => ({
   markedTargets: state.markedTargets,
   activeTargetIndex: state.activeTargetIndex,
   livePlay: state.livePlay,
+  calling: state.calling,
 }))(Overlay);

frontend/app/constants/zindex.ts

@@ -1,6 +1,7 @@
 export const INDEXES = {
   POPUP_GUIDE_BG: 99998,
   POPUP_GUIDE_BTN: 99999,
+  PLAYER_REQUEST_WINDOW: 10,
 }
 
 export const getHighest = () => {

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

@@ -406,9 +406,14 @@ export default class AssistManager {
     this.toggleAnnotation(false)
   }
 
-  private initiateCallEnd = async () => {
+  public initiateCallEnd = async () => {
     this.socket?.emit("call_end", store.getState().getIn([ 'user', 'account', 'name']))
     this.handleCallEnd()
+    const remoteControl = getState().remoteControl
+    if (remoteControl === RemoteControlStatus.Enabled) {
+      this.socket.emit("release_control")
+      this.toggleRemoteControl(false)
+    }
   }
 
   private onRemoteCallEnd = () => {

frontend/app/player/singletone.js

@@ -40,7 +40,7 @@ export function init(session, config, live = false) {
     endTime, // : 0, //TODO: through initialState
     session,
   });
-  
+
   if (!document.hidden) {
     instance.play();
   }
@@ -73,6 +73,8 @@ export const toggleInspectorMode = initCheck((...args) => instance.toggleInspect
 export const callPeer = initCheck((...args) => instance.assistManager.call(...args))
 /** @type {Player.assistManager.setCallArgs} */
 export const setCallArgs = initCheck((...args) => instance.assistManager.setCallArgs(...args))
+/** @type {Player.assistManager.initiateCallEnd} */
+export const initiateCallEnd = initCheck((...args) => instance.assistManager.initiateCallEnd(...args))
 export const requestReleaseRemoteControl = initCheck((...args) => instance.assistManager.requestReleaseRemoteControl(...args))
 export const markTargets = initCheck((...args) => instance.markTargets(...args))
 export const activeTarget = initCheck((...args) => instance.activeTarget(...args))

frontend/app/svg/icons/call.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 62 77" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.5" clip-path="url(#clip0_1024_2639)">
+<path d="M31 5.125C24.2038 5.125 17.686 7.82477 12.8804 12.6304C8.07477 17.436 5.375 23.9538 5.375 30.75V35.875H10.5C11.8592 35.875 13.1628 36.415 14.1239 37.3761C15.085 38.3372 15.625 39.6408 15.625 41V56.375C15.625 57.7342 15.085 59.0378 14.1239 59.9989C13.1628 60.96 11.8592 61.5 10.5 61.5H5.375C4.01577 61.5 2.7122 60.96 1.75108 59.9989C0.789954 59.0378 0.25 57.7342 0.25 56.375V30.75C0.25 26.7119 1.04537 22.7132 2.5907 18.9825C4.13604 15.2517 6.40106 11.8619 9.25647 9.00647C12.1119 6.15107 15.5017 3.88604 19.2325 2.3407C22.9632 0.795372 26.9619 0 31 0C35.0381 0 39.0368 0.795372 42.7675 2.3407C46.4983 3.88604 49.8881 6.15107 52.7435 9.00647C55.5989 11.8619 57.864 15.2517 59.4093 18.9825C60.9546 22.7132 61.75 26.7119 61.75 30.75V61.5C61.75 64.8981 60.4001 68.157 57.9973 70.5598C55.5945 72.9626 52.3356 74.3125 48.9375 74.3125H38.0008C37.5509 75.0916 36.904 75.7385 36.1249 76.1883C35.3459 76.6382 34.4621 76.875 33.5625 76.875H28.4375C27.0783 76.875 25.7747 76.335 24.8136 75.3739C23.8525 74.4128 23.3125 73.1092 23.3125 71.75C23.3125 70.3908 23.8525 69.0872 24.8136 68.1261C25.7747 67.165 27.0783 66.625 28.4375 66.625H33.5625C34.4621 66.625 35.3459 66.8618 36.1249 67.3117C36.904 67.7615 37.5509 68.4084 38.0008 69.1875H48.9375C50.9764 69.1875 52.9317 68.3776 54.3734 66.9359C55.8151 65.4942 56.625 63.5389 56.625 61.5H51.5C50.1408 61.5 48.8372 60.96 47.8761 59.9989C46.915 59.0378 46.375 57.7342 46.375 56.375V41C46.375 39.6408 46.915 38.3372 47.8761 37.3761C48.8372 36.415 50.1408 35.875 51.5 35.875H56.625V30.75C56.625 27.3849 55.9622 24.0527 54.6744 20.9437C53.3866 17.8348 51.4991 15.0099 49.1196 12.6304C46.7401 10.2509 43.9152 8.36336 40.8063 7.07559C37.6973 5.78781 34.3651 5.125 31 5.125V5.125Z" fill="#3EAAAF"/>
+</g>
+</svg>