react_hsbc_teller 0.3.9 → 0.4.0

package/package.json

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

package/packages/pages/video/video.jsx

@@ -52,7 +52,6 @@ class Video extends Component {
     cameraImg: cameraImgOpen,
     voiceStatue: false,
     voiceImg: voiceImgOpen,
-    isBigVideo: 'video1',
     isCustomer: false,
     publishDevic: 1,
     isSharedScreen: false,
@@ -78,7 +77,14 @@ class Video extends Component {
     videoFiveName: '',
     videoSixName: '',
     tabTitles: [
-    ]
+    ],
+    videoList: [],
+    voiceVideoOne: false,
+    voiceVideoTwo: false,
+    voiceVideoThree: false,
+    voiceVideoFour: false,
+    voiceVideoFive: false,
+    voiceVideoSix: false,
   };
   // eslint-disable-next-line no-undef
   test_controller = '';
@@ -426,38 +432,6 @@ class Video extends Component {
   endSessionValue = () => {
     this.test_controller.LeaveRoom()
   };
-  // 放大对应的视频
-  enlargeClick = (val) => {
-    if (val == 'isLangVideo1') {
-      if (document.getElementById('video1').name) {
-        this.setState({ isBigVideo: 'video1' })
-      }
-    } else if (val == 'isLangPublishVideo1') {
-      if (document.getElementById('publish_video1').name && this.state.isCustomer) {
-        this.setState({ isBigVideo: 'publish_video1' })
-      }
-    } else if (val == 'isLangVideo2') {
-      if (document.getElementById('video2').name) {
-        this.setState({ isBigVideo: 'video2' })
-      }
-    } else if (val == 'isLangVideo3') {
-      if (document.getElementById('video3').name) {
-        this.setState({ isBigVideo: 'video3' })
-      }
-    } else if (val == 'isLangVideo4') {
-      if (document.getElementById('video4').name) {
-        this.setState({ isBigVideo: 'video4' })
-      }
-    } else if (val == 'isLangVideo5') {
-      if (document.getElementById('video5').name) {
-        this.setState({ isBigVideo: 'video5' })
-      }
-    } else if (val == 'isLangVideo6') {
-      if (document.getElementById('video6').name) {
-        this.setState({ isBigVideo: 'video6' })
-      }
-    }
-  };
   // 画中画
   pictureInPicture = () => {
     let interval
@@ -745,6 +719,81 @@ class Video extends Component {
           
         }
         
+      } else if (Mival.typeId == 3100) {
+        if(Mival.data.sessionId == this.state.sessionId) {
+          if(Mival.data.userId == this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).uid) {
+            if(Mival.muteStatus == 0) {
+              this.setState({
+                voiceVideoOne: false
+              })
+            } else if(Mival.muteStatus == 1) {
+              this.setState({
+                voiceVideoOne: true
+              })
+            }
+            
+          }
+          if(Mival.data.userId == (document.getElementById("feedId2").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).uid : '')) {
+            if(Mival.muteStatus == 0) {
+              this.setState({
+                voiceVideoTwo: false
+              })
+            } else if(Mival.muteStatus == 1) {
+              this.setState({
+                voiceVideoTwo: true
+              })
+            }
+            
+          }
+          if(Mival.data.userId == (document.getElementById("feedId3").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).uid : '')) {
+            if(Mival.muteStatus == 0) {
+              this.setState({
+                voiceVideoThree: false
+              })
+            } else if(Mival.muteStatus == 1) {
+              this.setState({
+                voiceVideoThree: true
+              })
+            }
+            
+          }
+          if(Mival.data.userId == (document.getElementById("feedId4").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).uid : '')) {
+            if(Mival.muteStatus == 0) {
+              this.setState({
+                voiceVideoFour: false
+              })
+            } else if(Mival.muteStatus == 1) {
+              this.setState({
+                voiceVideoFour: true
+              })
+            }
+            
+          }
+          if(Mival.data.userId == (document.getElementById("feedId5").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).uid : '')) {
+            if(Mival.muteStatus == 0) {
+              this.setState({
+                voiceVideoFive: false
+              })
+            } else if(Mival.muteStatus == 1) {
+              this.setState({
+                voiceVideoFive: true
+              })
+            }
+            
+          }
+          if(Mival.data.userId == (document.getElementById("feedId6").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).uid : '')) {
+            if(Mival.muteStatus == 0) {
+              this.setState({
+                voiceVideoSix: false
+              })
+            } else if(Mival.muteStatus == 1) {
+              this.setState({
+                voiceVideoSix: true
+              })
+            }
+            
+          }
+        }
       }
     };
 
