spa_instat_tv/src/features/StreamPlayer/index.tsx

import { isIOS, isMobileDevice } from 'config/userAgent'

import { Loader } from 'features/Loader'
import { VideoPlayer } from 'features/VideoPlayer'
import { useMatchPageStore } from 'features/MatchPage/store'
import { Name } from 'features/Name'

import { REWIND_SECONDS } from './config'

import {
  PlayerWrapper,
  CenterControls,
  PlayStop,
  LoaderWrapper,
  Backward,
  Forward,
  ControlsGradient,
  TeamsDetailsWrapper,
  WarningIosText,
  WarningIosWrapper,
} from './styled'
import type { Props } from './hooks'
import { useVideoPlayer } from './hooks'
import { Controls } from './components/Controls'
import RewindMobile from './components/RewindMobile'

/**
 * HLS плеер, применяется на лайв и завершенных матчах
 */
export const StreamPlayer = (props: Props) => {
  const { profile } = useMatchPageStore()

  const {
    activeChapterIndex,
    backToLive,
    buffering,
    centerControlsVisible,
    chapters,
    duration,
    hideCenterControls,
    isFullscreen,
    loadedProgress,
    mainControlsVisible,
    muted,
    onDuration,
    onError,
    onFullscreenClick,
    onLoadedProgress,
    onMouseEnter,
    onMouseLeave,
    onMouseMove,
    onPause,
    onPlay,
    onPlayedProgress,
    onPlayerClick,
    onPlaying,
    onProgressChange,
    onQualitySelect,
    onReady,
    onTouchEnd,
    onTouchStart,
    onVolumeChange,
    onVolumeClick,
    onWaiting,
    playedProgress,
    playing,
    ready,
    rewindBackward,
    rewindForward,
    seek,
    selectedQuality,
    showCenterControls,
    togglePlaying,
    url,
    videoQualities,
    videoRef,
    volume,
    volumeInPercent,
    warningText,
    wrapperRef,
  } = useVideoPlayer(props)
  return (
    <PlayerWrapper
      ref={wrapperRef}
      playing={playing}
      onClick={isMobileDevice ? showCenterControls : onPlayerClick}
      onMouseMove={onMouseMove}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
      onTouchStart={onTouchStart}
      onTouchEnd={onTouchEnd}
    >
      <LoaderWrapper buffering={buffering}>
        <Loader color='#515151' />
      </LoaderWrapper>
      {isIOS
        ? (
          <WarningIosWrapper>
            <WarningIosText>
              {warningText}
            </WarningIosText>
          </WarningIosWrapper>
        )
        : (
          <LoaderWrapper buffering={buffering}>
            <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={onReady}
        onPause={onPause}
        onPlay={onPlay}
        onPlaying={onPlaying}
        onWaiting={onWaiting}
        onError={onError}
        crossOrigin='use-credentials'
      />

      {isMobileDevice && isFullscreen && mainControlsVisible && profile && (
        <TeamsDetailsWrapper>
          <Name nameObj={profile.team1} />
          {` ${profile.team1.score}-${profile.team2.score} `}
          <Name nameObj={profile.team2} />
        </TeamsDetailsWrapper>
      )}

      {ready && (
        <CenterControls controlsVisible={centerControlsVisible} playing={playing}>
          {isMobileDevice
            ? <RewindMobile isBackward rewindCallback={rewindBackward} />
            : <Backward size='lg' onClick={rewindBackward}>{REWIND_SECONDS}</Backward>}
          <PlayStop
            size='lg'
            marginRight={0}
            playing={playing}
            onClickCapture={() => {
              togglePlaying()
              hideCenterControls()
            }}
          />
          {isMobileDevice
            ? <RewindMobile isForward rewindCallback={rewindForward} />
            : <Forward size='lg' onClick={rewindForward}>{REWIND_SECONDS}</Forward>}
        </CenterControls>
      )}

      <Controls
        allPlayedProgress={playedProgress}
        backToLive={backToLive}
        controlsVisible={mainControlsVisible}
        duration={duration}
        isFullscreen={isFullscreen}
        isLive={profile?.live}
        isStorage={profile?.storage}
        loadedProgress={loadedProgress}
        muted={muted}
        onFullscreenClick={onFullscreenClick}
        onProgressChange={onProgressChange}
        onQualitySelect={onQualitySelect}
        onTouchEnd={onTouchEnd}
        onTouchStart={onTouchStart}
        onVolumeChange={onVolumeChange}
        onVolumeClick={onVolumeClick}
        playedProgress={playedProgress}
        playing={playing}
        rewindBackward={rewindBackward}
        rewindForward={rewindForward}
        selectedQuality={selectedQuality}
        togglePlaying={togglePlaying}
        videoQualities={videoQualities}
        volume={volume}
        volumeInPercent={volumeInPercent}
        activeChapterIndex={activeChapterIndex}
        liveChapters={chapters}
      />
      <ControlsGradient isVisible={mainControlsVisible} />
    </PlayerWrapper>
  )
}