bigbluebutton-Github/bigbluebutton-html5/imports/ui/components/media/container.jsx

153 lines
5.2 KiB
React
Raw Normal View History

import React, { Component } from 'react';
import { withTracker } from 'meteor/react-meteor-data';
import Settings from '/imports/ui/services/settings';
2018-10-24 23:33:39 +08:00
import { defineMessages, injectIntl, intlShape } from 'react-intl';
import PropTypes from 'prop-types';
import { notify } from '/imports/ui/services/notification';
2018-04-10 02:28:54 +08:00
import VideoService from '/imports/ui/components/video-provider/service';
import getFromUserSettings from '/imports/ui/services/users-settings';
2018-11-08 05:45:52 +08:00
import { withModalMounter } from '/imports/ui/components/modal/service';
import Media from './component';
2018-04-10 02:48:21 +08:00
import MediaService, { getSwapLayout } from './service';
import PresentationPodsContainer from '../presentation-pod/container';
import ScreenshareContainer from '../screenshare/container';
2017-02-14 05:08:10 +08:00
import DefaultContent from '../presentation/default-content/component';
import ExternalVideoContainer from '../external-video-player/container';
import { getVideoId } from '../external-video-player/service';
const LAYOUT_CONFIG = Meteor.settings.public.layout;
const KURENTO_CONFIG = Meteor.settings.public.kurento;
2018-10-24 23:33:39 +08:00
const propTypes = {
isScreensharing: PropTypes.bool.isRequired,
intl: intlShape.isRequired,
};
const intlMessages = defineMessages({
screenshareStarted: {
id: 'app.media.screenshare.start',
description: 'toast to show when a screenshare has started',
},
screenshareEnded: {
id: 'app.media.screenshare.end',
description: 'toast to show when a screenshare has ended',
},
screenshareSafariNotSupportedError: {
id: 'app.media.screenshare.safariNotSupported',
description: 'Error message for screenshare not supported on Safari',
},
chromeExtensionError: {
id: 'app.video.chromeExtensionError',
description: 'Error message for Chrome Extension not installed',
},
chromeExtensionErrorLink: {
id: 'app.video.chromeExtensionErrorLink',
description: 'Error message for Chrome Extension not installed',
},
});
2016-05-03 06:42:54 +08:00
class MediaContainer extends Component {
componentWillMount() {
document.addEventListener('installChromeExtension', this.installChromeExtension.bind(this));
document.addEventListener('safariScreenshareNotSupported', this.safariScreenshareNotSupported.bind(this));
}
componentWillReceiveProps(nextProps) {
const {
isScreensharing,
intl,
} = this.props;
if (isScreensharing !== nextProps.isScreensharing) {
if (nextProps.isScreensharing) {
notify(intl.formatMessage(intlMessages.screenshareStarted), 'info', 'desktop');
} else {
notify(intl.formatMessage(intlMessages.screenshareEnded), 'info', 'desktop');
}
}
}
2018-10-24 23:33:39 +08:00
componentWillUnmount() {
document.removeEventListener('installChromeExtension', this.installChromeExtension.bind(this));
document.removeEventListener('safariScreenshareNotSupported', this.safariScreenshareNotSupported.bind(this));
}
installChromeExtension() {
const { intl } = this.props;
const CHROME_DEFAULT_EXTENSION_LINK = KURENTO_CONFIG.chromeDefaultExtensionLink;
const CHROME_CUSTOM_EXTENSION_LINK = KURENTO_CONFIG.chromeExtensionLink;
const CHROME_EXTENSION_LINK = CHROME_CUSTOM_EXTENSION_LINK === 'LINK' ? CHROME_DEFAULT_EXTENSION_LINK : CHROME_CUSTOM_EXTENSION_LINK;
2018-10-24 23:33:39 +08:00
const chromeErrorElement = (
<div>
{intl.formatMessage(intlMessages.chromeExtensionError)}
{' '}
<a href={CHROME_EXTENSION_LINK} target="_blank" rel="noopener noreferrer">
2018-10-24 23:33:39 +08:00
{intl.formatMessage(intlMessages.chromeExtensionErrorLink)}
</a>
</div>
);
notify(chromeErrorElement, 'error', 'desktop');
}
safariScreenshareNotSupported() {
const { intl } = this.props;
notify(intl.formatMessage(intlMessages.screenshareSafariNotSupportedError), 'error', 'desktop');
2016-04-29 03:02:51 +08:00
}
render() {
return <Media {...this.props} />;
2016-04-29 03:02:51 +08:00
}
}
export default withModalMounter(withTracker(() => {
const { dataSaving } = Settings;
const { viewParticipantsWebcams, viewScreenshare } = dataSaving;
2018-10-24 20:46:05 +08:00
const hidePresentation = getFromUserSettings('hidePresentation', LAYOUT_CONFIG.hidePresentation);
2018-04-25 00:18:12 +08:00
const data = {
children: <DefaultContent />,
};
2016-09-15 04:25:31 +08:00
2018-04-25 00:18:12 +08:00
if (MediaService.shouldShowWhiteboard() && !hidePresentation) {
data.currentPresentation = MediaService.getPresentationInfo();
data.children = <PresentationPodsContainer />;
2016-09-15 04:25:31 +08:00
}
2017-03-22 05:46:41 +08:00
if (MediaService.shouldShowScreenshare() && (viewScreenshare || MediaService.isUserPresenter())) {
data.children = <ScreenshareContainer />;
2016-09-15 04:25:31 +08:00
}
2018-04-10 02:28:54 +08:00
const usersVideo = VideoService.getAllUsersVideo();
if (MediaService.shouldShowOverlay() && usersVideo.length && viewParticipantsWebcams) {
2018-04-10 02:28:54 +08:00
data.floatingOverlay = usersVideo.length < 2;
data.hideOverlay = usersVideo.length === 0;
2016-09-15 04:25:31 +08:00
}
data.isScreensharing = MediaService.isVideoBroadcasting();
data.swapLayout = getSwapLayout();
data.disableVideo = !viewParticipantsWebcams;
if (data.swapLayout) {
data.floatingOverlay = true;
data.hideOverlay = true;
}
if (data.isScreensharing) {
data.floatingOverlay = false;
}
2018-04-25 00:18:12 +08:00
if (MediaService.shouldShowExternalVideo()) {
data.children = (
<ExternalVideoContainer
isPresenter={MediaService.isUserPresenter()}
videoId={getVideoId()}
/>
);
}
2018-10-24 23:33:39 +08:00
MediaContainer.propTypes = propTypes;
return data;
2018-11-08 05:45:52 +08:00
})(injectIntl(MediaContainer)));