45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import AutoplayTimer from './Overlay/AutoplayTimer';
|
|
import PlayIconLayer from './Overlay/PlayIconLayer';
|
|
import Loader from './Overlay/Loader';
|
|
import ElementsMarker from './Overlay/ElementsMarker';
|
|
import { PlayerContext } from 'App/components/Session/playerContext';
|
|
import { observer } from 'mobx-react-lite';
|
|
|
|
interface Props {
|
|
nextId?: string,
|
|
closedLive?: boolean,
|
|
isClickmap?: boolean,
|
|
}
|
|
|
|
function Overlay({
|
|
nextId,
|
|
isClickmap,
|
|
}: Props) {
|
|
const { player, store } = React.useContext(PlayerContext)
|
|
|
|
const togglePlay = () => player.togglePlay()
|
|
const {
|
|
playing,
|
|
ready,
|
|
completed,
|
|
autoplay,
|
|
inspectorMode,
|
|
markedTargets,
|
|
activeTargetIndex,
|
|
} = store.get()
|
|
|
|
const showAutoplayTimer = completed && autoplay && nextId
|
|
const showPlayIconLayer = !isClickmap && !markedTargets && !inspectorMode && ready && !showAutoplayTimer;
|
|
|
|
return (
|
|
<>
|
|
{showAutoplayTimer && <AutoplayTimer />}
|
|
{!ready ? <Loader /> : null}
|
|
{showPlayIconLayer && <PlayIconLayer playing={playing} togglePlay={togglePlay} />}
|
|
{markedTargets && <ElementsMarker targets={markedTargets} activeIndex={activeTargetIndex} />}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default observer(Overlay);
|