diff --git a/code/VideoAccess-VCMP/web/client/assets/images/background/warning.png b/code/VideoAccess-VCMP/web/client/assets/images/background/warning.png new file mode 100644 index 0000000..906fdf5 Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/background/warning.png differ diff --git a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/VideoOperationTime.jsx b/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/VideoOperationTime.jsx new file mode 100644 index 0000000..797f1f4 --- /dev/null +++ b/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 ( +
+
+ +
+
+ + + 最长时间跨度不超过72小时 + + + + + + + +
+
+ ) +} + +function mapStateToProps (state) { + const { auth } = state; + return { + user: auth.user, + }; +} + +export default connect(mapStateToProps)(VideoOperationTime); \ No newline at end of file diff --git a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperation.jsx b/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperation.jsx index cd7eade..83c185b 100644 --- a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperation.jsx +++ b/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 }) : '' : '' } + { + showTimeSelect ? + { setShowTimeSelect(false) }} /> + : '' + } {/* 下方操作 */}
-
时间设置
+
{ + setShowTimeSelect(!showTimeSelect) + }}>时间设置
: @@ -63,8 +79,11 @@ const VideoOperation = ({ operationState, operation, voiceDisY, setVoiceDisY }) }
-
标清
-
高清
+ { + resolution == 'sd' ? +
标清
: +
高清
+ }
: '' } diff --git a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperationTalk.jsx b/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperationTalk.jsx index dd4e0d5..9827edb 100644 --- a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperationTalk.jsx +++ b/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 ( -
-
- { - [1, 2, 3].map((s) => { - return ( -
{s}.0 x
- ) - }) - } -
- 倍速 +
+ +
开始讲话
) } diff --git a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx b/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx index 4c5662c..5ddbec4 100644 --- a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx +++ b/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 ( <> -
+
{/* 顶部信息 */} @@ -122,6 +123,7 @@ const VideoPlay = ({ height, width }) => {
diff --git a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.less b/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.less index 3be1780..43e19bf 100644 --- a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.less +++ b/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; diff --git a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlayModal.jsx b/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlayModal.jsx index 6f9c894..c76fc85 100644 --- a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlayModal.jsx +++ b/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 ( { size={'large'} style={{}} bodyStyle={{}} + onCancel={() => { close() }} className="videoModal" >