Browse Source

Merge branch 'dev_trial' of

release_1.3.0
wenlele 3 years ago
parent
commit
b50f9baca1
  1. 2
      code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperation.jsx
  2. 13
      code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperationHistroyProcess.jsx
  3. 27
      code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx
  4. 56
      code/VideoAccess-VCMP/web/client/src/components/videoPlayer/voiceHeader.jsx

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

@ -140,7 +140,7 @@ const VideoOperation = ({
src={`/assets/images/background/video-icon-${p.key}-${operationState[p.key].select ? 'select' : 'unselect'}.png`} src={`/assets/images/background/video-icon-${p.key}-${operationState[p.key].select ? 'select' : 'unselect'}.png`}
height={18} height={18}
style={{ marginRight: 24, cursor: 'pointer' }} style={{ marginRight: 24, cursor: 'pointer' }}
onClick={(e) => { p.click(e) }} onClick={(e) => { p.click() }}
/> />
}) : '' }) : ''
} }

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

@ -27,7 +27,8 @@ const videoOperationHistroyProcess = ({ processDisX, setProcessDisX, histroyTime
<div <div
style={{ style={{
height: 9, width: 9, borderRadius: '100%', backgroundColor: '#fff', 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' id='process_point'
className="video_process_but" className="video_process_but"
@ -71,13 +72,13 @@ const videoOperationHistroyProcess = ({ processDisX, setProcessDisX, histroyTime
className={"video_process_time"} className={"video_process_time"}
style={{ style={{
backgroundColor: '#0000007F', position: 'absolute', 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: left:
processDisX < 38 ? processDisX < 42 ?
-processDisX : -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
, ,
}}> }}>
{ {

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

@ -195,21 +195,22 @@ const VideoPlay = ({ dispatch, actions,
key: 'talk', key: 'talk',
hide: !(videoObj.type == 'yingshi'), hide: !(videoObj.type == 'yingshi'),
click: (e) => { click: (e) => {
console.log(e);
changeSelectState('talk') changeSelectState('talk')
} }
}, { }, {
key: 'fullScreen', key: 'fullScreen',
click: () => { click: (fullNoChange = false) => {
changeSelectState('fullScreen') changeSelectState('fullScreen')
let videoplay = document.getElementById("vcmp_videoplay" + videoObj.id) let videoplay = document.getElementById("vcmp_videoplay" + videoObj.id)
if (screenfull.isEnabled) { if (screenfull.isEnabled) {
if (!fullNoChange) {
screenfull.toggle(videoplay); screenfull.toggle(videoplay);
if (videoObj?.type == 'yingshi' && player) { }
if (videoObj?.type == 'yingshi' && (player || yingshiPlayer.current)) {
if (operationRef.current?.fullScreen.select) { if (operationRef.current?.fullScreen.select) {
player.reSize(screen.width, screen.height); (player || yingshiPlayer.current).reSize(screen.width, screen.height);
} else { } else {
player.reSize(size?.width, size?.height); (player || yingshiPlayer.current).reSize(size?.width, size?.height);
} }
} }
@ -248,20 +249,33 @@ const VideoPlay = ({ dispatch, actions,
// //
screenfull.on('change', (e) => { screenfull.on('change', (e) => {
let curFullElement = screenfull.element
if (curFullElement && curFullElement.id == 'vcmp_videoplay' + videoObj.id) {
if (e?.path[0]?.id?.includes("vcmp_videoplay")) { if (e?.path[0]?.id?.includes("vcmp_videoplay")) {
if (screenfull.isFullscreen && operationRef.current && !operationRef.current['fullScreen'].select) { if (screenfull.isFullscreen && operationRef.current && !operationRef.current['fullScreen'].select) {
changeSelectState('fullScreen') changeSelectState('fullScreen')
} }
if (!screenfull.isFullscreen && operationRef.current && operationRef.current['fullScreen'].select) { if (!screenfull.isFullscreen && operationRef.current && operationRef.current['fullScreen'].select) {
changeSelectState('fullScreen') changeSelectState('fullScreen')
console.log(yingshiPlayer.current);
if (yingshiPlayer.current) { if (yingshiPlayer.current) {
console.log(45648641); console.log(45648641);
// yingshiPlayer.current.reSize(size?.width, size?.height); // 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 resize_ = () => {
// const VideoLocal = document.getElementById('vcmp_videoplay') // const VideoLocal = document.getElementById('vcmp_videoplay')
// setSize({ parentWidth: VideoLocal?.clientWidth, parentHeight: VideoLocal?.clientHeight, width: VideoLocal?.clientWidth, height: VideoLocal?.clientHeight }) // setSize({ parentWidth: VideoLocal?.clientWidth, parentHeight: VideoLocal?.clientHeight, width: VideoLocal?.clientWidth, height: VideoLocal?.clientHeight })
@ -270,6 +284,7 @@ const VideoPlay = ({ dispatch, actions,
// if (local) { // if (local) {
// window.addEventListener('resize', resize_); // // window.addEventListener('resize', resize_); //
// } // }
return () => { return () => {
if (jessibuca) { if (jessibuca) {
jessibuca.destroy() jessibuca.destroy()

56
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 { IconReply } from '@douyinfe/semi-icons';
import TextScroll from '../textScroll' import TextScroll from '../textScroll'
import './videoPlay.less'; import './videoPlay.less';
import { log } from "ezuikit-js";
const timeFormat = 'YYYY-MM-DD HH:mm:ss' const timeFormat = 'YYYY-MM-DD HH:mm:ss'
@ -54,20 +53,41 @@ const VideoHeader = ({ operationState, changeSelectState, setProcessDisX, name,
updateTime() updateTime()
}, [showTime]) }, [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_videoplay = document.getElementById("vcmp_videoplay" + videoObj.id)?.clientHeight
const vcmp_videopla = document.getElementById('vcmp_videoplay' + videoObj.id)?.clientWidth const vcmp_videopla = document.getElementById('vcmp_videoplay' + videoObj.id)?.clientWidth
return ( return (
<div> <div>
{roll && vcmp_videopla > 320 ?
<div style={{ <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, position: 'absolute', width: '100%', zIndex: 80,
color: '#fff' color: '#fff'
}}> }}>
<Row> <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%', backgroundSize: '100% 100%',
backgroundRepeat: 'no-repeat', backgroundRepeat: 'no-repeat',
padding: '0 12px' padding: '0 12px'
@ -75,33 +95,21 @@ const VideoHeader = ({ operationState, changeSelectState, setProcessDisX, name,
{ {
operationState && operationState.histroy.select ? operationState && operationState.histroy.select ?
<> <>
<IconReply style={{ marginRight: 12, cursor: 'pointer' }} onClick={() => { <IconReply style={{ marginRight: 12, cursor: 'pointer' }} onClick={goBack} />
changeSelectState('histroy')
if (playState) {
videoFront = new moment(); //
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>
<Col span={videoStyle == 'true' ? 24 : 15} style={{}}> <Col span={histroyTime.length ? videoStyle == 'true' ? 21 : 15 : 24} style={{}}>
<div style={{ paddingRight: 12 }}> <div style={{ paddingRight: 12 }}>
{content && content?.length > 0 ? <TextScroll content={content || []} duration={6} videoObj={videoObj} /> : ""} {content && content?.length > 0 ? <TextScroll content={content || []} duration={6} videoObj={videoObj} /> : ""}
</div> </div>
</Col> </Col>
</Row> </Row>
</div> : ''} </div>
</div> </div>
) )
} }

Loading…
Cancel
Save