|  |  | @ -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) | 
			
		
	
		
			
				
					|  |  |  |             } | 
			
		
	
		
			
				
					|  |  |  |          }} /> | 
			
		
	
		
			
				
					|  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  | 
 | 
			
		
	
	
		
			
				
					|  |  | 
 |