管理大屏视频轮播

web/client/src/sections/fillion/containers/videoCenter.js

@@ -15,7 +15,7 @@ function VideoCenter (props) {
 
     return (
         <div>
-            <iframe  src={`${vcmpWebUrl}/callService?mid=${vcmpMirrorId}`}  style={{ height: 'calc(100vh - 142px)', width: '100%', display: 'block' }} frameBorder={0}></iframe>
+            <iframe allowFullScreen  src={`${vcmpWebUrl}/callService?mid=${vcmpMirrorId}`}  style={{ height: 'calc(100vh - 142px)', width: '100%', display: 'block' }} frameBorder={0}></iframe>
         </div>
     );
 }

web/client/src/sections/quanju/containers/footer/build/videoMonitor.js

@@ -25,12 +25,32 @@ const videoMonitor = (props) => {
       />
    }
 
+   useEffect(() => {
+      const timer = setInterval(() => {
+         if (pageLeft + 1 < Math.ceil(videoCenterList?.length / 3)) {
+            setPageLeft(pageLeft + 1)
+         } else {
+            setPageLeft(0)
+         }
+      }, 1000 * 60 * 5);
+      return () => clearInterval(timer);
+   }, [pageLeft]);
+
+
    return (
       videoCenterList?.length > 0 ? <div style={{ width: '100%', height: '100%', display: "flex", alignItems: 'center', justifyContent: 'space-around' }}>
          <LeftOutlined style={{ width: "5%", color: '#FFF', cursor: 'pointer' }} onClick={() => {
-            if (pageLeft > 0) setPageLeft(pageLeft - 1)
+            if (pageLeft == 0) {
+               if (Math.ceil(videoCenterList?.length / 3) == 0) {
+                  setPageLeft(0)
+               } else {
+                  setPageLeft(Math.ceil(videoCenterList?.length / 3) - 1)
+               }
+            } else {
+               setPageLeft(pageLeft - 1)
+            }
          }} />
-         <div style={{ width: '90%', height: "98%",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:'space-between' }}>
+         <div style={{ width: '90%', height: "98%", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: 'space-between' }}>
             {videoCenterList?.slice(pageLeft * 3, (pageLeft + 1) * 3)?.map((v, index) => {
                return <div style={{ width: "95%", height: "30%", backgroundSize: 'cover', position: "relative", }}>
                   {renderVideo(v, index)}
@@ -44,7 +64,11 @@ const videoMonitor = (props) => {
             })}
          </div>
          <RightOutlined style={{ width: "5%", color: '#FFF', cursor: 'pointer' }} onClick={() => {
-            if (pageLeft + 1 < Math.ceil(videoCenterList?.length / 3)) setPageLeft(pageLeft + 1)
+            if (pageLeft + 1 < Math.ceil(videoCenterList?.length / 3)) {
+               setPageLeft(pageLeft + 1)
+            } else {
+               setPageLeft(0)
+            }
          }} />