settings improvements

package.json

@@ -1,6 +1,6 @@
 {
   "name": "SpessaSynth",
-  "version": "3.23.8",
+  "version": "3.23.9",
   "type": "module",
   "scripts": {
     "start": "node src/website/server/server.js",

src/website/css/settings/settings.css

@@ -50,4 +50,15 @@
     text-shadow: 0 0 5px white;
     border: 1px solid var(--top-buttons-color-end);
     background: var(--top-buttons-color);
+}
+
+.settings_menu .hover_reminder {
+    width: 25ch;
+    white-space: wrap;
+    margin: 1rem auto 0 auto;
+}
+
+.settings_menu .hover_reminder:hover {
+    cursor: pointer;
+    text-shadow: 0 0 5px white;
 }

src/website/js/locale/locale_files/locale_en/export_audio.js

@@ -104,7 +104,7 @@ export const exportAudio = {
                     title: "Exporting embeded MIDI...",
                     loading: "Loading Soundfont and MIDI...",
                     modifyingMIDI: "Modifying MIDI...",
-                    modifyingSoundfont: "Trimming Soundfont...",
+                    modifyingSoundfont: "Trimming Soundfont... (this may take a while!)",
                     saving: "Saving RMIDI...",
                     done: "Done!"
                 },

src/website/js/locale/locale_files/locale_en/settings/settings.js

@@ -36,6 +36,11 @@ export const settingsLocale = {
                 leftToRight: "Left to right",
                 rightToLeft: "Right to left"
             }
+        },
+
+        reminder: {
+            title: "Did you know that you can hover over the settings to get more information?",
+            description: "Like this one!"
         }
     }
 };

src/website/js/locale/locale_files/locale_fr/settings/settings.js

@@ -35,6 +35,11 @@ export const settingsLocale = {
                 leftToRight: "De gauche à droite",
                 rightToLeft: "De droite à gauche"
             }
+        },
+
+        reminder: {
+            title: "Saviez-vous que vous pouvez survoler les paramètres pour obtenir plus d'informations ?",
+            description: "Comme ceci !"
         }
     }
 };

src/website/js/locale/locale_files/locale_ja/settings/settings.js

@@ -35,6 +35,11 @@ export const settingsLocale = {
                 leftToRight: "左から右",
                 rightToLeft: "右から左"
             }
+        },
+
+        reminder: {
+            title: "設定にカーソルを合わせると、詳細情報を表示できることを知っていましたか？",
+            description: "このように！"
         }
     }
 };

src/website/js/locale/locale_files/locale_pl/export_audio.js

@@ -103,7 +103,7 @@ export const exportAudio = {
                     title: "Exportowanie osadzonego MIDI...",
                     loading: "Wczytywanie soundfonta i MIDI...",
                     modifyingMIDI: "Modyfikowanie MIDI...",
-                    modifyingSoundfont: "Zmniejszanie Soundfonta...",
+                    modifyingSoundfont: "Zmniejszanie Soundfonta... (trochę to zajmie!)",
                     saving: "Zapisywanie RMIDI...",
                     done: "Gotowe!"
                 },

src/website/js/locale/locale_files/locale_pl/settings/settings.js

@@ -37,6 +37,11 @@ export const settingsLocale = {
                 leftToRight: "Od lewej do prawej",
                 rightToLeft: "Od prawej do lewej"
             }
+        },
+
+        reminder: {
+            title: "Czy wiedziałeś, że możesz najechać na ustawienia, aby uzyskać więcej informacji?",
+            description: "Tak jak ta!"
         }
     }
 };

src/website/js/locale/locale_files/locale_pt/settings/settings.js

@@ -40,6 +40,11 @@ export const settingsLocale = {
                 leftToRight: "Da esquerda para a direita",
                 rightToLeft: "Da direita para a esquerda"
             }
+        },
+
+        reminder: {
+            title: "Você sabia que pode passar o mouse sobre as configurações para obter mais informações?",
+            description: "Como esta!"
         }
     }
 };

src/website/js/settings_ui/handlers/interface_handler.js

@@ -19,6 +19,7 @@ export function _createInterfaceSettingsHandler()
         option.textContent = locale.localeName;
         select.appendChild(option);
     }
+    select.value = this.locale.localeCode;
     select.onchange = () =>
     {
         if (select.value === "help-translate")

src/website/js/settings_ui/settings.js

@@ -27,7 +27,7 @@ const niceDelayLookupTable = {
     4096: 0.27,
     8192: 0.34,
     16384: 0.37151927437641724,
-    32768: 0.48,
+    32768: 0.48
 };
 
 /**
@@ -165,6 +165,20 @@ class SpessaSynthSettings
             // translate-path-title: apply to both innerText and title, by adding .title and .description respectively
             this.locale.bindObjectProperty(element, "textContent", path + ".title");
             this.locale.bindObjectProperty(element, "title", path + ".description");
+
+            // for labels, also apply the "title" to elements that the label is for
+            if (element.tagName === "LABEL")
+            {
+                const forId = element.getAttribute("for");
+                if (forId)
+                {
+                    const forElement = document.getElementById(forId);
+                    if (forElement)
+                    {
+                        this.locale.bindObjectProperty(forElement, "title", path + ".description");
+                    }
+                }
+            }
         }
 
         this.getHtmlControls();
@@ -387,7 +401,7 @@ class SpessaSynthSettings
         // 16384 fft size = 0.37 s
         if (fft >= 2048)
         {
-            delayTime = niceDelayLookupTable[fft]//fft / this.synthui.synth.context.sampleRate;
+            delayTime = niceDelayLookupTable[fft];//fft / this.synthui.synth.context.sampleRate;
         }
         else
         {

src/website/js/settings_ui/settings_html.js

@@ -136,6 +136,8 @@ export const settingsHtml = `
         </select>
         
         <h3><a href='https://github.com/spessasus/SpessaSynth/wiki/How-To-Use-App' target='_blank' translate-path-title='locale.synthesizerController.helpButton'></a></h3>
+        
+        <h4 class='hover_reminder' translate-path-title='locale.settings.interfaceSettings.reminder'></h4>
     </div>
 </div>
 `;