Add audio theme demo button (#11252)

website/client/components/settings/site.vue

@@ -25,10 +25,12 @@
       hr
 
       .form-horizontal
-        h5 {{ $t('audioTheme') }}
-        select.form-control(v-model='user.preferences.sound',
-          @change='set("sound")')
-          option(v-for='sound in availableAudioThemes', :value='sound') {{ $t(`audioTheme_${sound}`) }}
+        .form-group
+          h5 {{ $t('audioTheme') }}
+          select.form-control(v-model='user.preferences.sound',
+            @change='changeAudioTheme')
+            option(v-for='sound in availableAudioThemes', :value='sound') {{ $t(`audioTheme_${sound}`) }}
+        button.btn.btn-primary.btn-xs(@click='playAudio', v-once) {{ $t('demo') }}
       hr
 
       .form-horizontal(v-if='hasClass')
@@ -215,6 +217,7 @@ import deleteModal from './deleteModal';
 import { SUPPORTED_SOCIAL_NETWORKS } from '../../../common/script/constants';
 import changeClass from  '../../../common/script/ops/changeClass';
 import notificationsMixin from '../../mixins/notifications';
+import sounds from '../../libs/sounds';
 // @TODO: this needs our window.env fix
 // import { availableLanguages } from '../../../server/libs/i18n';
 
@@ -267,6 +270,7 @@ export default {
     this.temporaryDisplayName = this.user.profile.name;
     this.emailUpdates.newEmail = this.user.auth.local.email || null;
     this.localAuth.username = this.user.auth.local.username || null;
+    this.soundIndex = 0;
     hello.init({
       facebook: process.env.FACEBOOK_KEY, // eslint-disable-line no-process-env
       google: process.env.GOOGLE_CLIENT_ID, // eslint-disable-line no-process-env
@@ -511,6 +515,14 @@ export default {
         this.usernameUpdates.username = this.user.auth.local.username;
       }
     },
+    changeAudioTheme () {
+      this.soundIndex = 0;
+      this.set('sound');
+    },
+    playAudio () {
+      this.$root.$emit('playSound', sounds[this.soundIndex]);
+      this.soundIndex = (this.soundIndex + 1) % sounds.length;
+    },
   },
 };
 </script>

website/client/libs/sounds.js

@@ -0,0 +1,12 @@
+export default [
+  'Achievement_Unlocked',
+  'Chat',
+  'Daily',
+  'Death',
+  'Item_Drop',
+  'Level_Up',
+  'Minus_Habit',
+  'Plus_Habit',
+  'Reward',
+  'Todo',
+];

website/common/locales/en/generic.json

@@ -132,6 +132,7 @@
   "noNotificationsText": "The notification fairies give you a raucous round of applause! Well done!",
   "clear": "Clear",
   "endTour": "End Tour",
+  "demo": "Demo",
   "audioTheme": "Audio Theme",
   "audioTheme_off": "Off",
   "audioTheme_danielTheBard": "Daniel The Bard",