UI work on conference calls, translations

css/base.css

@@ -2575,7 +2575,7 @@ ul.tabbar li.active > a {
 .material-icons.big {
   font-size: 2.2rem;
 }
-.material-icons.bigger {
+.material-icons.x-big {
   font-size: 3rem;
 }
 .material-icons.huge {
@@ -2585,13 +2585,26 @@ ul.tabbar li.active > a {
   display: inline-block;
   position: relative;
 }
-.composed-material i:nth-child(2) {
+.composed-material .second {
   position: absolute;
   font-size: 85%;
   top: 7%;
   left: 39%;
   font-weight: bold;
 }
+.composed-material .second-small {
+  position: absolute;
+  font-size: 62%;
+  top: 14%;
+  left: 30%;
+  font-weight: bold;
+}
+
+/* White outline */
+.material-icons.outline {
+  position: relative;
+  text-shadow: -1px 1px #FFF, 1px 1px #FFF, 1px -1px #FFF, -1px -1px #FFF;
+}
 
 #self-avatar .material-icons {
   font-size: 2.4rem;

src/i18n/de.json

@@ -1649,10 +1649,10 @@
     "obsolete": false
   },
   "calls_conference": {
-    "translation": "",
+    "translation": "Telefonkonferenz",
     "defaultMessage": "Conference call",
     "description": "Conference call label",
-    "missing": true,
+    "missing": false,
     "obsolete": false
   },
   "password_reset_success": {
@@ -1661,5 +1661,12 @@
     "description": "Notification message that the password was successfully reset.",
     "missing": false,
     "obsolete": false
+  },
+  "join_conference": {
+    "translation": "",
+    "defaultMessage": "+ Join",
+    "description": "Call to action to join a conference call",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/en.json

@@ -1661,5 +1661,12 @@
     "description": "Notification message that the password was successfully reset.",
     "missing": false,
     "obsolete": false
+  },
+  "join_conference": {
+    "translation": "+ Join",
+    "defaultMessage": "+ Join",
+    "description": "Call to action to join a conference call",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/es.json

@@ -1649,10 +1649,10 @@
     "obsolete": false
   },
   "calls_conference": {
-    "translation": "",
+    "translation": "Conferencia",
     "defaultMessage": "Conference call",
     "description": "Conference call label",
-    "missing": true,
+    "missing": false,
     "obsolete": false
   },
   "password_reset_success": {
@@ -1661,5 +1661,12 @@
     "description": "Notification message that the password was successfully reset.",
     "missing": false,
     "obsolete": false
+  },
+  "join_conference": {
+    "translation": "",
+    "defaultMessage": "+ Join",
+    "description": "Call to action to join a conference call",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ex/base-en.json

@@ -374,6 +374,10 @@
     "defaultMessage": "Invalid security token",
     "description": "Error message when resetting password."
   },
+  "join_conference": {
+    "defaultMessage": "+ Join",
+    "description": "Call to action to join a conference call"
+  },
   "label_client": {
     "defaultMessage": "Client:",
     "description": "Label for a client version"

src/i18n/fr.json

@@ -1649,10 +1649,10 @@
     "obsolete": false
   },
   "calls_conference": {
-    "translation": "",
+    "translation": "Conférence téléphonique",
     "defaultMessage": "Conference call",
     "description": "Conference call label",
-    "missing": true,
+    "missing": false,
     "obsolete": false
   },
   "password_reset_success": {
@@ -1661,5 +1661,12 @@
     "description": "Notification message that the password was successfully reset.",
     "missing": false,
     "obsolete": false
+  },
+  "join_conference": {
+    "translation": "",
+    "defaultMessage": "+ Join",
+    "description": "Call to action to join a conference call",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ko.json

@@ -1649,10 +1649,10 @@
     "obsolete": false
   },
   "calls_conference": {
-    "translation": "",
+    "translation": "전화 회의",
     "defaultMessage": "Conference call",
     "description": "Conference call label",
-    "missing": true,
+    "missing": false,
     "obsolete": false
   },
   "password_reset_success": {
@@ -1661,5 +1661,12 @@
     "description": "Notification message that the password was successfully reset.",
     "missing": false,
     "obsolete": false
+  },
+  "join_conference": {
+    "translation": "",
+    "defaultMessage": "+ Join",
+    "description": "Call to action to join a conference call",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ro.json

@@ -1649,10 +1649,10 @@
     "obsolete": false
   },
   "calls_conference": {
-    "translation": "",
+    "translation": "Apel de conferinta",
     "defaultMessage": "Conference call",
     "description": "Conference call label",
-    "missing": true,
+    "missing": false,
     "obsolete": false
   },
   "password_reset_success": {
@@ -1661,5 +1661,12 @@
     "description": "Notification message that the password was successfully reset.",
     "missing": false,
     "obsolete": false
+  },
+  "join_conference": {
+    "translation": "",
+    "defaultMessage": "+ Join",
+    "description": "Call to action to join a conference call",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ru.json

@@ -1649,10 +1649,10 @@
     "obsolete": false
   },
   "calls_conference": {
-    "translation": "",
+    "translation": "Групповой звонок",
     "defaultMessage": "Conference call",
     "description": "Conference call label",
-    "missing": true,
+    "missing": false,
     "obsolete": false
   },
   "password_reset_success": {
@@ -1661,5 +1661,12 @@
     "description": "Notification message that the password was successfully reset.",
     "missing": false,
     "obsolete": false
+  },
+  "join_conference": {
+    "translation": "",
+    "defaultMessage": "+ Join",
+    "description": "Call to action to join a conference call",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/zh-TW.json

@@ -1649,10 +1649,10 @@
     "obsolete": false
   },
   "calls_conference": {
-    "translation": "",
+    "translation": "電話會議",
     "defaultMessage": "Conference call",
     "description": "Conference call label",
-    "missing": true,
+    "missing": false,
     "obsolete": false
   },
   "password_reset_success": {
@@ -1661,5 +1661,12 @@
     "description": "Notification message that the password was successfully reset.",
     "missing": false,
     "obsolete": false
+  },
+  "join_conference": {
+    "translation": "",
+    "defaultMessage": "+ Join",
+    "description": "Call to action to join a conference call",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/zh.json

@@ -1649,10 +1649,10 @@
     "obsolete": false
   },
   "calls_conference": {
-    "translation": "",
+    "translation": "电话会议",
     "defaultMessage": "Conference call",
     "description": "Conference call label",
-    "missing": true,
+    "missing": false,
     "obsolete": false
   },
   "password_reset_success": {
@@ -1661,5 +1661,12 @@
     "description": "Notification message that the password was successfully reset.",
     "missing": false,
     "obsolete": false
+  },
+  "join_conference": {
+    "translation": "",
+    "defaultMessage": "+ Join",
+    "description": "Call to action to join a conference call",
+    "missing": true,
+    "obsolete": false
   }
 }

src/widgets/call-message.jsx

@@ -7,7 +7,13 @@ import { secondsToTime } from '../lib/strformat.js';
 
 export default class CallMessage extends React.PureComponent {
   render() {
-    const bigIcon = this.props.vc ? 'video_call' : 'call';
+    const bigIcon = this.props.vc ?
+      <div className="composed-material">
+        <i className="material-icons gray second-small">group</i>
+        <i className="material-icons gray big outline">call</i>
+      </div>
+      :
+      <div><i className="material-icons big gray">call</i></div>;
     const isCallDropped = ['busy', 'declined', 'disconnected', 'missed'].includes(this.props.callState);
     const successClass = 'material-icons medium ' + (isCallDropped ? 'red' : 'green');
     const callIcon = this.props.incoming ?
@@ -46,7 +52,9 @@ export default class CallMessage extends React.PureComponent {
         <div>{title}</div>
         <div className="duration"><i className={successClass}>{callIcon}</i> {duration}</div>
         {allowJoin ?
-          <a onClick={this.props.onCallJoin}>Join</a>
+          <a onClick={this.props.onCallJoin}>
+            <FormattedMessage id="join_conference" defaultMessage="+ Join" description="Call to action to join a conference call" />
+          </a>
           : null}
       </div>
     </div>;

src/widgets/call-status.jsx

@@ -6,7 +6,8 @@ import { secondsToTime } from '../lib/strformat.js';
 
 // Props:
 //  incoming: true | false.
-//  success: true | false.
+//  callState: 'busy' | 'declined' | 'disconnected' | 'missed'.
+//  duration: <number> (call duration in milliseconds).
 export default class CallStatus extends React.PureComponent {
   render() {
     const isCallDropped = ['busy', 'declined', 'disconnected', 'missed'].includes(this.props.callState);

src/widgets/inline-video.jsx

@@ -29,7 +29,7 @@ export default class InlineVideo extends React.PureComponent {
         {React.createElement('img', this.props)}
         <div className="play-control">
         {this.props.onClick ?
-          <i className="material-icons white bigger">play_arrow</i>
+          <i className="material-icons white x-big">play_arrow</i>
           :
           <img src="img/broken_video.png" style={{filter: 'invert(100%)'}} width="36" height="36" />}
         </div>

src/widgets/vc-carousel-item.jsx

@@ -1,6 +1,5 @@
 // Video conference carousel item.
 import React from 'react';
-import Track from 'livekit-client';
 
 import LetterTile from './letter-tile.jsx';
 
@@ -25,7 +24,7 @@ export default class VCCarouselItem extends React.PureComponent {
       this.props.micPub.audioTrack.attach(this.state.audioRef);
     }
   }
-  
+
   handleVideoRefChange(node) {
     if (!node) { return; }
     this.setState({videoRef: node});

src/widgets/vc-carousel.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 
 import { Track } from 'livekit-client';
 
-import LetterTile from './letter-tile.jsx';
 import VCCarouselItem from './vc-carousel-item.jsx';
 
 import { VC_CAROUSEL_ITEM_GAP } from '../constants.js';
@@ -12,7 +11,7 @@ export default class VCCarousel extends React.Component {
     super(props);
     this.handlePrevClick = this.handlePrevClick.bind(this);
     this.handleNextClick = this.handleNextClick.bind(this);
- 
+
     this.carouselRef = React.createRef();
     this.contentRef = React.createRef();
     this.prevRef = React.createRef();

src/widgets/vc-panel.jsx

@@ -1,16 +1,11 @@
 // Video conference or broadcast: local and/or peer viewports and controls.
 import React from 'react';
-import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import { FormattedMessage, injectIntl } from 'react-intl';
 
 import {
-  connect,
-  LocalParticipant,
   MediaDeviceFailure,
-  Participant,
   ParticipantEvent,
   RemoteParticipant,
-  RemoteTrack,
-  RemoteTrackPublication,
   Room,
   RoomEvent,
   Track,