react_hsbc_teller 0.3.8 → 0.3.9

package/packages/pages/video/video.jsx

@@ -32,8 +32,7 @@ class Video extends Component {
   signCanvas = React.createRef();
   state = {
     isWhiteboard: false,
-    isSelect: 'video',
-    isPDF: false,
+    isSelect: '',
     loading: false,
     isModalVisibleSign: false,
     titleModal: '人脸识别',
@@ -77,7 +76,9 @@ class Video extends Component {
     videoThreeName: '',
     videoFourName: '',
     videoFiveName: '',
-    videoSixName: ''
+    videoSixName: '',
+    tabTitles: [
+    ]
   };
   // eslint-disable-next-line no-undef
   test_controller = '';
@@ -162,14 +163,11 @@ class Video extends Component {
   // 初始化视频
   ConnectMRTC = () => {
     const config_param = {};
-    config_param.auto_publish_subscribe = 3;
+    config_param.auto_publish_subscribe = 2;
     config_param.media_type = 1;
     config_param.publish_device = 1;
     config_param.video_profile_type = '3';
     config_param.need_volume_analyser = true;
-    // config_param.audioSource = that.microphone[0].actionid
-    // config_param.videoSource = that.checkOne[0]
-    // config_param.transport_ = 'relay'
     config_param.initPublish = [
       {
         publish_video_id: 'publish_video1',
@@ -510,12 +508,12 @@ class Video extends Component {
           title: this.state.videoSixName
         })
       }
-      if(document.getElementById('video10').name) {
-        list.push({
-          name: 'video10',
-          title: '互动白板'
-        })
-      }
+      // if(document.getElementById('video10').name) {
+      //   list.push({
+      //     name: 'video10',
+      //     title: '互动白板'
+      //   })
+      // }
       console.log(list)
       const width = 640;
       const height = 360  * list.length;
@@ -523,10 +521,11 @@ class Video extends Component {
       const cobj = canvas.getContext('2d'); // 获取绘图环境
       canvas.width = width;
       canvas.height = height;
+      
       interval = setInterval(() => {
         cobj.clearRect(0, 0, width, height);
         for(let i=0;i<list.length;i++){
-          
+        
         let videoId = list[i].name;
         let videoDiv = document.getElementById(videoId);
         let videoWidth = videoDiv.videoWidth;
@@ -538,54 +537,94 @@ class Video extends Component {
         } else {
           newVideoHeight = videoHeight * 640 / videoWidth;
         }
-        console.log(newVideoWidth,videoHeight)
         
         cobj.drawImage(videoDiv, (640 - newVideoWidth)/2, 360 * i, newVideoWidth, newVideoHeight);
-        var img = document.getElementById("icon_huatong");
-        cobj.drawImage(img, 600, 320, canvas.width, canvas.height);
         cobj.beginPath();
         cobj.strokeStyle = this.props.titleColor;
         cobj.fillStyle = this.props.titleBackground;
         cobj.fillRect(0, 360 * (i + 1) - 60, 300, 60 )
-        cobj.closePath();
         cobj.fill();
         cobj.stroke();
+        cobj.beginPath();
         cobj.font = "28px auto";
         cobj.textAlign = 'center';
+        cobj.lineWidth = 1;
         cobj.strokeText(list[i].title, 150, 360 * (i + 1) - 20);
-        console.log(videoDiv.srcObject, videoDiv.srcObject.getAudioTracks(), videoDiv.srcObject.getAudioTracks()[0])
-    //     const acc = new AudioContext()
-    //     // 返回一个多媒体流
-    //     const mic = acc.createMediaStreamSource(videoDiv.srcObject.getAudioTracks()[0])
-    //     // creates an AnalyserNode 创建一个分析节点
-    // this.analyser = acc.createAnalyser()
-    // // fftsize默认值2048，是快速傅立叶变换用于频域分析的值，必须为2的幂，而我们得到的数据通常为其的一半，下面会说道
-    // this.analyser.fftSize = 256
-    // // 调用绘图函数
-    // mic.connect(this.analyser)
-    //     let dataArray = new Uint8Array(this.analyser);
-    //     this.analyser.getByteFrequencyData(dataArray);
-    //   let step = Math.round(dataArray.length / 60); //采样步长
-      // 以画布左上角为坐标原点
-      // let drawArea = {
-      //   x1: 28/50 * canvas.width, // 波动范围右下角的点坐标
-      //   y1: 25/50 * canvas.height, 
-      //   x2: 22/50 * canvas.width,  // 波动范围左上角的点坐标
-      //   y2: 10/50 * canvas.height,
-      // }
-
-      // for (var j = 0; j < 40; j++) {
-      //   let energy = (dataArray[step * j] / 256.0) * 80;
-      //   ctx.beginPath();
-      //   ctx.fillStyle = "#0AE544";
-      //   const { x1,y1,x2,y2} = drawArea
-      //   let width = x1-x2;
-      //   let height = (energy>20?(energy-20):0) * (y1 - y2 ) / 70
-      //   let startX =  x2 // 绘制起始点x
-      //   let startY =  y1 - height  // 绘制起始点y
-      //   cobj.fillRect(startX, startY, width, height )
-      // }
-        // cobj.drawImage(videoDiv, 320 * i, (480 - newVideoHeight)/2, 320, newVideoHeight);
+        cobj.stroke();
+               //左边框
+               cobj.beginPath();
+               cobj.moveTo( 0, 0);
+               cobj.lineTo( 0, 360 * list.length);
+               cobj.closePath(); //闭合路径
+               cobj.lineWidth = 5; //线的边框为10像素
+               cobj.strokeStyle = '#d9363e';
+               cobj.stroke(); //绘制定义的图形
+       
+               //下边框
+               cobj.beginPath();
+               cobj.moveTo( 0, 0);
+               cobj.lineTo( 640, 0);
+               cobj.closePath(); //闭合路径
+               cobj.lineWidth = 5; //线的边框为10像素
+               cobj.strokeStyle = '#d9363e';
+               cobj.stroke(); //绘制定义的图形
+       
+               //右边框
+               cobj.beginPath();
+               cobj.moveTo( 640, 360 * list.length);
+               cobj.lineTo( 640, 0);
+               cobj.closePath(); //闭合路径
+               cobj.lineWidth = 5; //线的边框为10像素
+               cobj.strokeStyle = '#d9363e';
+               cobj.stroke(); //绘制定义的图形
+       
+       
+               //上边框
+               cobj.beginPath();
+               cobj.moveTo( 0, 360 * list.length);
+               cobj.lineTo( 640, 360 * list.length);
+               cobj.closePath(); //闭合路径
+               cobj.lineWidth = 5; //线的边框为10像素
+               cobj.strokeStyle = '#d9363e';
+               cobj.stroke(); //绘制定义的图形
+        
+        // let sid = document.getElementById(list[i].name).name
+        // let stream = this.test_controller.GetMediaInfo(sid).audio_
+        // let acc = new AudioContext()
+        // let mic = acc.createMediaStreamSource(stream)
+        // let analyser = acc.createAnalyser()
+        // analyser.fftSize = 256
+        // mic.connect(analyser)
+        // aou(analyser)
+        // let microphoneSize = this.props.microphoneSize
+        // var img = document.getElementById("icon_huatong");
+        // cobj.drawImage(img, 600, 360 * (i + 1) - 60, microphoneSize, microphoneSize);
+        // function aou(analyser){
+        //   let dataArray = new Uint8Array(analyser.frequencyBinCount);
+        //   analyser.getByteFrequencyData(dataArray);
+        // let step = Math.round(dataArray.length / 60); //采样步长
+        // // 以画布左上角为坐标原点
+        // let drawArea = {
+        //   x1: 28/50 * microphoneSize + 600, // 波动范围右下角的点坐标
+        //   y1: 25/50 * microphoneSize + 360 * (i + 1) - 60, 
+        //   x2: 22/50 * microphoneSize + 600,  // 波动范围左上角的点坐标
+        //   y2: 10/50 * microphoneSize + 360 * (i + 1) - 60,
+        // }
+      
+        // for (var j = 0; j < 40; j++) {
+        //   let energy = (dataArray[step * j] / 256.0) * 80;
+        //   cobj.beginPath();
+        //   cobj.fillStyle = "#0AE544";
+        //   const { x1,y1,x2,y2} = drawArea
+        //   let width = x1-x2;
+        //   let height = (energy>20?(energy-20):0) * (y1 - y2 ) / 70
+        //   let startX =  x2 // 绘制起始点x
+        //   let startY =  y1 - height  // 绘制起始点y
+        //   cobj.fillRect(startX, startY, width, height )
+        // }
+        // requestAnimationFrame(aou.bind(this, analyser));
+      
+        // }
         }
       }, 100);
       const captureStream = canvas.captureStream();
@@ -632,6 +671,30 @@ class Video extends Component {
       })
     }
   }
+  tabTitlesClick = (value,type) =>{
+    const { tabTitles } = this.state;
+    if(type == 'add') {
+      tabTitles.unshift(value)
+    }else {
+      this.state.tabTitles.map((item,index)=>{
+        if(item.value == value) {
+          tabTitles.splice(index, 1)
+          this.setState({
+            tabTitles
+          })
+        }
+      })
+    }
+    if(this.state.tabTitles.length >0) {
+      this.setState({
+        isSelect: this.state.tabTitles[0].value
+      })
+    } else {
+      this.setState({
+        isSelect: 0
+      })
+    }
+  }
   mountClick = () => {
     window.IMEvt = msg => {
       console.log(JSON.parse(msg));
@@ -667,6 +730,7 @@ class Video extends Component {
           if(Mival.type == 1) {
             this.switchExternal()
           } else if(Mival.type == 2) {
+            this.tabTitlesClick('RMWhiteboard','delect')
             if(this.state.isSharedScreen) {
               this.setState({
                 isWhiteboard: false,
@@ -674,8 +738,6 @@ class Video extends Component {
             }else {
               this.test_controller.UnPublish(document.getElementById('video10').name)
               this.setState({
-                isPDF: false,
-                isSelect: 'video',
                 isWhiteboard: false,
               })
             }
@@ -881,6 +943,85 @@ class Video extends Component {
       this.setState({
         roomCustomerList: newArray
       })
+      let config_param
+      if(feed.uid != this.state.tellerAccount) {
+        if(feed.tag == 'VIDEO_SOURCE_SCREEN') {
+          config_param = {
+            subscribe_video_id: 'video11',
+            subscribe_audio_id: 'audio11',
+            subscribe_streamId_id: 'subscribe_streamId11',
+            feedId_id: 'feedId11',
+            feedId: feed.feedId
+          }
+          
+          this.tabTitlesClick(
+            {
+              value: 'customerScreen',
+              name: '客户投屏'
+            },'add'
+          )
+        } else {
+          if(!document.getElementById('video1').name) {
+            config_param = {
+              subscribe_video_id: 'video1',
+              subscribe_audio_id: 'audio1',
+              subscribe_streamId_id: 'subscribe_streamId1',
+              feedId_id: 'feedId1',
+              feedId: feed.feedId
+            }
+          }
+          else if(!document.getElementById('video2').name) {
+            config_param = {
+              subscribe_video_id: 'video2',
+              subscribe_audio_id: 'audio2',
+              subscribe_streamId_id: 'subscribe_streamId2',
+              feedId_id: 'feedId2',
+              feedId: feed.feedId
+            }
+          }
+          else if(!document.getElementById('video3').name) {
+            config_param = {
+              subscribe_video_id: 'video3',
+              subscribe_audio_id: 'audio3',
+              subscribe_streamId_id: 'subscribe_streamId3',
+              feedId_id: 'feedId3',
+              feedId: feed.feedId
+            }
+          }
+          else if(!document.getElementById('video4').name) {
+            config_param = {
+              subscribe_video_id: 'video4',
+              subscribe_audio_id: 'audio4',
+              subscribe_streamId_id: 'subscribe_streamId4',
+              feedId_id: 'feedId4',
+              feedId: feed.feedId
+            }
+          }
+          else if(!document.getElementById('video5').name) {
+            config_param = {
+              subscribe_video_id: 'video5',
+              subscribe_audio_id: 'audio5',
+              subscribe_streamId_id: 'subscribe_streamId5',
+              feedId_id: 'feedId5',
+              feedId: feed.feedId
+            }
+          }
+          else if(!document.getElementById('video6').name) {
+            config_param = {
+              subscribe_video_id: 'video6',
+              subscribe_audio_id: 'audio6',
+              subscribe_streamId_id: 'subscribe_streamId6',
+              feedId_id: 'feedId6',
+              feedId: feed.feedId
+            }
+          }
+        }
+
+      }
+      if (config_param !== undefined) {
+        config_param.need_volume_analyser = true
+        this.test_controller.Subscribe(config_param)
+      }
     };
     // 推送“有新订阅”给与会者
     this.test_controller.OnNewSubscribe = (subscriber, feed) => {
@@ -899,11 +1040,27 @@ class Video extends Component {
             'tellerId': this.props.tellerAccount
           })
         })
+        this.setState({
+          publishDevic: 1,
+          isSharedScreen: false,
+          screenName: '投屏'
+        });
+        this.tabTitlesClick('RMScreen','delect')
+        if(this.state.isPictureInPicture) {
+          document.exitPictureInPicture()
+        }
       }
     };
     // 取消订阅媒体流成功
     this.test_controller.OnUnSubscribeSucc = (sid) => {
       console.log('取消订阅媒体流成功', sid)
+      this.state.tabTitles.map((item) => {
+        if(item.value == 'customerScreen') {
+          if(!document.getElementById("video11").name) {
+            this.tabTitlesClick('customerScreen','delect')
+          }
+        }
+      })
       if(!document.getElementById("video1").name) {
         this.setState({
           videoOneName: ''
@@ -1184,18 +1341,9 @@ class Video extends Component {
       canvas.width = this.props.microphoneSize
       canvas.height = this.props.microphoneSize
       let ctx = canvas.getContext("2d");
-
-      let outcanvas = document.createElement("canvas");
-      outcanvas.width = canvas.width;
-      outcanvas.height = canvas.height;
-      ctx.strokeStyle = "#db0011";
-      ctx.lineWidth = 2;
       ctx.clearRect(0, 0, canvas.width, canvas.height); //清理画布
-      // ctx.fillStyle ='rgba(0, 0, 0, 0.2)';
-      // ctx.fillRect(0, 0, canvas.width, canvas.height, )
       let dataArray = new Uint8Array(analyser.frequencyBinCount);
       analyser.getByteFrequencyData(dataArray);
-      // console.log('wwww', dataArray.length, document.getElementById('publish_video1').srcObject)
       let step = Math.round(dataArray.length / 60); //采样步长
       var img = document.getElementById("icon_huatong");
       ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
@@ -1218,67 +1366,7 @@ class Video extends Component {
         let startY =  y1 - height  // 绘制起始点y
         ctx.fillRect(startX, startY, width, height )
       }
-
-      //制造半透明投影
-      function draw() {
-          ctx.drawImage(outcanvas, 0, 0);
-          ctx.save();
-          ctx.translate(canvas.width / 2, canvas.height / 2);
-          ctx.rotate(Math.PI);
-          ctx.scale(-1, 1);
-          ctx.drawImage(outcanvas, -canvas.width / 2, -canvas.height / 2);
-          ctx.restore();
-          ctx.fillStyle = 'rgba(192,192,192, .0)';
-          ctx.fillRect(0, 0, canvas.width, canvas.height);
-      }
-
-      draw();
       requestAnimationFrame(this.test_controller.OnVolumeAnalyser.bind(this, sid, analyser));
-      // let canvas = document.getElementById(volumeView);
-      // let ctx = canvas.getContext("2d");
-
-      // let outcanvas = document.createElement("canvas");
-      // outcanvas.width = canvas.width;
-      // outcanvas.height = canvas.height;
-      // ctx.strokeStyle = this.props.voiceColor;
-      // ctx.lineWidth = 2;
-      // ctx.clearRect(0, 0, canvas.width, canvas.height); //清理画布
-      // let dataArray = new Uint8Array(analyser.frequencyBinCount);
-      // analyser.getByteFrequencyData(dataArray);
-      // let step = Math.round(dataArray.length / 60); //采样步长
-      // for (var i = 0; i < 40; i++) {
-      //   let energy = (dataArray[step * i] / 256.0) * 50;
-      //   for (var j = 0; j < energy; j++) {
-      //     ctx.beginPath();
-      //     ctx.moveTo(20 * i + 2, 200 + 4 * j);
-      //     ctx.lineTo(20 * (i + 1) - 2, 200 + 4 * j);
-      //     ctx.stroke();
-      //     ctx.beginPath();
-      //     ctx.moveTo(20 * i + 2, 200 - 4 * j);
-      //     ctx.lineTo(20 * (i + 1) - 2, 200 - 4 * j);
-      //     ctx.stroke();
-      //   }
-      //   ctx.beginPath();
-      //   ctx.moveTo(20 * i + 2, 200);
-      //   ctx.lineTo(20 * (i + 1) - 2, 200);
-      //   ctx.stroke();
-      // }
-
-      // //制造半透明投影
-      // function draw() {
-      //   ctx.drawImage(outcanvas, 0, 0);
-      //   ctx.save();
-      //   ctx.translate(canvas.width / 4, canvas.height / 2);
-      //   ctx.rotate(Math.PI);
-      //   ctx.scale(-1, 1);
-      //   ctx.drawImage(outcanvas, -canvas.width / 2, -canvas.height / 2);
-      //   ctx.restore();
-      //   ctx.fillStyle = 'rgba(192,192,192, .0)';
-      //   ctx.fillRect(0, 0, canvas.width, canvas.height);
-      // }
-
-      // draw();
-      // requestAnimationFrame(this.test_controller.OnVolumeAnalyser.bind(this, sid, analyser));
     }
     // 停止共享
     this.test_controller.OnDesktopDisplayClosed = () => {
@@ -1430,12 +1518,6 @@ class Video extends Component {
         sessionId: this.props.sessionId
       })
     } else {
-      setTimeout(() => {
-        this.setState({
-          screenName: this.props.intl.formatMessage({ id: 'shareScreen' }),
-          suspendName: this.props.intl.formatMessage({ id: 'suspend' }),
-        })
-      }, 50);
       this.addToScript()
     }
   }
@@ -1463,6 +1545,7 @@ class Video extends Component {
       }, function (code, message, data) {
         console.log(data)
       })
+      
     } else if (this.state.voiceStatue) {
       // 打开本地
       this.setState({
@@ -1557,22 +1640,17 @@ class Video extends Component {
           this.test_controller.ChangeMediaStream(publish_config);
           this.setState({
             isPDF: true,
-            isSelect: 'noVideo',
           })
         } else {
           this.test_controller.UnPublish(document.getElementById('video10').name)
-          this.setState({
-            isPDF: false,
-            isSelect: 'video',
-          })
         }
         this.setState({
           publishDevic: 1,
           isSharedScreen: false,
-          
           screenName: '投屏'
         });
         console.log(pictureInPictureVideo)
+        this.tabTitlesClick('RMScreen','delect')
         if(this.state.isPictureInPicture) {
           document.exitPictureInPicture()
         }
@@ -1593,20 +1671,18 @@ class Video extends Component {
           publish_config.publish_tag = 'projectionWhiteboard'
           this.test_controller.Publish(publish_config)
         }
-
-
-        // publish_config.media_type = 1;
-        // publish_config.publish_device = 2;
-        // publish_config.video_profile_type = 5;
-        // publish_config.sid = document.getElementById('publish_video1').name;
-        // this.test_controller.ChangeMediaStream(publish_config);
         this.setState({
           publishDevic: 2,
-          isSelect: 'noVideo',
           isSharedScreen: true,
           screenName: '取消共享',
           isPDF: false
         })
+        this.tabTitlesClick(
+          {
+        value: 'RMScreen',
+        name: '坐席投屏'
+      },'add'
+        )
         if(!this.state.isPictureInPicture) {
           this.pictureInPicture()
         }
@@ -1909,10 +1985,12 @@ class Video extends Component {
     if(!this.state.isWhiteboard) {
       const publish_config = {};
       this.setState({
-        isPDF: true,
         isWhiteboard: true,
-        isSelect: 'noVideo',
       })
+      this.tabTitlesClick({
+        value: 'RMWhiteboard',
+        name: 'RM白板'
+      },'add')
       if (document.getElementById('video10').name) {
         // 代表已经有了进行切流
         publish_config.publish_device = 4
@@ -1939,21 +2017,24 @@ class Video extends Component {
     
 
   }
-  switchSelect = () => {
-    if (this.state.isSelect == 'video') {
-      if (document.getElementById('video10').name) {
-        this.setState({
-          isSelect: 'noVideo',
+  switchSelect = (value) => {
+    this.setState({
+          isSelect: value,
         })
-      } else {
-        message.success('当前无签字白板')
-      }
+    // if (this.state.isSelect == 'video') {
+    //   if (document.getElementById('video10').name) {
+    //     this.setState({
+    //       isSelect: 'noVideo',
+    //     })
+    //   } else {
+    //     message.success('当前无签字白板')
+    //   }
 
-    } else {
-      this.setState({
-        isSelect: 'video',
-      })
-    }
+    // } else {
+    //   this.setState({
+    //     isSelect: 'video',
+    //   })
+    // }
   }
   facialHandleVisibleChange=(value)=>{
     if(!value) {
@@ -1970,25 +2051,46 @@ class Video extends Component {
     }
   }
   render() {
+    const {theme} = this.props
     var pdfChildren
     if (this.props.children) {
       pdfChildren = React.cloneElement(this.props.children, { width: 100, height: 100, id: 12 })
     }
+    const customerNameList = (
+      <span>
+        {
+          theme.customers.map((item,index)=>{
+            return <label>
+              {item}
+              {
+                theme.customers.length > 0 && index != theme.customers.length-1 &&<span>，</span>
+              }
+              
+            </label>
+          })
+        }
+      </span>
+    )
+    const tabTitleList = (
+      <div className="button">
+        {
+          this.state.tabTitles.map((item)=>{
+            return <div className={`${this.state.isSelect == item.value  ? 'selectSee' : "noSelest"}`} onClick={this.switchSelect.bind(this,item.value)}>
+              {item.name}
+            </div>
+          })
+        }
+      </div>
+    )
     return (
       <div className="all">
         <Spin spinning={this.state.loading} tip="视频初始化中...">
           <Header></Header>
-          <div className="health">
+          {tabTitleList}
+          <div className="health" style={{'margin-top': (this.state.tabTitles.length > 0) ? '0px' : '20px' }}>
             <div className="projection" style={{ display: (this.state.isCustomer) ? '' : 'none', }}>
-              <div className="button">
-                <div className={`${this.state.isSelect == 'video' ? 'selectSee' : "noSelest"}`} onClick={this.switchSelect.bind(this)}>视频画面</div>
-                <div className={`${this.state.isSelect == 'noVideo' ? 'selectSee' : "noSelest"}`} onClick={this.switchSelect.bind(this)}>投屏白板</div>
-              </div>
-              <div className="videoDiv" style={{ display: (this.state.isSelect == 'noVideo') ? '' : 'none', }}>
-                <div style={{ display: (this.state.isPDF) ? '' : 'none', }} id="touBoxItem">
-                  {pdfChildren}
-                </div>
-                <div className="videoDiv"  style={this.state.isPDF ? { display: 'none' } : {}}>
+              <div className="videoDiv" style={{ display: (this.state.isSelect == 'RMScreen') ? '' : 'none', }}>
+                <div className="videoDiv">
                   <video
                     id="video10"
                     autoPlay
@@ -1997,18 +2099,86 @@ class Video extends Component {
                   />
                   <audio id="audio10" autoPlay />
                   <label style={{ display: 'none' }} id="feedId10" type="text" />
-                  {/* <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="subscribe_volumeView10" width="70" height="70"></canvas> */}
+                </div>
 
+              </div>
+              <div className="videoDiv" style={{ display: (this.state.isSelect == 'RMWhiteboard') ? '' : 'none', }}>
+                <div id="touBoxItem">
+                  {pdfChildren}
+                </div>
+              </div>
+              <div className="videoDiv" style={{ display: (this.state.isSelect == 'customerScreen') ? '' : 'none', }}>
+                <div className="videoDiv">
+                  <video
+                    id="video11"
+                    autoPlay
+                    muted={true}
+                    className="video"
+                  />
+                  <audio id="audio11" autoPlay />
+                  <label style={{ display: 'none' }} id="feedId11" type="text" />
+                  {/* <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="subscribe_volumeView10" width="70" height="70"></canvas> */}
                 </div>
 
               </div>
+              {
+                this.state.tabTitles.length == 0 &&
+                <div className='themeClass'>
+                <div>
+                  <ul>
+                    <li>
+                      <span>会议主题：</span>
+                      <label>{theme.title}</label>
+                    </li>
+                    <li>
+                      <span>支持人：</span>
+                      <label>{theme.host}</label>
+                    </li>
+                    <li>
+                      <span>参会客户：</span>
+                      {customerNameList}
+                    </li>
+                  </ul>
+                </div>
+              </div>
+              }
+              
+
             </div>
-            <div className="wrapper">
+            <div className="wrapper" style={{ width: (this.state.isCustomer) ? '20%' : '100%', }}>
+              <div
+                className={`itemed ${this.state.publishDevic == 4 ? '' : (this.state.isBigVideo == 'publish_video1' ? 'isBack' : (this.state.isCustomer ? 'isBack' : ''))} ${this.state.isCustomer ? '' : 'video1Div'}`}
+              >
+                <div className="publishVideoDiv">
+                  
+                  <video
+                    id="publish_video1"
+                    className={`publishVideoClass ${this.state.isCustomer ? '' : "videoFit"}`}
+                    autoPlay
+                    muted={true}
+                    webkit-playsinline={true}
+                    playsinline={true}
+                  />
+                  <label style={{ display: 'none' }} id="publish_streamId1" type="text" />
+                  {
+                    this.state.voiceStatue && <img
+                      alt=""
+                      src={require("../../assets/img/icon_MuteOne.png").default}
+                      className="imgClass voiceClass"
+                    />
+                  }
+                  <div id="publish_video_div" style={{ display: (this.state.isCustomer) ? '' : 'none'}} className={`tellerTitle titleSamlle`}>
+                    <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>坐席</div>
+                  </div>
+                  <canvas style={{ display: (this.state.isCustomer && !this.state.voiceStatue) ? '' : 'none', }} className="canvasClass" id="publish_volumeView" width="40" height="70"></canvas>
+                </div>
+
+              </div>
+              <div style={{ display: (this.state.isCustomer) ? '' : 'none', }}>
               <div
                 className={`itemed ${this.state.isBigVideo == 'video1' ? 'item1' : ""}`}
                 // className="itemed item1"
-                style={{ position: "relative",'margin-right': '5px'}}
-                onClick={this.enlargeClick.bind(this, 'isLangVideo1')}
+                style={{ position: "relative"}}
               >
                 {
                   this.state.customAudioed && <img
@@ -2019,7 +2189,6 @@ class Video extends Component {
                 }
                 <div className="video1Div" style={{ display: (!this.state.customAudioed) ? '' : 'none', }}>
                   <video
-                  style={{display: (this.state.isBigVideo == 'video1' && this.state.isSelect == 'noVideo') ? 'none' : ''  }}
                     id="video1"
                     autoPlay
                     muted={true}
@@ -2027,53 +2196,18 @@ class Video extends Component {
                   />
                   <audio id="audio1" autoPlay />
                   <label style={{ display: 'none' }} id="feedId1" type="text" />
-                  <div style={{ display: (this.state.videoOneName) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily }} className={`customerTitle ${this.state.isBigVideo == 'video1' ? 'titleBig' : "titleSamlle"}`}>{this.state.videoOneName}</div>
+                  <div style={{ display: (this.state.videoOneName) ? '' : 'none'}} className={`customerTitle titleSamlle`}>
+                    <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>
+                      {this.state.videoOneName}
+                    </div>
+
+                    
+                  </div>
                   <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView1" width="40" height="70"></canvas>
                 </div>
               </div>
-              <div
-                className={`itemed ${this.state.publishDevic == 4 ? '' : (this.state.isBigVideo == 'publish_video1' ? 'item1 isBack' : (this.state.isCustomer ? 'isBack' : 'itemPublic'))}`}
-                onClick={this.enlargeClick.bind(this, 'isLangPublishVideo1')}
-              >
-                <div className="publishVideoDiv">
-                  {
-                    this.state.audioed && <img
-                      alt=""
-                      src={require("../../assets/img/yingpin.png").default}
-                      className="imgClass"
-                    />
-                  }
-                  {
-                    this.state.isSuspend && <img
-                      alt=""
-                      src={require("../../assets/img/zanTing.png").default}
-                      className="imgClass"
-                    />
-                  }
-                  {/* {
-                  this.state.isSharedScreen && <span
-                    className="sharedScreen"
-                  >
-                    屏幕共享中
-                  </span>
-                } */}
+              <div className={`itemed`}>
                   <video
-                    style={{ display: (!this.state.audioed && !this.state.isSuspend) ? ((this.state.isBigVideo == 'publish_video1' && this.state.isSelect == 'noVideo') ? 'none' : '') : 'none', }}
-                    id="publish_video1"
-                    className={`publishVideoClass ${this.state.isCustomer ? '' : "videoFit"}`}
-                    onClick={this.enlargeClick.bind(this, 'isLangVideo2')}
-                    autoPlay
-                    muted={true}
-                  />
-                  {/* <audio id="publish_audio1" autoPlay /> */}
-                  <label style={{ display: 'none' }} id="publish_streamId1" type="text" />
-                  <div id="publish_video_div" style={{ display: (this.state.isCustomer) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}} className={`tellerTitle ${this.state.isBigVideo == 'publish_video1' ? 'titleBig' : "titleSamlle"}`}>坐席</div>
-                  <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="publish_volumeView" width="40" height="70"></canvas>
-                </div>
-
-              </div>
-              <div className={`itemed ${this.state.isBigVideo == 'video2' ? 'item1' : ""}`} style={{'margin-top': '5px'}} onClick={this.enlargeClick.bind(this, 'isLangVideo2')}>
-                  <video style={{display: (this.state.isBigVideo == 'video2' && this.state.isSelect == 'noVideo') ? 'none' : ''  }}
                     id="video2"
                     autoPlay
                     muted={true}
@@ -2081,14 +2215,16 @@ class Video extends Component {
                   />
                   <audio id="audio2" autoPlay />
                   <label style={{ display: 'none' }} id="feedId2" type="text" />
-                  <div style={{ display: (this.state.videoTwoName) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily }} className={`customerTitle ${this.state.isBigVideo == 'video2' ? 'titleBig' : "titleSamlle"}`}>{this.state.videoTwoName}</div>
+                  <div style={{ display: (this.state.videoTwoName) ? '' : 'none'}} className={`customerTitle titleSamlle`}>
+                    <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>
+                      {this.state.videoTwoName}
+                    </div>
+                  </div>
                   <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView2" width="40" height="70"></canvas>
               </div>
-              <div className={`itemed ${this.state.isBigVideo == 'video3' ? 'item1' : ""}`}
-              style={{'margin-top': '5px' }}
-                onClick={this.enlargeClick.bind(this, 'isLangVideo3')}>
+              <div className={`itemed`}
+              style={{'margin-top': '5px' }}>
                 <video
-                style={{ display: (this.state.isBigVideo == 'video3' && this.state.isSelect == 'noVideo') ? 'none' : '' }}
                   id="video3"
                   autoPlay
                   muted={true}
@@ -2096,14 +2232,15 @@ class Video extends Component {
                 />
                 <audio id="audio3" autoPlay />
                 <label style={{ display: 'none' }} id="feedId3" type="text" />
-                <div style={{ display: (this.state.videoThreeName) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily }} className={`customerTitle ${this.state.isBigVideo == 'video3' ? 'titleBig' : "titleSamlle"}`}>{this.state.videoThreeName}</div>
+                <div style={{ display: (this.state.videoThreeName) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily }} className={`customerTitle titleSamlle`}>
+                  <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>
+                    {this.state.videoThreeName}
+                  </div>
+                </div>
                 <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView3" width="40" height="70"></canvas>
               </div>
-              <div className={`itemed ${this.state.isBigVideo == 'video4' ? 'item1' : ""}`}
-              style={{'margin-right': '5px'}}
-                onClick={this.enlargeClick.bind(this, 'isLangVideo4')}>
+              <div className={`itemed`}>
                 <video
-                style={{display: (this.state.isBigVideo == 'video4' && this.state.isSelect == 'noVideo') ? 'none' : ''  }}
                   id="video4"
                   autoPlay
                   muted={true}
@@ -2111,14 +2248,16 @@ class Video extends Component {
                 />
                 <audio id="audio4" autoPlay />
                 <label style={{ display: 'none' }} id="feedId4" type="text" />
-                <div style={{ display: (this.state.videoFourName) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily }} className={`customerTitle ${this.state.isBigVideo == 'video4' ? 'titleBig' : "titleSamlle"}`}>{this.state.videoFourName}</div>
+                <div style={{ display: (this.state.videoFourName) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily }} className={`customerTitle titleSamlle`}>
+                  <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>
+                    {this.state.videoFourName}
+                  </div>
+                </div>
                 <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView4" width="40" height="70"></canvas>
               </div>
-              <div className={`itemed ${this.state.isBigVideo == 'video5' ? 'item1' : ""}`}
-              style={{'margin-top': '5px'  }}
-                onClick={this.enlargeClick.bind(this, 'isLangVideo5')}>
+              <div className={`itemed`}
+              style={{'margin-top': '5px'  }}>
                 <video
-                style={{display: (this.state.isBigVideo == 'video5' && this.state.isSelect == 'noVideo') ? 'none' : '' }}
                   id="video5"
                   autoPlay
                   muted={true}
@@ -2126,12 +2265,15 @@ class Video extends Component {
                 />
                 <audio id="audio5" autoPlay />
                 <label style={{ display: 'none' }} id="feedId5" type="text" />
-                <div style={{ display: (this.state.videoFiveName) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily }} className={`customerTitle ${this.state.isBigVideo == 'video5' ? 'titleBig' : "titleSamlle"}`}>{this.state.videoFiveName}</div>
+                <div style={{ display: (this.state.videoFiveName) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily }} className={`customerTitle titleSamlle`}>
+                  <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>
+                    {this.state.videoFiveName}
+                  </div>  
+                </div>
                 <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView5" width="40" height="70"></canvas>
               </div>
-              <div onClick={this.enlargeClick.bind(this, 'isLangVideo6')} style={{'margin-top': '5px'}} className={`${this.state.isBigVideo == 'video6' ? 'item1' : "itemed"}`}>
+              <div className={`"itemed"`}>
                 <video
-                style={{display: (this.state.isBigVideo == 'video6' && this.state.isSelect == 'noVideo') ? 'none' : ''  }}
                   id="video6"
                   autoPlay
                   muted={true} 
@@ -2139,10 +2281,15 @@ class Video extends Component {
                 />
                 <audio id="audio6" autoPlay />
                 <label style={{ display: 'none' }} id="feedId6" type="text" />
-                <div style={{ display: (this.state.videoSixName) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily }} className={`customerTitle ${this.state.isBigVideo == 'video6' ? 'titleBig' : "titleSamlle"}`}>{this.state.videoSixName}</div>
+                <div style={{ display: (this.state.videoSixName) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily }} className={`customerTitle titleSamlle`}>
+                  <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>
+                    {this.state.videoSixName}
+                  </div>
+                </div>
                 <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView6" width="40" height="70"></canvas>
 
               </div>
+              </div>
             </div>
             <img id="icon_huatong" style={{display:'none'}} src={require("../../assets/img/icon_huatong.png").default}></img>
           </div>
@@ -2237,11 +2384,16 @@ Video.defaultProps = {
   resourcePath: 'https://counter-web.leimondata.cn:7199',
   prohibitPrompt: '当前无客户',
   voiceColor: '#0AE544',
-  titleBackground: 'rgba(219, 0, 17, 0.1)',
-  titleColor: '#DB0011',
+  titleBackground: 'rgba(0,0,0,0.65)',
+  titleColor: '#fff',
   microphoneSize: '50',
   fontSize: '14',
   fontFamily: 'auto',
-  defaultData: ['SHARE', 'FRIES', 'OCR', 'INVITE', 'PIP']
+  menus: ['SHARE', 'FRIES', 'OCR', 'INVITE', 'PIP'],
+  theme: {
+    title: '测试',
+    host: 'wmz',
+    customers: ['王三','张思']
+  }
 }
 export default Video