react_hsbc_teller 1.0.6 → 1.0.9

package/package.json

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

package/packages/demo/demo.js

@@ -1,5 +1,6 @@
 import React, { Component } from "react";
 import HSBC from "../pages/index";
+import Pdf from './pdf.js'
 
 class Demo extends Component {
   state = {
@@ -123,7 +124,17 @@ createRoomCallback=(data)=>{
     window.localStorage.setItem('sessionId',data.data.sessionId)
     this.setState({imRoomId: data.data.imRoomId});
     window.localStorage.setItem('imRoomId', data.data.imRoomId)
-
+    // setInterval(
+    //     () => {
+    //         console.log('isTranscribing',this.state.isTranscribing)
+    //         this.state.isTranscribing = !this.state.isTranscribing
+    //         this.setState({
+    //             isTranscribing: this.state.isTranscribing
+    //         })
+    //         console.log('isTranscribing',this.state.isTranscribing)
+    //     },
+    //     5000
+    //   );
 }
 joinRoomCallback=(data)=>{
     console.log('joinRoomCallback', data)
@@ -159,7 +170,7 @@ joinRoomCallback=(data)=>{
                             imgCallback={this.imgCallback}
                             >
                                 
-                                {/* <Pdf></Pdf> */}
+                                <Pdf></Pdf>
                         </HSBC>
                         :
                         <div>

package/packages/demo/pdf.js

@@ -0,0 +1,78 @@
+import React, { Component } from "react";
+
+class pdf extends Component {
+  state = {
+    isVideo: false,
+    tellerAccount: '',
+    callbackUrl: 'http://47.102.126.132:8720/hsbc/callback',
+    businessNumber: '',
+    lang: 'zh',
+    roomServerUrl: 'wss://mrtc.mpaas.cn-hangzhou.aliyuncs.com/ws',
+    baseURL:'https://counter-web.leimondata.cn:18082/api/leimon-counter-api',
+    resourcePath:'https://counter-web.leimondata.cn:7199',
+}
+startVideo = () => {
+    this.setState({
+        isVideo: true
+    })
+}
+onLeaveRoom = (val) => {
+    console.log(val)
+    this.setState({
+        isVideo: false
+    })
+}
+handleChangeTeller = (event) => {
+    this.setState({
+        tellerAccount: event.target.value
+    })
+}
+handleChangeCall = (event) => {
+    this.setState({
+        callbackUrl: event.target.value
+    })
+}
+handleChangeBysiness = (event) => {
+    this.setState({
+        businessNumber: event.target.value
+    })
+}
+
+handleRoomServerUrl = (event) => {
+    this.setState({
+        roomServerUrl: event.target.value
+    })
+}
+handleBaseURL = (event) => {
+    this.setState({
+        baseURL: event.target.value
+    })
+}
+handleResourcePath = (event) => {
+    this.setState({
+        resourcePath: event.target.value
+    })
+}
+
+  render() {
+    return (
+      <div className="test">
+                {
+                        <div>
+                            坐席账号：<input placeholder="请输入坐席账号" value={this.state.tellerAccount} onChange={e => this.handleChangeTeller(e)}></input>
+                            回调地址：<input placeholder="请输入回调地址" value={this.state.callbackUrl} onChange={e => this.handleChangeCall(e)}></input>
+                            全局流水号：<input placeholder="请输入全局流水号" value={this.state.businessNumber} onChange={e => this.handleChangeBysiness(e)}></input>
+                            阿里服务器地址：<input placeholder="请输入阿里服务器地址" value={this.state.roomServerUrl} onChange={e => this.handleRoomServerUrl(e)}></input>
+                            接口地址：<input placeholder="请输入接口地址" value={this.state.baseURL} onChange={e => this.handleBaseURL(e)}></input>
+                            阿里资源服务地址：<input placeholder="请输入阿里资源服务地址" value={this.state.resourcePath} onChange={e => this.handleResourcePath(e)}></input>
+
+                            <button className="button" onClick={this.startVideo.bind(this)}>开启视频</button>
+                        </div>
+                }
+            </div>
+    );
+  }
+}
+
+
+export default pdf;

package/packages/pages/foot/foot.jsx

@@ -113,7 +113,7 @@ export default class foot extends Component {
                                   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>
                               }
@@ -123,7 +123,7 @@ export default class foot extends Component {
                               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>
                       }
@@ -149,7 +149,7 @@ export default class foot extends Component {
                     <div className="one">
                         <img className="imgClass" src={require("../../assets/img/inspection.png").default} alt="" />
                         <div className="text">
-                            设备检测
+                        设置视频设备
                         </div>
                     </div>
                     </div>
@@ -166,7 +166,7 @@ export default class foot extends Component {
                 
                 <div className="total totalThree">
                     <button className="buttonClass" onClick={this.endSession.bind(this)}>
-                        <span className="spanClass">结束</span>
+                        <span className="spanClass">结束会议</span>
                     </button>
                 </div>
             </div>

package/packages/pages/foot/foot.less

@@ -23,6 +23,9 @@ width: 100%;
   align-items: center;
   flex-wrap: nowrap;
   }
+  .footHover{
+      margin: 0 5px;
+  }
   .footHover :hover{
       background: #F3F3F3;
       border-radius: 8px;
@@ -31,7 +34,8 @@ width: 100%;
     margin-top: 8px;
     padding-bottom: 10px;
     text-align: center;
-    width: 80px;
+    max-width: 110px;
+    min-width: 80px;
 height: 11px;
 font-size: 14px;
 font-family: PingFangSC-Regular, PingFang SC;
@@ -50,7 +54,7 @@ line-height: 11px;
 .buttonClass{
     font-size: 16px;
     color: #ffffff;
-    width: 70px;
+    width: 90px;
     height: 32px;
     background: #B70000;
     border-radius: 6px;

package/packages/pages/header/header.jsx

@@ -8,7 +8,7 @@ export default class header extends Component {
         return(
             <div className="Hamburger">
                 <div className="left-header">
-                    <div className="title">汇丰银行营业厅</div>
+                    <div className="title">汇丰银行远程会议</div>
                 </div>
             </div>
         )

package/packages/pages/video/video.jsx

@@ -50,8 +50,6 @@ class Video extends Component {
     isWhiteboard: false,
     isSelect: '',
     loading: false,
-    // isModalVisibleSign: '',
-    isModalVisibleSign: this.props.isTranscribing,
     titleModal: '人脸识别',
     faceCustomerType: 1, // 1无感人脸，2ocr
     faceCustomerUid: '',
@@ -65,7 +63,7 @@ class Video extends Component {
     isModalVisibleFacial: false,
     isModalVisibleEnd: false,
     isModalVisible: false,
-    screenName: '投屏',
+    screenName: '共享模式',
     suspendName: '暂停',
     cameraImg: cameraImgOpen,
     voiceStatue: false,
@@ -718,8 +716,24 @@ class Video extends Component {
     const cobj = canvas.getContext('2d'); // 获取绘图环境
     canvas.width = width;
     canvas.height = height;
-
-    interval = setInterval(() => {
+    let blob = new Blob([
+      `
+      let timer;
+      onmessage = ({data:flag})=>{
+          if(!flag){
+              clearInterval(timer);
+          }else{
+             timer = setInterval(function() { postMessage(''); }, 100);
+          }
+      }
+      `,
+    ]);
+    let url = window.URL.createObjectURL(blob);
+    var worker = new Worker(url);
+    window.URL.revokeObjectURL(blob);
+    let flag1 = true;
+
+    worker.onmessage =() => {
       cobj.clearRect(0, 0, width, height);
       for (let i = 0; i < list.length; i++) {
 
@@ -858,7 +872,8 @@ class Video extends Component {
         }
         
       }
-    }, 100);
+    };
+    worker.postMessage(flag1);
     const captureStream = canvas.captureStream();
     const mix_stream = new MediaStream(captureStream);
     pictureInPictureVideo = document.getElementById('mixedvideo');
@@ -877,7 +892,7 @@ class Video extends Component {
     pictureInPictureVideo.addEventListener('leavepictureinpicture', (event) => {
       pictureInPictureVideo.srcObject = null;
       pictureInPictureVideo.style.display = "none";
-      clearInterval(interval);
+      worker.postMessage(false);
       this.state.isPictureInPicture = false
     });
   }
@@ -1507,6 +1522,9 @@ class Video extends Component {
     // 音视频关闭通知
     this.test_controller.OnMediaClose = (code, sid) => {
       console.log(code, sid)
+      if((code == 5004 || code == 5007) && document.getElementById('publish_video1').name == sid) {
+        this.roomCallBack(2, '媒体链路连接异常/超时',8)
+      }
     };
     // 加入房间成功
     this.test_controller.OnJoinRoomSucc = () => {
@@ -1783,7 +1801,8 @@ class Video extends Component {
           'meetingInfo': {
             'title': this.props.meetingInfo.title,
             'host': this.props.meetingInfo.host,
-            'customers': this.props.meetingInfo.customers
+            'customers': this.props.meetingInfo.customers,
+            'otherAttendees': this.props.meetingInfo.otherAttendees
           }
 
         })
@@ -1998,11 +2017,10 @@ class Video extends Component {
             'tellerId': this.props.tellerAccount
           })
         })
-        this.state.sessionType = false
         this.state.isSharedScreen = false
         this.setState({
           
-          screenName: '投屏'
+          screenName: '共享模式'
         });
         this.tabTitlesClick('RMScreen', 'delect')
         if (this.state.isPictureInPicture) {
@@ -2288,10 +2306,10 @@ class Video extends Component {
     // 切流成功通知
     this.test_controller.OnChangeMediaStreamSuccess = (sid) => {
       console.log('切流成功通知', sid);
-      if(this.state.isModalVisibleInspection) {
-        this.messageClick('切换摄像头或麦克风成功','success')
+      if(this.state.loading) {
+        this.messageClick('摄像头或麦克风切换成功','success')
         this.setState({
-          isModalVisibleInspection: false
+            loading: false
         })
       }
       
@@ -2303,7 +2321,12 @@ class Video extends Component {
       msg
     ) => {
       console.log('切流失败通知', sid, code, msg)
+      if(this.state.loading) {
+      this.setState({
+          loading: false
+      })
       this.messageClick('切换摄像头或麦克风失败，请先检查设备','error')
+    }
     };
     // 服务端录制初始化成功
     this.test_controller.OnInitRemoteRecordSucc = (
@@ -2504,7 +2527,7 @@ class Video extends Component {
     this.timer && clearInterval(this.timer);
     if(this.state.isSharedScreen) {
       this.setState({
-        screenName: '投屏',
+        screenName: '共享模式',
       })
       this.state.isSharedScreen = false
       this.state.laveRoomSharedScreen = true
@@ -2519,7 +2542,7 @@ class Video extends Component {
       })
     } else {
       this.setState({
-        screenName: '投屏',
+        screenName: '共享模式',
       });
       this.state.isSharedScreen = false
       this.state.laveRoomSharedScreen = true
@@ -2811,7 +2834,7 @@ class Video extends Component {
         this.state.isSharedScreen = false
         this.state.isScreenSwitching = false
         this.setState({
-          screenName: '投屏'
+          screenName: '共享模式'
         });
         console.log(pictureInPictureVideo)
         this.tabTitlesClick('RMScreen', 'delect')
@@ -2844,7 +2867,7 @@ class Video extends Component {
         this.tabTitlesClick(
           {
             value: 'RMScreen',
-            name: '坐席投屏'
+            name: '共享内容'
           }, 'add'
         )
         if (!this.state.isPictureInPicture) {
@@ -2977,9 +3000,6 @@ class Video extends Component {
   };
   // 坐席签字
   transcribingClick = () => {
-    this.setState({
-      isModalVisibleSign: true,
-    })
   };
   invitationClick = () => {
     this.state.linkData = ''
@@ -3065,7 +3085,6 @@ class Video extends Component {
     })
   }
   componentWillReceiveProps(props) {
-    console.log('componentWillReceiveProps',props)
       this.state.channelId = props.roomId,
       this.state.rtoken = props.mtoken,
       this.state.sessionId = props.sessionId,
@@ -3222,38 +3241,10 @@ class Video extends Component {
       })
     }
   }
-  counterSign = async data => {
-    try {
-      let result = await API.counterSign({
-        sessionId: this.state.sessionId,
-        file: data.file
-      });
-      console.log(result)
-      if (result.code == 200) {
-        this.messageClick('签字成功','success')
-        this.setState({
-          isModalVisibleSign: false,
-        })
-      } else {
-        this.messageClick('签字失败','error')
-      }
-    } catch (err) {
-      if(err.status == 502 || err.status== 404) {
-        this.roomCallBack(2, '连接服务器失败','SYS-02')
-      }
-    }
-  }
   handleOkSign = () => {
-    this.setState({
-      isModalVisibleSign: false,
-    })
-    console.log(this.signCanvas.current.canvas.drawing.toDataURL('image/png'))
     this.props.imgRMCallback(
       this.signCanvas.current.canvas.drawing.toDataURL('image/png').replace(/data.+?;base64,/, "")
     )
-    // this.counterSign({
-    //   file: this.signCanvas.current.canvas.drawing.toDataURL('image/png')
-    // })
   }
   switchExternal = () => {
     if (!this.state.isWhiteboard) {
@@ -3263,26 +3254,75 @@ class Video extends Component {
         value: 'RMWhiteboard',
         name: 'RM白板'
       }, 'add')
-      if (document.getElementById('video20').name) {
-        // 代表已经有了进行切流
-        publish_config.publish_device = 4
-        publish_config.media_type = 1
-        publish_config.sid = document.getElementById('video20').name
-        publish_config.part_of_screen_id = 'touBoxItem'
-        publish_config.video_profile_type = 5
-        this.test_controller.ChangeMediaStream(publish_config);
-      } else {
-
-        publish_config.media_type = 1
-        publish_config.publish_device = 4
-        publish_config.need_volume_analyser = true
-        publish_config.video_profile_type = 5
-        publish_config.part_of_screen_id = 'touBoxItem';
-        publish_config.publish_video_id = 'video20'
-        publish_config.publish_streamId_id = 'subscribe_streamId10'
-        publish_config.publish_tag = 'projectionWhiteboard'
-        this.test_controller.Publish(publish_config)
-      }
+      const width = this.state.whiteboardWidth;
+      const height = this.state.whiteboardHeight;
+      const canvas = document.createElement('canvas');
+      const videoMedia = document.getElementById('manedvideo');
+      const cobj = canvas.getContext('2d'); // 获取绘图环境
+      const w = window.screen.width;
+      const h = window.screen.height;
+      canvas.width = width;
+      canvas.height = height;
+      videoMedia.addEventListener('play', (event) =>{
+        var $this = this; //cache
+        console.log('333111',!$this.paused,!$this.ended)
+        loop()
+        function loop() {
+            if (!$this.paused && !$this.ended) {
+              cobj.drawImage(videoMedia, 0, 0, width, height, 0, 0,width, height,);
+                setTimeout(loop, 1000 / 10); // drawing at 30fps
+            }
+        }
+        
+        if (document.getElementById('video20').name) {
+          // 代表已经有了进行切流
+          publish_config.publish_device = 5
+          publish_config.media_type = 1
+          publish_config.sid = document.getElementById('video20').name
+          publish_config.stream = canvas.captureStream(10)
+          publish_config.video_profile_type = 5
+          this.test_controller.ChangeMediaStream(publish_config);
+        } else {
+  
+          publish_config.media_type = 1
+          publish_config.publish_device = 5
+          publish_config.need_volume_analyser = true
+          publish_config.video_profile_type = 5
+          publish_config.stream = canvas.captureStream(10)
+          publish_config.publish_video_id = 'video20'
+          publish_config.publish_streamId_id = 'subscribe_streamId10'
+          publish_config.publish_tag = 'projectionWhiteboard'
+          this.test_controller.Publish(publish_config)
+        }
+    }, 0);
+      navigator.mediaDevices.getDisplayMedia({
+        video: true
+    })
+    .then((stream) => {
+      videoMedia.srcObject = stream;
+    }, error => {
+        console.log("Unable to acquire screen capture", error);
+    });
+      // if (document.getElementById('video20').name) {
+      //   // 代表已经有了进行切流
+      //   publish_config.publish_device = 4
+      //   publish_config.media_type = 1
+      //   publish_config.sid = document.getElementById('video20').name
+      //   publish_config.part_of_screen_id = 'touBoxItem'
+      //   publish_config.video_profile_type = 5
+      //   this.test_controller.ChangeMediaStream(publish_config);
+      // } else {
+
+      //   publish_config.media_type = 1
+      //   publish_config.publish_device = 4
+      //   publish_config.need_volume_analyser = true
+      //   publish_config.video_profile_type = 5
+      //   publish_config.part_of_screen_id = 'touBoxItem';
+      //   publish_config.publish_video_id = 'video20'
+      //   publish_config.publish_streamId_id = 'subscribe_streamId10'
+      //   publish_config.publish_tag = 'projectionWhiteboard'
+      //   this.test_controller.Publish(publish_config)
+      // }
     } else {
       this.messageClick('当前已经切换RM白板','success')
 
@@ -3313,11 +3353,16 @@ class Video extends Component {
     this.test_controller.GetDevices()
   }
   handleOkInspection = () => {
+    this.setState({
+      isModalVisibleInspection: false,
+      loading: true
+    })
     const config = {}
     config.sid = document.getElementById('publish_video1').name
     config.videoSource = this.state.cameraValue
     config.audioSource = this.state.microphoneValue
     this.test_controller.ChangeProfile(config)
+
   }
   handleCancelInspection = () => {
     this.setState({
@@ -3345,11 +3390,26 @@ class Video extends Component {
        }
   }
   render() {
-    const { meetingInfo } = this.props
+    const { meetingInfo,isTranscribing } = this.props
     var pdfChildren
     if (this.props.children) {
       pdfChildren = React.cloneElement(this.props.children, { width: this.state.whiteboardWidth, height: this.state.whiteboardHeight, show: this.state.isSelect == 'RMWhiteboard'})
     }
+    const otherAttendeesList = (
+      <span className='labelClass'>
+        {(meetingInfo.otherAttendees ? meetingInfo.otherAttendees.length>0 ? true : false : false) &&
+          meetingInfo.otherAttendees.map((item, index) => {
+            return <label key={index}>
+              {item}
+              {
+                meetingInfo.otherAttendees.length > 0 && index != meetingInfo.otherAttendees.length - 1 && <label>，</label>
+              }
+
+            </label>
+          })
+        }
+      </span>
+    )
     const customerNameList = (
       <span className='labelClass'>
         {
@@ -3447,9 +3507,9 @@ class Video extends Component {
           <Header></Header>
           <div className="health">
           <div className="healthVideo">
-            <div className="projection">
+            <div className="projection"  style={{background: this.state.tabTitles.length > 0 ? '#f0f0f0' : '#ffffff'}}>
             {tabTitleList}
-            <img style={sectionStyle} src={require("../../assets/img/placeholder_bg.png").default} alt="" />
+            {/* <img style={sectionStyle} src={require("../../assets/img/placeholder_bg.png").default} alt="" /> */}
             <div id="whiteboardDIV" style={{height: this.state.tabTitles.length > 0 ? 'calc(100% - 33px)' : '100%'}}>
             
               <div className="videoDiv" style={{ display: (this.state.isSelect == 'RMScreen') ? '' : 'none', }}>
@@ -3466,6 +3526,7 @@ class Video extends Component {
 
               </div>
               <div className="videoDiv" style={{ display: (this.state.isSelect == 'RMWhiteboard') ? '' : 'none', }}>
+              {/* <div className="videoDiv"> */}
                 <div id="touBoxItem">
                   {pdfChildren}
                 </div>
@@ -3497,9 +3558,17 @@ class Video extends Component {
                         <label className='labelClass'>{meetingInfo.host}</label>
                       </li>
                       <li>
-                        <span>参会者：</span>
+                        <span>客户：</span>
                         {customerNameList}
                       </li>
+                      {
+                        (meetingInfo.otherAttendees ? meetingInfo.otherAttendees.length>0 ? true : false : false) && <li>
+                        <span>其他参会者：</span>
+                        {otherAttendeesList}
+                      </li>
+                      }
+                      
+                      
                     </ul>
                   </div>
                 </div>
@@ -3919,7 +3988,7 @@ class Video extends Component {
             <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkEnd}>确定</Button>
             </div>
           ]}>
-            <div className='endModal'>确定是否结束会话？</div>
+            <div className='endModal'>是否要结束并退出会议？</div>
           </Modal>
           <Modal title={this.state.titleModal}  closable={false} centered={true} visible={this.state.isModalVisibleFacial} footer={[
             <div key='facial'>
@@ -3938,7 +4007,7 @@ class Video extends Component {
             </div>
 
           </Modal> */}
-          <Modal className="modelClass" title="新增预约" closable={false} centered={true} visible={this.state.isModalVisibleInvitation} footer={[
+          <Modal className="modelClass" title="邀请参会人员" closable={false} centered={true} visible={this.state.isModalVisibleInvitation} footer={[
              <div key='invitation'>
             <Button className="modelButtonCancel" onClick={this.handleCancelInvitation}>取消</Button>
             {
@@ -3973,7 +4042,7 @@ class Video extends Component {
             }
             
           </Modal>
-          <Modal title="签字白板" width={600} destroyOnClose={true} closable={false} centered={true} visible={this.state.isModalVisibleSign} footer={
+          <Modal title="签字白板" width={600} destroyOnClose={true} closable={false} centered={true} visible={isTranscribing} footer={
             [
               <div key='okSign'>
               <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkSign}>确定</Button>
@@ -3992,21 +4061,21 @@ class Video extends Component {
               ></CanvasDraw>
             </div>
           </Modal>
-          <Modal title="设备检测" closable={false} centered={true} visible={this.state.isModalVisibleInspection} footer={[
+          <Modal title="设置视频设备" closable={false} centered={true} visible={this.state.isModalVisibleInspection} footer={[
              <div key='inspection'>
             <Button className="modelButtonCancel" onClick={this.handleCancelInspection}>取消</Button>
             <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkInspection}>确定</Button>
             </div>
           ]}>
             <div className="inspection">
-              <div>摄像头设备：</div>
+              <div>摄像头：</div>
               {camera}
-              <div>麦克风设备：</div>
+              <div>麦克风：</div>
               {microphone}
               {
                 this.state.speakerList.length > 0 &&
                  <span>
-                   <div>扬声器设备：</div>
+                   <div>扬声器：</div>
               {speaker}
                  </span>
               }
@@ -4014,6 +4083,8 @@ class Video extends Component {
             </div>
           </Modal>
           <video className="mixedvideo" id="mixedvideo" autoPlay muted={true} width="0" height="0"></video>
+          <video className="mixedvideo" id="manedvideo" autoPlay width="0" height="0"></video>
+
         </Spin>
       </div>);
   }
@@ -4025,7 +4096,7 @@ imRoomId: "Fwua8kGB6@conference.openfire2.leimondata.cn",
 sessionId: "Fwua8kGB6",
   tellerAccount: 't001',
   businessNumber: '123',
-  callbackUrl: 'http://47.102.126.132:8720/hsbc/callback',
+  callbackUrl: 'http://182.92.184.31:8720/hsbc/callback',
   // roomServerUrl: 'wss://app.uat.dsp.hsbcfts.com.cn/mpaas/mrtc/ws', 
   roomServerUrl: 'wss://mrtc.mpaas.cn-hangzhou.aliyuncs.com/ws',
 
@@ -4043,7 +4114,8 @@ sessionId: "Fwua8kGB6",
   meetingInfo: {
     title: '--',
     host: '--',
-    customers: ['--']
+    customers: ['--'],
+    otherAttendees: undefined
   },
   isTranscribing: false,
 }

package/packages/pages/video/video.less

@@ -164,7 +164,7 @@
 .projection{
   width: 80%;
   position: relative;
-  background: #f3f3f3;
+  // background: #fff;
   color: #333;
   border-radius: 0 4px 4px 4px;
   text-align: left;