react_hsbc_teller 0.8.1 → 0.8.2

package/packages/pages/video/video.jsx

@@ -28,7 +28,11 @@ const LEAVE_TYPE = {
   ROOM_DESTROYED: -1, // 房间异常
 }
 let pictureInPictureVideo = ''
+message.config({
+  getContainer: ()=>document.getElementById('allHSBC')
+})
 @injectIntl
+
 class Video extends Component {
   constructor(props) {
     super(props)
@@ -37,6 +41,7 @@ class Video extends Component {
   cancel = axios.CancelToken.source()
   signCanvas = React.createRef();
   state = {
+    isJoinRoom: false,
     sessionType: false,
     isWhiteboard: false,
     isSelect: '',
@@ -115,7 +120,19 @@ class Video extends Component {
     imStatus: false,
     imJoinRoom: false,
     analyserData: new Map(),
-    analyserHeight: new Map()
+    analyserHeight: 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,
   };
   // eslint-disable-next-line no-undef
   test_controller = '';
@@ -142,7 +159,8 @@ class Video extends Component {
       console.log(result);
       this.setState({
         imRoomId: result.imRoomId,
-        sessionId: result.sessionId
+        sessionId: result.sessionId,
+        loading: false,
       });
       // eslint-disable-next-line no-undef
       if(this.state.imStatus) {
@@ -165,15 +183,21 @@ class Video extends Component {
       })
     } catch (err) {
       console.error(err);
+      
       this.setState({
         sessionType: false
       })
-      this.props.createRoomCallback({
-        type: 2,
-        errorManage: '保存房间信息失败',
-        errorCode:-9,
-        data: {}
-      })
+      if(err.status == 502 || err.status== 404) {
+        this.roomCallBack(2, '连接服务器失败',-11)
+      } else {
+        this.props.createRoomCallback({
+          type: 2,
+          errorManage: '保存房间信息失败',
+          errorCode:-9,
+          data: {}
+        })
+      }
+      
     }
   };
   /**
@@ -203,7 +227,12 @@ class Video extends Component {
       }
     } catch (err) {
       console.error(err);
-      this.roomCallBack(2, '签名失败',-8)
+      if(err.status == 502 || err.status== 404) {
+        this.roomCallBack(2, '连接服务器失败',-11)
+      } else {
+        this.roomCallBack(2, '签名失败',-8)
+      }
+      
     }
   };
   handleEdit = () => {
@@ -357,6 +386,9 @@ class Video extends Component {
 
 
     } catch (err) {
+      if(err.status == 502 || err.status== 404) {
+        this.roomCallBack(2, '连接服务器失败',-11)
+      }
       console.error(err);
     }
   };
@@ -376,6 +408,9 @@ class Video extends Component {
 
     } catch (err) {
       console.error(err);
+      if(err.status == 502 || err.status== 404) {
+        this.roomCallBack(2, '连接服务器失败',-11)
+      }
     }
   };
   dataURLtoFile = (dataURI, type) => {
@@ -514,13 +549,15 @@ class Video extends Component {
       message.error({
         content: value,
         icon: <img src={require("../../assets/img/tooltips2_fail.png").default} alt="" ></img>,
-        className: 'errorClassName'
+        className: 'errorClassName',
+        top: 200
       })
     } else if(valueOne == 'success') {
       message.success({
         content: value,
         icon: <img src={require("../../assets/img/tooltips1_pass.png").default} alt="" ></img>,
-        className: 'successClassName'
+        className: 'successClassName',
+        top: 200
       })
     }
     
@@ -575,49 +612,56 @@ class Video extends Component {
       list.push({
         name: 'video1',
         title: this.state.videoOneName,
-        voice: 'voiceVideoOne'
+        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 : '坐席',
-        voice: 'voiceStatue'
+        voice: 'voiceStatue',
+        noVideo: false
       })
     }
     if (document.getElementById('video2').name) {
       list.push({
         name: 'video2',
         title: this.state.videoTwoName,
-        voice: 'voiceVideoTwo'
+        voice: 'voiceVideoTwo',
+        noVideo: this.state.noVideoTwo
       })
     }
     if (document.getElementById('video3').name) {
       list.push({
         name: 'video3',
         title: this.state.videoThreeName,
-        voice: 'voiceVideoThree'
+        voice: 'voiceVideoThree',
+        noVideo: this.state.noVideoThree
       })
     }
     if (document.getElementById('video4').name) {
       list.push({
         name: 'video4',
         title: this.state.videoFourName,
-        voice: 'voiceVideoFour'
+        voice: 'voiceVideoFour',
+        noVideo: this.state.noVideoFour
       })
     }
     if (document.getElementById('video5').name) {
       list.push({
         name: 'video5',
         title: this.state.videoFiveName,
-        voice: 'voiceVideoFive'
+        voice: 'voiceVideoFive',
+        noVideo: this.state.noVideoFive
       })
     }
     if (document.getElementById('video6').name) {
       list.push({
         name: 'video6',
         title: this.state.videoSixName,
-        voice: 'voiceVideoSix'
+        voice: 'voiceVideoSix',
+        noVideo: this.state.noVideoSix
       })
     }
 
@@ -625,42 +669,48 @@ class Video extends Component {
       list.push({
         name: 'video7',
         title: this.state.videoSevenName,
-        voice: 'voiceVideoSeven'
+        voice: 'voiceVideoSeven',
+        noVideo: this.state.noVideoSeven
       })
     }
     if (document.getElementById('video8').name) {
       list.push({
         name: 'video8',
         title: this.state.videoEightName,
-        voice: 'voiceVideoEight'
+        voice: 'voiceVideoEight',
+        noVideo: this.state.noVideoEight
       })
     }
     if (document.getElementById('video9').name) {
       list.push({
         name: 'video9',
         title: this.state.videoNineName,
-        voice: 'voiceVideoNine'
+        voice: 'voiceVideoNine',
+        noVideo: this.state.noVideoNine
       })
     }
     if (document.getElementById('video10').name) {
       list.push({
         name: 'video10',
         title: this.state.videoTenName,
-        voice: 'voiceVideoTen'
+        voice: 'voiceVideoTen',
+        noVideo: this.state.noVideoTen
       })
     }
     if (document.getElementById('video11').name) {
       list.push({
         name: 'video11',
         title: this.state.videoElevenName,
-        voice: 'voiceVideoEleven'
+        voice: 'voiceVideoEleven',
+        noVideo: this.state.noVideoEleven
       })
     }
     if (document.getElementById('video12').name) {
       list.push({
         name: 'video12',
         title: this.state.videoTwelveName,
-        voice: 'voiceVideoTwelve'
+        voice: 'voiceVideoTwelve',
+        noVideo: this.state.noVideoTwelve
       })
     }
     console.log(list)
@@ -686,8 +736,13 @@ class Video extends Component {
         } else {
           newVideoHeight = videoHeight * 640 / videoWidth;
         }
+        if(list[i].noVideo){
+          cobj.fillStyle = '#333';
+        cobj.fillRect((640 - newVideoWidth) / 2, 360 * i, newVideoWidth, newVideoHeight)
+        } else {
+          cobj.drawImage(videoDiv, (640 - newVideoWidth) / 2, 360 * i, 640, 360);
 
-        cobj.drawImage(videoDiv, (640 - newVideoWidth) / 2, 360 * i, newVideoWidth, newVideoHeight);
+        }
         cobj.beginPath();
         cobj.strokeStyle = this.props.titleColor;
         cobj.fillStyle = this.props.titleBackground;
@@ -833,6 +888,9 @@ class Video extends Component {
     });
   }
   roomCallBack = (type, manege,code) => {
+    this.setState({
+      loading: false,
+    })
     if (this.state.sessionId) {
       this.props.joinRoomCallback({
         type: type,
@@ -894,6 +952,158 @@ class Video extends Component {
       //     this.endSession('customerHangUp')
       //   }
       // } 
+      else if (Mival.typeId == 3002) {
+        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
+            })
+          }
+          this.pictureInPicture('Refresh')
+        }
+      }
+      else if (Mival.typeId == 3003) {
+        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
+            })
+          }
+          this.pictureInPicture('Refresh')
+        }
+      }
       else if (Mival.typeId == 1215) {
         // 一炒多的图片
         if (Mival.sessionId == this.state.sessionId) {
@@ -1312,7 +1522,8 @@ class Video extends Component {
     this.test_controller.OnJoinRoomFailed = (err_code, err_msg) => {
       console.log('加入房间失败', err_code, err_msg)
       this.setState({
-        sessionType: false
+        sessionType: false,
+        isJoinRoom: true
       })
       this.roomCallBack(2, '加入失败',-5)
     };
@@ -1785,12 +1996,14 @@ class Video extends Component {
         this.setState({
           publishDevic: 1,
           isSharedScreen: false,
-          screenName: '投屏'
+          screenName: '投屏',
+          sessionType: false
         });
         this.tabTitlesClick('RMScreen', 'delect')
         if (this.state.isPictureInPicture) {
           document.exitPictureInPicture()
         }
+
       }
     };
     // 取消订阅媒体流成功
@@ -1906,7 +2119,10 @@ class Video extends Component {
     // 退出房间回调
     this.test_controller.OnLeaveRoom = (leaveType) => {
       console.log('退出房间回调', leaveType);
-      this.finishSession()
+      if(!this.state.isJoinRoom) {
+        this.finishSession()
+      }
+      
     };
     // 推送“退出房间者”给与会者
     this.test_controller.OnParticipantLeaveRoom = (
@@ -2227,6 +2443,9 @@ class Video extends Component {
 
     } catch (err) {
       console.error(err);
+      if(err.status == 502 || err.status== 404) {
+        this.roomCallBack(2, '连接服务器失败',-11)
+      }
     }
   };
   finishSession = async () => {
@@ -2239,6 +2458,9 @@ class Video extends Component {
           tellerId: this.props.tellerAccount
         });
       } catch (err) {
+        if(err.status == 502 || err.status== 404) {
+          this.roomCallBack(2, '连接服务器失败',-11)
+        }
       }
     }
     this.setState({
@@ -2247,7 +2469,7 @@ class Video extends Component {
       isPictureInPicture: false,
       imStatus: false,
       imJoinRoom: false,
-      sessionType: true
+      sessionType: false
     });
     this.props.onLeaveRoom({
       code: LEAVE_TYPE.TELLER_EXIT,
@@ -2307,7 +2529,7 @@ class Video extends Component {
       this.setState({
         sessionType: false
       })
-      this.roomCallBack(2, '创建房间失败',-4)
+      this.roomCallBack(2, '加载资源失败',-10)
       
       
   })
@@ -2357,9 +2579,6 @@ class Video extends Component {
             script.onload = () => {
               that.test_controller = new McuController();
               that.mountClick()
-              that.setState({
-                loading: false,
-              })
             }
           }
         } else {
@@ -2729,7 +2948,9 @@ class Video extends Component {
         this.messageClick('发送失败','error')
       }
     } catch (err) {
-
+      if(err.status == 502 || err.status== 404) {
+        this.roomCallBack(2, '连接服务器失败',-11)
+      }
     }
   }
   handleCancelInvitation = () => {
@@ -2831,7 +3052,7 @@ class Video extends Component {
       console.log(result)
       let data
       if (result.code == 200) {
-        data = result.data.userInfo ? result.data.userInfo.userName ? result.data.userInfo.userName : '' : ''
+        data = result.data.username ? result.data.username : ''
       } else {
         this.messageClick('查询失败','error')
       }
@@ -2889,7 +3110,9 @@ class Video extends Component {
       }
       this.pictureInPicture('Refresh')
     } catch (err) {
-
+      if(err.status == 502 || err.status== 404) {
+        this.roomCallBack(2, '连接服务器失败',-11)
+      }
     }
   }
   linkClick=()=>{
@@ -2944,7 +3167,9 @@ class Video extends Component {
         this.messageClick('签字失败','error')
       }
     } catch (err) {
-
+      if(err.status == 502 || err.status== 404) {
+        this.roomCallBack(2, '连接服务器失败',-11)
+      }
     }
   }
   handleOkSign = () => {
@@ -3133,7 +3358,7 @@ class Video extends Component {
       margin: 'auto'
     };
     return (
-      <div className="all">
+      <div className="all" id="allHSBC">
         <Spin spinning={this.state.loading} tip="视频初始化中...">
           <Header></Header>
           <div className="health">
@@ -3243,7 +3468,7 @@ class Video extends Component {
                     id="video1"
                     autoPlay
                     muted={true}
-                    className="video1"
+                    className={`video1 ${this.state.noVideoOne ? 'isNoVideo' : ''}`}
                   />
                   <audio id="audio1" autoPlay />
                   <label style={{ display: 'none' }} id="feedId1" type="text" />
@@ -3271,7 +3496,7 @@ class Video extends Component {
                   id="video2"
                   autoPlay
                   muted={true}
-                  className="video"
+                  className={`video ${this.state.noVideoTwo ? 'isNoVideo' : ''}`}
                 />
                 <audio id="audio2" autoPlay />
                 <label style={{ display: 'none' }} id="feedId2" type="text" />
@@ -3297,7 +3522,7 @@ class Video extends Component {
                   id="video3"
                   autoPlay
                   muted={true}
-                  className="video"
+                  className={`video ${this.state.noVideoThree ? 'isNoVideo' : ''}`}
                 />
                 <audio id="audio3" autoPlay />
                 <label style={{ display: 'none' }} id="feedId3" type="text" />
@@ -3322,7 +3547,7 @@ class Video extends Component {
                   id="video4"
                   autoPlay
                   muted={true}
-                  className="video"
+                  className={`video ${this.state.noVideoFour ? 'isNoVideo' : ''}`}
                 />
                 <audio id="audio4" autoPlay />
                 <label style={{ display: 'none' }} id="feedId4" type="text" />
@@ -3348,7 +3573,7 @@ class Video extends Component {
                   id="video5"
                   autoPlay
                   muted={true}
-                  className="video"
+                  className={`video ${this.state.noVideoFive ? 'isNoVideo' : ''}`}
                 />
                 <audio id="audio5" autoPlay />
                 <label style={{ display: 'none' }} id="feedId5" type="text" />
@@ -3373,7 +3598,7 @@ class Video extends Component {
                   id="video6"
                   autoPlay
                   muted={true}
-                  className="video"
+                  className={`video ${this.state.noVideoSix ? 'isNoVideo' : ''}`}
                 />
                 <audio id="audio6" autoPlay />
                 <label style={{ display: 'none' }} id="feedId6" type="text" />
@@ -3410,7 +3635,7 @@ class Video extends Component {
                     id="video7"
                     autoPlay
                     muted={true}
-                    className="video"
+                    className={`video ${this.state.noVideoSeven ? 'isNoVideo' : ''}`}
                   />
                   <audio id="audio7" autoPlay />
                   <label style={{ display: 'none' }} id="feedId7" type="text" />
@@ -3438,7 +3663,7 @@ class Video extends Component {
                   id="video8"
                   autoPlay
                   muted={true}
-                  className="video"
+                  className={`video ${this.state.noVideoEight ? 'isNoVideo' : ''}`}
                 />
                 <audio id="audio8" autoPlay />
                 <label style={{ display: 'none' }} id="feedId8" type="text" />
@@ -3463,7 +3688,7 @@ class Video extends Component {
                   id="video9"
                   autoPlay
                   muted={true}
-                  className="video"
+                  className={`video ${this.state.noVideoNine ? 'isNoVideo' : ''}`}
                 />
                 <audio id="audio9" autoPlay />
                 <label style={{ display: 'none' }} id="feedId9" type="text" />
@@ -3490,7 +3715,7 @@ class Video extends Component {
                   id="video10"
                   autoPlay
                   muted={true}
-                  className="video"
+                  className={`video ${this.state.noVideoTen ? 'isNoVideo' : ''}`}
                 />
                 <audio id="audio10" autoPlay />
                 <label style={{ display: 'none' }} id="feedId10" type="text" />
@@ -3515,7 +3740,7 @@ class Video extends Component {
                   id="video11"
                   autoPlay
                   muted={true}
-                  className="video"
+                  className={`video ${this.state.noVideoEleven ? 'isNoVideo' : ''}`}
                 />
                 <audio id="audio11" autoPlay />
                 <label style={{ display: 'none' }} id="feedId11" type="text" />
@@ -3541,7 +3766,7 @@ class Video extends Component {
                   id="video12"
                   autoPlay
                   muted={true}
-                  className="video"
+                  className={`video ${this.state.noVideoTwelve ? 'isNoVideo' : ''}`}
                 />
                 <audio id="audio12" autoPlay />
                 <label style={{ display: 'none' }} id="feedId12" type="text" />
@@ -3693,8 +3918,14 @@ class Video extends Component {
               {camera}
               <div>麦克风设备：</div>
               {microphone}
-              <div>扬声器设备：</div>
+              {
+                this.state.speakerList.length > 0 &&
+                 <span>
+                   <div>扬声器设备：</div>
               {speaker}
+                 </span>
+              }
+              
             </div>
           </Modal>
           <video className="mixedvideo" id="mixedvideo" autoPlay muted={true} width="0" height="0"></video>