Add voiceover of words

src/composables/useLearningLanguage.ts

@@ -3,8 +3,12 @@ export const useLearningLanguage = () => {
     const { getTranslatedLanguageName, languagesAvailableForLearning } = useConfigStore()
     const { updateActiveLearningLanguage } = useUserStore()
 
-    const activeLearningLanguage = computed(() => unref(customData)?.activeLearningLanguage ?? -1)
-    const activeLearningLanguageName = computed(() => getTranslatedLanguageName(unref(activeLearningLanguage) ?? BASE_INTERFACE_LANGUAGE))
+    const activeLearningLanguageId = computed(() => unref(customData)?.activeLearningLanguage ?? BASE_INTERFACE_LANGUAGE)
+    const activeLearningLanguage = computed(() => ({
+        id: unref(activeLearningLanguageId),
+        name: getTranslatedLanguageName(unref(activeLearningLanguageId), 'full'),
+        nameShort: getTranslatedLanguageName(unref(activeLearningLanguageId), 'short'),
+    }))
     const availableLearningLanguagesOptions = computed(() =>
         languagesAvailableForLearning
             .map(languageId => ({
@@ -17,7 +21,6 @@ export const useLearningLanguage = () => {
 
     return {
         activeLearningLanguage,
-        activeLearningLanguageName,
         availableLearningLanguagesOptions,
         availableLearningLanguagesOptionsExceptActive,
         updateActiveLearningLanguage,

src/composables/useVoiceover.ts

@@ -0,0 +1,42 @@
+import { useSpeechSynthesis } from '@vueuse/core'
+import { useNotification } from 'naive-ui'
+
+export const useVoiceover = ({
+    language,
+}: {
+    language?: string
+} = {}) => {
+    const { t } = useI18n()
+    const notification = useNotification()
+    const { activeLearningLanguage } = useLearningLanguage()
+
+    const textToSpeak = ref('')
+    const speech = useSpeechSynthesis(textToSpeak, {
+        lang: language ?? unref(activeLearningLanguage).nameShort ?? BASE_INTERFACE_LANGUAGE_NAME,
+        pitch: 1,
+        rate: 1,
+        volume: 1,
+    })
+
+    const speak = (text: string) => {
+        textToSpeak.value = text
+
+        if (!unref(speech.isSupported)) {
+            notification.error({
+                content: t('compatibility_error'),
+                meta: t('your_browser_does_not_support_the_text_to_speech_feature'),
+                duration: 1000,
+                keepAliveOnHover: true,
+            })
+
+            return
+        }
+
+        speech.speak()
+        textToSpeak.value = ''
+    }
+
+    return {
+        speak,
+    }
+}

src/modules/workspace/components/WorkspaceHeader/components/WorkspaceHeaderActiveLearningLanguage/WorkspaceHeaderActiveLearningLanguage.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const { isUserDataLoaded } = storeToRefs(useUserStore())
-const { availableLearningLanguagesOptionsExceptActive, activeLearningLanguageName, updateActiveLearningLanguage } = useLearningLanguage()
+const { availableLearningLanguagesOptionsExceptActive, activeLearningLanguage, updateActiveLearningLanguage } = useLearningLanguage()
 const { t } = useI18n()
 
 const learningLanguagesOptions = computed(() => ([
@@ -23,7 +23,7 @@ const learningLanguagesOptions = computed(() => ([
             icon-placement="right"
             type="primary"
             ghost>
-            {{ $t('learn') }} {{ activeLearningLanguageName }}
+            {{ $t('learn') }} {{ activeLearningLanguage.name }}
         </n-button>
     </n-dropdown>
     <n-skeleton

src/modules/workspace/modules/office/pages/settings/OfficeSettingsPage.vue

@@ -57,7 +57,7 @@ const nativeLanguagesOptions = computed(() => Object.keys(unref(languages)).map(
                 <n-select
                     v-if="isUserDataLoaded"
                     @update-value="updateActiveLearningLanguage"
-                    :value="activeLearningLanguage"
+                    :value="activeLearningLanguage.id"
                     :placeholder="$t('select')"
                     :options="availableLearningLanguagesOptions"
                     value-field="key"

src/modules/workspace/modules/words/components/WordsContainer/components/WordsContainerWordsList/components/WordsContainerWordsListItem/WordsContainerWordsListItem.vue

@@ -24,6 +24,7 @@ const {
     updateWordTranslations,
     updateWordStatus,
 } = useWordsContainerStore()
+const { speak } = useVoiceover()
 
 const wordListItem = ref(null)
 
@@ -89,7 +90,9 @@ const toggleChangeableView = () => {
             <n-grid-item
                 span="3 s:2 m:1"
                 class="words-container-words-list-item__property">
-                <n-button text>
+                <n-button
+                    @click="() => speak(source.word)"
+                    text>
                     <template #icon>
                         <n-icon
                             size="20"