jiti-meet/react/features/conference/components/web/Conference.js

297 lines
8.0 KiB
JavaScript
Raw Normal View History

// @flow
import _ from 'lodash';
import React from 'react';
2016-12-12 21:13:17 +00:00
2019-01-30 13:05:35 +00:00
import VideoLayout from '../../../../../modules/UI/videolayout/VideoLayout';
import { obtainConfig } from '../../../base/config';
import { connect, disconnect } from '../../../base/connection';
import { translate } from '../../../base/i18n';
2019-03-21 16:38:29 +00:00
import { connect as reactReduxConnect } from '../../../base/redux';
2019-01-30 13:05:35 +00:00
import { Chat } from '../../../chat';
import { Filmstrip } from '../../../filmstrip';
import { CalleeInfoContainer } from '../../../invite';
import { LargeVideo } from '../../../large-video';
import { LAYOUTS, getCurrentLayout } from '../../../video-layout';
import {
Toolbox,
fullScreenChanged,
setToolboxAlwaysVisible,
showToolbox
2019-01-30 13:05:35 +00:00
} from '../../../toolbox';
import { maybeShowSuboptimalExperienceNotification } from '../../functions';
2019-02-05 10:10:15 +00:00
import Labels from './Labels';
2019-01-30 13:05:35 +00:00
import { default as Notice } from './Notice';
2019-03-12 17:45:53 +00:00
import { default as Subject } from './Subject';
import {
AbstractConference,
abstractMapStateToProps
} from '../AbstractConference';
import type { AbstractProps } from '../AbstractConference';
2017-02-07 14:45:51 +00:00
declare var APP: Object;
declare var config: Object;
declare var interfaceConfig: Object;
2017-02-07 14:45:51 +00:00
const logger = require('jitsi-meet-logger').getLogger(__filename);
/**
* DOM events for when full screen mode has changed. Different browsers need
* different vendor prefixes.
*
* @private
* @type {Array<string>}
*/
const FULL_SCREEN_EVENTS = [
'webkitfullscreenchange',
'mozfullscreenchange',
'fullscreenchange'
];
/**
* The CSS class to apply to the root element of the conference so CSS can
* modify the app layout.
*
* @private
* @type {Object}
*/
const LAYOUT_CLASSNAMES = {
[LAYOUTS.HORIZONTAL_FILMSTRIP_VIEW]: 'horizontal-filmstrip',
[LAYOUTS.TILE_VIEW]: 'tile-view',
[LAYOUTS.VERTICAL_FILMSTRIP_VIEW]: 'vertical-filmstrip'
};
/**
* The type of the React {@code Component} props of {@link Conference}.
*/
type Props = AbstractProps & {
/**
* Whether the local participant is recording the conference.
*/
_iAmRecorder: boolean,
/**
* The CSS class to apply to the root of {@link Conference} to modify the
* application layout.
*/
_layoutClassName: string,
dispatch: Function,
t: Function
}
/**
* The conference page of the Web application.
*/
class Conference extends AbstractConference<Props, *> {
_onFullScreenChange: Function;
_onShowToolbar: Function;
_originalOnShowToolbar: Function;
/**
* Initializes a new Conference instance.
*
* @param {Object} props - The read-only properties with which the new
* instance is to be initialized.
*/
constructor(props) {
super(props);
// Throttle and bind this component's mousemove handler to prevent it
// from firing too often.
this._originalOnShowToolbar = this._onShowToolbar;
this._onShowToolbar = _.throttle(
() => this._originalOnShowToolbar(),
100,
{
leading: true,
trailing: false
});
// Bind event handler so it is only bound once for every instance.
this._onFullScreenChange = this._onFullScreenChange.bind(this);
}
2016-12-12 21:13:17 +00:00
/**
* Start the connection and get the UI ready for the conference.
2016-12-12 21:13:17 +00:00
*
* @inheritdoc
*/
componentDidMount() {
const { configLocation } = config;
if (configLocation) {
2018-07-12 03:57:44 +00:00
obtainConfig(configLocation, this.props._room)
.then(() => {
const now = window.performance.now();
APP.connectionTimes['configuration.fetched'] = now;
logger.log('(TIME) configuration fetched:\t', now);
this._start();
})
.catch(err => {
logger.log(err);
// Show obtain config error.
APP.UI.messageHandler.showError({
2018-07-12 03:57:44 +00:00
descriptionKey: 'dialog.connectError',
titleKey: 'connection.CONNFAIL'
});
});
} else {
this._start();
}
2016-12-12 21:13:17 +00:00
}
/**
* Calls into legacy UI to update the application layout, if necessary.
*
* @inheritdoc
* returns {void}
*/
componentDidUpdate(prevProps) {
if (this.props._shouldDisplayTileView
=== prevProps._shouldDisplayTileView) {
return;
}
// TODO: For now VideoLayout is being called as LargeVideo and Filmstrip
// sizing logic is still handled outside of React. Once all components
// are in react they should calculate size on their own as much as
// possible and pass down sizings.
VideoLayout.refreshLayout();
}
2016-12-12 21:13:17 +00:00
/**
* Disconnect from the conference when component will be
* unmounted.
*
* @inheritdoc
*/
componentWillUnmount() {
APP.UI.unbindEvents();
FULL_SCREEN_EVENTS.forEach(name =>
document.removeEventListener(name, this._onFullScreenChange));
APP.conference.isJoined() && this.props.dispatch(disconnect());
2016-12-12 21:13:17 +00:00
}
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
const {
VIDEO_QUALITY_LABEL_DISABLED,
2018-05-03 17:36:29 +00:00
// XXX The character casing of the name filmStripOnly utilized by
// interfaceConfig is obsolete but legacy support is required.
filmStripOnly: filmstripOnly
} = interfaceConfig;
const hideVideoQualityLabel
2018-05-03 17:36:29 +00:00
= filmstripOnly
|| VIDEO_QUALITY_LABEL_DISABLED
|| this.props._iAmRecorder;
return (
<div
className = { this.props._layoutClassName }
id = 'videoconference_page'
onMouseMove = { this._onShowToolbar }>
<Notice />
2019-03-12 17:45:53 +00:00
<Subject />
<div id = 'videospace'>
2019-02-05 10:10:15 +00:00
<LargeVideo />
{ hideVideoQualityLabel
|| <Labels /> }
2018-05-03 17:36:29 +00:00
<Filmstrip filmstripOnly = { filmstripOnly } />
</div>
2017-02-16 23:02:40 +00:00
2018-05-03 17:36:29 +00:00
{ filmstripOnly || <Toolbox /> }
{ filmstripOnly || <Chat /> }
{ this.renderNotificationsContainer() }
2017-12-13 03:58:33 +00:00
<CalleeInfoContainer />
</div>
);
}
/**
* Updates the Redux state when full screen mode has been enabled or
* disabled.
*
* @private
* @returns {void}
*/
_onFullScreenChange() {
this.props.dispatch(fullScreenChanged(APP.UI.isFullScreen()));
}
/**
* Displays the toolbar.
*
* @private
* @returns {void}
*/
_onShowToolbar() {
this.props.dispatch(showToolbox());
}
/**
* Until we don't rewrite UI using react components
* we use UI.start from old app. Also method translates
* component right after it has been mounted.
*
* @inheritdoc
*/
_start() {
APP.UI.start();
APP.UI.registerListeners();
APP.UI.bindEvents();
FULL_SCREEN_EVENTS.forEach(name =>
document.addEventListener(name, this._onFullScreenChange));
const { dispatch, t } = this.props;
dispatch(connect());
maybeShowSuboptimalExperienceNotification(dispatch, t);
interfaceConfig.filmStripOnly
&& dispatch(setToolboxAlwaysVisible(true));
}
}
2016-12-12 21:13:17 +00:00
/**
* Maps (parts of) the Redux state to the associated props for the
* {@code Conference} component.
*
* @param {Object} state - The Redux state.
* @private
* @returns {Props}
*/
function _mapStateToProps(state) {
const currentLayout = getCurrentLayout(state);
return {
...abstractMapStateToProps(state),
_iAmRecorder: state['features/base/config'].iAmRecorder,
_layoutClassName: LAYOUT_CLASSNAMES[currentLayout]
};
}
export default reactReduxConnect(_mapStateToProps)(translate(Conference));