react_hsbc_teller 0.5.6 → 0.6.0

package/package.json

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

package/packages/pages/foot/foot.less

@@ -1,8 +1,9 @@
 .foot{
     background: #fff;
-height: 58px;
+height: 48px;
 display: inline-flex;
 width: 100%;
+margin: 10px 0;
 // position: absolute;
 //     bottom: 0;
 //     left: 0;

package/packages/pages/video/video.jsx

@@ -23,9 +23,10 @@ import { Button } from '../../../node_modules/antd/lib/index';
 import CanvasDraw from "react-canvas-draw";
 import { FormattedMessage, injectIntl } from 'react-intl';
 import html2canvas from 'html2canvas';
+import axios from 'axios';
 const LEAVE_TYPE = {
-  TELLER_EXIT: '1', // 坐席退出
-  ROOM_DESTROYED: '-1', // 房间异常
+  TELLER_EXIT: 1, // 坐席退出
+  ROOM_DESTROYED: -1, // 房间异常
 }
 let pictureInPictureVideo = ''
 @injectIntl
@@ -144,6 +145,7 @@ class Video extends Component {
       this.props.createRoomCallback({
         type: 1,
         errorManage: '',
+        errorCode: 0,
         data: {
           mtoken: this.state.rtoken,
           imRoomId: result.imRoomId,
@@ -156,6 +158,7 @@ class Video extends Component {
       this.props.createRoomCallback({
         type: 2,
         errorManage: '保存房间信息失败',
+        errorCode:-9,
         data: {}
       })
     }
@@ -181,7 +184,7 @@ class Video extends Component {
       }
     } catch (err) {
       console.error(err);
-      this.roomCallBack(2, '签名失败')
+      this.roomCallBack(2, '签名失败',-8)
     }
   };
   handleEdit = () => {
@@ -751,17 +754,19 @@ class Video extends Component {
       });
     }
   };
-  roomCallBack = (type, manege) => {
+  roomCallBack = (type, manege,code) => {
     if (this.state.sessionId) {
       this.props.joinRoomCallback({
         type: type,
         errorManage: manege,
+        errorCode: code,
         data: {}
       })
     } else {
       this.props.createRoomCallback({
         type: type,
         errorManage: manege,
+        errorCode: code,
         data: {}
       })
     }
@@ -805,11 +810,13 @@ class Video extends Component {
             this.test_controller.StopRemoteRecord(this.state.recordId)
           }
         }
-      } else if (Mival.typeId == 1010) {
-        if (Mival.sessionId == this.state.sessionId) {
-          this.endSession('customerHangUp')
-        }
-      } else if (Mival.typeId == 1215) {
+      }
+      //  else if (Mival.typeId == 1010) {
+      //   if (Mival.sessionId == this.state.sessionId) {
+      //     this.endSession('customerHangUp')
+      //   }
+      // } 
+      else if (Mival.typeId == 1215) {
         // 一炒多的图片
         if (Mival.sessionId == this.state.sessionId) {
           this.props.imgCallback(Mival.data.type, Mival.data.file) // 文字抄录和风险抄录，3--风险，，2--文字
@@ -1017,7 +1024,7 @@ class Video extends Component {
     window.IMOpenfire = msg =>{
       console.log('im登录', msg)
       if(!msg) {
-        this.roomCallBack(2, 'im建立连接失败')
+        this.roomCallBack(2, 'im建立连接失败',-7)
       } else {
         this.setState({
           imStatus: msg
@@ -1111,7 +1118,7 @@ class Video extends Component {
     this.test_controller.OnGetDevicesFailed = (code, msg) => {
       console.log('获取设备失败', code, msg)
       this.messageClick('获取设备失败，请检查摄像头设备是否可用或是否禁用摄像头','error')
-      this.roomCallBack(2, '获取失败')
+      this.roomCallBack(2, '获取设备失败',-1)
     };
     // 建立连接成功
     this.test_controller.OnConnectOK = () => {
@@ -1120,7 +1127,7 @@ class Video extends Component {
     };
     this.test_controller.OnConnectFailed = (code, msg) => {
       console.log('建立连接失败', code, msg)
-      this.roomCallBack(2, '连接失败')
+      this.roomCallBack(2, '连接失败',-2)
     };
     // 断开连接回调
     this.test_controller.OnConnectClose = (code, msg) => {
@@ -1134,7 +1141,7 @@ class Video extends Component {
     // 初始化房间失败
     this.test_controller.OnInitRoomConfigFail = (err_code, err_msg) => {
       console.log('初始化房间失败', err_code, err_msg)
-      this.roomCallBack(2, '初始化失败')
+      this.roomCallBack(2, '初始化失败',-3)
     };
     // 初始化成功回调
     this.test_controller.OnInitRoomConfigOK = () => {
@@ -1160,7 +1167,7 @@ class Video extends Component {
     // 创建房间失败
     this.test_controller.OnCreateRoomFailed = (err_code, err_msg) => {
       console.log('创建房间失败', err_code, err_msg)
-      this.roomCallBack(2, '创建失败')
+      this.roomCallBack(2, '创建房间失败',-4)
     };
     // 初始化⾳视频成功
     this.test_controller.OnMediaCallSucc = (sid) => {
@@ -1177,12 +1184,12 @@ class Video extends Component {
     // 加入房间成功
     this.test_controller.OnJoinRoomSucc = () => {
       console.log('加入房间成功')
-      this.roomCallBack(1, '')
+      this.roomCallBack(1, '',0)
     };
     // 加入房间失败
     this.test_controller.OnJoinRoomFailed = (err_code, err_msg) => {
       console.log('加入房间失败', err_code, err_msg)
-      this.roomCallBack(2, '加入失败')
+      this.roomCallBack(2, '加入失败',-5)
     };
     // 发布媒体流成功
     this.test_controller.OnPublishSucc = (sid) => {
@@ -1202,6 +1209,7 @@ class Video extends Component {
     // 发布媒体流失败
     this.test_controller.OnPublishFailed = (sid, err_code, err_msg) => {
       console.log('发布媒体流失败', sid, err_code, err_msg)
+      this.roomCallBack(2, '发布失败',-6)
     };
     // 订阅媒体流成功
     this.test_controller.OnSubscribeSucc = (feed, sid) => {
@@ -1401,7 +1409,7 @@ class Video extends Component {
           customId: this.state.imRoomId,
           content: JSON.stringify({
             'typeId': 1013,
-            'muteStatus': 0,
+            'muteStatus': 1,
             'data': {
               'sessionId': this.state.sessionId,
               'userId': this.props.tellerAccount
@@ -2090,6 +2098,15 @@ class Video extends Component {
     this.setState({
       loading: true,
     })
+    axios.get(this.props.resourcePath + "/beauty/beauty.js")
+    .then(response => this.addToScriptClick()).catch(function (error) {
+      console.log(error);
+      this.roomCallBack(2, '创建房间失败',-4)
+      
+  })
+    
+  }
+  addToScriptClick=()=>{
     const _dependScripts = [
       // https://counter-web.leimondata.cn:7199
       this.props.resourcePath + "/beauty/beauty.js",
@@ -2828,7 +2845,11 @@ class Video extends Component {
         {
           this.state.cameraList.map((item, index) => {
             return <div>
-              <input type="radio" name="camere" value={item.actionid} checked={this.state.cameraValue == item.actionid} onChange={(e) => this.getCameraValue(e)} /><label for={item.actionid}>{item.actionname}</label> <br />
+              <label className="radio">
+              <input type="radio" name="camere" value={item.actionid} style={{float: 'left'}} checked={this.state.cameraValue == item.actionid} onChange={(e) => this.getCameraValue(e)}  /><i></i>
+              {item.actionname}
+            </label>
+              {/* <input type="radio" name="camere" value={item.actionid} checked={this.state.cameraValue == item.actionid} onChange={(e) => this.getCameraValue(e)} /><label for={item.actionid}>{item.actionname}</label> <br /> */}
             </div>
           })
         }
@@ -2840,7 +2861,11 @@ class Video extends Component {
         {
           this.state.microphoneList.map((item, index) => {
             return <div class="cameraAnMicrophone">
-              <input type="radio" name="microphone" value={item.actionid} checked={this.state.microphoneValue == item.actionid} onChange={(e) => this.getMicrophoneValue(e)} /><label for={item.actionid}>{item.actionname}</label> <br />
+              <label className="radio">
+              <input type="radio" name="microphone" value={item.actionid} style={{float: 'left'}} checked={this.state.microphoneValue == item.actionid} onChange={(e) => this.getMicrophoneValue(e)}  /><i></i>
+              {item.actionname}
+            </label>
+              {/* <input type="radio" name="microphone" value={item.actionid} checked={this.state.microphoneValue == item.actionid} onChange={(e) => this.getMicrophoneValue(e)} /><label for={item.actionid}>{item.actionname}</label> <br /> */}
             </div>
           })
         }
@@ -2851,14 +2876,22 @@ class Video extends Component {
       width:'100%', 
       height:'100%',
       position: 'absolute',
-      left: 0
+      left: 0,
+      top: 0,
+      right: 0,
+      bottom: 0,
+      margin: 'auto'
 
     } :{
       'z-index': '0',
       width:'100%', 
-      height:'100%',
+      // height:'100%',
       position: 'absolute',
-      left: 0
+      left: 0,
+      top: 0,
+      right: 0,
+      bottom: 0,
+      margin: 'auto'
     };
     return (
       <div className="all">
@@ -2912,11 +2945,11 @@ class Video extends Component {
                         <label className='labelClass'>{meetingInfo.title}</label>
                       </li>
                       <li>
-                        <span>主持人：</span>
+                        <span>客户：</span>
                         <label className='labelClass'>{meetingInfo.host}</label>
                       </li>
                       <li>
-                        <span>参会客户：</span>
+                        <span>参会人：</span>
                         {customerNameList}
                       </li>
                     </ul>

package/packages/pages/video/video.less

@@ -216,8 +216,13 @@
 }
 .themeClass{
   position: absolute;
-  top: 50%;
-  left: 40%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  width: 500px;
+  height: 150px;
   font-size: 22px;
     color: #222222;
     font-weight: 600;
@@ -225,6 +230,7 @@
     li{ 
       list-style: none;
       margin: 21px 0;
+      text-align: left;
       span{
         font-size: 20px;
         width: 143px;
@@ -363,27 +369,51 @@
 
 }
 
-input[type="radio"]+label::before {
-  content: " ";
+.radio {
+  position: relative;
   display: inline-block;
-  vertical-align: middle;
-  width: 13px;
-  height: 13px;
+  font-weight: 400;
+  padding-left: 25px;
+  text-align: left;
+  width: 100%;
+  display: flex;
+}
+
+.radio input {
+  position: absolute;
+  left: -9999px;
+}
+
+.radio i {
+  display: block;
+  position: absolute;
+  top: 3px;
+  left: 2px;
+  width: 15px;
+  height: 15px;
+  outline: 0;
+  border: 1px solid rgb(133, 133, 133);
+  background: transparent;
   border-radius: 50%;
-  border: 1px solid #999999;
-  margin-right: 0.2rem;
-  box-sizing: border-box;
-  margin-top: -0.1rem;
+  transition: border-color .3s;
+  -webkit-transition: border-color .3s;
 }
 
-input[type="radio"]:checked+label::before {
+.radio input+i:after {
+  position: absolute;
+  content: '';
+  top: 1.5px;
+  left: 1.5px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
   background-color: #269792;
-  background-clip: content-box;
   border: 1px solid #269792;
-  padding: 0.1rem;
-  box-sizing: border-box;
+  opacity: 0;
+  transition: opacity .1s;
+  -webkit-transition: opacity .1s;
 }
-input[type="radio"] {
-  position: absolute;
-  clip: rect(0, 0, 0, 0);
+
+.radio input:checked+i:after {
+  opacity: 1;
 }

package/src/index.js

@@ -2,8 +2,8 @@ import React from "react";
 import ReactDOM from "react-dom";
 import "./index.less";
 import '@babel/polyfill';
-// import { HSBC } from "../lib/hsbc";
-import {HSBC} from "../packages";
+import { HSBC } from "../lib/hsbc";
+// import {HSBC} from "../packages";
 
 ReactDOM.render(
   <div className="hsbc"><HSBC></HSBC></div>,