Add New Preset Selector

Addresses #54
spessasus · Oct 6, 2024 · ed9ca9e · ed9ca9e
1 parent 01a85de
commit ed9ca9e
Show file tree

Hide file tree

Showing 14 changed files with 463 additions and 165 deletions.
diff --git a/src/website/css/synthesizer_ui/synthesizer_ui.css b/src/website/css/synthesizer_ui/synthesizer_ui.css
@@ -113,25 +113,4 @@
 
 .mute_button:hover path{
     filter: drop-shadow(0 0 1px currentColor);
-}
-
-.voice_reset{
-    flex: 0;
-    min-width: 0;
-    display: flex;
-    visibility: hidden;
-    justify-content: center;
-    align-items: center;
-    border: #777 1px solid;
-    transition: min-width 50ms ease;
-}
-
-.voice_reset_light * {
-    color: black;
-}
-
-.voice_reset:hover{
-    visibility: visible;
-    min-width: var(--voice-meter-height);
-    cursor: pointer;
 }
diff --git a/src/website/css/synthesizer_ui/voice_selector.css b/src/website/css/synthesizer_ui/voice_selector.css
@@ -56,7 +56,111 @@
     color: red;
 }
 
-.locked_selector:hover + .voice_reset{
-    visibility: visible;
+.voice_reset{
     min-width: var(--voice-meter-height);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: solid 1px #333;
+    background: var(--top-color);
+    padding: var(--primary-border-radius);
+    border-radius: var(--primary-border-radius);
+    margin: .1rem;
+    transition: min-width 50ms ease;
+    cursor: pointer;
+}
+
+.voice_reset:active{
+    filter: brightness(0.8);
+    transform: scale(var(--active-scale));
+}
+
+.voice_reset:hover svg{
+    transform: scale(1.1) rotate(5deg);
+}
+
+.voice_reset_light * {
+    color: black;
+}
+
+.voice_selector_wrapper{
+    position: fixed;
+    z-index: calc(var(--top-index) - 20);
+    backdrop-filter: brightness(0.9) blur(2px);
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    top: 0;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.voice_selector_window {
+    padding: 1rem;
+    border-radius: var(--primary-border-radius);
+    background: var(--top-color);
+    color: var(--font-color);
+    display: flex;
+    flex-direction: column;
+    max-width: 90%;
+    max-height: 90%;
+}
+
+.voice_selector_search_wrapper{
+    display: flex;
+    margin: 1rem;
+}
+
+.voice_selector_window input{
+    border: solid 1px #333;
+    font-size: 1rem;
+    margin: .1rem;
+    padding: var(--primary-border-radius);
+    border-radius: var(--primary-border-radius);
+    background: var(--top-color);
+    color: var(--font-color);
+    flex: 1;
+}
+
+.voice_selector_table_wrapper{
+    max-height: 70vh;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    padding: 1rem;
+}
+
+.voice_selector_table{
+    width: 100%;
+    font-size: 1.1rem;
+    padding: .5rem;
+    border-collapse: collapse;
+}
+
+
+.voice_selector_table th{
+    filter: none !important;
+    text-align: start;
+    line-height: 2rem;
+}
+
+.voice_selector_preset_name{
+    text-align: end;
+    display: block;
+}
+
+.voice_selector_table tr{
+    transition: all 50ms ease;
+    border-radius: var(--primary-border-radius);
+}
+
+.voice_selector_table tr:has(td:hover) {
+    background: var(--primary-color);
+    cursor: pointer;
+}
+
+.voice_selector_selected{
+    background: var(--border-color) !important;
 }
diff --git a/src/website/js/locale/locale_files/locale_en/synthesizer_controller/channel_controller.js b/src/website/js/locale/locale_files/locale_en/synthesizer_controller/channel_controller.js
@@ -50,7 +50,9 @@ export const channelControllerLocale = {
     },
 
     presetSelector: {
-        description: "Change the patch (instrument) channel {0} is using"
+        description: "Change the patch (instrument) channel {0} is using",
+        selectionPrompt: "Change instrument for channel {0}",
+        searchPrompt: "Search..."
     },
 
     presetReset: {

diff --git a/src/website/js/locale/locale_files/locale_ja/synthesizer_controller/channel_controller.js b/src/website/js/locale/locale_files/locale_ja/synthesizer_controller/channel_controller.js
@@ -51,7 +51,9 @@ transposeMeter: {
     },
 
     presetSelector: {
-        description: "チャンネル {0} が使用するパッチ（楽器）を変更"
+        description: "チャンネル {0} が使用するパッチ（楽器）を変更",
+        selectionPrompt: "チャンネル {0} の楽器を変更する",
+        searchPrompt: "検索..."
     },
 
     presetReset: {

diff --git a/src/website/js/locale/locale_files/locale_pl/synthesizer_controller/channel_controller.js b/src/website/js/locale/locale_files/locale_pl/synthesizer_controller/channel_controller.js
@@ -50,7 +50,9 @@ export const channelControllerLocale = {
     },
 
     presetSelector: {
-        description: "Zmień patch (instrument), którego używa kanał {0}"
+        description: "Zmień patch (instrument), którego używa kanał {0}",
+        selectionPrompt: "Zmień instrument kanału {0}",
+        searchPrompt: "Wyszukaj..."
     },
 
     presetReset: {

diff --git a/src/website/js/main/local_main.js b/src/website/js/main/local_main.js
@@ -235,6 +235,9 @@ fetch("soundfonts").then(async r => {
         titleMessage.innerText = "Error fetching soundfonts!";
         throw r.statusText;
     }
+    /**
+     * @type {HTMLSelectElement}
+     */
     const sfSelector = document.getElementById("sf_selector");
 
     soundFonts = JSON.parse(await r.text());
@@ -252,6 +255,7 @@ fetch("soundfonts").then(async r => {
     }
 
     sfSelector.onchange = () => {
+        sfSelector.blur();
         fetch(`/setlastsf2?sfname=${encodeURIComponent(sfSelector.value)}`);
         if(window.manager.seq)
         {

diff --git a/src/website/js/sequencer_ui/lyrics.js b/src/website/js/sequencer_ui/lyrics.js
@@ -10,7 +10,7 @@ export function createLyrics()
 {
     /**
      * @type {{
-     *     mainDiv: HTMLDivElement,
+     *     mainButton: HTMLDivElement,
      *     titleWrapper: HTMLDivElement,
      *     title: HTMLHeadingElement,
      *     text: {

diff --git a/src/website/js/synthesizer_ui/methods/create_channel_controller.js b/src/website/js/synthesizer_ui/methods/create_channel_controller.js
@@ -12,7 +12,6 @@
  *     brightness: Meter,
  *     transpose: Meter,
  *     preset: Selector,
- *     presetReset: HTMLDivElement,
  *     drumsToggle: HTMLDivElement,
  *     soloButton: HTMLDivElement,
  *     muteButton: HTMLDivElement
@@ -27,7 +26,7 @@ import {
     getEmptyMicSvg,
     getMicSvg,
     getMuteSvg,
-    getNoteSvg, getUnlockSVG,
+    getNoteSvg,
     getVolumeSvg,
 } from '../../utils/icons.js'
 import { DEFAULT_PERCUSSION } from '../../../../spessasynth_lib/synthetizer/synthetizer.js'
@@ -182,36 +181,23 @@ export function createChannelController(channelNumber)
     transpose.update(0);
     controller.appendChild(transpose.div);
 
-    // create it here so we can use it in the callback function
-    const presetReset = document.createElement("div");
-
     // preset controller
     const presetSelector = new Selector(
         ([]), // empty for now
         this.locale,
-        LOCALE_PATH + "channelController.presetSelector.description",
+        LOCALE_PATH + "channelController.presetSelector",
         [channelNumber + 1],
         async presetName => {
             const data = presetName.split(":");
             this.synth.lockController(channelNumber, ALL_CHANNELS_OR_DIFFERENT_ACTION, false);
             this.synth.controllerChange(channelNumber, midiControllers.bankSelect, parseInt(data[0]), true);
             this.synth.programChange(channelNumber, parseInt(data[1]), true);
-            presetSelector.mainDiv.classList.add("locked_selector");
+            presetSelector.mainButton.classList.add("locked_selector");
             this.synth.lockController(channelNumber, ALL_CHANNELS_OR_DIFFERENT_ACTION, true);
-        }
+        },
+        locked => this.synth.lockController(channelNumber, ALL_CHANNELS_OR_DIFFERENT_ACTION, locked)
     );
-    controller.appendChild(presetSelector.mainDiv);
-
-    // preset reset
-    presetReset.innerHTML = getUnlockSVG(ICON_SIZE);
-    this.locale.bindObjectProperty(presetReset, "title", LOCALE_PATH + "channelController.presetReset.description", [channelNumber + 1]);
-    presetReset.classList.add("controller_element");
-    presetReset.classList.add("voice_reset");
-    presetReset.onclick = () => {
-        this.synth.lockController(channelNumber, ALL_CHANNELS_OR_DIFFERENT_ACTION, false);
-        presetSelector.mainDiv.classList.remove("locked_selector");
-    }
-    controller.appendChild(presetReset);
+    controller.appendChild(presetSelector.mainButton);
 
     // solo button
     const soloButton = document.createElement("div");
@@ -311,7 +297,6 @@ export function createChannelController(channelNumber)
         reverb: reverb,
         brightness: brightness,
         preset: presetSelector,
-        presetReset: presetReset,
         drumsToggle: drumsToggle,
         soloButton: soloButton,
         muteButton: muteButton,

diff --git a/src/website/js/synthesizer_ui/methods/create_main_controller.js b/src/website/js/synthesizer_ui/methods/create_main_controller.js
@@ -118,10 +118,10 @@ export function createMainSynthController()
             if(channel.reverb.isLocked) channel.reverb.lockMeter();
             if(channel.brightness.isLocked) channel.brightness.lockMeter();
             // program
-            if(channel.preset.mainDiv.classList.contains("locked_selector"))
+            if(channel.preset.mainButton.classList.contains("locked_selector"))
             {
                 this.synth.lockController(number, ALL_CHANNELS_OR_DIFFERENT_ACTION, false);
-                channel.preset.mainDiv.classList.remove("locked_selector");
+                channel.preset.mainButton.classList.remove("locked_selector");
             }
             // transpose
             this.synth.transposeChannel(number, 0, true);