播放组件的修改

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

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

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

@@ -14,11 +14,12 @@ const VideoOperationCloudControl = ({
             gbptz(ac, videoObj, iotVideoServer)
         }
     }
-
+    const vcmpVideo = document.getElementById('vcmp_videoplay')?.offsetHeight;
+    console.log(vcmpVideo);
     return (
             <div style={{
                 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={{
                     height: 148, width: 148, borderRadius: '100%', backgroundColor: '#2F53EA72', margin: '12px auto 18px',
@@ -81,6 +82,7 @@ const VideoOperationCloudControl = ({
                 }
         </div>
     )
+
 }
 
 function mapStateToProps (state) {

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 (
         <div style={{
             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' }} />
             <div

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

@@ -18,9 +18,13 @@ const VideoPlay = ({
     height, width, containerId = 'myPlayer',
     // playUrl,
     name,
-
+    global,
+    videoStyle,
+    changeData,
     videoObj,
-
+    sizeWh,
+    slideDown, //视频下方操作是否滑动
+    IsSize, //是否按照16:9的比例播放
     // videoObj = {
     //    type: 'yingshi',
     //    audio: false,
@@ -44,7 +48,8 @@ const VideoPlay = ({
     // },
 
     //
-    iotVideoServer
+    iotVideoServer,
+    local, //是否本地调用视频
 }) => {
     const [jessibuca, setjessibuca] = useState(null)
     const [isPlaying, setIsPlaying] = useState(false)
@@ -55,7 +60,10 @@ const VideoPlay = ({
     const [histroyTime, setHistroyTime] = useState([])
     const [histroyBegain, setHistroyBegain] = useState()
     const [roll, setRoll] = useState()//滚动备注
+    const [size, setSize] = useState(sizeWh) //视频本身和父级尺寸
     const [resolution, setResolution] = useState('sd') // 标清 sd  高清 hd
+    // const [frequency, setFrequency] = useState(true)
+
 
     // 标记萤石操作中，等待ifream返回信息后清空
     const [yingshiPrepare, setYingshiPrepare] = useState('')
@@ -69,6 +77,11 @@ const VideoPlay = ({
         setRoll(false)
     }, [resolution]);
 
+
+    useEffect(() => {
+        setResolution(changeData?.hdChecked ? 'hd' : 'sd')
+    }, [changeData?.hdChecked])
+
     const changeSelectState = (key) => {
         if (videoObj.type == 'yingshi' && yingshiPrepareRef.current) {
             return
@@ -104,7 +117,8 @@ const VideoPlay = ({
     }, {
         key: 'talk',
         hide: !(videoObj.type == 'yingshi'),
-        click: () => {
+        click: (e) => {
+            console.log(e);
             changeSelectState('talk')
         }
     }, {
@@ -115,6 +129,7 @@ const VideoPlay = ({
             }
             changeSelectState('fullScreen')
             let player = document.getElementById('vcmp_videoplay')
+            console.log(player);
             if (screenfull.isEnabled) {
                 screenfull.toggle(player);
             }
@@ -158,7 +173,6 @@ const VideoPlay = ({
         // 萤石 ifream 信息监听
         const listenYingshiMessage = async (e) => {
             const { data, origin } = e
-            console.log(e);
             if (origin !== 'https://open.ys7.com') return
             if (data.type == "handleSuccess") {
                 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 (
         <>
-            <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}
                         histroyTime={histroyTime}
                         setoperationState={setoperationState} name={name}
@@ -323,12 +372,14 @@ const VideoPlay = ({
                         }
                         setProcessDisX={setProcessDisX}
                         content={videoObj.content}
-                    />
+                        videoStyle={videoStyle}
+                    />}
                     {/* 视频内容 */}
-                    {
+
-                        videoObj.type == 'yingshi' ?
+                    {videoObj.type == 'yingshi' ?
                         <iframe
                             frameBorder="0"
+                            allowFullScreen='true'
                             id={containerId}
                             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}`
@@ -337,7 +388,6 @@ const VideoPlay = ({
                             // 单个播放器的长宽比例限制最小为{width: 400px;height: 300px;}
                             width={'100%'}
                             height={'100%'}
-                                allowFullScreen
                             wmode="transparent"
                             style={{ pointerEvents: 'none' }}
                         /> :
@@ -346,11 +396,12 @@ const VideoPlay = ({
                             style={{
                                 height: '100%', width: '100%'
                             }}>
-
                         </div>
                     }
 
                     {/* 下方操作栏 */}
+                    {/* 显示操作功能条件（宽高） */}
+                    {size?.parentWidth > 400 ?
                         <VideoOperation
                             operationState={operationState} operation={operation}
                             voiceDisY={voiceDisY} setVoiceDisY={setVoiceDisY}
@@ -364,7 +415,9 @@ const VideoPlay = ({
                             videoObj={videoObj}
                             setYingshiPrepare={setYingshiPrepare}
                             yingshiPrepareRef={yingshiPrepareRef}
-                    />
+                            slideDown={slideDown}
+                        /> : ""
+                    }
                 </div>
 
             </div>
@@ -374,6 +427,7 @@ const VideoPlay = ({
 
 function mapStateToProps (state) {
     const { auth, global } = state;
+    console.log(global);
     return {
         user: auth.user,
         iotVideoServer: global.iotVideoServer,

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

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

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

@@ -18,7 +18,18 @@ const VideoPlayModal = ({ visible, close, videoObj, name }) => {
             onCancel={() => { close() }}
             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>
     )
 }

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 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 upTimeInterval = useRef(null)
     const [showTime_, setShowTime] = useState('     ')
@@ -53,16 +53,17 @@ const VideoHeader = ({ operationState, changeSelectState, setProcessDisX, name,
         updateTime()
     }, [showTime])
 
+    const vcmp_videoplay = document.getElementById('vcmp_videoplay')?.clientHeight
     return (
         <div>
             {roll ?
                 <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,
                     color: '#fff'
                 }}>
                     <Row>
-                <Col span={9} style={{
+                        <Col span={videoStyle == 'true' ? 0 : 9} style={{
                             backgroundImage: 'url(/assets/images/background/videoPlayBg.png)',
                             backgroundSize: '100% 100%',
                             backgroundRepeat: 'no-repeat',
@@ -78,7 +79,7 @@ const VideoHeader = ({ operationState, changeSelectState, setProcessDisX, name,
                             }
                             {showTime_} {name}
                         </Col>
-                <Col span={15} style={{}}>
+                        <Col span={videoStyle == 'true' ? 24 : 15} style={{}}>
                             <div style={{ paddingRight: 12 }}>
                                 <TextScroll content={content || []} duration={6} />
                             </div>

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

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

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();
     function colorStatus (data) {
         switch (data) {

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

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

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 { VideoPlay } from '$components'
 import '../style.less'
+import { useRef } from 'react';
 
 const VideoPlayCross = (props) => {
     const [videoParams, setVideoParams] = useState(null)
+    const [sizeWh, setSizeWh] = useState()
+    const viideoData = useRef(videoParams)
 
     useEffect(() => {
         console.log(props);
         if (props.location.search) {
+            decodeURIComponent(props.location.search)
             const params = qs.parse(props.location.search.slice(1))
             if (params.videoObj) {
-            console.log(params.videoObj);
                 // params.videoObj = (new Function("return " + params.videoObj))()
+                decodeURIComponent(params.videoObj)
                 params.videoObj = JSON.parse(params.videoObj)
-            params.height = JSON.parse(params.height)
+                // params.height = JSON.parse(params.height)
                 setVideoParams(params)
-            return
+                viideoData.current = params
             }
         }
-      console.log(videoParams);
         function messageListen (e) {
             // 此处需做 域名 验证
             const { data } = e
             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) {
             window.addEventListener('message', messageListen);
         }
+        window.addEventListener('resize', resize_);  //只要窗口殴大小发生像素变化就会触发
         return () => {
             window.removeEventListener('message', messageListen);
+            window.removeEventListener('resize', resize_);
         }
-     
     }, [])
     return (
         <>
             {
-            videoParams && <VideoPlay {...videoParams} />
+                videoParams && <VideoPlay {...videoParams} sizeWh={sizeWh} />
             }
         </>
     )