diff --git a/app/src/components/Containers/Me.js b/app/src/components/Containers/Me.js index 8f904e4..07022ce 100644 --- a/app/src/components/Containers/Me.js +++ b/app/src/components/Containers/Me.js @@ -2,10 +2,8 @@ import React from 'react'; import { connect } from 'react-redux'; import { withRoomContext } from '../../RoomContext'; import { withStyles } from '@material-ui/core/styles'; -import ReactTooltip from 'react-tooltip'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import { getDeviceInfo } from 'mediasoup-client'; import * as appPropTypes from '../appPropTypes'; import VideoView from '../VideoContainers/VideoView'; @@ -45,72 +43,34 @@ const styles = () => } }); -class Me extends React.PureComponent +const Me = (props) => { - state = { - controlsVisible : false - }; + const { + roomClient, + me, + activeSpeaker, + style, + advancedMode, + micProducer, + webcamProducer, + screenProducer, + classes + } = props; - handleMouseOver = () => - { - this.setState({ - controlsVisible : true - }); - }; + const videoVisible = ( + Boolean(webcamProducer) && + !webcamProducer.locallyPaused && + !webcamProducer.remotelyPaused + ); - handleMouseOut = () => - { - this.setState({ - controlsVisible : false - }); - }; + const screenVisible = ( + Boolean(screenProducer) && + !screenProducer.locallyPaused && + !screenProducer.remotelyPaused + ); - constructor(props) - { - super(props); - - this._mounted = false; - this._rootNode = null; - this._tooltip = true; - - // TODO: Issue when using react-tooltip in Edge: - // https://github.com/wwayne/react-tooltip/issues/328 - if (getDeviceInfo().flag === 'msedge') - this._tooltip = false; - } - - render() - { - const { - roomClient, - me, - activeSpeaker, - style, - advancedMode, - micProducer, - webcamProducer, - screenProducer, - classes - } = this.props; - - const videoVisible = ( - Boolean(webcamProducer) && - !webcamProducer.locallyPaused && - !webcamProducer.remotelyPaused - ); - - const screenVisible = ( - Boolean(screenProducer) && - !screenProducer.locallyPaused && - !screenProducer.remotelyPaused - ); - - let tip; - - if (!me.displayNameSet) - tip = 'Click on your name to change it'; - - return ( + return ( +
(this._rootNode = node)} - data-tip={tip} - data-tip-disable={!tip} - data-type='dark' - onMouseOver={this.handleMouseOver} - onMouseOut={this.handleMouseOut} >
- - { screenProducer ? +
+ { screenProducer ? +
- :null - } -
- ); - } - - componentDidMount() - { - this._mounted = true; - - if (this._tooltip) - { - setTimeout(() => - { - if (!this._mounted || this.props.me.displayNameSet) - return; - - ReactTooltip.show(this._rootNode); - }, 4000); - } - } - - componentWillUnmount() - { - this._mounted = false; - } - - componentWillReceiveProps(nextProps) - { - if (this._tooltip) - { - if (nextProps.me.displayNameSet) - ReactTooltip.hide(this._rootNode); - } - } -} + + :null + } +
+ ); +}; Me.propTypes = { diff --git a/app/src/components/Containers/Peer.js b/app/src/components/Containers/Peer.js index d5ca011..de77246 100644 --- a/app/src/components/Containers/Peer.js +++ b/app/src/components/Containers/Peer.js @@ -59,8 +59,7 @@ const styles = (theme) => }, '&.screen' : { - order : 1, - maxWidth : '50%' + order : 1 } }, controls : @@ -391,6 +390,7 @@ const Peer = (props) => '&.loading' : { filter : 'blur(5px)' + }, + '&.contain' : + { + objectFit : 'contain' } }, info : @@ -237,6 +241,7 @@ class VideoView extends React.PureComponent peer, volume, showPeerInfo, + videoContain, advancedMode, videoVisible, videoProfile, @@ -317,7 +322,8 @@ class VideoView extends React.PureComponent className={classnames(classes.video, { hidden : !videoVisible, 'is-me' : isMe, - loading : videoProfile === 'none' + loading : videoProfile === 'none', + contain : videoContain })} autoPlay playsInline @@ -416,6 +422,7 @@ VideoView.propTypes = peer : PropTypes.oneOfType( [ appPropTypes.Me, appPropTypes.Peer ]), showPeerInfo : PropTypes.bool, + videoContain : PropTypes.bool, advancedMode : PropTypes.bool, audioTrack : PropTypes.any, volume : PropTypes.number,