add screen share off sound notification

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';
 
@@ -66,23 +66,28 @@ const DesktopShare = ({
       default:
         logger.error({ logCode: 'desktopshare_default_error' }, error || 'Default error handler');
     }
+
+    const audioAlert = new Audio(`${Meteor.settings.public.app.cdn + Meteor.settings.public.app.basename}/resources/sounds/ScreenshareOff.mp3`);
+    audioAlert.play();
   };
-  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)}
-      color={isVideoBroadcasting ? 'primary' : 'default'}
-      ghost={!isVideoBroadcasting}
-      hideLabel
-      circle
-      size="lg"
-      onClick={isVideoBroadcasting ? handleUnshareScreen : () => handleShareScreen(onFail)}
-      id={isVideoBroadcasting ? 'unshare-screen-button' : 'share-screen-button'}
-    />
+  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)}
+        color={isVideoBroadcasting ? 'primary' : 'default'}
+        ghost={!isVideoBroadcasting}
+        hideLabel
+        circle
+        size="lg"
+        onClick={isVideoBroadcasting ? handleUnshareScreen : () => handleShareScreen(onFail)}
+        id={isVideoBroadcasting ? 'unshare-screen-button' : 'share-screen-button'}
+      />
+    )
     : null);
 };
 

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

@@ -19,6 +19,7 @@ class ScreenshareComponent extends React.Component {
       loaded: false,
     };
 
+    this.audioAlert = new Audio(`${Meteor.settings.public.app.cdn + Meteor.settings.public.app.basename}/resources/sounds/ScreenshareOff.mp3`);
     this.onVideoLoad = this.onVideoLoad.bind(this);
   }
 
@@ -31,6 +32,7 @@ class ScreenshareComponent extends React.Component {
     const { isPresenter, unshareScreen } = this.props;
     if (isPresenter && !nextProps.isPresenter) {
       unshareScreen();
+      this.audioAlert.play();
     }
   }
 
@@ -38,6 +40,7 @@ class ScreenshareComponent extends React.Component {
     const { presenterScreenshareHasEnded, unshareScreen } = this.props;
     presenterScreenshareHasEnded();
     unshareScreen();
+    this.audioAlert.play();
   }
 
   onVideoLoad() {