From 7b65531ca7ce27abb203a0ee1775cb8b8b2848e0 Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Thu, 15 Sep 2022 12:24:16 +0200
Subject: [PATCH] change(ui): add await window for call request

---
 .../RequestingWindow/RequestingWindow.tsx     | 27 +++++++++++++++++++
 .../Assist/RequestingWindow/index.ts          |  1 +
 .../AssistActions/AssistActions.tsx           | 15 ++++++++---
 .../components/Session_/Player/Overlay.tsx    |  8 +++++-
 frontend/app/components/ui/SVG.tsx            |  3 ++-
 frontend/app/constants/zindex.ts              |  1 +
 .../managers/AssistManager.ts                 |  7 ++++-
 frontend/app/player/singletone.js             |  4 ++-
 frontend/app/svg/icons/call.svg               |  5 ++++
 9 files changed, 64 insertions(+), 7 deletions(-)
 create mode 100644 frontend/app/components/Assist/RequestingWindow/RequestingWindow.tsx
 create mode 100644 frontend/app/components/Assist/RequestingWindow/index.ts
 create mode 100644 frontend/app/svg/icons/call.svg

diff --git a/frontend/app/components/Assist/RequestingWindow/RequestingWindow.tsx b/frontend/app/components/Assist/RequestingWindow/RequestingWindow.tsx
new file mode 100644
index 000000000..7d6f2c790
--- /dev/null
+++ b/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)
diff --git a/frontend/app/components/Assist/RequestingWindow/index.ts b/frontend/app/components/Assist/RequestingWindow/index.ts
new file mode 100644
index 000000000..9dbd99dfe
--- /dev/null
+++ b/frontend/app/components/Assist/RequestingWindow/index.ts
@@ -0,0 +1 @@
+export { default } from './RequestingWindow'
diff --git a/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx b/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx
index 948b86967..58773acaf 100644
--- a/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx
+++ b/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"
                 >
diff --git a/frontend/app/components/Session_/Player/Overlay.tsx b/frontend/app/components/Session_/Player/Overlay.tsx
index 812eb5d88..20e84225d 100644
--- a/frontend/app/components/Session_/Player/Overlay.tsx
+++ b/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);
diff --git a/frontend/app/components/ui/SVG.tsx b/frontend/app/components/ui/SVG.tsx
index 4b179f855..fc9888a4b 100644
--- a/frontend/app/components/ui/SVG.tsx
+++ b/frontend/app/components/ui/SVG.tsx
@@ -1,7 +1,7 @@
 
 import React from 'react';
 
