spa_instat_tv/src/features/MultiSourcePlayer/index.tsx

import { Loader } from 'features/Loader'
import { VolumeBar } from 'features/StreamPlayer/components/VolumeBar'
import {
  PlayerWrapper,
  Controls,
  ControlsRow,
  ControlsGroup,
  CenterControls,
  PlayStop,
  Fullscreen,
  LoaderWrapper,
  Backward,
  Forward,
  PlaybackTime,
  ControlsGradient,
} from 'features/StreamPlayer/styled'
import { VideoPlayer } from 'features/VideoPlayer'

import { secondsToHms } from 'helpers'

import { isMobileDevice } from 'config/userAgent'
import { HOUR_IN_MILLISECONDS, REWIND_SECONDS } from './config'

import { ProgressBar } from './components/ProgressBar'
import { Settings } from './components/Settings'

import type { Props } from './hooks'
import { useMultiSourcePlayer } from './hooks'
import { Players } from './types'
import {
  ChaptersText,
  Next,
  Prev,
} from './styled'

export const MultiSourcePlayer = (props: Props) => {
  const {
    activeChapterIndex,
    activePlayer,
    activeSrc,
    allPlayedProgress,
    chapters,
    controlsVisible,
    duration,
    isFirstChapterPlaying,
    isFullscreen,
    isLastChapterPlaying,
    loadedProgress,
    muted,
    nextSrc,
    numberOfChapters,
    onEnded,
    onError,
    onFullscreenClick,
    onLoadedProgress,
    onMouseEnter,
    onMouseLeave,
    onMouseMove,
    onPause,
    onPlayedProgress,
    onPlayerClick,
    onProgressChange,
    onQualitySelect,
    onReady,
    onTouchEnd,
    onTouchStart,
    onVolumeChange,
    onVolumeClick,
    playedProgress,
    playing,
    playNextChapter,
    playPrevChapter,
    ready,
    rewindBackward,
    rewindForward,
    seek,
    selectedQuality,
    togglePlaying,
    video1Ref,
    video2Ref,
    videoQualities,
    volume,
    volumeInPercent,
    wrapperRef,
  } = useMultiSourcePlayer(props)

  const firstPlayerActive = activePlayer === Players.PLAYER1

  return (
    <PlayerWrapper
      ref={wrapperRef}
      playing={playing}
      onClick={onPlayerClick}
      onMouseMove={onMouseMove}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
      onTouchStart={onTouchStart}
      onTouchEnd={onTouchEnd}
    >
      {
        !ready && (
          <LoaderWrapper>
            <Loader color='#515151' />
          </LoaderWrapper>
        )
      }
      <VideoPlayer
        src={firstPlayerActive ? activeSrc : nextSrc}
        playing={firstPlayerActive ? playing : false}
        hidden={!firstPlayerActive}
        muted={muted}
        volume={volume}
        ref={video1Ref}
        seek={seek[Players.PLAYER1]}
        isFullscreen={isFullscreen}
        onLoadedProgress={firstPlayerActive ? onLoadedProgress : undefined}
        onPlayedProgress={firstPlayerActive ? onPlayedProgress : undefined}
        onEnded={onEnded}
        onPause={firstPlayerActive ? onPause : undefined}
        onError={onError}
        onReady={onReady}
      />
      <VideoPlayer
        src={!firstPlayerActive ? activeSrc : nextSrc}
        playing={!firstPlayerActive ? playing : false}
        hidden={firstPlayerActive}
        muted={muted}
        volume={volume}
        ref={video2Ref}
        seek={seek[Players.PLAYER2]}
        isFullscreen={isFullscreen}
        onLoadedProgress={!firstPlayerActive ? onLoadedProgress : undefined}
        onPlayedProgress={!firstPlayerActive ? onPlayedProgress : undefined}
        onEnded={onEnded}
        onPause={!firstPlayerActive ? onPause : undefined}
        onError={onError}
        onReady={onReady}
      />
      {ready && (
        <CenterControls playing={playing}>
          <Backward size='lg' onClick={rewindBackward}>{REWIND_SECONDS}</Backward>
          <PlayStop
            size='lg'
            marginRight={0}
            playing={playing}
            onClickCapture={togglePlaying}
          />
          <Forward size='lg' onClick={rewindForward}>{REWIND_SECONDS}</Forward>
        </CenterControls>
      )}
      <Controls visible={controlsVisible}>
        <ControlsRow>
          <ProgressBar
            activeChapterIndex={activeChapterIndex}
            allPlayedProgress={allPlayedProgress}
            duration={duration}
            chapters={chapters}
            onTouchEnd={onTouchEnd}
            onTouchStart={onTouchStart}
            onPlayedProgressChange={onProgressChange}
            playedProgress={playedProgress}
            loadedProgress={loadedProgress}
          />
        </ControlsRow>

        <ControlsRow>
          <ControlsGroup>
            <PlayStop
              playing={playing}
              onClickCapture={togglePlaying}
            />
            <Prev
              disabled={isFirstChapterPlaying}
              onClick={() => playPrevChapter()}
            />
            <ChaptersText>
              {activeChapterIndex + 1} / {numberOfChapters}
            </ChaptersText>
            <Next
              disabled={isLastChapterPlaying}
              onClick={() => playNextChapter()}
            />
            {
              !isMobileDevice && (
                <VolumeBar
                  value={volumeInPercent}
                  muted={muted}
                  onChange={onVolumeChange}
                  onClick={onVolumeClick}
                />
              )
            }
            <PlaybackTime width={duration > HOUR_IN_MILLISECONDS ? 150 : 130}>
              {secondsToHms(allPlayedProgress / 1000)}
              {' / '}
              {secondsToHms(duration / 1000)}
            </PlaybackTime>
            <Backward
              onClick={rewindBackward}
              isHidden={isMobileDevice}
            >{REWIND_SECONDS}
            </Backward>
            <Forward
              onClick={rewindForward}
              isHidden={isMobileDevice}
            >{REWIND_SECONDS}
            </Forward>
          </ControlsGroup>

          <ControlsGroup>
            <Settings
              onSelect={onQualitySelect}
              selectedQuality={selectedQuality}
              videoQualities={videoQualities}
            />
            <Fullscreen
              onClick={onFullscreenClick}
              isFullscreen={isFullscreen}
            />
          </ControlsGroup>
        </ControlsRow>
      </Controls>
      <ControlsGradient />
    </PlayerWrapper>
  )
}