react_hsbc_teller 1.8.8 → 1.8.9

package/package.json

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

package/packages/demo/demo.js

@@ -5,10 +5,10 @@ import Pdf from './pdf.js'
 class Demo extends Component {
   state = {
     shareMask: false,
-    mtoken: "",
-    roomId: "",
-    imRoomId: "",
-sessionId: "",
+    imRoomId: "7gXpNZYEg@conference.ls-im-xmpp.chinawp.dev.ali.cloud.cn.hsbc",
+    sessionId: "7gXpNZYEg",
+    mtoken: "edc44751a3bf",
+roomId: "662356472529707",
     // roomId: '',
     // mtoken: '',
     // imRoomId: '',

package/packages/pages/video/video.jsx

@@ -333,7 +333,9 @@ class Video extends Component {
     loadingFace: false,
     faceResuly: '',
     isStaffState: '',
-    loadingStaff: false
+    loadingStaff: false,
+    isVideoList: false,
+    faceFailReason: '',
   };
   // eslint-disable-next-line no-undef
   test_controller = '';
@@ -341,7 +343,7 @@ class Video extends Component {
   saveLog = (val) => {
     axios({
       method: 'get',
-      baseURL: this.props.logUrl + '&message=' + encodeURIComponent(val) + '&react_hsbc_teller=1.8.8&logTime=' + Date.now() + '&mtoken=' + encodeURIComponent(this.state.rtoken) + '&roomId=' + encodeURIComponent(this.state.channelId) + '&sessionId=' + encodeURIComponent(this.state.sessionId) + '&appointmentID=' + this.props.businessNumber,
+      baseURL: this.props.logUrl + '&message=' + encodeURIComponent(val) + '&react_hsbc_teller=1.8.9&logTime=' + Date.now() + '&mtoken=' + encodeURIComponent(this.state.rtoken) + '&roomId=' + encodeURIComponent(this.state.channelId) + '&sessionId=' + encodeURIComponent(this.state.sessionId) + '&appointmentID=' + this.props.businessNumber,
 
     }).then(res => {
 
@@ -801,7 +803,8 @@ class Video extends Component {
         this.setState({
           loadingFace: false,
           faceResuly: 'success',
-          isFaceImage: ''
+          isFaceImage: '',
+          faceFailReason: ''
         })
         // this.setState({
         //   isModalVisibleFacial: false
@@ -811,7 +814,8 @@ class Video extends Component {
         this.setState({
           loadingFace: false,
           faceResuly: 'fail',
-          isFaceImage: ''
+          isFaceImage: '',
+          faceFailReason: result.message
         })
       }
 
@@ -820,10 +824,12 @@ class Video extends Component {
       if (err.status == 502 || err.status == 404) {
         this.roomCallBack(2, '连接服务器失败', 'SYS-02')
       }
+      console.log(err)
       this.setState({
         loadingFace: false,
         faceResuly: 'fail',
-        isFaceImage: ''
+        isFaceImage: '',
+        faceFailReason: err.message
       })
       console.error('err', err);
     }
@@ -976,11 +982,12 @@ class Video extends Component {
     })
     if (list.length > 0) {
       if (val == 'ocr') {
+        console.log('this.state.customerList.length',list.length)
         this.setState({
           documentType: '',
           isModalVisibleCustomer: true,
           isCustomerSelect: true,
-          customerSelect: '',
+          customerSelect: list.length == 1 ? 0 : '',
           customerTitleName: '客户身份识别'
         })
       } else if (val == 'facial') {
@@ -2397,6 +2404,7 @@ class Video extends Component {
     // 订阅媒体流成功
     this.test_controller.OnSubscribeSucc = (feed, sid) => {
       console.log('订阅媒体流成功', feed, sid);
+      
       this.appGetUsername(sid)
       console.log(muteJson, muteJson.size)
       if (muteJson.size > 0) {
@@ -3016,6 +3024,8 @@ class Video extends Component {
           videoOneName: '',
           voiceVideoOne: false,
           noVideoOne: false
+        },()=>{
+          this.videoListClick()
         })
       }
       if (!document.getElementById("video2").name) {
@@ -3024,6 +3034,8 @@ class Video extends Component {
           videoTwoName: '',
           voiceVideoTwo: false,
           noVideoTwo: false
+        },()=>{
+          this.videoListClick()
         })
       }
       if (!document.getElementById("video3").name) {
@@ -3032,6 +3044,8 @@ class Video extends Component {
           videoThreeName: '',
           voiceVideoThree: false,
           noVideoThree: false
+        },()=>{
+          this.videoListClick()
         })
       }
       if (!document.getElementById("video4").name) {
@@ -3040,6 +3054,8 @@ class Video extends Component {
           videoFourName: '',
           voiceVideoFour: false,
           noVideoFour: false
+        },()=>{
+          this.videoListClick()
         })
       }
       if (!document.getElementById("video5").name) {
@@ -3048,6 +3064,8 @@ class Video extends Component {
           videoFiveName: '',
           voiceVideoFive: false,
           noVideoFive: false
+        },()=>{
+          this.videoListClick()
         })
       }
       if (!document.getElementById("video6").name) {
@@ -3056,6 +3074,8 @@ class Video extends Component {
           videoSixName: '',
           voiceVideoSix: false,
           noVideoSix: false
+        },()=>{
+          this.videoListClick()
         })
       }
 
@@ -3065,6 +3085,8 @@ class Video extends Component {
           videoSevenName: '',
           voiceVideoSeven: false,
           noVideoSeven: false
+        },()=>{
+          this.videoListClick()
         })
       }
       if (!document.getElementById("video8").name) {
@@ -3073,6 +3095,8 @@ class Video extends Component {
           videoEightName: '',
           voiceVideoEight: false,
           noVideoEight: false
+        },()=>{
+          this.videoListClick()
         })
       }
       if (!document.getElementById("video9").name) {
@@ -3081,6 +3105,8 @@ class Video extends Component {
           videoNineName: '',
           voiceVideoNine: false,
           noVideoNine: false
+        },()=>{
+          this.videoListClick()
         })
       }
       if (!document.getElementById("video10").name) {
@@ -3089,6 +3115,8 @@ class Video extends Component {
           videoTenName: '',
           voiceVideoTen: false,
           noVideoTen: false
+        },()=>{
+          this.videoListClick()
         })
       }
       if (!document.getElementById("video11").name) {
@@ -3097,6 +3125,8 @@ class Video extends Component {
           videoElevenName: '',
           voiceVideoEleven: false,
           noVideoEleven: false
+        },()=>{
+          this.videoListClick()
         })
       }
       if (!document.getElementById("video12").name) {
@@ -3105,6 +3135,8 @@ class Video extends Component {
           videoTwelveName: '',
           voiceVideoTwelve: false,
           noVideoTwelve: false
+        },()=>{
+          this.videoListClick()
         })
       }
       this.state.analyserData.delete(sid)
