From fd38d78dfc343bd9b98ca80ed0b9a195131c12d9 Mon Sep 17 00:00:00 2001 From: "gao.zhiyuan" Date: Wed, 31 Aug 2022 21:27:07 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E8=A7=86=E9=A2=91=E5=85=A8=E5=B1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/videoPlayer/videoOperation.jsx | 2 +- .../src/components/videoPlayer/videoPlay.jsx | 47 ++++++++++++------- 2 files changed, 32 insertions(+), 17 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 39b8b4a..b889ef1 100644 --- a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperation.jsx +++ b/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperation.jsx @@ -137,7 +137,7 @@ const VideoOperation = ({ src={`/assets/images/background/video-icon-${p.key}-${operationState[p.key].select ? 'select' : 'unselect'}.png`} height={18} style={{ marginRight: 24, cursor: 'pointer' }} - onClick={(e) => { p.click(e) }} + onClick={(e) => { p.click() }} /> }) : '' } 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 343e7fe..dae0185 100644 --- a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx +++ b/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx @@ -183,21 +183,22 @@ const VideoPlay = ({ key: 'talk', hide: !(videoObj.type == 'yingshi'), click: (e) => { - console.log(e); changeSelectState('talk') } }, { key: 'fullScreen', - click: () => { + click: (fullNoChange = false) => { changeSelectState('fullScreen') let videoplay = document.getElementById("vcmp_videoplay" + videoObj.id) if (screenfull.isEnabled) { - screenfull.toggle(videoplay); - if (videoObj?.type == 'yingshi' && player) { + if (!fullNoChange) { + screenfull.toggle(videoplay); + } + if (videoObj?.type == 'yingshi' && (player || yingshiPlayer.current)) { if (operationRef.current?.fullScreen.select) { - player.reSize(screen.width, screen.height); + (player || yingshiPlayer.current).reSize(screen.width, screen.height); } else { - player.reSize(size?.width, size?.height); + (player || yingshiPlayer.current).reSize(size?.width, size?.height); } } @@ -235,20 +236,33 @@ const VideoPlay = ({ // 全屏状态监听 screenfull.on('change', (e) => { - 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); + let curFullElement = screenfull.element + if (curFullElement && curFullElement.id == 'vcmp_videoplay' + 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') + if (yingshiPlayer.current) { + console.log(45648641); + // yingshiPlayer.current.reSize(size?.width, size?.height); + } } } + } else { + setTimeout(() => { + if (operationRef.current.fullScreen.select) { + operation.find(cf => cf.key == 'fullScreen').click(true) + } + }, 0) } }); + + document.onkeydown = (e) => { + console.log(e.key); + } + // const resize_ = () => { // const VideoLocal = document.getElementById('vcmp_videoplay') // setSize({ parentWidth: VideoLocal?.clientWidth, parentHeight: VideoLocal?.clientHeight, width: VideoLocal?.clientWidth, height: VideoLocal?.clientHeight }) @@ -257,6 +271,7 @@ const VideoPlay = ({ // if (local) { // window.addEventListener('resize', resize_); //只要窗口殴大小发生像素变化就会触发 // } + return () => { if (jessibuca) { jessibuca.destroy() From 303239eea3f764b9099c98db958b0d75e2851666 Mon Sep 17 00:00:00 2001 From: "gao.zhiyuan" Date: Wed, 31 Aug 2022 22:10:37 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E5=8E=86=E5=8F=B2=E8=A7=86=E9=A2=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../videoOperationHistroyProcess.jsx | 13 +-- .../components/videoPlayer/voiceHeader.jsx | 95 ++++++++++--------- 2 files changed, 59 insertions(+), 49 deletions(-) diff --git a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperationHistroyProcess.jsx b/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperationHistroyProcess.jsx index 55851b4..1f7e296 100644 --- a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperationHistroyProcess.jsx +++ b/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperationHistroyProcess.jsx @@ -27,7 +27,8 @@ const videoOperationHistroyProcess = ({ processDisX, setProcessDisX, histroyTime
pointParentWidthRef.current - 4.5 ? - -38 - (38 - (pointParentWidthRef.current - 4.5 - processDisX)) : - -38 + processDisX + 42 > pointParentWidthRef.current - 4.5 ? + -42 - (42 - (pointParentWidthRef.current - 4.5 - processDisX)) : + -42 , }}> { 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 2b653b6..6b6b39d 100644 --- a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/voiceHeader.jsx +++ b/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,53 +53,63 @@ 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 (
- {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 ? : ""} -
- - -
: ''} +
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' + }}> + + 0 ? 'url(/assets/images/background/videoPlayBg.png)' : '', + backgroundSize: '100% 100%', + backgroundRepeat: 'no-repeat', + padding: '0 12px' + }}> + { + operationState && operationState.histroy.select ? + <> + + : '' + } + { + videoStyle == 'true' ? + '' : `${showTime_} ${name || ''}` + } + + +
+ {content && content?.length > 0 ? : ""} +
+ + +
) }