34 lines
1 KiB
TypeScript
34 lines
1 KiB
TypeScript
import React from 'react';
|
|
import { observer } from 'mobx-react-lite';
|
|
import { PlayerContext } from 'Components/Session/playerContext';
|
|
import { Loader } from 'UI';
|
|
import PlayIconLayer from 'Components/Session_/Player/Overlay/PlayIconLayer';
|
|
import ClipFeedback from 'Components/Session/Player/ClipPlayer/ClipFeedback';
|
|
import AutoplayTimer from 'Components/Session/Player/ClipPlayer/AutoPlayTimer';
|
|
|
|
interface Props {
|
|
autoplay: boolean;
|
|
isHighlight?: boolean;
|
|
}
|
|
|
|
function Overlay({ autoplay, isHighlight }: Props) {
|
|
const { player, store } = React.useContext(PlayerContext);
|
|
const togglePlay = () => player.togglePlay();
|
|
|
|
const { messagesLoading, playing, completed } = store.get();
|
|
|
|
return (
|
|
<>
|
|
{messagesLoading ? <Loader /> : null}
|
|
{isHighlight ? null : (
|
|
<div className="hidden group-hover:block">
|
|
<ClipFeedback />
|
|
</div>
|
|
)}
|
|
<PlayIconLayer playing={playing} togglePlay={togglePlay} />
|
|
{completed && autoplay && <AutoplayTimer />}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default observer(Overlay);
|