@@ -3794,7 +3826,7 @@ class Video extends Component {
     }
   }
   componentWillMount() {
-    console.log('hsbc_teller_sdk', '1.8.8')
+    console.log('hsbc_teller_sdk', '1.8.9')
     if (this.props.sessionId) {
       this.getRoomStatus({
         sessionId: this.props.sessionId
@@ -4317,6 +4349,17 @@ class Video extends Component {
       isModalVisibleFacial: false
     })
   };
+  ReIdentification = () =>{
+            this.setState({
+              faceResuly: '',
+            facialImg: ocrImage,
+            isFaceImage: false
+            },()=>{
+              const videoMedia = document.getElementById('publish_video_2');
+          videoMedia.srcObject = document.getElementById(videoName).srcObject
+            })
+          
+  }
   // 坐席签字
   transcribingClick = () => {
   };
@@ -4588,6 +4631,8 @@ class Video extends Component {
         }
         this.setState({
           videoOneName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户1'
+        },()=>{
+          this.videoListClick()
         })
       }
       if (document.getElementById('video2').name == sid) {
@@ -4596,6 +4641,8 @@ class Video extends Component {
         }
         this.setState({
           videoTwoName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户2'
+        },()=>{
+          this.videoListClick()
         })
       } if (document.getElementById('video3').name == sid) {
         if (typeIntranet && typeIntranet == 2) {
@@ -4603,6 +4650,8 @@ class Video extends Component {
         }
         this.setState({
           videoThreeName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户3'
+        },()=>{
+          this.videoListClick()
         })
       } if (document.getElementById('video4').name == sid) {
         if (typeIntranet && typeIntranet == 2) {
@@ -4610,6 +4659,8 @@ class Video extends Component {
         }
         this.setState({
           videoFourName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户4'
+        },()=>{
+          this.videoListClick()
         })
       } if (document.getElementById('video5').name == sid) {
         if (typeIntranet && typeIntranet == 2) {
@@ -4617,6 +4668,8 @@ class Video extends Component {
         }
         this.setState({
           videoFiveName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户5'
+        },()=>{
+          this.videoListClick()
         })
       } if (document.getElementById('video6').name == sid) {
         if (typeIntranet && typeIntranet == 2) {
@@ -4624,6 +4677,8 @@ class Video extends Component {
         }
         this.setState({
           videoSixName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户6'
+        },()=>{
+          this.videoListClick()
         })
       }
       if (document.getElementById('video7').name == sid) {
@@ -4632,6 +4687,8 @@ class Video extends Component {
         }
         this.setState({
           videoSevenName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId7").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户7'
+        },()=>{
+          this.videoListClick()
         })
       } if (document.getElementById('video8').name == sid) {
         if (typeIntranet && typeIntranet == 2) {
@@ -4639,6 +4696,8 @@ class Video extends Component {
         }
         this.setState({
           videoEightName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId8").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户8'
+        },()=>{
+          this.videoListClick()
         })
       } if (document.getElementById('video9').name == sid) {
         if (typeIntranet && typeIntranet == 2) {
@@ -4646,6 +4705,8 @@ class Video extends Component {
         }
         this.setState({
           videoNineName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId9").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户9'
+        },()=>{
+          this.videoListClick()
         })
       } if (document.getElementById('video10').name == sid) {
         if (typeIntranet && typeIntranet == 2) {
@@ -4653,6 +4714,8 @@ class Video extends Component {
         }
         this.setState({
           videoTenName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId10").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户10'
+        },()=>{
+          this.videoListClick()
         })
       } if (document.getElementById('video11').name == sid) {
         if (typeIntranet && typeIntranet == 2) {
@@ -4660,6 +4723,8 @@ class Video extends Component {
         }
         this.setState({
           videoElevenName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId11").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户11'
+        },()=>{
+          this.videoListClick()
         })
       } if (document.getElementById('video12').name == sid) {
         if (typeIntranet && typeIntranet == 2) {
@@ -4667,6 +4732,8 @@ class Video extends Component {
         }
         this.setState({
           videoTwelveName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId12").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户12'
+        },()=>{
+          this.videoListClick()
         })
       }
       if (this.state.isPictureInPicture) {
@@ -5364,6 +5431,19 @@ class Video extends Component {
       console.log(err)
     }
   }
+  videoListClick=()=>{
+    // console.log(Math.trunc(document.getElementById("videoList").getBoundingClientRect().height),document.getElementById("videoList").scrollHeight)
+    // if(Math.trunc(document.getElementById("videoList").getBoundingClientRect().height) >= document.getElementById("videoList").scrollHeight && this.state.isVideoList) {
+    //     this.setState({
+    //       isVideoList: false
+    //     })
+      
+    // } else if (Math.trunc(document.getElementById("videoList").getBoundingClientRect().height) < document.getElementById("videoList").scrollHeight && !this.state.isVideoList) {
+    //   this.setState({
+    //     isVideoList: true
+    //   })
+    // }
+  }
   render() {
     const { meetingInfo, isTranscribing } = this.props
     var pdfChildren
@@ -5568,9 +5648,9 @@ class Video extends Component {
 
                 </div>
               </div>
-              <div className="wrapper" style={{ width: '20%', }}>
+              <div id="videoList" className={`wrapper ${this.state.isVideoList? 'videoListClass': ''}`} style={{ width: '20%' }}>
                 <div
-                  className={`itemed`}
+                  className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`}
                 >
                   <div className="publishVideoDiv">
 
@@ -5600,7 +5680,7 @@ class Video extends Component {
 
                 </div>
                 <div
-                  className={`itemed`}
+                  className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`}
                   style={{ position: "relative", display: (this.state.videoOneName) ? '' : 'none' }}
                 >
                   {
@@ -5640,7 +5720,7 @@ class Video extends Component {
                     </div>
                   </div>
                 </div>
-                <div className={`itemed`} style={{ display: (this.state.videoTwoName) ? '' : 'none', }}>
+                <div className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`} style={{ display: (this.state.videoTwoName) ? '' : 'none', }}>
                   <video
                     id="video2"
                     autoPlay
@@ -5667,7 +5747,7 @@ class Video extends Component {
                     </div>
                   </div>
                 </div>
-                <div className={`itemed`}
+                <div className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`}
                   style={{ display: (this.state.videoThreeName) ? '' : 'none' }}>
                   <video
                     id="video3"
@@ -5695,7 +5775,7 @@ class Video extends Component {
                     </div>
                   </div>
                 </div>
-                <div className={`itemed`} style={{ display: (this.state.videoFourName) ? '' : 'none', }}>
+                <div className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`} style={{ display: (this.state.videoFourName) ? '' : 'none', }}>
                   <video
                     id="video4"
                     autoPlay
@@ -5722,7 +5802,7 @@ class Video extends Component {
                     </div>
                   </div>
                 </div>
-                <div className={`itemed`}
+                <div className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`}
                   style={{ display: (this.state.videoFiveName) ? '' : 'none' }}>
                   <video
                     id="video5"
@@ -5750,7 +5830,7 @@ class Video extends Component {
                     </div>
                   </div>
                 </div>
-                <div className={`itemed`} style={{ display: (this.state.videoSixName) ? '' : 'none', }}>
+                <div className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`} style={{ display: (this.state.videoSixName) ? '' : 'none', }}>
                   <video
                     id="video6"
                     autoPlay
@@ -5779,7 +5859,7 @@ class Video extends Component {
 
                 </div>
                 <div
-                  className={`itemed`}
+                  className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`}
                   style={{ position: "relative", display: (this.state.videoSevenName) ? '' : 'none' }}
                 >
                   {
@@ -5819,7 +5899,7 @@ class Video extends Component {
                     </div>
                   </div>
                 </div>
-                <div className={`itemed`} style={{ display: (this.state.videoEightName) ? '' : 'none', }}>
+                <div className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`} style={{ display: (this.state.videoEightName) ? '' : 'none', }}>
                   <video
                     id="video8"
                     autoPlay
@@ -5846,7 +5926,7 @@ class Video extends Component {
                     </div>
                   </div>
                 </div>
-                <div className={`itemed`} style={{ display: (this.state.videoNineName) ? '' : 'none', }}>
+                <div className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`} style={{ display: (this.state.videoNineName) ? '' : 'none', }}>
                   <video
                     id="video9"
                     autoPlay
@@ -5874,7 +5954,7 @@ class Video extends Component {
                   </div>
 
                 </div>
-                <div className={`itemed`}
+                <div className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`}
                   style={{ display: (this.state.videoTenName) ? '' : 'none' }}>
                   <video
                     id="video10"
@@ -5902,7 +5982,7 @@ class Video extends Component {
                     </div>
                   </div>
                 </div>
-                <div className={`itemed`} style={{ display: (this.state.videoElevenName) ? '' : 'none', }}>
+                <div className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`} style={{ display: (this.state.videoElevenName) ? '' : 'none', }}>
                   <video
                     id="video11"
                     autoPlay
@@ -5929,7 +6009,7 @@ class Video extends Component {
                     </div>
                   </div>
                 </div>
-                <div className={`itemed`}
+                <div className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`}
                   style={{ display: (this.state.videoTwelveName) ? '' : 'none' }}>
                   <video
                     id="video12"
@@ -6012,7 +6092,6 @@ class Video extends Component {
           ]}>
             <div className='endModal'>是否要结束并退出会议？</div>
           </Modal>
-
           <Modal title={this.state.titleModal} closable={false} centered={true} visible={this.state.isModalVisibleFacial} footer={[
             !this.state.idCardName && this.state.faceResuly == ''  &&<div key='facial'>
               <Button className="modelButtonCancel" onClick={this.handleCancelFacial}>取消</Button>
@@ -6026,6 +6105,12 @@ class Video extends Component {
 
             </div>,
             !this.state.idCardName && this.state.faceResuly != ''  &&<div key='facial'>
+              {
+                this.state.faceResuly == 'fail' && <Button className="modelButtonOk" type="primary" danger onClick={this.ReIdentification}>重新识别</Button>
+              }
+              {
+                this.state.faceResuly == 'success' && <Button className="modelButtonNo" type="primary" danger>重新识别</Button>
+              }
             <Button className="modelButtonCancel" onClick={this.handleCancelFacial}>完成</Button>
 
           </div>,
@@ -6065,7 +6150,7 @@ class Video extends Component {
                 }
                 {
                   this.state.idCardName && <div className='resuleCard'>
-                    <div>
+                    <div className='imgDIV'>
                       <img className="faceImgCard" src={this.state.facialImgFront} alt=""></img>
                       <img className="faceImgCard" src={this.state.facialImgBack} alt=""></img>
                     </div>
@@ -6085,7 +6170,7 @@ class Video extends Component {
                     }
                     {
                       this.state.faceResuly == 'fail' && <div className='errorClassFace'>
-                      <img src={require("../../assets/img/tooltips2_fail.png").default} alt="" ></img>人脸识别失败</div>
+                      <img src={require("../../assets/img/tooltips2_fail.png").default} alt="" ></img>人脸识别失败--{this.state.faceFailReason}</div>
                     }
                     <div><span>客户姓名</span>  <input disabled type="text" value={this.state.idCardNameFace}/></div>
                     <div><span>身份证号</span>  <input disabled type="text" value={this.state.idCardNumberFace}/></div>
@@ -6096,7 +6181,6 @@ class Video extends Component {
               </div>
             </Spin>
           </Modal>
-
           <Modal title="经理人员授权" closable={false} centered={true} visible={this.state.isModalVisibleSFP}
             footer={[
               <div key='end'>
@@ -6124,9 +6208,6 @@ class Video extends Component {
             </div>
             </Spin>
           </Modal>
-
-
-
           <Modal title={this.state.customerTitleName} closable={false} centered={true} visible={this.state.isModalVisibleCustomer}
             footer={[
               <div key='end'>

package/packages/pages/video/video.less

@@ -563,9 +563,23 @@
 margin-left: 40px;
 }    
 .faceImgCard{
-  width: 11rem;
-  margin: 0 1rem;
+  width: 15rem;
+  margin-right: 3px;
 }
 .titleDiv{
-  font-size: 16px;
+  font-size: 1.4rem;
+}
+.videoListClass{
+  align-content: flex-start;
+flex-wrap: wrap;
+display: inline-flex;
+}
+.videoMinutuListClass{
+  width: 50%;
+}
+.videoMinutuClass{
+  width: 100%;
+}
+.imgDIV{
+  margin: 0 !important;
 }