react_hsbc_teller 0.9.0 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react_hsbc_teller",
-  "version": "0.9.0",
+  "version": "1.0.2",
   "description": "React",
   "private": false,
   "main": "lib/hsbc.js",

package/packages/pages/video/video.jsx

@@ -41,6 +41,9 @@ class Video extends Component {
   cancel = axios.CancelToken.source()
   signCanvas = React.createRef();
   state = {
+    whiteboardWidth: '',
+    whiteboardHeight: '',
+    laveRoomSharedScreen: false,
     isJoinRoom: false,
     sessionType: false,
     isWhiteboard: false,
@@ -67,7 +70,6 @@ class Video extends Component {
     voiceImg: voiceImgOpen,
     voiceName: '静音',
     isCustomer: false,
-    publishDevic: 1,
     isSharedScreen: false,
     isSuspend: false,
     audioed: false,
@@ -137,12 +139,6 @@ class Video extends Component {
   // eslint-disable-next-line no-undef
   test_controller = '';
 
-  componentDidMount() {
-    window.onbeforeunload = () => {
-      this.finishSession()
-    }
-  };
-
   /**
    * 创建房间成功后回调后台
    * @param  {JSON} data 数据类型
@@ -157,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 = {}
@@ -174,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({
@@ -192,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 {
@@ -219,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',
@@ -574,8 +565,8 @@ class Video extends Component {
   // 人脸识别
   facialRecognition = () => {
     if (this.isFileSuccuse()) {
+      this.state.faceCustomerType = 1
       this.setState({
-        faceCustomerType: 1,
         titleModal: '人脸识别'
       })
       this.selectCustomer('facial')
@@ -583,8 +574,8 @@ class Video extends Component {
   };
   ocrClick = () => {
     if (this.isFileSuccuse()) {
+      this.state.faceCustomerType = 2
       this.setState({
-        faceCustomerType: 2,
         titleModal: 'OCR识别'
       })
       this.selectCustomer('ocr')
@@ -878,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) => {
@@ -1146,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
             }
           }
 
@@ -1336,19 +1319,13 @@ 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
-        })
+          this.state.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
-          })
+            this.state.imJoinRoom =true
           console.log('加入im房间')
         }
       }
@@ -1461,9 +1438,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)
     };
@@ -1474,9 +1449,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)
     };
     // 断开连接回调
@@ -1491,9 +1464,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)
     };
     // 初始化成功回调
@@ -1511,18 +1482,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)
     };
     // 初始化⾳视频成功
@@ -1559,12 +1526,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 = {
@@ -1577,9 +1542,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,
@@ -1617,9 +1580,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)
     };
     // 订阅媒体流成功
@@ -1649,9 +1610,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 = {
@@ -1792,11 +1751,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) => {
@@ -1853,9 +1808,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') {
@@ -2041,11 +1994,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) {
@@ -2151,9 +2104,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)
@@ -2184,9 +2136,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 = (
@@ -2447,24 +2397,22 @@ 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 = () => {
-      if (this.state.isSharedScreen) {
-        this.sharedScreen()
-      }
+      console.log('OnDesktopDisplayClosed', this.state.isSharedScreen ,this.state.laveRoomSharedScreen)
+        if (!this.state.laveRoomSharedScreen && this.state.isSharedScreen) {
+          this.sharedScreen()
+        }
+      
     }
   }
   enterRoom = async () =>{
@@ -2511,11 +2459,7 @@ class Video extends Component {
     }
   };
   componentWillUnmount() {
-    this.clearData()
     
-    
-  }
-  clearData=()=>{
     if (this.state.roomCustomerList.length == 0 && this.state.sessionType) {
       this.finishSessionClick()
     }
@@ -2526,15 +2470,9 @@ class Video extends Component {
     if(this.state.imStatus) {
       disconnect();
     }
-    this.setState({
-      isCustomer: false,
-      isWhiteboard: false,
-      isPictureInPicture: false,
-      imStatus: false,
-      imJoinRoom: false,
-      sessionType: false
-    });
-    this.timer && clearInterval(this.timer);
+    
+  }
+  clearData=()=>{
     this.setState = (state, callback) => {
       return
     }
@@ -2550,28 +2488,35 @@ class Video extends Component {
     }
   }
   finishSession = () => {
+    this.timer && clearInterval(this.timer);
     if(this.state.isSharedScreen) {
-          this.test_controller.UnPublish(document.getElementById('video20').name)
-        this.setState({
-          publishDevic: 1,
-          isSharedScreen: false,
-          screenName: '投屏'
-        });
-        console.log(pictureInPictureVideo)
-        this.tabTitlesClick('RMScreen', 'delect')
+      this.setState({
+        screenName: '投屏',
+      })
+      this.state.isSharedScreen = false
+      this.state.laveRoomSharedScreen = true
+        // this.test_controller.UnPublish(document.getElementById('video20').name)
         if (this.state.isPictureInPicture) {
           document.exitPictureInPicture()
         }
+        
       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 => {
@@ -2582,12 +2527,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
@@ -2599,12 +2542,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
@@ -2624,8 +2565,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')
@@ -2775,8 +2716,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;
@@ -2797,8 +2739,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;
@@ -2822,6 +2764,7 @@ class Video extends Component {
     }
   };
   sharedScreen = () => {
+    console.log('投屏')
     if (this.isFileSuccuse()) {
       const publish_config = {};
       if (this.state.isSharedScreen) {
@@ -2838,9 +2781,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)
@@ -2865,9 +2807,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
         })
@@ -3012,12 +2953,13 @@ class Video extends Component {
     })
   };
   invitationClick = () => {
+    this.state.linkData = ''
     this.setState({
       isModalVisibleInvitation: true,
       employeeNumber: '',
       employeeName: '',
       employeeError: '',
-      linkData: ''
+      
     })
 
   }
@@ -3084,22 +3026,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)
@@ -3239,9 +3180,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')
@@ -3282,9 +3222,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白板'
@@ -3362,11 +3300,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'>
@@ -3468,7 +3414,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">
@@ -3528,7 +3474,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">
 

package/src/index.js

@@ -2,8 +2,8 @@ import React from "react";
 import ReactDOM from "react-dom";
 import "./index.less";
 import '@babel/polyfill';
-// import { HSBC } from "../lib/hsbc";
-import {HSBC} from "../packages";
+import { HSBC } from "../lib/hsbc";
+// import {HSBC} from "../packages";
 
 ReactDOM.render(
   <div className="hsbc"><HSBC></HSBC></div>,