(refactor) factor out PronunciationSpeaker component

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"
+            <PronunciationSpeaker v-for="voice in voices" :key="voice"
-               class="mr-2"
+                                  :pronunciation="example.toPronunciationString(pronoun)" :voice="voice"
-               dir="ltr"
+            />
-               :href="pLink"
-               @click.prevent="pronounce(pLink)">
-                <Icon v="volume"/><sub v-if="name">{{name}}</sub>
-            </a>
         </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() {
+            voices() {
-                const justOne = Object.keys(this.config.pronunciation.voices).length === 1;
+                return Object.keys(this.config.pronunciation.voices);
-
+            },
-                const links = {};
+        },
-                for (let country in this.config.pronunciation.voices) {
-                    links[justOne ? '' : country] = `/api/pronounce/${country}/${encodeURIComponent(this.example.toPronunciationString(this.pronoun))}`;
-                }
-                return links;
-            }
-        }
     }
 </script>

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>