Audio Theme Setting

website/client/src/assets/scss/dropdown.scss

@@ -7,6 +7,10 @@
 
 .dropdown-toggle:hover {
   --caret-color: #{$purple-300};
+
+  &.disabled {
+    pointer-events: none;
+  }
 }
 
 .dropdown.show > .dropdown-toggle:not(.btn-success) {

website/client/src/pages/settings/generalSettings.vue

@@ -45,11 +45,7 @@
         <language-setting />
         <date-format-setting />
         <day-start-adjustment-setting />
-        <tr>
-          <td colspan="3">
-            Audio TODO
-          </td>
-        </tr>
+        <audio-theme-setting />
       </table>
 
 
@@ -114,9 +110,11 @@ import { sharedInlineSettingStore } from './components/inlineSettingMixin';
 import LanguageSetting from './inlineSettings/languageSetting';
 import DateFormatSetting from './inlineSettings/dateFormatSetting';
 import DayStartAdjustmentSetting from './inlineSettings/dayStartAdjustmentSetting.vue';
+import AudioThemeSetting from '@/pages/settings/inlineSettings/audioThemeSetting.vue';
 
 export default {
   components: {
+    AudioThemeSetting,
     DayStartAdjustmentSetting,
     DateFormatSetting,
     LanguageSetting,

website/client/src/pages/settings/inlineSettings/audioThemeSetting.vue

@@ -0,0 +1,202 @@
+<template>
+  <fragment>
+    <tr
+      v-if="!modalVisible"
+    >
+      <td class="settings-label">
+        {{ $t("audioTheme") }}
+      </td>
+      <td class="settings-value">
+        {{ $t(`audioTheme_${currentAudioTheme}`) }}
+      </td>
+      <td class="settings-button">
+        <a
+          class="edit-link"
+          @click.prevent="openModal()"
+        >
+          {{ $t('edit') }}
+        </a>
+      </td>
+    </tr>
+    <tr
+      v-if="modalVisible"
+      class="expanded"
+    >
+      <td colspan="3">
+        <div
+          v-once
+          class="dialog-title"
+        >
+          {{ $t("audioTheme") }}
+        </div>
+        <div
+          v-once
+          class="dialog-disclaimer"
+        >
+          <span>{{ $t("audioThemeDisclaimer") }}</span>
+        </div>
+        <div class="input-area">
+          <div class="label-columns">
+            <div class="settings-label">
+              {{ $t("enableAudio") }}
+            </div>
+            <div>
+              <toggle-switch
+                :checked="!isDisabled"
+                @change="toggleAudioThemeOff($event)"
+              />
+            </div>
+          </div>
+          <div class="label-columns mb-2">
+            <div class="settings-label">
+              {{ $t("audioTheme") }}
+            </div>
+            <div v-if="!isDisabled">
+              <a
+                class="edit-link"
+                @click.prevent="playAudio()"
+              >
+                {{ $t('playDemoAudio') }}
+              </a>
+            </div>
+          </div>
+
+          <div class="form-group">
+            <select-list
+              :disabled="isDisabled"
+              :items="availableAudioThemes"
+              :value="themeSelected"
+              @select="changeAudioThemeTemporary($event)"
+            >
+              <template #item="{ item, button }">
+                <span v-if="button">
+                  {{ $t(`audioTheme_${themeSelected}`) }}
+                </span>
+                <span v-else>
+                  {{ $t(`audioTheme_${item}`) }}
+                </span>
+              </template>
+            </select-list>
+          </div>
+        </div>
+
+        <save-cancel-buttons
+          :disable-save="previousValue === currentAudioTheme"
+          @saveClicked="changeAudioThemeAndClose()"
+          @cancelClicked="closeModal()"
+        />
+      </td>
+    </tr>
+  </fragment>
+</template>
+
+<style lang="scss" scoped>
+@import '~@/assets/scss/colors.scss';
+
+input {
+  margin-right: 2rem;
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.label-columns {
+  display: flex;
+
+  &:first-of-type {
+    margin-bottom: 1rem;
+  }
+
+  div:first-of-type {
+    flex: 1
+  }
+}
+
+</style>
+
+<script>
+import { mapState } from '@/libs/store';
+
+import SaveCancelButtons from '../components/saveCancelButtons.vue';
+import { InlineSettingMixin } from '../components/inlineSettingMixin';
+import SelectList from '@/components/ui/selectList';
+import { GenericSettingMixin } from '../components/genericSettingMixin';
+import sounds from '@/libs/sounds';
+import ToggleSwitch from '@/components/ui/toggleSwitch.vue';
+
+export default {
+  components: { ToggleSwitch, SelectList, SaveCancelButtons },
+  mixins: [InlineSettingMixin, GenericSettingMixin],
+  data () {
+    return {
+      soundIndex: 0,
+      previousValue: '',
+      // using the user.preferences didn't update the select-list values from off state
+      themeSelected: '',
+    };
+  },
+  computed: {
+    ...mapState({
+      user: 'user.data',
+      availableLanguages: 'i18n.availableLanguages',
+      content: 'content',
+    }),
+    availableAudioThemes () {
+      return this.content.audioThemes;
+    },
+    currentAudioTheme () {
+      return this.user.preferences.sound;
+    },
+    isDisabled () {
+      return this.currentAudioTheme === 'off';
+    },
+  },
+  mounted () {
+    this.resetControls();
+    this.previousValue = this.currentAudioTheme;
+    this.themeSelected = this.currentAudioTheme;
+  },
+  methods: {
+    changeFormat (e) {
+      this.selectedFormat = e;
+      this.modalValuesChanged();
+    },
+    async changeFormatAndClose () {
+      this.user.preferences.dateFormat = this.selectedFormat;
+      await this.setUserPreference('dateFormat');
+      this.closeModal();
+    },
+    /**
+     * is a callback from the {InlineSettingMixin}
+     * do not remove
+     */
+    resetControls () {
+      this.selectedFormat = this.previousValue;
+    },
+    changeAudioThemeTemporary ($event) {
+      this.user.preferences.sound = $event;
+      this.themeSelected = $event;
+      this.soundIndex = 0;
+    },
+    changeAudioThemeAndClose () {
+      this.setUserPreference('sound');
+      this.previousValue = this.user.preferences.sound;
+      this.closeModal();
+    },
+    playAudio () {
+      this.$root.$emit('playSound', sounds[this.soundIndex]);
+      this.soundIndex = (this.soundIndex + 1) % sounds.length;
+    },
+    toggleAudioThemeOff (enabled) {
+      if (enabled) {
+        const [audioTheme] = this.availableAudioThemes;
+
+        this.changeAudioThemeTemporary(audioTheme);
+      } else {
+        this.changeAudioThemeTemporary('off');
+      }
+    },
+  },
+};
+</script>

website/common/locales/en/settings.json

@@ -206,6 +206,9 @@
     "changePasswordDisclaimer": "Password must be 8 characters or more. We recommend a strong password that you're not using elsewhere.",
     "dateFormatDisclaimer": "Adjust the date formatting across Habitica.",
     "verifyUsernameVeteranPet": "One of these Veteran Pets will be waiting for you after you've finished confirming!",
+    "enableAudio": "Enable Audio",
+    "playDemoAudio": "Play Demo",
+    "audioThemeDisclaimer": "Audio themes add optional sound effects to the Habitica website. Volume levels are controlled using your computer's volume settings.",
     "mentioning": "Mentioning",
     "suggestMyUsername": "Suggest my username",
     "everywhere": "Everywhere",