react_hsbc_teller 1.9.14 → 1.9.15

package/packages/pages/video/video.jsx

@@ -221,33 +221,18 @@ class Video extends Component {
     isPictureInPicture: false,
     clickedFacial: false,
     clickedOcr: false,
-    videoOneName: '',
-    videoTwoName: '',
-    videoThreeName: '',
-    videoFourName: '',
-    videoFiveName: '',
-    videoSixName: '',
-    videoSevenName: '',
-    videoEightName: '',
-    videoTenName: '',
-    videoNineName: '',
-    videoTwelveName: '',
-    videoElevenName: '',
     tabTitles: [
     ],
-    videoList: [],
-    voiceVideoOne: false,
-    voiceVideoTwo: false,
-    voiceVideoThree: false,
-    voiceVideoFour: false,
-    voiceVideoFive: false,
-    voiceVideoSix: false,
-    voiceVideoSeven: false,
-    voiceVideoEight: false,
-    voiceVideoNine: false,
-    voiceVideoTen: false,
-    voiceVideoEleven: false,
-    voiceVideoTwelve: false,
+    videoList: [{
+      videoName: '',
+      mute: false,
+      noVideo: false,
+      isPIBIntranet: false,
+      idIndex: 1,
+      userSide: 1,
+      userId: '',
+      hasOcr: 0, // 0: 未做ocr  1:非身份证ocr 2:身份证ocr
+    }],
     cameraList: [],
     microphoneList: [],
     speakerList: [],
@@ -259,59 +244,9 @@ class Video extends Component {
     analyserData: new Map(),
     analyserHeight: new Map(),
     OnVolumeAnalyserMap: new Map(),
-    noVideoOne: false,
-    noVideoTwo: false,
-    noVideoThree: false,
-    noVideoFour: false,
-    noVideoFive: false,
-    noVideoSix: false,
-    noVideoSeven: false,
-    noVideoEight: false,
-    noVideoNine: false,
-    noVideoTen: false,
-    noVideoEleven: false,
-    noVideoTwelve: false,
     manualClose: false,
     defaultValue: '1',
     customOcrSid: '',
-    isPIBIntranet: [
-      {
-        type: false
-      },
-      {
-        type: false
-      },
-      {
-        type: false
-      },
-      {
-        type: false
-      },
-      {
-        type: false
-      },
-      {
-        type: false
-      },
-      {
-        type: false
-      },
-      {
-        type: false
-      },
-      {
-        type: false
-      },
-      {
-        type: false
-      },
-      {
-        type: false
-      },
-      {
-        type: false
-      }
-    ],
     shareMaskState: false,
     idCardName: '',
     idCardNameFace: '',
@@ -357,7 +292,7 @@ class Video extends Component {
   saveLog = (val) => {
     axios({
       method: 'get',
-      baseURL: this.props.logUrl + '&message=' + encodeURIComponent(val) + '&react_hsbc_teller=1.9.14&logTime=' + Date.now() + '&mtoken=' + encodeURIComponent(this.state.rtoken) + '&roomId=' + encodeURIComponent(this.state.channelId) + '&sessionId=' + encodeURIComponent(this.state.sessionId) + '&appointmentID=' + this.props.businessNumber,
+      baseURL: this.props.logUrl + '&message=' + encodeURIComponent(val) + '&react_hsbc_teller=1.9.15&logTime=' + Date.now() + '&mtoken=' + encodeURIComponent(this.state.rtoken) + '&roomId=' + encodeURIComponent(this.state.channelId) + '&sessionId=' + encodeURIComponent(this.state.sessionId) + '&appointmentID=' + this.props.businessNumber,
 
     }).then(res => {
 
@@ -829,6 +764,13 @@ class Video extends Component {
       console.log(this.state.faceCustomerUid, userInfo)
       if (!userInfo || !userInfo.idCardNumber) {
         console.log('没有身份证ocr信息')
+        this.setState({
+          loadingFace: false,
+          faceResuly: 'fail',
+          isFaceImage: '',
+          // faceFailReason: result.message
+        })
+        this.errorCodeClick('face', 201)
         return
       }
       let result = await API.contrastFaceVerify({
@@ -917,112 +859,17 @@ class Video extends Component {
   // 获取人员客户列表
   selectCustomer = (val) => {
     const list = []
-    if (document.getElementById('video1').name && !this.state.isPIBIntranet[0].type) {
-      console.log(this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText))
-      // document.getElementById("feedId1").innerText
-      list.push({
-        feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).feedId,
-        customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).uid,
-        name: this.state.videoOneName,
-        tourist: false
-      })
-    }
-    if (document.getElementById('video2').name && !this.state.isPIBIntranet[1].type) {
-      console.log(this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText))
-      // document.getElementById("feedId1").innerText
-      list.push({
-        feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).feedId,
-        customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).uid,
-        name: this.state.videoTwoName,
-        tourist: false
-      })
-    }
-    if (document.getElementById('video3').name && !this.state.isPIBIntranet[2].type) {
-      console.log(this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText))
-      // document.getElementById("feedId1").innerText
-      list.push({
-        feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).feedId,
-        customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).uid,
-        name: this.state.videoThreeName,
-        tourist: false
-      })
-    }
-    if (document.getElementById('video4').name && !this.state.isPIBIntranet[3].type) {
-      console.log(this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText))
-      // document.getElementById("feedId1").innerText
-      list.push({
-        feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).feedId,
-        customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).uid,
-        name: this.state.videoFourName,
-        tourist: false
-      })
-    }
-    if (document.getElementById('video5').name && !this.state.isPIBIntranet[4].type) {
-      console.log(this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText))
-      // document.getElementById("feedId1").innerText
-      list.push({
-        feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).feedId,
-        customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).uid,
-        name: this.state.videoFiveName,
-        tourist: false
-      })
-    }
-    if (document.getElementById('video6').name && !this.state.isPIBIntranet[5].type) {
-      console.log(this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText))
-      list.push({
-        feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).feedId,
-        customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).uid,
-        name: this.state.videoSixName,
-        tourist: false
-      })
-    }
-    if (document.getElementById('video7').name && !this.state.isPIBIntranet[6].type) {
-      list.push({
-        feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId7").innerText).feedId,
-        customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId7").innerText).uid,
-        name: this.state.videoSevenName,
-        tourist: false
-      })
-    }
-    if (document.getElementById('video8').name && !this.state.isPIBIntranet[7].type) {
-      list.push({
-        feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId8").innerText).feedId,
-        customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId8").innerText).uid,
-        name: this.state.videoEightName,
-        tourist: false
-      })
-    }
-    if (document.getElementById('video9').name && !this.state.isPIBIntranet[8].type) {
-      list.push({
-        feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId9").innerText).feedId,
-        customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId9").innerText).uid,
-        name: this.state.videoNineName,
-        tourist: false
-      })
-    }
-    if (document.getElementById('video10').name && !this.state.isPIBIntranet[9].type) {
-      list.push({
-        feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId10").innerText).feedId,
-        customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId10").innerText).uid,
-        name: this.state.videoTenName,
-        tourist: false
-      })
-    }
-    if (document.getElementById('video11').name  && !this.state.isPIBIntranet[10].type) {
-      list.push({
-        feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId11").innerText).feedId,
-        customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId11").innerText).uid,
-        name: this.state.videoElevenName,
-        tourist: false
-      })
-    }
-    if (document.getElementById('video12').name && !this.state.isPIBIntranet[11].type) {
-      list.push({
-        feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId12").innerText).feedId,
-        customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId12").innerText).uid,
-        name: this.state.videoTwelveName,
-        tourist: false
-      })
+    for (let i =1;i<=12;i++){
+      let item = this.state.videoList[i-1];
+      if (document.getElementById('video'+ i).name && !item.isPIBIntranet && item.userSide===1) {
+        // console.log(this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId"+i).innerText))
+        list.push({
+          feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId"+i).innerText).feedId,
+          customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId"+i).innerText).uid,
+          name: item.videoName,
+          tourist: false
+        })
+      }
     }
     console.log(list)
     this.setState({
@@ -1143,110 +990,28 @@ class Video extends Component {
   pictureInPictureClick = (val) => {
     let interval
     const list = []
-    if (document.getElementById('video1').name) {
-      list.push({
-        name: 'video1',
-        title: this.state.videoOneName,
-        voice: 'voiceVideoOne',
-        noVideo: this.state.noVideoOne
-      })
-    }
     if (document.getElementById('publish_video1').name) {
       list.push({
         name: 'publish_video1',
         title: this.props.meetingInfo.host ? this.props.meetingInfo.host : '客户经理1',
-        voice: 'voiceStatue',
+        mute: this.state.voiceStatue,
         noVideo: false
       })
     }
-    if (document.getElementById('video2').name) {
-      list.push({
-        name: 'video2',
-        title: this.state.videoTwoName,
-        voice: 'voiceVideoTwo',
-        noVideo: this.state.noVideoTwo
-      })
-    }
-    if (document.getElementById('video3').name) {
-      list.push({
-        name: 'video3',
-        title: this.state.videoThreeName,
-        voice: 'voiceVideoThree',
-        noVideo: this.state.noVideoThree
-      })
-    }
-    if (document.getElementById('video4').name) {
-      list.push({
-        name: 'video4',
-        title: this.state.videoFourName,
-        voice: 'voiceVideoFour',
-        noVideo: this.state.noVideoFour
-      })
-    }
-    if (document.getElementById('video5').name) {
-      list.push({
-        name: 'video5',
-        title: this.state.videoFiveName,
-        voice: 'voiceVideoFive',
-        noVideo: this.state.noVideoFive
-      })
-    }
-    if (document.getElementById('video6').name) {
-      list.push({
-        name: 'video6',
-        title: this.state.videoSixName,
-        voice: 'voiceVideoSix',
-        noVideo: this.state.noVideoSix
-      })
-    }
-
-    if (document.getElementById('video7').name) {
-      list.push({
-        name: 'video7',
-        title: this.state.videoSevenName,
-        voice: 'voiceVideoSeven',
-        noVideo: this.state.noVideoSeven
-      })
-    }
-    if (document.getElementById('video8').name) {
-      list.push({
-        name: 'video8',
-        title: this.state.videoEightName,
-        voice: 'voiceVideoEight',
-        noVideo: this.state.noVideoEight
-      })
-    }
-    if (document.getElementById('video9').name) {
-      list.push({
-        name: 'video9',
-        title: this.state.videoNineName,
-        voice: 'voiceVideoNine',
-        noVideo: this.state.noVideoNine
-      })
-    }
-    if (document.getElementById('video10').name) {
-      list.push({
-        name: 'video10',
-        title: this.state.videoTenName,
-        voice: 'voiceVideoTen',
-        noVideo: this.state.noVideoTen
-      })
-    }
-    if (document.getElementById('video11').name) {
-      list.push({
-        name: 'video11',
-        title: this.state.videoElevenName,
-        voice: 'voiceVideoEleven',
-        noVideo: this.state.noVideoEleven
-      })
-    }
-    if (document.getElementById('video12').name) {
-      list.push({
-        name: 'video12',
-        title: this.state.videoTwelveName,
-        voice: 'voiceVideoTwelve',
-        noVideo: this.state.noVideoTwelve
-      })
+    console.log(this.state.videoList)
+    var sortedlist = [...this.state.videoList]
+    sortedlist.sort((a, b)=>{
+      return a.order - b.order;
+    })
+    for (let i =1;i<=12;i++){
+      if(document.getElementById('video'+i).name){
+        list.push({
+          name: 'video' + i,
+          title: sortedlist[i-1].videoName,
+          mute: sortedlist[i-1].mute,
+          noVideo: sortedlist[i-1].noVideo
+        })
+      }
     }
     console.log(list)
     this.state.listVideoPicture = list
@@ -1367,7 +1132,7 @@ class Video extends Component {
         let microphoneSize = 50
         var img = document.getElementById("icon_huatong");
         var img1 = document.getElementById("icon_huatong_close");
-        if (this.state[this.state.listVideoPicture[i].voice]) {
+        if (this.state.listVideoPicture[i].mute) {
           cobj.drawImage(img1, 10, 360 * (i + 1) - 60, microphoneSize, microphoneSize);
         } else {
           cobj.drawImage(img, 10, 360 * (i + 1) - 60, microphoneSize, microphoneSize);
@@ -1532,161 +1297,32 @@ class Video extends Component {
       //     this.endSession('customerHangUp')
       //   }
       // } 
-      else if (Mival.typeId == 3002) {
+      else if (Mival.typeId == 3002) { // app进入后台
         if (Mival.data.sessionId == this.state.sessionId) {
-          if (Mival.data.userId == this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).uid) {
-            this.setState({
-              noVideoOne: true
-            })
-          }
-          if (Mival.data.userId == (document.getElementById("feedId2").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).uid : '')) {
-
-            this.setState({
-              noVideoTwo: true
-            })
-          }
-          if (Mival.data.userId == (document.getElementById("feedId3").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).uid : '')) {
-            this.setState({
-              noVideoThree: true
-            })
-
-          }
-          if (Mival.data.userId == (document.getElementById("feedId4").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).uid : '')) {
-
-            this.setState({
-              noVideoFour: true
-            })
-          }
-          if (Mival.data.userId == (document.getElementById("feedId5").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).uid : '')) {
-            this.setState({
-              noVideoFive: true
-            })
-
-          }
-          if (Mival.data.userId == (document.getElementById("feedId6").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).uid : '')) {
-
-            this.setState({
-              noVideoSix: true
-            })
-          }
-          if (Mival.data.userId == (document.getElementById("feedId7").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId7").innerText).uid : '')) {
-
-            this.setState({
-              noVideoSeven: true
-            })
-          }
-          if (Mival.data.userId == (document.getElementById("feedId8").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId8").innerText).uid : '')) {
-            this.setState({
-              noVideoEight: true
-            })
-
-          }
-          if (Mival.data.userId == (document.getElementById("feedId9").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId9").innerText).uid : '')) {
-
-            this.setState({
-              noVideoNine: true
-            })
-          }
-          if (Mival.data.userId == (document.getElementById("feedId10").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId10").innerText).uid : '')) {
-            this.setState({
-              noVideoTen: true
-            })
-
-          }
-          if (Mival.data.userId == (document.getElementById("feedId11").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId11").innerText).uid : '')) {
-
-            this.setState({
-              noVideoEleven: true
-            })
-          }
-          if (Mival.data.userId == (document.getElementById("feedId12").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId12").innerText).uid : '')) {
-
-            this.setState({
-              noVideoTwelve: true
-            })
+          for(let i=1;i<=12;i++){
+            if(Mival.data.userId == (document.getElementById("feedId"+i).innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId"+i).innerText).uid : '')) {
+                  this.state.videoList[i-1].noVideo = true
+              }
           }
-          if (this.state.isPictureInPicture) {
+          this.setState({
+            videoList: this.state.videoList
+          }, ()=>{
             this.pictureInPicture('Refresh')
-          }
-
+          })
         }
       }
-      else if (Mival.typeId == 3003) {
+      else if (Mival.typeId == 3003) { // app进入前台
         if (Mival.data.sessionId == this.state.sessionId) {
-          if (Mival.data.userId == this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).uid) {
-            this.setState({
-              noVideoOne: false
-            })
-          }
-          if (Mival.data.userId == (document.getElementById("feedId2").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).uid : '')) {
-
-            this.setState({
-              noVideoTwo: false
-            })
-          }
-          if (Mival.data.userId == (document.getElementById("feedId3").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).uid : '')) {
-            this.setState({
-              noVideoThree: false
-            })
-
-          }
-          if (Mival.data.userId == (document.getElementById("feedId4").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).uid : '')) {
-
-            this.setState({
-              noVideoFour: false
-            })
-          }
-          if (Mival.data.userId == (document.getElementById("feedId5").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).uid : '')) {
-            this.setState({
-              noVideoFive: false
-            })
-
-          }
-          if (Mival.data.userId == (document.getElementById("feedId6").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).uid : '')) {
-
-            this.setState({
-              noVideoSix: false
-            })
-          }
-          if (Mival.data.userId == (document.getElementById("feedId7").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId7").innerText).uid : '')) {
-
-            this.setState({
-              noVideoSeven: false
-            })
-          }
-          if (Mival.data.userId == (document.getElementById("feedId8").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId8").innerText).uid : '')) {
-            this.setState({
-              noVideoEight: false
-            })
-
-          }
-          if (Mival.data.userId == (document.getElementById("feedId9").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId9").innerText).uid : '')) {
-
-            this.setState({
-              noVideoNine: false
-            })
-          }
-          if (Mival.data.userId == (document.getElementById("feedId10").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId10").innerText).uid : '')) {
-            this.setState({
-              noVideoTen: false
-            })
-
-          }
-          if (Mival.data.userId == (document.getElementById("feedId11").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId11").innerText).uid : '')) {
-
-            this.setState({
-              noVideoEleven: false
-            })
-          }
-          if (Mival.data.userId == (document.getElementById("feedId12").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId12").innerText).uid : '')) {
-
-            this.setState({
-              noVideoTwelve: false
-            })
+          for(let i=1;i<=12;i++){
+            if(Mival.data.userId == (document.getElementById("feedId"+i).innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId"+i).innerText).uid : '')) {
+                  this.state.videoList[i-1].noVideo = false
+              }
           }
-          if (this.state.isPictureInPicture) {
+          this.setState({
+            videoList: this.state.videoList
+          }, ()=>{
             this.pictureInPicture('Refresh')
-          }
+          })
         }
       }
       else if (Mival.typeId == 1220) {
@@ -1740,164 +1376,24 @@ class Video extends Component {
         }
 
       } else if (Mival.typeId == 3100) {
-        if (Mival.data.sessionId == this.state.sessionId) {
-          muteJson.set(Mival.data.userId, JSON.stringify(Mival))
-          if (Mival.data.userId == this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).uid) {
-            muteJson.delete(Mival.data.userId)
-            if (Mival.muteStatus == 0) {
-              this.setState({
-                voiceVideoOne: false
-              })
-            } else if (Mival.muteStatus == 1) {
-              this.setState({
-                voiceVideoOne: true
-              })
-            }
-
-          }
-          if (Mival.data.userId == (document.getElementById("feedId2").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).uid : '')) {
-            muteJson.delete(Mival.data.userId)
-            if (Mival.muteStatus == 0) {
-              this.setState({
-                voiceVideoTwo: false
-              })
-            } else if (Mival.muteStatus == 1) {
-              this.setState({
-                voiceVideoTwo: true
-              })
-            }
-
-          }
-          if (Mival.data.userId == (document.getElementById("feedId3").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).uid : '')) {
-            muteJson.delete(Mival.data.userId)
-            if (Mival.muteStatus == 0) {
-              this.setState({
-                voiceVideoThree: false
-              })
-            } else if (Mival.muteStatus == 1) {
-              this.setState({
-                voiceVideoThree: true
-              })
-            }
-
-          }
-          if (Mival.data.userId == (document.getElementById("feedId4").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).uid : '')) {
-            muteJson.delete(Mival.data.userId)
-            if (Mival.muteStatus == 0) {
-              this.setState({
-                voiceVideoFour: false
-              })
-            } else if (Mival.muteStatus == 1) {
-              this.setState({
-                voiceVideoFour: true
-              })
-            }
-
-          }
-          if (Mival.data.userId == (document.getElementById("feedId5").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).uid : '')) {
-            muteJson.delete(Mival.data.userId)
-            if (Mival.muteStatus == 0) {
-              this.setState({
-                voiceVideoFive: false
-              })
-            } else if (Mival.muteStatus == 1) {
-              this.setState({
-                voiceVideoFive: true
-              })
-            }
-
-          }
-          if (Mival.data.userId == (document.getElementById("feedId6").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).uid : '')) {
-            muteJson.delete(Mival.data.userId)
-            if (Mival.muteStatus == 0) {
-              this.setState({
-                voiceVideoSix: false
-              })
-            } else if (Mival.muteStatus == 1) {
-              this.setState({
-                voiceVideoSix: true
-              })
-            }
-
-          }
-
-          if (Mival.data.userId == (document.getElementById("feedId7").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId7").innerText).uid : '')) {
-            muteJson.delete(Mival.data.userId)
-            if (Mival.muteStatus == 0) {
-              this.setState({
-                voiceVideoSeven: false
-              })
-            } else if (Mival.muteStatus == 1) {
-              this.setState({
-                voiceVideoSeven: true
-              })
-            }
-
-          }
-          if (Mival.data.userId == (document.getElementById("feedId8").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId8").innerText).uid : '')) {
-            muteJson.delete(Mival.data.userId)
-            if (Mival.muteStatus == 0) {
-              this.setState({
-                voiceVideoEight: false
-              })
-            } else if (Mival.muteStatus == 1) {
-              this.setState({
-                voiceVideoEight: true
-              })
-            }
-
-          }
-          if (Mival.data.userId == (document.getElementById("feedId9").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId9").innerText).uid : '')) {
-            muteJson.delete(Mival.data.userId)
-            if (Mival.muteStatus == 0) {
-              this.setState({
-                voiceVideoNine: false
-              })
-            } else if (Mival.muteStatus == 1) {
-              this.setState({
-                voiceVideoNine: true
-              })
-            }
-
-          }
-          if (Mival.data.userId == (document.getElementById("feedId10").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId10").innerText).uid : '')) {
-            muteJson.delete(Mival.data.userId)
-            if (Mival.muteStatus == 0) {
-              this.setState({
-                voiceVideoTen: false
-              })
-            } else if (Mival.muteStatus == 1) {
-              this.setState({
-                voiceVideoTen: true
-              })
-            }
-
-          }
-          if (Mival.data.userId == (document.getElementById("feedId11").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId11").innerText).uid : '')) {
-            muteJson.delete(Mival.data.userId)
-            if (Mival.muteStatus == 0) {
-              this.setState({
-                voiceVideoEleven: false
-              })
-            } else if (Mival.muteStatus == 1) {
-              this.setState({
-                voiceVideoEleven: true
-              })
-            }
-
-          }
-          if (Mival.data.userId == (document.getElementById("feedId12").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId12").innerText).uid : '')) {
-            muteJson.delete(Mival.data.userId)
-            if (Mival.muteStatus == 0) {
-              this.setState({
-                voiceVideoTwelve: false
-              })
-            } else if (Mival.muteStatus == 1) {
-              this.setState({
-                voiceVideoTwelve: true
-              })
-            }
-
+        if(Mival.data.sessionId == this.state.sessionId) {
+          muteJson.set(Mival.data.userId, JSON.stringify(Mival)) 
+          for(let i=1;i<=12;i++){
+            if(Mival.data.userId == (document.getElementById("feedId"+i).innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId"+i).innerText).uid : '')) {
+              muteJson.delete(Mival.data.userId) 
+              if(Mival.muteStatus == 0) {
+                  this.state.videoList[i-1].mute = false
+                  this.setState({
+                    videoList: this.state.videoList
+                  })
+                } else if(Mival.muteStatus == 1) {
+                  this.state.videoList[i-1].mute = true
+                  this.setState({
+                    videoList: this.state.videoList
+                  })
+                }
+                
+              }
           }
         }
       } else if (Mival.typeId == 121305) {
@@ -1922,70 +1418,16 @@ class Video extends Component {
         this.tabTitlesClick('customerScreen', 'delect')
 
       } else if (Mival.typeId == 1401) {
+        // 用户修改名字
         if (Mival.sessionId == this.state.sessionId) {
-          if (Mival.userId == this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).uid) {
-            this.setState({
-              videoOneName: Mival.name
-            })
-
-          }
-          if (Mival.userId == (document.getElementById("feedId2").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).uid : '')) {
-            this.setState({
-              videoTwoName: Mival.name
-            })
-          }
-          if (Mival.userId == (document.getElementById("feedId3").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).uid : '')) {
-            this.setState({
-              videoThreeName: Mival.name
-            })
-          }
-          if (Mival.userId == (document.getElementById("feedId4").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).uid : '')) {
-            this.setState({
-              videoFourName: Mival.name
-            })
-          }
-          if (Mival.userId == (document.getElementById("feedId5").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).uid : '')) {
-            this.setState({
-              videoFiveName: Mival.name
-            })
-          }
-          if (Mival.userId == (document.getElementById("feedId6").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).uid : '')) {
-            this.setState({
-              videoSixName: Mival.name
-            })
-          }
-
-          if (Mival.userId == (document.getElementById("feedId7").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId7").innerText).uid : '')) {
-            this.setState({
-              videoSevenName: Mival.name
-            })
-          }
-          if (Mival.userId == (document.getElementById("feedId8").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId8").innerText).uid : '')) {
-            this.setState({
-              videoEightName: Mival.name
-            })
-          }
-          if (Mival.userId == (document.getElementById("feedId9").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId9").innerText).uid : '')) {
-            this.setState({
-              videoNineName: Mival.name
-            })
-          }
-          if (Mival.userId == (document.getElementById("feedId10").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId10").innerText).uid : '')) {
-            this.setState({
-              videoTenName: Mival.name
-            })
-          }
-          if (Mival.userId == (document.getElementById("feedId11").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId11").innerText).uid : '')) {
-            this.setState({
-              videoElevenName: Mival.name
-            })
-          }
-          if (Mival.userId == (document.getElementById("feedId12").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId12").innerText).uid : '')) {
-            this.setState({
-              videoTwelveName: Mival.name
-            })
+          for(let i=1;i<=12;i++){
+            if(Mival.userId == (document.getElementById("feedId"+i).innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId"+i).innerText).uid : '')) {
+              this.state.videoList[i-1].videoName = Mival.name
+              }
           }
-
+          this.setState({
+            videoList: this.state.videoList
+          })
         }
       }
     };
@@ -2467,169 +1909,27 @@ class Video extends Component {
       
       this.appGetUsername(sid)
       console.log(muteJson, muteJson.size)
-      if (muteJson.size > 0) {
-        let userId = ''
-        if (muteJson.get(this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).uid)) {
-          userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).uid
-          if (JSON.parse(muteJson.get(userId)).muteStatus == 0) {
-            this.setState({
-              voiceVideoOne: false
-            })
-          } else if (JSON.parse(muteJson.get(userId)).muteStatus == 1) {
-            this.setState({
-              voiceVideoOne: true
-            })
-          }
-          muteJson.delete(userId)
-        }
-        if (muteJson.get(document.getElementById("feedId2").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).uid : '')) {
-          userId = document.getElementById("feedId2").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).uid : ''
-          if (JSON.parse(muteJson.get(userId)).muteStatus == 0) {
-            this.setState({
-              voiceVideoTwo: false
-            })
-          } else if (JSON.parse(muteJson.get(userId)).muteStatus == 1) {
-            this.setState({
-              voiceVideoTwo: true
-            })
-          }
-          muteJson.delete(userId)
-        }
-        if (muteJson.get(document.getElementById("feedId3").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).uid : '')) {
-          userId = document.getElementById("feedId3").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).uid : ''
-          if (JSON.parse(muteJson.get(userId)).muteStatus == 0) {
-            this.setState({
-              voiceVideoThree: false
-            })
-          } else if (JSON.parse(muteJson.get(userId)).muteStatus == 1) {
-            this.setState({
-              voiceVideoThree: true
-            })
-          }
-          muteJson.delete(userId)
-        }
-        if (muteJson.get(document.getElementById("feedId4").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).uid : '')) {
-          userId = document.getElementById("feedId4").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).uid : ''
-          if (JSON.parse(muteJson.get(userId)).muteStatus == 0) {
-            this.setState({
-              voiceVideoFour: false
-            })
-          } else if (JSON.parse(muteJson.get(userId)).muteStatus == 1) {
-            this.setState({
-              voiceVideoFour: true
-            })
-          }
-          muteJson.delete(userId)
-        }
-        if (muteJson.get(document.getElementById("feedId5").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).uid : '')) {
-          userId = document.getElementById("feedId5").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).uid : ''
-          if (JSON.parse(muteJson.get(userId)).muteStatus == 0) {
-            this.setState({
-              voiceVideoFive: false
-            })
-          } else if (JSON.parse(muteJson.get(userId)).muteStatus == 1) {
-            this.setState({
-              voiceVideoFive: true
-            })
-          }
-          muteJson.delete(userId)
-        }
-        if (muteJson.get(document.getElementById("feedId6").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).uid : '')) {
-          userId = document.getElementById("feedId6").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).uid : ''
-          if (JSON.parse(muteJson.get(userId)).muteStatus == 0) {
-            this.setState({
-              voiceVideoSix: false
-            })
-          } else if (JSON.parse(muteJson.get(userId)).muteStatus == 1) {
-            this.setState({
-              voiceVideoSix: true
-            })
-          }
-          muteJson.delete(userId)
-        }
-        if (muteJson.get(document.getElementById("feedId7").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId7").innerText).uid : '')) {
-          userId = document.getElementById("feedId7").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId7").innerText).uid : ''
-          if (JSON.parse(muteJson.get(userId)).muteStatus == 0) {
-            this.setState({
-              voiceVideoSeven: false
-            })
-          } else if (JSON.parse(muteJson.get(userId)).muteStatus == 1) {
-            this.setState({
-              voiceVideoSeven: true
-            })
-          }
-          muteJson.delete(userId)
-        }
-        if (muteJson.get(document.getElementById("feedId8").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId8").innerText).uid : '')) {
-          userId = document.getElementById("feedId8").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId8").innerText).uid : ''
-
-          if (JSON.parse(muteJson.get(userId)).muteStatus == 0) {
-            this.setState({
-              voiceVideoEight: false
-            })
-          } else if (JSON.parse(muteJson.get(userId)).muteStatus == 1) {
-            this.setState({
-              voiceVideoEight: true
-            })
-          }
-          muteJson.delete(userId)
-        }
-        if (muteJson.get(document.getElementById("feedId9").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId9").innerText).uid : '')) {
-          userId = document.getElementById("feedId9").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId9").innerText).uid : ''
-
-          if (JSON.parse(muteJson.get(userId)).muteStatus == 0) {
-            this.setState({
-              voiceVideoNine: false
-            })
-          } else if (JSON.parse(muteJson.get(userId)).muteStatus == 1) {
-            this.setState({
-              voiceVideoNine: true
-            })
-          }
-          muteJson.delete(userId)
-        }
-        if (muteJson.get(document.getElementById("feedId10").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId10").innerText).uid : '')) {
-          userId = document.getElementById("feedId10").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId10").innerText).uid : ''
-
-          if (JSON.parse(muteJson.get(userId)).muteStatus == 0) {
-            this.setState({
-              voiceVideoTen: false
-            })
-          } else if (JSON.parse(muteJson.get(userId)).muteStatus == 1) {
-            this.setState({
-              voiceVideoTen: true
-            })
-          }
-          muteJson.delete(userId)
-        }
-        if (muteJson.get(document.getElementById("feedId11").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId11").innerText).uid : '')) {
-          userId = document.getElementById("feedId11").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId11").innerText).uid : ''
-
-          if (JSON.parse(muteJson.get(userId)).muteStatus == 0) {
-            this.setState({
-              voiceVideoEleven: false
-            })
-          } else if (JSON.parse(muteJson.get(userId)).muteStatus == 1) {
-            this.setState({
-              voiceVideoEleven: true
-            })
-          }
-          muteJson.delete(userId)
-        }
-        if (muteJson.get(document.getElementById("feedId12").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId12").innerText).uid : '')) {
-          userId = document.getElementById("feedId12").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId12").innerText).uid : ''
-          if (JSON.parse(muteJson.get(userId)).muteStatus == 0) {
-            this.setState({
-              voiceVideoTwelve: false
-            })
-          } else if (JSON.parse(muteJson.get(userId)).muteStatus == 1) {
-            this.setState({
-              voiceVideoTwelve: true
-            })
-          }
-          muteJson.delete(userId)
+      if(muteJson.size > 0) {
+        for(let i=1;i<=12;i++){
+          const userId = document.getElementById("feedId"+i).innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId"+i).innerText).uid : ''
+          console.log(muteJson.get(userId))
+          if(muteJson.get(userId)) {
+             
+            if(JSON.parse(muteJson.get(userId)).muteStatus == 0) {
+                this.state.videoList[i-1].mute = false
+                this.setState({
+                  videoList: this.state.videoList
+                })
+              } else if(JSON.parse(muteJson.get(userId)).muteStatus == 1) {
+                this.state.videoList[i-1].mute = true
+                this.setState({
+                  videoList: this.state.videoList
+                })
+              }
+              muteJson.delete(userId)
+            }
         }
-        console.log(muteJson, muteJson.length)
+        console.log(muteJson,muteJson.length)
       }
     };
     // 订阅媒体流失败
@@ -2690,120 +1990,23 @@ class Video extends Component {
                   }, '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: itemOne.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: itemOne.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: itemOne.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: itemOne.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: itemOne.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: itemOne.feedId
-                  }
-                }
-
-                else if (!document.getElementById('video7').name) {
-                  config_param = {
-                    subscribe_video_id: 'video7',
-                    subscribe_audio_id: 'audio7',
-                    subscribe_streamId_id: 'subscribe_streamId7',
-                    feedId_id: 'feedId7',
-                    feedId: itemOne.feedId
-                  }
-                }
-                else if (!document.getElementById('video8').name) {
-                  config_param = {
-                    subscribe_video_id: 'video8',
-                    subscribe_audio_id: 'audio8',
-                    subscribe_streamId_id: 'subscribe_streamId8',
-                    feedId_id: 'feedId8',
-                    feedId: itemOne.feedId
-                  }
-                }
-                else if (!document.getElementById('video9').name) {
-                  config_param = {
-                    subscribe_video_id: 'video9',
-                    subscribe_audio_id: 'audio9',
-                    subscribe_streamId_id: 'subscribe_streamId9',
-                    feedId_id: 'feedId9',
-                    feedId: itemOne.feedId
-                  }
-                }
-                else if (!document.getElementById('video10').name) {
-                  config_param = {
-                    subscribe_video_id: 'video10',
-                    subscribe_audio_id: 'audio10',
-                    subscribe_streamId_id: 'subscribe_streamId10',
-                    feedId_id: 'feedId10',
-                    feedId: itemOne.feedId
-                  }
-                }
-                else if (!document.getElementById('video11').name) {
-                  config_param = {
-                    subscribe_video_id: 'video11',
-                    subscribe_audio_id: 'audio11',
-                    subscribe_streamId_id: 'subscribe_streamId11',
-                    feedId_id: 'feedId11',
-                    feedId: itemOne.feedId
-                  }
-                }
-                else if (!document.getElementById('video12').name) {
-                  config_param = {
-                    subscribe_video_id: 'video12',
-                    subscribe_audio_id: 'audio12',
-                    subscribe_streamId_id: 'subscribe_streamId12',
-                    feedId_id: 'feedId12',
-                    feedId: itemOne.feedId
-                  }
+                for (let i=1;i<=12;i++){
+                  if(!document.getElementById('video'+i).name) {
+                      config_param = {
+                        subscribe_video_id: 'video'+i,
+                        subscribe_audio_id: 'audio'+i,
+                        subscribe_streamId_id: 'subscribe_streamId'+i,
+                        feedId_id: 'feedId'+i,
+                        feedId: itemOne.feedId
+                      }
+                      break;
+                    }
                 }
               }
               if (config_param !== undefined) {
                 config_param.need_volume_analyser = true
                 console.log(config_param)
-
+                console.log('发起订阅')
                 this.test_controller.Subscribe(config_param)
 
               }
@@ -2883,135 +2086,39 @@ class Video extends Component {
             this.test_controller.Subscribe(config_param)
 
           }
-        } else if (feed.tag == 'projectionWhiteboard') {
-          config_param = {
-            subscribe_video_id: 'video20',
-            subscribe_audio_id: 'audio20',
-            subscribe_streamId_id: 'subscribe_streamId20',
-            feedId_id: 'feedId20',
-            feedId: feed.feedId
-          }
-
-          this.tabTitlesClick(
-            {
-              value: 'staffScreen',
-              name: 'internal staff 投屏'
-            }, 'add'
-          )
-          if (config_param !== undefined) {
-            config_param.need_volume_analyser = false
-            console.log(config_param)
-            this.test_controller.Subscribe(config_param)
-
-          }
-        } 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
-            }
-          }
-          else if (!document.getElementById('video7').name) {
-            config_param = {
-              subscribe_video_id: 'video7',
-              subscribe_audio_id: 'audio7',
-              subscribe_streamId_id: 'subscribe_streamId7',
-              feedId_id: 'feedId7',
-              feedId: feed.feedId
-            }
-          }
-          else if (!document.getElementById('video8').name) {
-            config_param = {
-              subscribe_video_id: 'video8',
-              subscribe_audio_id: 'audio8',
-              subscribe_streamId_id: 'subscribe_streamId8',
-              feedId_id: 'feedId8',
-              feedId: feed.feedId
-            }
-          }
-          else if (!document.getElementById('video9').name) {
-            config_param = {
-              subscribe_video_id: 'video9',
-              subscribe_audio_id: 'audio9',
-              subscribe_streamId_id: 'subscribe_streamId9',
-              feedId_id: 'feedId9',
-              feedId: feed.feedId
-            }
-          }
-          else if (!document.getElementById('video10').name) {
-            config_param = {
-              subscribe_video_id: 'video10',
-              subscribe_audio_id: 'audio10',
-              subscribe_streamId_id: 'subscribe_streamId10',
-              feedId_id: 'feedId10',
-              feedId: feed.feedId
-            }
+        } else if (feed.tag == 'projectionWhiteboard') {
+          config_param = {
+            subscribe_video_id: 'video20',
+            subscribe_audio_id: 'audio20',
+            subscribe_streamId_id: 'subscribe_streamId20',
+            feedId_id: 'feedId20',
+            feedId: feed.feedId
           }
-          else if (!document.getElementById('video11').name) {
-            config_param = {
-              subscribe_video_id: 'video11',
-              subscribe_audio_id: 'audio11',
-              subscribe_streamId_id: 'subscribe_streamId11',
-              feedId_id: 'feedId11',
-              feedId: feed.feedId
-            }
+
+          this.tabTitlesClick(
+            {
+              value: 'staffScreen',
+              name: 'internal staff 投屏'
+            }, 'add'
+          )
+          if (config_param !== undefined) {
+            config_param.need_volume_analyser = false
+            console.log(config_param)
+            this.test_controller.Subscribe(config_param)
+
           }
-          else if (!document.getElementById('video12').name) {
-            config_param = {
-              subscribe_video_id: 'video12',
-              subscribe_audio_id: 'audio12',
-              subscribe_streamId_id: 'subscribe_streamId12',
-              feedId_id: 'feedId12',
-              feedId: feed.feedId
-            }
+        } else {
+          for (let i=1;i<=12;i++){
+            if(!document.getElementById('video'+i).name) {
+                config_param = {
+                  subscribe_video_id: 'video'+i,
+                  subscribe_audio_id: 'audio'+i,
+                  subscribe_streamId_id: 'subscribe_streamId'+i,
+                  feedId_id: 'feedId'+i,
+                  feedId: feed.feedId
+                }
+                break;
+              }
           }
           if (config_param !== undefined) {
             config_param.need_volume_analyser = true
@@ -3069,127 +2176,34 @@ class Video extends Component {
           }
         }
       })
-      if (!document.getElementById("video1").name) {
-        this.state.isPIBIntranet[0].type = false
-        this.setState({
-          videoOneName: '',
-          voiceVideoOne: false,
-          noVideoOne: false
-        },()=>{
-          this.videoListClick()
-        })
-      }
-      if (!document.getElementById("video2").name) {
-        this.state.isPIBIntranet[1].type = false
-        this.setState({
-          videoTwoName: '',
-          voiceVideoTwo: false,
-          noVideoTwo: false
-        },()=>{
-          this.videoListClick()
-        })
-      }
-      if (!document.getElementById("video3").name) {
-        this.state.isPIBIntranet[2].type = false
-        this.setState({
-          videoThreeName: '',
-          voiceVideoThree: false,
-          noVideoThree: false
-        },()=>{
-          this.videoListClick()
-        })
-      }
-      if (!document.getElementById("video4").name) {
-        this.state.isPIBIntranet[3].type = false
-        this.setState({
-          videoFourName: '',
-          voiceVideoFour: false,
-          noVideoFour: false
-        },()=>{
-          this.videoListClick()
-        })
-      }
-      if (!document.getElementById("video5").name) {
-        this.state.isPIBIntranet[4].type = false
-        this.setState({
-          videoFiveName: '',
-          voiceVideoFive: false,
-          noVideoFive: false
-        },()=>{
-          this.videoListClick()
-        })
-      }
-      if (!document.getElementById("video6").name) {
-        this.state.isPIBIntranet[5].type = false
-        this.setState({
-          videoSixName: '',
-          voiceVideoSix: false,
-          noVideoSix: false
-        },()=>{
-          this.videoListClick()
-        })
-      }
-
-      if (!document.getElementById("video7").name) {
-        this.state.isPIBIntranet[6].type = false
-        this.setState({
-          videoSevenName: '',
-          voiceVideoSeven: false,
-          noVideoSeven: false
-        },()=>{
-          this.videoListClick()
-        })
-      }
-      if (!document.getElementById("video8").name) {
-        this.state.isPIBIntranet[7].type = false
-        this.setState({
-          videoEightName: '',
-          voiceVideoEight: false,
-          noVideoEight: false
-        },()=>{
-          this.videoListClick()
-        })
-      }
-      if (!document.getElementById("video9").name) {
-        this.state.isPIBIntranet[8].type = false
-        this.setState({
-          videoNineName: '',
-          voiceVideoNine: false,
-          noVideoNine: false
-        },()=>{
-          this.videoListClick()
-        })
-      }
-      if (!document.getElementById("video10").name) {
-        this.state.isPIBIntranet[9].type = false
-        this.setState({
-          videoTenName: '',
-          voiceVideoTen: false,
-          noVideoTen: false
-        },()=>{
-          this.videoListClick()
-        })
-      }
-      if (!document.getElementById("video11").name) {
-        this.state.isPIBIntranet[10].type = false
-        this.setState({
-          videoElevenName: '',
-          voiceVideoEleven: false,
-          noVideoEleven: false
-        },()=>{
-          this.videoListClick()
-        })
-      }
-      if (!document.getElementById("video12").name) {
-        this.state.isPIBIntranet[11].type = false
-        this.setState({
-          videoTwelveName: '',
-          voiceVideoTwelve: false,
-          noVideoTwelve: false
-        },()=>{
-          this.videoListClick()
-        })
+      for(let i=1;i<=12;i++){
+        if(!document.getElementById("video"+i).name) {
+          this.state.videoList[i-1]= {
+            ...this.state.videoList[i-1],
+            videoName: '',
+            mute: false,
+            noVideo: false,
+            isPIBIntranet: false,
+            userSide: '',
+            userType: '',
+            userId: '',
+            hasOcr: 0,
+          }
+          this.setState({
+            videoList: this.state.videoList
+          })
+        }
       }
+      // if (!document.getElementById("video1").name) {
+      //   this.state.isPIBIntranet[0].type = false
+      //   this.setState({
+      //     videoOneName: '',
+      //     voiceVideoOne: false,
+      //     noVideoOne: false
+      //   },()=>{
+      //     this.videoListClick()
+      //   })
+      // }
       this.state.analyserData.delete(sid)
       if (this.state.isPictureInPicture) {
         this.pictureInPicture('Refresh')
@@ -3889,7 +2903,21 @@ class Video extends Component {
     }
   }
   componentWillMount() {
-    console.log('hsbc_teller_sdk', '1.9.14')
+    console.log('hsbc_teller_sdk', '1.9.15')
+    let arr = []
+    for(let i=1;i<=12;i++){
+      arr.push({
+        videoName: '',
+        mute: false,
+        noVideo: false,
+        isPIBIntranet: false,
+        idIndex: i,
+        hasOcr: 0,
+      })
+    }
+    this.setState({
+      videoList: arr
+    })
     if (this.props.sessionId) {
       this.getRoomStatus({
         sessionId: this.props.sessionId
@@ -4327,6 +3355,12 @@ class Video extends Component {
       console.log('confirmCallback', result)
       if (result.code == 200) {
         // console.log(data)
+        let item = this.state.videoList.find(el => el.userId == this.state.faceCustomerUid )
+        item.hasOcr = 1; // 非身份证ocr
+        // this.setState({
+        //   videoList: this.state.videoList
+        // })
+        this.videoListSort();
       } else {
         console.log('1')
         this.messageClick('保持信息失败', 'error')
@@ -4574,6 +3608,12 @@ class Video extends Component {
       console.log('confirmCallback', result)
       if (result.code == 200) {
         // console.log(data)
+        let item = this.state.videoList.find(el => el.userId == this.state.faceCustomerUid )
+        item.hasOcr = 2; // 身份证ocr
+        // this.setState({
+        //   videoList: this.state.videoList
+        // })
+        this.videoListSort();
       } else {
         console.log('1')
         this.messageClick('保持信息失败', 'error')
@@ -4866,38 +3906,10 @@ class Video extends Component {
     console.log(sid)
     let userId = ''
     let index
-    if (document.getElementById('video1').name == sid) {
-      userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).uid
-    }
-    if (document.getElementById('video2').name == sid) {
-      userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).uid
-    } if (document.getElementById('video3').name == sid) {
-      userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).uid
-    } if (document.getElementById('video4').name == sid) {
-      userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).uid
-    } if (document.getElementById('video5').name == sid) {
-      userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).uid
-    } if (document.getElementById('video6').name == sid) {
-      userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).uid
-    }
-
-    if (document.getElementById('video7').name == sid) {
-      userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId7").innerText).uid
-    }
-    if (document.getElementById('video8').name == sid) {
-      userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId8").innerText).uid
-    }
-    if (document.getElementById('video9').name == sid) {
-      userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId9").innerText).uid
-    }
-    if (document.getElementById('video10').name == sid) {
-      userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId10").innerText).uid
-    }
-    if (document.getElementById('video11').name == sid) {
-      userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId11").innerText).uid
-    }
-    if (document.getElementById('video12').name == sid) {
-      userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId12").innerText).uid
+    for (let i =1;i<=12;i++){
+      if(document.getElementById('video'+ i) && document.getElementById('video'+ i).name == sid && document.getElementById("feedId"+i).innerText){
+        userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId"+i).innerText).uid
+      }
     }
     if (document.getElementById('publish_video1').name == sid) {
       userId = this.props.tellerAccount
@@ -4905,7 +3917,8 @@ class Video extends Component {
     try {
       let result = await API.appGetUsername({
         userId: userId,
-        sessionId: this.state.sessionId
+        sessionId: this.state.sessionId,
+        activityId: this.props.businessNumber
       });
       console.log(result)
       let data
@@ -4933,117 +3946,28 @@ class Video extends Component {
         this.setState({
           titleNameRm: data
         })
-      }
-      if (document.getElementById('video1').name == sid) {
-        if ((typeIntranet && typeIntranet == 2) || (userSide && userSide == 2)) {
-          this.state.isPIBIntranet[0].type = true
-        }
-        this.setState({
-          videoOneName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户1'
-        },()=>{
-          this.videoListClick()
-        })
-      }
-      if (document.getElementById('video2').name == sid) {
-        if ((typeIntranet && typeIntranet == 2) || (userSide && userSide == 2)) {
-          this.state.isPIBIntranet[1].type = true
-        }
-        this.setState({
-          videoTwoName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户2'
-        },()=>{
-          this.videoListClick()
-        })
-      } if (document.getElementById('video3').name == sid) {
-        if ((typeIntranet && typeIntranet == 2) || (userSide && userSide == 2)) {
-          this.state.isPIBIntranet[2].type = true
-        }
-        this.setState({
-          videoThreeName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户3'
-        },()=>{
-          this.videoListClick()
-        })
-      } if (document.getElementById('video4').name == sid) {
-        if ((typeIntranet && typeIntranet == 2) || (userSide && userSide == 2)) {
-          this.state.isPIBIntranet[3].type = true
-        }
-        this.setState({
-          videoFourName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户4'
-        },()=>{
-          this.videoListClick()
-        })
-      } if (document.getElementById('video5').name == sid) {
-        if ((typeIntranet && typeIntranet == 2) || (userSide && userSide == 2)) {
-          this.state.isPIBIntranet[4].type = true
-        }
-        this.setState({
-          videoFiveName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户5'
-        },()=>{
-          this.videoListClick()
-        })
-      } if (document.getElementById('video6').name == sid) {
-        if ((typeIntranet && typeIntranet == 2) || (userSide && userSide == 2)) {
-          this.state.isPIBIntranet[5].type = true
-        }
-        this.setState({
-          videoSixName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户6'
-        },()=>{
-          this.videoListClick()
-        })
-      }
-      if (document.getElementById('video7').name == sid) {
-        if ((typeIntranet && typeIntranet == 2) || (userSide && userSide == 2)) {
-          this.state.isPIBIntranet[6].type = true
-        }
-        this.setState({
-          videoSevenName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId7").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户7'
-        },()=>{
-          this.videoListClick()
-        })
-      } if (document.getElementById('video8').name == sid) {
-        if ((typeIntranet && typeIntranet == 2) || (userSide && userSide == 2)) {
-          this.state.isPIBIntranet[7].type = true
-        }
-        this.setState({
-          videoEightName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId8").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户8'
-        },()=>{
-          this.videoListClick()
-        })
-      } if (document.getElementById('video9').name == sid) {
-        if ((typeIntranet && typeIntranet == 2) || (userSide && userSide == 2)) {
-          this.state.isPIBIntranet[8].type = true
-        }
-        this.setState({
-          videoNineName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId9").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户9'
-        },()=>{
-          this.videoListClick()
-        })
-      } if (document.getElementById('video10').name == sid) {
-        if ((typeIntranet && typeIntranet == 2) || (userSide && userSide == 2)) {
-          this.state.isPIBIntranet[9].type = true
-        }
-        this.setState({
-          videoTenName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId10").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户10'
-        },()=>{
-          this.videoListClick()
-        })
-      } if (document.getElementById('video11').name == sid) {
-        if ((typeIntranet && typeIntranet == 2) || (userSide && userSide == 2)) {
-          this.state.isPIBIntranet[10].type = true
-        }
-        this.setState({
-          videoElevenName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId11").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户11'
-        },()=>{
-          this.videoListClick()
-        })
-      } if (document.getElementById('video12').name == sid) {
-        if ((typeIntranet && typeIntranet == 2) || (userSide && userSide == 2)) {
-          this.state.isPIBIntranet[11].type = true
+      } else {
+        for (let i =1;i<=12;i++){
+          if(document.getElementById('video'+i).name == sid){
+
+            if ((typeIntranet && typeIntranet == 2) && (userSide && userSide == 2)) {
+              // this.state.isPIBIntranet[0].type = true
+              this.state.videoList[i-1].isPIBIntranet = true
+            }
+            if (result.data.idCardNumber && result.data.certificateType) {
+              this.state.videoList[i-1].hasOcr = result.data.certificateType.includes('ID_CARD') ? 2 : 1
+            }
+            this.state.videoList[i-1].userId = userId
+            this.state.videoList[i-1].videoName = data
+            this.state.videoList[i-1].userSide = userSide 
+            this.state.videoList[i-1].userType = typeIntranet
+          }
         }
         this.setState({
-          videoTwelveName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId12").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户12'
-        },()=>{
-          this.videoListClick()
+          videoList: this.state.videoList
+          // videoOneName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId"+i).innerText).tag == 'tag1' ? '坐席' : data ? data : ('客户'+i)
         })
+        this.videoListSort();
       }
       if (this.state.isPictureInPicture) {
         this.pictureInPicture('Refresh')
@@ -5726,7 +4650,7 @@ class Video extends Component {
                     'id': 3,
                     'content': '本人同意使用电子签名方式签署作为陪同者所需签署的文件，并授权汇丰银行（中国）有限公司（“汇丰中国”）通过电子签名服务供应商向第三方认证机构提供本人的姓名和身份证件号码，用以申请本人专属的数字证书，本人在电子设备上签署文件即表明本人指示汇丰中国使用本人专属电子证书对该等文件进行电子签名。本人知悉并同意，电子签名和手写签名具有同等法律效力。 \n说明：电子签名服务供应商和第三方认证机构的名称和联系方式如下:' + 
                                 '\n电子签名服务供应商：杭州尚尚签网络科技有限公司（联系电话：4009936665）\n第三方认证机构： \n北京天威诚信电子商务服务有限公司（联系电话：010-50947500）\n中金金融认证中心有限公司（联系电话：010-83526655）',
-                    'content_en': 'To sign in the relevant document required as companion, do you agree to adopt electronic signature in it?. And you shall authorize HSBC (China) Co., Ltd to provide your name and identity document number to the certificate authority through the electronic signature service provider to apply for your own digital certificate. By signing the document on the electronic device, you authorize HSBC (China) Co., Ltd to use your digital certificate and apply your electronic signature to the documents. You understand and agree that electronic signature has the same legal effect as handwritten signature.' +
+                    'content_en': 'To sign in the relevant document required as companion, do you agree to adopt electronic signature in it? And you shall authorize HSBC (China) Co., Ltd to provide your name and identity document number to the certificate authority through the electronic signature service provider to apply for your own digital certificate. By signing the document on the electronic device, you authorize HSBC (China) Co., Ltd to use your digital certificate and apply your electronic signature to the documents. You understand and agree that electronic signature has the same legal effect as handwritten signature.' +
                                   '\nPlease be noted the names and contact information of the electronic signature service provider and the certificate authority are as follows:\nElectronic signature service provider: Hangzhou BestSign Network Technology Co. Ltd. (Contact: 4009936665) \nCertificate Authority: \nChina Financial Certification Authority (Contact: 010-83526655)\niTrusChina Co., Ltd (Contact: 010-50947500)'
                   }
                 ]
@@ -5753,7 +4677,7 @@ class Video extends Component {
                     'id': 2,
                     'content': '对于陪同者所需签署的文件，您是否同意使用电子签名方式签署，并授权汇丰银行（中国）有限公司（“汇丰中国”）通过电子签名服务供应商向第三方认证机构提供您本人的姓名和身份证件号码，用以申请您本人专属的数字证书？您本人在电子设备上签署文件即表明您本人指示汇丰中国使用您本人专属电子证书对该等文件进行电子签名。您本人知悉并同意，电子签名和手写签名具有同等法律效力。 \n说明：电子签名服务供应商和第三方认证机构的名称和联系方式如下:' +
                                 '\n电子签名服务供应商：杭州尚尚签网络科技有限公司（联系电话：4009936665）\n第三方认证机构： \n北京天威诚信电子商务服务有限公司（联系电话：010-50947500）\n中金金融认证中心有限公司（联系电话：010-83526655）',
-                    'content_en': 'To sign in the relevant document required as companion, do you agree to adopt electronic signature in it?. And you shall authorize HSBC (China) Co., Ltd to provide your name and identity document number to the certificate authority through the electronic signature service provider to apply for your own digital certificate. By signing the document on the electronic device, you authorize HSBC (China) Co., Ltd to use your digital certificate and apply your electronic signature to the documents. You understand and agree that electronic signature has the same legal effect as handwritten signature.' +
+                    'content_en': 'To sign in the relevant document required as companion, do you agree to adopt electronic signature in it? And you shall authorize HSBC (China) Co., Ltd to provide your name and identity document number to the certificate authority through the electronic signature service provider to apply for your own digital certificate. By signing the document on the electronic device, you authorize HSBC (China) Co., Ltd to use your digital certificate and apply your electronic signature to the documents. You understand and agree that electronic signature has the same legal effect as handwritten signature.' +
                                 '\nPlease be noted the names and contact information of the electronic signature service provider and the certificate authority are as follows:\nElectronic signature service provider: Hangzhou BestSign Network Technology Co. Ltd. (Contact: 4009936665) \nCertificate Authority: \nChina Financial Certification Authority (Contact: 010-83526655)\niTrusChina Co., Ltd (Contact: 010-50947500)'
                   }
                 ]
@@ -5826,6 +4750,53 @@ class Video extends Component {
       console.log(err)
     }
   }
+  // 视频窗口排序
+  videoListSort = () => {
+    console.log(this.state.videoList)
+    let list = [...this.state.videoList]
+    list.sort((a, b)=>{
+        // 判断是否有客户
+        if (!b.videoName && a.videoName){
+            return -1
+        }
+        if (!a.videoName && b.videoName){
+            return 1
+        }
+        // 判断是否是坐席
+        // if (a.isTeller != b.isTeller) {
+        //     return a.isTeller ? -1 : 1
+        // }
+        // 判断是否是内网pib
+        if (a.isPIBIntranet != b.isPIBIntranet){
+            return !a.isPIBIntranet ? -1 : 1
+        }
+        
+        // 判断行内或行外客户
+        if (a.userSide != b.userSide){
+            return a.userSide == 2 ? -1 : 1
+        }
+        
+        // 判断行外客户是否做过ocr
+        if (a.hasOcr != b.hasOcr) {
+            return (b.hasOcr || 0) - (a.hasOcr || 0)
+        }
+        
+        return a.idIndex - b.idIndex;
+    })
+    console.log('排序后list');
+    console.log(list);
+    for(let i=0;i<12;i++){
+      for(let j=0;j<12;j++){
+        if (list[j].videoName == this.state.videoList[i].videoName) {
+          this.state.videoList[i].order = j
+        }
+      }
+    }
+    // console.log(this.state.videoList)
+    this.setState({
+      videoList: this.state.videoList
+    })
+  }
   videoListClick=()=>{
     // console.log(Math.trunc(document.getElementById("videoList").getBoundingClientRect().height),document.getElementById("videoList").scrollHeight)
     // if(Math.trunc(document.getElementById("videoList").getBoundingClientRect().height) >= document.getElementById("videoList").scrollHeight && this.state.isVideoList) {
@@ -6076,365 +5047,71 @@ class Video extends Component {
                   </div>
 
                 </div>
-                <div
-                  className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`}
-                  style={{ position: "relative", display: (this.state.videoOneName) ? '' : 'none' }}
+                {/* <div className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`}
+                  style={{ position: "relative", display: (this.state.videoList[0].videoName) ? '' : 'none' }}
                 >
-                  {
-                    this.state.customAudioed && <img
-                      alt=""
-                      src={require("../../assets/img/yingpin.png").default}
-                      style={{ width: "100%", height: "100%", }}
-                    ></img>
-                  }
                   <div className="video1Div">
                     <video
                       id="video1"
                       autoPlay
                       muted={true}
                       disablePictureInPicture
-                      className={`video1 ${this.state.noVideoOne ? 'isNoVideo' : ''}`}
+                      className={`video1 ${this.state.videoList[0].noVideo ? 'isNoVideo' : ''}`}
                     />
                     <audio id="audio1" autoPlay />
                     <label style={{ display: 'none' }} id="feedId1" type="text" />
 
-                    <div style={{ display: (this.state.videoOneName) ? '' : 'none' }} className={`customerTitle titleSamlle`}>
+                    <div style={{ display: (this.state.videoList[0].videoName) ? '' : 'none' }} className={`customerTitle titleSamlle`}>
                       <div onClick={this.muteOpposite.bind(this, 'video1')}>
                         {
-                          this.state.voiceVideoOne && <img
+                          this.state.videoList[0].mute && <img
                             alt=""
                             src={require("../../assets/img/jingyin.png").default}
                             className="imgClassVoice voiceVideoClass"
                           />
                         }
-                        <canvas style={{ display: (this.state.videoOneName && !this.state.voiceVideoOne) ? '' : 'none', width: '25px', height: '25px', marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView1" width="40" height="70"></canvas>
+                        <canvas style={{ display: (this.state.videoList[0].videoName && !this.state.videoList[0].mute) ? '' : 'none', width: '25px', height: '25px', marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView1" width="40" height="70"></canvas>
                       </div>
                       <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
-                        {this.state.videoOneName}
+                          {this.state.videoList[0].videoName}
                       </div>
 
 
                     </div>
                   </div>
-                </div>
-                <div className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`} style={{ display: (this.state.videoTwoName) ? '' : 'none', }}>
-                  <video
-                    id="video2"
-                    autoPlay
-                    disablePictureInPicture
-                    muted={true}
-                    className={`video ${this.state.noVideoTwo ? 'isNoVideo' : ''}`}
-                  />
-                  <audio id="audio2" autoPlay />
-                  <label style={{ display: 'none' }} id="feedId2" type="text" />
-
-                  <div style={{ display: (this.state.videoTwoName) ? '' : 'none' }} className={`customerTitle titleSamlle`}>
-                    <div onClick={this.muteOpposite.bind(this, 'video2')}>
-                      {
-                        this.state.voiceVideoTwo && <img
-                          alt=""
-                          src={require("../../assets/img/jingyin.png").default}
-                          className="imgClassVoice voiceVideoClass"
-                        />
-                      }
-                      <canvas style={{ display: (this.state.videoTwoName && !this.state.voiceVideoTwo) ? '' : 'none', width: '25px', height: '25px', marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView2" width="40" height="70"></canvas>
-                    </div>
-                    <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
-                      {this.state.videoTwoName}
-                    </div>
-                  </div>
-                </div>
-                <div className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`}
-                  style={{ display: (this.state.videoThreeName) ? '' : 'none' }}>
-                  <video
-                    id="video3"
-                    autoPlay
-                    muted={true}
-                    disablePictureInPicture
-                    className={`video ${this.state.noVideoThree ? 'isNoVideo' : ''}`}
-                  />
-                  <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, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }} className={`customerTitle titleSamlle`}>
-                    <div onClick={this.muteOpposite.bind(this, 'video3')}>
-                      {
-                        this.state.voiceVideoThree && <img
-                          alt=""
-                          src={require("../../assets/img/jingyin.png").default}
-                          className="imgClassVoice voiceVideoClass"
-                        />
-                      }
-                      <canvas style={{ display: (this.state.videoThreeName && !this.state.voiceVideoThree) ? '' : 'none', width: '25px', height: '25px', marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView3" width="40" height="70"></canvas>
-                    </div>
-                    <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
-                      {this.state.videoThreeName}
-                    </div>
-                  </div>
-                </div>
-                <div className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`} style={{ display: (this.state.videoFourName) ? '' : 'none', }}>
-                  <video
-                    id="video4"
-                    autoPlay
-                    muted={true}
-                    disablePictureInPicture
-                    className={`video ${this.state.noVideoFour ? 'isNoVideo' : ''}`}
-                  />
-                  <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, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }} className={`customerTitle titleSamlle`}>
-                    <div onClick={this.muteOpposite.bind(this, 'video4')}>
-                      {
-                        this.state.voiceVideoFour && <img
-                          alt=""
-                          src={require("../../assets/img/jingyin.png").default}
-                          className="imgClassVoice voiceVideoClass"
-                        />
-                      }
-                      <canvas style={{ display: (this.state.videoFourName && !this.state.voiceVideoFour) ? '' : 'none', width: '25px', height: '25px', marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView4" width="40" height="70"></canvas>
-                    </div>
-                    <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
-                      {this.state.videoFourName}
-                    </div>
-                  </div>
-                </div>
-                <div className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`}
-                  style={{ display: (this.state.videoFiveName) ? '' : 'none' }}>
-                  <video
-                    id="video5"
-                    autoPlay
-                    muted={true}
-                    disablePictureInPicture
-                    className={`video ${this.state.noVideoFive ? 'isNoVideo' : ''}`}
-                  />
-                  <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, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }} className={`customerTitle titleSamlle`}>
-                    <div onClick={this.muteOpposite.bind(this, 'video5')}>
-                      {
-                        this.state.voiceVideoFive && <img
-                          alt=""
-                          src={require("../../assets/img/jingyin.png").default}
-                          className="imgClassVoice voiceVideoClass"
-                        />
-                      }
-                      <canvas style={{ display: (this.state.videoFiveName && !this.state.voiceVideoFive) ? '' : 'none', width: '25px', height: '25px', marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView5" width="40" height="70"></canvas>
-                    </div>
-                    <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
-                      {this.state.videoFiveName}
-                    </div>
-                  </div>
-                </div>
-                <div className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`} style={{ display: (this.state.videoSixName) ? '' : 'none', }}>
-                  <video
-                    id="video6"
-                    autoPlay
-                    muted={true}
-                    disablePictureInPicture
-                    className={`video ${this.state.noVideoSix ? 'isNoVideo' : ''}`}
-                  />
-                  <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, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }} className={`customerTitle titleSamlle`}>
-                    <div onClick={this.muteOpposite.bind(this, 'video6')}>
-                      {
-                        this.state.voiceVideoSix && <img
-                          alt=""
-                          src={require("../../assets/img/jingyin.png").default}
-                          className="imgClassVoice voiceVideoClass"
-                        />
-                      }
-                      <canvas style={{ display: (!this.state.voiceVideoSix) ? '' : 'none', width: '25px', height: '25px', marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView6" width="40" height="70"></canvas>
-                    </div>
-                    <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
-                      {this.state.videoSixName}
-                    </div>
-                  </div>
+                </div> */}
 
-                </div>
-                <div
-                  className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`}
-                  style={{ position: "relative", display: (this.state.videoSevenName) ? '' : 'none' }}
-                >
-                  {
-                    this.state.customAudioed && <img
-                      alt=""
-                      src={require("../../assets/img/yingpin.png").default}
-                      style={{ width: "100%", height: "100%", }}
-                    ></img>
-                  }
-                  <div className="video1Div" style={{ display: (!this.state.customAudioed) ? '' : 'none', }}>
+                {
+                this.state.videoList.map((item,index)=>{
+                  // if (index!=0)
+                  return <div key={index} className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`} style={{ display: (item.videoName) ? '' : 'none', 'order': item.order}}>
                     <video
-                      id="video7"
+                      id={'video'+(item.idIndex)}
                       autoPlay
                       muted={true}
                       disablePictureInPicture
-                      className={`video ${this.state.noVideoSeven ? 'isNoVideo' : ''}`}
+                      className={`video ${item.noVideo ? 'isNoVideo' : ''}`}
                     />
-                    <audio id="audio7" autoPlay />
-                    <label style={{ display: 'none' }} id="feedId7" type="text" />
+                    <audio id={'audio'+(item.idIndex)} autoPlay />
+                    <label style={{ display: 'none' }} id={'feedId'+(item.idIndex)} type="text" />
+                    
+                    <div style={{ display: (item.videoName) ? '' : 'none'}} className={`customerTitle titleSamlle`}>
+                    {
+                      item.mute && <img
+                        alt=""
+                        src={require("../../assets/img/jingyin.png").default}
+                        className="imgClassVoice voiceVideoClass"
+                      />
+                    }
+                    <canvas style={{ display: (item.videoName && !item.mute) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px' }} className="canvasClassOne" id={"subscribe_volumeView"+(item.idIndex)} width="40" height="70"></canvas>
 
-                    <div style={{ display: (this.state.videoSevenName) ? '' : 'none' }} className={`customerTitle titleSamlle`}>
-                      <div onClick={this.muteOpposite.bind(this, 'video7')}>
-                        {
-                          this.state.voiceVideoSeven && <img
-                            alt=""
-                            src={require("../../assets/img/jingyin.png").default}
-                            className="imgClassVoice voiceVideoClass"
-                          />
-                        }
-                        <canvas style={{ display: (this.state.videoSevenName && !this.state.voiceVideoSeven) ? '' : 'none', width: '25px', height: '25px', marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView7" width="40" height="70"></canvas>
-                      </div>
-                      <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
-                        {this.state.videoSevenName}
+                      <div className='titleName' style={{ color: this.props.titleColor,fontSize: this.props.fontSize + 'px',fontFamily : this.props.fontFamily}}>
+                        {item.videoName}
                       </div>
-
-
-                    </div>
-                  </div>
-                </div>
-                <div className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`} style={{ display: (this.state.videoEightName) ? '' : 'none', }}>
-                  <video
-                    id="video8"
-                    autoPlay
-                    muted={true}
-                    disablePictureInPicture
-                    className={`video ${this.state.noVideoEight ? 'isNoVideo' : ''}`}
-                  />
-                  <audio id="audio8" autoPlay />
-                  <label style={{ display: 'none' }} id="feedId8" type="text" />
-
-                  <div style={{ display: (this.state.videoEightName) ? '' : 'none' }} className={`customerTitle titleSamlle`}>
-                    <div onClick={this.muteOpposite.bind(this, 'video8')}>
-                      {
-                        this.state.voiceVideoEight && <img
-                          alt=""
-                          src={require("../../assets/img/jingyin.png").default}
-                          className="imgClassVoice voiceVideoClass"
-                        />
-                      }
-                      <canvas style={{ display: (this.state.videoEightName && !this.state.voiceVideoEight) ? '' : 'none', width: '25px', height: '25px', marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView8" width="40" height="70"></canvas>
-                    </div>
-                    <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
-                      {this.state.videoEightName}
-                    </div>
-                  </div>
-                </div>
-                <div className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`} style={{ display: (this.state.videoNineName) ? '' : 'none', }}>
-                  <video
-                    id="video9"
-                    autoPlay
-                    muted={true}
-                    disablePictureInPicture
-                    className={`video ${this.state.noVideoNine ? 'isNoVideo' : ''}`}
-                  />
-                  <audio id="audio9" autoPlay />
-                  <label style={{ display: 'none' }} id="feedId9" type="text" />
-
-                  <div style={{ display: (this.state.videoNineName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }} className={`customerTitle titleSamlle`}>
-                    <div onClick={this.muteOpposite.bind(this, 'video9')}>
-                      {
-                        this.state.voiceVideoNine && <img
-                          alt=""
-                          src={require("../../assets/img/jingyin.png").default}
-                          className="imgClassVoice voiceVideoClass"
-                        />
-                      }
-                      <canvas style={{ display: (this.state.videoNineName && !this.state.voiceVideoSix) ? '' : 'none', width: '25px', height: '25px', marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView9" width="40" height="70"></canvas>
-                    </div>
-                    <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
-                      {this.state.videoNineName}
-                    </div>
-                  </div>
-
-                </div>
-                <div className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`}
-                  style={{ display: (this.state.videoTenName) ? '' : 'none' }}>
-                  <video
-                    id="video10"
-                    autoPlay
-                    muted={true}
-                    disablePictureInPicture
-                    className={`video ${this.state.noVideoTen ? 'isNoVideo' : ''}`}
-                  />
-                  <audio id="audio10" autoPlay />
-                  <label style={{ display: 'none' }} id="feedId10" type="text" />
-
-                  <div style={{ display: (this.state.videoTenName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }} className={`customerTitle titleSamlle`}>
-                    <div onClick={this.muteOpposite.bind(this, 'video10')}>
-                      {
-                        this.state.voiceVideoTen && <img
-                          alt=""
-                          src={require("../../assets/img/jingyin.png").default}
-                          className="imgClassVoice voiceVideoClass"
-                        />
-                      }
-                      <canvas style={{ display: (this.state.videoTenName && !this.state.voiceVideoTen) ? '' : 'none', width: '25px', height: '25px', marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView10" width="40" height="70"></canvas>
-                    </div>
-                    <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
-                      {this.state.videoTenName}
                     </div>
                   </div>
-                </div>
-                <div className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`} style={{ display: (this.state.videoElevenName) ? '' : 'none', }}>
-                  <video
-                    id="video11"
-                    autoPlay
-                    muted={true}
-                    disablePictureInPicture
-                    className={`video ${this.state.noVideoEleven ? 'isNoVideo' : ''}`}
-                  />
-                  <audio id="audio11" autoPlay />
-                  <label style={{ display: 'none' }} id="feedId11" type="text" />
-
-                  <div style={{ display: (this.state.videoElevenName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }} className={`customerTitle titleSamlle`}>
-                    <div onClick={this.muteOpposite.bind(this, 'video11')}>
-                      {
-                        this.state.voiceVideoEleven && <img
-                          alt=""
-                          src={require("../../assets/img/jingyin.png").default}
-                          className="imgClassVoice voiceVideoClass"
-                        />
-                      }
-                      <canvas style={{ display: (this.state.videoElevenName && !this.state.voiceVideoEleven) ? '' : 'none', width: '25px', height: '25px', marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView11" width="40" height="70"></canvas>
-                    </div>
-                    <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
-                      {this.state.videoElevenName}
-                    </div>
-                  </div>
-                </div>
-                <div className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`}
-                  style={{ display: (this.state.videoTwelveName) ? '' : 'none' }}>
-                  <video
-                    id="video12"
-                    autoPlay
-                    muted={true}
-                    disablePictureInPicture
-                    className={`video ${this.state.noVideoTwelve ? 'isNoVideo' : ''}`}
-                  />
-                  <audio id="audio12" autoPlay />
-                  <label style={{ display: 'none' }} id="feedId12" type="text" />
-
-                  <div style={{ display: (this.state.videoTwelveName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }} className={`customerTitle titleSamlle`}>
-                    <div onClick={this.muteOpposite.bind(this, 'video12')}>
-                      {
-                        this.state.voiceVideoTwelve && <img
-                          alt=""
-                          src={require("../../assets/img/jingyin.png").default}
-                          className="imgClassVoice voiceVideoClass"
-                        />
-                      }
-                      <canvas style={{ display: (this.state.videoTwelveName && !this.state.voiceVideoTwelve) ? '' : 'none', width: '25px', height: '25px', marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView12" width="40" height="70"></canvas>
-                    </div>
-                    <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
-                      {this.state.videoTwelveName}
-                    </div>
-                  </div>
-                </div>
-
+                })
+              }
 
               </div>
               <img id="icon_huatong" style={{ display: 'none' }} src={require("../../assets/img/icon_huatong.png").default}></img>