UI work on conference calls, translations

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,