diff --git a/src/composables/useLearningLanguage.ts b/src/composables/useLearningLanguage.ts index b209ce6..e3e6397 100644 --- a/src/composables/useLearningLanguage.ts +++ b/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, diff --git a/src/composables/useVoiceover.ts b/src/composables/useVoiceover.ts new file mode 100644 index 0000000..a8e5c0e --- /dev/null +++ b/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, + } +} diff --git a/src/modules/workspace/components/WorkspaceHeader/components/WorkspaceHeaderActiveLearningLanguage/WorkspaceHeaderActiveLearningLanguage.vue b/src/modules/workspace/components/WorkspaceHeader/components/WorkspaceHeaderActiveLearningLanguage/WorkspaceHeaderActiveLearningLanguage.vue index 336c97b..a58ed6e 100644 --- a/src/modules/workspace/components/WorkspaceHeader/components/WorkspaceHeaderActiveLearningLanguage/WorkspaceHeaderActiveLearningLanguage.vue +++ b/src/modules/workspace/components/WorkspaceHeader/components/WorkspaceHeaderActiveLearningLanguage/WorkspaceHeaderActiveLearningLanguage.vue @@ -1,6 +1,6 @@