You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
4.2 KiB
102 lines
4.2 KiB
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 VideoOperationTime from './videoOperationTime'
|
|
import { IconPause, IconPlay } from '@douyinfe/semi-icons';
|
|
import './videoPlay.less';
|
|
|
|
const VideoOperation = ({
|
|
operationState, operation, voiceDisY, setVoiceDisY,
|
|
resolution, setResolution
|
|
}) => {
|
|
const [showTimeSelect, setShowTimeSelect] = useState(false)
|
|
|
|
const butStyle = {
|
|
border: '1px solid #fff', display: 'inline-block', color: '#fff', padding: '0 10px',
|
|
display: 'flex', alignItems: 'center', height: '64%', marginLeft: 12, cursor: 'pointer',
|
|
position: 'relative'
|
|
}
|
|
|
|
const changeResolution = () => {
|
|
setResolution(resolution == 'sd' ? 'hd' : 'sd')
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{
|
|
operationState ?
|
|
operationState.control.select ?
|
|
<VideoOperationCloudControl /> :
|
|
operationState.talk.select ?
|
|
<VideoOperationTalk /> :
|
|
'' : ''
|
|
}
|
|
{
|
|
showTimeSelect ?
|
|
<VideoOperationTime close={() => { setShowTimeSelect(false) }} />
|
|
: ''
|
|
}
|
|
{/* 下方操作 */}
|
|
<div style={{
|
|
height: 42, lineHeight: '42px', background: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%)', padding: '0 12px',
|
|
display: 'flex', justifyContent: 'space-between',
|
|
position: 'absolute', bottom: 0, width: '100%', zIndex: 99, color: '#fff'
|
|
}}>
|
|
{
|
|
operationState ?
|
|
operationState.histroy.select ?
|
|
<>
|
|
<div style={{ display: 'flex', alignItems: 'center' }}>
|
|
<IconPause style={{ cursor: 'pointer' }} />
|
|
{/* <IconPlay style={{ cursor: 'pointer' }} /> */}
|
|
<span style={{ marginLeft: 12 }}>{moment().format('YYYY-MM-DD HH:mm:ss')}/{moment().format('YYYY-MM-DD HH:mm:ss')}</span>
|
|
</div>
|
|
<div style={{ display: 'flex', alignItems: 'center' }}>
|
|
<VideoOperationVoice voiceDisY={voiceDisY} setVoiceDisY={setVoiceDisY} />
|
|
<VideoOperationSpeed butStyle={butStyle} />
|
|
<div style={butStyle} onClick={() => {
|
|
setShowTimeSelect(!showTimeSelect)
|
|
}}>时间设置</div>
|
|
</div>
|
|
</>
|
|
:
|
|
<>
|
|
<div style={{ display: 'flex', alignItems: 'center' }}>
|
|
{
|
|
operationState ?
|
|
operation.map(p => {
|
|
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' }}>
|
|
{
|
|
resolution == 'sd' ?
|
|
<div style={butStyle} onClick={changeResolution}>标清</div> :
|
|
<div style={butStyle} onClick={changeResolution}>高清</div>
|
|
}
|
|
</div>
|
|
</> : ''
|
|
}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function mapStateToProps (state) {
|
|
const { auth } = state;
|
|
return {
|
|
user: auth.user,
|
|
};
|
|
}
|
|
|
|
export default connect(mapStateToProps)(VideoOperation);
|