播放器样式 100%

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

@@ -0,0 +1,46 @@
+import React, { useState, useEffect, useRef } from "react";
+import { connect } from "react-redux";
+import { DatePicker, Button, Space } from '@douyinfe/semi-ui';
+import './videoPlay.less';
+
+const VideoOperationTime = ({ close }) => {
+
+   return (
+      <div style={{
+         position: 'absolute', top: 'calc(50% - 90px)', left: 'calc(50% - 260px)',
+         width: 520, height: 180, backgroundColor: '#000000A5', padding: '40px 30px',
+         display: 'flex', flexDirection: 'column', justifyContent: 'space-between'
+      }}>
+         <div style={{ display: 'flex', justifyContent: 'center' }}>
+            <DatePicker
+               density='compact'
+               type="dateTimeRange"
+               defaultPickerValue={[new Date('2022-08-08 00:00'), new Date('2022-08-09 12:00')]}
+               onChange={console.log}
+               style={{ width: '100%' }}
+            />
+         </div>
+         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+            <span style={{ color: '#FF7100' }}>
+               <img src="/assets/images/background/warning.png" height={14} style={{ position: 'relative', top: 2 }} />
+               最长时间跨度不超过72小时
+            </span>
+            <span>
+               <Space>
+                  <Button theme='light' type='tertiary' onClick={() => { close() }}>取消</Button>
+                  <Button theme='solid' type='primary' onClick={() => { close() }}>播放</Button>
+               </Space>
+            </span>
+         </div>
+      </div>
+   )
+}
+
+function mapStateToProps (state) {
+   const { auth } = state;
+   return {
+      user: auth.user,
+   };
+}
+
+export default connect(mapStateToProps)(VideoOperationTime);

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

@@ -5,10 +5,15 @@ 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 }) => {
+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',
@@ -16,6 +21,10 @@ const VideoOperation = ({ operationState, operation, voiceDisY, setVoiceDisY })
       position: 'relative'
    }
 
+   const changeResolution = () => {
+      setResolution(resolution == 'sd' ? 'hd' : 'sd')
+   }
+
    return (
       <>
          {
@@ -26,6 +35,11 @@ const VideoOperation = ({ operationState, operation, voiceDisY, setVoiceDisY })
                      <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',
@@ -44,7 +58,9 @@ const VideoOperation = ({ operationState, operation, voiceDisY, setVoiceDisY })
                         <div style={{ display: 'flex', alignItems: 'center' }}>
                            <VideoOperationVoice voiceDisY={voiceDisY} setVoiceDisY={setVoiceDisY} />
                            <VideoOperationSpeed butStyle={butStyle} />
-                           <div style={butStyle}>时间设置</div>
+                           <div style={butStyle} onClick={() => {
+                              setShowTimeSelect(!showTimeSelect)
+                           }}>时间设置</div>
                         </div>
                      </>
                      :
@@ -63,8 +79,11 @@ const VideoOperation = ({ operationState, operation, voiceDisY, setVoiceDisY })
                            }
                         </div>
                         <div style={{ display: 'flex', alignItems: 'center' }}>
-                           <div style={butStyle}>标清</div>
+                           {
-                           <div style={butStyle}>高清</div>
+                              resolution == 'sd' ?
+                                 <div style={butStyle} onClick={changeResolution}>标清</div> :
+                                 <div style={butStyle} onClick={changeResolution}>高清</div>
+                           }
                         </div>
                      </> : ''
             }

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

@@ -2,23 +2,18 @@ import React, { useState, useEffect, useRef } from "react";
 import { connect } from "react-redux";
 import './videoPlay.less';
 
-const VideoOperationTalk = ({ butStyle }) => {
+const VideoOperationTalk = ({  }) => {
 
    return (
-      <div style={butStyle} className="video_speed_but">
+      <div style={{
-         <div className="video_speed_options" style={{
+         position: 'absolute', top: 'calc(50% - 88px)', left: 'calc(50% - 156px)',
-            position: 'absolute', top: -24 * 3 - 24, backgroundColor: '#00000099', width: 60,
+         width: 312, height: 176, backgroundColor: '#000000A5',
-            left: -6, padding: '8px 0'
+      }}>
-         }}>
+         <img src="/assets/images/background/talking.png" style={{ display: 'block', margin: '12px auto' }} />
-            {
+         <div style={{
-               [1, 2, 3].map((s) => {
+            height: 32, width: 88, textAlign: 'center', margin: 'auto', color: '#fff', backgroundColor: '#1859C1',
-                  return (
+            lineHeight: '32px'
-                     <div className="video_speed_option" style={{ textAlign: 'center', height: 24, lineHeight: '24px' }}>{s}.0 x</div>
+         }}>开始讲话</div>
-                  )
-               })
-            }
-         </div>
-         倍速
       </div>
    )
 }

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

@@ -11,6 +11,7 @@ const VideoPlay = ({ height, width }) => {
    const [isPlaying, setIsPlaying] = useState(false)
    const [operationState, setoperationState] = useState()
    const [voiceDisY, setVoiceDisY] = useState(0)
+   const [resolution, setResolution] = useState('sd') // 标清 sd  高清 hd
 
    const changeSelectState = (key) => {
       const nextOperationState = JSON.parse(JSON.stringify(operationState))
@@ -107,7 +108,7 @@ const VideoPlay = ({ height, width }) => {
 
    return (
       <>
-         <div style={{ height: height || '100%', width: width || '100%' }}>
+         <div className="vcmp_videoplay" style={{ height: height || '100%', width: width || '100%' }}>
             <div id="vcmp_videoplay" style={{ position: 'relative', display: 'flex', height: '100%', width: '100%' }}>
                {/* 顶部信息 */}
                <VideoHeader operationState={operationState} changeSelectState={changeSelectState} setoperationState={setoperationState} />
@@ -122,6 +123,7 @@ const VideoPlay = ({ height, width }) => {
                <VideoOperation
                   operationState={operationState} operation={operation}
                   voiceDisY={voiceDisY} setVoiceDisY={setVoiceDisY}
+                  resolution={resolution} setResolution={setResolution}
                />
             </div>
 

code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.less

@@ -1,3 +1,9 @@
+.vcmp_videoplay {
+   .semi-datepicker {
+      background-color: #fff;
+   }
+}
+
 .video_speed_but:hover {
    .video_speed_options {
       display: block;

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

@@ -5,7 +5,7 @@ import { Button, Modal, } from "@douyinfe/semi-ui";
 import VideoPlay from './videoPlay'
 import './videoPlayModal.less';
 
-const VideoPlayModal = ({ visible }) => {
+const VideoPlayModal = ({ visible, close }) => {
 
    return (
       <Modal
@@ -15,6 +15,7 @@ const VideoPlayModal = ({ visible }) => {
          size={'large'}
          style={{}}
          bodyStyle={{}}
+         onCancel={() => { close() }}
          className="videoModal"
       >
          <VideoPlay height={460} />