Browse Source

播放组件的修改

release_1.1.1
wenlele 3 years ago
parent
commit
3836ddde90
  1. 10
      code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperation.jsx
  2. 6
      code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperationCloudControl.jsx
  3. 4
      code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperationTalk.jsx
  4. 84
      code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx
  5. 7
      code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.less
  6. 13
      code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlayModal.jsx
  7. 9
      code/VideoAccess-VCMP/web/client/src/components/videoPlayer/voiceHeader.jsx
  8. 5
      code/VideoAccess-VCMP/web/client/src/index.less
  9. 4
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/sideSheet.jsx
  10. 1
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx
  11. 36
      code/VideoAccess-VCMP/web/client/src/sections/monitor/containers/videoPlayCross.jsx

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

@ -24,7 +24,8 @@ const VideoOperation = ({
play, pause, closeSound, openSound, play, pause, closeSound, openSound,
isPlaying, isPlaying,
videoObj, videoObj,
setYingshiPrepare, yingshiPrepareRef setYingshiPrepare, yingshiPrepareRef,
slideDown,
}) => { }) => {
const [showTimeSelect, setShowTimeSelect] = useState(false) const [showTimeSelect, setShowTimeSelect] = useState(false)
@ -46,6 +47,7 @@ const VideoOperation = ({
} }
const histroySelected = operationState && operationState.histroy.select const histroySelected = operationState && operationState.histroy.select
return ( return (
<> <>
{ {
@ -66,10 +68,10 @@ const VideoOperation = ({
: '' : ''
} }
{/* 下方操作 */} {/* 下方操作 */}
<div style={{ <div className={slideDown == 'true' ? 'animation' : ""} style={{
height: histroySelected ? 44 : 42, lineHeight: `${histroySelected ? 44 : 42}px`, height: histroySelected ? 44 : 42, lineHeight: `${histroySelected ? 44 : 42}px`,
background: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%)', padding: '0 12px', background: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%)', padding: '0 12px',
position: 'absolute', bottom: 0, width: '100%', zIndex: 99, color: '#fff', position: 'absolute', bottom: slideDown == 'true' ? -42 : 0, width: '100%', zIndex: 99, color: '#fff',
}}> }}>
{ {
histroySelected && histroyTime.length ? histroySelected && histroyTime.length ?
@ -120,7 +122,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={p.click} onClick={(e) => { p.click(e) }}
/> />
}) : '' }) : ''
} }

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

