react_hsbc_teller 0.3.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react_hsbc_teller",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "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/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
+        })
       });
     }
   };
@@ -1085,14 +1053,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 +1081,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 +1127,7 @@ class Video extends Component {
       this.setState({
         isCustomer: false,
         isWhiteboard: false,
+        isPictureInPicture: false,
       });
       this.props.onLeaveRoom({
         code: LEAVE_TYPE.TELLER_EXIT,
@@ -1262,7 +1231,7 @@ class Video extends Component {
   }
   componentWillMount() {
     if (this.props.sessionId) {
-      thid.getRoomStatus({
+      this.getRoomStatus({
         sessionId: this.props.sessionId
       })
     } else {
@@ -1411,6 +1380,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;
@@ -1442,6 +1415,10 @@ class Video extends Component {
           screenName: '取消共享',
           isPDF: false
         })
+        if(!this.state.isPictureInPicture) {
+          this.pictureInPicture()
+        }
+        
       }
     }
   };
@@ -1736,7 +1713,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 == 'noVideo') ? '' : '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>
@@ -1783,7 +1760,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,7 +1800,8 @@ 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>
@@ -1837,7 +1816,8 @@ 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 className='customerTitle'>客户</div> */}
+                  <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView2" width="40" height="70"></canvas>
                 </div>
               </div>
               <div className={`itemed ${this.state.isBigVideo == 'video3' ? 'item1' : ""}`}
@@ -1850,7 +1830,8 @@ 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' : ""}`}
                 onClick={this.enlargeClick.bind(this, 'isLangVideo4')}>
@@ -1862,7 +1843,8 @@ 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' : ""}`}
                 onClick={this.enlargeClick.bind(this, 'isLangVideo5')}>
@@ -1874,13 +1856,10 @@ 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'}: {}}> */}
                 <video
                   id="video6"
                   autoPlay
@@ -1889,8 +1868,8 @@ class Video extends Component {
                 />
                 <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 +1946,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;
@@ -126,6 +127,11 @@
   bottom: 0;
     left: 0;
 }
+.canvasClassOne{
+  position: absolute;
+  bottom: 0;
+    right: 0;
+}
 .content{
   height: 654px;
   border-radius: 4px;
@@ -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;
 }