@@ -753,7 +802,7 @@ class Video extends Component {
       type: '2',
       sigType: 1
     };
-    this.mpaasSig(data);
+    
     this.test_controller.GetDevices();
     // 获取设备成功
     this.test_controller.OnGetDevicesSuccess = (devicesInfo) => {
@@ -806,11 +855,13 @@ class Video extends Component {
           obj2.push(b)
         }
       }
-      console.log(obj, obj1)
+      this.mpaasSig(data);
     };
     // 获取设备失败
     this.test_controller.OnGetDevicesFailed = (code, msg) => {
       console.log('获取设备失败', code, msg)
+      message.success('获取设备失败，请检查摄像头设备是否可用或是否禁用摄像头')
+      this.roomCallBack(2,'获取失败失败')
     };
     // 建立连接成功
     this.test_controller.OnConnectOK = () => {
@@ -922,7 +973,7 @@ class Video extends Component {
     //  推送“新加⼊房间者”给与会者
     this.test_controller.OnNewJoinerIn = (participant) => {
       console.log('新加⼊房间者', participant);
-      this.test_controller.ChangeStreamSize(document.getElementById('publish_video1').name, 5)
+      // this.test_controller.ChangeStreamSize(document.getElementById('publish_video1').name, 5)
       this.setState(
         {
           isCustomer: true
@@ -961,6 +1012,24 @@ class Video extends Component {
             },'add'
           )
         } else {
+          // let data_param = {
+          //   isVideo: true,
+          //   videoIndex: this.state.videoList.length + 1,
+          //   videoTwoName: ''
+          // }
+          // let videoList = []
+          // console.log(data_param)
+          // videoList.push(data_param)
+          // this.setState({
+          //   videoList
+          // })
+            // config_param = {
+            //   subscribe_video_id: 'video' + this.state.videoList.length,
+            //   subscribe_audio_id: 'audio' + this.state.videoList.length,
+            //   subscribe_streamId_id: 'subscribe_streamId' + this.state.videoList.length,
+            //   feedId_id: 'feedId' + this.state.videoList.length,
+            //   feedId: feed.feedId
+            // }
           if(!document.getElementById('video1').name) {
             config_param = {
               subscribe_video_id: 'video1',
@@ -1020,6 +1089,7 @@ class Video extends Component {
       }
       if (config_param !== undefined) {
         config_param.need_volume_analyser = true
+        console.log(config_param)
         this.test_controller.Subscribe(config_param)
       }
     };
@@ -1102,7 +1172,7 @@ class Video extends Component {
       }
 
       if(this.state.roomCustomerList.length == 0) {
-        this.test_controller.ChangeStreamSize(document.getElementById('publish_video1').name, 3)
+        // this.test_controller.ChangeStreamSize(document.getElementById('publish_video1').name, 3)
         this.setState({
           isCustomer: false
         })
@@ -1571,7 +1641,7 @@ class Video extends Component {
     }
   };
   isFileSuccuse = () => {
-    if (!this.state.sessionId || this.state.isSuspend || !this.state.isCustomer) {
+    if (!this.state.sessionId || this.state.isSuspend) {
       message.success(this.props.prohibitPrompt)
       return false
     } else {
@@ -1885,6 +1955,28 @@ class Video extends Component {
   appGetUsername = async (sid) => {
     console.log(sid)
     let userId = ''
+    let index
+    // this.state.videoList.map((item,index)=>{
+    //   let name = 'video' + item.videoIndex
+    //   if(document.getElementById(name).name == sid){
+    //     userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById(("feedId" + item.videoIndex)).innerText).uid
+    //     index = index
+    //   }
+    // })
+    // try {
+    //   let result = await API.appGetUsername({
+    //     userId: userId
+    //   });
+    //   console.log(result)
+    //   if (result.code == 200) {
+    //     let data = result.data.userInfo ? result.data.userInfo.userName ? result.data.userInfo.userName : '' : ''
+    //     this.state.videoList[index].videoOneName = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById(("feedId" + item.videoIndex)).innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户' + item.videoIndex
+    //   } else {
+    //     message.success('查询失败')
+    //   }
+    // } catch (err) {
+
+    // }
     if(document.getElementById('video1').name == sid){
       userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).uid
     }
@@ -2051,7 +2143,7 @@ class Video extends Component {
     }
   }
   render() {
-    const {theme} = this.props
+    const {meetingInfo} = this.props
     var pdfChildren
     if (this.props.children) {
       pdfChildren = React.cloneElement(this.props.children, { width: 100, height: 100, id: 12 })
@@ -2059,11 +2151,11 @@ class Video extends Component {
     const customerNameList = (
       <span>
         {
-          theme.customers.map((item,index)=>{
+          meetingInfo.customers.map((item,index)=>{
             return <label>
               {item}
               {
-                theme.customers.length > 0 && index != theme.customers.length-1 &&<span>，</span>
+                meetingInfo.customers.length > 0 && index != meetingInfo.customers.length-1 &&<span>，</span>
               }
               
             </label>
@@ -2082,13 +2174,33 @@ class Video extends Component {
         }
       </div>
     )
+    // const videoCustomer = 
+    //       this.state.videoList.map((item,index)=>{
+    //         return <div className={`itemed`} style={{ display: (item.isVideo) ? '' : 'none', }}>
+    //         <video
+    //           id={'video' + item.videoIndex}
+    //           autoPlay
+    //           muted={true}
+    //           className="video"
+    //         />
+    //         <audio id={'audio' + item.videoIndex} autoPlay />
+    //         <label style={{ display: 'none' }} id={'feedId' + item.videoIndex} type="text" />
+    //         <div className={`customerTitle titleSamlle`}>
+    //           <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>
+    //             {this.state.videoTwoName}
+    //           </div>
+    //         </div>
+    //         <canvas className="canvasClassOne" id={'subscribe_volumeView' + item.videoIndex} width="40" height="70"></canvas>
+    //     </div>
+    //       })
+        
     return (
       <div className="all">
         <Spin spinning={this.state.loading} tip="视频初始化中...">
           <Header></Header>
           {tabTitleList}
           <div className="health" style={{'margin-top': (this.state.tabTitles.length > 0) ? '0px' : '20px' }}>
-            <div className="projection" style={{ display: (this.state.isCustomer) ? '' : 'none', }}>
+            <div className="projection">
               <div className="videoDiv" style={{ display: (this.state.isSelect == 'RMScreen') ? '' : 'none', }}>
                 <div className="videoDiv">
                   <video
@@ -2128,11 +2240,11 @@ class Video extends Component {
                   <ul>
                     <li>
                       <span>会议主题：</span>
-                      <label>{theme.title}</label>
+                      <label>{meetingInfo.title}</label>
                     </li>
                     <li>
                       <span>支持人：</span>
-                      <label>{theme.host}</label>
+                      <label>{meetingInfo.host}</label>
                     </li>
                     <li>
                       <span>参会客户：</span>
@@ -2145,15 +2257,15 @@ class Video extends Component {
               
 
             </div>
-            <div className="wrapper" style={{ width: (this.state.isCustomer) ? '20%' : '100%', }}>
+            <div className="wrapper" style={{ width:  '20%' , }}>
               <div
-                className={`itemed ${this.state.publishDevic == 4 ? '' : (this.state.isBigVideo == 'publish_video1' ? 'isBack' : (this.state.isCustomer ? 'isBack' : ''))} ${this.state.isCustomer ? '' : 'video1Div'}`}
+                className={`itemed ${this.state.publishDevic == 4 ? '' : 'isBack'} `}
               >
                 <div className="publishVideoDiv">
                   
                   <video
                     id="publish_video1"
-                    className={`publishVideoClass ${this.state.isCustomer ? '' : "videoFit"}`}
+                    className={`publishVideoClass`}
                     autoPlay
                     muted={true}
                     webkit-playsinline={true}
@@ -2163,21 +2275,23 @@ class Video extends Component {
                   {
                     this.state.voiceStatue && <img
                       alt=""
-                      src={require("../../assets/img/icon_MuteOne.png").default}
-                      className="imgClass voiceClass"
+                      src={require("../../assets/img/jingyin.png").default}
+                      className="imgClassVoice voiceClass"
                     />
                   }
-                  <div id="publish_video_div" style={{ display: (this.state.isCustomer) ? '' : 'none'}} className={`tellerTitle titleSamlle`}>
+                  <div id="publish_video_div" className={`tellerTitle titleSamlle`}>
                     <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>坐席</div>
                   </div>
-                  <canvas style={{ display: (this.state.isCustomer && !this.state.voiceStatue) ? '' : 'none', }} className="canvasClass" id="publish_volumeView" width="40" height="70"></canvas>
+                  <canvas style={{ display: (!this.state.voiceStatue) ? '' : 'none', }} className="canvasClass" id="publish_volumeView" width="40" height="70"></canvas>
                 </div>
 
               </div>
+              {/* {
+                videoCustomer
+              } */}
               <div style={{ display: (this.state.isCustomer) ? '' : 'none', }}>
               <div
-                className={`itemed ${this.state.isBigVideo == 'video1' ? 'item1' : ""}`}
-                // className="itemed item1"
+                className={`itemed`}
                 style={{ position: "relative"}}
               >
                 {
@@ -2196,6 +2310,13 @@ class Video extends Component {
                   />
                   <audio id="audio1" autoPlay />
                   <label style={{ display: 'none' }} id="feedId1" type="text" />
+                  {
+                    this.state.voiceVideoOne && <img
+                      alt=""
+                      src={require("../../assets/img/jingyin.png").default}
+                      className="imgClassVoice voiceVideoClass"
+                    />
+                  }
                   <div style={{ display: (this.state.videoOneName) ? '' : 'none'}} className={`customerTitle titleSamlle`}>
                     <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>
                       {this.state.videoOneName}
@@ -2203,7 +2324,7 @@ class Video extends Component {
 
                     
                   </div>
-                  <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView1" width="40" height="70"></canvas>
+                  <canvas style={{ display: (!this.state.voiceVideoOne) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView1" width="40" height="70"></canvas>
                 </div>
               </div>
               <div className={`itemed`}>
@@ -2215,12 +2336,19 @@ class Video extends Component {
                   />
                   <audio id="audio2" autoPlay />
                   <label style={{ display: 'none' }} id="feedId2" type="text" />
+                  {
+                    this.state.voiceVideoTwo && <img
+                      alt=""
+                      src={require("../../assets/img/jingyin.png").default}
+                      className="imgClassVoice voiceVideoClass"
+                    />
+                  }
                   <div style={{ display: (this.state.videoTwoName) ? '' : 'none'}} className={`customerTitle titleSamlle`}>
                     <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>
                       {this.state.videoTwoName}
                     </div>
                   </div>
-                  <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView2" width="40" height="70"></canvas>
+                  <canvas style={{ display: (!this.state.voiceVideoTwo) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView2" width="40" height="70"></canvas>
               </div>
               <div className={`itemed`}
               style={{'margin-top': '5px' }}>
@@ -2232,12 +2360,19 @@ class Video extends Component {
                 />
                 <audio id="audio3" autoPlay />
                 <label style={{ display: 'none' }} id="feedId3" type="text" />
+                {
+                    this.state.voiceVideoThree && <img
+                      alt=""
+                      src={require("../../assets/img/jingyin.png").default}
+                      className="imgClassVoice voiceVideoClass"
+                    />
+                  }
                 <div style={{ display: (this.state.videoThreeName) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily }} className={`customerTitle titleSamlle`}>
                   <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>
                     {this.state.videoThreeName}
                   </div>
                 </div>
-                <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView3" width="40" height="70"></canvas>
+                <canvas style={{ display: (!this.state.voiceVideoThree) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView3" width="40" height="70"></canvas>
               </div>
               <div className={`itemed`}>
                 <video
@@ -2248,12 +2383,19 @@ class Video extends Component {
                 />
                 <audio id="audio4" autoPlay />
                 <label style={{ display: 'none' }} id="feedId4" type="text" />
+                {
+                    this.state.voiceVideoFour && <img
+                      alt=""
+                      src={require("../../assets/img/jingyin.png").default}
+                      className="imgClassVoice voiceVideoClass"
+                    />
+                  }
                 <div style={{ display: (this.state.videoFourName) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily }} className={`customerTitle titleSamlle`}>
                   <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>
                     {this.state.videoFourName}
                   </div>
                 </div>
-                <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView4" width="40" height="70"></canvas>
+                <canvas style={{ display: (!this.state.voiceVideoFour) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView4" width="40" height="70"></canvas>
               </div>
               <div className={`itemed`}
               style={{'margin-top': '5px'  }}>
@@ -2265,14 +2407,21 @@ class Video extends Component {
                 />
                 <audio id="audio5" autoPlay />
                 <label style={{ display: 'none' }} id="feedId5" type="text" />
+                {
+                    this.state.voiceVideoFive && <img
+                      alt=""
+                      src={require("../../assets/img/jingyin.png").default}
+                      className="imgClassVoice voiceVideoClass"
+                    />
+                  }
                 <div style={{ display: (this.state.videoFiveName) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily }} className={`customerTitle titleSamlle`}>
                   <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>
                     {this.state.videoFiveName}
                   </div>  
                 </div>
-                <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView5" width="40" height="70"></canvas>
+                <canvas style={{ display: (!this.state.voiceVideoFive) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView5" width="40" height="70"></canvas>
               </div>
-              <div className={`"itemed"`}>
+              <div className={`itemed`}>
                 <video
                   id="video6"
                   autoPlay
@@ -2281,12 +2430,19 @@ class Video extends Component {
                 />
                 <audio id="audio6" autoPlay />
                 <label style={{ display: 'none' }} id="feedId6" type="text" />
+                {
+                    this.state.voiceVideoSix && <img
+                      alt=""
+                      src={require("../../assets/img/jingyin.png").default}
+                      className="imgClassVoice voiceVideoClass"
+                    />
+                  }
                 <div style={{ display: (this.state.videoSixName) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily }} className={`customerTitle titleSamlle`}>
                   <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>
                     {this.state.videoSixName}
                   </div>
                 </div>
-                <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView6" width="40" height="70"></canvas>
+                <canvas style={{ display: (!this.state.voiceVideoSix) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView6" width="40" height="70"></canvas>
 
               </div>
               </div>
@@ -2390,7 +2546,7 @@ Video.defaultProps = {
   fontSize: '14',
   fontFamily: 'auto',
   menus: ['SHARE', 'FRIES', 'OCR', 'INVITE', 'PIP'],
-  theme: {
+  meetingInfo: {
     title: '测试',
     host: 'wmz',
     customers: ['王三','张思']

package/packages/pages/video/video.less

@@ -12,6 +12,10 @@
   height: 100%;
   float: right
 }
+.imgClassVoice{
+  width: 60px;
+  height: 60px;
+}
 .sharedScreen{
   font-size: 10px;
   position: absolute;
@@ -227,4 +231,10 @@ border-radius: 0px 0px 2px 2px;
   position: absolute;
   bottom: 0;
   left: 0;
+  transform: rotateY(180deg);
+}
+.voiceVideoClass{
+  position: absolute;
+  bottom: 0;
+  right: 0;
 }