2017-06-04 10:40:14 +08:00
|
|
|
import React, { Component } from 'react';
|
2018-01-08 12:44:42 +08:00
|
|
|
import { withTracker } from 'meteor/react-meteor-data';
|
2018-01-31 00:32:37 +08:00
|
|
|
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';
|
2018-03-09 19:20:08 +08:00
|
|
|
import { notify } from '/imports/ui/services/notification';
|
2018-04-10 02:28:54 +08:00
|
|
|
import VideoService from '/imports/ui/components/video-provider/service';
|
2018-09-14 02:09:30 +08:00
|
|
|
import getFromUserSettings from '/imports/ui/services/users-settings';
|
2018-11-08 05:45:52 +08:00
|
|
|
import { withModalMounter } from '/imports/ui/components/modal/service';
|
2016-05-20 21:46:30 +08:00
|
|
|
import Media from './component';
|
2018-04-10 02:48:21 +08:00
|
|
|
import MediaService, { getSwapLayout } from './service';
|
2018-04-10 13:24:04 +08:00
|
|
|
import PresentationPodsContainer from '../presentation-pod/container';
|
2017-07-25 03:29:34 +08:00
|
|
|
import ScreenshareContainer from '../screenshare/container';
|
2017-02-14 05:08:10 +08:00
|
|
|
import DefaultContent from '../presentation/default-content/component';
|
2018-11-30 01:24:02 +08:00
|
|
|
import ExternalVideoContainer from '../external-video-player/container';
|
2019-01-16 04:44:41 +08:00
|
|
|
import { getVideoId } from '../external-video-player/service';
|
2016-05-04 04:40:46 +08:00
|
|
|
|
2018-10-24 04:44:17 +08:00
|
|
|
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,
|
|
|
|
};
|
|
|
|
|
2018-03-09 19:20:08 +08:00
|
|
|
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',
|
|
|
|
},
|
2018-05-23 01:17:35 +08:00
|
|
|
screenshareSafariNotSupportedError: {
|
|
|
|
id: 'app.media.screenshare.safariNotSupported',
|
|
|
|
description: 'Error message for screenshare not supported on Safari',
|
|
|
|
},
|
2018-04-27 23:11:40 +08:00
|
|
|
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',
|
|
|
|
},
|
2018-03-09 19:20:08 +08:00
|
|
|
});
|
2016-05-04 04:40:46 +08:00
|
|
|
|
2016-05-03 06:42:54 +08:00
|
|
|
class MediaContainer extends Component {
|
2018-04-25 22:23:44 +08:00
|
|
|
componentWillMount() {
|
2018-04-27 23:11:40 +08:00
|
|
|
document.addEventListener('installChromeExtension', this.installChromeExtension.bind(this));
|
2018-05-23 01:17:35 +08:00
|
|
|
document.addEventListener('safariScreenshareNotSupported', this.safariScreenshareNotSupported.bind(this));
|
2018-04-27 23:11:40 +08:00
|
|
|
}
|
2016-05-04 04:40:46 +08:00
|
|
|
|
2016-05-28 09:10:34 +08:00
|
|
|
componentWillReceiveProps(nextProps) {
|
2018-03-09 19:20:08 +08:00
|
|
|
const {
|
|
|
|
isScreensharing,
|
|
|
|
intl,
|
|
|
|
} = this.props;
|
|
|
|
|
|
|
|
if (isScreensharing !== nextProps.isScreensharing) {
|
|
|
|
if (nextProps.isScreensharing) {
|
|
|
|
notify(intl.formatMessage(intlMessages.screenshareStarted), 'info', 'desktop');
|
2016-05-31 06:07:02 +08:00
|
|
|
} else {
|
2018-03-09 19:20:08 +08:00
|
|
|
notify(intl.formatMessage(intlMessages.screenshareEnded), 'info', 'desktop');
|
2016-05-28 09:10:34 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-10-24 23:33:39 +08:00
|
|
|
componentWillUnmount() {
|
|
|
|
document.removeEventListener('installChromeExtension', this.installChromeExtension.bind(this));
|
|
|
|
document.removeEventListener('safariScreenshareNotSupported', this.safariScreenshareNotSupported.bind(this));
|
|
|
|
}
|
|
|
|
|
2018-04-27 23:11:40 +08:00
|
|
|
installChromeExtension() {
|
|
|
|
const { intl } = this.props;
|
|
|
|
|
2018-10-24 04:44:17 +08:00
|
|
|
const CHROME_DEFAULT_EXTENSION_LINK = KURENTO_CONFIG.chromeDefaultExtensionLink;
|
|
|
|
const CHROME_CUSTOM_EXTENSION_LINK = KURENTO_CONFIG.chromeExtensionLink;
|
2018-04-27 23:11:40 +08:00
|
|
|
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>
|
2019-01-08 22:46:24 +08:00
|
|
|
{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');
|
2018-04-27 23:11:40 +08:00
|
|
|
}
|
|
|
|
|
2018-05-23 01:17:35 +08:00
|
|
|
safariScreenshareNotSupported() {
|
|
|
|
const { intl } = this.props;
|
|
|
|
notify(intl.formatMessage(intlMessages.screenshareSafariNotSupportedError), 'error', 'desktop');
|
2016-04-29 03:02:51 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2018-04-12 02:50:14 +08:00
|
|
|
return <Media {...this.props} />;
|
2016-04-29 03:02:51 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-01-08 22:46:24 +08:00
|
|
|
export default withModalMounter(withTracker(() => {
|
2018-02-06 21:33:48 +08:00
|
|
|
const { dataSaving } = Settings;
|
2018-03-21 01:22:11 +08:00
|
|
|
const { viewParticipantsWebcams, viewScreenshare } = dataSaving;
|
2018-01-31 00:32:37 +08:00
|
|
|
|
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();
|
2018-07-25 04:20:37 +08:00
|
|
|
data.children = <PresentationPodsContainer />;
|
2016-09-15 04:25:31 +08:00
|
|
|
}
|
2017-03-22 05:46:41 +08:00
|
|
|
|
2018-02-06 21:33:48 +08:00
|
|
|
if (MediaService.shouldShowScreenshare() && (viewScreenshare || MediaService.isUserPresenter())) {
|
2018-04-12 02:50:14 +08:00
|
|
|
data.children = <ScreenshareContainer />;
|
2016-09-15 04:25:31 +08:00
|
|
|
}
|
|
|
|
|
2018-04-10 02:28:54 +08:00
|
|
|
const usersVideo = VideoService.getAllUsersVideo();
|
2019-01-08 22:46:24 +08:00
|
|
|
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
|
|
|
}
|
|
|
|
|
2018-03-09 19:20:08 +08:00
|
|
|
data.isScreensharing = MediaService.isVideoBroadcasting();
|
2018-04-18 01:55:07 +08:00
|
|
|
data.swapLayout = getSwapLayout();
|
2018-04-12 02:50:14 +08:00
|
|
|
data.disableVideo = !viewParticipantsWebcams;
|
2018-03-09 19:20:08 +08:00
|
|
|
|
2018-04-12 02:50:14 +08:00
|
|
|
if (data.swapLayout) {
|
|
|
|
data.floatingOverlay = true;
|
2019-01-08 02:12:28 +08:00
|
|
|
data.hideOverlay = true;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (data.isScreensharing) {
|
|
|
|
data.floatingOverlay = false;
|
2018-04-25 22:23:44 +08:00
|
|
|
}
|
2018-04-25 00:18:12 +08:00
|
|
|
|
2018-11-30 01:24:02 +08:00
|
|
|
if (MediaService.shouldShowExternalVideo()) {
|
2019-01-16 04:44:41 +08:00
|
|
|
data.children = (
|
|
|
|
<ExternalVideoContainer
|
|
|
|
isPresenter={MediaService.isUserPresenter()}
|
|
|
|
videoId={getVideoId()}
|
|
|
|
/>
|
|
|
|
);
|
2018-11-30 01:24:02 +08:00
|
|
|
}
|
|
|
|
|
2018-10-24 23:33:39 +08:00
|
|
|
MediaContainer.propTypes = propTypes;
|
2016-05-28 09:10:34 +08:00
|
|
|
return data;
|
2018-11-08 05:45:52 +08:00
|
|
|
})(injectIntl(MediaContainer)));
|