From 6c71e1cf989a739e777015baa4deb7488b2010b7 Mon Sep 17 00:00:00 2001 From: wenlele Date: Wed, 31 Aug 2022 20:36:21 +0800 Subject: [PATCH] bug --- .../components/videoPlayer/videoOperation.jsx | 274 +++++++++--------- .../src/components/videoPlayer/videoPlay.jsx | 62 ++-- .../src/components/videoPlayer/videoPlay.less | 2 +- .../components/videoPlayer/voiceHeader.jsx | 182 ++++++------ .../openness/components/container.jsx | 1 - .../openness/components/videoScreen.jsx | 4 +- 6 files changed, 274 insertions(+), 251 deletions(-) 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 a5298ad..39b8b4a 100644 --- a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperation.jsx +++ b/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperation.jsx @@ -14,156 +14,156 @@ import { log } from "ezuikit-js"; const timeFormat = 'YYYY-MM-DD HH:mm:ss' const VideoOperation = ({ - ToastInCustom, - operationState, operation, - voiceDisY, setVoiceDisY, - processDisX, setProcessDisX, - isAdjustProcess, setIsAdjustProcess, - resolution, setResolution, - histroyTime, setHistroyTime, - histroyBegain, - play, pause, closeSound, openSound, - isPlaying, - videoObj, - setYingshiPrepare, yingshiPrepareRef, - slideDown, - player, - // setPlayer, - playState, + ToastInCustom, + operationState, operation, + voiceDisY, setVoiceDisY, + processDisX, setProcessDisX, + isAdjustProcess, setIsAdjustProcess, + resolution, setResolution, + histroyTime, setHistroyTime, + histroyBegain, + play, pause, closeSound, openSound, + isPlaying, + videoObj, + setYingshiPrepare, yingshiPrepareRef, + slideDown, + player, + // setPlayer, + playState, }) => { - const [showTimeSelect, setShowTimeSelect] = useState(false) + const [showTimeSelect, setShowTimeSelect] = useState(false) - const butStyle = { - border: '1px solid #fff', color: '#fff', padding: '0 10px', - display: 'flex', alignItems: 'center', height: '64%', marginLeft: 12, cursor: 'pointer', - position: 'relative' - } + const butStyle = { + border: '1px solid #fff', color: '#fff', padding: '0 10px', + display: 'flex', alignItems: 'center', height: '64%', marginLeft: 12, cursor: 'pointer', + position: 'relative' + } - const changeResolution = () => { - // if (yingshiPrepareRef.current) { - // return - // } - if (videoObj.type == 'yingshi') { - // yingshiPrepareRef.current = 'yingshi' - // setYingshiPrepare('play') - } + const changeResolution = () => { + // if (yingshiPrepareRef.current) { + // return + // } + if (videoObj.type == 'yingshi') { + // yingshiPrepareRef.current = 'yingshi' + // setYingshiPrepare('play') + } - console.log(player); - player.stop().then((res) => { - if (resolution == 'sd') { - player.play({ url: videoObj?.playUrlHd, options: { hd: true } }) - } else { - player.play({ url: videoObj?.playUrlSd, options: { hd: false } }) - } - playState=false - }) - setResolution(resolution == 'sd' ? 'hd' : 'sd') - // setPlayer({ url: resolution == 'sd' ? videoObj?.playUrlSd : videoObj?.playUrlHd }) - } + console.log(player); + player.stop().then((res) => { + if (resolution == 'sd') { + player.play({ url: videoObj?.playUrlHd, options: { hd: true } }) + } else { + player.play({ url: videoObj?.playUrlSd, options: { hd: false } }) + } + playState = false + }) + setResolution(resolution == 'sd' ? 'hd' : 'sd') + // setPlayer({ url: resolution == 'sd' ? videoObj?.playUrlSd : videoObj?.playUrlHd }) + } - const histroySelected = operationState && operationState.histroy.select + const histroySelected = operationState && operationState.histroy.select - return ( - <> - { - operationState ? - operationState?.control?.select ? - : - operationState.talk.select ? - : - '' : '' - } + return ( + <> + { + operationState ? + operationState?.control?.select ? + : + operationState.talk.select ? + : + '' : '' + } + { + showTimeSelect ? + { setShowTimeSelect(false) }} histroyTime={histroyTime} setHistroyTime={setHistroyTime} setProcessDisX={setProcessDisX} + /> + : '' + } + {/* 下方操作 */} +
{ - showTimeSelect ? - { setShowTimeSelect(false) }} histroyTime={histroyTime} setHistroyTime={setHistroyTime} setProcessDisX={setProcessDisX} - /> - : '' + histroySelected && histroyTime.length ? + : '' } - {/* 下方操作 */} -
- { - histroySelected && histroyTime.length ? - : '' - } -
- { - operationState ? - histroySelected ? - <> -
- { - videoObj.type != 'yingshi' ? - isPlaying ? - - : - : '' - } - - {histroyTime.length ? `${moment(histroyTime[0]).format(timeFormat)} / ${moment(histroyTime[1]).format(timeFormat)}` : ''} - -
-
- - { - videoObj.type != 'yingshi' ? - - : '' - } -
{ - setShowTimeSelect(!showTimeSelect) - }}>时间设置
-
- - : - <> -
- { - operationState ? - operation.map(p => { - if (p.hide) return null; - return { p.click(e) }} - /> - }) : '' - } -
-
- { - videoObj.playUrlSd && videoObj.playUrlHd ? - resolution == 'sd' ? -
标清
: -
高清
- : '' - } -
- : '' - } -
+ { + operationState ? + histroySelected ? + <> +
+ { + videoObj.type != 'yingshi' ? + isPlaying ? + + : + : '' + } + + {histroyTime.length ? `${moment(histroyTime[0]).format(timeFormat)} / ${moment(histroyTime[1]).format(timeFormat)}` : ''} + +
+
+ + { + videoObj.type != 'yingshi' ? + + : '' + } +
{ + setShowTimeSelect(!showTimeSelect) + }}>时间设置
+
+ + : + <> +
+ { + operationState ? + operation.map(p => { + if (p.hide) return null; + return { p.click(e) }} + /> + }) : '' + } +
+
+ { + videoObj.playUrlSd && videoObj.playUrlHd ? + resolution == 'sd' ? +
标清
: +
高清
+ : '' + } +
+ : '' + }
- - ) +
+ + ) } function mapStateToProps (state) { - const { auth } = state; - return { - user: auth.user, - }; + const { auth } = state; + return { + user: auth.user, + }; } export default connect(mapStateToProps)(VideoOperation); \ No newline at end of file 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 4807f9b..343e7fe 100644 --- a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx +++ b/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx @@ -16,7 +16,10 @@ const yingshiUrl = 'https://open.ys7.com/ezopen/h5/iframe' const yingshiCloseSoundKey = 'closeSound' const yingshiOpenSoundKey = 'openSound' - +let timings +let videoFront +let videoAfter +// let duration = moment.duration(videoAfter.diff(videoFront))._data.milliseconds; const VideoPlay = ({ height, width, containerId = 'myPlayer', // playUrl, @@ -65,7 +68,6 @@ const VideoPlay = ({ iotVideoServer, local, //是否本地调用视频 }) => { - // console.log(sizeWh); if (videoObj.type == 'yingshi') { videoObj = { ...videoObj, @@ -91,6 +93,7 @@ const VideoPlay = ({ const [resolution, setResolution] = useState('sd') // 标清 sd 高清 hd const [videoMask, setVideoMask] = useState(true) // 视频遮罩 const [disappear, setDisappear] = useState(false) // 视频消失 + const [disappears, setDisappears] = useState(false) // 视频消失 // 标记萤石操作中，等待ifream返回信息后清空 @@ -106,11 +109,33 @@ const VideoPlay = ({ const playState = useRef(false) //播放状态 const yingshiPlayer = useRef(null) + useEffect(() => { setRoll(false) }, [resolution]); + + useEffect(() => { + + if (timings) clearInterval(timings) + + if (disappear || !videoMask) { + let duration = moment.duration(videoAfter?.diff(videoFront))._data.milliseconds; + console.log(duration); + timings = setInterval(() => { + console.log(yingshiPlayer.current); + if (disappear && duration > 4000) { + // yingshiPlayer.current?.reSize(1, 1) + setVideoMask(true) + } + + }, duration > 4000 ? 0 : 4000 - duration) + + } + + }, [disappear, videoMask]) + useEffect(() => { setResolution(changeData?.hdChecked ? 'hd' : 'sd') if (player) { @@ -165,7 +190,7 @@ const VideoPlay = ({ key: 'fullScreen', click: () => { changeSelectState('fullScreen') - let videoplay = document.getElementsByClassName('vcmp_video' + videoObj.id) + let videoplay = document.getElementById("vcmp_videoplay" + videoObj.id) if (screenfull.isEnabled) { screenfull.toggle(videoplay); if (videoObj?.type == 'yingshi' && player) { @@ -210,13 +235,17 @@ const VideoPlay = ({ // 全屏状态监听 screenfull.on('change', (e) => { - console.log(e?.path[0]?.id); - if (e?.path[0]?.id == "vcmp_video" + videoObj.id) { + if (e?.path[0]?.id?.includes("vcmp_videoplay")) { if (screenfull.isFullscreen && operationRef.current && !operationRef.current['fullScreen'].select) { changeSelectState('fullScreen') } if (!screenfull.isFullscreen && operationRef.current && operationRef.current['fullScreen'].select) { changeSelectState('fullScreen') + console.log(yingshiPlayer.current); + if (yingshiPlayer.current) { + console.log(45648641); + // yingshiPlayer.current.reSize(size?.width, size?.height); + } } } }); @@ -301,7 +330,6 @@ const VideoPlay = ({ // }, err => {. // console.log(err); // }) - console.log(videoObj); const inviteRes_ = await request.get(`${iotVideoServer}/api/gb28181/invite?id=${videoObj.topSerialNo}&channel=${videoObj.serialNo}`) } catch (error) { console.log(error.response); @@ -329,7 +357,7 @@ const VideoPlay = ({ setjessibuca(jessibuca) play({ jessibuca }) } else { - + videoFront = new moment(); //验证前时间 const player = new EZUIKit.EZUIKitPlayer({ id: containerId, // 视频容器ID accessToken: videoObj?.yingshiToken, @@ -340,11 +368,12 @@ const VideoPlay = ({ setRoll(true) setVideoMask(false) playState.current = true - // setDisappear(true) - console.log(23154); + videoAfter = new moment(); //验证后时间 }, handleError: (e) => { //播放失败 console.log(e, '播放失败'); + videoAfter = new moment(); //验证后时间 + setDisappear(true) }, }) setPlayer(player) @@ -388,14 +417,11 @@ const VideoPlay = ({ } const setupSize = (data) => { - console.log(2222); - console.log(operationRef.current?.fullScreen.select); if (!operationRef.current?.fullScreen.select) { let containerWidth = sizeWh?.parentWidth //容器的宽高和视频的宽高 let containerHeight = sizeWh?.parentHeight let videoWidth = width || sizeWh?.width let videoHeight = height || sizeWh?.height - console.log(2222); if (IsSize == 'true') { if (containerWidth >= videoWidth && containerHeight >= videoHeight) { @@ -422,11 +448,7 @@ const VideoPlay = ({ player.reSize(videoWidth, videoHeight) } } else { - console.log(48978945); - console.log(player); if (videoObj.type == 'yingshi' && player?.pluginStatus) { - console.log(1111111); - console.log(videoWidth, videoHeight); player.reSize(videoWidth, videoHeight) } } @@ -440,8 +462,8 @@ const VideoPlay = ({ return ( <> -
-
{/* 顶部信息 */} +
+
} - {!disappear ?
: ''} - {videoMask ?
: ''} +
+ {videoMask ?
: ''} {/* 下方操作栏 */} {/* 显示操作功能条件（宽高） */} 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 78352f0..c6282a8 100644 --- a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.less +++ b/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.less @@ -38,7 +38,7 @@ display: none; } -#vcmp_videoplay:hover{ +.vcmp_video:hover{ .animation{ transform: translateY(-40px); } diff --git a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/voiceHeader.jsx b/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/voiceHeader.jsx index 6913843..2b653b6 100644 --- a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/voiceHeader.jsx +++ b/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/voiceHeader.jsx @@ -10,106 +10,106 @@ 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(' ') + 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 - ) + 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) } - setShowTime(time.current.format(timeFormat)) - } - upTime() - upTimeInterval.current = setInterval(upTime, 1000) - } + 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() + return () => { + if (upTimeInterval.current) { + clearInterval(upTimeInterval.current) + } + } + }, []) - useEffect(() => { - updateTime() - }, [showTime]) + useEffect(() => { + updateTime() + }, [showTime]) - const vcmp_videoplay = document.getElementsByClassName('vcmp_video'+videoObj.id)?.clientHeigh - const vcmp_videopla = document.getElementsByClassName('vcmp_video'+videoObj.id)?.clientWidth + const vcmp_videoplay = document.getElementById("vcmp_videoplay" + videoObj.id)?.clientHeight + const vcmp_videopla = document.getElementById("vcmp_videoplay" + videoObj.id)?.clientWidth - return ( -
- {roll && vcmp_videopla > 320 ? -
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' - }}> - - - { - operationState && operationState.histroy.select ? - <> - { - 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} - - -
- {content ? : ""} -
- - -
: ''} -
- ) + return ( +
+ {roll && vcmp_videopla > 320 ? +
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, + position: 'absolute', width: '100%', zIndex: 80, + color: '#fff' + }}> + + + { + operationState && operationState.histroy.select ? + <> + { + 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} + + +
+ {content && content?.length > 0 ? : ""} +
+ + +
: ''} +
+ ) } function mapStateToProps (state) { - const { auth } = state; - return { - user: auth.user, - }; + const { auth } = state; + return { + user: auth.user, + }; } export default connect(mapStateToProps)(VideoHeader); \ No newline at end of file diff --git a/code/VideoAccess-VCMP/web/client/src/sections/openness/components/container.jsx b/code/VideoAccess-VCMP/web/client/src/sections/openness/components/container.jsx index 4d13600..294dd77 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/openness/components/container.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/openness/components/container.jsx @@ -12,7 +12,6 @@ const Container = ({ videoObj, pageSize, showHeader, videoPlay, mould }) => { useEffect(() => { const resize_ = async () => { - console.log(document.getElementById('video' + videoObj.key).clientWidth); await setVideoWidth(document.getElementById('video' + videoObj.key).clientWidth) await setVideoHeight(document.getElementById('video' + videoObj.key).clientHeight) } diff --git a/code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.jsx b/code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.jsx index e47e922..2abce06 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.jsx @@ -220,7 +220,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s setSelectAll(true) } } - + }, [leftValue]) //树状勾选结果 useEffect(() => { @@ -421,6 +421,8 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s onChange={(e) => { // console.log(e); setLeftValue(e) + setPage(1) + pageRef.current = 1 }} onSelect={(e) => { // console.log(e);