react_hsbc_teller 1.4.4 → 1.4.7

package/package.json

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

package/packages/api/api.js

@@ -1,6 +1,26 @@
 import Server from './server';
 
 class API extends Server{
+  
+  async rateAll(params = {}){
+    //  return this.axios('get', '/lang/select/2', params); 
+    try{
+      let result = await this.axios('get', '/hsbc/rate/all', params); 
+      if(result && (result.data instanceof Object) && result.code === 200){
+        return result||[];
+      }else{
+        let err = {
+          tip: '服务异常',
+          response: result,
+          data: params,
+          // url: 'https://api.cangdu.org/shopro/data/products',
+        }
+        throw err;
+      }
+    }catch(err){
+      throw err;
+    }
+  }
   async getBase64Image(params = {}){
     //  return this.axios('get', '/lang/select/2', params); 
     try{

package/packages/demo/demo.js

@@ -4,17 +4,22 @@ import Pdf from './pdf.js'
 
 class Demo extends Component {
   state = {
-    // imRoomId: "9K9ea1vOM@conference.ls-im-xmpp.chinawp.dev.ali.cloud.cn.hsbc",
-    // sessionId: "9K9ea1vOM",
-    // mtoken: "d4e648858b03",
-    // roomId: "645110140224386",
-    roomId: '',
-    mtoken: '',
-    imRoomId: '',
-    sessionId: '',
+    shareMask: false,
+    mtoken: "84d0410ab406",
+
+    roomId: "651114052525526",
+    
+    imRoomId: "VPP0Ejwae@conference.openfire2.leimondata.cn",
+    
+    sessionId: "VPP0Ejwae",
+    // roomId: '',
+    // mtoken: '',
+    // imRoomId: '',
+    // sessionId: '',
     isVideo: false,
     tellerAccount: '00000000',
     callbackUrl: 'http://182.92.184.31:8720/hsbc/callback',
+    // callbackUrl: 'https://aag.wealth-platform.uat.ali.cloud.cn.hsbc/nosaml/api/appointment/wealth/api/v1/appointment/ali/createMeetingRoom',
     businessNumber: '',
     lang: 'zh',
     roomServerUrl: 'wss://mrtc.mpaas.cn-hangzhou.aliyuncs.com/ws',
@@ -29,7 +34,7 @@ class Demo extends Component {
   microphoneSize: 50,
   fontSize: 14,
   fontFamily: 'auto',
-  isTranscribing: false
+  isTranscribing: true
 }
 componentWillMount() {
     // if(window.localStorage.getItem('roomId')) {
@@ -111,7 +116,25 @@ handleResourcePath = (event) => {
     })
 }
 imgCallback=(file)=>{
-    console.log(file)
+    console.log('errorType',file)
+}
+shareMaskClick=()=>{
+    console.log(this.state.shareMask)
+
+    if(this.state.shareMask) {
+        this.setState({
+            shareMask: false
+        }, ()=>{
+            console.log(this.state.shareMask)
+        })
+    } else {
+        this.setState({
+            shareMask: true
+        }, ()=>{
+            console.log(this.state.shareMask)
+        })
+    }
+    
 }
 createRoomCallback=(data)=>{
     console.log('createRoomCallback', data)
@@ -143,7 +166,9 @@ joinRoomCallback=(data)=>{
       <div className="test">
                 {
                     this.state.isVideo ?
+                    <div>
                         <HSBC
+                        shareMask={this.state.shareMask}
                         roomId={this.state.roomId} 
             mtoken={this.state.mtoken}
             sessionId={this.state.sessionId}
@@ -171,6 +196,8 @@ joinRoomCallback=(data)=>{
                                 
                                 <Pdf></Pdf>
                         </HSBC>
+                        <button onClick={this.shareMaskClick.bind(this)}>遮罩层</button>
+                        </div>
                         :
                         <div>
                             坐席账号：<input placeholder="请输入坐席账号" value={this.state.tellerAccount} onChange={e => this.handleChangeTeller(e)}></input>

package/packages/pages/video/video.jsx

@@ -38,6 +38,7 @@ let streamShare
 let muteJson = new Map()
 let dateTime = 0
 let messageValue = ''
+let rateList = []
 var os = function() {
   var ua = navigator.userAgent,
   isWindowsPhone = /(?:Windows Phone)/.test(ua),
@@ -68,6 +69,7 @@ class Video extends Component {
   cancel = axios.CancelToken.source()
   signCanvas = React.createRef();
   state = {
+    signNoClick: false,
     listVideoPicture: [],
     isScreenSwitching: false,
     whiteboardWidth: '',
@@ -204,11 +206,11 @@ class Video extends Component {
       {
         type: false
       }
-    ]
+    ],
+    shareMaskState: false,
   };
   // eslint-disable-next-line no-undef
   test_controller = '';
-
   /**
    * 创建房间成功后回调后台
    * @param  {JSON} data 数据类型
@@ -278,9 +280,11 @@ class Video extends Component {
     try {
       let result = await API.getBase64Image({ fileName: data});
       console.log('getBase64Image',result)
+      this.tabTitlesClick('customerScreen', 'delect')
       this.props.imgCallback({
         type: result.data.type + '', 
-        file: result.data.base64Image}
+        file: result.data.base64Image,
+        errorType: 0}
         )
     } catch (err) {
       console.error(err);
@@ -397,132 +401,168 @@ class Video extends Component {
     ];
     this.test_controller.InitRoomConfig(config_param)
   };
+  rateAll = async() =>{
+    let data = ''
+    try {
+      let result = await API.rateAll();
+      console.log(result)
+      
+      if (result.code == 200) {
+        data = result.data ? result.data : ''
+      }
+      return data
+    }catch (err) {
+      return data
+      }
+  }
   // 开启录制
   enableServerRecording = () => {
-    const filePath = 'recordId_' + new Date().valueOf();
-    const recordParam = {};
-    recordParam.width = 1920;
-    recordParam.height = 1080;
-    recordParam.recordTotalStream = 0;
-    recordParam.startTimeout = 10;
-    recordParam.splitType = 0;
-    recordParam.endType = 1;
-    recordParam.crf = 26
-    recordParam.overlaps = [
-      {
-        tag: '', // 流 tag，如果不设置或为空，则为全局⽔印
-        type: 1, // 1 为时间戳⽔印；2 为⽂字⽔印；3 为图⽚⽔印
-        id: 1, // ⽔印 ID
-        enable: true,
-        xPosition: 10, // x 轴位置
-        yPosition: 10, // y 轴位置
-        text: '', // ⽔印⽂字
-        fontSize: 16, // 字体⼤⼩
-        url: '' // ⽔印图⽚ HTTP 地址
-      },
-    ];
-  recordParam.tagPositions = [
-    {
-      tag: 'projectionWhiteboard',
-      xPosition: 0,
-      yPosition: 270,
-      width: 1280,
-      height: 720
-    },
-    {
-      tag: 'VIDEO_SOURCE_SCREEN',
-      xPosition: 1290,
-      yPosition: 640,
-      width: 630,
-      height: 350
-    },
-    {
-      tag: 'tag1',
-      xPosition: 0,
-      yPosition: 0,
-      width: 310,
-      height: 180
-    },
-    {
-      tag: 'customer1',
-      xPosition: 320,
-      yPosition: 0,
-      width: 310,
-      height: 180
-    },
-    {
-      tag: 'customer2',
-      xPosition: 640,
-      yPosition: 0,
-      width: 310,
-      height: 180
-    },
-    {
-      tag: 'customer3',
-      xPosition: 960,
-      yPosition: 0,
-      width: 310,
-      height: 180
-    },
-    {
-      tag: 'customer4',
-      xPosition: 1280,
-      yPosition: 0,
-      width: 310,
-      height: 180
-    },
-    {
-      tag: 'customer5',
-      xPosition: 1600,
-      yPosition: 0,
-      width: 310,
-      height: 180
-    },
-    // {
-    //   tag: 'customer6',
-    //   xPosition: 1440,
-    //   yPosition: 0,
-    //   width: 240,
-    //   height: 180
-    // },
-    // {
-    //   tag: 'customer7',
-    //   xPosition: 1680,
-    //   yPosition: 0,
-    //   width: 240,
-    //   height: 180
-    // },
-    // {
-    //   tag: 'customer8',
-    //   xPosition: 1680,
-    //   yPosition: 180,
-    //   width: 240,
-    //   height: 180
-    // },
-    // {
-    //   tag: 'customer9',
-    //   xPosition: 1680,
-    //   yPosition: 360,
-    //   width: 240,
-    //   height: 180
-    // },
-    // {
-    //   tag: 'customer10',
-    //   xPosition: 1680,
-    //   yPosition: 540,
-    //   width: 240,
-    //   height: 180
-    // },
-    // {
-    //   tag: 'customer11',
-    //   xPosition: 1680,
-    //   yPosition: 720,
-    //   width: 240,
-    //   height: 180
-    // }
-  ]
-    console.log('recordParam', recordParam);
-    this.test_controller.StartRemoteRecord(filePath, recordParam, '')
+    const that = this
+    this.rateAll().then((res)=>{
+      console.log('退出房间者',res)
+      let list = [
+        {
+          tag: 'projectionWhiteboard',
+          xPosition: 0,
+          yPosition: 270,
+          width: 1280,
+          height: 720
+        },
+        // {
+        //   tag: 'VIDEO_SOURCE_SCREEN_ONE',
+        //   xPosition: 1290,
+        //   yPosition: 724,
+        //   width: 570,
+        //   height: 270
+        // },
+        // {
+        //   tag: 'VIDEO_SOURCE_SCREEN',
+        //   xPosition: 1290,
+        //   yPosition: 640,
+        //   width: 630,
+        //   height: 350
+        // },
+        {
+          tag: 'tag1',
+          xPosition: 0,
+          yPosition: 0,
+          width: 310,
+          height: 180
+        },
+        {
+          tag: 'customer1',
+          xPosition: 320,
+          yPosition: 0,
+          width: 310,
+          height: 180
+        },
+        {
+          tag: 'customer2',
+          xPosition: 640,
+          yPosition: 0,
+          width: 310,
+          height: 180
+        },
+        {
+          tag: 'customer3',
+          xPosition: 960,
+          yPosition: 0,
+          width: 310,
+          height: 180
+        },
+        {
+          tag: 'customer4',
+          xPosition: 1280,
+          yPosition: 0,
+          width: 310,
+          height: 180
+        },
+        {
+          tag: 'customer5',
+          xPosition: 1600,
+          yPosition: 0,
+          width: 310,
+          height: 180
+        },
+        // {
+        //   tag: 'customer6',
+        //   xPosition: 1440,
+        //   yPosition: 0,
+        //   width: 240,
+        //   height: 180
+        // },
+        // {
+        //   tag: 'customer7',
+        //   xPosition: 1680,
+        //   yPosition: 0,
+        //   width: 240,
+        //   height: 180
+        // },
+        // {
+        //   tag: 'customer8',
+        //   xPosition: 1680,
+        //   yPosition: 180,
+        //   width: 240,
+        //   height: 180
+        // },
+        // {
+        //   tag: 'customer9',
+        //   xPosition: 1680,
+        //   yPosition: 360,
+        //   width: 240,
+        //   height: 180
+        // },
+        // {
+        //   tag: 'customer10',
+        //   xPosition: 1680,
+        //   yPosition: 540,
+        //   width: 240,
+        //   height: 180
+        // },
+        // {
+        //   tag: 'customer11',
+        //   xPosition: 1680,
+        //   yPosition: 720,
+        //   width: 240,
+        //   height: 180
+        // }
+      ]
+      res.map((item)=>{
+        list.push({
+          tag: item.tag,
+          xPosition: item.xaxis,
+          yPosition: item.yaxis,
+          width: item.width,
+          height: item.height
+        })
+      })
+      const filePath = 'recordId_' + new Date().valueOf();
+      const recordParam = {};
+      recordParam.width = 1920;
+      recordParam.height = 1080;
+      recordParam.recordTotalStream = 0;
+      recordParam.startTimeout = 10;
+      recordParam.splitType = 0;
+      recordParam.endType = 1;
+      recordParam.crf = 26
+      recordParam.overlaps = [
+        {
+          tag: '', // 流 tag，如果不设置或为空，则为全局⽔印
+          type: 1, // 1 为时间戳⽔印；2 为⽂字⽔印；3 为图⽚⽔印
+          id: 1, // ⽔印 ID
+          enable: true,
+          xPosition: 10, // x 轴位置
+          yPosition: 10, // y 轴位置
+          text: '', // ⽔印⽂字
+          fontSize: 16, // 字体⼤⼩
+          url: '' // ⽔印图⽚ HTTP 地址
+        },
+      ];
+    recordParam.tagPositions = list
+      console.log('recordParam', recordParam);
+      that.test_controller.StartRemoteRecord(filePath, recordParam, '')
+  
+    })
 
   };
   // 结束会话
@@ -1451,19 +1491,24 @@ class Video extends Component {
         }
       }
       else if (Mival.typeId == 1220) {
-        // 一炒多的图片
+        // 一炒多的图片  1214
         if (Mival.sessionId == this.state.sessionId) {
+          this.tabTitlesClick('customerScreen', 'delect')
           this.props.imgCallback({
             type: Mival.data.type + '', 
-            file: Mival.data.file}
+            file: Mival.data.file,
+            errerrorTypeorType: 0}
             ) // 文字抄录和风险抄录，3--风险，，2--文字
         }
       } else if (Mival.typeId == 1321) {
         this.getBase64Image(Mival.fileName)
       } else if (Mival.typeId == 1216) {
-        // 签字回调
+        // 签字回调  1213
         if (Mival.sessionId == this.state.sessionId) {
-          this.props.signatureCallback()
+          this.tabTitlesClick('customerScreen', 'delect')
+          this.props.signatureCallback({
+            errorType: 0
+          })
         }
       } else if (Mival.typeId == 1218) {
         if (Mival.sessionId == this.state.sessionId) {
@@ -1653,6 +1698,21 @@ class Video extends Component {
 
           }
         }
+      } else if (Mival.typeId == 121305) {
+        if (Mival.sessionId == this.state.sessionId) {
+          this.props.signatureCallback({
+            errorType: -1
+          })
+        }
+      } else if (Mival.typeId == 121405) {
+        if (Mival.sessionId == this.state.sessionId) {
+          console.log('imgCallback')
+          this.props.imgCallback({
+            type: '', 
+            file: '',
+            errorType: -1
+          })
+        }
       }
     };
     window.IMOpenfire = msg =>{
@@ -1687,6 +1747,13 @@ class Video extends Component {
       sigType: 1
     };
     this.workerClick()
+    rateList = []
+    this.rateAll().then((res)=>{
+      res.map((item)=>{
+        rateList.push(item.tag)
+      })
+      console.log('rateList',rateList)
+    })
     this.test_controller.GetDevices();
     // 获取设备成功
     this.test_controller.OnGetDevicesSuccess = (devicesInfo) => {
@@ -2382,6 +2449,7 @@ class Video extends Component {
         }, function (code, message, data) {
           console.log(data)
         })
+        this.sendNotification()
       let array = this.state.roomCustomerList;
       let newArray = [...array];
       newArray.push({
@@ -2393,7 +2461,8 @@ class Video extends Component {
       this.state.roomCustomerList = newArray
       let config_param
       if (feed.uid != this.state.tellerAccount) {
-        if (feed.tag == 'VIDEO_SOURCE_SCREEN') {
+        if (rateList.indexOf(feed.tag) > -1) {
+        // if (feed.tag == 'VIDEO_SOURCE_SCREEN') {
           config_param = {
             subscribe_video_id: 'video21',
             subscribe_audio_id: 'audio21',
@@ -4017,11 +4086,30 @@ class Video extends Component {
     }
   }
   handleOkSign = () => {
+    console.log(this.signCanvas.current.canvas.drawing.toDataURL('image/png'))
     this.props.imgRMCallback(
       this.signCanvas.current.canvas.drawing.toDataURL('image/png').replace(/data.+?;base64,/, "")
     )
   }
+  onCancelSign=()=>{
+    this.setState({
+      signNoClick: false
+    })
+    this.props.onCancelSign()
+  }
+  signImage=()=>{
+    if(!this.state.signNoClick) {
+      this.setState({
+        signNoClick: true
+      })
+    }
+  }
   handleCancelSign=()=>{
+    if(this.state.signNoClick) {
+      this.setState({
+        signNoClick: false
+      })
+    }
     this.signCanvas.current.clear()
   }
   
@@ -4343,6 +4431,43 @@ class Video extends Component {
     }
     
   }
+  sendNotification = () =>{
+    console.log(this.props.shareMask,this.state.shareMaskState)
+    this.state.shareMaskState = this.props.shareMask
+    callNimIM('sendCustomCmdMsg', {
+      customId: this.state.imRoomId,
+      content: JSON.stringify({
+        'typeId': 1230,
+        'sessionId': this.state.sessionId,
+        'type': this.state.shareMaskState ? 1 : 2
+      })
+    });
+  }
+  componentDidUpdate(prevProps){
+    console.log('componentDidUpdate',prevProps,prevProps.shareMask,this.props.shareMask)
+    if(this.props.shareMask != prevProps.shareMask) {
+      this.sendNotification()
+    }
+  }
+  // shouldComponentUpdate(nextProps,nextState){
+  //   console.log('componentDidUpdate',nextProps,nextState)
+  //   if(nextProps.shareMask != nextState.shareMaskState){
+  //     this.state.shareMaskState = nextProps.shareMask
+  //     this.sendNotification()
+  //   }
+  // }
+//   static  getDerivedStateFromProps(props, state) {
+//     console.log('getDerivedStateFromProps',props,state,props.shareMask)
+//     if(props.shareMask!==state.shareMaskState){
+//       // this.sendNotification()
+//         return {
+            
+//           shareMaskState:shareMask,
+          
+//         }
+//     }
+//     return null
+// }
   render() {
     const { meetingInfo,isTranscribing } = this.props
     var pdfChildren
@@ -5034,15 +5159,25 @@ class Video extends Component {
             
             
           </Modal>
-          <Modal title="签字白板" width={600} destroyOnClose={true} closable={false} centered={true} visible={isTranscribing} footer={
+          <Modal title="签字白板" width={600} destroyOnClose={true} centered={true} visible={isTranscribing} onCancel={this.onCancelSign} footer={
             [
               <div key='okSign'>
-                <Button className="modelButtonCancel" onClick={this.handleCancelSign}>清除</Button>
-              <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkSign}>确定</Button>
+                {
+                  !this.state.signNoClick && <Button className="modelButtonCancelNo">清除</Button>
+                }
+                {
+                  this.state.signNoClick && <Button className="modelButtonCancel" onClick={this.handleCancelSign}>清除</Button>
+                }
+                {
+                  this.state.signNoClick && <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkSign}>确定</Button>
+                }
+              {
+                !this.state.signNoClick && <Button className="modelButtonCancelNo" type="primary" danger >确定</Button>
+              }
               </div>
             ]
           }>
-            <div className="content">
+            <div className="content" onClick={this.signImage}>
               <CanvasDraw
                 ref={this.signCanvas}
                 brushColor="#000"
@@ -5051,6 +5186,7 @@ class Video extends Component {
                 canvasWidth="100%"
                 canvasHeight="100%"
                 hideGrid={true}
+                
               ></CanvasDraw>
             </div>
           </Modal>
@@ -5113,6 +5249,7 @@ sessionId: "",
     otherAttendees: undefined
   },
   isTranscribing: false,
+  shareMask: false,
   internalUrl: 'https://wp-staff-gateway.wealth-platform.uat.ali.cloud.cn.hsbc/meeting-ui/OHB/CN/HSBC?chnlID=OHB&locale=zh_CN&chnlCC=CN&chnlGMC=HSBC&targetFunc=supervisorMeeting&sourceFunc=rmMeeting'
 }
 export default Video

package/packages/pages/video/video.less

@@ -320,12 +320,22 @@
   margin-top: 50px!important;
   padding: 20px 30px 30px!important;
 }
-.modelButtonCancel{
+.modelButtonCancelNo{
   width: 100px!important;
   height: 40px!important;
   font-size: 16px!important;
   color: #5C5C5C!important;
   border: 1px #5C5C5C solid!important;
+  background: #d9d9d9!important;
+  border-spacing: 20px!important;
+}
+.modelButtonCancel{
+  width: 100px!important;
+  height: 40px!important;
+  font-size: 16px!important;
+  color: #333!important;
+  border: 1px #333 solid!important;
+  background: #fff!important;
   border-spacing: 20px!important;
 }
 .modelButtonCancelOne{