Merge pull request #12801 from ramonlsouza/screenshare-external-video

fix: sharing external video does not stop screenshare

bigbluebutton-html5/imports/ui/components/app/container.jsx

@@ -78,28 +78,30 @@ const AppContainer = (props) => {
   const sidebarNavigationIsOpen = sidebarNavigation.isOpen;
   const sidebarContentIsOpen = sidebarContent.isOpen;
 
-  return currentUserId ?
-    <App
-      {...{
-        actionsbar,
-        actionsBarStyle,
-        currentUserId,
-        media,
-        layoutType,
-        layoutLoaded,
-        meetingLayout,
-        settingsLayout,
-        pushLayoutToEveryone,
-        deviceType,
-        newLayoutContextDispatch,
-        sidebarNavPanel,
-        sidebarNavigationIsOpen,
-        sidebarContentPanel,
-        sidebarContentIsOpen,
-      }}
-      {...otherProps}
-    />
-    : null
+  return currentUserId
+    ? (
+      <App
+        {...{
+          actionsbar,
+          actionsBarStyle,
+          currentUserId,
+          media,
+          layoutType,
+          layoutLoaded,
+          meetingLayout,
+          settingsLayout,
+          pushLayoutToEveryone,
+          deviceType,
+          newLayoutContextDispatch,
+          sidebarNavPanel,
+          sidebarNavigationIsOpen,
+          sidebarContentPanel,
+          sidebarContentIsOpen,
+        }}
+        {...otherProps}
+      />
+    )
+    : null;
 };
 
 const currentUserEmoji = (currentUser) => (currentUser
@@ -163,9 +165,9 @@ export default injectIntl(withModalMounter(withTracker(({ intl, baseControls })
   const layoutManagerLoaded = Session.get('layoutManagerLoaded');
   const AppSettings = Settings.application;
   const { viewScreenshare } = Settings.dataSaving;
-  const shouldShowScreenshare = MediaService.shouldShowScreenshare()
-    && (viewScreenshare || MediaService.isUserPresenter());
   const shouldShowExternalVideo = MediaService.shouldShowExternalVideo();
+  const shouldShowScreenshare = MediaService.shouldShowScreenshare()
+    && (viewScreenshare || MediaService.isUserPresenter()) && !shouldShowExternalVideo;
 
   return {
     captions: CaptionsService.isCaptionsActive() ? <CaptionsContainer /> : null,

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

@@ -1,10 +1,8 @@
 import React, { Component } from 'react';
 import { withTracker } from 'meteor/react-meteor-data';
 import Settings from '/imports/ui/services/settings';
-import { defineMessages, injectIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import { Session } from 'meteor/session';
-import { notify } from '/imports/ui/services/notification';
 import VideoService from '/imports/ui/components/video-provider/service';
 import getFromUserSettings from '/imports/ui/services/users-settings';
 import { withModalMounter } from '/imports/ui/components/modal/service';
@@ -23,41 +21,9 @@ const LAYOUT_CONFIG = Meteor.settings.public.layout;
 
 const propTypes = {
   isScreensharing: PropTypes.bool.isRequired,
-  intl: PropTypes.shape({
-    formatMessage: PropTypes.func.isRequired,
-  }).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',
-  },
-});
-
 class MediaContainer extends Component {
-  componentDidUpdate(prevProps) {
-    const {
-      isScreensharing,
-      intl,
-    } = this.props;
-    const {
-      isScreensharing: wasScreenSharing,
-    } = prevProps;
-
-    if (isScreensharing !== wasScreenSharing) {
-      if (!wasScreenSharing) {
-        notify(intl.formatMessage(intlMessages.screenshareStarted), 'info', 'desktop');
-      } else {
-        notify(intl.formatMessage(intlMessages.screenshareEnded), 'info', 'desktop');
-      }
-    }
-  }
-
   render() {
     return <Media {...this.props} />;
   }
@@ -142,4 +108,4 @@ export default withLayoutConsumer(withModalMounter(withTracker(() => {
 
   MediaContainer.propTypes = propTypes;
   return data;
-})(injectIntl(MediaContainer))));
+})(MediaContainer)));

bigbluebutton-html5/imports/ui/components/screenshare/component.jsx

@@ -10,6 +10,7 @@ import AutoplayOverlay from '../media/autoplay-overlay/component';
 import logger from '/imports/startup/client/logger';
 import playAndRetry from '/imports/utils/mediaElementPlayRetry';
 import PollingContainer from '/imports/ui/components/polling/container';
+import { notify } from '/imports/ui/services/notification';
 import { withLayoutConsumer } from '/imports/ui/components/layout/context';
 import {
   SCREENSHARE_MEDIA_ELEMENT_NAME,
@@ -44,6 +45,14 @@ const intlMessages = defineMessages({
   autoplayAllowLabel: {
     id: 'app.media.screenshare.autoplayAllowLabel',
   },
+  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',
+  },
 });
 
 const ALLOW_FULLSCREEN = Meteor.settings.public.app.allowFullscreen;
@@ -69,6 +78,8 @@ class ScreenshareComponent extends React.Component {
   }
 
   componentDidMount() {
+    const { intl } = this.props;
+
     screenshareHasStarted();
     this.screenshareContainer.addEventListener('fullscreenchange', this.onFullscreenChange);
     // Autoplay failure handling
@@ -77,6 +88,8 @@ class ScreenshareComponent extends React.Component {
     subscribeToStreamStateChange('screenshare', this.onStreamStateChange);
     // Attaches the local stream if it exists to serve as the local presenter preview
     attachLocalPreviewStream(getMediaElement());
+
+    notify(intl.formatMessage(intlMessages.screenshareStarted), 'info', 'desktop');
   }
 
   componentDidUpdate(prevProps) {
@@ -94,6 +107,7 @@ class ScreenshareComponent extends React.Component {
       shouldEnableSwapLayout,
       toggleSwapLayout,
       newLayoutContextDispatch,
+      intl,
     } = this.props;
     const layoutSwapped = getSwapLayout() && shouldEnableSwapLayout();
     if (layoutSwapped) toggleSwapLayout(newLayoutContextDispatch);
@@ -101,6 +115,8 @@ class ScreenshareComponent extends React.Component {
     this.screenshareContainer.removeEventListener('fullscreenchange', this.onFullscreenChange);
     window.removeEventListener('screensharePlayFailed', this.handlePlayElementFailed);
     unsubscribeFromStreamStateChange('screenshare', this.onStreamStateChange);
+
+    notify(intl.formatMessage(intlMessages.screenshareEnded), 'info', 'desktop');
   }
 
   onStreamStateChange(event) {