Merge pull request #125 from tinode/vc

Video conferencing skeleton.

css/base.css

@@ -309,6 +309,11 @@ ul.menu > li.separator:hover {
   background-color: #ccc;
 }
 
+ul.menu > li.disabled {
+  pointer-events: none;
+  opacity: 0.6;
+}
+
 /* The down arrow head - trigger for context menu */
 .menuTrigger {
   position: absolute;
@@ -517,8 +522,6 @@ div.trusted-badge {
   color: #999;
   font-size: 1.8rem;
   background-color: #fafafa;
-  right: 1rem;
-  bottom: 1rem;
   border-radius: 50%;
   width: 3.25rem;
   height: 3.25rem;
@@ -1744,11 +1747,15 @@ video {
 
 /* Badge with "You" for current user or peer's name. */
 .call-party .caller-name {
+  max-width: 12rem;
   padding: 0.15rem 0.5rem;
   border-radius: 0.35rem;
   z-index: 1;
   text-shadow: 0 0 1px white;
   background-color: rgba(255, 255, 255, 0.7);
+  text-overflow: ellipsis;
+  overflow-x: hidden;
+  white-space: nowrap;
 }
 
 .call-party.self .caller-name.inactive {
@@ -1815,6 +1822,10 @@ video {
   font-weight: lighter;
 }
 
+#go-to-latest {
+  right: 1.5rem;
+  bottom: 1rem;
+}
 
 @keyframes active-call {
   0% {
@@ -2570,7 +2581,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 {
@@ -2580,13 +2591,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;
@@ -3178,6 +3202,80 @@ ul.phone-country-selector span.country {
   overflow-x: hidden;
 }
 
+/* Video conferencing. */
+.call-party-speaking {
+  border: 2.5px solid #2196f3;
+}
+
+.carousel-item .caller-name.inactive {
+  position: absolute;
+  bottom: 0.25rem;
+  right: 0.25rem;
+  max-width: 6.5rem;
+}
+
+.carousel-item .muted {
+  position: absolute;
+  top: 0.25rem;
+  right: 0.25rem;
+}
+
+.carousel-item .avatar-box {
+  width: 45px;
+  height: 45px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  /* Center the avatar in parent view. */
+  transform: translate(-50%, -50%);
+}
+
+#carousel-wrapper {
+  width: 100%;
+  max-width: 54rem;
+  position: relative;
+  align-self: center;
+  padding-top: 0.5rem;
+  overflow: hidden;
+  flex-shrink: 0;
+  flex-grow: 0;
+  scrollbar-width: none;  /* Firefox */
+}
+
+#carousel {
+  overflow-x: scroll;
+  overflow-y: hidden;
+  scroll-behavior: smooth;
+  scrollbar-width: none; /* Hide scrollbar in Firefox */
+}
+#carousel::-webkit-scrollbar {
+  display: none;  /* Hide scrollbar in Safari and Chrome */
+}
+
+#carousel-content {
+  display: grid;
+  grid-gap: 1rem;
+  grid-auto-flow: column;
+}
+
+#carousel-prev {
+  top: 50%;
+  left: 0;
+  transform: translate(50%, -50%);
+}
+
+#carousel-next {
+  top: 50%;
+  right: 0;
+  transform: translate(-50%, -50%);
+}
+
+.carousel-item {
+  position: relative;
+  width: 8rem;
+  height: 8rem;
+}
+
 /*
  Very wide monitor.
  */
@@ -3241,4 +3339,8 @@ ul.phone-country-selector span.country {
   .pinned {
     width: unset;
   }
+
+  .call-party.self {
+    bottom: 8.5rem;
+  }
 }

index-dev.html

@@ -34,6 +34,8 @@
     <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.development.js"></script>
     <!-- React-Intl for translations -->
     <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/react-intl@6/react-intl.iife.js"></script>
+    <!-- LiveKit for group video calls -->
+    <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/livekit-client@1/dist/livekit-client.umd.js"></script>
   </head>
 
   <body>

index.html

@@ -26,6 +26,7 @@
 <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.production.min.js"></script>
 <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/react-dom@18.2.0/umd/react-dom.production.min.js"></script>
 <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/react-intl@6.3.2/react-intl.iife.min.js"></script>
+<script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/livekit-client@1.10.0/dist/livekit-client.umd.js"></script>
 </head>
 <body>
 <noscript><div id="noscript-message"><div id="noscript-title">Javascript support is required.</div>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tinode-webapp",
   "description": "Tinode messenger for the web",
-  "version": "0.23.0-rc1",
+  "version": "0.23.0-rc2",
   "repository": {
     "type": "git",
     "url": "https://github.com/tinode/webapp.git"
@@ -67,7 +67,7 @@
   "dependencies": {
     "firebase": "^9.17.2",
     "libphonenumber-js": "^1.10.24",
-    "npm-check-updates": "^16.7.12",
+    "livekit-client": "^1.10.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-intl": "^6.3.0",

src/config.js

@@ -96,7 +96,7 @@ export const MAX_TITLE_LENGTH = 60;
 // Maximum length of topic description.
 export const MAX_TOPIC_DESCRIPTION_LENGTH = 360;
 // Maximum length of user name when displaying a video call.
-export const MAX_PEER_TITLE_LENGTH = 20;
+export const MAX_PEER_TITLE_LENGTH = 24;
 
 // Length of message previews in chat list, in characters.
 export const MESSAGE_PREVIEW_LENGTH = 80;

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

@@ -1635,17 +1635,24 @@
     "obsolete": false
   },
   "pin_message": {
-    "translation": "",
+    "translation": "Anpinnen",
     "defaultMessage": "Pin",
     "description": "Menu item [Pin] for pinning message to the top.",
-    "missing": true,
+    "missing": false,
     "obsolete": false
   },
   "unpin_message": {
-    "translation": "",
+    "translation": "Lösen",
     "defaultMessage": "Unpin",
     "description": "Menu item [Unpin] for un-pinning the message.",
-    "missing": true,
+    "missing": false,
+    "obsolete": false
+  },
+  "calls_conference": {
+    "translation": "Telefonkonferenz",
+    "defaultMessage": "Conference call",
+    "description": "Conference call label",
+    "missing": false,
     "obsolete": false
   },
   "password_reset_success": {
@@ -1654,5 +1661,12 @@
     "description": "Notification message that the password was successfully reset.",
     "missing": false,
     "obsolete": false
+  },
+  "join_conference": {
+    "translation": "+ Mitmachen",
+    "defaultMessage": "+ Join",
+    "description": "Call to action to join a conference call",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/en.json

@@ -1648,11 +1648,25 @@
     "missing": false,
     "obsolete": false
   },
+  "calls_conference": {
+    "translation": "Conference call",
+    "defaultMessage": "Conference call",
+    "description": "Conference call label",
+    "missing": false,
+    "obsolete": false
+  },
   "password_reset_success": {
     "translation": "Password reset successfully",
     "defaultMessage": "Password reset successfully",
     "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

@@ -1628,17 +1628,17 @@
     "obsolete": false
   },
   "pin_message": {
-    "translation": "",
+    "translation": "Fijar",
     "defaultMessage": "Pin",
     "description": "Menu item [Pin] for pinning message to the top.",
-    "missing": true,
+    "missing": false,
     "obsolete": false
   },
   "unpin_message": {
-    "translation": "",
+    "translation": "Desanclar",
     "defaultMessage": "Unpin",
     "description": "Menu item [Unpin] for un-pinning the message.",
-    "missing": true,
+    "missing": false,
     "obsolete": false
   },
   "failed_to_init_audio": {
@@ -1648,11 +1648,25 @@
     "missing": false,
     "obsolete": false
   },
+  "calls_conference": {
+    "translation": "Conferencia",
+    "defaultMessage": "Conference call",
+    "description": "Conference call label",
+    "missing": false,
+    "obsolete": false
+  },
   "password_reset_success": {
     "translation": "Restablecimiento de contraseña con éxito",
     "defaultMessage": "Password reset successfully",
     "description": "Notification message that the password was successfully reset.",
     "missing": false,
     "obsolete": false
+  },
+  "join_conference": {
+    "translation": "+ Unirse",
+    "defaultMessage": "+ Join",
+    "description": "Call to action to join a conference call",
+    "missing": false,
+    "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"
@@ -370,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

@@ -1628,17 +1628,17 @@
     "obsolete": false
   },
   "pin_message": {
-    "translation": "",
+    "translation": "Épingler",
     "defaultMessage": "Pin",
     "description": "Menu item [Pin] for pinning message to the top.",
-    "missing": true,
+    "missing": false,
     "obsolete": false
   },
   "unpin_message": {
-    "translation": "",
+    "translation": "Détacher",
     "defaultMessage": "Unpin",
     "description": "Menu item [Unpin] for un-pinning the message.",
-    "missing": true,
+    "missing": false,
     "obsolete": false
   },
   "failed_to_init_audio": {
@@ -1648,11 +1648,25 @@
     "missing": false,
     "obsolete": false
   },
+  "calls_conference": {
+    "translation": "Conférence téléphonique",
+    "defaultMessage": "Conference call",
+    "description": "Conference call label",
+    "missing": false,
+    "obsolete": false
+  },
   "password_reset_success": {
     "translation": "Mot de passe réinitialisé avec succès",
     "defaultMessage": "Password reset successfully",
     "description": "Notification message that the password was successfully reset.",
     "missing": false,
     "obsolete": false
+  },
+  "join_conference": {
+    "translation": "+ Rejoindre",
+    "defaultMessage": "+ Join",
+    "description": "Call to action to join a conference call",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/ko.json

@@ -1628,17 +1628,17 @@
     "obsolete": false
   },
   "pin_message": {
-    "translation": "",
+    "translation": "고정",
     "defaultMessage": "Pin",
     "description": "Menu item [Pin] for pinning message to the top.",
-    "missing": true,
+    "missing": false,
     "obsolete": false
   },
   "unpin_message": {
-    "translation": "",
+    "translation": "고정 해제",
     "defaultMessage": "Unpin",
     "description": "Menu item [Unpin] for un-pinning the message.",
-    "missing": true,
+    "missing": false,
     "obsolete": false
   },
   "failed_to_init_audio": {
@@ -1648,11 +1648,25 @@
     "missing": false,
     "obsolete": false
   },
+  "calls_conference": {
+    "translation": "전화 회의",
+    "defaultMessage": "Conference call",
+    "description": "Conference call label",
+    "missing": false,
+    "obsolete": false
+  },
   "password_reset_success": {
     "translation": "비밀번호 재설정 성공",
     "defaultMessage": "Password reset successfully",
     "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": false,
+    "obsolete": false
   }
 }

