diff options
author | enahum <nahumhbl@gmail.com> | 2016-09-16 15:35:13 -0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2016-09-16 15:35:13 -0300 |
commit | 781ff323db4c70e4ca476f9ef13a04e5aa063585 (patch) | |
tree | a9dae870d4e750ad87ee0624d8ea859995b0dbf7 /webapp/components/user_profile.jsx | |
parent | df2d61d94175369bff5a16242f35cb6d7b62d7fb (diff) | |
download | chat-781ff323db4c70e4ca476f9ef13a04e5aa063585.tar.gz chat-781ff323db4c70e4ca476f9ef13a04e5aa063585.tar.bz2 chat-781ff323db4c70e4ca476f9ef13a04e5aa063585.zip |
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)
Diffstat (limited to 'webapp/components/user_profile.jsx')
-rw-r--r-- | webapp/components/user_profile.jsx | 105 |
1 files changed, 96 insertions, 9 deletions
diff --git a/webapp/components/user_profile.jsx b/webapp/components/user_profile.jsx index bc542165a..4007f19fb 100644 --- a/webapp/components/user_profile.jsx +++ b/webapp/components/user_profile.jsx @@ -4,22 +4,33 @@ import * as Utils from 'utils/utils.jsx'; import Client from 'client/web_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 Constants from 'utils/constants.jsx'; +const UserStatuses = Constants.UserStatuses; +const PreReleaseFeatures = Constants.PRE_RELEASE_FEATURES; import {Popover, OverlayTrigger} from 'react-bootstrap'; - -var id = 0; - -function nextId() { - id = id + 1; - return id; -} +import {FormattedMessage} from 'react-intl'; import React from 'react'; export default class UserProfile extends React.Component { constructor(props) { super(props); - this.uniqueId = nextId(); + + this.initWebrtc = this.initWebrtc.bind(this); + this.state = { + currentUserId: UserStore.getCurrentId() + }; + } + + initWebrtc() { + if (this.props.status !== UserStatuses.OFFLINE && !WebrtcStore.isBusy()) { + GlobalActions.emitCloseRightHandSide(); + WebrtcActions.initWebrtc(this.props.user.id, true); + } } shouldComponentUpdate(nextProps) { @@ -43,6 +54,14 @@ export default class UserProfile extends React.Component { return true; } + if (nextProps.status !== this.props.status) { + return true; + } + + if (nextProps.isBusy !== this.props.isBusy) { + return true; + } + return false; } @@ -68,6 +87,70 @@ export default class UserProfile extends React.Component { return <div className='user-popover'>{name}</div>; } + 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 = ( + <FormattedMessage + id='user_profile.webrtc.call' + defaultMessage='Start Video Call' + /> + ); + } else if (this.props.isBusy) { + webrtcMessage = ( + <FormattedMessage + id='user_profile.webrtc.unavailable' + defaultMessage='New call unavailable until your existing call ends' + /> + ); + } + + webrtc = ( + <div + className='webrtc__user-profile' + key='makeCall' + > + <a + href='#' + onClick={() => this.initWebrtc()} + disabled={!isOnline} + > + <svg + id='webrtc-btn' + className='webrtc__button' + xmlns='http://www.w3.org/2000/svg' + > + <circle + className={circleClass} + cx='16' + cy='16' + r='18' + > + <title> + {webrtcMessage} + </title> + </circle> + <path + className='off' + transform='scale(0.4), translate(17,16)' + d='M40 8H8c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h32c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zm-4 24l-8-6.4V32H12V16h16v6.4l8-6.4v16z' + fill='white' + /> + </svg> + </a> + </div> + ); + } + var dataContent = []; dataContent.push( <img @@ -97,6 +180,8 @@ export default class UserProfile extends React.Component { ); } + dataContent.push(webrtc); + if (global.window.mm_config.ShowEmailAddress === 'true' || UserStore.isSystemAdminForCurrentUser() || this.props.user === UserStore.getCurrentUser()) { dataContent.push( <div @@ -150,5 +235,7 @@ UserProfile.propTypes = { overwriteName: React.PropTypes.string, overwriteImage: React.PropTypes.string, disablePopover: React.PropTypes.bool, - displayNameType: React.PropTypes.string + displayNameType: React.PropTypes.string, + status: React.PropTypes.string, + isBusy: React.PropTypes.bool }; |