diff --git a/frontend/app/components/Assist/RequestingWindow/RequestingWindow.tsx b/frontend/app/components/Assist/RequestingWindow/RequestingWindow.tsx index 7d6f2c790..ac811de63 100644 --- a/frontend/app/components/Assist/RequestingWindow/RequestingWindow.tsx +++ b/frontend/app/components/Assist/RequestingWindow/RequestingWindow.tsx @@ -2,23 +2,41 @@ 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'; +import { initiateCallEnd, releaseRemoteControl } from 'Player'; interface Props { userDisplayName: string + type: WindowType } -function RequestingWindow({ userDisplayName }: Props) { +export enum WindowType { + Call, + Control, +} +const WIN_VARIANTS = { + [WindowType.Call]: { + text: 'to accept the call', + icon: 'call' as const, + action: initiateCallEnd + }, + [WindowType.Control]: { + text: 'to accept remote control request', + icon: 'remote-control' as const, + action: releaseRemoteControl + } +} + +function RequestingWindow({ userDisplayName, type }: Props) { return (
- + Waiting for {userDisplayName} - to accept the call + {WIN_VARIANTS[type].text} - +
) diff --git a/frontend/app/components/Assist/RequestingWindow/index.ts b/frontend/app/components/Assist/RequestingWindow/index.ts index 9dbd99dfe..1a50403c4 100644 --- a/frontend/app/components/Assist/RequestingWindow/index.ts +++ b/frontend/app/components/Assist/RequestingWindow/index.ts @@ -1 +1 @@ -export { default } from './RequestingWindow' +export { default, WindowType } from './RequestingWindow' diff --git a/frontend/app/components/Session_/Player/Overlay.tsx b/frontend/app/components/Session_/Player/Overlay.tsx index 85ec89487..14a2f2a17 100644 --- a/frontend/app/components/Session_/Player/Overlay.tsx +++ b/frontend/app/components/Session_/Player/Overlay.tsx @@ -1,15 +1,15 @@ -import React, {useEffect} from 'react'; -import { connectPlayer, markTargets } from 'Player'; +import React from 'react'; +import { connectPlayer } from 'Player'; import { getStatusText } from 'Player/MessageDistributor/managers/AssistManager'; import type { MarkedTarget } from 'Player/MessageDistributor/StatedScreen/StatedScreen'; -import { CallingState, ConnectionStatus } from 'Player/MessageDistributor/managers/AssistManager'; +import { CallingState, ConnectionStatus, RemoteControlStatus } 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'; +import RequestingWindow, { WindowType } from 'App/components/Assist/RequestingWindow'; interface Props { playing: boolean, @@ -23,6 +23,7 @@ interface Props { markedTargets: MarkedTarget[] | null, activeTargetIndex: number, calling: CallingState, + remoteControl: RemoteControlStatus nextId: string, togglePlay: () => void, @@ -46,14 +47,18 @@ function Overlay({ closedLive, livePlay, calling, + remoteControl, }: Props) { const showAutoplayTimer = !live && completed && autoplay && nextId const showPlayIconLayer = !live && !markedTargets && !inspectorMode && !loading && !showAutoplayTimer; const showLiveStatusText = live && livePlay && liveStatusText && !loading; + const showRequestWindow = live && (calling === CallingState.Connecting || remoteControl === RemoteControlStatus.Requesting) + const requestWindowType = calling === CallingState.Connecting ? WindowType.Call : remoteControl === RemoteControlStatus.Requesting ? WindowType.Control : null + return ( <> - {live && calling === CallingState.Connecting ? : null} + {showRequestWindow ? : null} { showAutoplayTimer && } { showLiveStatusText && @@ -82,4 +87,5 @@ export default connectPlayer(state => ({ activeTargetIndex: state.activeTargetIndex, livePlay: state.livePlay, calling: state.calling, + remoteControl: state.remoteControl, }))(Overlay); diff --git a/frontend/app/player/MessageDistributor/managers/AssistManager.ts b/frontend/app/player/MessageDistributor/managers/AssistManager.ts index 9ce8407f7..a72c9c0c8 100644 --- a/frontend/app/player/MessageDistributor/managers/AssistManager.ts +++ b/frontend/app/player/MessageDistributor/managers/AssistManager.ts @@ -323,6 +323,12 @@ export default class AssistManager { } } + releaseRemoteControl = () => { + if (!this.socket) { return } + this.socket.emit("release_control") + this.toggleRemoteControl(false) + } + /* ==== PeerJS Call ==== */ diff --git a/frontend/app/player/singletone.js b/frontend/app/player/singletone.js index 0964f84e5..8bf470658 100644 --- a/frontend/app/player/singletone.js +++ b/frontend/app/player/singletone.js @@ -76,6 +76,7 @@ export const setCallArgs = initCheck((...args) => instance.assistManager.setCall /** @type {Player.assistManager.initiateCallEnd} */ export const initiateCallEnd = initCheck((...args) => instance.assistManager.initiateCallEnd(...args)) export const requestReleaseRemoteControl = initCheck((...args) => instance.assistManager.requestReleaseRemoteControl(...args)) +export const releaseRemoteControl = initCheck((...args) => instance.assistManager.releaseRemoteControl(...args)) export const markTargets = initCheck((...args) => instance.markTargets(...args)) export const activeTarget = initCheck((...args) => instance.activeTarget(...args)) export const toggleAnnotation = initCheck((...args) => instance.assistManager.toggleAnnotation(...args)) diff --git a/frontend/app/svg/remote-control.svg b/frontend/app/svg/remote-control.svg new file mode 100644 index 000000000..9e2925be5 --- /dev/null +++ b/frontend/app/svg/remote-control.svg @@ -0,0 +1,10 @@ + + + + + + + + + +