react_hsbc_teller 2.0.7 → 2.0.8-5.1

package/packages/pages/foot/foot.jsx

@@ -1,247 +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()
-    }
-    paperOcrClick=()=>{
-        this.props.paperOcrClick()
-    }
-    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={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 == 'PAPER_OCR' && 
-                                  <div className="one"  onClick={this.paperOcrClick.bind(this)}>
-                                      <img className="imgClass" src={require("../../assets/img/icon_paper.png").default} alt="" />
-                                      <div className="text">
-                                        纸质识别
-                                      </div>
-                                  </div>
-                              }
-                              {
-                                  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 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>
-        )
-    }
+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>
+        )
+    }
 }