react_hsbc_teller 0.4.8 → 0.5.2

package/package.json

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

package/packages/pages/foot/foot.jsx

@@ -68,7 +68,7 @@ export default class foot extends Component {
               <div className="total totalTwo">
                   {
                       menus.map((item)=>{
-                          return <span>
+                          return <div className='footHover'>
                           {
                                   isTranscribing &&
                                   <div className="one" onClick={this.transcribingClick.bind(this)}>
@@ -124,7 +124,7 @@ export default class foot extends Component {
                                   </div>
                               </div>
                       }
-                          </span>
+                          </div>
                             
                       })
                   }
@@ -142,12 +142,14 @@ export default class foot extends Component {
                         </div>
                         
                     </div>
-                    <div className="one" onClick={this.inspection.bind(this)}>
+                    <div className='footHover' onClick={this.inspection.bind(this)}>
+                    <div className="one">
                         <img className="imgClass" src={cameraImg} alt="" />
                         <div className="text">
                             设备检测
                         </div>
                     </div>
+                    </div>
                 </div>
                 {defaultList}
                 

package/packages/pages/foot/foot.less

@@ -13,21 +13,20 @@ width: 100%;
 
   align-items: center;
 .one{
-    margin-top: 5px;
+    padding-top: 5px;
         display: flex;
   line-height: 32px;
   flex-direction: column;
   align-items: center;
   flex-wrap: nowrap;
   }
-//   .footHover :hover{
-//       background: #F3F3F3;
-//       border-radius: 8px;
-//       width: 84px;
-//       height: 32px;
-//   }
+  .footHover :hover{
+      background: #F3F3F3;
+      border-radius: 8px;
+  }
   .text{
     margin-top: 10px;
+    padding-bottom: 10px;
     text-align: center;
     width: 80px;
 height: 11px;

package/packages/pages/video/video.jsx

@@ -11,7 +11,6 @@ import voiceImgOpen from '../../assets/img/icon_Mute.png'
 import voiceImgCloe from '../../assets/img/icon_MuteOne.png'
 import cameraImgOpen from '../../assets/img/icon_camera.png'
 import cameraImgCloe from '../../assets/img/icon_cameraOne.png'
-import Background from '../../assets/img/placeholder_bg.png'
 import { callNimIM } from '../../utils/cell.js'
 import Modal from "antd/lib/modal";
 import 'antd/lib/modal/style'
@@ -1931,7 +1930,7 @@ class Video extends Component {
       analyser.getByteFrequencyData(dataArray);
       let step = Math.round(dataArray.length / 60); //采样步长
       var img = document.getElementById("icon_huatong");
-      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+      ctx.drawImage(img, 0, 0, this.props.microphoneSize, this.props.microphoneSize);
       // 以画布左上角为坐标原点
       let drawArea = {
         x1: 28 / 50 * canvas.width, // 波动范围右下角的点坐标
@@ -2808,19 +2807,28 @@ class Video extends Component {
         }
       </div>
     )
-    const sectionStyle = {
-      backgroundImage: `url(${Background})`,
-      'background-repeat': 'no-repeat',
-      'background-size': '100% 100%'
+    const sectionStyle = this.state.tabTitles.length > 0 ? {
+      'z-index': '-1',
+      width:'100%', 
+      height:'100%',
+      position: 'absolute'
+    } :{
+      'z-index': '0',
+      width:'100%', 
+      height:'100%',
+      position: 'absolute'
     };
     return (
       <div className="all">
         <Spin spinning={this.state.loading} tip="视频初始化中...">
           <Header></Header>
           <div className="health">
-          {tabTitleList}
           <div className="healthVideo">
-            <div className="projection" style={sectionStyle}>
+            <div className="projection">
+            {tabTitleList}
+            <img style={sectionStyle} src={require("../../assets/img/placeholder_bg.png").default} alt="" />
+            <div style={{height: this.state.tabTitles.length > 0 ? 'calc(100% - 33px)' : '100%'}}>
+            
               <div className="videoDiv" style={{ display: (this.state.isSelect == 'RMScreen') ? '' : 'none', }}>
                 <div className="videoDiv">
                   <video
@@ -2875,6 +2883,7 @@ class Video extends Component {
               }
 
 
+            </div>
             </div>
             <div className="wrapper" style={{ width: '20%', }}>
               <div
@@ -2900,7 +2909,7 @@ class Video extends Component {
                       className="imgClassVoice voiceClass"
                     />
                   }
-                  <canvas style={{ display: (!this.state.voiceStatue) ? '' : 'none', }} className="canvasClass" id="publish_volumeView" width="40" height="70"></canvas>
+                  <canvas style={{ display: (!this.state.voiceStatue) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClass" id="publish_volumeView" width="40" height="70"></canvas>
                     <div className='titleName' style={{ color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>坐席</div>
                   </div>
                 </div>
@@ -2938,7 +2947,7 @@ class Video extends Component {
                       className="imgClassVoice voiceVideoClass"
                     />
                   }
-                  <canvas style={{ display: (this.state.videoOneName && !this.state.voiceVideoOne) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView1" width="40" height="70"></canvas>
+                  <canvas style={{ display: (this.state.videoOneName && !this.state.voiceVideoOne) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px'}} className="canvasClassOne" id="subscribe_volumeView1" width="40" height="70"></canvas>
 
                     <div className='titleName' style={{ color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
                       {this.state.videoOneName}
@@ -2966,7 +2975,7 @@ class Video extends Component {
                     className="imgClassVoice voiceVideoClass"
                   />
                 }
-                <canvas style={{ display: (this.state.videoTwoName && !this.state.voiceVideoTwo) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView2" width="40" height="70"></canvas>
+                <canvas style={{ display: (this.state.videoTwoName && !this.state.voiceVideoTwo) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView2" width="40" height="70"></canvas>
 
                   <div className='titleName' style={{ color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
                     {this.state.videoTwoName}
@@ -2992,7 +3001,7 @@ class Video extends Component {
                     className="imgClassVoice voiceVideoClass"
                   />
                 }
-                <canvas style={{ display: (this.state.videoThreeName && !this.state.voiceVideoThree) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView3" width="40" height="70"></canvas>
+                <canvas style={{ display: (this.state.videoThreeName && !this.state.voiceVideoThree) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView3" width="40" height="70"></canvas>
 
                   <div className='titleName' style={{ color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
                     {this.state.videoThreeName}
@@ -3017,7 +3026,7 @@ class Video extends Component {
                     className="imgClassVoice voiceVideoClass"
                   />
                 }
-                <canvas style={{ display: (this.state.videoFourName && !this.state.voiceVideoFour) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView4" width="40" height="70"></canvas>
+                <canvas style={{ display: (this.state.videoFourName && !this.state.voiceVideoFour) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView4" width="40" height="70"></canvas>
 
                   <div className='titleName' style={{ color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
                     {this.state.videoFourName}
@@ -3043,7 +3052,7 @@ class Video extends Component {
                     className="imgClassVoice voiceVideoClass"
                   />
                 }
-                <canvas style={{ display: (this.state.videoFiveName && !this.state.voiceVideoFive) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView5" width="40" height="70"></canvas>
+                <canvas style={{ display: (this.state.videoFiveName && !this.state.voiceVideoFive) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView5" width="40" height="70"></canvas>
 
                   <div className='titleName' style={{  color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
                     {this.state.videoFiveName}
@@ -3068,7 +3077,7 @@ class Video extends Component {
                     className="imgClassVoice voiceVideoClass"
                   />
                 }
-                <canvas style={{ display: (!this.state.voiceVideoSix) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView6" width="40" height="70"></canvas>
+                <canvas style={{ display: (!this.state.voiceVideoSix) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView6" width="40" height="70"></canvas>
 
                   <div className='titleName' style={{ color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
                     {this.state.videoSixName}
@@ -3105,7 +3114,7 @@ class Video extends Component {
                       className="imgClassVoice voiceVideoClass"
                     />
                   }
-                  <canvas style={{ display: (this.state.videoSevenName && !this.state.voiceVideoSeven) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView7" width="40" height="70"></canvas>
+                  <canvas style={{ display: (this.state.videoSevenName && !this.state.voiceVideoSeven) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView7" width="40" height="70"></canvas>
 
                     <div className='titleName' style={{ color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
                       {this.state.videoSevenName}
@@ -3133,7 +3142,7 @@ class Video extends Component {
                     className="imgClassVoice voiceVideoClass"
                   />
                 }
-                <canvas style={{ display: (this.state.videoEightName && !this.state.voiceVideoEight) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView8" width="40" height="70"></canvas>
+                <canvas style={{ display: (this.state.videoEightName && !this.state.voiceVideoEight) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView8" width="40" height="70"></canvas>
 
                   <div className='titleName' style={{ color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
                     {this.state.videoEightName}
@@ -3158,7 +3167,7 @@ class Video extends Component {
                     className="imgClassVoice voiceVideoClass"
                   />
                 }
-                <canvas style={{ display: (this.state.videoNineName && !this.state.voiceVideoSix) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView9" width="40" height="70"></canvas>
+                <canvas style={{ display: (this.state.videoNineName && !this.state.voiceVideoSix) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView9" width="40" height="70"></canvas>
 
                   <div className='titleName' style={{ color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
                     {this.state.videoNineName}
@@ -3185,7 +3194,7 @@ class Video extends Component {
                     className="imgClassVoice voiceVideoClass"
                   />
                 }
-                <canvas style={{ display: (this.state.videoTenName && !this.state.voiceVideoTen) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView10" width="40" height="70"></canvas>
+                <canvas style={{ display: (this.state.videoTenName && !this.state.voiceVideoTen) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView10" width="40" height="70"></canvas>
 
                   <div className='titleName' style={{  color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
                     {this.state.videoTenName}
@@ -3210,7 +3219,7 @@ class Video extends Component {
                     className="imgClassVoice voiceVideoClass"
                   />
                 }
-                <canvas style={{ display: (this.state.videoElevenName && !this.state.voiceVideoEleven) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView11" width="40" height="70"></canvas>
+                <canvas style={{ display: (this.state.videoElevenName && !this.state.voiceVideoEleven) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView11" width="40" height="70"></canvas>
 
                   <div className='titleName' style={{ color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
                     {this.state.videoElevenName}
@@ -3236,7 +3245,7 @@ class Video extends Component {
                     className="imgClassVoice voiceVideoClass"
                   />
                 }
-                <canvas style={{ display: (this.state.videoTwelveName && !this.state.voiceVideoTwelve) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView12" width="40" height="70"></canvas>
+                <canvas style={{ display: (this.state.videoTwelveName && !this.state.voiceVideoTwelve) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView12" width="40" height="70"></canvas>
 
                   <div className='titleName' style={{  color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
                     {this.state.videoTwelveName}
@@ -3355,7 +3364,7 @@ Video.defaultProps = {
   voiceColor: '#0AE544',
   titleBackground: 'rgba(0,0,0,0.65)',
   titleColor: '#fff',
-  microphoneSize: '40',
+  microphoneSize: 25,
   fontSize: '14',
   fontFamily: 'auto',
   menus: ['SHARE', 'FRIES', 'OCR', 'INVITE', 'PIP'],

package/packages/pages/video/video.less

@@ -13,8 +13,9 @@
   float: right
 }
 .imgClassVoice{
-  width: 2.1rem;
-  height: 2.1rem
+  width: 1.563rem;
+  height: 1.563rem;
+  margin-top: 0.25rem;
 }
 .sharedScreen{
   font-size: 10px;
@@ -43,6 +44,7 @@
   position: relative;
   background: #333;
   margin-bottom: 20px;
+  border-radius: 6px;
 }
 .videoFit{
   object-fit: contain !important;
@@ -54,12 +56,14 @@
 .video1{
   width: 100%;
   height: 100%;
-  object-fit: contain
+  object-fit: contain;
+  border-radius: 6px;
 }
 .video{
   width: 100%;
   height: 100%;
   object-fit: contain;
+  border-radius: 6px;
 }
 .video1Div{
   width: 100%;
@@ -86,10 +90,12 @@
   height: 100%;
   width: 100%;
   object-fit: cover;
+  border-radius: 6px;
 }
 .publishVideoDiv{
   height: 100%;
   width: 100%;
+  border-radius: 6px;
 }
 .invitationSpan{
   padding: 10px 20px;
@@ -125,16 +131,6 @@
 .faceBody{
   text-align: center;
 }
-.canvasClass{
-  // position: absolute;
-  // bottom: 0;
-  //   right: 0;
-}
-.canvasClassOne{
-  // position: absolute;
-  // bottom: 0;
-  //   right: 0;
-}
 .content{
   height: 654px;
   border-radius: 4px;
@@ -148,8 +144,9 @@
 .projection{
   width: 80%;
   position: relative;
-  background: rgba(0,0,0,0.65);
+  background: #f3f3f3;
   color: #333;
+  border-radius: 0 4px 4px 4px;
   // height:  ~"calc(100vh - 130px)";
   // position: absolute;
   // z-index: 1;
@@ -176,7 +173,7 @@
   bottom: 10px;
   height: 40px;
   // background: rgba(219, 0, 17, 0.1);
-  border-radius: 4;
+  border-radius: 4px;
   // transform: rotateY(180deg);
   // color: #DB0011;
   // font-size: 14px;
@@ -193,7 +190,7 @@
   bottom: 10px;
   height: 40px;
   // background: rgba(219, 0, 17, 0.1);
-  border-radius: 4;
+  border-radius: 4px;
   // transform: rotateY(180deg);
   // color: #DB0011;
   font-size: 14px;
@@ -274,11 +271,6 @@
   // left: 0;
   transform: rotateY(180deg);
 }
-.voiceVideoClass{
-  // position: absolute;
-  // bottom: 0;
-  // right: 0;
-}
 .cameraAnMicrophone{
   margin: 10px 20px;
 }