feat(tts): add voice preview to TTS dialog

Basic implementation of #151

Author: marisademeglio

src/renderer/components/TtsVoicesConfig/VoicePreview.tsx

@@ -0,0 +1,5 @@
+import { TtsConfig, TtsVoice } from 'shared/types/ttsConfig'
+
+export function VoicePreview({ voice }: { voice: TtsVoice }) {
+    return <audio controls src={voice.preview}></audio>
+}

src/renderer/components/TtsVoicesConfig/index.tsx

@@ -6,6 +6,7 @@ import { useWindowStore } from 'renderer/store'
 import { TtsConfig, TtsVoice } from 'shared/types/ttsConfig'
 import { Down, Up } from '../SvgIcons'
 import { voicesTransliterations } from './voiceTransliterations'
+import { VoicePreview } from './VoicePreview'
 
 export function TtsVoicesConfigPane({
     availableVoices,
@@ -338,6 +339,9 @@ export function TtsVoicesConfigPane({
                             }
                             .
                         </p>
+                        <VoicePreview
+                            voice={availableVoices.find((v) => v.id == voiceId)}
+                        ></VoicePreview>
                         {preferredVoices.find((v) => v.id == voiceId) ? (
                             <p>
                                 <i>This voice is already in your list.</i>

src/renderer/style/settings.scss

@@ -106,7 +106,7 @@ $engineColWidth: 8rem;
 .tts-voices-config {
     display: flex;
     flex-direction: column;
-    gap: .5rem;
+    gap: .75rem;
     height: 100%;
 
     .voice-filters {
@@ -122,11 +122,23 @@ $engineColWidth: 8rem;
         }
     }
     .voice-details {
-        display: flex;
-        flex-direction: row;
+        display: grid;
+        grid-template-areas: "desc preview"
+        "add add";
         gap: 1rem;
         align-items:baseline;
-
+        p {
+            grid-area: desc;
+            margin-top: .25rem;
+            margin-bottom: 0;
+        }
+        button {
+            grid-area: add;
+        }
+        audio {
+            grid-area: preview;
+            height: 1rem;
+        }
         button, label, input {
             font-weight: normal;
             font-size: 1.1rem;

src/shared/parser/pipelineXmlConverter/voiceToJson.ts

@@ -6,6 +6,8 @@ function voiceElementToJson(voiceElm: Element): TtsVoice {
         gender: voiceElm.getAttribute('gender'),
         lang: voiceElm.getAttribute('lang'),
         engine: voiceElm.getAttribute('engine'),
+        href: voiceElm.getAttribute('href'),
+        preview: voiceElm.getAttribute('preview'),
     }
     voice.id = `${voice.engine}-${voice.name}`
     return voice

src/shared/types/ttsConfig.ts

@@ -5,6 +5,8 @@ export type TtsVoice = {
     gender: string
     priority?: number
     id?: string
+    href: string
+    preview: string
 }
 export type TtsEngineProperty = {
     key: string