Merge pull request #7260 from KDSBrowne/2.2-play-audio-screenshare-end

Add audible feedback when screen share ends

bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx

@@ -30,6 +30,7 @@ class ActionsBar extends React.PureComponent {
       currentSlidHasContent,
       parseCurrentSlideContent,
       isSharingVideo,
+      screenShareEndAlert,
     } = this.props;
 
     const {
@@ -89,6 +90,7 @@ class ActionsBar extends React.PureComponent {
             isVideoBroadcasting,
             isUserPresenter,
             screenSharingCheck,
+            screenShareEndAlert,
           }}
           />
         </div>

bigbluebutton-html5/imports/ui/components/actions-bar/container.jsx

@@ -8,7 +8,9 @@ import PresentationService from '/imports/ui/components/presentation/service';
 import ActionsBar from './component';
 import Service from './service';
 import VideoService from '../video-provider/service';
-import { shareScreen, unshareScreen, isVideoBroadcasting } from '../screenshare/service';
+import {
+  shareScreen, unshareScreen, isVideoBroadcasting, screenShareEndAlert,
+} from '../screenshare/service';
 
 import MediaService, { getSwapLayout } from '../media/service';
 
@@ -27,7 +29,6 @@ export default withTracker(() => {
     },
   });
 
-
   return {
     isUserPresenter: Service.isUserPresenter(),
     isUserModerator: Service.isUserModerator(),
@@ -46,5 +47,6 @@ export default withTracker(() => {
     currentSlidHasContent: PresentationService.currentSlidHasContent(),
     parseCurrentSlideContent: PresentationService.parseCurrentSlideContent,
     isSharingVideo: Service.isSharingVideo(),
+    screenShareEndAlert,
   };
 })(injectIntl(ActionsBarContainer));

bigbluebutton-html5/imports/ui/components/actions-bar/desktop-share/component.jsx

@@ -41,10 +41,10 @@ const intlMessages = defineMessages({
 });
 
 const BROWSER_RESULTS = browser();
-const isMobileBrowser = (BROWSER_RESULTS ? BROWSER_RESULTS.mobile : false) ||
-  (BROWSER_RESULTS && BROWSER_RESULTS.os ?
-    BROWSER_RESULTS.os.includes('Android') : // mobile flag doesn't always work
-    false);
+const isMobileBrowser = (BROWSER_RESULTS ? BROWSER_RESULTS.mobile : false)
+  || (BROWSER_RESULTS && BROWSER_RESULTS.os
+    ? BROWSER_RESULTS.os.includes('Android') // mobile flag doesn't always work
+    : false);
 
 const ICE_CONNECTION_FAILED = 'ICE connection failed';
 
@@ -55,6 +55,7 @@ const DesktopShare = ({
   isVideoBroadcasting,
   isUserPresenter,
   screenSharingCheck,
+  screenShareEndAlert,
 }) => {
   const onFail = (error) => {
     switch (error) {
@@ -66,15 +67,17 @@ const DesktopShare = ({
       default:
         logger.error({ logCode: 'desktopshare_default_error' }, error || 'Default error handler');
     }
+    screenShareEndAlert();
   };
-  return (screenSharingCheck && !isMobileBrowser && isUserPresenter ?
+  return (screenSharingCheck && !isMobileBrowser && isUserPresenter
+    ? (
       <Button
         className={cx(styles.button, isVideoBroadcasting || styles.btn)}
         icon={isVideoBroadcasting ? 'desktop' : 'desktop_off'}
-      label={intl.formatMessage(isVideoBroadcasting ?
-          intlMessages.stopDesktopShareLabel : intlMessages.desktopShareLabel)}
-      description={intl.formatMessage(isVideoBroadcasting ?
-          intlMessages.stopDesktopShareDesc : intlMessages.desktopShareDesc)}
+        label={intl.formatMessage(isVideoBroadcasting
+          ? intlMessages.stopDesktopShareLabel : intlMessages.desktopShareLabel)}
+        description={intl.formatMessage(isVideoBroadcasting
+          ? intlMessages.stopDesktopShareDesc : intlMessages.desktopShareDesc)}
         color={isVideoBroadcasting ? 'primary' : 'default'}
         ghost={!isVideoBroadcasting}
         hideLabel
@@ -83,6 +86,7 @@ const DesktopShare = ({
         onClick={isVideoBroadcasting ? handleUnshareScreen : () => handleShareScreen(onFail)}
         id={isVideoBroadcasting ? 'unshare-screen-button' : 'share-screen-button'}
       />
+    )
     : null);
 };
 

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

@@ -28,14 +28,18 @@ class ScreenshareComponent extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    const { isPresenter, unshareScreen } = this.props;
+    const {
+      isPresenter, unshareScreen,
+    } = this.props;
     if (isPresenter && !nextProps.isPresenter) {
       unshareScreen();
     }
   }
 
   componentWillUnmount() {
-    const { presenterScreenshareHasEnded, unshareScreen } = this.props;
+    const {
+      presenterScreenshareHasEnded, unshareScreen,
+    } = this.props;
     presenterScreenshareHasEnded();
     unshareScreen();
   }

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

@@ -3,8 +3,10 @@ import { withTracker } from 'meteor/react-meteor-data';
 import Users from '/imports/api/users/';
 import Auth from '/imports/ui/services/auth';
 import mapUser from '/imports/ui/services/user/mapUser';
-import { isVideoBroadcasting, presenterScreenshareHasEnded, unshareScreen,
-  presenterScreenshareHasStarted } from './service';
+import {
+  isVideoBroadcasting, presenterScreenshareHasEnded, unshareScreen,
+  presenterScreenshareHasStarted,
+} from './service';
 import ScreenshareComponent from './component';
 
 class ScreenshareContainer extends React.Component {

bigbluebutton-html5/imports/ui/components/screenshare/service.js

@@ -34,12 +34,16 @@ const shareScreen = (onFail) => {
 
 const unshareScreen = () => {
   KurentoBridge.kurentoExitScreenShare();
+  screenShareEndAlert();
 };
 
+const screenShareEndAlert = () => new Audio(`${Meteor.settings.public.app.cdn + Meteor.settings.public.app.basename}/resources/sounds/ScreenshareOff.mp3`).play();
+
 export {
   isVideoBroadcasting,
   presenterScreenshareHasEnded,
   presenterScreenshareHasStarted,
   shareScreen,
   unshareScreen,
+  screenShareEndAlert,
 };