pro/im_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #125 from tinode/vc

Browse Source 
Video conferencing skeleton.
This commit is contained in:
Gene
2023-06-29 08:13:13 -07:00
committed by GitHub
parent 5d664b86cb 338e0f6023
commit 31b13401a2
85 changed files with 5437 additions and 3694 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/base.css
+106 -4
View File
@@ -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;
}
}
css/base.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
index-dev.html
+2
View File
@@ -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
+1
View File
@@ -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-lock.json
Generated
+2444 -1655
View File
File diff suppressed because it is too large Load Diff
package.json
+2 -2
View File
@@ -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
+1 -1
View File
@@ -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
+3
View File
@@ -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.min/de.json
+1 -1
View File
File diff suppressed because one or more lines are too long
src/i18n.min/en.json
+1 -1
View File
File diff suppressed because one or more lines are too long
src/i18n.min/es.json
+1 -1
View File
File diff suppressed because one or more lines are too long
src/i18n.min/fr.json
+1 -1
View File
File diff suppressed because one or more lines are too long
src/i18n.min/ko.json
+1 -1
View File
File diff suppressed because one or more lines are too long
src/i18n.min/ro.json
+1 -1
View File
File diff suppressed because one or more lines are too long
src/i18n.min/ru.json
+1 -1
View File
File diff suppressed because one or more lines are too long
src/i18n.min/zh-TW.json
+1 -1
View File
File diff suppressed because one or more lines are too long
src/i18n.min/zh.json
+1 -1
View File
File diff suppressed because one or more lines are too long
src/i18n/de.json
+18 -4
View File
@@ -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
+14
View File
@@ -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
+18 -4
View File
@@ -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
+8
View File
@@ -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
+18 -4
View File
@@ -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
+18 -4
View File
@@ -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
+18 -4
View File
@@ -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
+18 -4
View File
@@ -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
+18 -4
View File
@@ -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
+18 -4
View File
@@ -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
+4 -2
View File
@@ -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 -1
View File
@@ -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
+26 -1
View File
@@ -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,6 +1453,8 @@ class MessagesView extends React.Component {
onSendMessage={this.sendFileAttachment} />
);
} else if (this.state.rtcPanel) {
// P2P call.
if (Tinode.isP2PTopicName(this.state.rtcPanel)) {
component2 = (
<CallPanel
topic={this.state.topic}
@@ -1469,6 +1472,26 @@ class MessagesView extends React.Component {
onIceCandidate={this.props.onCallIceCandidate}
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
+36 -10
View File
@@ -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.setState({
this.handleTopicSelected(setCallTopic ? topicName : this.state.callTopic);
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
+20 -5
View File
@@ -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 ?
<FormattedMessage id="calls_incoming" defaultMessage="Incoming call" description="Incoming call label" /> :
<FormattedMessage id="calls_outgoing" defaultMessage="Outgoing call" description="Outgoing call label" />
}</div>
<div>{title}</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
+2 -1
View File
@@ -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
+7 -1
View File
@@ -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
+2 -1
View File
@@ -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
+1 -1
View File
@@ -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
+97
View File
@@ -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
+104
View File
@@ -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
+412
View File
@@ -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/107.prod.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/226.prod.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/246.prod.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/246.prod.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/290.prod.js.map
+1 -1
View File
@@ -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/311.prod.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/311.prod.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/327.prod.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/327.prod.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/365.prod.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/365.prod.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/501.prod.js
+2
View File
File diff suppressed because one or more lines are too long
umd/501.prod.js.map
+1
View File
File diff suppressed because one or more lines are too long
umd/514.prod.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/700.prod.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/734.prod.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/817.prod.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/898.prod.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/92.prod.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/932.prod.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/index.dev.js
+1010 -986
View File
File diff suppressed because it is too large Load Diff
umd/index.dev.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/index.prod.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/index.prod.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/src_i18n_min_de_json.dev.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/src_i18n_min_en_json.dev.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/src_i18n_min_es_json.dev.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/src_i18n_min_fr_json.dev.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/src_i18n_min_ko_json.dev.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/src_i18n_min_ro_json.dev.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/src_i18n_min_ru_json.dev.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/src_i18n_min_zh-TW_json.dev.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/src_i18n_min_zh_json.dev.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/src_views_account-settings-view_jsx.dev.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/src_views_create-account-view_jsx.dev.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/src_views_password-reset-view_jsx.dev.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/src_widgets_audio-recorder_jsx.dev.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/src_widgets_phone-country-selector_jsx.dev.js.map
+1 -1
View File
@@ -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":""}
umd/tinode.dev.js
+834 -490
View File
File diff suppressed because it is too large Load Diff
umd/tinode.dev.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/tinode.prod.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/tinode.prod.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/vendors-node_modules_libphonenumber-js_examples_mobile_json_js-node_modules_libphonenumber-js-7e28c7.dev.js
+68 -417
View File
File diff suppressed because one or more lines are too long
umd/vendors-node_modules_libphonenumber-js_examples_mobile_json_js-node_modules_libphonenumber-js-7e28c7.dev.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
version.js
+1 -1
View File
@@ -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
+1
View File
@@ -64,6 +64,7 @@ module.exports = (env, argv) => {
}),
],
externals: {
'livekit-client': 'LivekitClient',
'react': 'React',
'react-dom': 'ReactDOM',
'react-intl': 'ReactIntl',