Merge pull request bigbluebutton#7260 from KDSBrowne/2.2-play-audio-s…

…creenshare-end Add audible feedback when screen share ends
wolbernd · Apr 22, 2019 · 2f6c73c · 2f6c73c
2 parents ae0d979 + ea711de
commit 2f6c73c
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 26 deletions.
diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx b/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>

diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/container.jsx b/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));
diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/desktop-share/component.jsx b/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,23 +67,26 @@ const DesktopShare = ({
       default:
         logger.error({ logCode: 'desktopshare_default_error' }, error || 'Default error handler');
     }
+    screenShareEndAlert();
   };
-  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);
 };
 

diff --git a/bigbluebutton-html5/imports/ui/components/screenshare/component.jsx b/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();
   }

diff --git a/bigbluebutton-html5/imports/ui/components/screenshare/container.jsx b/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 {

diff --git a/bigbluebutton-html5/imports/ui/components/screenshare/service.js b/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,
 };
diff --git a/bigbluebutton-html5/public/resources/sounds/ScreenshareOff.mp3 b/bigbluebutton-html5/public/resources/sounds/ScreenshareOff.mp3