free-sun
/
FS-IOT
15
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

bug

release_1.3.0
wenlele 2 years ago
parent
78a551d6c7
commit
6c71e1cf98
6 changed files with 274 additions and 251 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 274
      code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperation.jsx
  2. 62
      code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx
  3. 2
      code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.less
  4. 182
      code/VideoAccess-VCMP/web/client/src/components/videoPlayer/voiceHeader.jsx
  5. 1
      code/VideoAccess-VCMP/web/client/src/sections/openness/components/container.jsx
  6. 4
      code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.jsx

274
code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperation.jsx
View File

@ -14,156 +14,156 @@ import { log } from "ezuikit-js";
const timeFormat = 'YYYY-MM-DD HH:mm:ss' const timeFormat = 'YYYY-MM-DD HH:mm:ss'
const VideoOperation = ({ const VideoOperation = ({
ToastInCustom, ToastInCustom,
operationState, operation, operationState, operation,
voiceDisY, setVoiceDisY, voiceDisY, setVoiceDisY,
processDisX, setProcessDisX, processDisX, setProcessDisX,
isAdjustProcess, setIsAdjustProcess, isAdjustProcess, setIsAdjustProcess,
resolution, setResolution, resolution, setResolution,
histroyTime, setHistroyTime, histroyTime, setHistroyTime,
histroyBegain, histroyBegain,
play, pause, closeSound, openSound, play, pause, closeSound, openSound,
isPlaying, isPlaying,
videoObj, videoObj,
setYingshiPrepare, yingshiPrepareRef, setYingshiPrepare, yingshiPrepareRef,
slideDown, slideDown,
player, player,
// setPlayer, // setPlayer,
playState, playState,
}) => { }) => {
const [showTimeSelect, setShowTimeSelect] = useState(false) const [showTimeSelect, setShowTimeSelect] = useState(false)
const butStyle = { const butStyle = {
border: '1px solid #fff', color: '#fff', padding: '0 10px', border: '1px solid #fff', color: '#fff', padding: '0 10px',
display: 'flex', alignItems: 'center', height: '64%', marginLeft: 12, cursor: 'pointer', display: 'flex', alignItems: 'center', height: '64%', marginLeft: 12, cursor: 'pointer',
position: 'relative' position: 'relative'
} }
const changeResolution = () => { const changeResolution = () => {
// if (yingshiPrepareRef.current) { // if (yingshiPrepareRef.current) {
// return // return
// } // }
if (videoObj.type == 'yingshi') { if (videoObj.type == 'yingshi') {
// yingshiPrepareRef.current = 'yingshi' // yingshiPrepareRef.current = 'yingshi'
// setYingshiPrepare('play') // setYingshiPrepare('play')
} }
console.log(player); console.log(player);
player.stop().then((res) => { player.stop().then((res) => {
if (resolution == 'sd') { if (resolution == 'sd') {
player.play({ url: videoObj?.playUrlHd, options: { hd: true } }) player.play({ url: videoObj?.playUrlHd, options: { hd: true } })
} else { } else {
player.play({ url: videoObj?.playUrlSd, options: { hd: false } }) player.play({ url: videoObj?.playUrlSd, options: { hd: false } })
} }
playState=false playState = false
}) })
setResolution(resolution == 'sd' ? 'hd' : 'sd') setResolution(resolution == 'sd' ? 'hd' : 'sd')
// setPlayer({ url: resolution == 'sd' ? videoObj?.playUrlSd : videoObj?.playUrlHd }) // setPlayer({ url: resolution == 'sd' ? videoObj?.playUrlSd : videoObj?.playUrlHd })
} }
const histroySelected = operationState && operationState.histroy.select const histroySelected = operationState && operationState.histroy.select
return ( return (
<> <>
{ {
operationState ? operationState ?
operationState?.control?.select ? operationState?.control?.select ?
<VideoOperationCloudControl videoObj={videoObj} /> : <VideoOperationCloudControl videoObj={videoObj} /> :
operationState.talk.select ? operationState.talk.select ?
<VideoOperationTalk <VideoOperationTalk
videoObj={videoObj} videoObj={videoObj}
/> : /> :
'' : '' '' : ''
} }
{
showTimeSelect ?
<VideoOperationHistroyTime
close={() => { setShowTimeSelect(false) }} histroyTime={histroyTime} setHistroyTime={setHistroyTime} setProcessDisX={setProcessDisX}
/>
: ''
}
{/* 下方操作 */}
<div className={slideDown == 'true' ? 'animation' : ""} style={{
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',
position: 'absolute', bottom: slideDown == 'true' ? -42 : 0, width: '100%', zIndex: 99, color: '#fff',
}}>
{ {
showTimeSelect ? histroySelected && histroyTime.length ?
<VideoOperationHistroyTime <VideoOperationHistroyProcess
close={() => { setShowTimeSelect(false) }} histroyTime={histroyTime} setHistroyTime={setHistroyTime} setProcessDisX={setProcessDisX} processDisX={processDisX} setProcessDisX={setProcessDisX} histroyTime={histroyTime}
/> isAdjustProcess={isAdjustProcess} setIsAdjustProcess={setIsAdjustProcess}
: '' /> : ''
} }
{/* 下方操作 */} <div style={{
<div className={slideDown == 'true' ? 'animation' : ""} style={{ display: 'flex', justifyContent: 'space-between', height: '100%'
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',
position: 'absolute', bottom: slideDown == 'true' ? -42 : 0, width: '100%', zIndex: 99, color: '#fff',
}}> }}>
{ {
histroySelected && histroyTime.length ? operationState ?
<VideoOperationHistroyProcess histroySelected ?
processDisX={processDisX} setProcessDisX={setProcessDisX} histroyTime={histroyTime} <>
isAdjustProcess={isAdjustProcess} setIsAdjustProcess={setIsAdjustProcess} <div style={{ display: 'flex', alignItems: 'center' }}>
/> : '' {
} videoObj.type != 'yingshi' ?
<div style={{ isPlaying ?
display: 'flex', justifyContent: 'space-between', height: '100%' <IconPause style={{ cursor: 'pointer' }} onClick={pause} />
}}> : <IconPlay style={{ cursor: 'pointer' }} onClick={play} />
{ : ''
operationState ? }
histroySelected ? <span style={{ marginLeft: 12 }}>
<> {histroyTime.length ? `${moment(histroyTime[0]).format(timeFormat)} / ${moment(histroyTime[1]).format(timeFormat)}` : ''}
<div style={{ display: 'flex', alignItems: 'center' }}> </span>
{ </div>
videoObj.type != 'yingshi' ? <div style={{ display: 'flex', alignItems: 'center' }}>
isPlaying ? <VideoOperationVoice voiceDisY={voiceDisY} setVoiceDisY={setVoiceDisY} videoObj={videoObj} closeSound={closeSound} openSound={openSound} />
<IconPause style={{ cursor: 'pointer' }} onClick={pause} /> {
: <IconPlay style={{ cursor: 'pointer' }} onClick={play} /> videoObj.type != 'yingshi' ?
: '' <VideoOperationSpeed butStyle={butStyle} />
} : ''
<span style={{ marginLeft: 12 }}> }
{histroyTime.length ? `${moment(histroyTime[0]).format(timeFormat)} / ${moment(histroyTime[1]).format(timeFormat)}` : ''} <div style={butStyle} onClick={() => {
</span> setShowTimeSelect(!showTimeSelect)
</div> }}>时间设置</div>
<div style={{ display: 'flex', alignItems: 'center' }}> </div>
<VideoOperationVoice voiceDisY={voiceDisY} setVoiceDisY={setVoiceDisY} videoObj={videoObj} closeSound={closeSound} openSound={openSound} /> </>
{ :
videoObj.type != 'yingshi' ? <>
<VideoOperationSpeed butStyle={butStyle} /> <div style={{ display: 'flex', alignItems: 'center' }}>
: '' {
} operationState ?
<div style={butStyle} onClick={() => { operation.map(p => {
setShowTimeSelect(!showTimeSelect) if (p.hide) return null;
}}>时间设置</div> return <img
</div> 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) }}
<div style={{ display: 'flex', alignItems: 'center' }}> />
{ }) : ''
operationState ? }
operation.map(p => { </div>
if (p.hide) return null; <div style={{ display: 'flex', alignItems: 'center', userSelect: 'none' }}>
return <img {
src={`/assets/images/background/video-icon-${p.key}-${operationState[p.key].select ? 'select' : 'unselect'}.png`} videoObj.playUrlSd && videoObj.playUrlHd ?
height={18} resolution == 'sd' ?
style={{ marginRight: 24, cursor: 'pointer' }} <div style={butStyle} onClick={changeResolution}>标清</div> :
onClick={(e) => { p.click(e) }} <div style={butStyle} onClick={changeResolution}>高清</div>
/> : ''
}) : '' }
} </div>
</div> </> : ''
<div style={{ display: 'flex', alignItems: 'center', userSelect: 'none' }}> }
{
videoObj.playUrlSd && videoObj.playUrlHd ?
resolution == 'sd' ?
<div style={butStyle} onClick={changeResolution}>标清</div> :
<div style={butStyle} onClick={changeResolution}>高清</div>
: ''
}
</div>
</> : ''
}
</div>
</div> </div>
</> </div>
) </>
)
} }
function mapStateToProps (state) { function mapStateToProps (state) {
const { auth } = state; const { auth } = state;
return { return {
user: auth.user, user: auth.user,
}; };
} }
export default connect(mapStateToProps)(VideoOperation); export default connect(mapStateToProps)(VideoOperation);

