react_hsbc_teller 0.3.0 → 0.3.4

package/package.json

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

package/packages/pages/foot/foot.jsx

@@ -105,12 +105,12 @@ export default class foot extends Component {
                             {screenName}
                         </div>
                     </div>
-                    <div className="one" onClick={this.suspend.bind(this)}>
+                    {/* <div className="one" onClick={this.suspend.bind(this)}>
                         <img className="imgClass" src={require("../../assets/img/icon_suspend.png").default} alt="" />
                         <div className="text">
                             {suspendName}
                         </div>
-                    </div>
+                    </div> */}
                     <Popover content={content} trigger="click" visible={this.state.clicked}>
                     <div className="one" onClick={this.facialRecognition.bind(this)}>
                         <img className="imgClass" src={require("../../assets/img/Face_recognition.png").default} alt="" />

package/packages/pages/foot/foot.less

@@ -1,11 +1,11 @@
 .foot{
     background: #fff;
-height: 80px;
+height: 78px;
 display: inline-flex;
 width: 100%;
-position: absolute;
-    bottom: 0;
-    left: 0;
+// position: absolute;
+//     bottom: 0;
+//     left: 0;
 }
 .total{
     display: inline-flex;

package/packages/pages/video/video.jsx

@@ -25,6 +25,7 @@ const LEAVE_TYPE = {
   TELLER_EXIT: '1', // 坐席退出
   ROOM_DESTROYED: '-1', // 房间异常
 }
+let pictureInPictureVideo = ''
 @injectIntl
 class Video extends Component {
   signCanvas = React.createRef();
@@ -67,6 +68,7 @@ class Video extends Component {
     rtoken: this.props.mtoken,
     sessionId: this.props.sessionId,
     imRoomId: this.props.imRoomId,
+    isPictureInPicture: false,
   };
   // eslint-disable-next-line no-undef
   test_controller = '';
@@ -434,27 +436,12 @@ class Video extends Component {
   };
   // 画中画
   pictureInPicture = () => {
-    // const publish_config = {};
-    // publish_config.media_type = 1;
-    // publish_config.publish_device = 4;
-    // publish_config.need_volume_analyser = true;
-    // publish_config.video_profile_type = 3;
-    // publish_config.part_of_screen_id = 'touBoxItem';
-    // publish_config.publish_video_id = 'video3';
-    // publish_config.publish_streamId_id = 'subscribe_streamId3';
-    // // publish_config.publish_tag = 'sharedScreen'
-    // this.test_controller.Publish(publish_config);
-    // callNimIM('sendCustomCmdMsg', {
-    //   customId: this.state.imRoomId,
-    //   content: JSON.stringify({
-    //     'typeId': 2030,
-    //     'sessionId': this.state.sessionId,
-    //     'sharedScreen': 1,
-    //     'tellerId': this.props.tellerAccount
-    //   })
-    // });
+    let interval
     if (this.isFileSuccuse()) {
-      const list = []
+      if(this.state.isPictureInPicture){
+        document.exitPictureInPicture()
+      } else {
+        const list = []
       if(document.getElementById('video1').name) {
         list.push('video1')
       }
@@ -486,7 +473,7 @@ class Video extends Component {
       const cobj = canvas.getContext('2d'); // 获取绘图环境
       canvas.width = width;
       canvas.height = height;
-      let interval = setInterval(() => {
+      interval = setInterval(() => {
         cobj.clearRect(0, 0, width, height);
         for(let i=0;i<list.length;i++){
           
@@ -501,54 +488,35 @@ class Video extends Component {
         } else {
           newVideoHeight = videoHeight * 320 / videoWidth;
         }
-        cobj.drawImage(videoDiv, 320 * i, 480 - newVideoHeight, 320, newVideoHeight);
+        cobj.drawImage(videoDiv, 320 * i, (480 - newVideoHeight)/2, 320, newVideoHeight);
         }
-        // cobj.clearRect(0, 0, width, height);
-        // let videoId = 'publish_video1';
-        // let videoDiv = document.getElementById(videoId);
-        // let videoWidth = videoDiv.videoWidth;
-        // let videoHeight = videoDiv.videoHeight;
-        // let newVideoWidth = 320;
-        // let newVideoHeight = 480;
-        // if (videoHeight * 320 / videoWidth > 480) {
-        //   newVideoWidth = videoWidth * 480 / videoHeight;
-        // } else {
-        //   newVideoHeight = videoHeight * 320 / videoWidth;
-        // }
-        // cobj.drawImage(videoDiv, 0, 480 - newVideoHeight, newVideoWidth, newVideoHeight);
-
-        // let subscribeVideo = 'video1';
-        // let subscribeVideoDiv = document.getElementById(subscribeVideo);
-        // let subscribeVideoDivWidth = subscribeVideoDiv.videoWidth;
-        // let subscribeVideoDivHeight = subscribeVideoDiv.videoHeight;
-        // let newVideoWidth1 = 320;
-        // let newVideoHeight1 = 480;
-        // if (subscribeVideoDivHeight * 320 / subscribeVideoDivWidth > 480) {
-        //   newVideoWidth1 = subscribeVideoDivWidth * 480 / subscribeVideoDivHeight;
-        // } else {
-        //   newVideoHeight1 = subscribeVideoDivHeight * 320 / subscribeVideoDivWidth;
-        // }
-        // cobj.drawImage(subscribeVideoDiv, 320, 480 - newVideoHeight1, newVideoWidth1, newVideoHeight1);
-
       }, 100);
       const captureStream = canvas.captureStream();
       const mix_stream = new MediaStream(captureStream);
-      let video = document.getElementById('mixedvideo');
-      video.srcObject = mix_stream;
-      video.onloadedmetadata = () => {
-        video.requestPictureInPicture();
+      pictureInPictureVideo = document.getElementById('mixedvideo');
+      pictureInPictureVideo.srcObject = mix_stream;
+      pictureInPictureVideo.onloadedmetadata = () => {
+        pictureInPictureVideo.requestPictureInPicture();
       };
+      }
+      
 
-      video.addEventListener('enterpictureinpicture', (event) => {
+      pictureInPictureVideo.addEventListener('enterpictureinpicture', (event) => {
         //可获取画中画窗口的一些数据，如宽高等
-        video.style.display = 'block';
-        video.play();
+        pictureInPictureVideo.style.display = 'block';
+        pictureInPictureVideo.play();
+        this.setState({
+          isPictureInPicture: true
+        })
       });
 
-      video.addEventListener('leavepictureinpicture', (event) => {
-        video.srcObject = null;
-        video.style.display = "none";
+      pictureInPictureVideo.addEventListener('leavepictureinpicture', (event) => {
+        pictureInPictureVideo.srcObject = null;
+        pictureInPictureVideo.style.display = "none";
         clearInterval(interval);
+        this.setState({
+          isPictureInPicture: false
+        })
       });
     }
   };
@@ -759,6 +727,17 @@ class Video extends Component {
     // 发布媒体流成功
     this.test_controller.OnPublishSucc = (sid) => {
       console.log('发布媒体流成功', sid)
+      if(sid == document.getElementById('video10').name) {
+          callNimIM('sendCustomCmdMsg', {
+            customId: this.state.imRoomId,
+            content: JSON.stringify({
+              'typeId': 2030,
+              'sessionId': this.state.sessionId,
+              'sharedScreen': 1,
+              'tellerId': this.props.tellerAccount
+            })
+          });
+      }
     };
     // 发布媒体流失败
     this.test_controller.OnPublishFailed = (sid, err_code, err_msg) => {
@@ -810,7 +789,18 @@ class Video extends Component {
     };
     // 取消发布成功
     this.test_controller.OnUnPublishSucc = (sid) => {
-      console.log('取消发布成功', sid)
+      console.log('取消发布成功', sid,document.getElementById('publish_video1').name)
+      if(sid != document.getElementById('publish_video1').name) {
+        callNimIM('sendCustomCmdMsg', {
+          customId: this.state.imRoomId,
+          content: JSON.stringify({
+            'typeId': 2030,
+            'sessionId': this.state.sessionId,
+            'sharedScreen': 0,
+            'tellerId': this.props.tellerAccount
+          })
+        })
+      }
     };
     // 取消订阅媒体流成功
     this.test_controller.OnUnSubscribeSucc = (sid) => {
@@ -997,36 +987,6 @@ class Video extends Component {
     // 切流成功通知
     this.test_controller.OnChangeMediaStreamSuccess = (sid) => {
       console.log('切流成功通知', sid);
-      if (this.state.publishDevic == 2) {
-        // 打开共享
-        callNimIM('sendCustomCmdMsg', {
-          customId: this.state.imRoomId,
-          content: JSON.stringify({
-            'typeId': 2030,
-            'sessionId': this.state.sessionId,
-            'sharedScreen': 1,
-            'tellerId': this.props.tellerAccount
-          })
-        });
-        this.setState({
-          isSharedScreen: true,
-          screenName: '取消共享'
-        });
-      } else {
-        this.setState({
-          isSharedScreen: false,
-          screenName: '投屏'
-        });
-        callNimIM('sendCustomCmdMsg', {
-          customId: this.state.imRoomId,
-          content: JSON.stringify({
-            'typeId': 2030,
-            'sessionId': this.state.sessionId,
-            'sharedScreen': 0,
-            'tellerId': this.props.tellerAccount
-          })
-        })
-      }
     };
     // 切流失败通知
     this.test_controller.OnChangeMediaStreamFailed = (
@@ -1085,14 +1045,14 @@ class Video extends Component {
       let outcanvas = document.createElement("canvas");
       outcanvas.width = canvas.width;
       outcanvas.height = canvas.height;
-      ctx.strokeStyle = "#00847F";
+      ctx.strokeStyle = "#db0011";
       ctx.lineWidth = 2;
       ctx.clearRect(0, 0, canvas.width, canvas.height); //清理画布
       let dataArray = new Uint8Array(analyser.frequencyBinCount);
       analyser.getByteFrequencyData(dataArray);
       let step = Math.round(dataArray.length / 60); //采样步长
       for (var i = 0; i < 40; i++) {
-        let energy = (dataArray[step * i] / 256.0) * 50;
+        let energy = (dataArray[step * i] / 256.0) * 80;
         for (var j = 0; j < energy; j++) {
           ctx.beginPath();
           ctx.moveTo(20 * i + 2, 200 + 4 * j);
@@ -1113,7 +1073,7 @@ class Video extends Component {
       function draw() {
         ctx.drawImage(outcanvas, 0, 0);
         ctx.save();
-        ctx.translate(canvas.width / 2, canvas.height / 2);
+        ctx.translate(canvas.width / 4, canvas.height / 2);
         ctx.rotate(Math.PI);
         ctx.scale(-1, 1);
         ctx.drawImage(outcanvas, -canvas.width / 2, -canvas.height / 2);
@@ -1159,6 +1119,7 @@ class Video extends Component {
       this.setState({
         isCustomer: false,
         isWhiteboard: false,
+        isPictureInPicture: false,
       });
       this.props.onLeaveRoom({
         code: LEAVE_TYPE.TELLER_EXIT,
@@ -1176,7 +1137,7 @@ class Video extends Component {
       let result = await API.getRoomStatus({
         sessionId: data.sessionId
       });
-      if (result.code == 200 && result.data.roomStatu == 1) {
+      if (result.code == 200 && result.data.roomStatus == 1) {
         this.addToScript()
       } else {
         message.success('当前房间状态异常')
@@ -1262,7 +1223,7 @@ class Video extends Component {
   }
   componentWillMount() {
     if (this.props.sessionId) {
-      thid.getRoomStatus({
+      this.getRoomStatus({
         sessionId: this.props.sessionId
       })
     } else {
@@ -1411,6 +1372,10 @@ class Video extends Component {
           
           screenName: '投屏'
         });
+        console.log(pictureInPictureVideo)
+        if(this.state.isPictureInPicture) {
+          document.exitPictureInPicture()
+        }
       } else {
         if (document.getElementById('video10').name) {
           publish_config.media_type = 1;
@@ -1425,7 +1390,7 @@ class Video extends Component {
           publish_config.video_profile_type = 5
           publish_config.publish_video_id = 'video10'
           publish_config.publish_streamId_id = 'subscribe_streamId10'
-          publish_config.publish_tag = ''
+          publish_config.publish_tag = 'projectionWhiteboard'
           this.test_controller.Publish(publish_config)
         }
 
@@ -1442,6 +1407,10 @@ class Video extends Component {
           screenName: '取消共享',
           isPDF: false
         })
+        if(!this.state.isPictureInPicture) {
+          this.pictureInPicture()
+        }
+        
       }
     }
   };
@@ -1701,7 +1670,7 @@ class Video extends Component {
         publish_config.part_of_screen_id = 'touBoxItem';
         publish_config.publish_video_id = 'video10'
         publish_config.publish_streamId_id = 'subscribe_streamId10'
-        publish_config.publish_tag = ''
+        publish_config.publish_tag = 'projectionWhiteboard'
         this.test_controller.Publish(publish_config)
       }
     } else{
@@ -1736,7 +1705,7 @@ class Video extends Component {
         <Spin spinning={this.state.loading} tip="视频初始化中...">
           <Header></Header>
           <div className="health">
-            <div className="projection">
+            <div className="projection" style={{ display: (this.state.isCustomer) ? '' : 'none', }}>
               <div className="button">
                 <div className={`${this.state.isSelect == 'video' ? 'selectSee' : "noSelest"}`} onClick={this.switchSelect.bind(this)}>视频画面</div>
                 <div className={`${this.state.isSelect == 'noVideo' ? 'selectSee' : "noSelest"}`} onClick={this.switchSelect.bind(this)}>投屏白板</div>
@@ -1764,14 +1733,14 @@ class Video extends Component {
               <div
                 className={`itemed ${this.state.isBigVideo == 'video1' ? 'item1' : ""}`}
                 // className="itemed item1"
-                style={{ position: "relative" }}
+                style={{ position: "relative",'margin-right': '5px',  }}
                 onClick={this.enlargeClick.bind(this, 'isLangVideo1')}
               >
                 {
                   this.state.customAudioed && <img
                     alt=""
                     src={require("../../assets/img/yingpin.png").default}
-                    style={{ width: "100%", height: "100%" }}
+                    style={{ width: "100%", height: "100%",}}
                   ></img>
                 }
                 <div className="video1Div" style={{ display: (!this.state.customAudioed) ? '' : 'none', }}>
@@ -1783,7 +1752,8 @@ class Video extends Component {
                   />
                   <audio id="audio1" autoPlay />
                   <label style={{ display: 'none' }} id="feedId1" type="text" />
-                  <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="subscribe_volumeView1" width="20" height="50"></canvas>
+                  <div style={{ display: (this.state.isCustomer) ? '' : 'none', }} className='customerTitle'>客户</div>
+                  <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView1" width="40" height="70"></canvas>
                 </div>
               </div>
               <div
@@ -1822,13 +1792,12 @@ class Video extends Component {
                   />
                   <audio id="audio1" autoPlay />
                   <label style={{ display: 'none' }} id="publish_streamId1" type="text" />
-                  <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="publish_volumeView" width="20" height="50"></canvas>
+                  <div style={{ display: (this.state.isCustomer) ? '' : 'none', }} className='tellerTitle'>坐席</div>
+                  <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="publish_volumeView" width="40" height="70"></canvas>
                 </div>
 
               </div>
-              <div className={`itemed ${this.state.isBigVideo == 'video2' ? 'item1' : ""}`}>
-
-                <div onClick={this.enlargeClick.bind(this, 'isLangVideo2')}>
+              <div className={`itemed ${this.state.isBigVideo == 'video2' ? 'item1' : ""}`} style={{'margin-top': '5px',  }} onClick={this.enlargeClick.bind(this, 'isLangVideo2')}>
                   <video
                     id="video2"
                     autoPlay
@@ -1837,10 +1806,11 @@ class Video extends Component {
                   />
                   <audio id="audio2" autoPlay />
                   <label style={{ display: 'none' }} id="feedId2" type="text" />
-                  <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="subscribe_volumeView2" width="20" height="50"></canvas>
-                </div>
+                  {/* <div className='customerTitle'>客户</div> */}
+                  <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView2" width="40" height="70"></canvas>
               </div>
               <div className={`itemed ${this.state.isBigVideo == 'video3' ? 'item1' : ""}`}
+              style={{'margin-top': '5px',  }}
                 onClick={this.enlargeClick.bind(this, 'isLangVideo3')}>
                 <video
                   id="video3"
@@ -1850,9 +1820,11 @@ class Video extends Component {
                 />
                 <audio id="audio3" autoPlay />
                 <label style={{ display: 'none' }} id="feedId3" type="text" />
-                <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="subscribe_volumeView3" width="20" height="50"></canvas>
+                {/* <div style={{ display: (this.state.isCustomer) ? '' : 'none', }} className='customerTitle'>客户</div> */}
+                <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView3" width="40" height="70"></canvas>
               </div>
               <div className={`itemed ${this.state.isBigVideo == 'video4' ? 'item1' : ""}`}
+              style={{'margin-right': '5px',  }}
                 onClick={this.enlargeClick.bind(this, 'isLangVideo4')}>
                 <video
                   id="video4"
@@ -1862,9 +1834,11 @@ class Video extends Component {
                 />
                 <audio id="audio4" autoPlay />
                 <label style={{ display: 'none' }} id="feedId4" type="text" />
-                <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="subscribe_volumeView4" width="20" height="50"></canvas>
+                {/* <div style={{ display: (this.state.isCustomer) ? '' : 'none', }} className='customerTitle'>客户</div> */}
+                <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView4" width="40" height="70"></canvas>
               </div>
               <div className={`itemed ${this.state.isBigVideo == 'video5' ? 'item1' : ""}`}
+              style={{'margin-top': '5px',  }}
                 onClick={this.enlargeClick.bind(this, 'isLangVideo5')}>
                 <video
                   id="video5"
@@ -1874,23 +1848,20 @@ class Video extends Component {
                 />
                 <audio id="audio5" autoPlay />
                 <label style={{ display: 'none' }} id="feedId5" type="text" />
-                <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="subscribe_volumeView5" width="20" height="50"></canvas>
+                {/* <div style={{ display: (this.state.isCustomer) ? '' : 'none', }} className='customerTitle'>客户</div> */}
+                <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView5" width="40" height="70"></canvas>
               </div>
-              <div onClick={this.enlargeClick.bind(this, 'isLangVideo6')} className={`${this.state.isBigVideo == 'video6' ? 'item1' : "itemed"}`}>
-                {/* <div style={{ display: (this.state.isPDF) ? '' : 'none', }} id="touBoxItem">
-                       {pdfChildren}
-                       </div> */}
-                {/* <div style={this.state.isPDF ? {display:  'none'}: {}}> */}
+              <div onClick={this.enlargeClick.bind(this, 'isLangVideo6')} style={{'margin-top': '5px',  }} className={`${this.state.isBigVideo == 'video6' ? 'item1' : "itemed"}`}>
                 <video
                   id="video6"
                   autoPlay
-                  muted={true}
+                  muted={true} 
                   className="video"
                 />
                 <audio id="audio6" autoPlay />
                 <label style={{ display: 'none' }} id="feedId6" type="text" />
-                <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="subscribe_volumeView6" width="20" height="50"></canvas>
-                {/* </div> */}
+                {/* <div style={{ display: (this.state.isCustomer) ? '' : 'none', }} className='customerTitle'>客户</div> */}
+                <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView6" width="40" height="70"></canvas>
 
               </div>
             </div>
@@ -1967,7 +1938,7 @@ class Video extends Component {
               ></CanvasDraw>
             </div>
           </Modal>
-          <video className="mixedvideo" id="mixedvideo" autoPlay muted={true} width="400" height="400"
+          <video className="mixedvideo" id="mixedvideo" autoPlay muted={true} width="0" height="0"
             webkit-playsinline="true" playsInline={true} x5-playsinline="x5-playsinline"
             x-webkit-airplay="true"></video>
         </Spin>

package/packages/pages/video/video.less

@@ -35,6 +35,7 @@
   color: #fff;
   font-weight: bold;
   line-height: 150px;
+  position: relative;
 }
 .item1 {
   grid-column-start: 1;
@@ -78,8 +79,8 @@
   height: 100%;
 }
 .health{
-  margin: 20px;
-  height:  ~"calc(100vh - 60px)";
+  margin: 20px 20px 0 20px;
+  height:  ~"calc(100vh - 130px)";
 }
 .all{
   height: 100%;
@@ -126,6 +127,11 @@
   bottom: 0;
     left: 0;
 }
+.canvasClassOne{
+  position: absolute;
+  bottom: 0;
+    right: 0;
+}
 .content{
   height: 654px;
   border-radius: 4px;
@@ -138,7 +144,7 @@
 }
 .projection{
   width: 80%;
-  height: 88%;
+  height:  ~"calc(100vh - 130px)";
   position: absolute;
   z-index: 1;
   // background: #fff;
@@ -147,6 +153,8 @@
     width: 100%;
     position: absolute;
     z-index: 1;
+    top: 0;
+    left: 80px;
     .selectSee{
       background: #00847F;
 border-radius: 0px 0px 2px 2px;
@@ -158,7 +166,7 @@ border-radius: 0px 0px 2px 2px;
     }
     div{
       font-size: 16px;
-      margin: 15px;
+      margin: 0 15px;
       color: #FFFFFF;
       padding: 6px 13px;
     }
@@ -172,4 +180,30 @@ border-radius: 0px 0px 2px 2px;
       background: #333;
     }
   }
+}
+.customerTitle{
+  position: absolute;
+  top: 0;
+  left: 0px;
+  width: 80px;
+  line-height: 30px;
+  height: 30px;
+  background: rgba(219, 0, 17, 0.1);
+  border-radius: 4px 0px 2px 0px;
+  color: #DB0011;
+  font-size: 14px;
+}
+.tellerTitle{
+  position: absolute;
+  top: 0;
+  right: 0px;
+  width: 80px;
+  line-height: 30px;
+  height: 30px;
+  background: rgba(219, 0, 17, 0.1);
+  border-radius: 4px 0px 2px 0px;
+  transform: rotateY( 
+180deg);
+  color: #DB0011;
+  font-size: 14px;
 }