add audio cue on user join setting

bigbluebutton-html5/imports/startup/client/base.jsx

@@ -311,6 +311,17 @@ const BaseContainer = withTracker(() => {
     },
   });
 
+  Users.find({}, { fields: { validated: 1 } }).observe({
+    changed: (newDocument, oldDocument) => {
+      if (Settings.application.userJoinAudioAlerts
+        && !oldDocument.validated
+        && newDocument.validated) {
+        const audio = new Audio(`${Meteor.settings.public.app.cdn + Meteor.settings.public.app.basename}/resources/sounds/userJoin.mp3`);
+        audio.play();
+      }
+    },
+  });
+
   return {
     approved,
     ejected,

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

@@ -69,6 +69,7 @@ const propTypes = {
   application: PropTypes.shape({
     chatAudioAlerts: PropTypes.bool,
     chatPushAlerts: PropTypes.bool,
+    userJoinAudioAlerts: PropTypes.bool,
     fallbackLocale: PropTypes.string,
     fontSize: PropTypes.string,
     locale: PropTypes.string,

bigbluebutton-html5/imports/ui/components/settings/submenus/application/component.jsx

@@ -26,6 +26,10 @@ const intlMessages = defineMessages({
     id: 'app.submenu.application.pushAlertLabel',
     description: 'push notifiation label',
   },
+  userJoinAudioAlertLabel: {
+    id: 'app.submenu.application.userJoinAudioAlertLabel',
+    description: 'audio notification when a user joins',
+  },
   fontSizeControlLabel: {
     id: 'app.submenu.application.fontSizeControlLabel',
     description: 'label for font size ontrol',
@@ -240,6 +244,25 @@ class ApplicationMenu extends BaseMenu {
             ) : null
           }
 
+          <div className={styles.row}>
+            <div className={styles.col} aria-hidden="true">
+              <div className={styles.formElement}>
+                <label className={styles.label}>
+                  {intl.formatMessage(intlMessages.userJoinAudioAlertLabel)}
+                </label>
+              </div>
+            </div>
+            <div className={styles.col}>
+              <div className={cx(styles.formElement, styles.pullContentRight)}>
+                <Toggle
+                  icons={false}
+                  defaultChecked={this.state.settings.userJoinAudioAlerts}
+                  onChange={() => this.handleToggle('userJoinAudioAlerts')}
+                  ariaLabel={intl.formatMessage(intlMessages.userJoinAudioAlertLabel)}
+                />
+              </div>
+            </div>
+          </div>
 
           <div className={styles.row}>
             <div className={styles.col} aria-hidden="true">

bigbluebutton-html5/private/locales/en.json

@@ -280,6 +280,7 @@
     "app.submenu.application.animationsLabel": "Animations",
     "app.submenu.application.audioAlertLabel": "Audio Alerts for Chat",
     "app.submenu.application.pushAlertLabel": "Popup Alerts for Chat",
+    "app.submenu.application.userJoinAudioAlertLabel": "Audio Alerts for User Join",
     "app.submenu.application.fontSizeControlLabel": "Font size",
     "app.submenu.application.increaseFontBtnLabel": "Increase application font size",
     "app.submenu.application.decreaseFontBtnLabel": "Decrease application font size",