From eb916934f54d94ee7abb951aae60a0893095c7c4 Mon Sep 17 00:00:00 2001
From: Valentyne Stigloher <pixunil@posteo.eu>
Date: Sun, 26 Nov 2023 00:19:24 +0100
Subject: [PATCH] (refactor) factor out PronunciationSpeaker component

---
 components/Example.vue              | 30 +++++---------------
 components/PronunciationSpeaker.vue | 43 +++++++++++++++++++++++++++++
 2 files changed, 50 insertions(+), 23 deletions(-)
 create mode 100644 components/PronunciationSpeaker.vue

diff --git a/components/Example.vue b/components/Example.vue
index 5b5044624..5aff9d1e7 100644
--- a/components/Example.vue
+++ b/components/Example.vue
@@ -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>
diff --git a/components/PronunciationSpeaker.vue b/components/PronunciationSpeaker.vue
new file mode 100644
index 000000000..68651d676
--- /dev/null
+++ b/components/PronunciationSpeaker.vue
@@ -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>