62
code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx
View File

@ -16,7 +16,10 @@ const yingshiUrl = 'https://open.ys7.com/ezopen/h5/iframe'
const yingshiCloseSoundKey = 'closeSound' const yingshiCloseSoundKey = 'closeSound'
const yingshiOpenSoundKey = 'openSound' const yingshiOpenSoundKey = 'openSound'
let timings
let videoFront
let videoAfter
// let duration = moment.duration(videoAfter.diff(videoFront))._data.milliseconds;
const VideoPlay = ({ const VideoPlay = ({
height, width, containerId = 'myPlayer', height, width, containerId = 'myPlayer',
// playUrl, // playUrl,
@ -65,7 +68,6 @@ const VideoPlay = ({
iotVideoServer, iotVideoServer,
local, //是否本地调用视频 local, //是否本地调用视频
}) => { }) => {
// console.log(sizeWh);
if (videoObj.type == 'yingshi') { if (videoObj.type == 'yingshi') {
videoObj = { videoObj = {
...videoObj, ...videoObj,
@ -91,6 +93,7 @@ const VideoPlay = ({
const [resolution, setResolution] = useState('sd') // 标清 sd 高清 hd const [resolution, setResolution] = useState('sd') // 标清 sd 高清 hd
const [videoMask, setVideoMask] = useState(true) // 视频遮罩 const [videoMask, setVideoMask] = useState(true) // 视频遮罩
const [disappear, setDisappear] = useState(false) // 视频消失 const [disappear, setDisappear] = useState(false) // 视频消失
const [disappears, setDisappears] = useState(false) // 视频消失
// 标记萤石操作中，等待ifream返回信息后清空 // 标记萤石操作中，等待ifream返回信息后清空
@ -106,11 +109,33 @@ const VideoPlay = ({
const playState = useRef(false) //播放状态 const playState = useRef(false) //播放状态
const yingshiPlayer = useRef(null) const yingshiPlayer = useRef(null)
useEffect(() => { useEffect(() => {
setRoll(false) setRoll(false)
}, [resolution]); }, [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(() => { useEffect(() => {
setResolution(changeData?.hdChecked ? 'hd' : 'sd') setResolution(changeData?.hdChecked ? 'hd' : 'sd')
if (player) { if (player) {
@ -165,7 +190,7 @@ const VideoPlay = ({
key: 'fullScreen', key: 'fullScreen',
click: () => { click: () => {
changeSelectState('fullScreen') changeSelectState('fullScreen')
let videoplay = document.getElementsByClassName('vcmp_video' + videoObj.id) let videoplay = document.getElementById("vcmp_videoplay" + videoObj.id)
if (screenfull.isEnabled) { if (screenfull.isEnabled) {
screenfull.toggle(videoplay); screenfull.toggle(videoplay);
if (videoObj?.type == 'yingshi' && player) { if (videoObj?.type == 'yingshi' && player) {
@ -210,13 +235,17 @@ const VideoPlay = ({
// 全屏状态监听 // 全屏状态监听
screenfull.on('change', (e) => { screenfull.on('change', (e) => {
console.log(e?.path[0]?.id); if (e?.path[0]?.id?.includes("vcmp_videoplay")) {
if (e?.path[0]?.id == "vcmp_video" + videoObj.id) {
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) {
console.log(45648641);
// yingshiPlayer.current.reSize(size?.width, size?.height);
}
} }
} }
}); });
@ -301,7 +330,6 @@ const VideoPlay = ({
// }, err => {. // }, err => {.
// console.log(err); // console.log(err);
// }) // })
console.log(videoObj);
const inviteRes_ = await request.get(`${iotVideoServer}/api/gb28181/invite?id=${videoObj.topSerialNo}&channel=${videoObj.serialNo}`) const inviteRes_ = await request.get(`${iotVideoServer}/api/gb28181/invite?id=${videoObj.topSerialNo}&channel=${videoObj.serialNo}`)
} catch (error) { } catch (error) {
console.log(error.response); console.log(error.response);
@ -329,7 +357,7 @@ const VideoPlay = ({
setjessibuca(jessibuca) setjessibuca(jessibuca)
play({ jessibuca }) play({ jessibuca })
} else { } else {
videoFront = new moment(); //验证前时间
const player = new EZUIKit.EZUIKitPlayer({ const player = new EZUIKit.EZUIKitPlayer({
id: containerId, // 视频容器ID id: containerId, // 视频容器ID
accessToken: videoObj?.yingshiToken, accessToken: videoObj?.yingshiToken,
@ -340,11 +368,12 @@ const VideoPlay = ({
setRoll(true) setRoll(true)
setVideoMask(false) setVideoMask(false)
playState.current = true playState.current = true
// setDisappear(true) videoAfter = new moment(); //验证后时间
console.log(23154);
}, },
handleError: (e) => { //播放失败 handleError: (e) => { //播放失败
console.log(e, '播放失败'); console.log(e, '播放失败');
videoAfter = new moment(); //验证后时间
setDisappear(true)
}, },
}) })
setPlayer(player) setPlayer(player)
@ -388,14 +417,11 @@ const VideoPlay = ({
} }
const setupSize = (data) => { const setupSize = (data) => {
console.log(2222);
console.log(operationRef.current?.fullScreen.select);
if (!operationRef.current?.fullScreen.select) { if (!operationRef.current?.fullScreen.select) {
let containerWidth = sizeWh?.parentWidth //容器的宽高和视频的宽高 let containerWidth = sizeWh?.parentWidth //容器的宽高和视频的宽高
let containerHeight = sizeWh?.parentHeight let containerHeight = sizeWh?.parentHeight
let videoWidth = width || sizeWh?.width let videoWidth = width || sizeWh?.width
let videoHeight = height || sizeWh?.height let videoHeight = height || sizeWh?.height
console.log(2222);
if (IsSize == 'true') { if (IsSize == 'true') {
if (containerWidth >= videoWidth && containerHeight >= videoHeight) { if (containerWidth >= videoWidth && containerHeight >= videoHeight) {
@ -422,11 +448,7 @@ const VideoPlay = ({
player.reSize(videoWidth, videoHeight) player.reSize(videoWidth, videoHeight)
} }
} else { } else {
console.log(48978945);
console.log(player);
if (videoObj.type == 'yingshi' && player?.pluginStatus) { if (videoObj.type == 'yingshi' && player?.pluginStatus) {
console.log(1111111);
console.log(videoWidth, videoHeight);
player.reSize(videoWidth, videoHeight) player.reSize(videoWidth, videoHeight)
} }
} }
@ -440,8 +462,8 @@ const VideoPlay = ({
return ( return (
<> <>
<div className={'vcmp_videoplay' + videoObj.id + " my_vcmp_videoplay"} style={{ width: size?.parentWidth || '100%', height: size?.parentHeight || '100%', backgroundColor: 'black', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center', }}> <div className='vcmp_videoplay' style={{ width: size?.parentWidth || '100%', height: size?.parentHeight || '100%', backgroundColor: 'black', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center', }}>
<div id="vcmp_videoplay" className={'vcmp_video' + videoObj.id} style={{ position: 'relative', height: size?.height || '100%', width: size?.width || '100%', minWidth: 240, minHeight: 135, overflow: 'hidden' }}> {/* 顶部信息 */} <div id={"vcmp_videoplay" + videoObj.id} className="vcmp_video" style={{ position: 'relative', height: size?.height || '100%', width: size?.width || '100%', minWidth: 240, minHeight: 135, overflow: 'hidden' }}>
<VideoHeader <VideoHeader
operationState={operationState} changeSelectState={changeSelectState} operationState={operationState} changeSelectState={changeSelectState}
histroyTime={histroyTime} histroyTime={histroyTime}
@ -473,8 +495,8 @@ const VideoPlay = ({
// style={{ pointerEvents: 'none' }} // style={{ pointerEvents: 'none' }}
// /> // />
} }
{!disappear ? <div id={containerId} style={{ height: '100%', width: '100%', }}></div> : ''} <div id={containerId} style={{ height: '100%', width: '100%', }}></div>
{videoMask ? <div style={{ height: size?.height || '100%', width: size?.width || '100%', minWidth: 400, minHeight: 225, overflow: 'hidden', position: 'absolute', top: '0', left: '0', zIndex: 99, backgroundColor: 'rgba(255,255,255,0.65)' }}></div> : ''} {videoMask ? <div style={{ height: size?.height || '100%', width: size?.width || '100%', minWidth: 400, minHeight: 225, overflow: 'hidden', position: 'absolute', top: '0', left: '0', zIndex: 99, backgroundColor: 'black' }}></div> : ''}
{/* 下方操作栏 */} {/* 下方操作栏 */}
{/* 显示操作功能条件（宽高） */} {/* 显示操作功能条件（宽高） */}

2
code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.less
View File

@ -38,7 +38,7 @@
display: none; display: none;
} }
#vcmp_videoplay:hover{ .vcmp_video:hover{
.animation{ .animation{
transform: translateY(-40px); transform: translateY(-40px);
} }

182
code/VideoAccess-VCMP/web/client/src/components/videoPlayer/voiceHeader.jsx
View File

@ -10,106 +10,106 @@ import { log } from "ezuikit-js";
const timeFormat = 'YYYY-MM-DD HH:mm:ss' const timeFormat = 'YYYY-MM-DD HH:mm:ss'
const VideoHeader = ({ operationState, changeSelectState, setProcessDisX, name, videoObj, showTime, histroyTime, content, roll, videoStyle, player, resolution, playState }) => { const VideoHeader = ({ operationState, changeSelectState, setProcessDisX, name, videoObj, showTime, histroyTime, content, roll, videoStyle, player, resolution, playState }) => {
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(' ')
const updateTime = () => { const updateTime = () => {
if (!showTime) { if (!showTime) {
setShowTime('') setShowTime('')
clearInterval(upTimeInterval.current) clearInterval(upTimeInterval.current)
return return
} }
time.current = moment(showTime || undefined) time.current = moment(showTime || undefined)
if (upTimeInterval.current) { if (upTimeInterval.current) {
clearInterval(upTimeInterval.current) clearInterval(upTimeInterval.current)
} }
const upTime = () => { const upTime = () => {
time.current.add(1, 's') time.current.add(1, 's')
if (operationState && operationState.histroy.select) { if (operationState && operationState.histroy.select) {
// setProcessDisX(Math.random() * 300 + 100) // setProcessDisX(Math.random() * 300 + 100)
if (time.current.isSameOrAfter(histroyTime[1])) { if (time.current.isSameOrAfter(histroyTime[1])) {
clearInterval(upTimeInterval.current) 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
)
} }
setShowTime(time.current.format(timeFormat)) setProcessDisX(
} time.current.diff(moment(histroyTime[0]), 'seconds') / moment(histroyTime[1]).diff(moment(histroyTime[0]), 'seconds') * document.getElementById('process_point').parentElement.offsetWidth
upTime() )
upTimeInterval.current = setInterval(upTime, 1000) }
} setShowTime(time.current.format(timeFormat))
}
upTime()
upTimeInterval.current = setInterval(upTime, 1000)
}
useEffect(() => { useEffect(() => {
updateTime() updateTime()
return () => { return () => {
if (upTimeInterval.current) { if (upTimeInterval.current) {
clearInterval(upTimeInterval.current) clearInterval(upTimeInterval.current)
} }
} }
}, []) }, [])
useEffect(() => { useEffect(() => {
updateTime() updateTime()
}, [showTime]) }, [showTime])
const vcmp_videoplay = document.getElementsByClassName('vcmp_video'+videoObj.id)?.clientHeigh const vcmp_videoplay = document.getElementById("vcmp_videoplay" + videoObj.id)?.clientHeight
const vcmp_videopla = document.getElementsByClassName('vcmp_video'+videoObj.id)?.clientWidth const vcmp_videopla = document.getElementById("vcmp_videoplay" + videoObj.id)?.clientWidth
return ( return (
<div> <div>
{roll && vcmp_videopla > 320 ? {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' ? '#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: 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={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',
padding: '0 12px' padding: '0 12px'
}}> }}>
{ {
operationState && operationState.histroy.select ? operationState && operationState.histroy.select ?
<> <>
<IconReply style={{ marginRight: 12, cursor: 'pointer' }} onClick={() => { <IconReply style={{ marginRight: 12, cursor: 'pointer' }} onClick={() => {
changeSelectState('histroy') changeSelectState('histroy')
if (playState) { if (playState) {
player.stop().then(() => { player.stop().then(() => {
if (resolution == 'sd') { if (resolution == 'sd') {
player.play({ url: videoObj?.playUrlSd, }) player.play({ url: videoObj?.playUrlSd, })
} else { } else {
player.play({ url: videoObj?.playUrlHd, }) player.play({ url: videoObj?.playUrlHd, })
} }
playState = false playState = false
}) })
} else { } else {
player.play({ url: resolution == 'sd' ? videoObj?.playUrlSd : videoObj?.playUrlHd, }) player.play({ url: resolution == 'sd' ? videoObj?.playUrlSd : videoObj?.playUrlHd, })
} }
}} /> }} />
</> : '' </> : ''
} }
{showTime_} {name} {showTime_} {name}
</Col> </Col>
<Col span={videoStyle == 'true' ? 24 : 15} style={{}}> <Col span={videoStyle == 'true' ? 24 : 15} style={{}}>
<div style={{ paddingRight: 12 }}> <div style={{ paddingRight: 12 }}>
{content ? <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>
) )
} }
function mapStateToProps (state) { function mapStateToProps (state) {
const { auth } = state; const { auth } = state;
return { return {
user: auth.user, user: auth.user,
}; };
} }
export default connect(mapStateToProps)(VideoHeader); export default connect(mapStateToProps)(VideoHeader);

1
code/VideoAccess-VCMP/web/client/src/sections/openness/components/container.jsx
View File

@ -12,7 +12,6 @@ const Container = ({ videoObj, pageSize, showHeader, videoPlay, mould }) => {
useEffect(() => { useEffect(() => {
const resize_ = async () => { const resize_ = async () => {
console.log(document.getElementById('video' + videoObj.key).clientWidth);
await setVideoWidth(document.getElementById('video' + videoObj.key).clientWidth) await setVideoWidth(document.getElementById('video' + videoObj.key).clientWidth)
await setVideoHeight(document.getElementById('video' + videoObj.key).clientHeight) await setVideoHeight(document.getElementById('video' + videoObj.key).clientHeight)
} }

4
code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.jsx
View File

@ -220,7 +220,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
setSelectAll(true) setSelectAll(true)
} }
} }
}, [leftValue]) //树状勾选结果 }, [leftValue]) //树状勾选结果
useEffect(() => { useEffect(() => {
@ -421,6 +421,8 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
onChange={(e) => { onChange={(e) => {
// console.log(e); // console.log(e);
setLeftValue(e) setLeftValue(e)
setPage(1)
pageRef.current = 1
}} }}
onSelect={(e) => { onSelect={(e) => {
// console.log(e); // console.log(e);

Write Preview
Loading…
Cancel
Save