Some style fixes.

src/constants.js

@@ -6,3 +6,6 @@ export const CALL_STATE_IN_PROGRESS = 3;
 
 // Video call message headers representing call state.
 export const CALL_HEAD_STARTED = 'started';
+
+// Gap between video conference carousel items.
+export const VC_CAROUSEL_ITEM_GAP = 16;

src/i18n/de.json

@@ -1647,5 +1647,12 @@
     "description": "Menu item [Unpin] for un-pinning the message.",
     "missing": true,
     "obsolete": false
+  },
+  "calls_conference": {
+    "translation": "",
+    "defaultMessage": "Conference call",
+    "description": "Conference call label",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/en.json

@@ -1647,5 +1647,12 @@
     "description": "Menu item [Unpin] for un-pinning the message.",
     "missing": false,
     "obsolete": false
+  },
+  "calls_conference": {
+    "translation": "Conference call",
+    "defaultMessage": "Conference call",
+    "description": "Conference call label",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/es.json

@@ -1647,5 +1647,12 @@
     "description": "Error message when audio is not available",
     "missing": false,
     "obsolete": false
+  },
+  "calls_conference": {
+    "translation": "",
+    "defaultMessage": "Conference call",
+    "description": "Conference call label",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ex/base-en.json

@@ -143,6 +143,10 @@
     "defaultMessage": "missed",
     "description": "Label for missed incoming call"
   },
+  "calls_conference": {
+    "defaultMessage": "Conference call",
+    "description": "Conference call label"
+  },
   "calls_incoming": {
     "defaultMessage": "Incoming call",
     "description": "Incoming call label"

src/i18n/fr.json

@@ -1647,5 +1647,12 @@
     "description": "Error message when audio is not available",
     "missing": false,
     "obsolete": false
+  },
+  "calls_conference": {
+    "translation": "",
+    "defaultMessage": "Conference call",
+    "description": "Conference call label",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ko.json

@@ -1647,5 +1647,12 @@
     "description": "Error message when audio is not available",
     "missing": false,
     "obsolete": false
+  },
+  "calls_conference": {
+    "translation": "",
+    "defaultMessage": "Conference call",
+    "description": "Conference call label",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ro.json

@@ -1647,5 +1647,12 @@
     "description": "Error message when audio is not available",
     "missing": false,
     "obsolete": false
+  },
+  "calls_conference": {
+    "translation": "",
+    "defaultMessage": "Conference call",
+    "description": "Conference call label",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ru.json

@@ -1647,5 +1647,12 @@
     "description": "Error message when audio is not available",
     "missing": false,
     "obsolete": false
+  },
+  "calls_conference": {
+    "translation": "",
+    "defaultMessage": "Conference call",
+    "description": "Conference call label",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/zh-TW.json

@@ -1647,5 +1647,12 @@
     "description": "Error message when audio is not available",
     "missing": false,
     "obsolete": false
+  },
+  "calls_conference": {
+    "translation": "",
+    "defaultMessage": "Conference call",
+    "description": "Conference call label",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/zh.json

@@ -1647,5 +1647,12 @@
     "description": "Error message when audio is not available",
     "missing": false,
     "obsolete": false
+  },
+  "calls_conference": {
+    "translation": "",
+    "defaultMessage": "Conference call",
+    "description": "Conference call label",
+    "missing": true,
+    "obsolete": false
   }
 }

src/views/messages-view.jsx

