历史视频

code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperationHistroyProcess.jsx

@@ -27,7 +27,8 @@ const videoOperationHistroyProcess = ({ processDisX, setProcessDisX, histroyTime
             <div
                style={{
                   height: 9, width: 9, borderRadius: '100%', backgroundColor: '#fff',
-                  position: 'relative', top: -6.5, cursor: 'pointer',
+                  position: 'relative', top: -25, cursor: 'pointer',
+                  display: 'inline-block'
                }}
                id='process_point'
                className="video_process_but"
@@ -71,13 +72,13 @@ const videoOperationHistroyProcess = ({ processDisX, setProcessDisX, histroyTime
                   className={"video_process_time"}
                   style={{
                      backgroundColor: '#0000007F', position: 'absolute',
-                     top: -32, height: 24, lineHeight: '24px', textAlign: 'center', width: 94,
+                     top: -50, height: 46, lineHeight: '24px', textAlign: 'center', width: 94,
                      left:
-                        processDisX < 38 ?
+                        processDisX < 42 ?
                            -processDisX :
-                           processDisX + 38 > pointParentWidthRef.current - 4.5 ?
+                           processDisX + 42 > pointParentWidthRef.current - 4.5 ?
-                              -38 - (38 - (pointParentWidthRef.current - 4.5 - processDisX)) :
+                              -42 - (42 - (pointParentWidthRef.current - 4.5 - processDisX)) :
-                              -38
+                              -42
                      ,
                   }}>
                   {

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

@@ -5,7 +5,6 @@ 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'
 
@@ -54,20 +53,41 @@ const VideoHeader = ({ operationState, changeSelectState, setProcessDisX, name,
       updateTime()
    }, [showTime])
 
+   const goBack = () => {
+      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, })
+      }
+   }
+
    const vcmp_videoplay = document.getElementById("vcmp_videoplay" + videoObj.id)?.clientHeight
    const vcmp_videopla = document.getElementById("vcmp_videoplay" + videoObj.id)?.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' ? content.length > 0 ? '#467ACD' : "" : '#000000FF', maxHeight: 42, minHeight: 30,
+            height: '12%',
+            lineHeight: `${vcmp_videoplay * 0.12 > 42 ? 42 : vcmp_videoplay * 0.12 < 30 ? 30 : vcmp_videoplay * 0.12}px`,
+            background:
+               roll && vcmp_videopla > 320 ? 'opacity' :
+                  videoStyle == 'true' ? content.length > 0 ? '#467ACD' : "" : '#000000FF',
+            maxHeight: 42,
+            minHeight: 30,
             position: 'absolute', width: '100%', zIndex: 80,
             color: '#fff'
          }}>
             <Row>
-                  <Col span={videoStyle == 'true' ? 0 : 9} style={{
+               <Col span={histroyTime.length ? videoStyle == 'true' ? 3 : 9 : 0} style={{
-                     backgroundImage: 'url(/assets/images/background/videoPlayBg.png)',
+                  backgroundImage: content && content?.length > 0 ? 'url(/assets/images/background/videoPlayBg.png)' : '',
                   backgroundSize: '100% 100%',
                   backgroundRepeat: 'no-repeat',
                   padding: '0 12px'
@@ -75,32 +95,21 @@ const VideoHeader = ({ operationState, changeSelectState, setProcessDisX, name,
                   {
                      operationState && operationState.histroy.select ?
                         <>
-                              <IconReply style={{ marginRight: 12, cursor: 'pointer' }} onClick={() => {
+                           <IconReply style={{ marginRight: 12, cursor: 'pointer' }} onClick={goBack} />
-                                 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}
+                  {
+                     videoStyle == 'true' ?
+                        '' : `${showTime_} ${name || ''}`
+                  }
                </Col>
-                  <Col span={videoStyle == 'true' ? 24 : 15} style={{}}>
+               <Col span={histroyTime.length ? videoStyle == 'true' ? 21 : 15 : 24} style={{}}>
                   <div style={{ paddingRight: 12 }}>
                      {content && content?.length > 0 ? <TextScroll content={content || []} duration={6} videoObj={videoObj} /> : ""}
                   </div>
                </Col>
             </Row>
-            </div> : ''}
+         </div>
       </div>
    )
 }