FS-IOT/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperation.jsx

import React, { useState, useEffect, useRef } from "react";
import { connect } from "react-redux";
import moment from 'moment'
import VideoOperationCloudControl from './videoOperationCloudControl'
import VideoOperationTalk from './videoOperationTalk'
import VideoOperationSpeed from './videoOperationSpeed'
import VideoOperationVoice from './videoOperationVoice'
import VideoOperationHistroyTime from './videoOperationHistroyTime'
import VideoOperationHistroyProcess from "./videoOperationHistroyProcess";
import { IconPause, IconPlay } from '@douyinfe/semi-icons';
import './videoPlay.less';

const timeFormat = 'YYYY-MM-DD HH:mm:ss'

const VideoOperation = ({
   operationState, operation,
   voiceDisY, setVoiceDisY,
   processDisX, setProcessDisX,
   isAdjustProcess, setIsAdjustProcess,
   resolution, setResolution,
   histroyTime, setHistroyTime,
   histroyBegain,
   play, pause, closeSound, openSound,
   isPlaying,
   videoObj,
   setYingshiPrepare, yingshiPrepareRef
}) => {
   const [showTimeSelect, setShowTimeSelect] = useState(false)

   const butStyle = {
      border: '1px solid #fff', color: '#fff', padding: '0 10px',
      display: 'flex', alignItems: 'center', height: '64%', marginLeft: 12, cursor: 'pointer',
      position: 'relative'
   }

   const changeResolution = () => {
      if (yingshiPrepareRef.current) {
         return
      }
      if (videoObj.type == 'yingshi') {
         yingshiPrepareRef.current = 'yingshi'
         setYingshiPrepare('play')
      }
      setResolution(resolution == 'sd' ? 'hd' : 'sd')
   }

   const histroySelected = operationState && operationState.histroy.select
   return (
      <>
         {
            operationState ?
               operationState.control.select ?
                  <VideoOperationCloudControl videoObj={videoObj} /> :
                  operationState.talk.select ?
                     <VideoOperationTalk /> :
                     '' : ''
         }
         {
            showTimeSelect ?
               <VideoOperationHistroyTime close={() => { setShowTimeSelect(false) }} histroyTime={histroyTime} setHistroyTime={setHistroyTime} setProcessDisX={setProcessDisX} />
               : ''
         }
         {/* 下方操作 */}
         <div style={{
            height: histroySelected ? 44 : 42, lineHeight: `${histroySelected ? 44 : 42}px`,
            background: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%)', padding: '0 12px',
            position: 'absolute', bottom: 0, width: '100%', zIndex: 99, color: '#fff',
         }}>
            {
               histroySelected && histroyTime.length ?
                  <VideoOperationHistroyProcess
                     processDisX={processDisX} setProcessDisX={setProcessDisX} histroyTime={histroyTime}
                     isAdjustProcess={isAdjustProcess} setIsAdjustProcess={setIsAdjustProcess}
                  /> : ''
            }
            <div style={{
               display: 'flex', justifyContent: 'space-between', height: '100%'
            }}>
               {
                  operationState ?
                     histroySelected ?
                        <>
                           <div style={{ display: 'flex', alignItems: 'center' }}>
                              {
                                 videoObj.type != 'yingshi' ?
                                    isPlaying ?
                                       <IconPause style={{ cursor: 'pointer' }} onClick={pause} />
                                       : <IconPlay style={{ cursor: 'pointer' }} onClick={play} />
                                    : ''
                              }
                              <span style={{ marginLeft: 12 }}>
                                 {histroyTime.length ? `${moment(histroyTime[0]).format(timeFormat)} / ${moment(histroyTime[1]).format(timeFormat)}` : ''}
                              </span>
                           </div>
                           <div style={{ display: 'flex', alignItems: 'center' }}>
                              <VideoOperationVoice voiceDisY={voiceDisY} setVoiceDisY={setVoiceDisY} videoObj={videoObj} closeSound={closeSound} openSound={openSound} />
                              {
                                 videoObj.type != 'yingshi' ?
                                    <VideoOperationSpeed butStyle={butStyle} />
                                    : ''
                              }
                              <div style={butStyle} onClick={() => {
                                 setShowTimeSelect(!showTimeSelect)
                              }}>时间设置</div>
                           </div>
                        </>
                        :
                        <>
                           <div style={{ display: 'flex', alignItems: 'center' }}>
                              {
                                 operationState ?
                                    operation.map(p => {
                                       if (p.hide) return null;
                                       return <img
                                          src={`/assets/images/background/video-icon-${p.key}-${operationState[p.key].select ? 'select' : 'unselect'}.png`}
                                          height={18}
                                          style={{ marginRight: 24, cursor: 'pointer' }}
                                          onClick={p.click}
                                       />
                                    }) : ''
                              }
                           </div>
                           <div style={{ display: 'flex', alignItems: 'center', userSelect: 'none' }}>
                              {
                                 videoObj.playUrlSd && videoObj.playUrlHd ?
                                    resolution == 'sd' ?
                                       <div style={butStyle} onClick={changeResolution}>标清</div> :
                                       <div style={butStyle} onClick={changeResolution}>高清</div>
                                    : ''
                              }
                           </div>
                        </> : ''
               }
            </div>
         </div>
      </>
   )
}

function mapStateToProps (state) {
   const { auth } = state;
   return {
      user: auth.user,
   };
}

export default connect(mapStateToProps)(VideoOperation);