react_hsbc_teller 1.7.7 → 1.8.0

package/package.json

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

package/packages/pages/foot/foot.jsx

@@ -99,7 +99,7 @@ export default class foot extends Component {
                       </div>
                   }
                   {
-                      item == 'BACK'&&<div className='footHover' onClick={this.virtualization.bind(this)}>
+                      item == 'BACKGROUND'&&<div className='footHover' onClick={this.virtualization.bind(this)}>
                       <div className="one">
                           <img className="imgClass" src={require("../../assets/img/beijing.png").default} alt="" />
                           <div className="text">

package/packages/pages/video/video.jsx

@@ -48,6 +48,7 @@ let beautyDiv = {};
 let isBackgroundBlur = true
 let isSuccuseHs = false
 let isGraffiti = false
+let strokeColor = '#333'
 let CanvasHome = styled.div`
   position: fixed;
   z-index: ${props=>props.zIndexNum};
@@ -2335,15 +2336,7 @@ class Video extends Component {
         }
       } 
       if(sid == document.getElementById('publish_video1').name) {
-        var box=document.getElementById("whiteboardDIV");
-       if(box){ //此处在加一层判断，更加严密，如果box存在的情况下获取
-        this.setState({
-          whiteboardTop: box.getBoundingClientRect().top * 1.08 - 40,
-          whiteboardLeft: box.getBoundingClientRect().left,
-          leftVideo: (box.offsetWidth - this.state.widthVideo)/2 + box.getBoundingClientRect().left
-        })
-           console.log('whiteboardDIV',this.state.whiteboardTop,this.state.whiteboardLeft)
-       }
+        
         this.setState({
 
           loading: false,
@@ -2381,6 +2374,18 @@ class Video extends Component {
           },
           1000
         );
+      } else {
+        var box=document.getElementById("whiteboardDIV");
+        var box1 = document.getElementById("operate")
+        var height = box1 ? box1.offsetHeight : 40
+       if(box){ //此处在加一层判断，更加严密，如果box存在的情况下获取
+        this.setState({
+          whiteboardTop: box.getBoundingClientRect().top - height,
+          whiteboardLeft: box.getBoundingClientRect().left,
+          leftVideo: (box.offsetWidth - this.state.widthVideo)/2 + box.getBoundingClientRect().left
+        })
+           console.log('whiteboardDIV',this.state.whiteboardTop,this.state.whiteboardLeft)
+       }
       }
     };
     // 发布媒体流失败
@@ -3776,6 +3781,7 @@ userType:'1'
     }
   }
   componentWillMount() {
+    console.log('hsbc_teller_sdk', '1.8.0')
     if (this.props.sessionId) {
       this.getRoomStatus({
         sessionId: this.props.sessionId
@@ -4656,6 +4662,7 @@ userType:'1'
     navigator.mediaDevices.getDisplayMedia({
       video: true,
       preferCurrentTab:true,
+      audio: true
       // video: {
       //   width: document.body.clientWidth,
       //   height: document.body.clientHeight
@@ -4720,7 +4727,7 @@ userType:'1'
   openCanvas(drawCanvas) {
     if (!this.boardOperate) {
       this.boardOperate = new BoardOperate(drawCanvas, {
-        drawColor: "#000000",
+        drawColor: strokeColor,
         drawType: "pen",
         lineWidth: 5,
         fillStyle: '', // 初始背景色，若为空则透明背景 
@@ -4740,8 +4747,23 @@ userType:'1'
     });
 
     this.setState({ drawConfig,selectSpan: type });
+    this.boardOperate.drawColor = '#333'
   }
+  setStrokeColor() {
+    console.log(this.boardOperate)
+    const { drawConfig } = this.state;
+    const type = 'pen'
+    drawConfig.curryControl = type;
+    this.boardOperate.changeWay({
+      type
+    });
 
+    this.setState({ drawConfig,selectSpan: type });
+    this.boardOperate.drawColor = '#ff4d4f'
+    this.setState({
+      selectSpan: 'redPen'
+    })
+  }
   setOpreate(type) {
     this.boardOperate[type]();
   }
@@ -4810,6 +4832,9 @@ userType:'1'
         this.openCanvas(canvas)
       }, 0);
       this.graffitiClick()
+      this.setState({
+        selectSpan: 'pen'
+      })
     } else {
       // this.downCanvas()
       this.closeCanvas();
@@ -4886,11 +4911,13 @@ userType:'1'
   }
   componentDidMount() {
     var box=document.getElementById("whiteboardDIV");
+    var box1 = document.getElementById("operate")
+    var height = box1 ? box1.offsetHeight : 40
        if(box){ //此处在加一层判断，更加严密，如果box存在的情况下获取
             this.state.whiteboardWidth = box.offsetWidth,
             this.state.whiteboardHeight = box.offsetHeight  * 0.92,
             this.state.widthVideo = this.state.whiteboardHeight * 1280 / 720
-            this.state.whiteboardTop = box.getBoundingClientRect().top * 1.08 - 40
+            this.state.whiteboardTop = box.getBoundingClientRect().top - height
             this.state.whiteboardLeft = box.getBoundingClientRect().left
             this.state.leftVideo = (box.offsetWidth - this.state.widthVideo)/2 + box.getBoundingClientRect().left
            console.log('whiteboardDIV', this.state.whiteboardHeight,this.state.whiteboardWidth,this.state.whiteboardTop,this.state.whiteboardLeft)
@@ -5200,6 +5227,7 @@ userType:'1'
           {this.state.operateShow &&
             <OpreateDiv id="operate">
               <span style={{color: this.state.selectSpan == 'pen' ?  '#1890ff' : '#333'}} onClick={() => this.setTool('pen')}>铅笔</span>
+              <span style={{color: this.state.selectSpan == 'redPen' ?  '#1890ff' : '#333'}} onClick={() => this.setStrokeColor()}>红笔</span>
               <span style={{color: this.state.selectSpan == 'eraser' ?  '#1890ff' : '#333'}} onClick={() =>  this.setTool('eraser')}>橡皮</span>
               <span onClick={() => this.setOpreate('undo')}>撤销</span>
               <span onClick={() => this.setOpreate('redo')}>恢复</span>
@@ -5875,7 +5903,7 @@ sessionId: "",
   microphoneSize: 25,
   fontSize: '14',
   fontFamily: 'auto',
-  menus: ['BOARD','SHARE', 'FRIES', 'OCR', 'INVITE', 'PIP', 'BEAUTY','GRAFFITI','BACK'],
+  menus: ['BOARD','SHARE', 'FRIES', 'OCR', 'INVITE', 'PIP', 'BEAUTY','GRAFFITI','BACKGROUND'],
   customLeaveRoom: '客户离开房间',
   meetingInfo: {
     title: '--',