openreplay/frontend/app/components/Session/Player/ClipPlayer/ClipPlayerOverlay.tsx

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;
}

function Overlay({ autoplay }: Props) {
  const { player, store } = React.useContext(PlayerContext);
  const togglePlay = () => player.togglePlay();

  const { messagesLoading, playing, completed } = store.get();

  return (
    <>
      {messagesLoading ? <Loader /> : null}
      {/* <div className="hidden group-hover:block"> */}
      {/*    <ClipFeedback/> */}
      {/* </div> */}
      <PlayIconLayer playing={playing} togglePlay={togglePlay} />
      {completed && autoplay && <AutoplayTimer />}
    </>
  );
}

export default observer(Overlay);