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.
96 lines
3.0 KiB
96 lines
3.0 KiB
import React, { useState, useEffect, useRef } from "react";
|
|
import { connect } from "react-redux";
|
|
import moment from 'moment'
|
|
import { Col, Row, } from "@douyinfe/semi-ui";
|
|
import { IconReply } from '@douyinfe/semi-icons';
|
|
import TextScroll from '../textScroll'
|
|
import './videoPlay.less';
|
|
|
|
const timeFormat = 'YYYY-MM-DD HH:mm:ss'
|
|
|
|
const VideoHeader = ({ operationState, changeSelectState, setProcessDisX, name, showTime, histroyTime,content }) => {
|
|
const time = useRef(moment(showTime || undefined))
|
|
const upTimeInterval = useRef(null)
|
|
const [showTime_, setShowTime] = useState(' ')
|
|
|
|
const updateTime = () => {
|
|
if (!showTime) {
|
|
setShowTime('')
|
|
clearInterval(upTimeInterval.current)
|
|
return
|
|
}
|
|
time.current = moment(showTime || undefined)
|
|
if (upTimeInterval.current) {
|
|
clearInterval(upTimeInterval.current)
|
|
}
|
|
const upTime = () => {
|
|
time.current.add(1, 's')
|
|
if (operationState && operationState.histroy.select) {
|
|
// setProcessDisX(Math.random() * 300 + 100)
|
|
if (time.current.isSameOrAfter(histroyTime[1])) {
|
|
clearInterval(upTimeInterval.current)
|
|
}
|
|
setProcessDisX(
|
|
time.current.diff(moment(histroyTime[0]), 'seconds') / moment(histroyTime[1]).diff(moment(histroyTime[0]), 'seconds') * document.getElementById('process_point').parentElement.offsetWidth
|
|
)
|
|
}
|
|
setShowTime(time.current.format(timeFormat))
|
|
}
|
|
upTime()
|
|
upTimeInterval.current = setInterval(upTime, 1000)
|
|
}
|
|
|
|
useEffect(() => {
|
|
updateTime()
|
|
return () => {
|
|
if (upTimeInterval.current) {
|
|
clearInterval(upTimeInterval.current)
|
|
}
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
updateTime()
|
|
}, [showTime])
|
|
|
|
return (
|
|
<div style={{
|
|
height: 42, lineHeight: '42px', background: '#00000026',
|
|
position: 'absolute', width: '100%', zIndex: 99,
|
|
color: '#fff'
|
|
}}>
|
|
<Row>
|
|
<Col span={9} style={{
|
|
backgroundImage: 'url(/assets/images/background/videoPlayBg.png)',
|
|
backgroundSize: '100% 100%',
|
|
backgroundRepeat: 'no-repeat',
|
|
padding: '0 12px'
|
|
}}>
|
|
{
|
|
operationState && operationState.histroy.select ?
|
|
<>
|
|
<IconReply style={{ marginRight: 12, cursor: 'pointer' }} onClick={() => {
|
|
changeSelectState('histroy')
|
|
}} />
|
|
</> : ''
|
|
}
|
|
{showTime_} {name}
|
|
</Col>
|
|
<Col span={15} style={{}}>
|
|
<div style={{ paddingRight: 12 }}>
|
|
<TextScroll content={[]} duration={6} />
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function mapStateToProps (state) {
|
|
const { auth } = state;
|
|
return {
|
|
user: auth.user,
|
|
};
|
|
}
|
|
|
|
export default connect(mapStateToProps)(VideoHeader);
|