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

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';
import { log } from "ezuikit-js";

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

const VideoHeader = ({ operationState, changeSelectState, setProcessDisX, name, videoObj, showTime, histroyTime, content, roll, videoStyle, player, resolution, playState }) => {
    const time = useRef(moment(showTime || undefined))
    const upTimeInterval = useRef(null)
    const [showTime_, setShowTime] = useState('     ')

    console.log(11212111313131);

    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])

    const vcmp_videoplay = document.getElementById('vcmp_videoplay')?.clientHeight
    const vcmp_videopla = document.getElementById('vcmp_videoplay')?.clientWidth

    return (
        <div>
            {roll && vcmp_videopla > 320 ?
                <div style={{
                    height: '12%', lineHeight: `${vcmp_videoplay * 0.12 > 42 ? 42 : vcmp_videoplay * 0.12 < 30 ? 30 : vcmp_videoplay * 0.12}px`, background: videoStyle == 'true' ? '#467ACD' : '#000000FF', maxHeight: 42, minHeight: 30,
                    position: 'absolute', width: '100%', zIndex: 80,
                    color: '#fff'
                }}>
                    <Row>
                        <Col span={videoStyle == 'true' ? 0 : 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')
                                            if (playState) {
                                                player.stop().then(() => {
                                                    if (resolution == 'sd') {
                                                        player.play({ url: videoObj?.playUrlSd, })
                                                    } else {
                                                        player.play({ url: videoObj?.playUrlHd, })
                                                    }
                                                    playState = false
                                                })
                                            } else {
                                                player.play({ url: resolution == 'sd' ? videoObj?.playUrlSd : videoObj?.playUrlHd, })
                                            }
                                        }} />
                                    </> : ''
                            }
                            {showTime_} {name}
                        </Col>
                        <Col span={videoStyle == 'true' ? 24 : 15} style={{}}>
                            <div style={{ paddingRight: 12 }}>
                                {content ? <TextScroll content={content || []} duration={6} /> : ""}
                            </div>
                        </Col>
                    </Row>
                </div> : ''}
        </div>
    )
}

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

export default connect(mapStateToProps)(VideoHeader);