-export type IconNames = 'alarm-clock' | 'alarm-plus' | 'all-sessions' | 'analytics' | 'anchor' | 'arrow-alt-square-right' | 'arrow-clockwise' | 'arrow-down' | 'arrow-right-short' | 'arrow-square-left' | 'arrow-square-right' | 'arrow-up' | 'arrows-angle-extend' | 'avatar/icn_bear' | 'avatar/icn_beaver' | 'avatar/icn_bird' | 'avatar/icn_bison' | 'avatar/icn_camel' | 'avatar/icn_chameleon' | 'avatar/icn_deer' | 'avatar/icn_dog' | 'avatar/icn_dolphin' | 'avatar/icn_elephant' | 'avatar/icn_fish' | 'avatar/icn_fox' | 'avatar/icn_gorilla' | 'avatar/icn_hippo' | 'avatar/icn_horse' | 'avatar/icn_hyena' | 'avatar/icn_kangaroo' | 'avatar/icn_lemur' | 'avatar/icn_mammel' | 'avatar/icn_monkey' | 'avatar/icn_moose' | 'avatar/icn_panda' | 'avatar/icn_penguin' | 'avatar/icn_porcupine' | 'avatar/icn_quail' | 'avatar/icn_rabbit' | 'avatar/icn_rhino' | 'avatar/icn_sea_horse' | 'avatar/icn_sheep' | 'avatar/icn_snake' | 'avatar/icn_squirrel' | 'avatar/icn_tapir' | 'avatar/icn_turtle' | 'avatar/icn_vulture' | 'avatar/icn_wild1' | 'avatar/icn_wild_bore' | 'ban' | 'bar-chart-line' | 'bar-pencil' | 'bell-plus' | 'bell' | 'binoculars' | 'book' | 'browser/browser' | 'browser/chrome' | 'browser/edge' | 'browser/electron' | 'browser/facebook' | 'browser/firefox' | 'browser/ie' | 'browser/opera' | 'browser/safari' | 'bullhorn' | 'business-time' | 'calendar-alt' | 'calendar-check' | 'calendar-day' | 'calendar' | 'camera-alt' | 'camera-video-off' | 'camera-video' | 'camera' | 'caret-down-fill' | 'caret-left-fill' | 'caret-right-fill' | 'caret-up-fill' | 'chat-dots' | 'chat-right-text' | 'chat-square-quote' | 'check-circle' | 'check' | 'chevron-double-left' | 'chevron-double-right' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle-fill' | 'circle' | 'clipboard-list-check' | 'clock' | 'close' | 'cloud-fog2-fill' | 'code' | 'cog' | 'cogs' | 'collection' | 'columns-gap-filled' | 'columns-gap' | 'console/error' | 'console/exception' | 'console/info' | 'console/warning' | 'console' | 'controller' | 'cookies' | 'copy' | 'credit-card-front' | 'cubes' | 'dashboard-icn' | 'desktop' | 'device' | 'diagram-3' | 'dizzy' | 'doublecheck' | 'download' | 'drag' | 'edit' | 'ellipsis-v' | 'enter' | 'envelope' | 'errors-icon' | 'event/click' | 'event/clickrage' | 'event/code' | 'event/i-cursor' | 'event/input' | 'event/link' | 'event/location' | 'event/resize' | 'event/view' | 'exclamation-circle' | 'expand-wide' | 'explosion' | 'external-link-alt' | 'eye-slash-fill' | 'eye-slash' | 'eye' | 'fetch' | 'file-code' | 'file-medical-alt' | 'file' | 'filter' | 'filters/arrow-return-right' | 'filters/browser' | 'filters/click' | 'filters/clickrage' | 'filters/code' | 'filters/console' | 'filters/country' | 'filters/cpu-load' | 'filters/custom' | 'filters/device' | 'filters/dom-complete' | 'filters/duration' | 'filters/error' | 'filters/fetch-failed' | 'filters/fetch' | 'filters/file-code' | 'filters/graphql' | 'filters/i-cursor' | 'filters/input' | 'filters/lcpt' | 'filters/link' | 'filters/location' | 'filters/memory-load' | 'filters/metadata' | 'filters/os' | 'filters/perfromance-network-request' | 'filters/platform' | 'filters/referrer' | 'filters/resize' | 'filters/rev-id' | 'filters/state-action' | 'filters/ttfb' | 'filters/user-alt' | 'filters/userid' | 'filters/view' | 'flag-na' | 'fullscreen' | 'funnel/cpu-fill' | 'funnel/cpu' | 'funnel/dizzy' | 'funnel/emoji-angry-fill' | 'funnel/emoji-angry' | 'funnel/emoji-dizzy-fill' | 'funnel/exclamation-circle-fill' | 'funnel/exclamation-circle' | 'funnel/file-earmark-break-fill' | 'funnel/file-earmark-break' | 'funnel/file-earmark-minus-fill' | 'funnel/file-earmark-minus' | 'funnel/file-medical-alt' | 'funnel/file-x' | 'funnel/hdd-fill' | 'funnel/hourglass-top' | 'funnel/image-fill' | 'funnel/image' | 'funnel/microchip' | 'funnel/mouse' | 'funnel/patch-exclamation-fill' | 'funnel/sd-card' | 'funnel-fill' | 'funnel-new' | 'funnel' | 'geo-alt-fill-custom' | 'github' | 'graph-up-arrow' | 'graph-up' | 'grid-3x3' | 'grid-check' | 'grip-horizontal' | 'hash' | 'hdd-stack' | 'headset' | 'heart-rate' | 'high-engagement' | 'history' | 'hourglass-start' | 'id-card' | 'image' | 'info-circle-fill' | 'info-circle' | 'info-square' | 'info' | 'inspect' | 'integrations/assist' | 'integrations/bugsnag-text' | 'integrations/bugsnag' | 'integrations/cloudwatch-text' | 'integrations/cloudwatch' | 'integrations/datadog' | 'integrations/elasticsearch-text' | 'integrations/elasticsearch' | 'integrations/github' | 'integrations/graphql' | 'integrations/jira-text' | 'integrations/jira' | 'integrations/mobx' | 'integrations/newrelic-text' | 'integrations/newrelic' | 'integrations/ngrx' | 'integrations/openreplay-text' | 'integrations/openreplay' | 'integrations/redux' | 'integrations/rollbar-text' | 'integrations/rollbar' | 'integrations/segment' | 'integrations/sentry-text' | 'integrations/sentry' | 'integrations/slack-bw' | 'integrations/slack' | 'integrations/stackdriver' | 'integrations/sumologic-text' | 'integrations/sumologic' | 'integrations/vuejs' | 'journal-code' | 'layer-group' | 'lightbulb-on' | 'lightbulb' | 'link-45deg' | 'list-alt' | 'list-ul' | 'list' | 'lock-alt' | 'map-marker-alt' | 'memory' | 'mic-mute' | 'mic' | 'minus' | 'mobile' | 'mouse-alt' | 'next1' | 'no-dashboard' | 'no-metrics-chart' | 'no-metrics' | 'os/android' | 'os/chrome_os' | 'os/fedora' | 'os/ios' | 'os/linux' | 'os/mac_os_x' | 'os/other' | 'os/ubuntu' | 'os/windows' | 'os' | 'pause-fill' | 'pause' | 'pdf-download' | 'pencil-stop' | 'pencil' | 'percent' | 'performance-icon' | 'person-fill' | 'person' | 'pie-chart-fill' | 'pin-fill' | 'play-circle-light' | 'play-circle' | 'play-fill-new' | 'play-fill' | 'play-hover' | 'play' | 'plus-circle' | 'plus' | 'prev1' | 'puzzle-piece' | 'question-circle' | 'question-lg' | 'quote-left' | 'quote-right' | 'redo-back' | 'redo' | 'remote-control' | 'replay-10' | 'resources-icon' | 'safe-fill' | 'safe' | 'sandglass' | 'search' | 'search_notification' | 'server' | 'share-alt' | 'shield-lock' | 'signup' | 'skip-forward-fill' | 'skip-forward' | 'slack' | 'slash-circle' | 'sliders' | 'social/slack' | 'social/trello' | 'spinner' | 'star-solid' | 'star' | 'step-forward' | 'stopwatch' | 'store' | 'sync-alt' | 'table-new' | 'table' | 'tablet-android' | 'tachometer-slow' | 'tachometer-slowest' | 'tags' | 'team-funnel' | 'telephone-fill' | 'telephone' | 'text-paragraph' | 'tools' | 'trash' | 'turtle' | 'user-alt' | 'user-circle' | 'user-friends' | 'users' | 'vendors/graphql' | 'vendors/mobx' | 'vendors/ngrx' | 'vendors/redux' | 'vendors/vuex' | 'web-vitals' | 'wifi' | 'window-alt' | 'window-restore' | 'window-x' | 'window' | 'zoom-in';
+export type IconNames = 'alarm-clock' | 'alarm-plus' | 'all-sessions' | 'analytics' | 'anchor' | 'arrow-alt-square-right' | 'arrow-clockwise' | 'arrow-down' | 'arrow-right-short' | 'arrow-square-left' | 'arrow-square-right' | 'arrow-up' | 'arrows-angle-extend' | 'avatar/icn_bear' | 'avatar/icn_beaver' | 'avatar/icn_bird' | 'avatar/icn_bison' | 'avatar/icn_camel' | 'avatar/icn_chameleon' | 'avatar/icn_deer' | 'avatar/icn_dog' | 'avatar/icn_dolphin' | 'avatar/icn_elephant' | 'avatar/icn_fish' | 'avatar/icn_fox' | 'avatar/icn_gorilla' | 'avatar/icn_hippo' | 'avatar/icn_horse' | 'avatar/icn_hyena' | 'avatar/icn_kangaroo' | 'avatar/icn_lemur' | 'avatar/icn_mammel' | 'avatar/icn_monkey' | 'avatar/icn_moose' | 'avatar/icn_panda' | 'avatar/icn_penguin' | 'avatar/icn_porcupine' | 'avatar/icn_quail' | 'avatar/icn_rabbit' | 'avatar/icn_rhino' | 'avatar/icn_sea_horse' | 'avatar/icn_sheep' | 'avatar/icn_snake' | 'avatar/icn_squirrel' | 'avatar/icn_tapir' | 'avatar/icn_turtle' | 'avatar/icn_vulture' | 'avatar/icn_wild1' | 'avatar/icn_wild_bore' | 'ban' | 'bar-chart-line' | 'bar-pencil' | 'bell-plus' | 'bell' | 'binoculars' | 'book' | 'browser/browser' | 'browser/chrome' | 'browser/edge' | 'browser/electron' | 'browser/facebook' | 'browser/firefox' | 'browser/ie' | 'browser/opera' | 'browser/safari' | 'bullhorn' | 'business-time' | 'calendar-alt' | 'calendar-check' | 'calendar-day' | 'calendar' | 'call' | 'camera-alt' | 'camera-video-off' | 'camera-video' | 'camera' | 'caret-down-fill' | 'caret-left-fill' | 'caret-right-fill' | 'caret-up-fill' | 'chat-dots' | 'chat-right-text' | 'chat-square-quote' | 'check-circle' | 'check' | 'chevron-double-left' | 'chevron-double-right' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle-fill' | 'circle' | 'clipboard-list-check' | 'clock' | 'close' | 'cloud-fog2-fill' | 'code' | 'cog' | 'cogs' | 'collection' | 'columns-gap-filled' | 'columns-gap' | 'console/error' | 'console/exception' | 'console/info' | 'console/warning' | 'console' | 'controller' | 'cookies' | 'copy' | 'credit-card-front' | 'cubes' | 'dashboard-icn' | 'desktop' | 'device' | 'diagram-3' | 'dizzy' | 'doublecheck' | 'download' | 'drag' | 'edit' | 'ellipsis-v' | 'enter' | 'envelope' | 'errors-icon' | 'event/click' | 'event/clickrage' | 'event/code' | 'event/i-cursor' | 'event/input' | 'event/link' | 'event/location' | 'event/resize' | 'event/view' | 'exclamation-circle' | 'expand-wide' | 'explosion' | 'external-link-alt' | 'eye-slash-fill' | 'eye-slash' | 'eye' | 'fetch' | 'file-code' | 'file-medical-alt' | 'file' | 'filter' | 'filters/arrow-return-right' | 'filters/browser' | 'filters/click' | 'filters/clickrage' | 'filters/code' | 'filters/console' | 'filters/country' | 'filters/cpu-load' | 'filters/custom' | 'filters/device' | 'filters/dom-complete' | 'filters/duration' | 'filters/error' | 'filters/fetch-failed' | 'filters/fetch' | 'filters/file-code' | 'filters/graphql' | 'filters/i-cursor' | 'filters/input' | 'filters/lcpt' | 'filters/link' | 'filters/location' | 'filters/memory-load' | 'filters/metadata' | 'filters/os' | 'filters/perfromance-network-request' | 'filters/platform' | 'filters/referrer' | 'filters/resize' | 'filters/rev-id' | 'filters/state-action' | 'filters/ttfb' | 'filters/user-alt' | 'filters/userid' | 'filters/view' | 'flag-na' | 'fullscreen' | 'funnel/cpu-fill' | 'funnel/cpu' | 'funnel/dizzy' | 'funnel/emoji-angry-fill' | 'funnel/emoji-angry' | 'funnel/emoji-dizzy-fill' | 'funnel/exclamation-circle-fill' | 'funnel/exclamation-circle' | 'funnel/file-earmark-break-fill' | 'funnel/file-earmark-break' | 'funnel/file-earmark-minus-fill' | 'funnel/file-earmark-minus' | 'funnel/file-medical-alt' | 'funnel/file-x' | 'funnel/hdd-fill' | 'funnel/hourglass-top' | 'funnel/image-fill' | 'funnel/image' | 'funnel/microchip' | 'funnel/mouse' | 'funnel/patch-exclamation-fill' | 'funnel/sd-card' | 'funnel-fill' | 'funnel-new' | 'funnel' | 'geo-alt-fill-custom' | 'github' | 'graph-up-arrow' | 'graph-up' | 'grid-3x3' | 'grid-check' | 'grip-horizontal' | 'hash' | 'hdd-stack' | 'headset' | 'heart-rate' | 'high-engagement' | 'history' | 'hourglass-start' | 'id-card' | 'image' | 'info-circle-fill' | 'info-circle' | 'info-square' | 'info' | 'inspect' | 'integrations/assist' | 'integrations/bugsnag-text' | 'integrations/bugsnag' | 'integrations/cloudwatch-text' | 'integrations/cloudwatch' | 'integrations/datadog' | 'integrations/elasticsearch-text' | 'integrations/elasticsearch' | 'integrations/github' | 'integrations/graphql' | 'integrations/jira-text' | 'integrations/jira' | 'integrations/mobx' | 'integrations/newrelic-text' | 'integrations/newrelic' | 'integrations/ngrx' | 'integrations/openreplay-text' | 'integrations/openreplay' | 'integrations/redux' | 'integrations/rollbar-text' | 'integrations/rollbar' | 'integrations/segment' | 'integrations/sentry-text' | 'integrations/sentry' | 'integrations/slack-bw' | 'integrations/slack' | 'integrations/stackdriver' | 'integrations/sumologic-text' | 'integrations/sumologic' | 'integrations/vuejs' | 'journal-code' | 'layer-group' | 'lightbulb-on' | 'lightbulb' | 'link-45deg' | 'list-alt' | 'list-ul' | 'list' | 'lock-alt' | 'map-marker-alt' | 'memory' | 'mic-mute' | 'mic' | 'minus' | 'mobile' | 'mouse-alt' | 'next1' | 'no-dashboard' | 'no-metrics-chart' | 'no-metrics' | 'os/android' | 'os/chrome_os' | 'os/fedora' | 'os/ios' | 'os/linux' | 'os/mac_os_x' | 'os/other' | 'os/ubuntu' | 'os/windows' | 'os' | 'pause-fill' | 'pause' | 'pdf-download' | 'pencil-stop' | 'pencil' | 'percent' | 'performance-icon' | 'person-fill' | 'person' | 'pie-chart-fill' | 'pin-fill' | 'play-circle-light' | 'play-circle' | 'play-fill-new' | 'play-fill' | 'play-hover' | 'play' | 'plus-circle' | 'plus' | 'prev1' | 'puzzle-piece' | 'question-circle' | 'question-lg' | 'quote-left' | 'quote-right' | 'redo-back' | 'redo' | 'remote-control' | 'replay-10' | 'resources-icon' | 'safe-fill' | 'safe' | 'sandglass' | 'search' | 'search_notification' | 'server' | 'share-alt' | 'shield-lock' | 'signup' | 'skip-forward-fill' | 'skip-forward' | 'slack' | 'slash-circle' | 'sliders' | 'social/slack' | 'social/trello' | 'spinner' | 'star-solid' | 'star' | 'step-forward' | 'stopwatch' | 'store' | 'sync-alt' | 'table-new' | 'table' | 'tablet-android' | 'tachometer-slow' | 'tachometer-slowest' | 'tags' | 'team-funnel' | 'telephone-fill' | 'telephone' | 'text-paragraph' | 'tools' | 'trash' | 'turtle' | 'user-alt' | 'user-circle' | 'user-friends' | 'users' | 'vendors/graphql' | 'vendors/mobx' | 'vendors/ngrx' | 'vendors/redux' | 'vendors/vuex' | 'web-vitals' | 'wifi' | 'window-alt' | 'window-restore' | 'window-x' | 'window' | 'zoom-in';
 
 interface Props {
     name: IconNames;
@@ -86,6 +86,7 @@ const SVG = (props: Props) => {
     case 'calendar-check': return <svg viewBox="0 0 448 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M400 64h-48V12c0-6.627-5.373-12-12-12h-8c-6.627 0-12 5.373-12 12v52H128V12c0-6.627-5.373-12-12-12h-8c-6.627 0-12 5.373-12 12v52H48C21.49 64 0 85.49 0 112v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zM48 96h352c8.822 0 16 7.178 16 16v48H32v-48c0-8.822 7.178-16 16-16zm352 384H48c-8.822 0-16-7.178-16-16V192h384v272c0 8.822-7.178 16-16 16zm-66.467-194.937-134.791 133.71c-4.7 4.663-12.288 4.642-16.963-.046l-67.358-67.552c-4.683-4.697-4.672-12.301.024-16.985l8.505-8.48c4.697-4.683 12.301-4.672 16.984.024l50.442 50.587 117.782-116.837c4.709-4.671 12.313-4.641 16.985.068l8.458 8.527c4.672 4.709 4.641 12.313-.068 16.984z"/></svg>;
     case 'calendar-day': return <svg viewBox="0 0 448 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M400 64h-48V8c0-4.4-3.6-8-8-8h-16c-4.4 0-8 3.6-8 8v56H128V8c0-4.4-3.6-8-8-8h-16c-4.4 0-8 3.6-8 8v56H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zm16 400c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16V192h384v272zm0-304H32v-48c0-8.8 7.2-16 16-16h352c8.8 0 16 7.2 16 16v48zM112 384h96c8.8 0 16-7.2 16-16v-96c0-8.8-7.2-16-16-16h-96c-8.8 0-16 7.2-16 16v96c0 8.8 7.2 16 16 16zm16-96h64v64h-64v-64z"/></svg>;
     case 'calendar': return <svg viewBox="0 0 448 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M400 64h-48V12c0-6.627-5.373-12-12-12h-8c-6.627 0-12 5.373-12 12v52H128V12c0-6.627-5.373-12-12-12h-8c-6.627 0-12 5.373-12 12v52H48C21.49 64 0 85.49 0 112v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zM48 96h352c8.822 0 16 7.178 16 16v48H32v-48c0-8.822 7.178-16 16-16zm352 384H48c-8.822 0-16-7.178-16-16V192h384v272c0 8.822-7.178 16-16 16z"/></svg>;
+    case 'call': return <svg viewBox="0 0 62 77" width={ `${ width }px` } height={ `${ height }px` } ><g opacity=".5" clipPath="url(#clip0_1024_2639)"><path d="M31 5.125A25.625 25.625 0 0 0 5.375 30.75v5.125H10.5A5.125 5.125 0 0 1 15.625 41v15.375A5.125 5.125 0 0 1 10.5 61.5H5.375A5.125 5.125 0 0 1 .25 56.375V30.75a30.75 30.75 0 1 1 61.5 0V61.5a12.812 12.812 0 0 1-12.813 12.813H38.002a5.125 5.125 0 0 1-4.438 2.562h-5.126a5.125 5.125 0 0 1 0-10.25h5.125a5.124 5.124 0 0 1 4.439 2.563h10.937a7.687 7.687 0 0 0 7.687-7.688H51.5a5.125 5.125 0 0 1-5.125-5.125V41a5.125 5.125 0 0 1 5.125-5.125h5.125V30.75A25.625 25.625 0 0 0 31 5.125Z" fill="#3EAAAF"/></g></svg>;
     case 'camera-alt': return <svg viewBox="0 0 512 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M256 408c-66.2 0-120-53.8-120-120s53.8-120 120-120 120 53.8 120 120-53.8 120-120 120zm0-208c-48.5 0-88 39.5-88 88s39.5 88 88 88 88-39.5 88-88-39.5-88-88-88zm-32 88c0-17.6 14.4-32 32-32 8.8 0 16-7.2 16-16s-7.2-16-16-16c-35.3 0-64 28.7-64 64 0 8.8 7.2 16 16 16s16-7.2 16-16zM324.3 64c3.3 0 6.3 2.1 7.5 5.2l22.1 58.8H464c8.8 0 16 7.2 16 16v288c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16h110.2l20.1-53.6c2.3-6.2 8.3-10.4 15-10.4h131m0-32h-131c-20 0-37.9 12.4-44.9 31.1L136 96H48c-26.5 0-48 21.5-48 48v288c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V144c0-26.5-21.5-48-48-48h-88l-14.3-38c-5.8-15.7-20.7-26-37.4-26z"/></svg>;
     case 'camera-video-off': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M10.961 12.365a1.99 1.99 0 0 0 .522-1.103l3.11 1.382A1 1 0 0 0 16 11.731V4.269a1 1 0 0 0-1.406-.913l-3.111 1.382A2 2 0 0 0 9.5 3H4.272l.714 1H9.5a1 1 0 0 1 1 1v6a1 1 0 0 1-.144.518l.605.847zM1.428 4.18A.999.999 0 0 0 1 5v6a1 1 0 0 0 1 1h5.014l.714 1H2a2 2 0 0 1-2-2V5c0-.675.334-1.272.847-1.634l.58.814zM15 11.73l-3.5-1.555v-4.35L15 4.269v7.462zm-4.407 3.56-10-14 .814-.58 10 14-.814.58z"/></svg>;
     case 'camera-video': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M0 5a2 2 0 0 1 2-2h7.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 4.269v7.462a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 13H2a2 2 0 0 1-2-2V5zm11.5 5.175 3.5 1.556V4.269l-3.5 1.556v4.35zM2 4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H2z"/></svg>;
diff --git a/frontend/app/constants/zindex.ts b/frontend/app/constants/zindex.ts
index 114871b83..807223caf 100644
--- a/frontend/app/constants/zindex.ts
+++ b/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 = () => {
diff --git a/frontend/app/player/MessageDistributor/managers/AssistManager.ts b/frontend/app/player/MessageDistributor/managers/AssistManager.ts
index f08d70775..9ce8407f7 100644
--- a/frontend/app/player/MessageDistributor/managers/AssistManager.ts
+++ b/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 = () => {
diff --git a/frontend/app/player/singletone.js b/frontend/app/player/singletone.js
index 81d6a6138..3c3156aa8 100644
--- a/frontend/app/player/singletone.js
+++ b/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))
diff --git a/frontend/app/svg/icons/call.svg b/frontend/app/svg/icons/call.svg
new file mode 100644
index 000000000..e95d5c040
--- /dev/null
+++ b/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>