react_hsbc_teller 0.9.9 → 1.0.3

package/packages/pages/video/video.jsx

@@ -41,6 +41,8 @@ class Video extends Component {
   cancel = axios.CancelToken.source()
   signCanvas = React.createRef();
   state = {
+    whiteboardWidth: '',
+    whiteboardHeight: '',
     laveRoomSharedScreen: false,
     isJoinRoom: false,
     sessionType: false,
@@ -68,7 +70,6 @@ class Video extends Component {
     voiceImg: voiceImgOpen,
     voiceName: '静音',
     isCustomer: false,
-    publishDevic: 1,
     isSharedScreen: false,
     isSuspend: false,
     audioed: false,
@@ -152,9 +153,10 @@ class Video extends Component {
         mtoken: this.state.rtoken
       });
       console.log(result);
+      this.state.imRoomId = result.imRoomId,
+      this.state.sessionId = result.sessionId,
       this.setState({
-        imRoomId: result.imRoomId,
-        sessionId: result.sessionId,
+
         loading: false,
       });
       let publish_config = {}
@@ -169,9 +171,7 @@ class Video extends Component {
       // eslint-disable-next-line no-undef
       if(this.state.imStatus) {
         joinRoom((this.props.tellerAccount + '@' + JSON.parse(window.sessionStorage.getItem('sigData')).hostname), this.state.imRoomId)
-        this.setState({
-          imJoinRoom:true
-        })
+          this.state.imJoinRoom =true
         console.log('加入IM房间')
       }
       this.props.createRoomCallback({
@@ -187,10 +187,8 @@ class Video extends Component {
       })
     } catch (err) {
       console.error(err);
-      
-      this.setState({
-        sessionType: false
-      })
+    
+      this.state.sessionType = false
       if(err.status == 502 || err.status== 404) {
         this.roomCallBack(2, '连接服务器失败','SYS-02')
       } else {
@@ -214,11 +212,9 @@ class Video extends Component {
       let result = await API.mpaasSig({ account: data.account, type: data.type });
       console.log(result);
       window.sessionStorage.setItem('alimpassSig', result.mpsSig);
-      this.setState({
-        workSpaceId: result.workSpaceId,
-        appId: result.appId,
-        bizName: result.bizName
-      });
+        this.state.workSpaceId = result.workSpaceId,
+        this.state.appId = result.appId,
+        this.state.bizName = result.bizName
       // const data1={
       //   hostname: 'im.uat.dsp.hsbcfts.com.cn',
       //   webPort: '443',
@@ -569,8 +565,8 @@ class Video extends Component {
   // 人脸识别
   facialRecognition = () => {
     if (this.isFileSuccuse()) {
+      this.state.faceCustomerType = 1
       this.setState({
-        faceCustomerType: 1,
         titleModal: '人脸识别'
       })
       this.selectCustomer('facial')
@@ -578,8 +574,8 @@ class Video extends Component {
   };
   ocrClick = () => {
     if (this.isFileSuccuse()) {
+      this.state.faceCustomerType = 2
       this.setState({
-        faceCustomerType: 2,
         titleModal: 'OCR识别'
       })
       this.selectCustomer('ocr')
@@ -873,18 +869,14 @@ class Video extends Component {
       //可获取画中画窗口的一些数据，如宽高等
       pictureInPictureVideo.style.display = 'block';
       pictureInPictureVideo.play();
-      this.setState({
-        isPictureInPicture: true
-      })
+        this.state.isPictureInPicture = true
     });
 
     pictureInPictureVideo.addEventListener('leavepictureinpicture', (event) => {
       pictureInPictureVideo.srcObject = null;
       pictureInPictureVideo.style.display = "none";
       clearInterval(interval);
-      this.setState({
-        isPictureInPicture: false
-      })
+      this.state.isPictureInPicture = false
     });
   }
   roomCallBack = (type, manege,code) => {
@@ -1141,14 +1133,10 @@ class Video extends Component {
           } else if (Mival.type == 2) {
             this.tabTitlesClick('RMWhiteboard', 'delect')
             if (this.state.isSharedScreen) {
-              this.setState({
-                isWhiteboard: false,
-              })
+              this.state.isWhiteboard = false
             } else {
               this.test_controller.UnPublish(document.getElementById('video20').name)
-              this.setState({
-                isWhiteboard: false,
-              })
+              this.state.isWhiteboard = false
             }
           }
 
@@ -1331,21 +1319,17 @@ class Video extends Component {
     window.IMOpenfire = msg =>{
       console.log('im登录', msg)
       if(!msg) {
-        this.setState({
-          sessionType: false
-        })
+        this.state.sessionType = false
         this.roomCallBack(2, 'im建立连接失败',5)
       } else {
-        this.setState({
-          imStatus: msg
-        })
-        if(this.state.imRoomId && !this.state.imJoinRoom) {
-          joinRoom((this.props.tellerAccount + '@' + JSON.parse(window.sessionStorage.getItem('sigData')).hostname), this.state.imRoomId)
-          this.setState({
-            imJoinRoom:true
-          })
-          console.log('加入im房间')
-        }
+        this.state.imStatus = msg
+        setTimeout(() => {
+          if(this.state.imRoomId && !this.state.imJoinRoom) {
+            joinRoom((this.props.tellerAccount + '@' + JSON.parse(window.sessionStorage.getItem('sigData')).hostname), this.state.imRoomId)
+              this.state.imJoinRoom =true
+            console.log('IMOpenfire 加入im房间')
+          }
+        }, 200);
       }
 
     }
@@ -1456,9 +1440,7 @@ class Video extends Component {
     // 获取设备失败
     this.test_controller.OnGetDevicesFailed = (code, msg) => {
       console.log('获取设备失败', code, msg)
-      this.setState({
-        sessionType: false
-      })
+      this.state.sessionType = false
       this.messageClick('获取设备失败，请检查摄像头设备是否可用或是否禁用摄像头','error')
       this.roomCallBack(2, '获取设备失败',1)
     };
@@ -1469,9 +1451,7 @@ class Video extends Component {
     };
     this.test_controller.OnConnectFailed = (code, msg) => {
       console.log('建立连接失败', code, msg)
-      this.setState({
-        sessionType: false
-      })
+      this.state.sessionType = false
       this.roomCallBack(2, '连接失败',2)
     };
     // 断开连接回调
@@ -1486,9 +1466,7 @@ class Video extends Component {
     // 初始化房间失败
     this.test_controller.OnInitRoomConfigFail = (err_code, err_msg) => {
       console.log('初始化房间失败', err_code, err_msg)
-      this.setState({
-        sessionType: false
-      })
+      this.state.sessionType = false
       this.roomCallBack(2, '初始化失败',3)
     };
     // 初始化成功回调
@@ -1506,18 +1484,14 @@ class Video extends Component {
 
     this.test_controller.OnCreateRoomSucc = (room_id, rtoken) => {
       console.log('创建房间成功', room_id, rtoken);
-      this.setState({
-        channelId: room_id,
-        rtoken: rtoken
-      });
+        this.state.channelId = room_id,
+        this.state.rtoken = rtoken
       this.createRoom()
     };
     // 创建房间失败
     this.test_controller.OnCreateRoomFailed = (err_code, err_msg) => {
       console.log('创建房间失败', err_code, err_msg)
-      this.setState({
-        sessionType: false
-      })
+      this.state.sessionType = false
       this.roomCallBack(2, '创建房间失败',7)
     };
     // 初始化⾳视频成功
@@ -1554,12 +1528,10 @@ class Video extends Component {
       //   isJoinRoom: true
       // })
       // this.roomCallBack(2, '加入失败',-5)
-      this.setState({
-        channelId: '',
-        rtoken: '',
-        sessionId: '',
-        imRoomId: ''
-      });
+        this.state.channelId = '',
+        this.state.rtoken = '',
+        this.state.sessionId = '',
+        this.state.imRoomId = ''
       
       this.test_controller.Disconnect()
       let data = {
@@ -1572,9 +1544,7 @@ class Video extends Component {
     // 发布媒体流成功
     this.test_controller.OnPublishSucc = (sid) => {
       console.log('发布媒体流成功', sid)
-      this.setState({
-        sessionType: true
-      })
+      this.state.sessionType = true
       if (sid == document.getElementById('video20').name) {
         callNimIM('sendCustomCmdMsg', {
           customId: this.state.imRoomId,
@@ -1612,9 +1582,7 @@ class Video extends Component {
     // 发布媒体流失败
     this.test_controller.OnPublishFailed = (sid, err_code, err_msg) => {
       console.log('发布媒体流失败', sid, err_code, err_msg)
-      this.setState({
-        sessionType: false
-      })
+      this.state.sessionType = false
       this.roomCallBack(2, '发布失败',4)
     };
     // 订阅媒体流成功
@@ -1644,9 +1612,7 @@ class Video extends Component {
               tag: itemOne.tag
             });
             console.log(array, newArray, this.state.roomCustomerList);
-            this.setState({
-              roomCustomerList: newArray
-            })
+              this.state.roomCustomerList = newArray
             let config_param
             if (itemOne.tag == 'VIDEO_SOURCE_SCREEN') {
               config_param = {
@@ -1787,11 +1753,7 @@ class Video extends Component {
     this.test_controller.OnNewJoinerIn = (participant) => {
       console.log('新加⼊房间者', participant);
       // this.test_controller.ChangeStreamSize(document.getElementById('publish_video1').name, 5)
-      this.setState(
-        {
-          isCustomer: true
-        }
-      )
+          this.state.isCustomer= true
     };
     // 推送“有新发布”给与会者
     this.test_controller.OnNewPublish = (feed) => {
@@ -1848,9 +1810,7 @@ class Video extends Component {
         tag: feed.tag
       });
       console.log(array, newArray, this.state.roomCustomerList);
-      this.setState({
-        roomCustomerList: newArray
-      })
+      this.state.roomCustomerList = newArray
       let config_param
       if (feed.uid != this.state.tellerAccount) {
         if (feed.tag == 'VIDEO_SOURCE_SCREEN') {
@@ -2036,11 +1996,11 @@ class Video extends Component {
             'tellerId': this.props.tellerAccount
           })
         })
+        this.state.sessionType = false
+        this.state.isSharedScreen = false
         this.setState({
-          publishDevic: 1,
-          isSharedScreen: false,
-          screenName: '投屏',
-          sessionType: false
+          
+          screenName: '投屏'
         });
         this.tabTitlesClick('RMScreen', 'delect')
         if (this.state.isPictureInPicture) {
@@ -2146,9 +2106,8 @@ class Video extends Component {
 
       if (this.state.roomCustomerList.length == 0) {
         // this.test_controller.ChangeStreamSize(document.getElementById('publish_video1').name, 3)
-        this.setState({
-          isCustomer: false
-        })
+          this.state.isCustomer = false
+        
       }
     };
     // 推送“取消订阅”给与会者 OnUnSubscribe(unsubscriber,feed)
@@ -2179,9 +2138,7 @@ class Video extends Component {
     // 开始服务端录制成功
     this.test_controller.OnStartRemoteRecordSucc = (record_id) => {
       console.log('开始服务端录制成功', record_id);
-      this.setState({
-        recordId: record_id
-      });
+      this.state.recordId = record_id
     };
     // 开始服务端录制失败
     this.test_controller.OnStartRemoteRecordFailed = (
@@ -2442,38 +2399,21 @@ class Video extends Component {
         ctx.fillRect(startX, startY, width, height)
         if(document.getElementById('publish_video1').name == sid) {
           this.state.analyserHeight.set(sid,energy/80)
-          this.setState({
-            analyserHeight: this.state.analyserHeight
-          })
+            this.state.analyserHeight = this.state.analyserHeight
         }
 
       }
       requestAnimationFrame(this.test_controller.OnVolumeAnalyser.bind(this, sid, analyser));
       
       this.state.analyserData.set(sid, analyser)
-      this.setState({
-        analyserData: this.state.analyserData
-      })
+        this.state.analyserData = this.state.analyserData
     }
     // 停止共享
     this.test_controller.OnDesktopDisplayClosed = () => {
       console.log('OnDesktopDisplayClosed', this.state.isSharedScreen ,this.state.laveRoomSharedScreen)
-      // if(this.state.laveRoomSharedScreen) {
-      //   if (this.state.roomCustomerList.length == 0 && this.state.sessionType) {
-      //     this.finishSessionClick()
-      //   }
-      //   if (this.test_controller&&this.state.sessionType) {
-      //     this.test_controller.LeaveRoom()
-      //     this.test_controller.Disconnect()
-      //   }
-      //   if(this.state.imStatus) {
-      //     disconnect();
-      //   }
-      // } else {
-        if (this.state.isSharedScreen) {
+        if (!this.state.laveRoomSharedScreen && this.state.isSharedScreen) {
           this.sharedScreen()
         }
-      // }
       
     }
   }
@@ -2530,6 +2470,7 @@ class Video extends Component {
       this.test_controller.Disconnect()
     }
     if(this.state.imStatus) {
+      console.log('disconnect断开连接')
       disconnect();
     }
     
@@ -2553,28 +2494,32 @@ class Video extends Component {
     this.timer && clearInterval(this.timer);
     if(this.state.isSharedScreen) {
       this.setState({
-        publishDevic: 1,
-        isSharedScreen: false,
         screenName: '投屏',
-        laveRoomSharedScreen: true
-      });
+      })
+      this.state.isSharedScreen = false
+      this.state.laveRoomSharedScreen = true
         // this.test_controller.UnPublish(document.getElementById('video20').name)
         if (this.state.isPictureInPicture) {
           document.exitPictureInPicture()
         }
-        console.log('isSharedScreen', this.state.isSharedScreen)
+        
       this.props.onLeaveRoom({
         code: LEAVE_TYPE.TELLER_EXIT,
         errMsg: '坐席退出'
       })
     } else {
+      this.setState({
+        screenName: '投屏',
+      });
+      this.state.isSharedScreen = false
+      this.state.laveRoomSharedScreen = true
       this.props.onLeaveRoom({
         code: LEAVE_TYPE.TELLER_EXIT,
         errMsg: '坐席退出'
       })
 
     }
-
+    console.log('isSharedScreen', this.state.isSharedScreen,this.state.laveRoomSharedScreen)
     
   }
   getRoomStatus = async data => {
@@ -2585,12 +2530,10 @@ class Video extends Component {
       if (result.code == 200 && result.data.roomStatus == 1) {
         this.addToScript()
       } else {
-        this.setState({
-          channelId: '',
-          rtoken: '',
-          sessionId: '',
-          imRoomId: ''
-        });
+        this.state.channelId = '',
+        this.state.rtoken = '',
+        this.state.sessionId = '',
+        this.state.imRoomId = ''
         this.addToScript()
         // this.setState({
         //   sessionType: false
@@ -2602,12 +2545,10 @@ class Video extends Component {
         // })
       }
     } catch (err) {
-        this.setState({
-          channelId: '',
-          rtoken: '',
-          sessionId: '',
-          imRoomId: ''
-        });
+      this.state.channelId = '',
+        this.state.rtoken = '',
+        this.state.sessionId = '',
+        this.state.imRoomId = ''
         this.addToScript()
       // this.setState({
       //   sessionType: false
@@ -2627,8 +2568,8 @@ class Video extends Component {
     axios.get(this.props.resourcePath + "/beauty/beauty.js")
     .then(response => this.addToScriptClick()).catch(function (error) {
       console.log(error);
+      that.state.sessionType = false
       that.setState({
-        sessionType: false,
         loading: false
       })
       that.roomCallBack(2, '加载资源失败','SYS-01')
@@ -2645,7 +2586,7 @@ class Video extends Component {
       this.props.resourcePath + "/beauty/backgroundBlur.js",
       this.props.resourcePath + "/adapter.js",
       this.props.resourcePath + "/getMediaInfo.js",
-      this.props.resourcePath + "/pdf.js",
+      // this.props.resourcePath + "/pdf.js",
       this.props.resourcePath + "/EBML.js",
       this.props.resourcePath + "/mcu.js",
       this.props.resourcePath + "/meeting_desk_stream.js",
@@ -2778,8 +2719,9 @@ class Video extends Component {
   cameraClick = () => {
     if (this.isFileSuccuse()) {
       if (!this.state.audioed) {
+        this.state.audioed = true,
         this.setState({
-          audioed: true,
+          
           cameraImg: cameraImgCloe
         });
         let sid = document.getElementById('publish_video1').name;
@@ -2800,8 +2742,8 @@ class Video extends Component {
           console.log(data)
         })
       } else if (this.state.audioed) {
+        this.state.audioed = false,
         this.setState({
-          audioed: false,
           cameraImg: cameraImgOpen
         });
         let sid = document.getElementById('publish_video1').name;
@@ -2825,6 +2767,7 @@ class Video extends Component {
     }
   };
   sharedScreen = () => {
+    console.log('投屏')
     if (this.isFileSuccuse()) {
       const publish_config = {};
       if (this.state.isSharedScreen) {
@@ -2841,9 +2784,8 @@ class Video extends Component {
         } else {
           this.test_controller.UnPublish(document.getElementById('video20').name)
         }
+        this.state.isSharedScreen = false
         this.setState({
-          publishDevic: 1,
-          isSharedScreen: false,
           screenName: '投屏'
         });
         console.log(pictureInPictureVideo)
@@ -2868,9 +2810,8 @@ class Video extends Component {
           publish_config.publish_tag = 'projectionWhiteboard'
           this.test_controller.Publish(publish_config)
         }
+        this.state.isSharedScreen = true
         this.setState({
-          publishDevic: 2,
-          isSharedScreen: true,
           screenName: '取消共享',
           isPDF: false
         })
@@ -3015,12 +2956,13 @@ class Video extends Component {
     })
   };
   invitationClick = () => {
+    this.state.linkData = ''
     this.setState({
       isModalVisibleInvitation: true,
       employeeNumber: '',
       employeeName: '',
       employeeError: '',
-      linkData: ''
+      
     })
 
   }
@@ -3087,22 +3029,21 @@ class Video extends Component {
       sid = document.getElementById('video12').name;
     }
     console.log(sid)
+    this.state.faceCustomerUid = item.customId,
     this.setState({
       clickedFacial: false,
       clickedOcr: false,
-      faceCustomerUid: item.customId,
+      
       isModalVisibleFacial: true,
       facialImg: this.test_controller.TakePicture(1, undefined, undefined, sid, 'png')
     })
   }
   componentWillReceiveProps(props) {
     console.log('componentWillReceiveProps',props)
-    this.setState({
-      channelId: props.roomId,
-      rtoken: props.mtoken,
-      sessionId: props.sessionId,
-      imRoomId: props.imRoomId
-    });
+      this.state.channelId = props.roomId,
+      this.state.rtoken = props.mtoken,
+      this.state.sessionId = props.sessionId,
+      this.state.imRoomId = props.imRoomId
   }
   appGetUsername = async (sid) => {
     console.log(sid)
@@ -3242,9 +3183,8 @@ class Video extends Component {
           employeeError: result.data.staffName ? '' : '查无此人',
         })
         if(result.data.staffName){
-          this.setState({
-            linkData:'https://wp-staff-gateway.wealth-platform.uat.ali.cloud.cn.hsbc/meeting-ui/OHB/CN/HSBC?chnlID=OHB&locale=zh_CN&chnlCC=CN&chnlGMC=HSBC&targetFunc=supervisorMeeting&sourceFunc=rmMeeting&appointmentID='+ this.props.businessNumber + '&staffID='+this.state.employeeNumber+'&staffName='+ encodeURIComponent(result.data.staffName)
-          })
+            this.state.linkData = 'https://wp-staff-gateway.wealth-platform.uat.ali.cloud.cn.hsbc/meeting-ui/OHB/CN/HSBC?chnlID=OHB&locale=zh_CN&chnlCC=CN&chnlGMC=HSBC&targetFunc=supervisorMeeting&sourceFunc=rmMeeting&appointmentID='+ this.props.businessNumber + '&staffID='+this.state.employeeNumber+'&staffName='+ encodeURIComponent(result.data.staffName)
+          
         }
       } else {
         this.messageClick('查询失败','error')
@@ -3285,9 +3225,7 @@ class Video extends Component {
   switchExternal = () => {
     if (!this.state.isWhiteboard) {
       const publish_config = {};
-      this.setState({
-        isWhiteboard: true,
-      })
+      this.state.isWhiteboard = true
       this.tabTitlesClick({
         value: 'RMWhiteboard',
         name: 'RM白板'
@@ -3365,11 +3303,19 @@ class Video extends Component {
       microphoneValue: event.target.value
     })
   }
+  componentDidMount() {
+    var box=document.getElementById("whiteboardDIV");
+       if(box){ //此处在加一层判断，更加严密，如果box存在的情况下获取
+            this.state.whiteboardWidth = box.offsetWidth,
+            this.state.whiteboardHeight = box.offsetHeight,
+           console.log('whiteboardDIV', this.state.whiteboardHeight,this.state.whiteboardWidth)
+       }
+  }
   render() {
     const { meetingInfo } = this.props
     var pdfChildren
     if (this.props.children) {
-      pdfChildren = React.cloneElement(this.props.children, { width: 100, height: 100, id: 12 })
+      pdfChildren = React.cloneElement(this.props.children, { width: this.state.whiteboardWidth, height: this.state.whiteboardHeight, show: this.state.isSelect == 'RMWhiteboard'})
     }
     const customerNameList = (
       <span className='labelClass'>
@@ -3471,7 +3417,7 @@ class Video extends Component {
             <div className="projection">
             {tabTitleList}
             <img style={sectionStyle} src={require("../../assets/img/placeholder_bg.png").default} alt="" />
-            <div style={{height: this.state.tabTitles.length > 0 ? 'calc(100% - 33px)' : '100%'}}>
+            <div id="whiteboardDIV" style={{height: this.state.tabTitles.length > 0 ? 'calc(100% - 33px)' : '100%'}}>
             
               <div className="videoDiv" style={{ display: (this.state.isSelect == 'RMScreen') ? '' : 'none', }}>
                 <div className="videoDiv">
@@ -3531,7 +3477,7 @@ class Video extends Component {
             </div>
             <div className="wrapper" style={{ width: '20%', }}>
               <div
-                className={`itemed ${this.state.publishDevic == 4 ? '' : 'isBack'} `}
+                className={`itemed`}
               >
                 <div className="publishVideoDiv">