云控样式

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

@@ -10,23 +10,42 @@ const VideoPlay = ({ height, width }) => {
    const [playUrl, setPlayUrl] = useState('http://flv.bdplay.nodemedia.cn/live/bbb.flv')
    const [isPlaying, setIsPlaying] = useState(false)
    const [operationState, setoperationState] = useState()
+
+   const changeSelectState = (key) => {
+      const nextOperationState = JSON.parse(JSON.stringify(operationState))
+      for (let k in nextOperationState) {
+         if (k == key) {
+            nextOperationState[k].select = !nextOperationState[k].select
+         } else if (key !== 'fullScreen') {
+            nextOperationState[k].select = false
+         }
+      }
+      return nextOperationState
+   }
+
    const operation = [{
       key: 'control',
       click: () => {
-         console.log(object);
-         const nextOperationState = JSON.parse(JSON.stringify(operationState))
-         nextOperationState['control'].select = !nextOperationState['control'].select
+         let nextOperationState = changeSelectState('control')
          setoperationState(nextOperationState)
       }
    }, {
       key: 'talk',
-      click: () => { console.log(121212); }
+      click: () => {
+         let nextOperationState = changeSelectState('talk')
+         setoperationState(nextOperationState)
+      }
    }, {
       key: 'fullScreen',
-      click: () => { console.log(121212); }
+      click: () => {
+         let nextOperationState = changeSelectState('fullScreen')
+         setoperationState(nextOperationState)
+      }
    }, {
       key: 'histroy',
-      click: () => { console.log(121212); }
+      click: () => {
+
+      }
    },]
    useEffect(() => {
       create()
@@ -88,7 +107,8 @@ const VideoPlay = ({ height, width }) => {
       <>
          <div style={{ height: height || '100%', width: width || '100%' }}>
 
-            <div style={{ position: 'relative', }}>
+            <div style={{ position: 'relative', display: 'flex' }}>
+               {/* 顶部信息 */}
                <div style={{
                   height: 42, lineHeight: '42px', background: '#00000026',
                   position: 'absolute', width: '100%', zIndex: 99,
@@ -108,7 +128,73 @@ const VideoPlay = ({ height, width }) => {
                      </Col>
                   </Row>
                </div>
+               {/* 视频内容 */}
                <div id="container" style={{ height: height || '100%', width: width || '100%' }}></div>
+               {/* 云控 对讲 对应操作内容 */}
+               {
+                  operationState ?
+                     operationState.control.select ?
+                        <div style={{
+                           position: 'absolute', top: 'calc(50% - 105px)', left: 'calc(50% - 125px)',
+                           width: 210, height: 250, backgroundColor: '#00000014', borderRadius: 68
+                        }}>
+                           <div style={{
+                              height: 148, width: 148, borderRadius: '100%', backgroundColor: '#2F53EA72', margin: '12px auto 18px',
+                              position: 'relative',
+                           }}>
+                              {
+                                 [{
+                                    style: { top: 12, left: (148 - 24) / 2, }
+                                 }, {
+                                    style: { right: 12, top: (148 - 24) / 2, }
+                                 }, {
+                                    style: { bottom: 12, left: (148 - 24) / 2, }
+                                 }, {
+                                    style: { left: 12, top: (148 - 24) / 2, }
+                                 }].map((s, i) => {
+                                    return (
+                                       <img
+                                          src="/assets/images/background/up.png"
+                                          style={Object.assign({
+                                             height: 24, width: 24, display: 'inline-block', transform: `rotate(${i * 90}deg)`,
+                                             position: 'absolute'
+                                          }, s.style)}
+                                       />
+                                    )
+                                 })
+                              }
+                              <div style={{
+                                 height: 32, width: 32, border: '2px solid #ffffff24', borderRadius: '100%',
+                                 position: 'absolute', top: (148 - 34) / 2, left: (148 - 34) / 2
+                              }} />
+                           </div>
+                           {
+                              [
+                                 [{ n: '+' }, { n: '焦距' }, { n: '-' }],
+                                 [{ n: '+' }, { n: '缩放' }, { n: '-' }]
+                              ].map(s => {
+                                 return (
+                                    <div style={{
+                                       width: 110, height: 22, margin: '0 auto 6px', display: 'flex', alignContent: 'center', justifyContent: 'space-around',
+                                       backgroundColor: '#2F53EA72', color: '#fff'
+                                    }}>
+                                       {
+                                          s.map((m, mi) => {
+                                             return (
+                                                <div style={{ textAlign: 'center', display: 'inline-block', cursor: mi != 1 ? 'pointer' : 'auto' }}>{m.n}</div>
+                                             )
+                                          })
+                                       }
+                                    </div>
+                                 )
+                              })
+                           }
+                        </div> :
+                        operationState.talk.select ?
+                           '2' :
+                           '' : ''
+               }
+               {/* 下方操作 */}
                <div style={{
                   height: 42, lineHeight: '42px', background: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%)', padding: '0 12px',
                   display: 'flex', justifyContent: 'space-between',
@@ -122,6 +208,7 @@ const VideoPlay = ({ height, width }) => {
                                  src={`/assets/images/background/video-icon-${p.key}-${operationState[p.key].select ? 'select' : 'unselect'}.png`}
                                  height={26}
                                  style={{ marginRight: 24 }}
+                                 onClick={p.click}
                               />
                            }) : ''
                      }