From 8550a2b3b83736596b882aaedda0609992f4c36f Mon Sep 17 00:00:00 2001
From: Natalia Platova <nataliaplatova47@gmail.com>
Date: Sun, 12 Nov 2023 11:36:13 +0200
Subject: [PATCH 1/4] add card in settings

part of #65
---
 src/frontend/components/OutputLine.vue        |  2 +-
 .../components/Settings/VoiceSettings.vue     | 67 +++++++++++++++++++
 src/frontend/store/LINKaStore.ts              |  1 +
 src/frontend/store/index.ts                   |  5 ++
 src/frontend/views/SettingsView.vue           |  2 +
 5 files changed, 76 insertions(+), 1 deletion(-)
 create mode 100644 src/frontend/components/Settings/VoiceSettings.vue

diff --git a/src/frontend/components/OutputLine.vue b/src/frontend/components/OutputLine.vue
index 5c5f347..05264b4 100644
--- a/src/frontend/components/OutputLine.vue
+++ b/src/frontend/components/OutputLine.vue
@@ -146,7 +146,7 @@ function backspace () {
 async function say () {
   isPlaying.value = true;
   if (props.config?.withoutSpace) {
-    if (text.value) await TTS.instance.playText(text.value);
+    if (text.value) await TTS.instance.playText(text.value, /*voice*/);
   } else await TTS.instance.playCards(props.file, props.cards);
   isPlaying.value = false;
 }
diff --git a/src/frontend/components/Settings/VoiceSettings.vue b/src/frontend/components/Settings/VoiceSettings.vue
new file mode 100644
index 0000000..f400353
--- /dev/null
+++ b/src/frontend/components/Settings/VoiceSettings.vue
@@ -0,0 +1,67 @@
+<template>
+    <v-sheet>
+      <v-card>
+        <v-card-title> Настройки озвучки </v-card-title>
+        <v-card-text>
+            <v-form>
+                <v-select
+                  v-model="voiceOption"
+                  :items="voices"
+                  label="Голос"
+                  item-value="value"
+                  item-title="text"
+                  
+                />
+                <v-btn
+                  color="success"
+                  @click="playExample"
+                >
+                  Прослушать
+                </v-btn>
+            </v-form>
+        </v-card-text>
+      </v-card>
+    </v-sheet>
+  </template>
+  <script lang="ts" setup>
+  import { TTS } from "@/frontend/utils/TTS";
+import { Ref, computed, ref } from "vue";
+  import { useStore } from "vuex";
+  
+  const store = useStore();
+
+  const voices = [
+  { value: "zahar", text: "Захар" },
+  { value: "ermil", text: "Емиль" },
+  { value: "jane", text: "Джейн" },
+  { value: "oksana", text: "Оксана" },
+  { value: "alena", text: "Алёна" },
+  { value: "filipp", text: "Филипп" },
+  { value: "omazh", text: "Ома" }
+];
+  
+  const voice = computed({
+    get () {
+      return store.state.voice;
+    },
+    set (value: string) {
+      store.commit("voice", value);
+    }
+  });
+
+  const defaultVoice = voices.find((v) => v.value === voice.value) || { value: "alena", text: "Алёна" };
+  const voiceOption: Ref<string | null> = ref(defaultVoice.value);
+
+  
+  function selectColor (e) {
+    console.log(e.target.value);
+  }
+  
+  function playExample () {
+    const selected = voices.find((v) => v.value === voice.value);
+    console.log(voices, voice)
+    if (!selected) return;
+    TTS.instance.playText(selected.text, selected.value);
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/src/frontend/store/LINKaStore.ts b/src/frontend/store/LINKaStore.ts
index 8e99588..374be69 100644
--- a/src/frontend/store/LINKaStore.ts
+++ b/src/frontend/store/LINKaStore.ts
@@ -17,6 +17,7 @@ export interface LINKaStore {
         accent: string,
         secondary: string
     }
+    voice: string,
 
     keyMapping: KeyMap
     selectedKey?: Side;
diff --git a/src/frontend/store/index.ts b/src/frontend/store/index.ts
index 733bd0f..894d69b 100644
--- a/src/frontend/store/index.ts
+++ b/src/frontend/store/index.ts
@@ -13,6 +13,7 @@ const fields = [
   { commit: "colors_primary", default: "#197377" } as Field<string>,
   { commit: "colors_accent", default: "#7DF6FA" } as Field<string>,
   { commit: "colors_secondary", default: "#FFAF00" } as Field<string>,
+  { commit: "voice", default: "alena"} as Field<string>,
   { commit: "button_timeout", default: 1000 } as Field<number>,
   { commit: "button_eyeSelect", default: true } as Field<boolean>,
   { commit: "button_eyeActivation", default: true } as Field<boolean>,
@@ -40,6 +41,7 @@ const store = createStore<LINKaStore>({
       accent: "",
       primary: "#197377"
     },
+    voice: "alena",
     button: {
       timeout: 1000,
       enabled: true,
@@ -126,6 +128,9 @@ const store = createStore<LINKaStore>({
     colors_secondary ({ colors }, value) {
       colors.secondary = value;
     },
+    voice ({ voice }, value) {
+      voice = value;
+    },
     editor_current ({ editor }, value) {
       editor.current = value;
     },
diff --git a/src/frontend/views/SettingsView.vue b/src/frontend/views/SettingsView.vue
index 4af9682..90fee16 100644
--- a/src/frontend/views/SettingsView.vue
+++ b/src/frontend/views/SettingsView.vue
@@ -86,6 +86,7 @@
         md="4"
       >
         <color-settings />
+        <voice-settings />
       </v-col>
     </v-row>
     <v-row>
@@ -104,6 +105,7 @@ import { computed, onMounted } from "vue";
 import { useStore } from "vuex";
 
 import ColorSettings from "@/frontend/components/Settings/ColorsSettings.vue";
+import VoiceSettings from "@/frontend/components/Settings/VoiceSettings.vue";
 import InputSettings from "@/frontend/components/Settings/InputSettings.vue";
 import { Metric } from "@/frontend/utils/Metric";
 

From e77dd04e1548348d521a0ce27b4927b84d766a7f Mon Sep 17 00:00:00 2001
From: Natalia Platova <nataliaplatova47@gmail.com>
Date: Sun, 12 Nov 2023 18:32:07 +0200
Subject: [PATCH 2/4] 65 add action for changing voice value

---
 .../components/EditorView/TTSDialog.vue       |  1 +
 src/frontend/components/OutputLine.vue        |  6 +++++-
 .../components/Settings/VoiceSettings.vue     | 20 ++++++++-----------
 src/frontend/store/index.ts                   |  4 ++++
 src/frontend/views/SettingsView.vue           |  7 +++++++
 5 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/frontend/components/EditorView/TTSDialog.vue b/src/frontend/components/EditorView/TTSDialog.vue
index 4aa8238..943ec63 100644
--- a/src/frontend/components/EditorView/TTSDialog.vue
+++ b/src/frontend/components/EditorView/TTSDialog.vue
@@ -85,6 +85,7 @@ const voices = [
 ];
 const dialog = ref(false);
 const audioText = ref(props.audioText ?? "");
+//const voice = ref(computed(() => store.state.voice));
 const voice = ref("alena");
 
 watch(dialog, onDialog);
diff --git a/src/frontend/components/OutputLine.vue b/src/frontend/components/OutputLine.vue
index 05264b4..db5a58b 100644
--- a/src/frontend/components/OutputLine.vue
+++ b/src/frontend/components/OutputLine.vue
@@ -102,6 +102,10 @@ const buttonEnabled = computed(() => {
   return store.state.button.enabled;
 });
 
+const voiceToPlay = computed(() => {
+  return store.state.voice;
+});
+
 const withoutSpace = computed(() => {
   return props.config?.withoutSpace;
 });
@@ -146,7 +150,7 @@ function backspace () {
 async function say () {
   isPlaying.value = true;
   if (props.config?.withoutSpace) {
-    if (text.value) await TTS.instance.playText(text.value, /*voice*/);
+    if (text.value) await TTS.instance.playText(text.value, voiceToPlay.value);
   } else await TTS.instance.playCards(props.file, props.cards);
   isPlaying.value = false;
 }
diff --git a/src/frontend/components/Settings/VoiceSettings.vue b/src/frontend/components/Settings/VoiceSettings.vue
index f400353..dee3fb2 100644
--- a/src/frontend/components/Settings/VoiceSettings.vue
+++ b/src/frontend/components/Settings/VoiceSettings.vue
@@ -5,12 +5,11 @@
         <v-card-text>
             <v-form>
                 <v-select
-                  v-model="voiceOption"
+                  v-model="voice"
                   :items="voices"
                   label="Голос"
                   item-value="value"
                   item-title="text"
-                  
                 />
                 <v-btn
                   color="success"
@@ -29,6 +28,7 @@ import { Ref, computed, ref } from "vue";
   import { useStore } from "vuex";
   
   const store = useStore();
+  //let isPlayingExample = false;
 
   const voices = [
   { value: "zahar", text: "Захар" },
@@ -45,23 +45,19 @@ import { Ref, computed, ref } from "vue";
       return store.state.voice;
     },
     set (value: string) {
-      store.commit("voice", value);
+      store.dispatch("voice_change", value);
     }
   });
 
-  const defaultVoice = voices.find((v) => v.value === voice.value) || { value: "alena", text: "Алёна" };
-  const voiceOption: Ref<string | null> = ref(defaultVoice.value);
-
-  
-  function selectColor (e) {
-    console.log(e.target.value);
-  }
+  /*function isDisabled () {
+    return isPlayingExample;
+  }*/
   
   function playExample () {
+    //isPlayingExample = true;
     const selected = voices.find((v) => v.value === voice.value);
-    console.log(voices, voice)
     if (!selected) return;
-    TTS.instance.playText(selected.text, selected.value);
+    TTS.instance.playText(selected.text, selected.value) //.finally(()=> isPlayingExample=false);
   };
   </script>
   
\ No newline at end of file
diff --git a/src/frontend/store/index.ts b/src/frontend/store/index.ts
index 894d69b..12a7450 100644
--- a/src/frontend/store/index.ts
+++ b/src/frontend/store/index.ts
@@ -233,6 +233,10 @@ const store = createStore<LINKaStore>({
       commit("keyMapping_" + side, state.keyMapping[side].filter((c) => c !== code));
       state.selectedKey = undefined;
     },
+    voice_change ({ state }, voice: string) {
+      state.voice = voice;
+      //commit("voice");
+    },
 
     interface_outputLine ({ state, commit }) {
       commit("interface_outputLine", !state.ui.outputLine);
diff --git a/src/frontend/views/SettingsView.vue b/src/frontend/views/SettingsView.vue
index 90fee16..5a7dbf3 100644
--- a/src/frontend/views/SettingsView.vue
+++ b/src/frontend/views/SettingsView.vue
@@ -86,6 +86,13 @@
         md="4"
       >
         <color-settings />
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col
+        cols="12"
+        md="8"
+      >
         <voice-settings />
       </v-col>
     </v-row>

From 732ca4c2c377700577f57acb667def99665a3fe1 Mon Sep 17 00:00:00 2001
From: Natalia Platova <nataliaplatova47@gmail.com>
Date: Sun, 12 Nov 2023 20:08:19 +0200
Subject: [PATCH 3/4] add default voice from settings

---
 .../components/EditorView/TTSDialog.vue       |  15 +--
 src/frontend/components/OutputLine.vue        |   1 +
 .../components/Settings/VoiceSettings.vue     | 110 ++++++++----------
 src/frontend/store/index.ts                   |   3 +-
 src/frontend/utils/TTS.ts                     |  10 ++
 5 files changed, 66 insertions(+), 73 deletions(-)

diff --git a/src/frontend/components/EditorView/TTSDialog.vue b/src/frontend/components/EditorView/TTSDialog.vue
index 943ec63..393356b 100644
--- a/src/frontend/components/EditorView/TTSDialog.vue
+++ b/src/frontend/components/EditorView/TTSDialog.vue
@@ -74,19 +74,12 @@ const emit = defineEmits<{(e: "audio", payload: { audioSrcFile: string, audioTex
 
 const ui_disabled = computed(() => store.state.ui.disabled);
 
-const voices = [
-  { value: "zahar", text: "Захар" },
-  { value: "ermil", text: "Емиль" },
-  { value: "jane", text: "Джейн" },
-  { value: "oksana", text: "Оксана" },
-  { value: "alena", text: "Алёна" },
-  { value: "filipp", text: "Филипп" },
-  { value: "omazh", text: "Ома" }
-];
+const voices = TTS.voices;
+
 const dialog = ref(false);
 const audioText = ref(props.audioText ?? "");
-//const voice = ref(computed(() => store.state.voice));
-const voice = ref("alena");
+const defaultVoice = computed(() => store.state.voice);
+const voice = ref(defaultVoice.value);
 
 watch(dialog, onDialog);
 
diff --git a/src/frontend/components/OutputLine.vue b/src/frontend/components/OutputLine.vue
index db5a58b..02811a5 100644
--- a/src/frontend/components/OutputLine.vue
+++ b/src/frontend/components/OutputLine.vue
@@ -148,6 +148,7 @@ function backspace () {
 }
 
 async function say () {
+  if (isPlaying.value) return;
   isPlaying.value = true;
   if (props.config?.withoutSpace) {
     if (text.value) await TTS.instance.playText(text.value, voiceToPlay.value);
diff --git a/src/frontend/components/Settings/VoiceSettings.vue b/src/frontend/components/Settings/VoiceSettings.vue
index dee3fb2..af173f4 100644
--- a/src/frontend/components/Settings/VoiceSettings.vue
+++ b/src/frontend/components/Settings/VoiceSettings.vue
@@ -1,63 +1,53 @@
 <template>
-    <v-sheet>
-      <v-card>
-        <v-card-title> Настройки озвучки </v-card-title>
-        <v-card-text>
-            <v-form>
-                <v-select
-                  v-model="voice"
-                  :items="voices"
-                  label="Голос"
-                  item-value="value"
-                  item-title="text"
-                />
-                <v-btn
-                  color="success"
-                  @click="playExample"
-                >
-                  Прослушать
-                </v-btn>
-            </v-form>
-        </v-card-text>
-      </v-card>
-    </v-sheet>
-  </template>
-  <script lang="ts" setup>
-  import { TTS } from "@/frontend/utils/TTS";
-import { Ref, computed, ref } from "vue";
-  import { useStore } from "vuex";
-  
-  const store = useStore();
-  //let isPlayingExample = false;
+  <v-sheet>
+    <v-card>
+      <v-card-title> Голос озвучки </v-card-title>
+      <v-card-text>
+        <v-form>
+          <v-select
+            v-model="voice"
+            :items="voices"
+            label="Голос"
+            item-value="value"
+            item-title="text"
+          />
+          <v-btn
+            color="success"
+            @click="playExample"
+          >
+            Прослушать
+          </v-btn>
+        </v-form>
+      </v-card-text>
+    </v-card>
+  </v-sheet>
+</template>
+<script lang="ts" setup>
+import { TTS } from "@/frontend/utils/TTS";
+import { computed, ref } from "vue";
+import { useStore } from "vuex";
 
-  const voices = [
-  { value: "zahar", text: "Захар" },
-  { value: "ermil", text: "Емиль" },
-  { value: "jane", text: "Джейн" },
-  { value: "oksana", text: "Оксана" },
-  { value: "alena", text: "Алёна" },
-  { value: "filipp", text: "Филипп" },
-  { value: "omazh", text: "Ома" }
-];
-  
-  const voice = computed({
-    get () {
-      return store.state.voice;
-    },
-    set (value: string) {
-      store.dispatch("voice_change", value);
-    }
-  });
+const store = useStore();
+const isPlayingExample = ref(false);
+
+const voices = TTS.voices;
 
-  /*function isDisabled () {
-    return isPlayingExample;
-  }*/
-  
-  function playExample () {
-    //isPlayingExample = true;
-    const selected = voices.find((v) => v.value === voice.value);
-    if (!selected) return;
-    TTS.instance.playText(selected.text, selected.value) //.finally(()=> isPlayingExample=false);
-  };
-  </script>
-  
\ No newline at end of file
+const voice = computed({
+  get () {
+    return store.state.voice;
+  },
+  set (value: string) {
+    store.dispatch("voice_change", value);
+  }
+});
+
+function playExample () {
+  if (isPlayingExample.value) return;
+  isPlayingExample.value = true;
+  const selected = voices.find((v) => v.value === voice.value);
+  if (!selected) return;
+  TTS.instance.playText(selected.text, selected.value).finally(() => {
+    isPlayingExample.value = false;
+  });
+}
+</script>
diff --git a/src/frontend/store/index.ts b/src/frontend/store/index.ts
index 12a7450..c5a8633 100644
--- a/src/frontend/store/index.ts
+++ b/src/frontend/store/index.ts
@@ -13,7 +13,7 @@ const fields = [
   { commit: "colors_primary", default: "#197377" } as Field<string>,
   { commit: "colors_accent", default: "#7DF6FA" } as Field<string>,
   { commit: "colors_secondary", default: "#FFAF00" } as Field<string>,
-  { commit: "voice", default: "alena"} as Field<string>,
+  { commit: "voice", default: "alena" } as Field<string>,
   { commit: "button_timeout", default: 1000 } as Field<number>,
   { commit: "button_eyeSelect", default: true } as Field<boolean>,
   { commit: "button_eyeActivation", default: true } as Field<boolean>,
@@ -235,7 +235,6 @@ const store = createStore<LINKaStore>({
     },
     voice_change ({ state }, voice: string) {
       state.voice = voice;
-      //commit("voice");
     },
 
     interface_outputLine ({ state, commit }) {
diff --git a/src/frontend/utils/TTS.ts b/src/frontend/utils/TTS.ts
index f10ab45..92d92eb 100644
--- a/src/frontend/utils/TTS.ts
+++ b/src/frontend/utils/TTS.ts
@@ -13,6 +13,16 @@ export class TTS {
     return TTS._instance;
   }
 
+  static voices = [
+    { value: "zahar", text: "Захар" },
+    { value: "ermil", text: "Емиль" },
+    { value: "jane", text: "Джейн" },
+    { value: "oksana", text: "Оксана" },
+    { value: "alena", text: "Алёна" },
+    { value: "filipp", text: "Филипп" },
+    { value: "omazh", text: "Ома" }
+  ];
+
   public async playCards (file: string, cards: Card[], force = false) {
     if (this.isPlaying) {
       this.isPlaying = false;

From e7361adcdf39965406c8b2244f8fd06ebeadf529 Mon Sep 17 00:00:00 2001
From: Natalia Platova <nataliaplatova47@gmail.com>
Date: Mon, 20 Nov 2023 21:09:16 +0200
Subject: [PATCH 4/4] add saving voice to config

---
 src/common/interfaces/ConfigFile.ts           |  1 +
 .../components/EditorView/TTSDialog.vue       | 46 +++++++++++++------
 src/frontend/views/EditorView.vue             | 10 +++-
 3 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/src/common/interfaces/ConfigFile.ts b/src/common/interfaces/ConfigFile.ts
index a5b8ba7..46a71bb 100644
--- a/src/common/interfaces/ConfigFile.ts
+++ b/src/common/interfaces/ConfigFile.ts
@@ -11,6 +11,7 @@ export interface Card {
   title?: string;
   audioPath?: string;
   audioText?: string;
+  audioVoice?: string
   answer?: true
 }
 
diff --git a/src/frontend/components/EditorView/TTSDialog.vue b/src/frontend/components/EditorView/TTSDialog.vue
index 393356b..ef30847 100644
--- a/src/frontend/components/EditorView/TTSDialog.vue
+++ b/src/frontend/components/EditorView/TTSDialog.vue
@@ -21,8 +21,8 @@
       <v-card-text>
         <v-form>
           <v-select
-            v-model="voice"
-            :items="voices"
+            v-model="currentVoice"
+            :items="voiceOptions"
             label="Голос"
             item-value="value"
             item-title="text"
@@ -63,38 +63,56 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch, defineProps, defineEmits, computed } from "vue";
+import { ref, watch, defineProps, defineEmits, computed, Ref } from "vue";
 import { useStore } from "vuex";
 import { storageService } from "@/frontend/services/card-storage-service";
 import { TTS } from "@/frontend/utils/TTS";
 
 const store = useStore();
-const props = defineProps<{ file: string, audioText?: string }>();
-const emit = defineEmits<{(e: "audio", payload: { audioSrcFile: string, audioText: string }): void }>();
+const props = defineProps<{ file: string, audioText?: string, audioVoice?: string }>();
+const emit = defineEmits<{(e: "audio", payload: { audioSrcFile: string, audioText: string, audioVoice: string }): void }>();
 
 const ui_disabled = computed(() => store.state.ui.disabled);
 
-const voices = TTS.voices;
-
 const dialog = ref(false);
-const audioText = ref(props.audioText ?? "");
-const defaultVoice = computed(() => store.state.voice);
-const voice = ref(defaultVoice.value);
+
+const audioText: Ref<(string)> = ref("");
+const currentAudioText = computed({
+  get () {
+    return audioText.value;
+  },
+  set (v: string) {
+    audioText.value = v;
+  }
+});
+
+const voiceOptions = TTS.voices;
+const defaultSettingsVoice = computed(() => store.state.voice);
+const voice: Ref<(string)> = ref("");
+const currentVoice = computed({
+  get () {
+    return voice.value;
+  },
+  set (v: string) {
+    voice.value = v;
+  }
+});
 
 watch(dialog, onDialog);
 
 function create () {
   store.dispatch("disable_ui");
-  storageService.createAudioFromText(props.file, audioText.value, voice.value).then((audioSrcFile: string) => {
-    emit("audio", { audioSrcFile, audioText: audioText.value });
+  storageService.createAudioFromText(props.file, currentAudioText.value, currentVoice.value).then((audioSrcFile: string) => {
+    emit("audio", { audioSrcFile, audioText: audioText.value, audioVoice: voice.value });
     store.dispatch("enable_ui");
     dialog.value = false;
   });
 }
 
 function onDialog (v: boolean) {
-  if (!v) {
-    audioText.value = "";
+  if (v) {
+    currentVoice.value = props.audioVoice ?? defaultSettingsVoice.value;
+    currentAudioText.value = props.audioText ?? "";
   }
 }
 
diff --git a/src/frontend/views/EditorView.vue b/src/frontend/views/EditorView.vue
index c4efb62..b2814c8 100644
--- a/src/frontend/views/EditorView.vue
+++ b/src/frontend/views/EditorView.vue
@@ -99,7 +99,12 @@
                   <v-card-text>
                     <v-container>
                       <v-row>
-                        <TTSDialog :file="filename" @audio="onAudioFromTTS" />
+                        <TTSDialog
+                          :file="filename"
+                          @audio="onAudioFromTTS"
+                          :audioText="selected.audioText"
+                          :audioVoice="selected.audioVoice"
+                        />
                       </v-row>
                       <v-row>
                         <v-btn block class="mb-1" :disabled="ui_disabled" @click="selectAudio">
@@ -391,10 +396,11 @@ async function selectImage () {
   store.dispatch("enable_ui");
 }
 
-function onAudioFromTTS ({ audioSrcFile, audioText }: { audioSrcFile: string, audioText: string }) {
+function onAudioFromTTS ({ audioSrcFile, audioText, audioVoice }: { audioSrcFile: string, audioText: string, audioVoice: string }) {
   if (!selected.value) throw new Error("Setting audio from TTSDialog to a nullish selected card");
   selected.value.audioPath = audioSrcFile;
   selected.value.audioText = audioText;
+  selected.value.audioVoice = audioVoice;
 }
 /**
  * Called each time the user decides to open the fs navigator and use an .mp3