@ -14,11 +14,12 @@ const VideoOperationCloudControl = ({
gbptz(ac, videoObj, iotVideoServer) gbptz(ac, videoObj, iotVideoServer)
} }
} }
const vcmpVideo = document.getElementById('vcmp_videoplay')?.offsetHeight;
console.log(vcmpVideo);
return ( return (
<div style={{ <div style={{
position: 'absolute', top: 'calc(50% - 105px)', left: 'calc(50% - 125px)', position: 'absolute', top: 'calc(50% - 105px)', left: 'calc(50% - 125px)',
width: 210, height: 250, backgroundColor: '#00000014', borderRadius: 68 width: 210, height: 250, backgroundColor: '#00000014', borderRadius: 68, transform: `scale(${vcmpVideo / 400 > 2.5 ? 2.5 : vcmpVideo / 400})`,
}}> }}>
<div style={{ <div style={{
height: 148, width: 148, borderRadius: '100%', backgroundColor: '#2F53EA72', margin: '12px auto 18px', height: 148, width: 148, borderRadius: '100%', backgroundColor: '#2F53EA72', margin: '12px auto 18px',
@ -81,6 +82,7 @@ const VideoOperationCloudControl = ({
} }
</div> </div>
) )
} }
function mapStateToProps (state) { function mapStateToProps (state) {

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

@ -57,11 +57,13 @@ const VideoOperationTalk = ({
} }
} }
} }
const vcmpVideo = document.getElementById('vcmp_videoplay')?.offsetHeight;
console.log(vcmpVideo);
return ( return (
<div style={{ <div style={{
position: 'absolute', top: 'calc(50% - 88px)', left: 'calc(50% - 156px)', position: 'absolute', top: 'calc(50% - 88px)', left: 'calc(50% - 156px)',
width: 312, height: 186, backgroundColor: '#000000A5', width: 312, height: 186, backgroundColor: '#000000A5', transform: `scale(${vcmpVideo / 400 > 1.5 ? 1.5 : vcmpVideo / 400})`,
}}> }}>
<img src={`/assets/images/background/${recordState == RecordState.START ? 'talking' : 'talk'}.png`} style={{ display: 'block', margin: '12px auto' }} /> <img src={`/assets/images/background/${recordState == RecordState.START ? 'talking' : 'talk'}.png`} style={{ display: 'block', margin: '12px auto' }} />
<div <div

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

@ -18,9 +18,13 @@ const VideoPlay = ({
height, width, containerId = 'myPlayer', height, width, containerId = 'myPlayer',
// playUrl, // playUrl,
name, name,
global,
videoStyle,
changeData,
videoObj, videoObj,
sizeWh,
slideDown, //
IsSize, //16:9
// videoObj = { // videoObj = {
// type: 'yingshi', // type: 'yingshi',
// audio: false, // audio: false,
@ -44,7 +48,8 @@ const VideoPlay = ({
// }, // },
// //
iotVideoServer iotVideoServer,
local, //
}) => { }) => {
const [jessibuca, setjessibuca] = useState(null) const [jessibuca, setjessibuca] = useState(null)
const [isPlaying, setIsPlaying] = useState(false) const [isPlaying, setIsPlaying] = useState(false)
@ -55,7 +60,10 @@ const VideoPlay = ({
const [histroyTime, setHistroyTime] = useState([]) const [histroyTime, setHistroyTime] = useState([])
const [histroyBegain, setHistroyBegain] = useState() const [histroyBegain, setHistroyBegain] = useState()
const [roll, setRoll] = useState()// const [roll, setRoll] = useState()//
const [size, setSize] = useState(sizeWh) //
const [resolution, setResolution] = useState('sd') // sd hd const [resolution, setResolution] = useState('sd') // sd hd
// const [frequency, setFrequency] = useState(true)
// ifream // ifream
const [yingshiPrepare, setYingshiPrepare] = useState('') const [yingshiPrepare, setYingshiPrepare] = useState('')
@ -69,6 +77,11 @@ const VideoPlay = ({
setRoll(false) setRoll(false)
}, [resolution]); }, [resolution]);
useEffect(() => {
setResolution(changeData?.hdChecked ? 'hd' : 'sd')
}, [changeData?.hdChecked])
const changeSelectState = (key) => { const changeSelectState = (key) => {
if (videoObj.type == 'yingshi' && yingshiPrepareRef.current) { if (videoObj.type == 'yingshi' && yingshiPrepareRef.current) {
return return
@ -104,7 +117,8 @@ const VideoPlay = ({
}, { }, {
key: 'talk', key: 'talk',
hide: !(videoObj.type == 'yingshi'), hide: !(videoObj.type == 'yingshi'),
click: () => { click: (e) => {
console.log(e);
changeSelectState('talk') changeSelectState('talk')
} }
}, { }, {
@ -115,6 +129,7 @@ const VideoPlay = ({
} }
changeSelectState('fullScreen') changeSelectState('fullScreen')
let player = document.getElementById('vcmp_videoplay') let player = document.getElementById('vcmp_videoplay')
console.log(player);
if (screenfull.isEnabled) { if (screenfull.isEnabled) {
screenfull.toggle(player); screenfull.toggle(player);
} }
@ -158,7 +173,6 @@ const VideoPlay = ({
// ifream // ifream
const listenYingshiMessage = async (e) => { const listenYingshiMessage = async (e) => {
const { data, origin } = e const { data, origin } = e
console.log(e);
if (origin !== 'https://open.ys7.com') return if (origin !== 'https://open.ys7.com') return
if (data.type == "handleSuccess") { if (data.type == "handleSuccess") {
setRoll(true) setRoll(true)
@ -306,13 +320,48 @@ const VideoPlay = ({
} }
} }
useEffect(() => {
if (local) {
//
const VideoLocal = document.getElementById('video_local')
setSize({ parentWidth: VideoLocal?.clientWidth, parentHeight: '100%', width: width, height: height })
} else {
setSize(sizeWh)
}
}, [sizeWh])
useEffect(() => {
if (size?.width || size?.height) {
// if (size?.parentWidth >= size?.width && size?.parentHeight >= size?.height) {
if (size?.width && size?.height) {
if (size?.height / size?.width < 0.55 || size?.height / size?.width > 0.57) {
if (size?.width / 16 > size?.height / 9) {
setSize({ ...size, width: (size?.height / 9) * 16, })
} else {
setSize({ ...size, height: (size?.width / 16) * 9 })
}
}
} else if (size?.width) {
setSize({ ...size, height: (size?.width / 16) * 9, })
} else if (size?.height) {
setSize({ ...size, width: (size?.height / 9) * 16, })
}
// } else {
// setSize({ ...size, width: size?.parentWidth, height: size?.parentHeight })
// }
} else {
if (size && size?.width / 16 > size?.height / 9) {
setSize({ ...size, height: size?.parentHeight })
} else {
setSize({ ...size, width: size?.parentWidth, })
}
}
}, [size])
return ( return (
<> <>
<div className="vcmp_videoplay" style={{ height: height ? height : '100%', width: width || '100%', overflow: 'hidden' }}> <div className="vcmp_videoplay" style={{ width: IsSize == 'true' ? size?.parentWidth : width || '100%', height: IsSize == 'true' ? size?.parentHeight : height || '100%', backgroundColor: 'black', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center', }}>
<div id="vcmp_videoplay" style={{ position: 'relative', display: 'flex', height: '100%', width: '100%' }}> <div id="vcmp_videoplay" style={{ position: 'relative', height: IsSize == 'true' ? size?.height : height || '100%', width: IsSize == 'true' ? size?.width : width || '100%', minWidth: 400, minHeight: 225, overflow: 'hidden' }}>
{/* 顶部信息 */} {/* 顶部信息 */}
<VideoHeader {<VideoHeader
operationState={operationState} changeSelectState={changeSelectState} operationState={operationState} changeSelectState={changeSelectState}
histroyTime={histroyTime} histroyTime={histroyTime}
setoperationState={setoperationState} name={name} setoperationState={setoperationState} name={name}
@ -323,12 +372,14 @@ const VideoPlay = ({
} }
setProcessDisX={setProcessDisX} setProcessDisX={setProcessDisX}
content={videoObj.content} content={videoObj.content}
/> videoStyle={videoStyle}
/>}
{/* 视频内容 */} {/* 视频内容 */}
{
videoObj.type == 'yingshi' ? {videoObj.type == 'yingshi' ?
<iframe <iframe
frameBorder="0" frameBorder="0"
allowFullScreen='true'
id={containerId} id={containerId}
src={ src={
`${yingshiUrl}?audio=${videoObj.audio && operationState && !operationState.histroy.select ? '1' : '0'}&url=${operationState && operationState.histroy.select && histroyBegain ? `${videoObj.replayUrl}?begin=${moment(histroyBegain).format("YYYYMMDDHHmmss")}&end=${moment(histroyTime[1]).format("YYYYMMDDHHmmss")}` : resolution == 'sd' ? videoObj.playUrlSd : videoObj.playUrlHd}&autoplay=${'1'}&accessToken=${videoObj.yingshiToken}` `${yingshiUrl}?audio=${videoObj.audio && operationState && !operationState.histroy.select ? '1' : '0'}&url=${operationState && operationState.histroy.select && histroyBegain ? `${videoObj.replayUrl}?begin=${moment(histroyBegain).format("YYYYMMDDHHmmss")}&end=${moment(histroyTime[1]).format("YYYYMMDDHHmmss")}` : resolution == 'sd' ? videoObj.playUrlSd : videoObj.playUrlHd}&autoplay=${'1'}&accessToken=${videoObj.yingshiToken}`
@ -337,7 +388,6 @@ const VideoPlay = ({
// {width: 400px;height: 300px;} // {width: 400px;height: 300px;}
width={'100%'} width={'100%'}
height={'100%'} height={'100%'}
allowFullScreen
wmode="transparent" wmode="transparent"
style={{ pointerEvents: 'none' }} style={{ pointerEvents: 'none' }}
/> : /> :
@ -346,11 +396,12 @@ const VideoPlay = ({
style={{ style={{
height: '100%', width: '100%' height: '100%', width: '100%'
}}> }}>
</div> </div>
} }
{/* 下方操作栏 */} {/* 下方操作栏 */}
{/* 显示操作功能条件(宽高) */}
{size?.parentWidth > 400 ?
<VideoOperation <VideoOperation
operationState={operationState} operation={operation} operationState={operationState} operation={operation}
voiceDisY={voiceDisY} setVoiceDisY={setVoiceDisY} voiceDisY={voiceDisY} setVoiceDisY={setVoiceDisY}
@ -364,7 +415,9 @@ const VideoPlay = ({
videoObj={videoObj} videoObj={videoObj}
setYingshiPrepare={setYingshiPrepare} setYingshiPrepare={setYingshiPrepare}
yingshiPrepareRef={yingshiPrepareRef} yingshiPrepareRef={yingshiPrepareRef}
/> slideDown={slideDown}
/> : ""
}
</div> </div>
</div> </div>
@ -374,6 +427,7 @@ const VideoPlay = ({
function mapStateToProps (state) { function mapStateToProps (state) {
const { auth, global } = state; const { auth, global } = state;
console.log(global);
return { return {
user: auth.user, user: auth.user,
iotVideoServer: global.iotVideoServer, iotVideoServer: global.iotVideoServer,

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

@ -37,3 +37,10 @@
.video_process_time { .video_process_time {
display: none; display: none;
} }
#vcmp_videoplay:hover{
.animation{
transform: translateY(-40px);
}
}

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

@ -18,7 +18,18 @@ const VideoPlayModal = ({ visible, close, videoObj, name }) => {
onCancel={() => { close() }} onCancel={() => { close() }}
className="videoModal" className="videoModal"
> >
<VideoPlay height={460} videoObj={videoObj} name={name} /> <div id="video_local" style={{ width: '100%' }}>
<VideoPlay sizeWh={{
width: '100%',
height: 460,
parentWidth: '100%',
parentHeight: '100%',
}}
videoObj={videoObj}
name={name}
height={460}
local={true} />
</div>
</Modal> </Modal>
) )
} }

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

@ -8,7 +8,7 @@ import './videoPlay.less';
const timeFormat = 'YYYY-MM-DD HH:mm:ss' const timeFormat = 'YYYY-MM-DD HH:mm:ss'
const VideoHeader = ({ operationState, changeSelectState, setProcessDisX, name, showTime, histroyTime,content,roll }) => { const VideoHeader = ({ operationState, changeSelectState, setProcessDisX, name, showTime, histroyTime, content, roll, videoStyle }) => {
const time = useRef(moment(showTime || undefined)) const time = useRef(moment(showTime || undefined))
const upTimeInterval = useRef(null) const upTimeInterval = useRef(null)
const [showTime_, setShowTime] = useState(' ') const [showTime_, setShowTime] = useState(' ')
@ -53,16 +53,17 @@ const VideoHeader = ({ operationState, changeSelectState, setProcessDisX, name,
updateTime() updateTime()
}, [showTime]) }, [showTime])
const vcmp_videoplay = document.getElementById('vcmp_videoplay')?.clientHeight
return ( return (
<div> <div>
{roll ? {roll ?
<div style={{ <div style={{
height: 42, lineHeight: '42px', background: '#00000026', height: '12%', lineHeight: `${vcmp_videoplay * 0.12 > 42 ? 42 : vcmp_videoplay * 0.12 < 30 ? 30 : vcmp_videoplay * 0.12}px`, background: videoStyle == 'true' ? '#467ACD' : '#00000026', maxHeight: 42, minHeight: 30,
position: 'absolute', width: '100%', zIndex: 99, position: 'absolute', width: '100%', zIndex: 99,
color: '#fff' color: '#fff'
}}> }}>
<Row> <Row>
<Col span={9} style={{ <Col span={videoStyle == 'true' ? 0 : 9} style={{
backgroundImage: 'url(/assets/images/background/videoPlayBg.png)', backgroundImage: 'url(/assets/images/background/videoPlayBg.png)',
backgroundSize: '100% 100%', backgroundSize: '100% 100%',
backgroundRepeat: 'no-repeat', backgroundRepeat: 'no-repeat',
@ -78,7 +79,7 @@ const VideoHeader = ({ operationState, changeSelectState, setProcessDisX, name,
} }
{showTime_} {name} {showTime_} {name}
</Col> </Col>
<Col span={15} style={{}}> <Col span={videoStyle == 'true' ? 24 : 15} style={{}}>
<div style={{ paddingRight: 12 }}> <div style={{ paddingRight: 12 }}>
<TextScroll content={content || []} duration={6} /> <TextScroll content={content || []} duration={6} />
</div> </div>

5
code/VideoAccess-VCMP/web/client/src/index.less

@ -15,7 +15,10 @@ body {
margin: 0; margin: 0;
height: 100%; height: 100%;
width: 100%; width: 100%;
overflow: hidden;
#App{
height: 100%;
}
a:link { a:link {
text-decoration: none; text-decoration: none;
color: unset color: unset

4
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/sideSheet.jsx

@ -162,8 +162,8 @@ function SideSheets (props) {
} }
}); });
const statusNvr = nvrDetails.gbNvr const statusNvr = nvrDetails?.gbNvr
const statusCamera = nvrDetails.gbCamera const statusCamera = nvrDetails?.gbCamera
console.log(); console.log();
function colorStatus (data) { function colorStatus (data) {
switch (data) { switch (data) {

1
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx

@ -98,7 +98,6 @@ const NvrHeader = (props) => {
title: "设备名称", title: "设备名称",
dataIndex: "name", dataIndex: "name",
render: (_, r, index) => { render: (_, r, index) => {
console.log(r);
return r.name return r.name
}, },
}, },

36
code/VideoAccess-VCMP/web/client/src/sections/monitor/containers/videoPlayCross.jsx

@ -3,45 +3,65 @@ import { connect } from 'react-redux';
import qs from "qs"; import qs from "qs";
import { VideoPlay } from '$components' import { VideoPlay } from '$components'
import '../style.less' import '../style.less'
import { useRef } from 'react';
const VideoPlayCross = (props) => { const VideoPlayCross = (props) => {
const [videoParams, setVideoParams] = useState(null) const [videoParams, setVideoParams] = useState(null)
const [sizeWh, setSizeWh] = useState()
const viideoData = useRef(videoParams)
useEffect(() => { useEffect(() => {
console.log(props); console.log(props);
if (props.location.search) { if (props.location.search) {
decodeURIComponent(props.location.search)
const params = qs.parse(props.location.search.slice(1)) const params = qs.parse(props.location.search.slice(1))
if (params.videoObj) { if (params.videoObj) {
console.log(params.videoObj);
// params.videoObj = (new Function("return " + params.videoObj))() // params.videoObj = (new Function("return " + params.videoObj))()
decodeURIComponent(params.videoObj)
params.videoObj = JSON.parse(params.videoObj) params.videoObj = JSON.parse(params.videoObj)
params.height = JSON.parse(params.height) // params.height = JSON.parse(params.height)
setVideoParams(params) setVideoParams(params)
return viideoData.current = params
} }
} }
console.log(videoParams);
function messageListen (e) { function messageListen (e) {
// //
const { data } = e const { data } = e
if (data && data.action) { if (data && data.action) {
if (data.action == 'init_video') { if (data.action == 'init_video' || data.action == 'epidemic_video') {
setVideoParams(data.params) setVideoParams({ ...(viideoData.current || {}), ...data.params })
} }
} }
} }
const resize_ = () => {
const params = qs.parse(props.location.search.slice(1))
// if (params.local) {
// //
// const VideoLocal = document.getElementById('video_local')
// setSizeWh({ parentWidth: VideoLocal?.clientWidth, parentHeight: '100%', width: width, height: height })
// } else {
if (params?.width || params?.height) {
setSizeWh({ parentWidth: document.body.clientWidth, parentHeight: document.body.clientHeight, width: params.width, height: params.height })
} else {
setSizeWh({ parentWidth: document.body.clientWidth, parentHeight: document.body.clientHeight, width: document.body.clientWidth, height: document.body.clientHeight })
}
// }
}
resize_()
if (window.parent) { if (window.parent) {
window.addEventListener('message', messageListen); window.addEventListener('message', messageListen);
} }
window.addEventListener('resize', resize_); //
return () => { return () => {
window.removeEventListener('message', messageListen); window.removeEventListener('message', messageListen);
window.removeEventListener('resize', resize_);
} }
}, []) }, [])
return ( return (
<> <>
{ {
videoParams && <VideoPlay {...videoParams} /> videoParams && <VideoPlay {...videoParams} sizeWh={sizeWh} />
} }
</> </>
) )

Loading…
Cancel
Save