react_hsbc_teller 1.2.8 → 1.3.1

package/package.json

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

package/packages/pages/foot/foot.jsx

@@ -94,7 +94,7 @@ export default class foot extends Component {
                       <div className="one">
                           <img className="imgClass" src={require("../../assets/img/switchExternal.png").default} alt="" />
                           <div className="text">
-                              白板
+                          远程签署
                           </div>
                       </div>
                       </div>

package/packages/pages/foot/foot.less

@@ -10,7 +10,7 @@ width: 100%;
 }
 .total{
     display: inline-flex;
-    width: 33%;
+    width: 25%;
     height: 100%;
   align-items: center;
 //   margin: 10px 0;
@@ -46,9 +46,11 @@ line-height: 11px;
 }
 .totalTwo{
     justify-content: center;
+    width: 50%;
 }
 .totalThree{
     // margin-top: 10px;
+    width: 25%;
     justify-content: flex-end;
 }
 .buttonClass{

package/packages/pages/video/video.jsx

@@ -36,6 +36,8 @@ let mix_stream
 let worker
 let streamShare
 let muteJson = new Map()
+let dateTime = 0
+let messageValue = ''
 message.config({
   getContainer: ()=>document.getElementById('allHSBC')
 })
@@ -265,7 +267,7 @@ 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.state.workSpaceId = result.workSpaceId,
+        this.state.workSpaceId = result.workspaceId,
         this.state.appId = result.appId,
         this.state.bizName = result.bizName
       // const data1={
@@ -374,6 +376,7 @@ class Video extends Component {
     recordParam.startTimeout = 10;
     recordParam.splitType = 0;
     recordParam.endType = 1;
+    recordParam.crf = 30
     recordParam.overlaps = [
       {
         tag: '', // 流 tag，如果不设置或为空，则为全局⽔印
@@ -386,30 +389,19 @@ class Video extends Component {
         fontSize: 16, // 字体⼤⼩
         url: '' // ⽔印图⽚ HTTP 地址
       },
-      {
-        tag: '', // 流 tag，如果不设置或为空，则为全局⽔印
-        type: 2, // 1 为时间戳⽔印；2 为⽂字⽔印；3 为图⽚⽔印
-        id: 2, // ⽔印 ID
-        enable: true,
-        xPosition: 10, // x 轴位置
-        yPosition: 50, // y 轴位置
-        text: this.state.contentDress, // ⽔印⽂字
-        fontSize: 16, // 字体⼤⼩
-        url: '' // ⽔印图⽚ HTTP 地址
-      }
     ];
   recordParam.tagPositions = [
     {
       tag: 'projectionWhiteboard',
       xPosition: 0,
-      yPosition: 540,
-      width: 960,
-      height: 540
+      yPosition: 270,
+      width: 1280,
+      height: 720
     },
     {
       tag: 'VIDEO_SOURCE_SCREEN',
-      xPosition: 0,
-      yPosition: 180,
+      xPosition: 1280,
+      yPosition: 630,
       width: 640,
       height: 360
     },
@@ -417,86 +409,86 @@ class Video extends Component {
       tag: 'tag1',
       xPosition: 0,
       yPosition: 0,
-      width: 240,
+      width: 310,
       height: 180
     },
     {
       tag: 'customer1',
-      xPosition: 240,
+      xPosition: 320,
       yPosition: 0,
-      width: 240,
+      width: 310,
       height: 180
     },
     {
       tag: 'customer2',
-      xPosition: 480,
+      xPosition: 640,
       yPosition: 0,
-      width: 240,
+      width: 310,
       height: 180
     },
     {
       tag: 'customer3',
-      xPosition: 720,
+      xPosition: 960,
       yPosition: 0,
-      width: 240,
+      width: 310,
       height: 180
     },
     {
       tag: 'customer4',
-      xPosition: 960,
+      xPosition: 1280,
       yPosition: 0,
-      width: 240,
+      width: 310,
       height: 180
     },
     {
       tag: 'customer5',
-      xPosition: 1200,
-      yPosition: 0,
-      width: 240,
-      height: 180
-    },
-    {
-      tag: 'customer6',
-      xPosition: 1440,
+      xPosition: 1600,
       yPosition: 0,
-      width: 240,
+      width: 310,
       height: 180
     },
-    {
-      tag: 'customer7',
-      xPosition: 1680,
-      yPosition: 0,
-      width: 240,
-      height: 180
-    },
-    {
-      tag: 'customer8',
-      xPosition: 1680,
-      yPosition: 180,
-      width: 240,
-      height: 180
-    },
-    {
-      tag: 'customer9',
-      xPosition: 1680,
-      yPosition: 360,
-      width: 240,
-      height: 180
-    },
-    {
-      tag: 'customer10',
-      xPosition: 1680,
-      yPosition: 540,
-      width: 240,
-      height: 180
-    },
-    {
-      tag: 'customer11',
-      xPosition: 1680,
-      yPosition: 720,
-      width: 240,
-      height: 180
-    }
+    // {
+    //   tag: 'customer6',
+    //   xPosition: 1440,
+    //   yPosition: 0,
+    //   width: 240,
+    //   height: 180
+    // },
+    // {
+    //   tag: 'customer7',
+    //   xPosition: 1680,
+    //   yPosition: 0,
+    //   width: 240,
+    //   height: 180
+    // },
+    // {
+    //   tag: 'customer8',
+    //   xPosition: 1680,
+    //   yPosition: 180,
+    //   width: 240,
+    //   height: 180
+    // },
+    // {
+    //   tag: 'customer9',
+    //   xPosition: 1680,
+    //   yPosition: 360,
+    //   width: 240,
+    //   height: 180
+    // },
+    // {
+    //   tag: 'customer10',
+    //   xPosition: 1680,
+    //   yPosition: 540,
+    //   width: 240,
+    //   height: 180
+    // },
+    // {
+    //   tag: 'customer11',
+    //   xPosition: 1680,
+    //   yPosition: 720,
+    //   width: 240,
+    //   height: 180
+    // }
   ]
     console.log('recordParam', recordParam);
     this.test_controller.StartRemoteRecord(filePath, recordParam, '')
@@ -796,23 +788,46 @@ class Video extends Component {
   }
   messageClick=(value,valueOne)=>{
     console.log(value,valueOne)
-    if(valueOne == 'error') {
-      message.error({
-        content: value,
-        icon: <img src={require("../../assets/img/tooltips2_fail.png").default} alt="" ></img>,
-        className: 'errorClassName',
-        top: 200,
-        duration: 10
-      })
-    } else if(valueOne == 'success') {
-      message.success({
-        content: value,
-        icon: <img src={require("../../assets/img/tooltips1_pass.png").default} alt="" ></img>,
-        className: 'successClassName',
-        top: 200,
-        duration: 10
-      })
-    }
+    if(messageValue != value){
+      messageValue = value
+      dateTime = new  Date().getTime()
+        if(valueOne == 'error') {
+          message.error({
+            content: value,
+            icon: <img src={require("../../assets/img/tooltips2_fail.png").default} alt="" ></img>,
+            className: 'errorClassName',
+            top: 200,
+            duration: 10
+          })
+        } else if(valueOne == 'success') {
+          message.success({
+            content: value,
+            icon: <img src={require("../../assets/img/tooltips1_pass.png").default} alt="" ></img>,
+            className: 'successClassName',
+            top: 200,
+            duration: 10
+          })
+        }
+      } else if(((new  Date().getTime()) - dateTime) / 1000 > 30){
+        dateTime = new  Date().getTime()
+        if(valueOne == 'error') {
+          message.error({
+            content: value,
+            icon: <img src={require("../../assets/img/tooltips2_fail.png").default} alt="" ></img>,
+            className: 'errorClassName',
+            top: 200,
+            duration: 10
+          })
+        } else if(valueOne == 'success') {
+          message.success({
+            content: value,
+            icon: <img src={require("../../assets/img/tooltips1_pass.png").default} alt="" ></img>,
+            className: 'successClassName',
+            top: 200,
+            duration: 10
+          })
+        }
+      }
     
   }
   // 人脸识别
@@ -837,6 +852,7 @@ class Video extends Component {
   endSessionValue = () => {
     if(streamShare) {
       streamShare.getTracks().forEach(track => track.stop());
+      streamShare=''
     }
       this.finishSession()
     
@@ -1424,6 +1440,7 @@ class Video extends Component {
           } else if (Mival.type == 2) {
             if(streamShare) {
               streamShare.getTracks().forEach(track => track.stop());
+              streamShare = ''
             }
             this.tabTitlesClick('RMWhiteboard', 'delect')
             if (this.state.isSharedScreen) {
@@ -2147,6 +2164,21 @@ class Video extends Component {
                   name: '客户投屏'
                 }, 'add'
               )
+            } else if (itemOne.tag == 'projectionWhiteboard') {
+              config_param = {
+                subscribe_video_id: 'video20',
+                subscribe_audio_id: 'audio20',
+                subscribe_streamId_id: 'subscribe_streamId20',
+                feedId_id: 'feedId20',
+                feedId: itemOne.feedId
+              }
+
+              this.tabTitlesClick(
+                {
+                  value: 'staffScreen',
+                  name: 'internal staff 投屏'
+                }, 'add'
+              )
             } else {
               if (!document.getElementById('video1').name) {
                 config_param = {
@@ -2340,10 +2372,28 @@ class Video extends Component {
           if (config_param !== undefined) {
             config_param.need_volume_analyser = false
             console.log(config_param)
-            setTimeout(() => {
+              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)
-            }, 1000)
 
           }
         } else {
@@ -2528,6 +2578,11 @@ class Video extends Component {
             this.tabTitlesClick('customerScreen', 'delect')
           }
         }
+        if (item.value == 'staffScreen') {
+          if (!document.getElementById("video20").name) {
+            this.tabTitlesClick('staffScreen', 'delect')
+          }
+        } 
       })
       if (!document.getElementById("video1").name) {
         this.state.isPIBIntranet[0].type = false
@@ -2989,36 +3044,31 @@ class Video extends Component {
     // 停止共享
     this.test_controller.OnDesktopDisplayClosed = () => {
       console.log('OnDesktopDisplayClosed', this.state.isSharedScreen ,this.state.laveRoomSharedScreen)
-      if(this.state.isScreenSwitching) {
-        this.state.isScreenSwitching = false
+     
+        if(this.state.isScreenSwitching) {
+          this.state.isScreenSwitching = false
+        } else {
+          if(!streamShare) {
+            document.getElementById('video20') && document.getElementById('video20').name ? this.test_controller.UnPublish(document.getElementById('video20').name) : ''
       } else {
-                // if (this.state.isWhiteboard) {
-        //   publish_config.publish_device = 4
-        //   publish_config.media_type = 1
-        //   publish_config.sid = document.getElementById('video20').name
-        //   publish_config.part_of_screen_id = 'touBoxItem'
-        //   publish_config.video_profile_type = 5
-        //   this.test_controller.ChangeMediaStream(publish_config);
-        //   this.setState({
-        //     isPDF: true,
-        //   })
-      // } else {
-          document.getElementById('video20') && document.getElementById('video20').name ? this.test_controller.UnPublish(document.getElementById('video20').name) : ''
+        console.log('白板')
+      }
+          this.state.isSharedScreen = false
+          this.state.isScreenSwitching = false
+          this.setState({
+            screenName: '共享模式'
+          });
+          console.log(pictureInPictureVideo)
+          this.tabTitlesClick('RMScreen', 'delect')
+          if (this.state.isPictureInPicture) {
+            document.exitPictureInPicture()
+          }
+          // if (!this.state.laveRoomSharedScreen && this.state.isSharedScreen) {
+          //   this.sharedScreen()
       // }
-        this.state.isSharedScreen = false
-        this.state.isScreenSwitching = false
-        this.setState({
-          screenName: '共享模式'
-        });
-        console.log(pictureInPictureVideo)
-        this.tabTitlesClick('RMScreen', 'delect')
-        if (this.state.isPictureInPicture) {
-          document.exitPictureInPicture()
         }
-        // if (!this.state.laveRoomSharedScreen && this.state.isSharedScreen) {
-        //   this.sharedScreen()
-    // }
-      }
+     
+
         
       
     };
@@ -3396,64 +3446,72 @@ class Video extends Component {
     }
   };
   sharedScreen = () => {
-    console.log('投屏')
+    console.log('投屏', this.state.tabTitles.find(el=>el.value == 'staffScreen'))
     if (this.isFileSuccuse()) {
-      const publish_config = {};
-      if(streamShare) {
-        streamShare.getTracks().forEach(track => track.stop());
-      }
-      if (this.state.isSharedScreen) {
-        const publish_config = {}
-        publish_config.media_type = 1
-        publish_config.publish_device = 2
-        // publish_config.video_profile_type = 1
-        publish_config.video_profile_type=100
-        publish_config.video_profile_diy={width:1280, height:720, frameRate:8, bitrate:1500}
-        publish_config.enableDesktopAudio=true
-        publish_config.degradationType=2
-        publish_config.sid = document.getElementById('video20').name
-        this.test_controller.ChangeMediaStream(publish_config)
-        this.state.isScreenSwitching = true
-      } else {
-        if (document.getElementById('video20').name) {
-          publish_config.media_type = 1;
-          publish_config.publish_device = 2;
-          publish_config.video_profile_type=100
-          publish_config.video_profile_diy={width:1280, height:720, frameRate:8, bitrate:1500}
-          publish_config.enableDesktopAudio=true
-          publish_config.degradationType=2
-          publish_config.sid = document.getElementById('video20').name;
-          this.test_controller.ChangeMediaStream(publish_config);
-        } else {
+      if(!this.state.tabTitles.find(el=>el.value == 'staffScreen')) {
+        const publish_config = {};
+        if(streamShare) {
+          streamShare.getTracks().forEach(track => track.stop());
+          streamShare = ''
+        }
+        if (this.state.isSharedScreen) {
+          const publish_config = {}
           publish_config.media_type = 1
           publish_config.publish_device = 2
-          publish_config.need_volume_analyser = true
-          publish_config.video_profile_type=100
-          publish_config.video_profile_diy={width:1280, height:720, frameRate:8, bitrate:1500}
+          publish_config.video_profile_type = 1
+          // publish_config.video_profile_type=100
+          // publish_config.video_profile_diy={width:1280, height:720, frameRate:8, bitrate:1500}
           publish_config.enableDesktopAudio=true
           publish_config.degradationType=2
-          publish_config.publish_video_id = 'video20'
-          publish_config.publish_streamId_id = 'subscribe_streamId20'
-          publish_config.publish_tag = 'projectionWhiteboard'
-          this.test_controller.Publish(publish_config)
-        }
-        // this.state.isSharedScreen = true
-        // this.state.isScreenSwitching = false
-        this.setState({
-          screenName: '切换共享',
-          isPDF: false
-        })
-        this.tabTitlesClick(
-          {
-            value: 'RMScreen',
-            name: '共享内容'
-          }, 'add'
-        )
-        if (!this.state.isPictureInPicture) {
-          this.pictureInPicture()
+          publish_config.sid = document.getElementById('video20').name
+          this.test_controller.ChangeMediaStream(publish_config)
+          this.state.isScreenSwitching = true
+        } else {
+          if (document.getElementById('video20').name) {
+            publish_config.media_type = 1;
+            publish_config.publish_device = 2;
+            publish_config.video_profile_type = 1
+            // publish_config.video_profile_type=100
+            // publish_config.video_profile_diy={width:1280, height:720, frameRate:8, bitrate:1500}
+            publish_config.enableDesktopAudio=true
+            publish_config.degradationType=2
+            publish_config.sid = document.getElementById('video20').name;
+            this.test_controller.ChangeMediaStream(publish_config);
+          } else {
+            publish_config.media_type = 1
+            publish_config.publish_device = 2
+            publish_config.need_volume_analyser = true
+            publish_config.video_profile_type = 1
+            // publish_config.video_profile_type=100
+            // publish_config.video_profile_diy={width:1280, height:720, frameRate:8, bitrate:1500}
+            publish_config.enableDesktopAudio=true
+            publish_config.degradationType=2
+            publish_config.publish_video_id = 'video20'
+            publish_config.publish_streamId_id = 'subscribe_streamId20'
+            publish_config.publish_tag = 'projectionWhiteboard'
+            this.test_controller.Publish(publish_config)
+          }
+          // this.state.isSharedScreen = true
+          // this.state.isScreenSwitching = false
+          this.setState({
+            screenName: '切换共享',
+            isPDF: false
+          })
+          this.tabTitlesClick(
+            {
+              value: 'RMScreen',
+              name: '共享内容'
+            }, 'add'
+          )
+          if (!this.state.isPictureInPicture) {
+            this.pictureInPicture()
+          }
+  
         }
-
+      } else {
+        this.messageClick('internal staff正在共享屏幕，请先关闭','error')
       }
+
     }
   };
   suspend = () => {
@@ -4005,6 +4063,7 @@ class Video extends Component {
   .then((stream) => {
     if(streamShare) {
       streamShare.getTracks().forEach(track => track.stop());
+      streamShare = ''
     }
     videoMedia.srcObject = stream;
     stream.getVideoTracks()[0].applyConstraints({
@@ -4014,6 +4073,7 @@ class Video extends Component {
     streamShare = stream
     stream.getVideoTracks()[0].onended = async ()=>{
       //单击停止共享按钮后，触发这个事件
+      streamShare = ''
       if(document.getElementById('video20').name&&!this.state.isSharedScreen) {
         that.test_controller.UnPublish(document.getElementById('video20').name)
       }
@@ -4024,6 +4084,7 @@ class Video extends Component {
   }
   switchExternal = () => {
     if (this.isFileSuccuse()) {
+      if(!this.state.tabTitles.find(el=>el.value == 'staffScreen')) {
     if (!this.state.isWhiteboard) {
       this.setState({
         isWhiteboard: true
@@ -4046,6 +4107,9 @@ class Video extends Component {
     }
     
     this.navigatorClick()
+  } else {
+    this.messageClick('internal staff正在共享屏幕，请先关闭','error')
+  }
   }
   }
   switchSelect = (value) => {
@@ -4349,7 +4413,7 @@ class Video extends Component {
             {/* <img style={sectionStyle} src={require("../../assets/img/placeholder_bg.png").default} alt="" /> */}
             <div id="whiteboardDIV" style={{height: 'calc(100% - 33px)'}}>
             
-              <div className="videoDiv" style={{ display: (this.state.isSelect == 'RMScreen') ? '' : 'none', }}>
+              <div className="videoDiv" style={{ display: (this.state.isSelect == 'RMScreen' || this.state.isSelect == 'staffScreen') ? '' : 'none', }}>
                 <div className="videoDiv">
                   <video
                     id="video20"

package/packages/pages/video/video.less

@@ -272,7 +272,7 @@
   // top: 0;
   // left: 0;
   .selectSee{
-    width: 92px;
+    max-width: 8rem;
     height: 32px;
     text-align: center;
     background: #303D46;
@@ -282,7 +282,7 @@
     font-size: 14px;
   }
   .noSelest{
-    width: 92px;
+    max-width: 8rem;
     height: 32px;
     text-align: center;
     background: #D7D8D6;