@@ -1442,7 +1442,7 @@ class MessagesView extends React.Component {
         );
       } else if (this.state.rtcPanel) {
         // P2P call.
-        if (this.state.rtcPanel.startsWith("usr")) {
+        if (Tinode.isP2PTopicName(this.state.rtcPanel)) {
           component2 = (
             <CallPanel
               topic={this.state.topic}

src/views/tinode-web.jsx

@@ -1776,7 +1776,7 @@ class TinodeWeb extends React.Component {
     switch (callState) {
       case CALL_STATE_OUTGOING_INITATED:
         const head = { webrtc: CALL_HEAD_STARTED, aonly: !!audioOnly };
-        let msg = Drafty.videoCall(audioOnly);
+        const msg = Drafty.videoCall(audioOnly);
         if (Tinode.isGroupTopicName(callTopic)) {
           // Video conference.
           head.vc = true;
@@ -1873,7 +1873,7 @@ class TinodeWeb extends React.Component {
     }
     if (topic.isSubscribed()) {
       this.handleTopicSelected(setCallTopic ? topicName : this.state.callTopic);
-      let upd = {
+      const upd = {
         callState: CALL_STATE_IN_PROGRESS
       }
       if (setCallTopic) {

src/widgets/vc-carousel-item.jsx

@@ -1,13 +1,10 @@
 // Video conference carousel item.
 import React from 'react';
-import { injectIntl } from 'react-intl';
-import {
-  Track,
-} from 'livekit-client';
+import Track from 'livekit-client';
 
 import LetterTile from './letter-tile.jsx';
 
-class VCCarouselItem extends React.PureComponent {
+export default class VCCarouselItem extends React.PureComponent {
   constructor(props) {
     super(props);
 
@@ -54,16 +51,15 @@ class VCCarouselItem extends React.PureComponent {
   }
 
   render() {
-    const name = this.props.name;
-    let classes = "call-party carousel-item";
+    let classes = 'call-party carousel-item';
     if (this.props.isSpeaking) {
-      classes += " call-party-speaking";
+      classes += ' call-party-speaking';
     }
 
     const micPub = this.props.micPub;
     const cameraPub = this.props.cameraPub;
     return (
-      <div className={classes} key={this.props.key}>
+      <div className={classes}>
         <>
           <video ref={this.handleVideoRefChange}></video>
           <audio ref={this.handleAudioRefChange}></audio>
@@ -90,5 +86,3 @@ class VCCarouselItem extends React.PureComponent {
     );
   }
 }
-
-export default injectIntl(VCCarouselItem);

src/widgets/vc-carousel.jsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import { injectIntl } from 'react-intl';
-import {
-  Track,
-} from 'livekit-client';
+
+import { Track } from 'livekit-client';
 
 import LetterTile from './letter-tile.jsx';
 import VCCarouselItem from './vc-carousel-item.jsx';
 
-class VCCarousel extends React.Component {
+import { VC_CAROUSEL_ITEM_GAP } from '../constants.js';
+
+export default class VCCarousel extends React.Component {
   constructor(props) {
     super(props);
     this.handlePrevClick = this.handlePrevClick.bind(this);
@@ -20,26 +20,26 @@ class VCCarousel extends React.Component {
   }
 
   handlePrevClick() {
-    const gap = 16;
+    const gap = VC_CAROUSEL_ITEM_GAP;
     const width = this.carouselRef.current.offsetWidth;
     this.carouselRef.current.scrollBy(-(width + gap), 0);
     if (this.carouselRef.current.scrollLeft - width - gap <= 0) {
-      this.prevRef.current.style.display = "none";
+      this.prevRef.current.style.display = 'none';
     }
     if (!this.contentRef.current.scrollWidth - width - gap <= this.carouselRef.current.scrollLeft + width) {
-      this.nextRef.current.style.display = "flex";
+      this.nextRef.current.style.display = 'flex';
     }
   }
 
   handleNextClick() {
-    const gap = 16;
+    const gap = VC_CAROUSEL_ITEM_GAP;
     const width = this.carouselRef.current.offsetWidth;
     this.carouselRef.current.scrollBy(width + gap, 0);
     if (this.carouselRef.current.scrollWidth !== 0) {
-      this.prevRef.current.style.display = "flex";
+      this.prevRef.current.style.display = 'flex';
     }
     if (this.contentRef.current.scrollWidth - width - gap <= this.carouselRef.current.scrollLeft + width) {
-      this.nextRef.current.style.display = "none";
+      this.nextRef.current.style.display = 'none';
     }
   }
 
@@ -98,5 +98,3 @@ class VCCarousel extends React.Component {
     );
   }
 }
-
-export default injectIntl(VCCarousel);

src/widgets/vc-panel.jsx

@@ -14,7 +14,7 @@ import {
   Room,
   RoomEvent,
   Track,
-  VideoPresets,
+  VideoPresets
 } from 'livekit-client';
 
 import LetterTile from './letter-tile.jsx';
@@ -50,7 +50,6 @@ class VCPanel extends React.PureComponent {
     this.start = this.start.bind(this);
     this.stop = this.stop.bind(this);
 
-
     this.reportError = this.reportError.bind(this);
 
     this.handleCloseClick = this.handleCloseClick.bind(this);
@@ -85,7 +84,6 @@ class VCPanel extends React.PureComponent {
     const topic = this.props.tinode.getTopic(this.props.topic);
     topic.onInfo = this.previousOnInfo;
     this.stop();
-
   }
 
   onInfo(info) {
@@ -362,19 +360,19 @@ class VCPanel extends React.PureComponent {
 
     const peerTitle = this.state.activeSpeaker ? this.state.activeSpeaker : clipStr(this.props.title, MAX_PEER_TITLE_LENGTH);
 
-    const remoteActive = this.remoteRef.current && (this.remoteRef.current.src != '' || this.remoteRef.current.srcObject)
+    const remoteActive = this.remoteRef.current && (this.remoteRef.current.src || this.remoteRef.current.srcObject)
 
     return (
       <>
         <div id="video-container">
-          { !this.isBroadcast && Object.keys(this.state.participants).length > 0 ?
+          {!this.isBroadcast && Object.keys(this.state.participants).length > 0 ?
             <VCCarousel
               tinode={this.props.tinode}
               participants={this.state.participants} /> :
             null
           }
           <div id="video-container-panel">
-            { isPublishing ?
+            {isPublishing ?
               <div className="call-party self" disabled={this.state.audioOnly}>
                 <video ref={this.localRef} autoPlay muted playsInline />
                 <div className="caller-name inactive">

umd/tinode.dev.js

@@ -4647,11 +4647,15 @@ class Topic {
     }
     const outgoing = !this.isChannelType() && !data.from || this._tinode.isMe(data.from);
     if (data.head && data.head.webrtc && data.head.mime == _drafty_js__WEBPACK_IMPORTED_MODULE_4___default().getContentType() && data.content) {
-      data.content = _drafty_js__WEBPACK_IMPORTED_MODULE_4___default().updateVideoCall(data.content, {
+      const upd = {
         state: data.head.webrtc,
         duration: data.head['webrtc-duration'],
         incoming: !outgoing
-      });
+      };
+      if (data.head.vc) {
+        upd.vc = true;
+      }
+      data.content = _drafty_js__WEBPACK_IMPORTED_MODULE_4___default().updateVideoCall(data.content, upd);
     }
     if (!data._noForwarding) {
       this._messages.put(data);