src/i18n/ro.json

@@ -1628,17 +1628,17 @@
     "obsolete": false
   },
   "pin_message": {
-    "translation": "",
+    "translation": "Fixați",
     "defaultMessage": "Pin",
     "description": "Menu item [Pin] for pinning message to the top.",
-    "missing": true,
+    "missing": false,
     "obsolete": false
   },
   "unpin_message": {
-    "translation": "",
+    "translation": "Anulați fixarea",
     "defaultMessage": "Unpin",
     "description": "Menu item [Unpin] for un-pinning the message.",
-    "missing": true,
+    "missing": false,
     "obsolete": false
   },
   "failed_to_init_audio": {
@@ -1648,11 +1648,25 @@
     "missing": false,
     "obsolete": false
   },
+  "calls_conference": {
+    "translation": "Apel de conferinta",
+    "defaultMessage": "Conference call",
+    "description": "Conference call label",
+    "missing": false,
+    "obsolete": false
+  },
   "password_reset_success": {
     "translation": "Resetarea parolei cu succes",
     "defaultMessage": "Password reset successfully",
     "description": "Notification message that the password was successfully reset.",
     "missing": false,
     "obsolete": false
+  },
+  "join_conference": {
+    "translation": "+ Participa",
+    "defaultMessage": "+ Join",
+    "description": "Call to action to join a conference call",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/ru.json

@@ -1628,17 +1628,17 @@
     "obsolete": false
   },
   "pin_message": {
-    "translation": "",
+    "translation": "Закрепить",
     "defaultMessage": "Pin",
     "description": "Menu item [Pin] for pinning message to the top.",
-    "missing": true,
+    "missing": false,
     "obsolete": false
   },
   "unpin_message": {
-    "translation": "",
+    "translation": "Открепить",
     "defaultMessage": "Unpin",
     "description": "Menu item [Unpin] for un-pinning the message.",
-    "missing": true,
+    "missing": false,
     "obsolete": false
   },
   "failed_to_init_audio": {
@@ -1648,11 +1648,25 @@
     "missing": false,
     "obsolete": false
   },
+  "calls_conference": {
+    "translation": "Групповой звонок",
+    "defaultMessage": "Conference call",
+    "description": "Conference call label",
+    "missing": false,
+    "obsolete": false
+  },
   "password_reset_success": {
     "translation": "Пароль успешно изменен",
     "defaultMessage": "Password reset successfully",
     "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": false,
+    "obsolete": false
   }
 }

src/i18n/zh-TW.json

@@ -1628,17 +1628,17 @@
     "obsolete": false
   },
   "pin_message": {
-    "translation": "",
+    "translation": "置頂消息",
     "defaultMessage": "Pin",
     "description": "Menu item [Pin] for pinning message to the top.",
-    "missing": true,
+    "missing": false,
     "obsolete": false
   },
   "unpin_message": {
-    "translation": "",
+    "translation": "取消置頂消息",
     "defaultMessage": "Unpin",
     "description": "Menu item [Unpin] for un-pinning the message.",
-    "missing": true,
+    "missing": false,
     "obsolete": false
   },
   "failed_to_init_audio": {
@@ -1648,11 +1648,25 @@
     "missing": false,
     "obsolete": false
   },
+  "calls_conference": {
+    "translation": "電話會議",
+    "defaultMessage": "Conference call",
+    "description": "Conference call label",
+    "missing": false,
+    "obsolete": false
+  },
   "password_reset_success": {
     "translation": "密碼重置成功",
     "defaultMessage": "Password reset successfully",
     "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": false,
+    "obsolete": false
   }
 }

src/i18n/zh.json

@@ -1628,17 +1628,17 @@
     "obsolete": false
   },
   "pin_message": {
-    "translation": "",
+    "translation": "置顶消息",
     "defaultMessage": "Pin",
     "description": "Menu item [Pin] for pinning message to the top.",
-    "missing": true,
+    "missing": false,
     "obsolete": false
   },
   "unpin_message": {
-    "translation": "",
+    "translation": "取消置顶消息",
     "defaultMessage": "Unpin",
     "description": "Menu item [Unpin] for un-pinning the message.",
-    "missing": true,
+    "missing": false,
     "obsolete": false
   },
   "failed_to_init_audio": {
@@ -1648,11 +1648,25 @@
     "missing": false,
     "obsolete": false
   },
+  "calls_conference": {
+    "translation": "电话会议",
+    "defaultMessage": "Conference call",
+    "description": "Conference call label",
+    "missing": false,
+    "obsolete": false
+  },
   "password_reset_success": {
     "translation": "密码重置成功",
     "defaultMessage": "Password reset successfully",
     "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": false,
+    "obsolete": false
   }
 }

src/lib/formatters.js

@@ -136,6 +136,8 @@ export function fullFormatter(style, data, values, key, stack) {
         attr.callState = data.state;
         attr.incoming = data.incoming;
         attr.duration = data.duration;
+        attr.vc = data.vc;
+        attr.onCallJoin = this.onCallJoin;
       }
       break;
     case 'VD':
@@ -208,7 +210,7 @@ function handleImageData(el, data, attr) {
   return el;
 }
 
