spa_instat_tv/src/features/StreamPlayer/index.tsx

import { Settings } from 'features/MultiSourcePlayer/components/Settings'

import type { Props } from './hooks'
import { useVideoPlayer } from './hooks'
import { ProgressBar } from './components/ProgressBar'
import { VolumeBar } from './components/VolumeBar'
import {
  PlayerWrapper,
  VideoPlayer,
  Controls,
  PlayStop,
  Fullscreen,
} from './styled'

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

  return (
    <PlayerWrapper
      ref={wrapperRef}
      playing={playing}
      onClick={onPlayerClick}
    >
      <VideoPlayer
        width='100%'
        height='100%'
        src={url}
        ref={videoRef}
        playing={playing}
        volume={volume}
        muted={muted}
        seek={seek}
        onLoadedProgress={onLoadedProgress}
        onPlayedProgress={onPlayedProgress}
        onDurationChange={onDuration}
        onEnded={togglePlaying}
        onReady={startPlaying}
        onError={onError}
      />
      <Controls>
        <PlayStop onClick={togglePlaying} playing={playing} />
        <VolumeBar
          value={volumeInPercent}
          muted={muted}
          onChange={onVolumeChange}
          onClick={onVolumeClick}
        />
        <ProgressBar
          duration={duration}
          onPlayedProgressChange={onProgressChange}
          playedProgress={playedProgress}
          loadedProgress={loadedProgress}
        />
        <Fullscreen onClick={onFullscreenClick} isFullscreen={isFullscreen} />
        <Settings
          onSelect={onQualitySelect}
          selectedQuality={selectedQuality}
          videoQualities={videoQualities}
        />
      </Controls>
    </PlayerWrapper>
  )
}