From f0e6703546dbff826f939380f2871d6adfd86217 Mon Sep 17 00:00:00 2001
From: Dominick Triola <dominicktriola@gmail.com>
Date: Thu, 15 Aug 2019 08:04:19 -0700
Subject: [PATCH] Add audio theme demo button (#11252)

---
 website/client/components/settings/site.vue | 20 ++++++++++++++++----
 website/client/libs/sounds.js               | 12 ++++++++++++
 website/common/locales/en/generic.json      |  1 +
 3 files changed, 29 insertions(+), 4 deletions(-)
 create mode 100644 website/client/libs/sounds.js

diff --git a/website/client/components/settings/site.vue b/website/client/components/settings/site.vue
index 533de1ba13..4f6d75d1f8 100644
--- a/website/client/components/settings/site.vue
+++ b/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>
diff --git a/website/client/libs/sounds.js b/website/client/libs/sounds.js
new file mode 100644
index 0000000000..4ac685604a
--- /dev/null
+++ b/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',
+];
diff --git a/website/common/locales/en/generic.json b/website/common/locales/en/generic.json
index 085c4cf57c..c5744715b6 100644
--- a/website/common/locales/en/generic.json
+++ b/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",