-// Additional processing of image data.
+// Additional processing of attached video data.
 function handleVideoData(el, data, attr) {
   if (!data) {
     attr.src = 'img/broken_video.png';
@@ -239,7 +241,7 @@ function handleVideoData(el, data, attr) {
     }
     el = InlineVideo;
   } else {
-    // Use custom element instead of <img>.
+    // Use custom element instead of <img> or <video>.
     el = UploadingImage;
   }
 

src/version.js

@@ -1,3 +1,3 @@
 // This is a generated file. Don't edit.
 
-export const PACKAGE_VERSION = "0.23.0-rc1";
+export const PACKAGE_VERSION = "0.23.0-rc2";

src/views/messages-view.jsx

@@ -19,6 +19,7 @@ import LogoView from './logo-view.jsx';
 import MetaMessage from '../widgets/meta-message.jsx';
 import PinnedMessages from '../widgets/pinned-messages.jsx';
 import SendMessage from '../widgets/send-message.jsx';
+import VCPanel from '../widgets/vc-panel.jsx';
 import VideoPreview from '../widgets/video-preview.jsx';
 
 import { DEFAULT_P2P_ACCESS_MODE, EDIT_PREVIEW_LENGTH, IMAGE_PREVIEW_DIM, IMMEDIATE_P2P_SUBSCRIPTION,
@@ -1452,23 +1453,45 @@ class MessagesView extends React.Component {
             onSendMessage={this.sendFileAttachment} />
         );
       } else if (this.state.rtcPanel) {
-        component2 = (
+        // P2P call.
-          <CallPanel
+        if (Tinode.isP2PTopicName(this.state.rtcPanel)) {
-            topic={this.state.topic}
+          component2 = (
-            seq={this.props.callSeq}
+            <CallPanel
-            callState={this.props.callState}
+              topic={this.state.topic}
-            callAudioOnly={this.props.callAudioOnly}
+              seq={this.props.callSeq}
-            tinode={this.props.tinode}
+              callState={this.props.callState}
-            title={this.state.title}
+              callAudioOnly={this.props.callAudioOnly}
-            avatar={this.state.avatar || true}
+              tinode={this.props.tinode}
+              title={this.state.title}
+              avatar={this.state.avatar || true}
 
-            onError={this.props.onError}
+              onError={this.props.onError}
-            onHangup={this.handleCallHangup}
+              onHangup={this.handleCallHangup}
-            onInvite={this.props.onCallInvite}
+              onInvite={this.props.onCallInvite}
-            onSendOffer={this.props.onCallSendOffer}
+              onSendOffer={this.props.onCallSendOffer}
-            onIceCandidate={this.props.onCallIceCandidate}
+              onIceCandidate={this.props.onCallIceCandidate}
-            onSendAnswer={this.props.onCallSendAnswer} />
+              onSendAnswer={this.props.onCallSendAnswer} />
-        );
+          );
+        } else {
+          // Video conference or stream.
+          component2 = (
+            <VCPanel
+              topic={this.state.topic}
+              seq={this.props.callSeq}
+              callState={this.props.callState}
+              callAudioOnly={this.props.callAudioOnly}
+              tinode={this.props.tinode}
+              title={this.state.title}
+              avatar={this.state.avatar || true}
+              myUid={this.props.myUserId}
+              viewportWidth={this.props.viewportWidth}
+
+              onError={this.props.onError}
+              onHangup={this.handleCallHangup}
+              onCreateCall={this.props.onCallInvite}
+              onJoin={this.props.onVCJoin} />
+          );
+        }
       } else {
         const topic = this.props.tinode.getTopic(this.state.topic);
         const isChannel = topic.isChannelType();
@@ -1549,6 +1572,7 @@ class MessagesView extends React.Component {
             messageNodes.push(
               <ChatMessage
                 tinode={this.props.tinode}
+                topic={this.state.topic}
                 content={msg.content}
                 mimeType={msg.head && msg.head.mime}
                 replyToSeq={replyToSeq}
@@ -1575,6 +1599,7 @@ class MessagesView extends React.Component {
                 pickReply={this.handlePickReply}
                 editMessage={this.handleEditMessage}
                 onQuoteClick={this.handleQuoteClick}
+                onAcceptCall={this.props.onAcceptCall}
                 onError={this.props.onError}
                 ref={ref}
                 key={msg.seq} />
@@ -1606,7 +1631,7 @@ class MessagesView extends React.Component {
         let messagesComponent = (
           <>
             <div id="messages-container">
-              <button className={'action-button' + (this.state.showGoToLastButton ? '' : ' hidden')}
+              <button id="go-to-latest" className={'action-button' + (this.state.showGoToLastButton ? '' : ' hidden')}
                 onClick={this.goToLatestMessage}>
                 <i className="material-icons">arrow_downward</i>
               </button>

src/views/tinode-web.jsx

@@ -181,6 +181,7 @@ class TinodeWeb extends React.Component {
     this.handleCallSendOffer = this.handleCallSendOffer.bind(this);
     this.handleCallIceCandidate = this.handleCallIceCandidate.bind(this);
     this.handleCallSendAnswer = this.handleCallSendAnswer.bind(this);
+    this.handleVCCallJoin = this.handleVCCallJoin.bind(this);
 
     this.handleCallAccept = this.handleCallAccept.bind(this);
 
@@ -1598,7 +1599,7 @@ class TinodeWeb extends React.Component {
     }
 
     let muted = false, blocked = false, self_blocked = false, subscribed = false, deleter = false,
-      archived = false, webrtc = false;
+      archived = false, webrtc = false, writer = false;
     if (topic) {
       subscribed = topic.isSubscribed();
       archived = topic.isArchived();
@@ -1609,10 +1610,12 @@ class TinodeWeb extends React.Component {
         blocked = !acs.isJoiner();
         self_blocked = !acs.isJoiner('want');
         deleter = acs.isDeleter();
+        writer = acs.isWriter();
       }
     }
 
-    webrtc = !!this.tinode.getServerParam('iceServers');
+    webrtc = writer && !!this.tinode.getServerParam('iceServers');
+    const mediaServerAvailable = !!this.tinode.getServerParam('vcEndpoint');
 
     return [
       subscribed ? {
@@ -1623,8 +1626,9 @@ class TinodeWeb extends React.Component {
         title: this.props.intl.formatMessage(messages.menu_item_audio_call),
         handler: this.handleStartAudioCall
       } : null,
-      subscribed && Tinode.isP2PTopicName(topicName) && webrtc ? {
+      subscribed && webrtc ? {
         title: this.props.intl.formatMessage(messages.menu_item_video_call),
+        disabled: Tinode.isGroupTopicName(topicName) && !mediaServerAvailable,
         handler: this.handleStartVideoCall
       } : null,
       subscribed ? 'messages_clear' : null,
@@ -1782,13 +1786,19 @@ class TinodeWeb extends React.Component {
     switch (callState) {
       case CALL_STATE_OUTGOING_INITATED:
         const head = { webrtc: CALL_HEAD_STARTED, aonly: !!audioOnly };
-        this.handleSendMessage(Drafty.videoCall(audioOnly), undefined, undefined, head)
+        const msg = Drafty.videoCall(audioOnly);
+        if (Tinode.isGroupTopicName(callTopic)) {
+          // Video conference.
+          head.vc = true;
+        }
+        return this.handleSendMessage(msg, undefined, undefined, head)
           .then(ctrl => {
             if (ctrl.code < 200 || ctrl.code >= 300 || !ctrl.params || !ctrl.params.seq) {
               this.handleCallClose();
-              return;
+              return ctrl;
             }
             this.setState({callSeq: ctrl.params['seq']});
+            return ctrl
           });
         break;
       case CALL_STATE_IN_PROGRESS:
@@ -1846,6 +1856,15 @@ class TinodeWeb extends React.Component {
     topic.videoCall('answer', callSeq, sdp);
   }
 
+  handleVCCallJoin(callTopic, callSeq) {
+    const topic = this.tinode.getTopic(callTopic);
+    if (!topic) {
+      return;
+    }
+
+    topic.videoCall('vc-join', callSeq);
+  }
+
   handleCallClose() {
     if (this.callTimeoutTimer) {
       clearTimeout(this.callTimeoutTimer);
@@ -1857,16 +1876,21 @@ class TinodeWeb extends React.Component {
     });
   }
 
-  handleCallAccept(topicName) {
+  handleCallAccept(topicName, setCallTopic, callSeq) {
     const topic = this.tinode.getTopic(topicName);
     if (!topic) {
       return;
     }
     if (topic.isSubscribed()) {
-      this.handleTopicSelected(this.state.callTopic);
+      this.handleTopicSelected(setCallTopic ? topicName : this.state.callTopic);
-      this.setState({
+      const upd = {
         callState: CALL_STATE_IN_PROGRESS
-      });
+      }
+      if (setCallTopic) {
+        upd.callTopic = topicName;
+        upd.callSeq = callSeq;
+      }
+      this.setState(upd);
     } else {
       // We need to switch and subscribe to callTopic first.
       this.setState({
@@ -1904,7 +1928,7 @@ class TinodeWeb extends React.Component {
   }
 
   handleDataMessage(data) {
-    if (data.head && data.head.webrtc && data.head.webrtc == CALL_HEAD_STARTED) {
+    if (data.head && data.head.webrtc && data.head.webrtc == CALL_HEAD_STARTED && Tinode.isP2PTopicName(data.topic)) {
       // If it's a video call invite message.
       // See if we need to display incoming call UI.
       const topic = this.tinode.getTopic(data.topic);
@@ -2099,11 +2123,13 @@ class TinodeWeb extends React.Component {
             callState={this.state.callState}
             callAudioOnly={this.state.callAudioOnly}
             onCallHangup={this.handleCallHangup}
+            onAcceptCall={this.handleCallAccept}
 
             onCallInvite={this.handleCallInvite}
             onCallSendOffer={this.handleCallSendOffer}
             onCallIceCandidate={this.handleCallIceCandidate}
             onCallSendAnswer={this.handleCallSendAnswer}
+            onVCJoin={this.handleVCCallJoin}
 
             errorText={this.state.errorText}
             errorLevel={this.state.errorLevel}

src/widgets/call-message.jsx

@@ -7,11 +7,23 @@ import { secondsToTime } from '../lib/strformat.js';
 
 export default class CallMessage extends React.PureComponent {
   render() {
+    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 ?
       (isCallDropped ? 'call_missed' : 'call_received') :
       (isCallDropped ? 'call_missed_outgoing' : 'call_made');
+    const title = this.props.vc ?
+      <FormattedMessage id="calls_conference" defaultMessage="Conference call" description="Conference call label" /> :
+      this.props.incoming ?
+          <FormattedMessage id="calls_incoming" defaultMessage="Incoming call" description="Incoming call label" /> :
+          <FormattedMessage id="calls_outgoing" defaultMessage="Outgoing call" description="Outgoing call label" />;
     let duration;
     if (isCallDropped) {
       switch (this.props.callState) {
@@ -33,14 +45,17 @@ export default class CallMessage extends React.PureComponent {
     } else {
       duration = <span>{secondsToTime(this.props.duration / 1000)}</span>;
     }
+    const allowJoin = this.props.vc && this.props.callState == 'started';
     return <div className="call-message">
-      <div><i className="material-icons big gray">call</i></div>
+      <div><i className="material-icons big gray">{bigIcon}</i></div>
       <div className="flex-column narrow">
-        <div>{this.props.incoming ?
+        <div>{title}</div>
-          <FormattedMessage id="calls_incoming" defaultMessage="Incoming call" description="Incoming call label" /> :
-          <FormattedMessage id="calls_outgoing" defaultMessage="Outgoing call" description="Outgoing call label" />
-        }</div>
         <div className="duration"><i className={successClass}>{callIcon}</i> {duration}</div>
+        {allowJoin ?
+          <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/chat-message.jsx

@@ -29,6 +29,7 @@ class BaseChatMessage extends React.PureComponent {
     this.handleContextClick = this.handleContextClick.bind(this);
     this.handleCancelUpload = this.handleCancelUpload.bind(this);
     this.handleQuoteClick = this.handleQuoteClick.bind(this);
+    this.handleCallJoin = this.handleCallJoin.bind(this);
 
     this.formatterContext = {
       formatMessage: props.intl.formatMessage.bind(props.intl),
@@ -38,7 +39,8 @@ class BaseChatMessage extends React.PureComponent {
       onImagePreview: this.handleExpandImage,
       onVideoPreview: this.handlePlayVideo,
       onFormButtonClick: this.handleFormButtonClick,
-      onQuoteClick: this.handleQuoteClick
+      onQuoteClick: this.handleQuoteClick,
+      onCallJoin: this.handleCallJoin
     };
   }
 
@@ -149,6 +151,10 @@ class BaseChatMessage extends React.PureComponent {
     }
   }
 
+  handleCallJoin() {
+    this.props.onAcceptCall(this.props.topic, true, this.props.seq);
+  }
+
   render() {
     const sideClass = this.props.sequence + ' ' + (this.props.response ? 'left' : 'right');
     const bubbleClass = (this.props.sequence == 'single' || this.props.sequence == 'last') ? 'bubble tip' : 'bubble';

src/widgets/context-menu.jsx

@@ -493,11 +493,12 @@ class ContextMenu extends React.Component {
         item = this.MenuItems[item];
       }
       if (item && item.title) {
+        const className = item.disabled ? 'disabled' : undefined;
         menu.push(
           item.title == '-' ?
             <li className="separator" key={count} />
             :
-            <li onClick={this.handleClick} data-id={count} key={count}>{item.title}</li>
+            <li className={className} onClick={this.handleClick} data-id={count} key={count}>{item.title}</li>
         );
       }
       count++;

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

@@ -0,0 +1,97 @@
+// Video conference carousel item.
+import React from 'react';
+
+import LetterTile from './letter-tile.jsx';
+
+/**
+ * Props:
+ *  - cameraPub
+ *  - micPub
+ *  - isSpeaking
+ *  - tinode
+ *  - photo
+ *  - userId
+ *  - name
+ */
+export default class VCCarouselItem extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.handleVideoRefChange = this.handleVideoRefChange.bind(this);
+    this.handleAudioRefChange = this.handleAudioRefChange.bind(this);
+
+    this.videoRef = null;
+    this.audioRef = null;
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.videoRef && !this.videoRef.srcObject && this.props.cameraPub && this.props.cameraPub.videoTrack) {
+      this.props.cameraPub.videoTrack.attach(this.videoRef);
+    }
+    if (this.audioRef && !this.audioRef.srcObject && this.props.micPub && this.props.micPub.audioTrack) {
+      this.props.micPub.audioTrack.attach(this.audioRef);
+    }
+  }
+
+  handleVideoRefChange(node) {
+    if (!node) {
+      return;
+    }
+
+    this.videoRef = node;
+
+    // Attach video track to video element.
+    const cameraPub = this.props.cameraPub;
+    const cameraEnabled = cameraPub && cameraPub.isSubscribed && !cameraPub.isMuted;
+    if (cameraEnabled && cameraPub.videoTrack) {
+      cameraPub.videoTrack.attach(node);
+    }
+  }
+
+  handleAudioRefChange(node) {
+    if (!node) {
+      return;
+    }
+
+    this.audioRef = node;
+
+    // Attach audio track to audio element.
+    const micPub = this.props.micPub;
+    const micEnabled = micPub && micPub.isSubscribed && !micPub.isMuted;
+    if (micEnabled && micPub.audioTrack) {
+      micPub.audioTrack.attach(node);
+    }
+  }
+
+  render() {
+    let classes = 'call-party carousel-item';
+    if (this.props.isSpeaking) {
+      classes += ' call-party-speaking';
+    }
+
+    const micPub = this.props.micPub;
+    const cameraPub = this.props.cameraPub;
+    return (
+      <div className={classes}>
+        <video ref={this.handleVideoRefChange}></video>
+        <audio ref={this.handleAudioRefChange}></audio>
+        {micPub && micPub.isMuted ?
+          <i className="material-icons muted">mic_off</i>
+          : null
+        }
+        {cameraPub && cameraPub.isMuted ?
+          <div className="avatar-box">
+            <LetterTile
+              tinode={this.props.tinode}
+              avatar={this.props.photo || true}
+              topic={this.props.userId}
+              title={this.props.name} />
+          </div>
+          : null}
+        <div className="caller-name inactive">
+          {this.props.name}
+        </div>
+      </div>
+    );
+  }
+}

src/widgets/vc-carousel.jsx

@@ -0,0 +1,104 @@
+import React from 'react';
+
+import { Track } from 'livekit-client';
+
+import VCCarouselItem from './vc-carousel-item.jsx';
+
+import { VC_CAROUSEL_ITEM_GAP } from '../constants.js';
+
+export default class VCCarousel extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      prevVisible: false,
+      nextVisible: false
+    };
+
+    this.handleScrollReference = this.handleScrollReference.bind(this);
+    this.handleScrollEvent = this.handleScrollEvent.bind(this);
+    this.handleScrollClick = this.handleScrollClick.bind(this);
+
+    this.carouselRef = null;
+    this.contentRef = React.createRef();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.carouselRef && this.props.viewportWidth != prevProps.viewportWidth) {
+      this.handleScrollEvent({target: this.carouselRef});
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.carouselRef) {
+      this.carouselRef.removeEventListener('scroll', this.handleScrollEvent);
+    }
+  }
+
+  // Don't use React.createRef as the ref.current is not available in componentDidMount in this component.
+  handleScrollReference(node) {
+    if (node) {
+      this.carouselRef = node;
+      this.carouselRef.addEventListener('scroll', this.handleScrollEvent);
+      this.handleScrollEvent({target: this.carouselRef});
+    }
+  }
+
+  // Get older messages and show/hide [go to latest message] button.
+  handleScrollEvent(event) {
+    this.setState({
+      // Show [prev] / [next] as appropriate.
+      prevVisible: event.target.scrollLeft > VC_CAROUSEL_ITEM_GAP,
+      nextVisible: event.target.scrollWidth - event.target.scrollLeft - event.target.offsetWidth > VC_CAROUSEL_ITEM_GAP
+    });
+  }
+
+  handleScrollClick(next) {
+    // this.carouselRef.offsetWidth - is the width of the visible window.
+    const val = this.carouselRef.offsetWidth + VC_CAROUSEL_ITEM_GAP;
+    this.carouselRef.scrollBy(next ? val : -val, 0);
+  }
+
+  render() {
+    let peers = [];
+    if (this.props.participants) {
+      Object.entries(this.props.participants).forEach(([identity, party], i) => {
+        const participant = party.participant;
+        const cameraPub = participant.getTrack(Track.Source.Camera);
+        const micPub = participant.getTrack(Track.Source.Microphone);
+
+        peers.push(<VCCarouselItem
+          tinode={this.props.tinode}
+          isSpeaking={participant.isSpeaking}
+          cameraPub={cameraPub ? cameraPub : null}
+          micPub={micPub ? micPub : null}
+          name={party.name}
+          userId={identity}
+          photo={party.photo}
+          key={i}
+        />);
+      });
+    }
+    return (
+      <div id="carousel-wrapper">
+        <div id="carousel" ref={this.handleScrollReference}>
+          <div id="carousel-content" ref={this.contentRef}>
+            {peers}
+          </div>
+        </div>
+        {this.state.prevVisible ?
+          <button id="carousel-prev" className="action-button" onClick={_ => this.handleScrollClick(false)}>
+            <i className="material-icons">navigate_before</i>
+          </button>
+          :
+          null}
+        {this.state.nextVisible ?
+          <button id="carousel-next" className="action-button" onClick={_ => this.handleScrollClick(true)}>
+            <i className="material-icons">navigate_next</i>
+          </button>
+          :
+          null}
+      </div>
+    );
+  }
+}

src/widgets/vc-panel.jsx

@@ -0,0 +1,412 @@
+// Video conference or broadcast: local and/or peer viewports and controls.
+import React from 'react';
+import { FormattedMessage, injectIntl } from 'react-intl';
+
+import {
+  LocalVideoTrack,
+  MediaDeviceFailure,
+  ParticipantEvent,
+  RemoteParticipant,
+  Room,
+  RoomEvent,
+  Track,
+  VideoPresets
+} from 'livekit-client';
+
+import LetterTile from './letter-tile.jsx';
+import VCCarousel from './vc-carousel.jsx';
+import { makeImageUrl } from '../lib/blob-helpers.js';
+
+import { MAX_PEER_TITLE_LENGTH } from '../config.js';
+import { CALL_STATE_OUTGOING_INITATED } from '../constants.js';
+
+import { clipStr } from '../lib/utils.js'
+
+class VCPanel extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      room: undefined,
+
+      participants: {},
+      activeSpeaker: undefined,
+
+      previousOnInfo: undefined,
+    };
+
+    this.isOutgoingCall = props.callState == CALL_STATE_OUTGOING_INITATED;
+    const topic = this.props.tinode.getTopic(this.props.topic);
+    this.isBroadcast = topic && topic.chan;
+
+    this.localRef = React.createRef();
+    this.remoteRef = React.createRef();
+
+    this.onInfo = this.onInfo.bind(this);
+    this.start = this.start.bind(this);
+    this.stop = this.stop.bind(this);
+
+    this.reportError = this.reportError.bind(this);
+
+    this.handleCloseClick = this.handleCloseClick.bind(this);
+    this.handleToggleCameraClick = this.handleToggleCameraClick.bind(this);
+    this.handleToggleMicClick = this.handleToggleMicClick.bind(this);
+
+    this.handleRemoteHangup = this.handleRemoteHangup.bind(this);
+
+    this.handleTrackSubscribed = this.handleTrackSubscribed.bind(this);
+    this.handleTrackUnsubscribed = this.handleTrackUnsubscribed.bind(this);
+    this.handleActiveSpeakerChange = this.handleActiveSpeakerChange.bind(this);
+    this.handleDisconnect = this.handleDisconnect.bind(this);
+    this.handleLocalTrackUnpublished = this.handleLocalTrackUnpublished.bind(this);
+    this.handleLocalTrackPublished = this.handleLocalTrackPublished.bind(this);
+    this.handleParticipantConnected = this.handleParticipantConnected.bind(this);
+    this.handleParticipantDisconnected = this.handleParticipantDisconnected.bind(this);
+    this.handleData = this.handleData.bind(this);
+    this.handleDevicesChanged = this.handleDevicesChanged.bind(this);
+    this.startRoom = this.startRoom.bind(this);
+  }
+
+  componentDidMount() {
+    const topic = this.props.tinode.getTopic(this.props.topic);
+    this.previousOnInfo = topic.onInfo;
+    topic.onInfo = this.onInfo;
+    this.start();
+  }
+
+  componentWillUnmount() {
+    const topic = this.props.tinode.getTopic(this.props.topic);
+    if (topic) {
+      topic.onInfo = this.previousOnInfo;
+    }
+    this.stop();
+  }
+
+  onInfo(info) {
+    if (info.what != 'call') {
+      return;
+    }
+    switch (info.event) {
+      case 'vc-token':
+        const ts = info.payload;
+        this.setState({token: ts.token});
+        this.startRoom(ts.token);
+        break;
+      case 'hang-up':
+        this.handleRemoteHangup(info);
+        break;
+      default:
+        console.warn("Unknown call event", info.event);
+        break;
+    }
+  }
+
+
+  handleParticipantConnected(participant) {
+    if (!participant) return;
+    if (participant instanceof RemoteParticipant) {
+      participant
+        .on(ParticipantEvent.TrackMuted, pub => {
+          console.log('track was muted', pub.trackSid, participant.identity);
+          this.forceUpdate();  // Redraw carousel.
+        })
+        .on(ParticipantEvent.TrackUnmuted, pub => {
+          console.log('track was unmuted', pub.trackSid, participant.identity);
+          this.forceUpdate();  // Redraw carousel.
+        })
+        .on(ParticipantEvent.IsSpeakingChanged, _ => {
+          this.forceUpdate();  // Redraw carousel.
+        })
+        .on(ParticipantEvent.ConnectionQualityChanged, _ => {
+          this.forceUpdate();  // Redraw carousel.
+        });
+
+      const me = this.props.tinode.getMeTopic();
+      const c = me.getContact(participant.identity);
+
+      const participants = Object.assign({}, this.state.participants);
+      participants[participant.identity] = {
+        name: c && c.public && c.public.fn ? c.public.fn : participant.identity,
+        photo: makeImageUrl(c && c.public ? c.public.photo : null),
+        participant: participant
+      };
+      this.setState({participants: participants});
+    }
+  }
+
+  handleParticipantDisconnected(participant) {
+    const participants = Object.assign({}, this.state.participants);
+    delete participants[participant.identity];
+    this.setState({participants: participants});
+  }
+
+  handleData(msg, participant) {
+    console.log('Data message ', msg, participant);
+  }
+
+  handleTrackSubscribed(track, publication, participant) {
+    if (participant instanceof RemoteParticipant) {
+      // Check if we're presenting a remote video stream.
+      if (this.remoteRef.current && !(this.remoteRef.current.src != '' || this.remoteRef.srcObject)) {
+        track.attach(this.remoteRef.current);
+      }
+    }
+    // Redraw the carousel and remote view.
+    this.forceUpdate();
+  }
+
+  handleTrackUnsubscribed(track, publication, participant) {
+    console.log('handleTrackUnsubscribed', track);
+    // remove tracks from all attached elements
+    track.detach();
+    this.forceUpdate();
+  }
+
+  handleLocalTrackPublished(pub) {
+    console.log('Local track published', pub);
+    const track = pub.track;
+    if ((track instanceof LocalVideoTrack) && this.localRef.current) {
+      const elem = this.localRef.current;
+      track.attach(elem);
+      // flip.
+      elem.style.transform = 'scale(-1, 1)';
+    }
+  }
+
+  handleLocalTrackUnpublished(pub) {
+    const track = pub.track;
+    console.log('handleLocalTrackUnpublished', track);
+    track.detach();
+    // Redraw carousel.
+    this.forceUpdate();
+  }
+
+  handleActiveSpeakerChange(speakers) {
+    console.log('handleActiveSpeakerChange', speakers);
+    speakers.forEach(s => {
+      if (s.isSpeaking) {
+        console.log('Speaking participant ', s);
+
+        // Display speaker in remote peer view.
+        const elem = this.remoteRef.current;
+        const me = this.props.tinode.getMeTopic();
+        const c = me.getContact(s.identity);
+        const name = c && c.public && c.public.fn ? c.public.fn : undefined;
+        this.setState({activeSpeaker: name});
+
+        const cameraPub = s.getTrack(Track.Source.Camera);
+        const cameraEnabled = cameraPub && cameraPub.isSubscribed && !cameraPub.isMuted;
+        if (cameraEnabled && cameraPub.videoTrack) {
+          cameraPub.videoTrack.attach(elem);
+        }
+      }
+    });
+  }
+
+  handleDevicesChanged() {
+    console.log('devices changed');
+    // TODO: implement.
+  }
+
+  handleDisconnect() {
+    console.log('disconnected from room');
+    this.handleCloseClick();
+  }
+
+  startRoom(token) {
+    const roomOpts = {
+      adaptiveStream: true,
+      dynacast: true,
+      publishDefaults: {
+        simulcast: true,
+        videoSimulcastLayers: [VideoPresets.h90, VideoPresets.h216],
+        videoCodec: 'vp8'
+      },
+      videoCaptureDefaults: {
+        resolution: VideoPresets.h720.resolution
+      }
+    };
+
+    const connectOpts = {
+      autoSubscribe: true
+    };
+
+    // creates a new room with options
+    const room = new Room(roomOpts);
+
+    this.setState({room: room});
+
+    const startTime = Date.now();
+    const topic = this.props.tinode.getTopic(this.props.topic);
+    const shouldPublish = this.isOutgoingCall || !this.isBroadcast;
+
+    room
+      .on(RoomEvent.ParticipantConnected, this.handleParticipantConnected)
+      .on(RoomEvent.ParticipantDisconnected, this.handleParticipantDisconnected)
+      .on(RoomEvent.DataReceived, this.handleData)
+      .on(RoomEvent.TrackSubscribed, this.handleTrackSubscribed)
+      .on(RoomEvent.TrackUnsubscribed, this.handleTrackUnsubscribed)
+      .on(RoomEvent.ActiveSpeakersChanged, this.handleActiveSpeakerChange)
+      .on(RoomEvent.Disconnected, this.handleDisconnect)
+      .on(RoomEvent.LocalTrackUnpublished, this.handleLocalTrackUnpublished)
+      .on(RoomEvent.LocalTrackPublished, this.handleLocalTrackPublished)
+
+      .on(RoomEvent.RoomMetadataChanged, metadata => {
+        console.log('VC room new metadata ', metadata);
+      })
+      .on(RoomEvent.MediaDevicesChanged, this.handleDevicesChanged)
+      .on(RoomEvent.AudioPlaybackStatusChanged, e => {
+        // TODO: handle it.
+        console.log('Audio playback status change: ', e);
+      })
+      .on(RoomEvent.MediaDevicesError, e => {
+        const failure = MediaDeviceFailure.getFailure(e);
+        this.reportError(failure);
+      })
+      .on(RoomEvent.ConnectionQualityChanged, (quality, participant) => {
+        const id = participant ? participant.identity : 'nil';
+        console.log('Connection quality changed', id, ' -> ', quality);
+      })
+      .on(RoomEvent.SignalConnected, _ => {
+        const signalConnectionTime = Date.now() - startTime;
+        console.log(`signal connection established in ${signalConnectionTime}ms`);
+        // speed up publishing by starting to publish before it's fully connected
+        // publishing is accepted as soon as signal connection has established
+        if (shouldPublish) {
+          room.localParticipant.enableCameraAndMicrophone();
+          console.log(`tracks published in ${Date.now() - startTime}ms`);
+        }
+      });
+
+    const vcEndpoint = this.props.tinode.getServerParam('vcEndpoint', null);
+    room.connect(vcEndpoint, token, connectOpts).then(_ => {
+      console.log('Connected to VC room', room.name, '. Access token', token);
+
+      room.participants.forEach((participant) => {
+        this.handleParticipantConnected(participant);
+      });
+      this.handleParticipantConnected(room.localParticipant);
+    });
+
+  }
+
+  start() {
+    if (this.state.localStream) {
+      this.props.onError(this.props.intl.formatMessage(messages.already_in_call), 'info');
+      return;
+    }
+    if (this.isOutgoingCall) {
+      this.props.onCreateCall(this.props.topic, this.props.seq, this.props.callState, this.props.callAudioOnly)
+          .then(ctrl => {
+            const token = ctrl.params.token;
+            const seq = ctrl.params.seq;
+            this.setState({callSeq: seq, token: token});
+            this.startRoom(token);
+          });
+    } else {
+      this.props.onJoin(this.props.topic, this.props.seq);
+    }
+  }
+
+  stop() {
+    if (this.state.room) {
+      this.state.room.disconnect();
+    }
+  }
+
+  reportError(err) {
+    this.props.onError(err.message, 'err');
+  }
+
+  // Call disconnected by remote.
+  handleRemoteHangup() {
+    this.handleCloseClick();
+  }
+
+  handleCloseClick() {
+    this.stop();
+    this.props.onHangup(this.props.topic, this.props.seq);
+  }
+
+  handleToggleCameraClick() {
+    if (!this.state.room) return;
+    const enabled = this.state.room.localParticipant.isCameraEnabled;
+    this.state.room.localParticipant.setCameraEnabled(!enabled)
+      .then(_ => this.forceUpdate());
+    this.forceUpdate();
+  }
+
+  handleToggleMicClick() {
+    if (!this.state.room) return;
+    const enabled = this.state.room.localParticipant.isMicrophoneEnabled;
+    this.state.room.localParticipant.setMicrophoneEnabled(!enabled)
+      .then(_ => this.forceUpdate());
+
+    // Make sure we redraw the mute/unmute icons (e.g. mic -> mic_off).
+    this.forceUpdate();
+  }
+
+  render() {
+    const isPublishing = this.isOutgoingCall || !this.isBroadcast;
+    const disabled = !isPublishing || !this.state.room || !this.state.room.localParticipant;
+    const audioIcon = !disabled && this.state.room.localParticipant.isMicrophoneEnabled ? 'mic' : 'mic_off';
+    const videoIcon = !disabled && this.state.room.localParticipant.isCameraEnabled ? 'videocam' : 'videocam_off';
+
+    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)
+
+    return (
+      <div id="video-container">
+        {!this.isBroadcast && Object.keys(this.state.participants).length > 0 ?
+          <VCCarousel
+            viewportWidth={this.props.viewportWidth}
+            tinode={this.props.tinode}
+            participants={this.state.participants} /> :
+          null
+        }
+        <div id="video-container-panel">
+          {isPublishing ?
+            <div className="call-party self" disabled={this.state.audioOnly}>
+              <video ref={this.localRef} autoPlay muted playsInline />
+              <div className="caller-name inactive">
+                <FormattedMessage id="calls_you_label"
+                  defaultMessage="You" description="Shown over the local video screen" />
+              </div>
+            </div> :
+            null }
+          <div className="call-party peer" disabled={!remoteActive}>
+            <video ref={this.remoteRef} autoPlay playsInline />
+            {remoteActive ?
+              <div className="caller-name inactive">{peerTitle}</div>
+              :
+              <div className="caller-card">
+                <div className="avatar-box">
+                  <LetterTile
+                    tinode={this.props.tinode}
+                    avatar={this.props.avatar}
+                    topic={this.props.topic}
+                    title={this.props.title} />
+                </div>
+                <div className="caller-name">{peerTitle}</div>
+              </div>
+            }
+          </div>
+        </div>
+        <div className="controls">
+          <button className="danger" onClick={this.handleCloseClick}>
+            <i className="material-icons">call_end</i>
+          </button>
+          <button className="secondary" onClick={this.handleToggleCameraClick} disabled={disabled}>
+            <i className="material-icons">{videoIcon}</i>
+          </button>
+          <button className="secondary" onClick={this.handleToggleMicClick} disabled={disabled}>
+            <i className="material-icons">{audioIcon}</i>
+          </button>
+        </div>
+      </div>
+    );
+  }
+};
+
+export default injectIntl(VCPanel);

umd/290.prod.js.map

@@ -1 +1 @@
-{"version":3,"file":"290.prod.js","mappings":"2MASA,MAAMA,UAA6BC,IAAAA,cACjCC,YAAYC,GACVC,MAAMD,GAENE,KAAKC,UAAY,GACjB,MAAM,kBAAEC,GAAsBJ,EAAMK,KACpCC,EAAeC,SAAQC,IACPA,EAAGC,KAAKC,MAAM,KACtBH,SAAQI,IACZT,KAAKC,UAAUS,KAAK,CAClBH,KAAME,EAAKE,OACXC,KAAMN,EAAGM,KACTC,MAAMC,EAAAA,EAAAA,IAAUR,EAAGM,MACnBG,KAAMb,EAAkBI,EAAGM,KAAM,CAACI,KAAM,YACxC,GACF,IAGJhB,KAAKC,UAAUgB,MAAK,CAACC,EAAGC,IAAMD,EAAEH,KAAKK,cAAcD,EAAEJ,OACvD,CAEAM,oBACMrB,KAAKsB,aACPtB,KAAKsB,YAAYC,eAAe,CAACC,MAAO,SAAUC,OAAQ,WAE9D,CAEAC,SACE,MAAMzB,EAAY,GACZ0B,EAAW3B,KAAKF,MAAM6B,UAAY,KAYxC,OAXA3B,KAAKC,UAAUI,SAAQ,CAACuB,EAAGC,KACzB,MAAMC,EAASF,EAAEhB,MAAQe,EAAW,YAAc,GAClD1B,EAAUS,KAAKd,IAAAA,cAAA,MAAImC,UAAWD,EAAOE,IAAKH,EACxCI,IAAKA,IAAYL,EAAEhB,MAAQe,IAAW3B,KAAKsB,YAAcW,EAAG,EAC5DC,QAASC,GAAKnC,KAAKF,MAAMsC,SAASR,EAAEhB,KAAMgB,EAAErB,OAC5CX,IAAAA,cAAA,QAAMmC,UAAU,gBAAgBH,EAAEf,MAClCjB,IAAAA,cAAA,QAAMmC,UAAU,WAAU,IAAOH,EAAEb,MACnCnB,IAAAA,cAAA,QAAMmC,UAAU,aAAY,KAAQH,EAAErB,OAClC,IAINX,IAAAA,cAAA,OAAKmC,UAAU,mBAAmBD,MAAO,CAACO,OAAQ,UAChDzC,IAAAA,cAAA,MAAImC,UAAU,0BACX9B,GAIT,EAGF,SAAeqC,EAAAA,EAAAA,YAAW3C,E","sources":["webpack://tinode-webapp/./src/widgets/phone-country-selector.jsx"],"sourcesContent":["// Selector for country dialing code.\n\nimport React from 'react';\nimport { injectIntl } from 'react-intl';\n\nimport * as dcodes from '../dcodes.json';\n\nimport { flagEmoji } from '../lib/strformat';\n\nclass PhoneCountrySelector extends React.PureComponent {\n  constructor(props) {\n    super(props);\n\n    this.countries = [];\n    const { formatDisplayName } = props.intl;\n    dcodes.default.forEach(dc => {\n      const parts = dc.dial.split(',');\n      parts.forEach(part => {\n        this.countries.push({\n          dial: part.trim(),\n          code: dc.code,\n          flag: flagEmoji(dc.code),\n          name: formatDisplayName(dc.code, {type: 'region'})\n        });\n      });\n    });\n\n    this.countries.sort((a, b) => a.name.localeCompare(b.name));\n  }\n\n  componentDidMount() {\n    if (this.selectedRef) {\n      this.selectedRef.scrollIntoView({block: 'center', inline: 'nearest'});\n    }\n  }\n\n  render() {\n    const countries = [];\n    const selected = this.props.selected || 'US';\n    this.countries.forEach((c, idx) => {\n      const style = (c.code == selected ? 'selected ' : '');\n      countries.push(<li className={style} key={idx}\n        ref={ref => {if (c.code == selected) {this.selectedRef = ref}}}\n        onClick={_ => this.props.onSubmit(c.code, c.dial)}>\n        <span className=\"country-flag\">{c.flag}</span>\n        <span className=\"country\">&nbsp;{c.name}</span>\n        <span className=\"dial-code\">&nbsp;+{c.dial}</span>\n      </li>);\n    });\n\n    return (\n      <div className=\"scrollable-panel\" style={{height: '30rem'}}>\n        <ul className=\"phone-country-selector\">\n          {countries}\n        </ul>\n      </div>\n    );\n  }\n}\n\nexport default injectIntl(PhoneCountrySelector);\n"],"names":["PhoneCountrySelector","React","constructor","props","super","this","countries","formatDisplayName","intl","dcodes","forEach","dc","dial","split","part","push","trim","code","flag","flagEmoji","name","type","sort","a","b","localeCompare","componentDidMount","selectedRef","scrollIntoView","block","inline","render","selected","c","idx","style","className","key","ref","onClick","_","onSubmit","height","injectIntl"],"sourceRoot":""}
+{"version":3,"file":"290.prod.js","mappings":"2MASA,MAAMA,UAA6BC,IAAAA,cACjCC,YAAYC,GACVC,MAAMD,GAENE,KAAKC,UAAY,GACjB,MAAM,kBAAEC,GAAsBJ,EAAMK,KACpCC,EAAAA,SAAuBC,IACPA,EAAGC,KAAKC,MAAM,KACtBC,SAAQC,IACZT,KAAKC,UAAUS,KAAK,CAClBJ,KAAMG,EAAKE,OACXC,KAAMP,EAAGO,KACTC,MAAMC,EAAAA,EAAAA,IAAUT,EAAGO,MACnBG,KAAMb,EAAkBG,EAAGO,KAAM,CAACI,KAAM,YACxC,GACF,IAGJhB,KAAKC,UAAUgB,MAAK,CAACC,EAAGC,IAAMD,EAAEH,KAAKK,cAAcD,EAAEJ,OACvD,CAEAM,oBACMrB,KAAKsB,aACPtB,KAAKsB,YAAYC,eAAe,CAACC,MAAO,SAAUC,OAAQ,WAE9D,CAEAC,SACE,MAAMzB,EAAY,GACZ0B,EAAW3B,KAAKF,MAAM6B,UAAY,KAYxC,OAXA3B,KAAKC,UAAUO,SAAQ,CAACoB,EAAGC,KACzB,MAAMC,EAASF,EAAEhB,MAAQe,EAAW,YAAc,GAClD1B,EAAUS,KAAKd,IAAAA,cAAA,MAAImC,UAAWD,EAAOE,IAAKH,EACxCI,IAAKA,IAAYL,EAAEhB,MAAQe,IAAW3B,KAAKsB,YAAcW,EAAG,EAC5DC,QAASC,GAAKnC,KAAKF,MAAMsC,SAASR,EAAEhB,KAAMgB,EAAEtB,OAC5CV,IAAAA,cAAA,QAAMmC,UAAU,gBAAgBH,EAAEf,MAClCjB,IAAAA,cAAA,QAAMmC,UAAU,WAAU,IAAOH,EAAEb,MACnCnB,IAAAA,cAAA,QAAMmC,UAAU,aAAY,KAAQH,EAAEtB,OAClC,IAINV,IAAAA,cAAA,OAAKmC,UAAU,mBAAmBD,MAAO,CAACO,OAAQ,UAChDzC,IAAAA,cAAA,MAAImC,UAAU,0BACX9B,GAIT,EAGF,SAAeqC,EAAAA,EAAAA,YAAW3C,E","sources":["webpack://tinode-webapp/./src/widgets/phone-country-selector.jsx"],"sourcesContent":["// Selector for country dialing code.\n\nimport React from 'react';\nimport { injectIntl } from 'react-intl';\n\nimport * as dcodes from '../dcodes.json';\n\nimport { flagEmoji } from '../lib/strformat';\n\nclass PhoneCountrySelector extends React.PureComponent {\n  constructor(props) {\n    super(props);\n\n    this.countries = [];\n    const { formatDisplayName } = props.intl;\n    dcodes.default.forEach(dc => {\n      const parts = dc.dial.split(',');\n      parts.forEach(part => {\n        this.countries.push({\n          dial: part.trim(),\n          code: dc.code,\n          flag: flagEmoji(dc.code),\n          name: formatDisplayName(dc.code, {type: 'region'})\n        });\n      });\n    });\n\n    this.countries.sort((a, b) => a.name.localeCompare(b.name));\n  }\n\n  componentDidMount() {\n    if (this.selectedRef) {\n      this.selectedRef.scrollIntoView({block: 'center', inline: 'nearest'});\n    }\n  }\n\n  render() {\n    const countries = [];\n    const selected = this.props.selected || 'US';\n    this.countries.forEach((c, idx) => {\n      const style = (c.code == selected ? 'selected ' : '');\n      countries.push(<li className={style} key={idx}\n        ref={ref => {if (c.code == selected) {this.selectedRef = ref}}}\n        onClick={_ => this.props.onSubmit(c.code, c.dial)}>\n        <span className=\"country-flag\">{c.flag}</span>\n        <span className=\"country\">&nbsp;{c.name}</span>\n        <span className=\"dial-code\">&nbsp;+{c.dial}</span>\n      </li>);\n    });\n\n    return (\n      <div className=\"scrollable-panel\" style={{height: '30rem'}}>\n        <ul className=\"phone-country-selector\">\n          {countries}\n        </ul>\n      </div>\n    );\n  }\n}\n\nexport default injectIntl(PhoneCountrySelector);\n"],"names":["PhoneCountrySelector","React","constructor","props","super","this","countries","formatDisplayName","intl","dcodes","dc","dial","split","forEach","part","push","trim","code","flag","flagEmoji","name","type","sort","a","b","localeCompare","componentDidMount","selectedRef","scrollIntoView","block","inline","render","selected","c","idx","style","className","key","ref","onClick","_","onSubmit","height","injectIntl"],"sourceRoot":""}

umd/src_widgets_phone-country-selector_jsx.dev.js.map

@@ -1 +1 @@
-{"version":3,"file":"src_widgets_phone-country-selector_jsx.dev.js","mappings":";;;;;;;;;;;;;;;;;;;AAE0B;AACc;AAEC;AAEI;AAE7C,MAAMI,oBAAoB,SAASJ,4DAAmB,CAAC;EACrDM,WAAWA,CAACC,KAAK,EAAE;IACjB,KAAK,CAACA,KAAK,CAAC;IAEZ,IAAI,CAACC,SAAS,GAAG,EAAE;IACnB,MAAM;MAAEC;IAAkB,CAAC,GAAGF,KAAK,CAACG,IAAI;IACxCR,yCAAc,CAACU,OAAO,CAACC,EAAE,IAAI;MAC3B,MAAMC,KAAK,GAAGD,EAAE,CAACE,IAAI,CAACC,KAAK,CAAC,GAAG,CAAC;MAChCF,KAAK,CAACF,OAAO,CAACK,IAAI,IAAI;QACpB,IAAI,CAACT,SAAS,CAACU,IAAI,CAAC;UAClBH,IAAI,EAAEE,IAAI,CAACE,IAAI,CAAC,CAAC;UACjBC,IAAI,EAAEP,EAAE,CAACO,IAAI;UACbC,IAAI,EAAElB,yDAAS,CAACU,EAAE,CAACO,IAAI,CAAC;UACxBE,IAAI,EAAEb,iBAAiB,CAACI,EAAE,CAACO,IAAI,EAAE;YAACG,IAAI,EAAE;UAAQ,CAAC;QACnD,CAAC,CAAC;MACJ,CAAC,CAAC;IACJ,CAAC,CAAC;IAEF,IAAI,CAACf,SAAS,CAACgB,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC,KAAKD,CAAC,CAACH,IAAI,CAACK,aAAa,CAACD,CAAC,CAACJ,IAAI,CAAC,CAAC;EAC7D;EAEAM,iBAAiBA,CAAA,EAAG;IAClB,IAAI,IAAI,CAACC,WAAW,EAAE;MACpB,IAAI,CAACA,WAAW,CAACC,cAAc,CAAC;QAACC,KAAK,EAAE,QAAQ;QAAEC,MAAM,EAAE;MAAS,CAAC,CAAC;IACvE;EACF;EAEAC,MAAMA,CAAA,EAAG;IACP,MAAMzB,SAAS,GAAG,EAAE;IACpB,MAAM0B,QAAQ,GAAG,IAAI,CAAC3B,KAAK,CAAC2B,QAAQ,IAAI,IAAI;IAC5C,IAAI,CAAC1B,SAAS,CAACI,OAAO,CAAC,CAACuB,CAAC,EAAEC,GAAG,KAAK;MACjC,MAAMC,KAAK,GAAIF,CAAC,CAACf,IAAI,IAAIc,QAAQ,GAAG,WAAW,GAAG,EAAG;MACrD1B,SAAS,CAACU,IAAI,CAAClB,0DAAA;QAAIuC,SAAS,EAAEF,KAAM;QAACG,GAAG,EAAEJ,GAAI;QAC5CK,GAAG,EAAEA,GAAG,IAAI;UAAC,IAAIN,CAAC,CAACf,IAAI,IAAIc,QAAQ,EAAE;YAAC,IAAI,CAACL,WAAW,GAAGY,GAAG;UAAA;QAAC,CAAE;QAC/DC,OAAO,EAAEC,CAAC,IAAI,IAAI,CAACpC,KAAK,CAACqC,QAAQ,CAACT,CAAC,CAACf,IAAI,EAAEe,CAAC,CAACpB,IAAI;MAAE,GAClDf,0DAAA;QAAMuC,SAAS,EAAC;MAAc,GAAEJ,CAAC,CAACd,IAAW,CAAC,EAC9CrB,0DAAA;QAAMuC,SAAS,EAAC;MAAS,GAAC,MAAM,EAACJ,CAAC,CAACb,IAAW,CAAC,EAC/CtB,0DAAA;QAAMuC,SAAS,EAAC;MAAW,GAAC,OAAO,EAACJ,CAAC,CAACpB,IAAW,CAC/C,CAAC,CAAC;IACR,CAAC,CAAC;IAEF,OACEf,0DAAA;MAAKuC,SAAS,EAAC,kBAAkB;MAACF,KAAK,EAAE;QAACQ,MAAM,EAAE;MAAO;IAAE,GACzD7C,0DAAA;MAAIuC,SAAS,EAAC;IAAwB,GACnC/B,SACC,CACD,CAAC;EAEV;AACF;AAEA,iEAAeP,sDAAU,CAACG,oBAAoB,CAAC","sources":["webpack://tinode-webapp/./src/widgets/phone-country-selector.jsx"],"sourcesContent":["// Selector for country dialing code.\n\nimport React from 'react';\nimport { injectIntl } from 'react-intl';\n\nimport * as dcodes from '../dcodes.json';\n\nimport { flagEmoji } from '../lib/strformat';\n\nclass PhoneCountrySelector extends React.PureComponent {\n  constructor(props) {\n    super(props);\n\n    this.countries = [];\n    const { formatDisplayName } = props.intl;\n    dcodes.default.forEach(dc => {\n      const parts = dc.dial.split(',');\n      parts.forEach(part => {\n        this.countries.push({\n          dial: part.trim(),\n          code: dc.code,\n          flag: flagEmoji(dc.code),\n          name: formatDisplayName(dc.code, {type: 'region'})\n        });\n      });\n    });\n\n    this.countries.sort((a, b) => a.name.localeCompare(b.name));\n  }\n\n  componentDidMount() {\n    if (this.selectedRef) {\n      this.selectedRef.scrollIntoView({block: 'center', inline: 'nearest'});\n    }\n  }\n\n  render() {\n    const countries = [];\n    const selected = this.props.selected || 'US';\n    this.countries.forEach((c, idx) => {\n      const style = (c.code == selected ? 'selected ' : '');\n      countries.push(<li className={style} key={idx}\n        ref={ref => {if (c.code == selected) {this.selectedRef = ref}}}\n        onClick={_ => this.props.onSubmit(c.code, c.dial)}>\n        <span className=\"country-flag\">{c.flag}</span>\n        <span className=\"country\">&nbsp;{c.name}</span>\n        <span className=\"dial-code\">&nbsp;+{c.dial}</span>\n      </li>);\n    });\n\n    return (\n      <div className=\"scrollable-panel\" style={{height: '30rem'}}>\n        <ul className=\"phone-country-selector\">\n          {countries}\n        </ul>\n      </div>\n    );\n  }\n}\n\nexport default injectIntl(PhoneCountrySelector);\n"],"names":["React","injectIntl","dcodes","flagEmoji","PhoneCountrySelector","PureComponent","constructor","props","countries","formatDisplayName","intl","default","forEach","dc","parts","dial","split","part","push","trim","code","flag","name","type","sort","a","b","localeCompare","componentDidMount","selectedRef","scrollIntoView","block","inline","render","selected","c","idx","style","createElement","className","key","ref","onClick","_","onSubmit","height"],"sourceRoot":""}
+{"version":3,"file":"src_widgets_phone-country-selector_jsx.dev.js","mappings":";;;;;;;;;;;;;;;;;;;AAE0B;AACc;AAEC;AAEI;AAE7C,MAAMI,oBAAoB,SAASJ,4DAAmB,CAAC;EACrDM,WAAWA,CAACC,KAAK,EAAE;IACjB,KAAK,CAACA,KAAK,CAAC;IAEZ,IAAI,CAACC,SAAS,GAAG,EAAE;IACnB,MAAM;MAAEC;IAAkB,CAAC,GAAGF,KAAK,CAACG,IAAI;IACxCR,iDAAsB,CAACW,EAAE,IAAI;MAC3B,MAAMC,KAAK,GAAGD,EAAE,CAACE,IAAI,CAACC,KAAK,CAAC,GAAG,CAAC;MAChCF,KAAK,CAACF,OAAO,CAACK,IAAI,IAAI;QACpB,IAAI,CAACT,SAAS,CAACU,IAAI,CAAC;UAClBH,IAAI,EAAEE,IAAI,CAACE,IAAI,EAAE;UACjBC,IAAI,EAAEP,EAAE,CAACO,IAAI;UACbC,IAAI,EAAElB,yDAAS,CAACU,EAAE,CAACO,IAAI,CAAC;UACxBE,IAAI,EAAEb,iBAAiB,CAACI,EAAE,CAACO,IAAI,EAAE;YAACG,IAAI,EAAE;UAAQ,CAAC;QACnD,CAAC,CAAC;MACJ,CAAC,CAAC;IACJ,CAAC,CAAC;IAEF,IAAI,CAACf,SAAS,CAACgB,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC,KAAKD,CAAC,CAACH,IAAI,CAACK,aAAa,CAACD,CAAC,CAACJ,IAAI,CAAC,CAAC;EAC7D;EAEAM,iBAAiBA,CAAA,EAAG;IAClB,IAAI,IAAI,CAACC,WAAW,EAAE;MACpB,IAAI,CAACA,WAAW,CAACC,cAAc,CAAC;QAACC,KAAK,EAAE,QAAQ;QAAEC,MAAM,EAAE;MAAS,CAAC,CAAC;IACvE;EACF;EAEAC,MAAMA,CAAA,EAAG;IACP,MAAMzB,SAAS,GAAG,EAAE;IACpB,MAAM0B,QAAQ,GAAG,IAAI,CAAC3B,KAAK,CAAC2B,QAAQ,IAAI,IAAI;IAC5C,IAAI,CAAC1B,SAAS,CAACI,OAAO,CAAC,CAACuB,CAAC,EAAEC,GAAG,KAAK;MACjC,MAAMC,KAAK,GAAIF,CAAC,CAACf,IAAI,IAAIc,QAAQ,GAAG,WAAW,GAAG,EAAG;MACrD1B,SAAS,CAACU,IAAI,CAAClB,0DAAA;QAAIuC,SAAS,EAAEF,KAAM;QAACG,GAAG,EAAEJ,GAAI;QAC5CK,GAAG,EAAEA,GAAG,IAAI;UAAC,IAAIN,CAAC,CAACf,IAAI,IAAIc,QAAQ,EAAE;YAAC,IAAI,CAACL,WAAW,GAAGY,GAAG;UAAA;QAAC,CAAE;QAC/DC,OAAO,EAAEC,CAAC,IAAI,IAAI,CAACpC,KAAK,CAACqC,QAAQ,CAACT,CAAC,CAACf,IAAI,EAAEe,CAAC,CAACpB,IAAI;MAAE,GAClDf,0DAAA;QAAMuC,SAAS,EAAC;MAAc,GAAEJ,CAAC,CAACd,IAAI,CAAQ,EAC9CrB,0DAAA;QAAMuC,SAAS,EAAC;MAAS,GAAC,MAAM,EAACJ,CAAC,CAACb,IAAI,CAAQ,EAC/CtB,0DAAA;QAAMuC,SAAS,EAAC;MAAW,GAAC,OAAO,EAACJ,CAAC,CAACpB,IAAI,CAAQ,CAC/C,CAAC;IACR,CAAC,CAAC;IAEF,OACEf,0DAAA;MAAKuC,SAAS,EAAC,kBAAkB;MAACF,KAAK,EAAE;QAACQ,MAAM,EAAE;MAAO;IAAE,GACzD7C,0DAAA;MAAIuC,SAAS,EAAC;IAAwB,GACnC/B,SAAS,CACP,CACD;EAEV;AACF;AAEA,iEAAeP,sDAAU,CAACG,oBAAoB,CAAC","sources":["webpack://tinode-webapp/./src/widgets/phone-country-selector.jsx"],"sourcesContent":["// Selector for country dialing code.\n\nimport React from 'react';\nimport { injectIntl } from 'react-intl';\n\nimport * as dcodes from '../dcodes.json';\n\nimport { flagEmoji } from '../lib/strformat';\n\nclass PhoneCountrySelector extends React.PureComponent {\n  constructor(props) {\n    super(props);\n\n    this.countries = [];\n    const { formatDisplayName } = props.intl;\n    dcodes.default.forEach(dc => {\n      const parts = dc.dial.split(',');\n      parts.forEach(part => {\n        this.countries.push({\n          dial: part.trim(),\n          code: dc.code,\n          flag: flagEmoji(dc.code),\n          name: formatDisplayName(dc.code, {type: 'region'})\n        });\n      });\n    });\n\n    this.countries.sort((a, b) => a.name.localeCompare(b.name));\n  }\n\n  componentDidMount() {\n    if (this.selectedRef) {\n      this.selectedRef.scrollIntoView({block: 'center', inline: 'nearest'});\n    }\n  }\n\n  render() {\n    const countries = [];\n    const selected = this.props.selected || 'US';\n    this.countries.forEach((c, idx) => {\n      const style = (c.code == selected ? 'selected ' : '');\n      countries.push(<li className={style} key={idx}\n        ref={ref => {if (c.code == selected) {this.selectedRef = ref}}}\n        onClick={_ => this.props.onSubmit(c.code, c.dial)}>\n        <span className=\"country-flag\">{c.flag}</span>\n        <span className=\"country\">&nbsp;{c.name}</span>\n        <span className=\"dial-code\">&nbsp;+{c.dial}</span>\n      </li>);\n    });\n\n    return (\n      <div className=\"scrollable-panel\" style={{height: '30rem'}}>\n        <ul className=\"phone-country-selector\">\n          {countries}\n        </ul>\n      </div>\n    );\n  }\n}\n\nexport default injectIntl(PhoneCountrySelector);\n"],"names":["React","injectIntl","dcodes","flagEmoji","PhoneCountrySelector","PureComponent","constructor","props","countries","formatDisplayName","intl","default","forEach","dc","parts","dial","split","part","push","trim","code","flag","name","type","sort","a","b","localeCompare","componentDidMount","selectedRef","scrollIntoView","block","inline","render","selected","c","idx","style","createElement","className","key","ref","onClick","_","onSubmit","height"],"sourceRoot":""}

version.js

@@ -1,3 +1,3 @@
 // This is a generated file. Don't edit.
 
-const PACKAGE_VERSION = "0.23.0-rc1";
+const PACKAGE_VERSION = "0.23.0-rc2";

webpack.config.js

@@ -64,6 +64,7 @@ module.exports = (env, argv) => {
       }),
     ],
     externals: {
+      'livekit-client': 'LivekitClient',
       'react': 'React',
       'react-dom': 'ReactDOM',
       'react-intl': 'ReactIntl',