From 781ff323db4c70e4ca476f9ef13a04e5aa063585 Mon Sep 17 00:00:00 2001 From: enahum Date: Fri, 16 Sep 2016 15:35:13 -0300 Subject: [PATCH] Webrtc client side (#4026) * WebRTC Server side * WebRTC client side * Bug fixes and improvements * Pushing UI improvements for webrtc (#3728) * Pushing UI improvements for webrtc * Updating webrtc css * PLT-3943 WebRTC P1: bug fixes and improvements * Video resolution set to std, reduce volume of ringtone and flip video horizontally * Fix calling a user B while WebRTC RHS is still opened * Leave RHS opened when call ends, Fix isBusy on popover and channel_header * Fix pre-release feature, RHS & System Console * PLT-3945 - Updating UI for webrtc (#3908) * PLT-3943 Webrtc p1 * Add ongoing call indicator when RHS is opened * UI updates to to webrtc notifcation (#3959) --- model/license.go | 2 +- webapp/actions/webrtc_actions.jsx | 20 + webapp/actions/websocket_actions.jsx | 14 +- webapp/client/client.jsx | 12 + webapp/client/webrtc_client.jsx | 145 ++ webapp/client/webrtc_session.jsx | 1966 +++++++++++++++++ .../admin_console/admin_sidebar.jsx | 2 +- .../admin_console/webrtc_settings.jsx | 46 +- webapp/components/channel_header.jsx | 98 +- webapp/components/leave_team_modal.jsx | 16 +- webapp/components/loading_screen.jsx | 19 +- webapp/components/navbar_dropdown.jsx | 24 +- webapp/components/needs_team.jsx | 5 + .../components/post_view/components/post.jsx | 9 +- .../post_view/components/post_header.jsx | 6 +- .../post_view/components/post_list.jsx | 4 +- .../post_view/post_focus_view_controller.jsx | 14 +- .../post_view/post_view_controller.jsx | 14 + webapp/components/rhs_header_post.jsx | 14 +- webapp/components/rhs_thread.jsx | 2 + webapp/components/sidebar_right.jsx | 5 +- webapp/components/sidebar_right_menu.jsx | 12 +- webapp/components/user_profile.jsx | 105 +- .../user_settings/user_settings_advanced.jsx | 16 +- .../webrtc/components/webrtc_header.jsx | 100 + .../webrtc/components/webrtc_notification.jsx | 320 +++ .../webrtc/components/webrtc_sidebar.jsx | 133 ++ .../components/webrtc/webrtc_controller.jsx | 1214 ++++++++++ webapp/i18n/en.json | 37 +- webapp/images/ring.mp3 | Bin 0 -> 229995 bytes webapp/package.json | 1 + webapp/sass/components/_module.scss | 1 + webapp/sass/components/_webrtc.scss | 297 +++ webapp/sass/layout/_content.scss | 3 +- webapp/sass/layout/_headers.scss | 3 +- webapp/sass/layout/_sidebar-right.scss | 9 +- webapp/sass/responsive/_desktop.scss | 9 +- webapp/sass/responsive/_mobile.scss | 6 +- webapp/sass/responsive/_tablet.scss | 12 +- webapp/sass/routes/_print.scss | 3 +- webapp/sass/utils/_mixins.scss | 72 +- webapp/sass/utils/_variables.scss | 10 + webapp/stores/webrtc_store.jsx | 110 + webapp/utils/channel_intro_messages.jsx | 5 +- webapp/utils/constants.jsx | 77 +- 45 files changed, 4902 insertions(+), 90 deletions(-) create mode 100644 webapp/actions/webrtc_actions.jsx create mode 100644 webapp/client/webrtc_client.jsx create mode 100644 webapp/client/webrtc_session.jsx create mode 100644 webapp/components/webrtc/components/webrtc_header.jsx create mode 100644 webapp/components/webrtc/components/webrtc_notification.jsx create mode 100644 webapp/components/webrtc/components/webrtc_sidebar.jsx create mode 100644 webapp/components/webrtc/webrtc_controller.jsx create mode 100644 webapp/images/ring.mp3 create mode 100644 webapp/sass/components/_webrtc.scss create mode 100644 webapp/stores/webrtc_store.jsx diff --git a/model/license.go b/model/license.go index 465cca1287..ed38ea4380 100644 --- a/model/license.go +++ b/model/license.go @@ -43,7 +43,7 @@ type Features struct { MHPNS *bool `json:"mhpns"` SAML *bool `json:"saml"` PasswordRequirements *bool `json:"password_requirements"` - // after we enabled more features for web rtc we'll need to control them with this + // after we enabled more features for webrtc we'll need to control them with this Webrtc *bool `json:"webrtc"` FutureFeatures *bool `json:"future_features"` } diff --git a/webapp/actions/webrtc_actions.jsx b/webapp/actions/webrtc_actions.jsx new file mode 100644 index 0000000000..444eee241e --- /dev/null +++ b/webapp/actions/webrtc_actions.jsx @@ -0,0 +1,20 @@ +// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import AppDispatcher from 'dispatcher/app_dispatcher.jsx'; +import {WebrtcActionTypes} from 'utils/constants.jsx'; + +export function initWebrtc(userId, isCalling) { + AppDispatcher.handleServerAction({ + type: WebrtcActionTypes.INITIALIZE, + user_id: userId, + is_calling: isCalling + }); +} + +export function handle(message) { + AppDispatcher.handleServerAction({ + type: message.action, + message + }); +} diff --git a/webapp/actions/websocket_actions.jsx b/webapp/actions/websocket_actions.jsx index 68853c2298..c69c8e6d27 100644 --- a/webapp/actions/websocket_actions.jsx +++ b/webapp/actions/websocket_actions.jsx @@ -15,6 +15,7 @@ import NotificationStore from 'stores/notification_store.jsx'; //eslint-disable- import Client from 'client/web_client.jsx'; import WebSocketClient from 'client/web_websocket_client.jsx'; +import * as WebrtcActions from './webrtc_actions.jsx'; import * as Utils from 'utils/utils.jsx'; import * as AsyncClient from 'utils/async_client.jsx'; @@ -22,9 +23,7 @@ import * as GlobalActions from 'actions/global_actions.jsx'; import * as UserActions from 'actions/user_actions.jsx'; import {handleNewPost} from 'actions/post_actions.jsx'; -import Constants from 'utils/constants.jsx'; -const SocketEvents = Constants.SocketEvents; -const ActionTypes = Constants.ActionTypes; +import {Constants, SocketEvents, ActionTypes} from 'utils/constants.jsx'; import {browserHistory} from 'react-router/es6'; @@ -160,6 +159,10 @@ function handleEvent(msg) { handleHelloEvent(msg); break; + case SocketEvents.WEBRTC: + handleWebrtc(msg); + break; + default: } } @@ -293,3 +296,8 @@ function handleHelloEvent(msg) { Client.serverVersion = msg.data.server_version; AsyncClient.checkVersion(); } + +function handleWebrtc(msg) { + const data = msg.data; + return WebrtcActions.handle(data); +} \ No newline at end of file diff --git a/webapp/client/client.jsx b/webapp/client/client.jsx index a5d179a0d7..544eb4980e 100644 --- a/webapp/client/client.jsx +++ b/webapp/client/client.jsx @@ -121,6 +121,10 @@ export default class Client { return `${this.url}${this.urlVersion}/users/${userId}`; } + getWebrtcRoute() { + return `${this.url}${this.urlVersion}/webrtc`; + } + setTranslations(messages) { this.translations = messages; } @@ -1803,4 +1807,12 @@ export default class Client { return success(res.body); }); } + + webrtcToken(success, error) { + request.post(`${this.getWebrtcRoute()}/token`). + set(this.defaultHeaders). + type('application/json'). + accept('application/json'). + end(this.handleResponse.bind(this, 'webrtcToken', success, error)); + } } diff --git a/webapp/client/webrtc_client.jsx b/webapp/client/webrtc_client.jsx new file mode 100644 index 0000000000..85204c25b2 --- /dev/null +++ b/webapp/client/webrtc_client.jsx @@ -0,0 +1,145 @@ +// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +export default class WebrtcClient { + constructor() { + this.init = this.init.bind(this); + this.listDevices = this.listDevices.bind(this); + this.isExtensionEnabled = this.isExtensionEnabled.bind(this); + this.isWebrtcSupported = this.isWebrtcSupported.bind(this); + + this.initDone = false; + this.sessions = {}; + } + + noop() {} //eslint-disable-line no-empty-function + + // this function is going to be needed when we enable screen sharing + isExtensionEnabled() { + if (window.navigator.userAgent.match('Chrome')) { + const chromever = parseInt(window.navigator.userAgent.match(/Chrome\/(.*) /)[1], 10); + let maxver = 33; + if (window.navigator.userAgent.match('Linux')) { + maxver = 35; // "known" crash in chrome 34 and 35 on linux + } + if (chromever >= 26 && chromever <= maxver) { + // Older versions of Chrome don't support this extension-based approach, so lie + return true; + } + return (document.getElementById('mattermost-extension-installed') !== null); + } + + // Firefox of others, no need for the extension (but this doesn't mean it will work) + return true; + } + + init(opts) { + const options = opts || {}; + + if (this.initDone === true) { + // Already initialized + return; + } + + this.trace = this.noop; + this.debug = this.noop; + this.log = this.noop; + this.warn = this.noop; + this.error = this.noop; + + /* eslint-disable */ + if (options.debug === true || options.debug === 'all') { + // Enable all debugging levels + this.trace = console.trace.bind(console); + this.debug = console.debug.bind(console); + this.log = console.log.bind(console); + this.warn = console.warn.bind(console); + this.error = console.error.bind(console); + } else if (Array.isArray(options.debug)) { + for (const i in options.debug) { + if (options.debug.hasOwnProperty(i)) { + const d = options.debug[i]; + switch (d) { + case 'trace': + this.trace = console.trace.bind(console); + break; + case 'debug': + this.debug = console.debug.bind(console); + break; + case 'log': + this.log = console.log.bind(console); + break; + case 'warn': + this.warn = console.warn.bind(console); + break; + case 'error': + this.error = console.error.bind(console); + break; + default: + console.error("Unknown debugging option '" + d + "' (supported: 'trace', 'debug', 'log', warn', 'error')"); + break; + } + } + } + } + /* eslint-enable */ + + this.log('Initializing WebRTC Client library'); + + // Detect tab close + window.onbeforeunload = () => { + this.log('Closing window'); + for (const s in this.sessions) { + if (this.sessions.hasOwnProperty(s)) { + if (this.sessions[s] && this.sessions[s].destroyOnUnload) { + this.log('Destroying session ' + s); + this.sessions[s].destroy(); + } + } + } + }; + + this.initDone = true; + } + + // Helper method to enumerate devices + listDevices(cb) { + const callback = (typeof cb == 'function') ? cb : this.noop; + + if (navigator.mediaDevices) { + navigator.getUserMedia({audio: true, video: true}, (stream) => { + navigator.mediaDevices.enumerateDevices().then((devices) => { + this.debug(devices); + callback(devices); + + // Get rid of the now useless stream + try { + stream.stop(); + } catch (e) { + this.error(e); + } + + this.stopMedia(stream); + }); + }, (err) => { + this.error(err); + callback([]); + }); + } else { + this.warn('navigator.mediaDevices unavailable'); + callback([]); + } + } + + // Helper method to check whether WebRTC is supported by this browser + isWebrtcSupported() { + return window.RTCPeerConnection && navigator.getUserMedia; + } + + stopMedia(stream) { + const tracks = stream.getTracks(); + tracks.forEach((track) => { + track.stop(); + }); + } +} \ No newline at end of file diff --git a/webapp/client/webrtc_session.jsx b/webapp/client/webrtc_session.jsx new file mode 100644 index 0000000000..1fccddff3f --- /dev/null +++ b/webapp/client/webrtc_session.jsx @@ -0,0 +1,1966 @@ +// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import adapter from 'webrtc-adapter'; +import WebrtcClient from './webrtc_client.jsx'; +const transationLength = 12; + +export default class WebrtcSession { + static randomString(len) { + const charSet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; + let randomString = ''; + for (let i = 0; i < len; i++) { + const randomPoz = Math.floor(Math.random() * charSet.length); + randomString += charSet.substring(randomPoz, randomPoz + 1); + } + return randomString; + } + + static getLocalMedia(constraints, element, callback) { + const media = constraints || {audio: true, video: true}; + navigator.mediaDevices.getUserMedia(media). + then((stream) => { + if (element) { + adapter.browserShim.attachMediaStream(element, stream); + } + + if (callback && typeof callback === 'function') { + callback(null, stream); + } + }). + catch((error) => { + callback(error); + }); + } + + static stopMediaStream(stream) { + const tracks = stream.getTracks(); + tracks.forEach((track) => { + track.stop(); + }); + } + + constructor(opts) { + // super(); + const options = opts || {}; + this.getServer = this.getServer.bind(this); + this.isConnected = this.isConnected.bind(this); + this.getSessionId = this.getSessionId.bind(this); + this.handleEvent = this.handleEvent.bind(this); + this.keepAlive = this.keepAlive.bind(this); + this.createSession = this.createSession.bind(this); + this.attach = this.attach.bind(this); + this.sendMessage = this.sendMessage.bind(this); + this.sendTrickleCandidate = this.sendTrickleCandidate.bind(this); + this.sendData = this.sendData.bind(this); + this.sendDtmf = this.sendDtmf.bind(this); + this.destroy = this.destroy.bind(this); + this.destroyHandle = this.destroyHandle.bind(this); + this.streamsDone = this.streamsDone.bind(this); + this.prepareWebrtc = this.prepareWebrtc.bind(this); + this.prepareWebrtcPeer = this.prepareWebrtcPeer.bind(this); + this.createOffer = this.createOffer.bind(this); + this.createAnswer = this.createAnswer.bind(this); + this.sendSDP = this.sendSDP.bind(this); + this.getVolume = this.getVolume.bind(this); + this.isMuted = this.isMuted.bind(this); + this.mute = this.mute.bind(this); + this.getBitrate = this.getBitrate.bind(this); + this.webrtcError = this.webrtcError.bind(this); + this.cleanupWebrtc = this.cleanupWebrtc.bind(this); + this.isAudioSendEnabled = this.isAudioSendEnabled.bind(this); + this.isAudioRecvEnabled = this.isAudioRecvEnabled.bind(this); + this.isVideoSendEnabled = this.isVideoSendEnabled.bind(this); + this.isVideoRecvEnabled = this.isVideoRecvEnabled.bind(this); + this.isDataEnabled = this.isDataEnabled.bind(this); + this.isTrickleEnabled = this.isTrickleEnabled.bind(this); + this.unbindWebSocket = this.unbindWebSocket.bind(this); + + this.websockets = false; + this.ws = null; + this.wsHandlers = {}; + this.wsKeepaliveTimeoutId = null; + this.servers = null; + this.server = null; + this.serversIndex = 0; + this.connected = false; + this.sessionId = null; + this.pluginHandles = {}; + this.retries = 0; + this.transactions = {}; + + this.client = new WebrtcClient(); + this.client.init({debug: options.debug}); + + this.gatewayCallbacks = options || {}; + this.gatewayCallbacks.success = (typeof options.success == 'function') ? options.success : this.client.noop; + this.gatewayCallbacks.error = (typeof options.error == 'function') ? options.error : this.client.noop; + this.gatewayCallbacks.destroyed = (typeof options.destroyed == 'function') ? options.destroyed : this.client.noop; + + if (!this.client.initDone) { + this.gatewayCallbacks.error('webrtc_client.not_initialize', 'Library not initialized'); + return {}; + } + + if (!this.client.isWebrtcSupported()) { + this.gatewayCallbacks.error('webrtc_client.browser.not_supported', 'WebRTC not supported by this browser'); + return {}; + } + + this.client.log('Library initialized: ' + this.client.initDone); + + if (!options.server) { + this.gatewayCallbacks.error('webrtc_client.invalid_gateway', 'Invalid gateway url'); + return {}; + } + + if (Array.isArray(options.server)) { + this.client.log('Multiple servers provided (' + options.server.length + '), will use the first that works'); + for (let i = 0; i < options.server; i++) { + const server = options.server[i]; + if (server.indexOf('ws') !== 0) { + this.gatewayCallbacks.error('webrtc_client.must_be_websocket', 'every server provided must be a websocket'); + return {}; + } + } + this.servers = options.server; + this.client.debug(this.servers); + } else if (options.server.indexOf('ws') === 0) { + this.websockets = true; + this.servers = [options.server]; + this.client.log('Using WebSockets to contact Janus: ' + options.server); + } else { + this.gatewayCallbacks.error('webrtc_client.invalid_websocket', 'This library must connect to a websocket'); + return {}; + } + + this.iceServers = options.iceServers; + if (!this.iceServers || this.iceServers.length === 0) { + this.iceServers = [{url: 'stun:stun.l.google.com:19302'}]; + } + + // Optional max events + this.maxev = null; + if (options.max_poll_events) { + this.maxev = options.max_poll_events; + } + if (this.maxev < 1) { + this.maxev = 1; + } + + // Token to use (only if the token based authentication mechanism is enabled) + this.token = null; + if (options.token) { + this.token = options.token; + } + + // API secret to use (only if the shared API secret is enabled) + this.apisecret = null; + if (options.apisecret) { + this.apisecret = options.apisecret; + } + + // Whether we should destroy this session when onbeforeunload is called + this.destroyOnUnload = options.destroyOnUnload !== false; + this.createSession(); + + return this; + } + + getServer() { + return this.server; + } + + isConnected() { + return this.connected; + } + + getSessionId() { + return this.sessionId; + } + + handleEvent(json) { + this.retries = 0; + this.client.debug('Got event on session ' + this.sessionId); + this.client.debug(json); + const transaction = json.transaction; + const sender = json.sender; + const plugindata = json.plugindata; + const jsep = json.jsep; + switch (json.janus) { + case 'keepalive': + // Nothing happened + break; + case 'ack': + case 'success': + // Success or just an ack, we can probably ignore + if (transaction) { + const reportSuccess = this.transactions[transaction]; + if (reportSuccess) { + reportSuccess(json); + } + Reflect.deleteProperty(this.transactions, transaction); + } + break; + case 'webrtcup': + // The PeerConnection with the gateway is up! Notify this + if (sender) { + const pluginHandle = this.pluginHandles[sender]; + if (pluginHandle) { + pluginHandle.webrtcState(true); + } else { + this.client.warn('This handle is not attached to this session'); + } + } else { + this.client.warn('Missing sender...'); + } + break; + case 'hangup': + // A plugin asked the core to hangup a PeerConnection on one of our handles + if (sender) { + const pluginHandle = this.pluginHandles[sender]; + if (pluginHandle) { + pluginHandle.webrtcState(false); + pluginHandle.hangup(); + } else { + this.client.warn('This handle is not attached to this session'); + } + } else { + this.client.warn('Missing sender...'); + } + break; + case 'detached': + // A plugin asked the core to detach one of our handles + if (sender) { + const pluginHandle = this.pluginHandles[sender]; + if (pluginHandle) { + pluginHandle.ondetached(); + pluginHandle.detach(); + } else { + this.client.warn('This handle is not attached to this session'); + } + } else { + this.client.warn('Missing sender...'); + } + break; + case 'media': + // Media started/stopped flowing + if (sender) { + const pluginHandle = this.pluginHandles[sender]; + if (pluginHandle) { + pluginHandle.mediaState(json.type, json.receiving); + } else { + this.client.warn('This handle is not attached to this session'); + } + } else { + this.client.warn('Missing sender...'); + } + break; + case 'error': + // Oops, something wrong happened + this.client.error('Ooops: ' + json.error.code + ' ' + json.error.reason); + if (transaction) { + const reportSuccess = this.transactions[transaction]; + if (reportSuccess) { + reportSuccess(json); + } + Reflect.deleteProperty(this.transactions, transaction); + } + break; + case 'event': + if (sender) { + if (plugindata) { + this.client.debug(` -- Event is coming from ${sender} ( ${plugindata.plugin} )`); + const data = plugindata.data; + this.client.debug(data); + const pluginHandle = this.pluginHandles[sender]; + if (pluginHandle) { + pluginHandle.mediaState(json.type, json.receiving); + if (jsep) { + this.client.debug('Handling SDP as well...'); + this.client.debug(jsep); + } + const callback = pluginHandle.onmessage; + if (callback) { + this.client.debug('Notifying application...'); + + // Send to callback specified when attaching plugin handle + callback(data, jsep); + } else { + // Send to generic callback (?) + this.client.debug('No provided notification callback'); + } + } else { + this.client.warn('This handle is not attached to this session'); + } + } else { + this.client.warn('Missing plugindata...'); + } + } else { + this.client.warn('Missing sender...'); + } + break; + default: + this.client.warn(`Unknown message "${json.janus}"`); + break; + } + } + + keepAlive() { + if (this.server === null || !this.websockets || !this.connected) { + return; + } + this.wsKeepaliveTimeoutId = setTimeout(this.keepAlive, 30000); + + const request = { + janus: 'keepalive', + session_id: this.sessionId, + transaction: WebrtcSession.randomString(transationLength) + }; + + if (this.token) { + request.token = this.token; + } + + if (this.apisecret) { + request.apisecret = this.apisecret; + } + + this.ws.send(JSON.stringify(request)); + } + + createSession() { + const transaction = WebrtcSession.randomString(transationLength); + const request = { + janus: 'create', + transaction + }; + + if (this.token) { + request.token = this.token; + } + + if (this.apisecret) { + request.apisecret = this.apisecret; + } + + if (this.server === null && Array.isArray(this.servers)) { + // We still need to find a working server from the list we were given + this.server = this.servers[this.serversIndex]; + if (this.server.indexOf('ws') === 0) { + this.websockets = true; + this.client.log('Server #' + (this.serversIndex + 1) + ': trying WebSockets to contact Janus (' + this.server + ')'); + } + } + + if (this.websockets) { + this.ws = new WebSocket(this.server, 'janus-protocol'); + this.wsHandlers = { + error: () => { + this.client.error('Error connecting to the Janus WebSockets server... ' + this.server); + if (Array.isArray(this.servers)) { + this.serversIndex++; + if (this.serversIndex === this.servers.length) { + // We tried all the servers the user gave us and they all failed + this.gatewayCallbacks.error('webrtc_client.cannot_connect_servers', 'Error connecting to any of the provided Janus servers: Is the gateway down?'); + return; + } + + // Let's try the next server + this.server = null; + setTimeout(() => { + this.createSession(); + }, 200); + return; + } + this.gatewayCallbacks.error('webrtc_client.cannot_connect_server', 'Error connecting to the Janus WebSockets server: Is the gateway down?'); + }, + + open: () => { + // We need to be notified about the success + this.transactions[transaction] = (json) => { + this.client.debug(json); + if (json.janus !== 'success') { + this.client.error('Ooops: ' + json.error.code + ' ' + json.error.reason); // FIXME + this.gatewayCallbacks.error(json.error.reason); + return; + } + this.wsKeepaliveTimeoutId = setTimeout(this.keepAlive, 30000); + this.connected = true; + this.sessionId = json.data.id; + this.client.log('Created session: ' + this.sessionId); + this.client.sessions[this.sessionId] = this; + this.gatewayCallbacks.success(); + }; + this.ws.send(JSON.stringify(request)); + }, + + message: (event) => { + this.handleEvent(JSON.parse(event.data)); + }, + + close: () => { + if (!this.connected) { + return; + } + this.connected = false; + + // FIXME What if this is called when the page is closed? + this.gatewayCallbacks.error('Lost connection to the gateway (is it down?)'); + } + }; + + for (var eventName in this.wsHandlers) { + if (this.wsHandlers.hasOwnProperty(eventName)) { + this.ws.addEventListener(eventName, this.wsHandlers[eventName]); + } + } + } + } + + attach(cbs) { + const callbacks = cbs || {}; + callbacks.success = (typeof cbs.success == 'function') ? cbs.success : this.client.noop; + callbacks.error = (typeof cbs.error == 'function') ? cbs.error : this.client.noop; + callbacks.consentDialog = (typeof cbs.consentDialog == 'function') ? cbs.consentDialog : this.client.noop; + callbacks.mediaState = (typeof cbs.mediaState == 'function') ? cbs.mediaState : this.client.noop; + callbacks.webrtcState = (typeof cbs.webrtcState == 'function') ? cbs.webrtcState : this.client.noop; + callbacks.onmessage = (typeof cbs.onmessage == 'function') ? cbs.onmessage : this.client.noop; + callbacks.onlocalstream = (typeof cbs.onlocalstream == 'function') ? cbs.onlocalstream : this.client.noop; + callbacks.onremotestream = (typeof cbs.onremotestream == 'function') ? cbs.onremotestream : this.client.noop; + callbacks.ondata = (typeof cbs.ondata == 'function') ? cbs.ondata : this.client.noop; + callbacks.ondataopen = (typeof cbs.ondataopen == 'function') ? cbs.ondataopen : this.client.noop; + callbacks.oncleanup = (typeof cbs.oncleanup == 'function') ? cbs.oncleanup : this.client.noop; + callbacks.ondetached = (typeof cbs.ondetached == 'function') ? cbs.ondetached : this.client.noop; + + if (!this.connected) { + this.client.warn('Is the gateway down? (connected=false)'); + callbacks.error('Is the gateway down? (connected=false)'); + return; + } + + const plugin = callbacks.plugin; + if (!plugin) { + this.client.error('Invalid plugin'); + callbacks.error('Invalid plugin'); + return; + } + + const transaction = WebrtcSession.randomString(transationLength); + const request = { + janus: 'attach', + plugin, + transaction + }; + + if (this.token) { + request.token = this.token; + } + + if (this.apisecret) { + request.apisecret = this.apisecret; + } + + if (this.websockets) { + this.transactions[transaction] = (json) => { + this.client.debug(json); + + if (json.janus !== 'success') { + const error = `Ooops: ${json.error.code} ${json.error.reason}`; + this.client.error(error); + callbacks.error(error); + return; + } + + const handleId = json.data.id; + + this.client.log('Created handle: ' + handleId); + const pluginHandle = { + session: this, + plugin, + id: handleId, + webrtcStuff: { + started: false, + myStream: null, + streamExternal: false, + remoteStream: null, + mySdp: null, + pc: null, + dataChannel: null, + dtmfSender: null, + trickle: true, + iceDone: false, + sdpSent: false, + volume: { + value: null, + timer: null + }, + bitrate: { + value: null, + bsnow: null, + bsbefore: null, + tsnow: null, + tsbefore: null, + timer: null + } + }, + getId: () => { + return handleId; + }, + getPlugin: () => { + return plugin; + }, + getVolume: () => { + return this.getVolume(handleId); + }, + isAudioMuted: () => { + return this.isMuted(handleId, false); + }, + muteAudio: () => { + return this.mute(handleId, false, true); + }, + unmuteAudio: () => { + return this.mute(handleId, false, false); + }, + isVideoMuted: () => { + return this.isMuted(handleId, true); + }, + muteVideo: () => { + return this.mute(handleId, true, true); + }, + unmuteVideo: () => { + return this.mute(handleId, true, false); + }, + getBitrate: () => { + return this.getBitrate(handleId); + }, + send: (cb) => { + this.sendMessage(handleId, cb); + }, + data: (cb) => { + this.sendData(handleId, cb); + }, + dtmf: (cb) => { + this.sendDtmf(handleId, cb); + }, + consentDialog: callbacks.consentDialog, + mediaState: callbacks.mediaState, + webrtcState: callbacks.webrtcState, + onmessage: callbacks.onmessage, + createOffer: (cb) => { + this.prepareWebrtc(handleId, cb); + }, + createAnswer: (cb) => { + this.prepareWebrtc(handleId, cb); + }, + handleRemoteJsep: (cb) => { + this.prepareWebrtcPeer(handleId, cb); + }, + onlocalstream: callbacks.onlocalstream, + onremotestream: callbacks.onremotestream, + ondata: callbacks.ondata, + ondataopen: callbacks.ondataopen, + oncleanup: callbacks.oncleanup, + ondetached: callbacks.ondetached, + hangup: (sendRequest) => { + this.cleanupWebrtc(handleId, sendRequest === true); + }, + detach: (cb) => { + this.destroyHandle(handleId, cb); + } + }; + this.pluginHandles[handleId] = pluginHandle; + callbacks.success(pluginHandle); + }; + request.session_id = this.sessionId; + this.ws.send(JSON.stringify(request)); + } + } + + sendMessage(handleId, cbs) { + const callbacks = cbs || {}; + callbacks.success = (typeof cbs.success == 'function') ? cbs.success : this.client.noop; + callbacks.error = (typeof cbs.error == 'function') ? cbs.error : this.client.noop; + + if (!this.connected) { + const error = 'Is the gateway down? (connected=false)'; + this.client.warn(error); + callbacks.error(error); + return; + } + + const message = callbacks.message; + const jsep = callbacks.jsep; + const transaction = WebrtcSession.randomString(transationLength); + const request = { + janus: 'message', + body: message, + transaction + }; + + if (this.token) { + request.token = this.token; + } + + if (this.apisecret) { + request.apisecret = this.apisecret; + } + + if (jsep) { + request.jsep = jsep; + } + + this.client.debug('Sending message to plugin (handle=' + handleId + '):'); + this.client.debug(request); + + if (this.websockets) { + request.session_id = this.sessionId; + request.handle_id = handleId; + this.transactions[transaction] = (json) => { + this.client.debug('Message sent!'); + this.client.debug(json); + + if (json.janus === 'success') { + // We got a success, must have been a synchronous transaction + const plugindata = json.plugindata; + if (!plugindata) { + this.client.warn('Request succeeded, but missing plugindata...'); + callbacks.success(); + return; + } + + this.client.log('Synchronous transaction successful (' + plugindata.plugin + ')'); + const data = plugindata.data; + this.client.debug(data); + callbacks.success(data); + return; + } else if (json.janus !== 'ack') { + // Not a success and not an ack, must be an error + if (json.error) { + this.client.error('Ooops: ' + json.error.code + ' ' + json.error.reason); + callbacks.error(json.error.code + ' ' + json.error.reason); + } else { + this.client.error('Unknown error'); + callbacks.error('Unknown error'); + } + return; + } + + // If we got here, the plugin decided to handle the request asynchronously + callbacks.success(); + }; + this.ws.send(JSON.stringify(request)); + } + } + + sendTrickleCandidate(handleId, candidate) { + if (!this.connected) { + this.client.warn('Is the gateway down? (connected=false)'); + return; + } + var request = { + janus: 'trickle', + candidate, + transaction: WebrtcSession.randomString(transationLength) + }; + + if (this.token) { + request.token = this.token; + } + + if (this.apisecret) { + request.apisecret = this.apisecret; + } + this.client.debug('Sending trickle candidate (handle=' + handleId + '):'); + this.client.debug(request); + + if (this.websockets) { + request.session_id = this.sessionId; + request.handle_id = handleId; + this.ws.send(JSON.stringify(request)); + } + } + + sendData(handleId, cbs) { + const callbacks = cbs || {}; + callbacks.success = (typeof cbs.success == 'function') ? cbs.success : this.client.noop; + callbacks.error = (typeof cbs.error == 'function') ? cbs.error : this.client.noop; + const pluginHandle = this.pluginHandles[handleId]; + if (!pluginHandle || !pluginHandle.webrtcStuff) { + this.client.warn('Invalid handle'); + callbacks.error('Invalid handle'); + return; + } + + const config = pluginHandle.webrtcStuff; + const text = callbacks.text; + if (!text) { + this.client.warn('Invalid text'); + callbacks.error('Invalid text'); + return; + } + this.client.log('Sending string on data channel: ' + text); + config.dataChannel.send(text); + callbacks.success(); + } + + sendDtmf(handleId, cbs) { + const callbacks = cbs || {}; + callbacks.success = (typeof cbs.success == 'function') ? cbs.success : this.client.noop; + callbacks.error = (typeof cbs.error == 'function') ? cbs.error : this.client.noop; + + const pluginHandle = this.pluginHandles[handleId]; + if (!pluginHandle || !pluginHandle.webrtcStuff) { + this.client.warn('Invalid handle'); + callbacks.error('Invalid handle'); + return; + } + + const config = pluginHandle.webrtcStuff; + if (!config.dtmfSender) { + // Create the DTMF sender, if possible + if (config.myStream) { + const tracks = config.myStream.getAudioTracks(); + if (tracks && tracks.length > 0) { + const localAudioTrack = tracks[0]; + config.dtmfSender = config.pc.createDTMFSender(localAudioTrack); + this.client.log('Created DTMF Sender'); + config.dtmfSender.ontonechange = (tone) => { + this.client.debug('Sent DTMF tone: ' + tone.tone); + }; + } + } + if (!config.dtmfSender) { + this.client.warn('Invalid DTMF configuration'); + callbacks.error('Invalid DTMF configuration'); + return; + } + } + + const dtmf = callbacks.dtmf; + if (!dtmf) { + this.client.warn('Invalid DTMF parameters'); + callbacks.error('Invalid DTMF parameters'); + return; + } + + const tones = dtmf.tones; + if (!tones) { + this.client.warn('Invalid DTMF string'); + callbacks.error('Invalid DTMF string'); + return; + } + + let duration = dtmf.duration; + if (!duration) { + duration = 500; // We choose 500ms as the default duration for a tone + } + + let gap = dtmf.gap; + if (!gap) { + gap = 50; // We choose 50ms as the default gap between tones + } + + this.client.debug('Sending DTMF string ' + tones + ' (duration ' + duration + 'ms, gap ' + gap + 'ms'); + config.dtmfSender.insertDTMF(tones, duration, gap); + } + + destroy(sync) { + const syncRequest = (sync === true); + this.client.log('Destroying session ' + this.sessionId); + + if (!this.connected) { + this.client.warn('Is the gateway down? (connected=false)'); + return; + } + + if (!this.sessionId) { + this.client.warn('No session to destroy'); + this.gatewayCallbacks.destroyed(); + return; + } + + Reflect.deleteProperty(this.client.sessions, this.sessionId); + + // Destroy all handles first + for (const ph in this.pluginHandles) { + if (this.pluginHandles.hasOwnProperty(ph)) { + const phv = this.pluginHandles[ph]; + this.client.log('Destroying handle ' + phv.id + ' (' + phv.plugin + ')'); + this.destroyHandle(phv.id, null, syncRequest); + } + } + + // Ok, go on + var request = {janus: 'destroy', transaction: WebrtcSession.randomString(transationLength)}; + + if (this.token) { + request.token = this.token; + } + if (this.apisecret) { + request.apisecret = this.apisecret; + } + if (this.websockets) { + request.session_id = this.sessionId; + + let onUnbindMessage = null; + let onUnbindError = null; + onUnbindMessage = (event) => { + var data = JSON.parse(event.data); + if (data.session_id === request.session_id && data.transaction === request.transaction) { + this.unbindWebSocket(onUnbindMessage, onUnbindError); + this.gatewayCallbacks.destroyed(); + } + }; + onUnbindError = () => { + this.unbindWebSocket(onUnbindMessage, onUnbindError); + this.gatewayCallbacks.destroyed(); + }; + + this.ws.addEventListener('message', onUnbindMessage); + this.ws.addEventListener('error', onUnbindError); + + this.ws.send(JSON.stringify(request)); + } + } + + disconnect() { + this.connected = false; + this.ws.close(); + } + + destroyHandle(handleId, cbs, sync) { + const syncRequest = (sync === true); + this.client.log('Destroying handle ' + handleId + ' (sync=' + syncRequest + ')'); + const callbacks = cbs || {}; + callbacks.success = (typeof callbacks.success == 'function') ? callbacks.success : this.client.noop; + callbacks.error = (typeof callbacks.error == 'function') ? callbacks.error : this.client.noop; + this.cleanupWebrtc(handleId); + if (!this.connected) { + this.client.warn('Is the gateway down? (connected=false)'); + return; + } + const request = { + janus: 'detach', + transaction: WebrtcSession.randomString(transationLength) + }; + + if (this.token) { + request.token = this.token; + } + + if (this.apisecret) { + request.apisecret = this.apisecret; + } + + if (this.websockets) { + request.session_id = this.sessionId; + request.handle_id = handleId; + this.ws.send(JSON.stringify(request)); + + Reflect.deleteProperty(this.pluginHandles, handleId); + + callbacks.success(); + } + } + + streamsDone(handleId, jsep, media, callbacks, stream) { + const pluginHandle = this.pluginHandles[handleId]; + if (!pluginHandle || !pluginHandle.webrtcStuff) { + this.client.warn('Invalid handle'); + callbacks.error('Invalid handle'); + return; + } + + const config = pluginHandle.webrtcStuff; + this.client.debug('streamsDone:', stream); + config.myStream = stream; + + const pcConfig = {iceServers: this.iceServers}; + const pcConstraints = { + optional: [{DtlsSrtpKeyAgreement: true}] + }; + + this.client.log('Creating PeerConnection'); + this.client.debug(pcConstraints); + config.pc = new window.RTCPeerConnection(pcConfig, pcConstraints); + this.client.debug(config.pc); + if (config.pc.getStats) { // FIXME + config.volume.value = 0; + config.bitrate.value = '0 kbits/sec'; + } + this.client.log('Preparing local SDP and gathering candidates (trickle=' + config.trickle + ')'); + + config.pc.onicecandidate = (event) => { + if (!event.candidate || (adapter.browserDetails.browser === 'edge' && event.candidate.candidate.indexOf('endOfCandidates') > 0)) { + this.client.log('End of candidates.'); + config.iceDone = true; + if (config.trickle === true) { + // Notify end of candidates + this.sendTrickleCandidate(handleId, {completed: true}); + } else { + // No trickle, time to send the complete SDP (including all candidates) + this.sendSDP(handleId, callbacks); + } + } else { + // JSON.stringify doesn't work on some WebRTC objects anymore + // See https://code.google.com/p/chromium/issues/detail?id=467366 + const candidate = { + candidate: event.candidate.candidate, + sdpMid: event.candidate.sdpMid, + sdpMLineIndex: event.candidate.sdpMLineIndex + }; + + if (config.trickle === true) { + // Send candidate + this.sendTrickleCandidate(handleId, candidate); + } + } + }; + + if (stream) { + this.client.log('Adding local stream'); + config.pc.addStream(stream); + pluginHandle.onlocalstream(stream); + } + + config.pc.onaddstream = (remoteStream) => { + this.client.log('Handling Remote Stream'); + this.client.debug(remoteStream); + config.remoteStream = remoteStream; + pluginHandle.onremotestream(remoteStream.stream); + }; + + // Any data channel to create? + if (this.isDataEnabled(media)) { + this.client.log('Creating data channel'); + const onDataChannelMessage = (event) => { + this.client.log('Received message on data channel: ' + event.data); + pluginHandle.ondata(event.data); // FIXME + }; + + const onDataChannelStateChange = () => { + const dcState = config.dataChannel ? config.dataChannel.readyState : 'null'; + this.client.log('State change on data channel: ' + dcState); + if (dcState === 'open') { + pluginHandle.ondataopen(); // FIXME + } + }; + + const onDataChannelError = (error) => { + this.client.error('Got error on data channel:', error); + + // TODO + }; + + // Until we implement the proxying of open requests within the this.client core, we open a channel ourselves whatever the case + config.dataChannel = config.pc.createDataChannel('this.clientDataChannel', {ordered: false}); // FIXME Add options (ordered, maxRetransmits, etc.) + config.dataChannel.onmessage = onDataChannelMessage; + config.dataChannel.onopen = onDataChannelStateChange; + config.dataChannel.onclose = onDataChannelStateChange; + config.dataChannel.onerror = onDataChannelError; + } + + // Create offer/answer now DO I WANT THIS?? + if (jsep) { + config.pc.setRemoteDescription( + new RTCSessionDescription(jsep), + () => { + this.client.log('Remote description accepted!'); + this.createAnswer(handleId, media, callbacks); + }, callbacks.error); + } else { + this.createOffer(handleId, media, callbacks); + } + } + + prepareWebrtc(handleId, cbs) { + const callbacks = cbs || {}; + callbacks.success = (typeof cbs.success == 'function') ? cbs.success : this.client.noop; + callbacks.error = (typeof cbs.error == 'function') ? cbs.error : this.webrtcError; + const jsep = callbacks.jsep; + const media = callbacks.media; + const pluginHandle = this.pluginHandles[handleId]; + + if (!pluginHandle || !pluginHandle.webrtcStuff) { + this.client.warn('Invalid handle'); + callbacks.error('Invalid handle'); + return; + } + + const config = pluginHandle.webrtcStuff; + + // Are we updating a session? + if (config.pc) { + this.client.log('Updating existing media session'); + + // Create offer/answer now + if (jsep) { + config.pc.setRemoteDescription( + new window.RTCSessionDescription(jsep), + () => { + this.client.log('Remote description accepted!'); + this.createAnswer(handleId, media, callbacks); + }, callbacks.error); + } else { + this.createOffer(handleId, media, callbacks); + } + return; + } + + // Was a MediaStream object passed, or do we need to take care of that? + if (callbacks.stream) { + const stream = callbacks.stream; + this.client.log('MediaStream provided by the application'); + this.client.debug(stream); + + // Skip the getUserMedia part + config.streamExternal = true; + this.streamsDone(handleId, jsep, media, callbacks, stream); + return; + } + + config.trickle = this.isTrickleEnabled(callbacks.trickle); + if (this.isAudioSendEnabled(media) || this.isVideoSendEnabled(media)) { + let constraints = {mandatory: {}, optional: []}; + pluginHandle.consentDialog(true); + + let audioSupport = this.isAudioSendEnabled(media); + if (audioSupport === true && media) { + if (typeof media.audio === 'object') { + audioSupport = media.audio; + } + } + + let videoSupport = this.isVideoSendEnabled(media); + if (videoSupport === true && media) { + if (media.video && media.video !== 'screen' && media.video !== 'window') { + let width = 0; + let height = 0; + let maxHeight = 0; + + if (media.video === 'lowres') { + // Small resolution, 4:3 + height = 240; + maxHeight = 240; + width = 320; + } else if (media.video === 'lowres-16:9') { + // Small resolution, 16:9 + height = 180; + maxHeight = 180; + width = 320; + } else if (media.video === 'hires' || media.video === 'hires-16:9') { + // High resolution is only 16:9 + height = 720; + maxHeight = 720; + width = 1280; + if (navigator.mozGetUserMedia) { + const firefoxVer = parseInt(window.navigator.userAgent.match(/Firefox\/(.*)/)[1], 10); + if (firefoxVer < 38) { + // Unless this is and old Firefox, which doesn't support it + this.client.warn(media.video + ' unsupported, falling back to stdres (old Firefox)'); + height = 480; + maxHeight = 480; + width = 640; + } + } + } else if (media.video === 'stdres') { + // Normal resolution, 4:3 + height = 480; + maxHeight = 480; + width = 640; + } else if (media.video === 'stdres-16:9') { + // Normal resolution, 16:9 + height = 360; + maxHeight = 360; + width = 640; + } else { + this.client.log('Default video setting (' + media.video + ') is stdres 4:3'); + height = 480; + maxHeight = 480; + width = 640; + } + + this.client.log('Adding media constraint ' + media.video); + + if (navigator.mozGetUserMedia) { + const firefoxVer = parseInt(window.navigator.userAgent.match(/Firefox\/(.*)/)[1], 10); + if (firefoxVer < 38) { + videoSupport = { + require: ['height', 'width'], + height: {max: maxHeight, min: height}, + width: {max: width, min: width} + }; + } else { + // http://stackoverflow.com/questions/28282385/webrtc-firefox-constraints/28911694#28911694 + // https://github.com/meetecho/janus-gateway/pull/246 + videoSupport = { + height: {ideal: height}, + width: {ideal: width} + }; + } + } else { + videoSupport = { + mandatory: { + maxHeight, + minHeight: height, + maxWidth: width, + minWidth: width + }, + optional: [] + }; + } + + if (typeof media.video === 'object') { + videoSupport = media.video; + } + + this.client.debug(videoSupport); + } else if (media.video === 'screen' || media.video === 'window') { + // Not a webcam, but screen capture + if (window.location.protocol !== 'https:') { + // Screen sharing mandates HTTPS + this.client.warn('Screen sharing only works on HTTPS, try the https:// version of this page'); + pluginHandle.consentDialog(false); + callbacks.error('Screen sharing only works on HTTPS, try the https:// version of this page'); + return; + } + + // We're going to try and use the extension for Chrome 34+, the old approach + // for older versions of Chrome, or the experimental support in Firefox 33+ + const cache = {}; + const self = this; + + function callbackUserMedia(error, stream) { + pluginHandle.consentDialog(false); + if (error) { + callbacks.error({code: error.code, name: error.name, message: error.message}); + } else { + self.streamsDone(handleId, jsep, media, callbacks, stream); + } + } + + function getScreenMedia(constraint, gsmCallback) { + this.client.log('Adding media constraint (screen capture)'); + this.client.debug(constraint); + navigator.mediaDevices.getUserMedia(constraint). + then((stream) => { + gsmCallback(null, stream); + }). + catch((error) => { + pluginHandle.consentDialog(false); + gsmCallback(error); + }); + } + + if (window.navigator.userAgent.match('Chrome')) { + const chromever = parseInt(window.navigator.userAgent.match(/Chrome\/(.*) /)[1], 10); + let maxver = 33; + + if (window.navigator.userAgent.match('Linux')) { + maxver = 35; // 'known' crash in chrome 34 and 35 on linux + } + + if (chromever >= 26 && chromever <= maxver) { + // Chrome 26->33 requires some awkward chrome://flags manipulation + constraints = { + video: { + mandatory: { + googLeakyBucket: true, + maxWidth: window.screen.width, + maxHeight: window.screen.height, + maxFrameRate: 3, + chromeMediaSource: 'screen' + } + }, + audio: this.isAudioSendEnabled(media) + }; + getScreenMedia(constraints, callbackUserMedia); + } else { + // Chrome 34+ requires an extension + var pending = window.setTimeout( + () => { + const error = new Error('NavigatorUserMediaError'); + error.name = 'The required Chrome extension is not installed: click here to install it. (NOTE: this will need you to refresh the page)'; + pluginHandle.consentDialog(false); + return callbacks.error(error); + }, 1000); + cache[pending] = [callbackUserMedia, null]; + window.postMessage({ + type: 'janusGetScreen', + id: pending + }, '*'); + } + } else if (window.navigator.userAgent.match('Firefox')) { + const ffver = parseInt(window.navigator.userAgent.match(/Firefox\/(.*)/)[1], 10); + if (ffver >= 33) { + // Firefox 33+ has experimental support for screen sharing + constraints = { + video: { + mozMediaSource: media.video, + mediaSource: media.video + }, + audio: this.isAudioSendEnabled(media) + }; + getScreenMedia(constraints, (err, stream) => { + callbackUserMedia(err, stream); + + // Workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=1045810 + if (!err) { + let lastTime = stream.currentTime; + const polly = window.setInterval(() => { + if (!stream) { + window.clearInterval(polly); + } + + if (stream.currentTime === lastTime) { + window.clearInterval(polly); + if (stream.onended) { + stream.onended(); + } + } + + lastTime = stream.currentTime; + }, 500); + } + }); + } else { + const error = new Error('NavigatorUserMediaError'); + error.name = 'Your version of Firefox does not support screen sharing, please install Firefox 33 (or more recent versions)'; + pluginHandle.consentDialog(false); + callbacks.error(error); + return; + } + } + + // Wait for events from the Chrome Extension + window.addEventListener('message', (event) => { + if (event.origin !== window.location.origin) { + return; + } + if (event.data.type === 'mattermostGotScreen' && cache[event.data.id]) { + const data = cache[event.data.id]; + const callback = data[0]; + + Reflect.deleteProperty(cache, event.data.id); + + if (event.data.sourceId === '') { + // user canceled + const error = new Error('NavigatorUserMediaError'); + error.name = 'You cancelled the request for permission, giving up...'; + pluginHandle.consentDialog(false); + callbacks.error(error); + } else { + constraints = { + audio: this.isAudioSendEnabled(media), + video: { + mandatory: { + chromeMediaSource: 'desktop', + maxWidth: window.screen.width, + maxHeight: window.screen.height, + maxFrameRate: 3 + }, + optional: [ + {googLeakyBucket: true}, + {googTemporalLayeredScreencast: true} + ] + } + }; + constraints.video.mandatory.chromeMediaSourceId = event.data.sourceId; + getScreenMedia(constraints, callback); + } + } else if (event.data.type === 'mattermostGetScreenPending') { + window.clearTimeout(event.data.id); + } + }); + return; + } + } + + // If we got here, we're not screensharing + if (!media || media.video !== 'screen') { + // Check whether all media sources are actually available or not + navigator.mediaDevices.enumerateDevices().then((devices) => { + const audioExist = devices.some((device) => { + return device.kind === 'audioinput'; + }); + + const videoExist = devices.some((device) => { + return device.kind === 'videoinput'; + }); + + // Check whether a missing device is really a problem + const audioSend = this.isAudioSendEnabled(media); + const videoSend = this.isVideoSendEnabled(media); + + if (audioSend || videoSend) { + // We need to send either audio or video + const haveAudioDevice = audioSend ? audioExist : false; + const haveVideoDevice = videoSend ? videoExist : false; + + if (!haveAudioDevice && !haveVideoDevice) { + // FIXME Should we really give up, or just assume recvonly for both? + pluginHandle.consentDialog(false); + callbacks.error('No capture device found'); + return false; + } + } + + navigator.mediaDevices.getUserMedia({ + audio: audioExist ? audioSupport : false, + video: videoExist ? videoSupport : false + }). + then((stream) => { + pluginHandle.consentDialog(false); + this.streamsDone(handleId, jsep, media, callbacks, stream); + }). + catch((error) => { + pluginHandle.consentDialog(false); + callbacks.error({ + code: error.code, + name: error.name, + message: error.message + }); + }); + + return true; + }). + catch((error) => { + pluginHandle.consentDialog(false); + callbacks.error('enumerateDevices error', error); + }); + } + } else { + // No need to do a getUserMedia, create offer/answer right away + this.streamsDone(handleId, jsep, media, callbacks); + } + } + + prepareWebrtcPeer(handleId, cbs) { + const callbacks = cbs || {}; + callbacks.success = (typeof cbs.success == 'function') ? cbs.success : this.client.noop; + callbacks.error = (typeof cbs.error == 'function') ? cbs.error : this.webrtcError; + + const jsep = callbacks.jsep; + const pluginHandle = this.pluginHandles[handleId]; + + if (!pluginHandle || !pluginHandle.webrtcStuff) { + this.client.warn('Invalid handle'); + callbacks.error('Invalid handle'); + return; + } + + const config = pluginHandle.webrtcStuff; + + if (jsep) { + if (config.pc === null) { + this.client.warn('Wait, no PeerConnection?? if this is an answer, use createAnswer and not handleRemoteJsep'); + callbacks.error('No PeerConnection: if this is an answer, use createAnswer and not handleRemoteJsep'); + return; + } + config.pc.setRemoteDescription( + new window.RTCSessionDescription(jsep), + () => { + this.client.log('Remote description accepted!'); + callbacks.success(); + }, callbacks.error); + } else { + callbacks.error('Invalid JSEP'); + } + } + + createOffer(handleId, media, cbs) { + const callbacks = cbs || {}; + callbacks.success = (typeof cbs.success == 'function') ? cbs.success : this.client.noop; + callbacks.error = (typeof cbs.error == 'function') ? cbs.error : this.client.noop; + + const pluginHandle = this.pluginHandles[handleId]; + if (!pluginHandle || !pluginHandle.webrtcStuff) { + this.client.warn('Invalid handle'); + callbacks.error('Invalid handle'); + return; + } + + const config = pluginHandle.webrtcStuff; + this.client.log('Creating offer (iceDone=' + config.iceDone + ')'); + + // https://code.google.com/p/webrtc/issues/detail?id=3508 + let mediaConstraints = null; + const browser = adapter.browserDetails.browser; + if (browser === 'firefox' || browser === 'edge') { + mediaConstraints = { + offerToReceiveAudio: this.isAudioRecvEnabled(media), + offerToReceiveVideo: this.isVideoRecvEnabled(media) + }; + } else { + mediaConstraints = { + mandatory: { + OfferToReceiveAudio: this.isAudioRecvEnabled(media), + OfferToReceiveVideo: this.isVideoRecvEnabled(media) + } + }; + } + + this.client.debug(mediaConstraints); + config.pc.createOffer( + (offer) => { + this.client.debug(offer); + + if (!config.mySdp) { + this.client.log('Setting local description'); + config.mySdp = offer.sdp; + config.pc.setLocalDescription(offer); + } + + if (!config.iceDone && !config.trickle) { + // Don't do anything until we have all candidates + this.client.log('Waiting for all candidates...'); + return; + } + + if (config.sdpSent) { + this.client.log('Offer already sent, not sending it again'); + return; + } + + this.client.log('Offer ready'); + this.client.debug(callbacks); + config.sdpSent = true; + + // JSON.stringify doesn't work on some WebRTC objects anymore + // See https://code.google.com/p/chromium/issues/detail?id=467366 + const jsep = { + type: offer.type, + sdp: offer.sdp + }; + callbacks.success(jsep); + }, callbacks.error, mediaConstraints); + } + + createAnswer(handleId, media, cbs) { + const callbacks = cbs || {}; + callbacks.success = (typeof cbs.success == 'function') ? cbs.success : this.client.noop; + callbacks.error = (typeof cbs.error == 'function') ? cbs.error : this.client.noop; + + const pluginHandle = this.pluginHandles[handleId]; + if (!pluginHandle || !pluginHandle.webrtcStuff) { + this.client.warn('Invalid handle'); + callbacks.error('Invalid handle'); + return; + } + + const config = pluginHandle.webrtcStuff; + this.client.log('Creating answer (iceDone=' + config.iceDone + ')'); + + let mediaConstraints = null; + const browser = adapter.browserDetails.browser; + if (browser === 'firefox' || browser === 'edge') { + mediaConstraints = { + offerToReceiveAudio: this.isAudioRecvEnabled(media), + offerToReceiveVideo: this.isVideoRecvEnabled(media) + }; + } else { + mediaConstraints = { + mandatory: { + OfferToReceiveAudio: this.isAudioRecvEnabled(media), + OfferToReceiveVideo: this.isVideoRecvEnabled(media) + } + }; + } + this.client.debug(mediaConstraints); + config.pc.createAnswer( + (answer) => { + this.client.debug(answer); + if (!config.mySdp) { + this.client.log('Setting local description'); + config.mySdp = answer.sdp; + config.pc.setLocalDescription(answer); + } + if (!config.iceDone && !config.trickle) { + // Don't do anything until we have all candidates + this.client.log('Waiting for all candidates...'); + return; + } + if (config.sdpSent) { // FIXME badly + this.client.log('Answer already sent, not sending it again'); + return; + } + config.sdpSent = true; + + // JSON.stringify doesn't work on some WebRTC objects anymore + // See https://code.google.com/p/chromium/issues/detail?id=467366 + const jsep = { + type: answer.type, + sdp: answer.sdp + }; + callbacks.success(jsep); + }, callbacks.error, mediaConstraints); + } + + sendSDP(handleId, cbs) { + const callbacks = cbs || {}; + callbacks.success = (typeof cbs.success == 'function') ? cbs.success : this.client.noop; + callbacks.error = (typeof cbs.error == 'function') ? cbs.error : this.client.noop; + + const pluginHandle = this.pluginHandles[handleId]; + if (!pluginHandle || !pluginHandle.webrtcStuff) { + this.client.warn('Invalid handle, not sending anything'); + return; + } + + const config = pluginHandle.webrtcStuff; + this.client.log('Sending offer/answer SDP...'); + if (!config.mySdp) { + this.client.warn('Local SDP instance is invalid, not sending anything...'); + return; + } + + config.mySdp = { + type: config.pc.localDescription.type, + sdp: config.pc.localDescription.sdp + }; + + if (config.sdpSent) { + this.client.log('Offer/Answer SDP already sent, not sending it again'); + return; + } + + if (config.trickle === false) { + config.mySdp.trickle = false; + } + this.client.debug(callbacks); + config.sdpSent = true; + callbacks.success(config.mySdp); + } + + getVolume(handleId) { + const pluginHandle = this.pluginHandles[handleId]; + if (!pluginHandle || !pluginHandle.webrtcStuff) { + this.client.warn('Invalid handle'); + return 0; + } + + const config = pluginHandle.webrtcStuff; + const browser = adapter.browserDetails.browser; + + // Start getting the volume, if getStats is supported + if (config.pc.getStats && browser === 'chrome') { // FIXME + if (!config.remoteStream) { + this.client.warn('Remote stream unavailable'); + return 0; + } + + // http://webrtc.googlecode.com/svn/trunk/samples/js/demos/html/constraints-and-stats.html + if (!config.volume.timer) { + this.client.log('Starting volume monitor'); + config.volume.timer = setInterval(() => { + config.pc.getStats((stats) => { + const results = stats.result(); + for (let i = 0; i < results.length; i++) { + const res = results[i]; + if (res.type === 'ssrc' && res.stat('audioOutputLevel')) { + config.volume.value = res.stat('audioOutputLevel'); + } + } + }); + }, 200); + return 0; // We don't have a volume to return yet + } + return config.volume.value; + } + + this.client.log('Getting the remote volume unsupported by browser'); + return 0; + } + + isMuted(handleId, video) { + const pluginHandle = this.pluginHandles[handleId]; + if (!pluginHandle || !pluginHandle.webrtcStuff) { + this.client.warn('Invalid handle'); + return true; + } + + const config = pluginHandle.webrtcStuff; + + if (!config.pc) { + this.client.warn('Invalid PeerConnection'); + return true; + } + + if (!config.myStream) { + this.client.warn('Invalid local MediaStream'); + return true; + } + + if (video) { + // Check video track + if (!config.myStream.getVideoTracks() || config.myStream.getVideoTracks().length === 0) { + this.client.warn('No video track'); + return true; + } + return !config.myStream.getVideoTracks()[0].enabled; + } + + // Check audio track + if (!config.myStream.getAudioTracks() || config.myStream.getAudioTracks().length === 0) { + this.client.warn('No audio track'); + return true; + } + return !config.myStream.getAudioTracks()[0].enabled; + } + + mute(handleId, video, mute) { + const pluginHandle = this.pluginHandles[handleId]; + if (!pluginHandle || !pluginHandle.webrtcStuff) { + this.client.warn('Invalid handle'); + return false; + } + + const config = pluginHandle.webrtcStuff; + if (!config.pc) { + this.client.warn('Invalid PeerConnection'); + return false; + } + + if (!config.myStream) { + this.client.warn('Invalid local MediaStream'); + return false; + } + + if (video) { + // Mute/unmute video track + if (!config.myStream.getVideoTracks() || config.myStream.getVideoTracks().length === 0) { + this.client.warn('No video track'); + return false; + } + config.myStream.getVideoTracks()[0].enabled = mute; + return true; + } + + // Mute/unmute audio track + if (!config.myStream.getAudioTracks() || config.myStream.getAudioTracks().length === 0) { + this.client.warn('No audio track'); + return false; + } + config.myStream.getAudioTracks()[0].enabled = mute; + return true; + } + + getBitrate(handleId) { + const pluginHandle = this.pluginHandles[handleId]; + if (!pluginHandle || !pluginHandle.webrtcStuff) { + this.client.warn('Invalid handle'); + return 'Invalid handle'; + } + + const config = pluginHandle.webrtcStuff; + if (!config.pc) { + return 'Invalid PeerConnection'; + } + + // Start getting the bitrate, if getStats is supported + const browser = adapter.browserDetails.browser; + if (config.pc.getStats && browser === 'chrome') { + // Do it the Chrome way + if (!config.remoteStream) { + this.client.warn('Remote stream unavailable'); + return 'Remote stream unavailable'; + } + + // http://webrtc.googlecode.com/svn/trunk/samples/js/demos/html/constraints-and-stats.html + if (!config.bitrate.timer) { + this.client.log('Starting bitrate timer (Chrome)'); + config.bitrate.timer = setInterval(() => { + config.pc.getStats((stats) => { + const results = stats.result(); + for (let i = 0; i < results.length; i++) { + const res = results[i]; + if (res.type === 'ssrc' && res.stat('googFrameHeightReceived')) { + config.bitrate.bsnow = res.stat('bytesReceived'); + config.bitrate.tsnow = res.timestamp; + if (config.bitrate.bsbefore === null || config.bitrate.tsbefore === null) { + // Skip this round + config.bitrate.bsbefore = config.bitrate.bsnow; + config.bitrate.tsbefore = config.bitrate.tsnow; + } else { + // Calculate bitrate + var bitRate = Math.round(((config.bitrate.bsnow - config.bitrate.bsbefore) * 8) / (config.bitrate.tsnow - config.bitrate.tsbefore)); + config.bitrate.value = bitRate + ' kbits/sec'; + + //~ this.client.log('Estimated bitrate is ' + config.bitrate.value); + config.bitrate.bsbefore = config.bitrate.bsnow; + config.bitrate.tsbefore = config.bitrate.tsnow; + } + } + } + }); + }, 1000); + return '0 kbits/sec'; // We don't have a bitrate value yet + } + return config.bitrate.value; + } else if (config.pc.getStats && browser === 'firefox') { + // Do it the Firefox way + if (!config.remoteStream || !config.remoteStream.stream) { + this.client.warn('Remote stream unavailable'); + return 'Remote stream unavailable'; + } + + const videoTracks = config.remoteStream.stream.getVideoTracks(); + if (!videoTracks || videoTracks.length < 1) { + this.client.warn('No video track'); + return 'No video track'; + } + + // https://github.com/muaz-khan/getStats/blob/master/getStats.js + if (!config.bitrate.timer) { + this.client.log('Starting bitrate timer (Firefox)'); + config.bitrate.timer = setInterval(() => { + // We need a helper callback + function cb(res) { + if (!res || res.inbound_rtp_video_1 == null || res.inbound_rtp_video_1 == null) { + config.bitrate.value = 'Missing inbound_rtp_video_1'; + return; + } + + config.bitrate.bsnow = res.inbound_rtp_video_1.bytesReceived; + config.bitrate.tsnow = res.inbound_rtp_video_1.timestamp; + + if (config.bitrate.bsbefore === null || config.bitrate.tsbefore === null) { + // Skip this round + config.bitrate.bsbefore = config.bitrate.bsnow; + config.bitrate.tsbefore = config.bitrate.tsnow; + } else { + // Calculate bitrate + var bitRate = Math.round(((config.bitrate.bsnow - config.bitrate.bsbefore) * 8) / (config.bitrate.tsnow - config.bitrate.tsbefore)); + config.bitrate.value = bitRate + ' kbits/sec'; + config.bitrate.bsbefore = config.bitrate.bsnow; + config.bitrate.tsbefore = config.bitrate.tsnow; + } + } + + // Actually get the stats + config.pc.getStats(videoTracks[0], (stats) => { + cb(stats); + }, cb); + }, 1000); + return '0 kbits/sec'; // We don't have a bitrate value yet + } + return config.bitrate.value; + } + + this.client.warn('Getting the video bitrate unsupported by browser'); + return 'Feature unsupported by browser'; + } + + webrtcError(error) { + this.client.error('WebRTC error:', error); + } + + cleanupWebrtc(handleId, hangupRequest) { + this.client.log('Cleaning WebRTC stuff'); + const pluginHandle = this.pluginHandles[handleId]; + if (!pluginHandle) { + // Nothing to clean + return; + } + + const config = pluginHandle.webrtcStuff; + if (config) { + if (hangupRequest === true) { + // Send a hangup request (we don't really care about the response) + const request = { + janus: 'hangup', + transaction: WebrtcSession.randomString(transationLength) + }; + + if (this.token) { + request.token = this.token; + } + + if (this.apisecret) { + request.apisecret = this.apisecret; + } + + this.client.debug('Sending hangup request (handle=' + handleId + '):'); + this.client.debug(request); + if (this.websockets) { + request.session_id = this.sessionId; + request.handle_id = handleId; + this.ws.send(JSON.stringify(request)); + } + } + + // Cleanup stack + config.remoteStream = null; + if (config.volume.timer) { + clearInterval(config.volume.timer); + } + + config.volume.value = null; + if (config.bitrate.timer) { + clearInterval(config.bitrate.timer); + } + + config.bitrate.timer = null; + config.bitrate.bsnow = null; + config.bitrate.bsbefore = null; + config.bitrate.tsnow = null; + config.bitrate.tsbefore = null; + config.bitrate.value = null; + + try { + // Try a MediaStream.stop() first + if (!config.streamExternal && config.myStream) { + this.client.log('Stopping local stream'); + config.myStream.stop(); + } + } catch (e) { + // Do nothing if this fails + } + + try { + // Try a MediaStreamTrack.stop() for each track as well + if (!config.streamExternal && config.myStream) { + this.client.log('Stopping local stream tracks'); + WebrtcSession.stopMediaStream(config.myStream); + } + } catch (e) { + // Do nothing if this fails + } + + config.streamExternal = false; + config.myStream = null; + + // Close PeerConnection + try { + config.pc.close(); + } catch (e) { + // Do nothing + } + config.pc = null; + config.mySdp = null; + config.iceDone = false; + config.sdpSent = false; + config.dataChannel = null; + config.dtmfSender = null; + } + pluginHandle.oncleanup(); + } + + isAudioSendEnabled(media) { + this.client.debug('isAudioSendEnabled:', media); + if (!media) { + return true; // Default + } + + if (media.audio === false) { + return false; // Generic audio has precedence + } + + if (!media.audioSend) { + return true; // Default + } + + return (media.audioSend === true); + } + + isAudioRecvEnabled(media) { + this.client.debug('isAudioRecvEnabled:', media); + if (!media) { + return true; // Default + } + + if (media.audio === false) { + return false; // Generic audio has precedence + } + + if (!media.audioRecv) { + return true; // Default + } + + return (media.audioRecv === true); + } + + isVideoSendEnabled(media) { + this.client.debug('isVideoSendEnabled:', media); + const browser = adapter.browserDetails.browser; + if (browser === 'edge') { + this.client.warn("Edge doesn't support compatible video yet"); + return false; + } + + if (!media) { + return true; // Default + } + + if (media.video === false) { + return false; // Generic video has precedence + } + + if (!media.videoSend) { + return true; // Default + } + + return (media.videoSend === true); + } + + isVideoRecvEnabled(media) { + this.client.debug('isVideoRecvEnabled:', media); + const browser = adapter.browserDetails.browser; + if (browser === 'edge') { + this.client.warn("Edge doesn't support compatible video yet"); + return false; + } + + if (!media) { + return true; // Default + } + + if (media.video === false) { + return false; // Generic video has precedence + } + + if (!media.videoRecv) { + return true; // Default + } + + return (media.videoRecv === true); + } + + isDataEnabled(media) { + this.client.debug('isDataEnabled:', media); + const browser = adapter.browserDetails.browser; + if (browser === 'edge') { + this.client.warn("Edge doesn't support data channels yet"); + return false; + } + + if (!media) { + return false; // Default + } + + return (media.data === true); + } + + isTrickleEnabled(trickle) { + this.client.debug('isTrickleEnabled:', trickle); + if (!trickle) { + return true; // Default is true + } + + return (trickle === true); + } + + unbindWebSocket = (onUnbindMessage, onUnbindError) => { + for (var eventName in this.wsHandlers) { + if (this.wsHandlers.hasOwnProperty(eventName)) { + this.ws.removeEventListener(eventName, this.wsHandlers[eventName]); + } + } + this.ws.removeEventListener('message', onUnbindMessage); + this.ws.removeEventListener('error', onUnbindError); + if (this.wsKeepaliveTimeoutId) { + clearTimeout(this.wsKeepaliveTimeoutId); + } + }; +} \ No newline at end of file diff --git a/webapp/components/admin_console/admin_sidebar.jsx b/webapp/components/admin_console/admin_sidebar.jsx index 1e74df05f7..8600e1e8cf 100644 --- a/webapp/components/admin_console/admin_sidebar.jsx +++ b/webapp/components/admin_console/admin_sidebar.jsx @@ -264,7 +264,7 @@ export default class AdminSidebar extends React.Component { title={ } /> diff --git a/webapp/components/admin_console/webrtc_settings.jsx b/webapp/components/admin_console/webrtc_settings.jsx index eac075bfaf..19423cf56f 100644 --- a/webapp/components/admin_console/webrtc_settings.jsx +++ b/webapp/components/admin_console/webrtc_settings.jsx @@ -15,10 +15,23 @@ export default class WebrtcSettings extends AdminSettings { constructor(props) { super(props); + this.canSave = this.canSave.bind(this); + this.handleAgreeChange = this.handleAgreeChange.bind(this); + this.getConfigFromState = this.getConfigFromState.bind(this); this.renderSettings = this.renderSettings.bind(this); } + canSave() { + return !this.state.enableWebrtc || this.state.agree; + } + + handleAgreeChange(e) { + this.setState({ + agree: e.target.checked + }); + } + getConfigFromState(config) { config.WebrtcSettings.Enable = this.state.enableWebrtc; config.WebrtcSettings.GatewayWebsocketUrl = this.state.gatewayWebsocketUrl; @@ -44,7 +57,8 @@ export default class WebrtcSettings extends AdminSettings { stunURI: settings.StunURI, turnURI: settings.TurnURI, turnUsername: settings.TurnUsername, - turnSharedKey: settings.TurnSharedKey + turnSharedKey: settings.TurnSharedKey, + agree: settings.Enable }; } @@ -53,13 +67,32 @@ export default class WebrtcSettings extends AdminSettings {

); } renderSettings() { + const tosCheckbox = ( +
+
+
+ + +
+
+ ); + return ( + {tosCheckbox} :/admin. Make sure you use HTTP or HTTPS in your URL depending on your server configuration. Mattermost WebRTC uses this URL to obtain valid tokens for each peer to establish the connection.' /> } @@ -167,7 +201,7 @@ export default class WebrtcSettings extends AdminSettings { } placeholder={Utils.localizeMessage('admin.webrtc.turnUriExample', 'Ex "turn:webrtc.mattermost.com:5349"')} helpText={ - @@ -186,7 +220,7 @@ export default class WebrtcSettings extends AdminSettings { } placeholder={Utils.localizeMessage('admin.webrtc.turnUsernameExample', 'Ex "myusername"')} helpText={ - @@ -205,7 +239,7 @@ export default class WebrtcSettings extends AdminSettings { } placeholder={Utils.localizeMessage('admin.webrtc.turnSharedKeyExample', 'Ex "bXdkOWQxc3d0Ynk3emY5ZmsxZ3NtazRjaWg="')} helpText={ - diff --git a/webapp/components/channel_header.jsx b/webapp/components/channel_header.jsx index add0889139..65c151d8ac 100644 --- a/webapp/components/channel_header.jsx +++ b/webapp/components/channel_header.jsx @@ -21,21 +21,26 @@ import UserStore from 'stores/user_store.jsx'; import TeamStore from 'stores/team_store.jsx'; import SearchStore from 'stores/search_store.jsx'; import PreferenceStore from 'stores/preference_store.jsx'; +import WebrtcStore from 'stores/webrtc_store.jsx'; import AppDispatcher from '../dispatcher/app_dispatcher.jsx'; +import * as GlobalActions from 'actions/global_actions.jsx'; +import * as WebrtcActions from 'actions/webrtc_actions.jsx'; import * as Utils from 'utils/utils.jsx'; import * as TextFormatting from 'utils/text_formatting.jsx'; import Client from 'client/web_client.jsx'; import * as AsyncClient from 'utils/async_client.jsx'; import {getFlaggedPosts} from 'actions/post_actions.jsx'; -import {ActionTypes, Constants, Preferences} from 'utils/constants.jsx'; +import {ActionTypes, Constants, Preferences, UserStatuses} from 'utils/constants.jsx'; import React from 'react'; import {FormattedMessage} from 'react-intl'; import {browserHistory} from 'react-router/es6'; import {Tooltip, OverlayTrigger, Popover} from 'react-bootstrap'; +const PreReleaseFeatures = Constants.PRE_RELEASE_FEATURES; + export default class ChannelHeader extends React.Component { constructor(props) { super(props); @@ -47,6 +52,8 @@ export default class ChannelHeader extends React.Component { this.hideRenameChannelModal = this.hideRenameChannelModal.bind(this); this.openRecentMentions = this.openRecentMentions.bind(this); this.getFlagged = this.getFlagged.bind(this); + this.initWebrtc = this.initWebrtc.bind(this); + this.onBusy = this.onBusy.bind(this); const state = this.getStateFromStores(); state.showEditChannelPurposeModal = false; @@ -64,7 +71,8 @@ export default class ChannelHeader extends React.Component { users: extraInfo.members, userCount: extraInfo.member_count, currentUser: UserStore.getCurrentUser(), - enableFormatting: PreferenceStore.getBool(Preferences.CATEGORY_ADVANCED_SETTINGS, 'formatting', true) + enableFormatting: PreferenceStore.getBool(Preferences.CATEGORY_ADVANCED_SETTINGS, 'formatting', true), + isBusy: WebrtcStore.isBusy() }; } @@ -85,6 +93,9 @@ export default class ChannelHeader extends React.Component { SearchStore.addSearchChangeListener(this.onListenerChange); PreferenceStore.addChangeListener(this.onListenerChange); UserStore.addChangeListener(this.onListenerChange); + UserStore.addStatusesChangeListener(this.onListenerChange); + WebrtcStore.addChangedListener(this.onListenerChange); + WebrtcStore.addBusyListener(this.onBusy); $('.sidebar--left .dropdown-menu').perfectScrollbar(); document.addEventListener('keydown', this.openRecentMentions); } @@ -95,6 +106,9 @@ export default class ChannelHeader extends React.Component { SearchStore.removeSearchChangeListener(this.onListenerChange); PreferenceStore.removeChangeListener(this.onListenerChange); UserStore.removeChangeListener(this.onListenerChange); + UserStore.removeStatusesChangeListener(this.onListenerChange); + WebrtcStore.removeChangedListener(this.onListenerChange); + WebrtcStore.removeBusyListener(this.onBusy); document.removeEventListener('keydown', this.openRecentMentions); } @@ -204,6 +218,17 @@ export default class ChannelHeader extends React.Component { return true; } + initWebrtc(contactId, isOnline) { + if (isOnline && !this.state.isBusy) { + GlobalActions.emitCloseRightHandSide(); + WebrtcActions.initWebrtc(contactId, true); + } + } + + onBusy(isBusy) { + this.setState({isBusy}); + } + render() { const flagIcon = Constants.FLAG_ICON_SVG; @@ -250,10 +275,12 @@ export default class ChannelHeader extends React.Component { const isAdmin = TeamStore.isTeamAdminForCurrentTeam() || UserStore.isSystemAdminForCurrentUser(); const isSystemAdmin = UserStore.isSystemAdminForCurrentUser(); const isDirect = (this.state.channel.type === 'D'); + let webrtc; if (isDirect) { + const userMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; + let contact; if (this.state.users.length > 1) { - let contact; if (this.state.users[0].id === currentId) { contact = this.state.users[1]; } else { @@ -261,6 +288,68 @@ export default class ChannelHeader extends React.Component { } channelTitle = Utils.displayUsername(contact.id); } + + const webrtcEnabled = global.mm_config.EnableWebrtc === 'true' && global.mm_license.Webrtc === 'true' && + global.mm_config.EnableDeveloper === 'true' && userMedia && Utils.isFeatureEnabled(PreReleaseFeatures.WEBRTC_PREVIEW); + + if (webrtcEnabled) { + const isOffline = UserStore.getStatus(contact.id) === UserStatuses.OFFLINE; + const busy = this.state.isBusy; + let circleClass = ''; + let webrtcMessage; + + if (isOffline || busy) { + circleClass = 'offline'; + if (busy) { + webrtcMessage = ( + + ); + } + } else { + webrtcMessage = ( + + ); + } + + webrtc = ( + + ); + } } let channelTerm = ( @@ -541,6 +630,7 @@ export default class ChannelHeader extends React.Component {
+ {webrtc}
+ ); + + if (this.props.message) { + message = this.props.message; + } + return (

- + {message}

@@ -36,5 +44,6 @@ LoadingScreen.defaultProps = { position: 'relative' }; LoadingScreen.propTypes = { - position: React.PropTypes.oneOf(['absolute', 'fixed', 'relative', 'static', 'inherit']) + position: React.PropTypes.oneOf(['absolute', 'fixed', 'relative', 'static', 'inherit']), + message: React.PropTypes.node }; diff --git a/webapp/components/navbar_dropdown.jsx b/webapp/components/navbar_dropdown.jsx index 413942865e..c29bf61c37 100644 --- a/webapp/components/navbar_dropdown.jsx +++ b/webapp/components/navbar_dropdown.jsx @@ -6,12 +6,13 @@ import * as GlobalActions from 'actions/global_actions.jsx'; import TeamStore from 'stores/team_store.jsx'; import UserStore from 'stores/user_store.jsx'; +import WebrtcStore from 'stores/webrtc_store.jsx'; import AboutBuildModal from './about_build_modal.jsx'; import TeamMembersModal from './team_members_modal.jsx'; import ToggleModalButton from './toggle_modal_button.jsx'; import UserSettingsModal from './user_settings/user_settings_modal.jsx'; -import Constants from 'utils/constants.jsx'; +import {Constants, WebrtcActionTypes} from 'utils/constants.jsx'; import {FormattedMessage} from 'react-intl'; import {Link} from 'react-router/es6'; @@ -30,6 +31,8 @@ export default class NavbarDropdown extends React.Component { this.renderCustomEmojiLink = this.renderCustomEmojiLink.bind(this); + this.handleClick = this.handleClick.bind(this); + this.state = { showUserSettingsModal: false, showAboutModal: false, @@ -38,6 +41,13 @@ export default class NavbarDropdown extends React.Component { }; } + handleClick(e) { + if (WebrtcStore.isBusy()) { + WebrtcStore.emitChanged({action: WebrtcActionTypes.IN_PROGRESS}); + e.preventDefault(); + } + } + handleAboutModal() { this.setState({showAboutModal: true}); } @@ -77,7 +87,10 @@ export default class NavbarDropdown extends React.Component { return (
  • - + - + +
    + {content} diff --git a/webapp/components/post_view/components/post.jsx b/webapp/components/post_view/components/post.jsx index 7aa0c028e0..2dce093ec8 100644 --- a/webapp/components/post_view/components/post.jsx +++ b/webapp/components/post_view/components/post.jsx @@ -118,6 +118,10 @@ export default class Post extends React.Component { return true; } + if (nextProps.isBusy !== this.props.isBusy) { + return true; + } + return false; } render() { @@ -246,6 +250,8 @@ export default class Post extends React.Component { displayNameType={this.props.displayNameType} useMilitaryTime={this.props.useMilitaryTime} isFlagged={this.props.isFlagged} + status={this.props.status} + isBusy={this.props.isBusy} /> ); let botIndicator; @@ -98,5 +100,7 @@ PostHeader.propTypes = { compactDisplay: React.PropTypes.bool, displayNameType: React.PropTypes.string, useMilitaryTime: React.PropTypes.bool.isRequired, - isFlagged: React.PropTypes.bool.isRequired + isFlagged: React.PropTypes.bool.isRequired, + status: React.PropTypes.string, + isBusy: React.PropTypes.bool }; diff --git a/webapp/components/post_view/components/post_list.jsx b/webapp/components/post_view/components/post_list.jsx index a055077033..d686b28e5a 100644 --- a/webapp/components/post_view/components/post_list.jsx +++ b/webapp/components/post_view/components/post_list.jsx @@ -316,6 +316,7 @@ export default class PostList extends React.Component { useMilitaryTime={this.props.useMilitaryTime} isFlagged={isFlagged} status={status} + isBusy={this.props.isBusy} /> ); @@ -585,5 +586,6 @@ PostList.propTypes = { useMilitaryTime: React.PropTypes.bool.isRequired, isFocusPost: React.PropTypes.bool, flaggedPosts: React.PropTypes.object, - statuses: React.PropTypes.object + statuses: React.PropTypes.object, + isBusy: React.PropTypes.bool }; diff --git a/webapp/components/post_view/post_focus_view_controller.jsx b/webapp/components/post_view/post_focus_view_controller.jsx index 7903087e96..dec4ca7098 100644 --- a/webapp/components/post_view/post_focus_view_controller.jsx +++ b/webapp/components/post_view/post_focus_view_controller.jsx @@ -9,6 +9,7 @@ import PostStore from 'stores/post_store.jsx'; import UserStore from 'stores/user_store.jsx'; import ChannelStore from 'stores/channel_store.jsx'; import PreferenceStore from 'stores/preference_store.jsx'; +import WebrtcStore from 'stores/webrtc_store.jsx'; import Constants from 'utils/constants.jsx'; const ScrollTypes = Constants.ScrollTypes; @@ -26,6 +27,7 @@ export default class PostFocusView extends React.Component { this.onStatusChange = this.onStatusChange.bind(this); this.onPreferenceChange = this.onPreferenceChange.bind(this); this.onPostListScroll = this.onPostListScroll.bind(this); + this.onBusy = this.onBusy.bind(this); const focusedPostId = PostStore.getFocusedPostId(); @@ -38,13 +40,14 @@ export default class PostFocusView extends React.Component { const joinLeaveEnabled = PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'join_leave', true); let statuses; - if (channel && channel.type !== Constants.DM_CHANNEL) { + if (channel) { statuses = Object.assign({}, UserStore.getStatuses()); } this.state = { postList: PostStore.filterPosts(focusedPostId, joinLeaveEnabled), currentUser: UserStore.getCurrentUser(), + isBusy: WebrtcStore.isBusy(), profiles, statuses, scrollType: ScrollTypes.POST, @@ -64,6 +67,7 @@ export default class PostFocusView extends React.Component { UserStore.addStatusesChangeListener(this.onStatusChange); EmojiStore.addChangeListener(this.onEmojiChange); PreferenceStore.addChangeListener(this.onPreferenceChange); + WebrtcStore.addBusyListener(this.onBusy); } componentWillUnmount() { @@ -73,6 +77,7 @@ export default class PostFocusView extends React.Component { UserStore.removeStatusesChangeListener(this.onStatusChange); EmojiStore.removeChangeListener(this.onEmojiChange); PreferenceStore.removeChangeListener(this.onPreferenceChange); + WebrtcStore.removeBusyListener(this.onBusy); } onChannelChange() { @@ -113,7 +118,7 @@ export default class PostFocusView extends React.Component { onStatusChange() { const channel = ChannelStore.getCurrent(); let statuses; - if (channel && channel.type !== Constants.DM_CHANNEL) { + if (channel) { statuses = Object.assign({}, UserStore.getStatuses()); } @@ -144,6 +149,10 @@ export default class PostFocusView extends React.Component { this.setState({scrollType: ScrollTypes.FREE}); } + onBusy(isBusy) { + this.setState({isBusy}); + } + render() { const postsToHighlight = {}; postsToHighlight[this.state.scrollPostId] = true; @@ -172,6 +181,7 @@ export default class PostFocusView extends React.Component { emojis={this.state.emojis} flaggedPosts={this.state.flaggedPosts} statuses={this.state.statuses} + isBusy={this.state.isBusy} /> ); } diff --git a/webapp/components/post_view/post_view_controller.jsx b/webapp/components/post_view/post_view_controller.jsx index 840f71f236..b96374225f 100644 --- a/webapp/components/post_view/post_view_controller.jsx +++ b/webapp/components/post_view/post_view_controller.jsx @@ -8,6 +8,7 @@ import PreferenceStore from 'stores/preference_store.jsx'; import UserStore from 'stores/user_store.jsx'; import PostStore from 'stores/post_store.jsx'; import ChannelStore from 'stores/channel_store.jsx'; +import WebrtcStore from 'stores/webrtc_store.jsx'; import * as Utils from 'utils/utils.jsx'; @@ -30,6 +31,7 @@ export default class PostViewController extends React.Component { this.onPostListScroll = this.onPostListScroll.bind(this); this.onActivate = this.onActivate.bind(this); this.onDeactivate = this.onDeactivate.bind(this); + this.onBusy = this.onBusy.bind(this); const channel = props.channel; let profiles = UserStore.getProfiles(); @@ -54,6 +56,7 @@ export default class PostViewController extends React.Component { channel, postList: PostStore.filterPosts(channel.id, joinLeaveEnabled), currentUser: UserStore.getCurrentUser(), + isBusy: WebrtcStore.isBusy(), profiles, statuses, atTop: PostStore.getVisibilityAtTop(channel.id), @@ -140,6 +143,7 @@ export default class PostViewController extends React.Component { PostStore.addChangeListener(this.onPostsChange); PostStore.addPostsViewJumpListener(this.onPostsViewJumpRequest); ChannelStore.addLastViewedListener(this.onSetNewMessageIndicator); + WebrtcStore.addBusyListener(this.onBusy); } onDeactivate() { @@ -149,6 +153,7 @@ export default class PostViewController extends React.Component { PostStore.removeChangeListener(this.onPostsChange); PostStore.removePostsViewJumpListener(this.onPostsViewJumpRequest); ChannelStore.removeLastViewedListener(this.onSetNewMessageIndicator); + WebrtcStore.removeBusyListener(this.onBusy); } componentWillReceiveProps(nextProps) { @@ -217,6 +222,10 @@ export default class PostViewController extends React.Component { } } + onBusy(isBusy) { + this.setState({isBusy}); + } + shouldComponentUpdate(nextProps, nextState) { if (nextProps.active !== this.props.active) { return true; @@ -294,6 +303,10 @@ export default class PostViewController extends React.Component { return true; } + if (nextState.isBusy !== this.state.isBusy) { + return true; + } + return false; } @@ -326,6 +339,7 @@ export default class PostViewController extends React.Component { lastViewed={this.state.lastViewed} ownNewMessage={this.state.ownNewMessage} statuses={this.state.statuses} + isBusy={this.state.isBusy} /> ); } diff --git a/webapp/components/rhs_header_post.jsx b/webapp/components/rhs_header_post.jsx index 978c58c850..d0d720bb53 100644 --- a/webapp/components/rhs_header_post.jsx +++ b/webapp/components/rhs_header_post.jsx @@ -36,7 +36,7 @@ export default class RhsHeaderPost extends React.Component { handleBack(e) { e.preventDefault(); - if (this.props.fromSearch) { + if (this.props.fromSearch || this.props.isWebrtc) { AppDispatcher.handleServerAction({ type: ActionTypes.RECEIVED_SEARCH_TERM, term: this.props.fromSearch, @@ -82,6 +82,15 @@ export default class RhsHeaderPost extends React.Component { /> ); + } else if (this.props.isWebrtc) { + backToResultsTooltip = ( + + + + ); } const expandSidebarTooltip = ( @@ -102,7 +111,7 @@ export default class RhsHeaderPost extends React.Component { ); - if (this.props.fromSearch || this.props.fromFlaggedPosts) { + if (this.props.fromSearch || this.props.fromFlaggedPosts || this.props.isWebrtc) { back = ( {name}
    ; } + let webrtc; + const userMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; + + const webrtcEnabled = global.mm_config.EnableWebrtc === 'true' && global.mm_license.Webrtc === 'true' && + global.mm_config.EnableDeveloper === 'true' && userMedia && Utils.isFeatureEnabled(PreReleaseFeatures.WEBRTC_PREVIEW); + + if (webrtcEnabled && this.props.user.id !== this.state.currentUserId) { + const isOnline = this.props.status !== UserStatuses.OFFLINE; + let webrtcMessage; + let circleClass = 'offline'; + if (isOnline && !this.props.isBusy) { + circleClass = ''; + webrtcMessage = ( + + ); + } else if (this.props.isBusy) { + webrtcMessage = ( + + ); + } + + webrtc = ( + + ); + } + var dataContent = []; dataContent.push( f !== 'WEBRTC_PREVIEW'); + } + for (const key of preReleaseFeaturesKeys) { const feature = PreReleaseFeatures[key]; @@ -329,6 +336,13 @@ export default class AdvancedSettingsDisplay extends React.Component { defaultMessage='Show experimental previews of link content, when available' /> ); + case 'WEBRTC_PREVIEW': + return ( + + ); default: return null; } diff --git a/webapp/components/webrtc/components/webrtc_header.jsx b/webapp/components/webrtc/components/webrtc_header.jsx new file mode 100644 index 0000000000..a4a9c740cc --- /dev/null +++ b/webapp/components/webrtc/components/webrtc_header.jsx @@ -0,0 +1,100 @@ +// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import Constants from 'utils/constants.jsx'; + +import {Tooltip, OverlayTrigger} from 'react-bootstrap'; +import {FormattedMessage} from 'react-intl'; + +import React from 'react'; + +export default class WebrtcHeader extends React.Component { + render() { + const title = ( + + ); + + const closeSidebarTooltip = ( + + + + ); + + const expandSidebarTooltip = ( + + + + ); + + const shrinkSidebarTooltip = ( + + + + ); + + return ( +
    + {title} +
    + + +
    +
    + ); + } +} + +WebrtcHeader.propTypes = { + username: React.PropTypes.string.isRequired, + onClose: React.PropTypes.func.isRequired, + toggleSize: React.PropTypes.function +}; diff --git a/webapp/components/webrtc/components/webrtc_notification.jsx b/webapp/components/webrtc/components/webrtc_notification.jsx new file mode 100644 index 0000000000..5456d6cb8e --- /dev/null +++ b/webapp/components/webrtc/components/webrtc_notification.jsx @@ -0,0 +1,320 @@ +// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import Client from 'client/web_client.jsx'; +import WebSocketClient from 'client/web_websocket_client.jsx'; + +import UserStore from 'stores/user_store.jsx'; +import WebrtcStore from 'stores/webrtc_store.jsx'; + +import * as GlobalActions from 'actions/global_actions.jsx'; +import * as WebrtcActions from 'actions/webrtc_actions.jsx'; +import * as Utils from 'utils/utils.jsx'; +import {Constants, WebrtcActionTypes} from 'utils/constants.jsx'; + +import React from 'react'; + +import {FormattedMessage} from 'react-intl'; + +import ring from 'images/ring.mp3'; + +const PreReleaseFeatures = Constants.PRE_RELEASE_FEATURES; + +export default class WebrtcNotification extends React.Component { + constructor() { + super(); + + this.mounted = false; + + this.closeNotification = this.closeNotification.bind(this); + this.onIncomingCall = this.onIncomingCall.bind(this); + this.onCancelCall = this.onCancelCall.bind(this); + this.onRhs = this.onRhs.bind(this); + this.handleClose = this.handleClose.bind(this); + this.handleAnswer = this.handleAnswer.bind(this); + this.handleTimeout = this.handleTimeout.bind(this); + this.stopRinging = this.stopRinging.bind(this); + this.closeRightHandSide = this.closeRightHandSide.bind(this); + + this.state = { + userCalling: null, + rhsOpened: false + }; + } + + componentDidMount() { + WebrtcStore.addNotifyListener(this.onIncomingCall); + WebrtcStore.addChangedListener(this.onCancelCall); + WebrtcStore.addRhsChangedListener(this.onRhs); + this.mounted = true; + } + + componentWillUnmount() { + WebrtcStore.removeNotifyListener(this.onIncomingCall); + WebrtcStore.removeChangedListener(this.onCancelCall); + WebrtcStore.removeRhsChangedListener(this.onRhs); + if (this.refs.ring) { + this.refs.ring.removeListener('ended', this.handleTimeout); + } + this.mounted = false; + } + + componentDidUpdate() { + if (this.state.userCalling) { + this.refs.ring.addEventListener('ended', this.handleTimeout); + } + } + + closeNotification() { + this.setState({ + userCalling: null + }); + } + + stopRinging() { + if (this.refs.ring) { + this.refs.ring.pause(); + this.refs.ring.currentTime = 0; + } + this.setState({userCalling: null}); + } + + closeRightHandSide(e) { + e.preventDefault(); + GlobalActions.emitCloseRightHandSide(); + } + + onIncomingCall(incoming) { + if (this.mounted) { + const userId = incoming.from_user_id; + const userMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; + const featureEnabled = Utils.isFeatureEnabled(PreReleaseFeatures.WEBRTC_PREVIEW); + + if (featureEnabled) { + if (WebrtcStore.isBusy()) { + WebSocketClient.sendMessage('webrtc', { + action: WebrtcActionTypes.BUSY, + from_user_id: UserStore.getCurrentId(), + to_user_id: userId + }); + this.stopRinging(); + } else if (userMedia) { + WebrtcStore.setVideoCallWith(userId); + this.setState({ + userCalling: UserStore.getProfile(userId) + }); + } else { + WebSocketClient.sendMessage('webrtc', { + action: WebrtcActionTypes.UNSUPPORTED, + from_user_id: UserStore.getCurrentId(), + to_user_id: userId + }); + this.stopRinging(); + } + } else { + WebSocketClient.sendMessage('webrtc', { + action: WebrtcActionTypes.DISABLED, + from_user_id: UserStore.getCurrentId(), + to_user_id: userId + }); + this.stopRinging(); + } + } + } + + onCancelCall(message) { + if (message && message.action !== WebrtcActionTypes.CANCEL) { + return; + } else if (message && message.action === WebrtcActionTypes.CANCEL && this.state.userCalling && message.from_user_id !== this.state.userCalling.id) { + return; + } + + WebrtcStore.setVideoCallWith(null); + this.closeNotification(); + } + + onRhs(rhsOpened) { + this.setState({rhsOpened}); + } + + handleTimeout() { + WebSocketClient.sendMessage('webrtc', { + action: WebrtcActionTypes.NO_ANSWER, + from_user_id: UserStore.getCurrentId(), + to_user_id: this.state.userCalling.id + }); + + this.onCancelCall(); + } + + handleAnswer(e) { + if (e) { + e.preventDefault(); + } + + const caller = this.state.userCalling; + if (caller) { + const callerId = caller.id; + const currentUserId = UserStore.getCurrentId(); + const message = { + action: WebrtcActionTypes.ANSWER, + from_user_id: currentUserId, + to_user_id: callerId + }; + + GlobalActions.emitCloseRightHandSide(); + WebrtcActions.initWebrtc(callerId, false); + WebSocketClient.sendMessage('webrtc', message); + + // delay till next tick (this will give time to listen for events + setTimeout(() => { + //we switch from and to user to handle the event locally + message.from_user_id = callerId; + message.to_user_id = currentUserId; + WebrtcActions.handle(message); + }, 0); + + this.closeNotification(); + } + } + + handleClose(e) { + if (e) { + e.preventDefault(); + } + if (this.state.userCalling) { + WebSocketClient.sendMessage('webrtc', { + action: WebrtcActionTypes.DECLINE, + from_user_id: UserStore.getCurrentId(), + to_user_id: this.state.userCalling.id + }); + } + + this.onCancelCall(); + } + + render() { + const user = this.state.userCalling; + if (user) { + const username = Utils.displayUsername(user.id); + const profileImgSrc = Client.getUsersRoute() + '/' + user.id + '/image?time=' + (user.update_at || new Date().getTime()); + const profileImg = ( + + ); + const answerBtn = ( + + + + + + + + + ); + + const rejectBtn = ( + + + + + + + + + ); + + const msg = ( +
    + +
    + {answerBtn} + {rejectBtn} +
    +
    + ); + + return ( +
    +
    + ); + } else if (this.state.rhsOpened && WebrtcStore.isBusy()) { + return ( +
    + + +
    + ); + } + + return
    ; + } +} diff --git a/webapp/components/webrtc/components/webrtc_sidebar.jsx b/webapp/components/webrtc/components/webrtc_sidebar.jsx new file mode 100644 index 0000000000..59c25890b4 --- /dev/null +++ b/webapp/components/webrtc/components/webrtc_sidebar.jsx @@ -0,0 +1,133 @@ +// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import $ from 'jquery'; + +import WebrtcController from '../webrtc_controller.jsx'; +import UserStore from 'stores/user_store.jsx'; +import WebrtcStore from 'stores/webrtc_store.jsx'; +import * as Utils from 'utils/utils.jsx'; + +import React from 'react'; + +export default class SidebarRight extends React.Component { + constructor(props) { + super(props); + + this.plScrolledToBottom = true; + + this.onShrink = this.onShrink.bind(this); + this.toggleSize = this.toggleSize.bind(this); + this.onInitializeVideoCall = this.onInitializeVideoCall.bind(this); + + this.doStrangeThings = this.doStrangeThings.bind(this); + + this.state = { + expanded: false, + currentUser: UserStore.getCurrentUser(), + videoCallVisible: false, + isCaller: false, + videoCallWithUserId: null + }; + } + + componentDidMount() { + WebrtcStore.addInitListener(this.onInitializeVideoCall); + this.doStrangeThings(); + } + + componentWillUnmount() { + WebrtcStore.removeInitListener(this.onInitializeVideoCall); + } + + shouldComponentUpdate(nextProps, nextState) { + return !Utils.areObjectsEqual(nextState, this.state); + } + + doStrangeThings() { + // We should have a better way to do this stuff + // Hence the function name. + $('.app__body .inner-wrap').removeClass('move--right'); + $('.app__body .inner-wrap').addClass('webrtc--show'); + $('.app__body .sidebar--left').removeClass('move--right'); + $('.app__body .webrtc').addClass('webrtc--show'); + + //$('.sidebar--right').prepend('
    '); + if (!this.state.videoCallVisible) { + $('.app__body .inner-wrap').removeClass('webrtc--show').removeClass('move--right'); + $('.app__body .webrtc').removeClass('webrtc--show'); + return ( +
    + ); + } + return null; + } + + componentDidUpdate() { + this.doStrangeThings(); + } + + onShrink() { + this.setState({expanded: false}); + } + + toggleSize(e) { + if (e) { + e.preventDefault(); + } + this.setState({expanded: !this.state.expanded}); + } + + onInitializeVideoCall(userId, isCaller) { + let expanded = this.state.expanded; + if (userId === null) { + expanded = false; + } + this.setState({ + videoCallVisible: (userId !== null), + isCaller, + videoCallWithUserId: userId, + expanded + }); + + if (userId !== null) { + this.forceUpdate(); + } + } + + render() { + let content = null; + let expandedClass = ''; + + if (this.state.expanded) { + expandedClass = 'sidebar--right--expanded'; + } + + if (this.state.videoCallVisible) { + content = ( + + ); + } + + return ( +