From b51511b99ffebaeae4880bf6aac8b7b37eb26799 Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Mon, 28 Aug 2023 21:46:41 +0300
Subject: [PATCH] Fixed Novel custom voices not saving

---
 public/scripts/extensions/tts/index.js  | 11 +++++++---
 public/scripts/extensions/tts/novel.js  | 28 ++++++++++++++-----------
 public/scripts/extensions/tts/style.css | 18 ++++++++++++++--
 3 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/public/scripts/extensions/tts/index.js b/public/scripts/extensions/tts/index.js
index 5d00d2ddc..3a41ac6e7 100644
--- a/public/scripts/extensions/tts/index.js
+++ b/public/scripts/extensions/tts/index.js
@@ -487,6 +487,11 @@ function loadSettings() {
     if (Object.keys(extension_settings.tts).length === 0) {
         Object.assign(extension_settings.tts, defaultSettings)
     }
+    for (const key in defaultSettings) {
+        if (!(key in extension_settings.tts)) {
+            extension_settings.tts[key] = defaultSettings[key]
+        }
+    }
     $('#tts_provider').val(extension_settings.tts.currentProvider)
     $('#tts_enabled').prop(
         'checked',
@@ -575,7 +580,7 @@ async function loadTtsProvider(provider) {
     if (!provider) {
         return
     }
-    
+
     // Init provider references
     extension_settings.tts.currentProvider = provider
     ttsProviderName = provider
@@ -725,7 +730,7 @@ class VoiceMapEntry {
 
 /**
  * Init voiceMapEntries for character select list.
- * 
+ *
  */
 export async function initVoiceMap(){
     // Clear existing voiceMap state
@@ -751,7 +756,7 @@ export async function initVoiceMap(){
 
     // Get characters in current chat
     const characters = getCharacters()
-    
+
     // Get saved voicemap from provider settings, handling new and old representations
     let voiceMapFromSettings = {}
     if ("voiceMap" in extension_settings.tts[ttsProviderName]) {
diff --git a/public/scripts/extensions/tts/novel.js b/public/scripts/extensions/tts/novel.js
index 58fd73abc..3f88d665e 100644
--- a/public/scripts/extensions/tts/novel.js
+++ b/public/scripts/extensions/tts/novel.js
@@ -1,5 +1,5 @@
 import { getRequestHeaders, callPopup } from "../../../script.js"
-import { getPreviewString } from "./index.js"
+import { getPreviewString, saveTtsProviderSettings } from "./index.js"
 import { initVoiceMap } from "./index.js"
 
 export { NovelTtsProvider }
@@ -21,17 +21,19 @@ class NovelTtsProvider {
 
     get settingsHtml() {
         let html = `
-        <br>
-        <small>
-        Use NovelAI's TTS engine.<br>
-        The default Voice IDs are only examples. Add custom voices and Novel will create a new random voice for it. Feel free to try different options!<br>
-        </small>
-        <small><i>Hint: Save an API key in the NovelAI API settings to use it here.</i></small> <br>
+        <div class="novel_tts_hints">
+            <div>Use NovelAI's TTS engine.</div>
+            <div>
+                The default Voice IDs are only examples. Add custom voices and Novel will create a new random voice for it.
+                Feel free to try different options!
+            </div>
+            <i>Hint: Save an API key in the NovelAI API settings to use it here.</i>
+        </div>
         <label for="tts-novel-custom-voices-add">Custom Voices</label>
-        <div style="display:flex; align-items: baseline">
+        <div class="tts_custom_voices">
             <select id="tts-novel-custom-voices-select"><select>
-            <i id="tts-novel-custom-voices-add" class="tts-button fa-solid fa-plus fa-2x" title="Add" style="color:green"></i>
-            <i id="tts-novel-custom-voices-delete" class="tts-button fa-solid fa-xmark fa-2x" title="Delete" style="color:red"></i>
+            <i id="tts-novel-custom-voices-add" class="tts-button fa-solid fa-plus fa-xl success" title="Add"></i>
+            <i id="tts-novel-custom-voices-delete" class="tts-button fa-solid fa-xmark fa-xl failure" title="Delete"></i>
         </div>
         `;
         return html;
@@ -44,18 +46,20 @@ class NovelTtsProvider {
         this.settings.customVoices.push(voiceName)
         this.populateCustomVoices()
         initVoiceMap() // Update TTS extension voiceMap
+        saveTtsProviderSettings()
     }
 
     // Delete selected custom voice from provider
     deleteCustomVoice() {
         const selected = $("#tts-novel-custom-voices-select").find(':selected').val();
         const voiceIndex = this.settings.customVoices.indexOf(selected);
-        
+
         if (voiceIndex !== -1) {
             this.settings.customVoices.splice(voiceIndex, 1);
         }
         this.populateCustomVoices()
         initVoiceMap() // Update TTS extension voiceMap
+        saveTtsProviderSettings()
     }
 
     // Create the UI dropdown list of voices in provider
@@ -139,7 +143,7 @@ class NovelTtsProvider {
         ];
 
         // Add in custom voices to the map
-        let addVoices = this.settings.customVoices.map(voice => 
+        let addVoices = this.settings.customVoices.map(voice =>
             ({ name: voice, voice_id: voice, lang: 'en-US', preview_url: false })
         )
         voices = voices.concat(addVoices)
diff --git a/public/scripts/extensions/tts/style.css b/public/scripts/extensions/tts/style.css
index 5df2b0fc7..0f4a2c70c 100644
--- a/public/scripts/extensions/tts/style.css
+++ b/public/scripts/extensions/tts/style.css
@@ -70,7 +70,21 @@
 
 .tts_block {
     display: flex;
-    align-items: center;
+    align-items: baseline;
     column-gap: 5px;
     flex-wrap: wrap;
-}
\ No newline at end of file
+}
+
+.tts_custom_voices {
+    display: flex;
+    align-items: baseline;
+    gap: 5px;
+}
+
+.novel_tts_hints {
+    font-size: calc(0.9 * var(--mainFontSize));
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    margin-bottom: 5px;
+}