react_hsbc_teller 2.0.4 → 2.0.6-5.1

package/packages/pages/foot/foot.jsx

@@ -1,213 +1,236 @@
-import React, { Component } from 'react';
-import './foot.less'
-import Popover from "antd/lib/popover";
-import 'antd/lib/popover/style'
-export default class foot extends Component {
-    voice = () => {
-        this.props.voice()
-    }
-    cameraClick = () => {
-        this.props.cameraClick()
-    }
-    transcribingClick = () => {
-        this.props.transcribingClick()
-    }
-    sharedScreen=()=>{
-        this.props.sharedScreen()
-    }
-    suspend=()=>{
-        this.props.suspend()
-    }
-    endSession=()=>{
-        this.props.endSession()
-    }
-    facialRecognition=()=>{
-        this.props.facialRecognition()
-    }
-    ocrClick=()=>{
-        this.props.ocrClick()
-    }
-    pictureInPicture=()=>{
-        this.props.pictureInPicture()
-    }
-    invitationClick=()=>{
-        this.props.invitationClick()
-    }
-    customerFaceClick=(item)=>{
-        this.props.customerFaceClick(item)
-    }
-    facialHandleVisibleChange = visible => {
-        console.log(visible)
-        this.props.facialHandleVisibleChange(visible)
-      };
-      ocrHandleVisibleChange = visible => {
-        console.log(visible)
-        this.props.ocrHandleVisibleChange(visible)
-      };
-      inspection = ()=>{
-          this.props.inspection()
-      }
-      switchExternal=()=>{
-        this.props.switchExternal()
-    }
-    beautyClick=()=>{
-        this.props.beautyClick()
-    }
-    graffiti=()=>{
-        this.props.graffiti()
-    }
-    virtualization=()=>{
-        this.props.virtualization()
-    }
-    render() {
-        const {clickedOcr,clickedFacial,img,isWhiteboard,cameraImg,isTranscribing ,screenName,suspendName,customerList,menus,voiceName,beautyName} = this.props
-        const content = (
-            <div>
-              {customerList.map((item,index)=>{
-                  return  <div key={index}className="customer" onClick={this.customerFaceClick.bind(this,item)}>
-                      <img className="imgClassFoot" alt="" src={require("../../assets/img/youke.png").default} />
-                      <span className="listLi" key={item.customerId}>{item.name}</span>
-                      </div>
-              }
-              )
-                }
-            </div>
-          );
-          const defaultList = (
-              <div className="total totalTwo">
-                  {/* {
-                      isWhiteboard&&<div className='footHover' onClick={this.switchExternal.bind(this)}>
-                      <div className="one">
-                          <img className="imgClass" src={require("../../assets/img/switchExternal.png").default} alt="" />
-                          <div className="text">
-                              白板
-                          </div>
-                      </div>
-                      </div>
-                  } */}        
-                  {
-                      menus.map((item,index)=>{
-                          return <div key={index}className='footHover'>
-                          {
-                      item == 'GRAFFITI'&&<div className='footHover' onClick={this.graffiti.bind(this)}>
-                      <div className="one">
-                          <img className="imgClass" src={require("../../assets/img/tuya.png").default} alt="" />
-                          <div className="text">
-                          互动涂鸦
-                          </div>
-                      </div>
-                      </div>
-                  }
-                  {
-                      item == 'BACKGROUND'&&<div className='footHover' onClick={this.virtualization.bind(this)}>
-                      <div className="one">
-                          <img className="imgClass" src={require("../../assets/img/beijing.png").default} alt="" />
-                          <div className="text">
-                          背景虚化
-                          </div>
-                      </div>
-                      </div>
-                  }
-                              {
-                      item == 'BOARD'&&<div className='footHover' onClick={this.switchExternal.bind(this)}>
-                      <div className="one">
-                          <img className="imgClass" src={require("../../assets/img/switchExternal.png").default} alt="" />
-                          <div className="text">
-                          远程签署
-                          </div>
-                      </div>
-                      </div>
-                  }
-                              {
-                                 item == 'SHARE' && <div className="one" onClick={this.sharedScreen.bind(this)}>
-                                  <img className="imgClass" src={require("../../assets/img/Projection_screen.png").default} alt="" />
-                                  <div className="text">
-                                      {screenName}
-                                  </div>
-                              </div>
-                              }
-                              {
-                                  item == 'FRIES' && <Popover content={content} trigger="click" visible={clickedFacial} onVisibleChange={this.facialHandleVisibleChange}>
-                                  <div className="one" onClick={this.facialRecognition.bind(this)}>
-                                      <img className="imgClass" src={require("../../assets/img/Face_recognition.png").default} alt="" />
-                                      <div className="text">
-                                          人脸识别
-                                      </div>
-                                  </div>
-                                  </Popover>
-                              }
-                              {
-                                  item == 'OCR' && 
-                                //   <Popover content={content} trigger="click" visible={clickedOcr} onVisibleChange={this.ocrHandleVisibleChange}>
-                                  <div className="one"  onClick={this.ocrClick.bind(this)}>
-                                      <img className="imgClass" src={require("../../assets/img/icon_ocr.png").default} alt="" />
-                                      <div className="text">
-                                        证件识别
-                                      </div>
-                                  </div>
-                                //   </Popover>
-                              }
-                              {
-                                  item == 'INVITE' && <div className="one" onClick={this.invitationClick.bind(this)}>
-                                  <img className="imgClass" src={require("../../assets/img/icon_invitation.png").default} alt="" />
-                                  <div className="text">
-                                  邀请参会者
-                                  </div>
-                              </div>
-                              }
-                              
-                              
-                              {
-                              item == 'PIP' && <div className="one" onClick={this.pictureInPicture.bind(this)}>
-                                  <img className="imgClass" src={require("../../assets/img/huazhonghua.png").default} alt="" />
-                                  <div className="text">
-                                  开启视频画中画
-                                  </div>
-                              </div>
-                      }
-                      {
-                          item == 'BEAUTY' && <div className="one" onClick={this.beautyClick.bind(this)}>
-                          <img className="imgClass" src={require("../../assets/img/meiyan.png").default} alt="" />
-                          <div className="text">
-                          {beautyName}
-                          </div>
-                      </div>
-                      }
-                          </div>
-                            
-                      })
-                  }
-              </div>
-          );
-        return (
-            <div className="foot">
-                <div className="total">
-                    <div className='footHover' onClick={this.voice.bind(this)}>
-                        <div className="one">
-                        <img className="imgClass" src={img} alt="" />
-                        <div className="text">
-                            {voiceName}
-                        </div>
-                        </div>
-                        
-                    </div>
-                    <div className='footHover' onClick={this.inspection.bind(this)}>
-                    <div className="one">
-                        <img className="imgClass" src={require("../../assets/img/inspection.png").default} alt="" />
-                        <div className="text">
-                        设置视频设备
-                        </div>
-                    </div>
-                    </div>
-                </div>
-                {defaultList}
-                
-                <div className="total totalThree">
-                    <button className="buttonClass" onClick={this.endSession.bind(this)}>
-                        <span className="spanClass">结束会议</span>
-                    </button>
-                </div>
-            </div>
-        )
-    }
+import React, { Component } from 'react';
+import './foot.less'
+import { debounce } from '../../utils/utils';
+import Popover from "antd/lib/popover";
+import 'antd/lib/popover/style'
+export default class foot extends Component {
+    voice = () => {
+        this.props.voice()
+    }
+    cameraClick = () => {
+        this.props.cameraClick()
+    }
+    transcribingClick = () => {
+        this.props.transcribingClick()
+    }
+    sharedScreen=()=>{
+        this.props.sharedScreen()
+    }
+    suspend=()=>{
+        this.props.suspend()
+    }
+    endSession=()=>{
+        this.props.endSession()
+    }
+    facialRecognition=()=>{
+        this.props.facialRecognition()
+    }
+    ocrClick=()=>{
+        this.props.ocrClick()
+    }
+    pictureInPicture=()=>{
+        this.props.pictureInPicture()
+    }
+    invitationClick=()=>{
+        this.props.invitationClick()
+    }
+    customerFaceClick=(item)=>{
+        this.props.customerFaceClick(item)
+    }
+    facialHandleVisibleChange = visible => {
+        console.log(visible)
+        this.props.facialHandleVisibleChange(visible)
+      };
+      ocrHandleVisibleChange = visible => {
+        console.log(visible)
+        this.props.ocrHandleVisibleChange(visible)
+      };
+      inspection = ()=>{
+          this.props.inspection()
+      }
+      envDetection = () => {
+        this.props.envDetection()
+      }
+      toggleAsr = ()=>{
+        this.props.toggleAsr()
+    }
+      switchExternal=()=>{
+        this.props.switchExternal()
+    }
+    beautyClick=()=>{
+        this.props.beautyClick()
+    }
+    graffiti=()=>{
+        this.props.graffiti()
+    }
+    virtualization=()=>{
+        this.props.virtualization()
+    }
+    render() {
+        const {clickedOcr,clickedFacial,img,isWhiteboard,cameraImg,isTranscribing ,screenName,suspendName,customerList,menus,voiceName,beautyName} = this.props
+        const content = (
+            <div>
+              {customerList.map((item,index)=>{
+                  return  <div key={index}className="customer" onClick={this.customerFaceClick.bind(this,item)}>
+                      <img className="imgClassFoot" alt="" src={require("../../assets/img/youke.png").default} />
+                      <span className="listLi" key={item.customerId}>{item.name}</span>
+                      </div>
+              }
+              )
+                }
+            </div>
+          );
+          const defaultList = (
+              <div className="total totalTwo">
+                  {/* {
+                      isWhiteboard&&<div className='footHover' onClick={this.switchExternal.bind(this)}>
+                      <div className="one">
+                          <img className="imgClass" src={require("../../assets/img/switchExternal.png").default} alt="" />
+                          <div className="text">
+                              白板
+                          </div>
+                      </div>
+                      </div>
+                  } */}        
+                  {
+                      menus.map((item,index)=>{
+                          return <div key={index}className='footHover'>
+                          {
+                      item == 'GRAFFITI'&&<div className='footHover' onClick={this.graffiti.bind(this)}>
+                      <div className="one">
+                          <img className="imgClass" src={require("../../assets/img/tuya.png").default} alt="" />
+                          <div className="text">
+                          互动涂鸦
+                          </div>
+                      </div>
+                      </div>
+                  }
+                  {
+                      item == 'BACKGROUND'&&<div className='footHover' onClick={this.virtualization.bind(this)}>
+                      <div className="one">
+                          <img className="imgClass" src={require("../../assets/img/beijing.png").default} alt="" />
+                          <div className="text">
+                          背景虚化
+                          </div>
+                      </div>
+                      </div>
+                  }
+                              {
+                      item == 'BOARD'&&<div className='footHover' onClick={debounce(this.switchExternal.bind(this), 300)}>
+                      <div className="one">
+                          <img className="imgClass" src={require("../../assets/img/switchExternal.png").default} alt="" />
+                          <div className="text">
+                            {this.props.recordMode == 1?'远程':''}签署 
+                          </div>
+                      </div>
+                      </div>
+                  }
+                              {
+                                 item == 'SHARE' && <div className="one" onClick={debounce(this.sharedScreen.bind(this), 300)}>
+                                  <img className="imgClass" src={require("../../assets/img/Projection_screen.png").default} alt="" />
+                                  <div className="text">
+                                      {screenName}
+                                  </div>
+                              </div>
+                              }
+                              {
+                                  item == 'FRIES' && <Popover content={content} trigger="click" visible={clickedFacial} onVisibleChange={this.facialHandleVisibleChange}>
+                                  <div className="one" onClick={this.facialRecognition.bind(this)}>
+                                      <img className="imgClass" src={require("../../assets/img/Face_recognition.png").default} alt="" />
+                                      <div className="text">
+                                          人脸识别
+                                      </div>
+                                  </div>
+                                  </Popover>
+                              }
+                              {
+                                  item == 'OCR' && 
+                                //   <Popover content={content} trigger="click" visible={clickedOcr} onVisibleChange={this.ocrHandleVisibleChange}>
+                                  <div className="one"  onClick={this.ocrClick.bind(this)}>
+                                      <img className="imgClass" src={require("../../assets/img/icon_ocr.png").default} alt="" />
+                                      <div className="text">
+                                        证件识别
+                                      </div>
+                                  </div>
+                                //   </Popover>
+                              }
+                              {
+                                  item == 'INVITE' && <div className="one" onClick={this.invitationClick.bind(this)}>
+                                  <img className="imgClass" src={require("../../assets/img/icon_invitation.png").default} alt="" />
+                                  <div className="text">
+                                  邀请参会者
+                                  </div>
+                              </div>
+                              }
+                              
+                              
+                              {
+                              item == 'PIP' && <div className="one" onClick={this.pictureInPicture.bind(this)}>
+                                  <img className="imgClass" src={require("../../assets/img/huazhonghua.png").default} alt="" />
+                                  <div className="text">
+                                  开启视频浮窗
+                                  </div>
+                              </div>
+                      }
+                      {
+                          item == 'BEAUTY' && <div className="one" onClick={this.beautyClick.bind(this)}>
+                          <img className="imgClass" src={require("../../assets/img/meiyan.png").default} alt="" />
+                          <div className="text">
+                          {beautyName}
+                          </div>
+                      </div>
+                      }
+                          </div>
+                            
+                      })
+                  }
+              </div>
+          );
+        return (
+            <div className="foot">
+                <div className="total">
+                    <div className='footHover' style={{ display: (this.props.recordMode == 2) ? 'none' : ''}} onClick={this.voice.bind(this)}>
+                        <div className="one">
+                        <img className="imgClass" src={img} alt="" />
+                        <div className="text">
+                            {voiceName}
+                        </div>
+                        </div>
+                        
+                    </div>
+                    <div className='footHover' style={{ display: (this.props.recordMode == 2) ? 'none' : ''}} onClick={this.inspection.bind(this)}>
+                    <div className="one">
+                        <img className="imgClass" src={require("../../assets/img/inspection.png").default} alt="" />
+                        <div className="text">
+                        设置视频设备
+                        </div>
+                    </div>
+                    </div>
+                    <div className='footHover' onClick={this.envDetection.bind(this)}>
+                    <div className="one">
+                        <img className="imgClass" src={require("../../assets/img/icon_env.png").default} alt="" />
+                        <div className="text">
+                            环境检测
+                        </div>
+                    </div>
+                    </div>
+                    {/* <div className='footHover' onClick={this.toggleAsr.bind(this)}>
+                    <div className="one">
+                        <img className="imgClass" src={require("../../assets/img/icon_asr.png").default} alt="" />
+                        <div className="text">
+                            ASR检测
+                        </div>
+                    </div>
+                    </div> */}
+                </div>
+                {defaultList}
+                
+                <div className="total totalThree">
+                    <button className="buttonClass" onClick={this.endSession.bind(this)}>
+                        <span className="spanClass">结束会议</span>
+                    </button>
+                </div>
+            </div>
+        )
+    }
 }

package/packages/pages/foot/foot.less

@@ -1,85 +1,86 @@
-.foot{
-    background: #fff;
-height: 4rem;
-display: inline-flex;
-width: 100%;
-// margin: 10px 0;
-// position: absolute;
-//     bottom: 0;
-//     left: 0;
-}
-.total{
-    display: inline-flex;
-    width: 25%;
-    height: 100%;
-  align-items: center;
-//   margin: 10px 0;
-.one{
-    // padding-top: 5px;
-    padding: 5px 0;
-        display: flex;
-  line-height: 32px;
-  flex-direction: column;
-  align-items: center;
-  flex-wrap: nowrap;
-  }
-  .footHover{
-      margin: 0 5px;
-  }
-  .footHover :hover{
-      background: #F3F3F3;
-      border-radius: 8px;
-  }
-  .text{
-    margin-top: 8px;
-    padding-bottom: 10px;
-    text-align: center;
-    max-width: 110px;
-    min-width: 80px;
-height: 11px;
-font-size: 14px;
-font-family: PingFangSC-Regular, PingFang SC;
-font-weight: 400;
-color: #333333;
-line-height: 11px;
-  }
-}
-.totalTwo{
-    justify-content: center;
-    width: 50%;
-}
-.totalThree{
-    // margin-top: 10px;
-    width: 25%;
-    padding-right: 20px;
-    justify-content: flex-end;
-}
-.buttonClass{
-    font-size: 16px;
-    color: #ffffff;
-    width: 90px;
-    height: 32px;
-    background: #B70000;
-    border-radius: 6px;
-    border: 1px #B70000 solid;
-}
-.spanClass{
-    font-size: 16px;
-color: #FFFFFF;
-}
-.imgClassFoot{
-    width: 25px;
-    height: 25px;
-    margin-bottom: 3px;
-}
-.imgClass{
-    width: 25px;
-    height: 25px;
-}
-.listLi{
-    margin-top: 4px;
-}
-.customer:hover{
-    background: #F3F3F3;
-    border-radius: 8px;
+.foot{
+    background: #fff;
+height: 4rem;
+display: inline-flex;
+width: 100%;
+// margin: 10px 0;
+// position: absolute;
+//     bottom: 0;
+//     left: 0;
+}
+.total{
+    display: inline-flex;
+    width: 25%;
+    height: 100%;
+  align-items: center;
+//   margin: 10px 0;
+.one{
+    // padding-top: 5px;
+    padding: 5px 0;
+        display: flex;
+  line-height: 32px;
+  flex-direction: column;
+  align-items: center;
+  flex-wrap: nowrap;
+  }
+  .footHover{
+      margin: 0 5px;
+      cursor: pointer;
+  }
+  .footHover :hover{
+      background: #F3F3F3;
+      border-radius: 8px;
+  }
+  .text{
+    margin-top: 8px;
+    padding-bottom: 10px;
+    text-align: center;
+    max-width: 110px;
+    min-width: 80px;
+height: 11px;
+font-size: 14px;
+font-family: PingFangSC-Regular, PingFang SC;
+font-weight: 400;
+color: #333333;
+line-height: 11px;
+  }
+}
+.totalTwo{
+    justify-content: center;
+    width: 50%;
+}
+.totalThree{
+    // margin-top: 10px;
+    width: 25%;
+    padding-right: 20px;
+    justify-content: flex-end;
+}
+.buttonClass{
+    font-size: 16px;
+    color: #ffffff;
+    width: 90px;
+    height: 32px;
+    background: #B70000;
+    border-radius: 6px;
+    border: 1px #B70000 solid;
+}
+.spanClass{
+    font-size: 16px;
+color: #FFFFFF;
+}
+.imgClassFoot{
+    width: 25px;
+    height: 25px;
+    margin-bottom: 3px;
+}
+.imgClass{
+    width: 25px;
+    height: 25px;
+}
+.listLi{
+    margin-top: 4px;
+}
+.customer:hover{
+    background: #F3F3F3;
+    border-radius: 8px;
 }