spa_instat_tv/src/features/StreamPlayer/index.tsx

import { secondsToHms } from 'helpers'

import { Loader } from 'features/Loader'
import { Settings } from 'features/MultiSourcePlayer/components/Settings'
import { REWIND_SECONDS } from 'features/MultiSourcePlayer/config'
import { T9n } from 'features/T9n'

import type { Props } from './hooks'
import { useVideoPlayer } from './hooks'
import { ProgressBar } from './components/ProgressBar'
import { VolumeBar } from './components/VolumeBar'
import {
  PlayerWrapper,
  VideoPlayer,
  Controls,
  ControlsRow,
  ControlsGroup,
  CenterControls,
  PlayStop,
  Fullscreen,
  LoaderWrapper,
  Backward,
  Forward,
  PlaybackTime,
  ControlsGradient,
  LiveBtn,
} from './styled'

export const StreamPlayer = (props: Props) => {
  const { url } = props
  const {
    backToLive,
    duration,
    isFullscreen,
    loadedProgress,
    muted,
    onDuration,
    onError,
    onFullscreenClick,
    onLoadedProgress,
    onPlayedProgress,
    onPlayerClick,
    onProgressChange,
    onQualitySelect,
    onVolumeChange,
    onVolumeClick,
    playedProgress,
    playing,
    ready,
    rewindBackward,
    rewindForward,
    seek,
    selectedQuality,
    startPlaying,
    togglePlaying,
    videoQualities,
    videoRef,
    volume,
    volumeInPercent,
    wrapperRef,
  } = useVideoPlayer(props)

  return (
    <PlayerWrapper
      ref={wrapperRef}
      playing={playing}
      onClick={onPlayerClick}
    >
      {
        !ready && (
          <LoaderWrapper>
            <Loader color='#515151' />
          </LoaderWrapper>
        )
      }
      <VideoPlayer
        width='100%'
        height='100%'
        src={url}
        ref={videoRef}
        playing={playing}
        volume={volume}
        muted={muted}
        seek={seek}
        isFullscreen={isFullscreen}
        onLoadedProgress={onLoadedProgress}
        onPlayedProgress={onPlayedProgress}
        onDurationChange={onDuration}
        onEnded={togglePlaying}
        onReady={startPlaying}
        onError={onError}
        crossOrigin='use-credentials'
      />
      {ready && (
        <CenterControls playing={playing}>
          <Backward size='lg' onClick={rewindBackward}>{REWIND_SECONDS}</Backward>
          <PlayStop
            size='lg'
            marginRight={0}
            playing={playing}
            onClick={togglePlaying}
          />
          <Forward size='lg' onClick={rewindForward}>{REWIND_SECONDS}</Forward>
        </CenterControls>
      )}
      <Controls>
        <ControlsRow>
          <ProgressBar
            duration={duration}
            onPlayedProgressChange={onProgressChange}
            playedProgress={playedProgress}
            loadedProgress={loadedProgress}
          />
        </ControlsRow>
        <ControlsRow>
          <ControlsGroup>
            <PlayStop onClickCapture={togglePlaying} playing={playing} />
            <VolumeBar
              value={volumeInPercent}
              muted={muted}
              onChange={onVolumeChange}
              onClick={onVolumeClick}
            />
            <PlaybackTime>
              {secondsToHms(playedProgress / 1000)}
            </PlaybackTime>
            <Backward onClick={rewindBackward}>{REWIND_SECONDS}</Backward>
            <Forward onClick={rewindForward}>{REWIND_SECONDS}</Forward>
          </ControlsGroup>
          <ControlsGroup>
            <LiveBtn onClick={backToLive}>
              <T9n t='live' />
            </LiveBtn>
            <Fullscreen
              onClick={onFullscreenClick}
              isFullscreen={isFullscreen}
            />
            <Settings
              onSelect={onQualitySelect}
              selectedQuality={selectedQuality}
              videoQualities={videoQualities}
            />
          </ControlsGroup>
        </ControlsRow>
      </Controls>
      <ControlsGradient />
    </PlayerWrapper>
  )
}