69 lines
2.3 KiB
TypeScript
69 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import { CallingState, ConnectionStatus, RemoteControlStatus, getStatusText } from 'Player';
|
|
|
|
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, { WindowType } from 'App/components/Assist/RequestingWindow';
|
|
import { PlayerContext } from 'App/components/Session/playerContext';
|
|
import { observer } from 'mobx-react-lite';
|
|
|
|
interface Props {
|
|
nextId: string,
|
|
closedLive?: boolean,
|
|
}
|
|
|
|
function Overlay({
|
|
nextId,
|
|
closedLive,
|
|
}: Props) {
|
|
const { player, store } = React.useContext(PlayerContext)
|
|
|
|
const togglePlay = () => player.togglePlay()
|
|
const {
|
|
playing,
|
|
messagesLoading,
|
|
cssLoading,
|
|
completed,
|
|
autoplay,
|
|
inspectorMode,
|
|
live,
|
|
peerConnectionStatus,
|
|
markedTargets,
|
|
activeTargetIndex,
|
|
livePlay,
|
|
calling,
|
|
remoteControl,
|
|
} = store.get()
|
|
const loading = messagesLoading || cssLoading
|
|
const liveStatusText = getStatusText(peerConnectionStatus)
|
|
const concetionStatus = peerConnectionStatus
|
|
|
|
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 (
|
|
<>
|
|
{showRequestWindow ? <RequestingWindow type={requestWindowType} /> : null}
|
|
{ showAutoplayTimer && <AutoplayTimer /> }
|
|
{ showLiveStatusText &&
|
|
<LiveStatusText text={liveStatusText} concetionStatus={closedLive ? ConnectionStatus.Closed : concetionStatus} />
|
|
}
|
|
{ loading ? <Loader /> : null }
|
|
{ showPlayIconLayer &&
|
|
<PlayIconLayer playing={playing} togglePlay={togglePlay} />
|
|
}
|
|
{ markedTargets && <ElementsMarker targets={ markedTargets } activeIndex={activeTargetIndex}/>
|
|
}
|
|
</>
|
|
);
|
|
}
|
|
|
|
|
|
export default observer(Overlay);
|