TheCloud/PronounsPage
1
0
Fork 0
mirror of https://gitlab.com/PronounsPage/PronounsPage.git synced 2025-09-23 12:43:48 -04:00
Code Issues Packages Projects Releases Wiki Activity

(refactor) factor out PronunciationSpeaker component

Browse Source
This commit is contained in:
Valentyne Stigloher 2023-11-26 00:19:24 +01:00
parent f82344eb0c
commit eb916934f5
2 changed files with 50 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
components/Example.vue
View File

@ -8,13 +8,9 @@
(<nuxt-link :to="'/' + pronoun.canonicalName"><Spelling escape :text="pronoun.canonicalName"/></nuxt-link>)
</small>
<template v-if="config.pronunciation.enabled && pronunciation && pronoun.pronounceable && example.toPronunciationString(pronoun)">
<a v-for="(pLink, name) in pronunciationLinks"
class="mr-2"
dir="ltr"
:href="pLink"
@click.prevent="pronounce(pLink)">
<Icon v="volume"/><sub v-if="name">{{name}}</sub>
</a>
<PronunciationSpeaker v-for="voice in voices" :key="voice"
:pronunciation="example.toPronunciationString(pronoun)" :voice="voice"
/>
</template>
</span>
</template>
@ -28,22 +24,10 @@
link: { type: Boolean },
pronunciation: { type: Boolean },
},
methods: {
pronounce(link) {
const sound = new Audio(link);
sound.play();
}
},
computed: {
pronunciationLinks() {
const justOne = Object.keys(this.config.pronunciation.voices).length === 1;
const links = {};
for (let country in this.config.pronunciation.voices) {
links[justOne ? '' : country] = `/api/pronounce/${country}/${encodeURIComponent(this.example.toPronunciationString(this.pronoun))}`;
}
return links;
}
}
voices() {
return Object.keys(this.config.pronunciation.voices);
},
},
}
</script>

43
components/PronunciationSpeaker.vue Normal file
View File

@ -0,0 +1,43 @@
<template>
<a :class="['mr-2', !pronunciation ? 'disabled' : '']" dir="ltr"
:href="pronunciationLink" @click.prevent="pronounce()"
>
<Icon v="volume"/><sub v-if="name">{{ name }}</sub>
</a>
</template>
<script>
export default {
props: {
pronunciation: { default: null, type: String },
voice: { required: true, type: String },
},
computed: {
pronunciationLink() {
return `/api/pronounce/${this.voice}/${encodeURIComponent(this.pronunciation)}`;
},
name() {
let voices;
if (this.config.pronunciation.enabled) {
voices = Object.keys(this.config.pronunciation.voices);
} else {
voices = null;
}
if (this.config.pronunciation.enabled && voices.length === 1 &&
this.voice === voices[0]) {
// don’t show voice name if it is considered the main voice for this locale
return null;
} else {
return this.voice;
}
},
},
methods: {
pronounce() {
const sound = new Audio(this.pronunciationLink);
sound.play();
},
},
}
</script>