chuijs 4.0.1 → 4.0.3

package/framework/components/chui_media/audio.js

@@ -1,12 +1,12 @@
 const { Icon, Icons } = require("../chui_icons/icons");
-const {Label} = require('../chui_label/label');
-const Store = require('electron-store');
-const {makeKeyboardButton} = require("../../modules/chui_a11y/chui_a11y");
-const {Log} = require("../../modules/chui_logger/chui_logger");
-const {I18n} = require("../../modules/chui_i18n/chui_i18n");
-const {optionOr} = require("../../modules/chui_functions");
-const {Select} = require("../chui_inputs/chui_select_box/select_box");
-const {Toggle} = require("../chui_inputs/chui_toggle/toggle");
+const { Label } = require("../chui_label/label");
+const Store = require("electron-store");
+const { makeKeyboardButton } = require("../../modules/chui_a11y/chui_a11y");
+const { Log } = require("../../modules/chui_logger/chui_logger");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
+const { optionOr } = require("../../modules/chui_functions");
+const { Select } = require("../chui_inputs/chui_select_box/select_box");
+const { Toggle } = require("../chui_inputs/chui_toggle/toggle");
 const store = new Store();
 
 /**
@@ -43,13 +43,28 @@ class Audio {
     #destroyed = false;
     #onPlay = () => this.#renderPlayState(true);
     #onPause = () => this.#renderPlayState(false);
-    #onTimeUpdate = () => { this.#displayBufferedAmount(); this.#renderProgress(); };
-    #onDurationChange = () => { this.#setSliderMax(); this.#renderProgress(); };
-    constructor(options = {
-        src: String(), autoplay: Boolean(), loop: Boolean(), muted: Boolean(), volume: Number(),
-        pin: String(), width: String(), height: String(), label: String()
-    }) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/audio_styles.css", 'chUiJS_Audio');
+    #onTimeUpdate = () => {
+        this.#displayBufferedAmount();
+        this.#renderProgress();
+    };
+    #onDurationChange = () => {
+        this.#setSliderMax();
+        this.#renderProgress();
+    };
+    constructor(
+        options = {
+            src: String(),
+            autoplay: Boolean(),
+            loop: Boolean(),
+            muted: Boolean(),
+            volume: Number(),
+            pin: String(),
+            width: String(),
+            height: String(),
+            label: String(),
+        }
+    ) {
+        require("../../modules/chui_functions").setStyles(__dirname + "/audio_styles.css", "chUiJS_Audio");
         this.#chui_at.preload = "metadata";
         this.#chui_at.controls = false;
         // Плеер — именованная группа: без имени скринридер читает подряд безымянные кнопки
@@ -64,8 +79,8 @@ class Audio {
         if (options.width !== undefined) this.#chui_ap_main.style.width = options.width;
         if (options.height !== undefined) this.#chui_ap_main.style.height = options.height;
         // ПОЛОСА ПРОГРЕССА
-        this.#chui_ap_time1 = new Label({text: `0:00`});
-        this.#chui_ap_time2 = new Label({text: `0:00`});
+        this.#chui_ap_time1 = new Label({ text: `0:00` });
+        this.#chui_ap_time2 = new Label({ text: `0:00` });
         this.#chui_ap_seek.type = "range";
         this.#chui_ap_seek.id = "chui_ap_seek";
         this.#chui_ap_seek.max = "0";
@@ -162,7 +177,7 @@ class Audio {
         if (this.#chui_ap_fx_dropdown.contains(event.target)) return;
         if (this.#chui_ap_fx_icon.contains(event.target)) return;
         this.#toggleFx(false);
-    }
+    };
     #playPause = async () => {
         if (this.getPaused()) {
             try {
@@ -171,30 +186,37 @@ class Audio {
                 Log.error(`Audio: воспроизведение не началось: ${error}`);
             }
         } else this.pause();
-    }
+    };
     #renderPlayState(playing) {
-        this.#setIcon(this.#chui_ap_play_pause, playing ? Icons.AUDIO_VIDEO.PAUSE : Icons.AUDIO_VIDEO.PLAY_ARROW, "18px");
+        this.#setIcon(
+            this.#chui_ap_play_pause,
+            playing ? Icons.AUDIO_VIDEO.PAUSE : Icons.AUDIO_VIDEO.PLAY_ARROW,
+            "18px"
+        );
         this.#setLabel(this.#chui_ap_play_pause, playing ? I18n.t("media.pause") : I18n.t("media.play"));
     }
     #renderVolume = () => {
         const доля = Math.min(100, Math.max(0, Math.round(this.#chui_at.volume * 100)));
         this.#chui_ap_volume.value = String(доля);
         this.#chui_ap_volume.disabled = this.getMuted();
-        this.#chui_ap_main.style.setProperty('--volume-before-width', `${доля}%`);
-        this.#setIcon(this.#chui_ap_volume_icon, this.getMuted() || доля === 0
-            ? Icons.AUDIO_VIDEO.VOLUME_OFF : Icons.AUDIO_VIDEO.VOLUME_UP, "18px");
+        this.#chui_ap_main.style.setProperty("--volume-before-width", `${доля}%`);
+        this.#setIcon(
+            this.#chui_ap_volume_icon,
+            this.getMuted() || доля === 0 ? Icons.AUDIO_VIDEO.VOLUME_OFF : Icons.AUDIO_VIDEO.VOLUME_UP,
+            "18px"
+        );
         this.#setLabel(this.#chui_ap_volume_icon, I18n.t(this.getMuted() ? "media.unmute" : "media.mute"));
-    }
+    };
     #displayBufferedAmount = () => {
         const max = Number(this.#chui_ap_seek.max);
         if (!(max > 0)) return;
         try {
-            const конец = Math.floor(this.#chui_at.buffered.end(0) / max * 100);
+            const конец = Math.floor((this.#chui_at.buffered.end(0) / max) * 100);
             this.#chui_ap_seek_buf.style.width = `${Math.min(100, Math.max(0, конец))}%`;
         } catch (_error) {
             // Буфер ещё пуст (метаданные не пришли) — рисовать нечего
         }
-    }
+    };
     // Длительность приходит с метаданными: без неё полоса прокрутки делила бы на ноль,
     // а у живого потока её нет вовсе (duration = Infinity)
     #setSliderMax = () => {
@@ -203,7 +225,7 @@ class Audio {
         this.#chui_ap_seek.max = известна ? String(Math.floor(duration)) : "0";
         // Без известной длительности ползунок бессмысленен: перетаскивание отправляло бы плеер в начало
         this.#chui_ap_seek.disabled = !известна;
-    }
+    };
     #renderProgress = () => {
         const max = Number(this.#chui_ap_seek.max);
         const position = this.getCurrentTime();
@@ -212,7 +234,7 @@ class Audio {
             // «0:07 / 0:00» читалось бы как поломка: у источника без длительности только прошедшее
             this.#chui_ap_time1.setText(this.#calculateTime(position));
             this.#chui_ap_time2.setText("");
-            this.#chui_ap_main.style.setProperty('--seek-before-width', '0%');
+            this.#chui_ap_main.style.setProperty("--seek-before-width", "0%");
             return;
         }
         this.#chui_ap_time1.setText(this.#calculateTime(position));
@@ -220,22 +242,24 @@ class Audio {
         this.#chui_ap_seek.value = String(position);
         // Доля ограничена сотней: `max` — округлённая длительность, а позиция идёт дальше,
         // и без ограничения полоса целиком заливалась акцентом
-        const доля = Math.min(100, Math.max(0, Math.floor(position / max * 100)));
-        this.#chui_ap_main.style.setProperty('--seek-before-width', `${доля}%`);
-    }
+        const доля = Math.min(100, Math.max(0, Math.floor((position / max) * 100)));
+        this.#chui_ap_main.style.setProperty("--seek-before-width", `${доля}%`);
+    };
     #calculateTime = (secs) => {
         const seconds = Number.isFinite(Number(secs)) ? Number(secs) : 0;
         const minutes = Math.floor(seconds / 60);
         const rest = Math.floor(seconds % 60);
         return `${minutes}:${rest < 10 ? `0${rest}` : `${rest}`}`;
-    }
+    };
     #onMediaError = () => {
         const код = this.#chui_at.error === null ? undefined : this.#chui_at.error.code;
         const причина = Audio.#ERRORS[код] === undefined ? "" : `: ${I18n.t(Audio.#ERRORS[код])}`;
         Log.error(`Audio: ошибка воспроизведения${причина}`);
-        this.#setStatus(`${I18n.t("media.audioNotPlaying", {reason: I18n.t("media.error.interrupted")})}${причина}`);
+        this.#setStatus(`${I18n.t("media.audioNotPlaying", { reason: I18n.t("media.error.interrupted") })}${причина}`);
+    };
+    #setStatus(text) {
+        this.#status.innerText = text;
     }
-    #setStatus(text) { this.#status.innerText = text; }
     #setButton(node, label, icon, size) {
         node.innerHTML = new Icon(icon, size).getHTML();
         node.setAttribute("aria-label", label);
@@ -285,67 +309,133 @@ class Audio {
         else this.#chui_ap_main.setAttribute("data_pin", значение);
         return this;
     }
-    getPin() { return this.#pin; }
+    getPin() {
+        return this.#pin;
+    }
     // === ЭКВАЛАЙЗЕР ===
     /** Включить или выключить эквалайзер: то же, что делает выключатель в панели */
-    setEqualizerEnabled(boolean = Boolean()) { return this.#chui_audio_fx.setEnabled(boolean), this; }
-    isEqualizerEnabled() { return this.#chui_audio_fx.isEnabled(); }
+    setEqualizerEnabled(boolean = Boolean()) {
+        return (this.#chui_audio_fx.setEnabled(boolean), this);
+    }
+    isEqualizerEnabled() {
+        return this.#chui_audio_fx.isEnabled();
+    }
     /** Раскрыть или свернуть панель эквалайзера */
-    setEqualizerOpen(open = Boolean()) { this.#toggleFx(open === true); return this; }
+    setEqualizerOpen(open = Boolean()) {
+        this.#toggleFx(open === true);
+        return this;
+    }
     /** Показать панель эквалайзера, если она скрыта, и наоборот */
-    isEqualizerOpen() { return this.#chui_ap_fx_dropdown.classList.contains("fx_open"); }
+    isEqualizerOpen() {
+        return this.#chui_ap_fx_dropdown.classList.contains("fx_open");
+    }
     /** Прочитать сохранённое состояние эквалайзера из настроек */
-    restoreFX() { this.#chui_audio_fx.restore(); return this; }
+    restoreFX() {
+        this.#chui_audio_fx.restore();
+        return this;
+    }
     // === СТАНДАРТНЫЕ ВОЗМОЖНОСТИ `<audio>` ===
     /** Сам элемент: для всего, чего нет в списке ниже */
-    getAudio() { return this.#chui_at; }
+    getAudio() {
+        return this.#chui_at;
+    }
     /** Воспроизведение: промис, как у `<audio>` */
-    play() { return this.#chui_at.play(); }
-    pause() { this.#chui_at.pause(); return this; }
-    load() { this.#chui_at.load(); return this; }
-    canPlayType(type = String()) { return this.#chui_at.canPlayType(type); }
-    getSrc() { return this.#chui_at.getAttribute("src") ?? ""; }
+    play() {
+        return this.#chui_at.play();
+    }
+    pause() {
+        this.#chui_at.pause();
+        return this;
+    }
+    load() {
+        this.#chui_at.load();
+        return this;
+    }
+    canPlayType(type = String()) {
+        return this.#chui_at.canPlayType(type);
+    }
+    getSrc() {
+        return this.#chui_at.getAttribute("src") ?? "";
+    }
     setSrc(url = String()) {
         this.#chui_at.setAttribute("src", url);
         this.#chui_at.load();
         return this;
     }
-    getSrcObject() { return this.#chui_at.srcObject; }
+    getSrcObject() {
+        return this.#chui_at.srcObject;
+    }
     /** Живой поток — штатное `srcObject`, а не путь */
     setSrcObject(object) {
         this.#chui_at.srcObject = object;
         return this;
     }
-    getCurrentTime() { return this.#chui_at.currentTime; }
+    getCurrentTime() {
+        return this.#chui_at.currentTime;
+    }
     setCurrentTime(seconds = Number()) {
         this.#chui_at.currentTime = Number(seconds);
         // Подписи и заливка не ждут `timeupdate`: перемотка из кода видна сразу
         this.#renderProgress();
         return this;
     }
-    getDuration() { return this.#chui_at.duration; }
-    getBuffered() { return this.#chui_at.buffered; }
-    getPaused() { return this.#chui_at.paused; }
-    getEnded() { return this.#chui_at.ended; }
-    getReadyState() { return this.#chui_at.readyState; }
-    getVolume() { return this.#chui_at.volume; }
+    getDuration() {
+        return this.#chui_at.duration;
+    }
+    getBuffered() {
+        return this.#chui_at.buffered;
+    }
+    getPaused() {
+        return this.#chui_at.paused;
+    }
+    getEnded() {
+        return this.#chui_at.ended;
+    }
+    getReadyState() {
+        return this.#chui_at.readyState;
+    }
+    getVolume() {
+        return this.#chui_at.volume;
+    }
     setVolume(value = Number()) {
         this.#chui_at.volume = Math.min(1, Math.max(0, Number(value)));
         return this;
     }
-    getMuted() { return this.#chui_at.muted; }
+    getMuted() {
+        return this.#chui_at.muted;
+    }
     setMuted(boolean = Boolean()) {
         this.#chui_at.muted = boolean === true;
         return this;
     }
-    getPlaybackRate() { return this.#chui_at.playbackRate; }
-    setPlaybackRate(rate = Number()) { this.#chui_at.playbackRate = Number(rate); return this; }
-    getDefaultPlaybackRate() { return this.#chui_at.defaultPlaybackRate; }
-    setDefaultPlaybackRate(rate = Number()) { this.#chui_at.defaultPlaybackRate = Number(rate); return this; }
-    getLoop() { return this.#chui_at.loop; }
-    setLoop(boolean = Boolean()) { this.#chui_at.loop = boolean === true; return this; }
-    getAutoplay() { return this.#chui_at.autoplay; }
-    setAutoplay(boolean = Boolean()) { this.#chui_at.autoplay = boolean === true; return this; }
+    getPlaybackRate() {
+        return this.#chui_at.playbackRate;
+    }
+    setPlaybackRate(rate = Number()) {
+        this.#chui_at.playbackRate = Number(rate);
+        return this;
+    }
+    getDefaultPlaybackRate() {
+        return this.#chui_at.defaultPlaybackRate;
+    }
+    setDefaultPlaybackRate(rate = Number()) {
+        this.#chui_at.defaultPlaybackRate = Number(rate);
+        return this;
+    }
+    getLoop() {
+        return this.#chui_at.loop;
+    }
+    setLoop(boolean = Boolean()) {
+        this.#chui_at.loop = boolean === true;
+        return this;
+    }
+    getAutoplay() {
+        return this.#chui_at.autoplay;
+    }
+    setAutoplay(boolean = Boolean()) {
+        this.#chui_at.autoplay = boolean === true;
+        return this;
+    }
     addEventListener(type = String(), listener = () => {}) {
         this.#chui_at.addEventListener(type, listener);
         return this;
@@ -354,7 +444,9 @@ class Audio {
         this.#chui_at.removeEventListener(type, listener);
         return this;
     }
-    set() { return this.#chui_ap_main; }
+    set() {
+        return this.#chui_ap_main;
+    }
     detach() {
         this.pause();
         this.#chui_ap_main.remove();
@@ -366,7 +458,7 @@ class Audio {
         this.#destroyed = true;
         this.#chui_at.pause();
         this.#chui_at.removeAttribute("src");
-        this.#chui_at.load();                       // отпускает декодер и прочитанный файл
+        this.#chui_at.load(); // отпускает декодер и прочитанный файл
         this.#unsetMediaActions();
         document.removeEventListener("mousedown", this.#onFxOutside);
         this.#chui_audio_fx.destroy();
@@ -378,34 +470,34 @@ class Audio {
         2: "media.error.notFound",
         3: "media.error.decode",
         4: "media.error.format",
-    }
+    };
 }
 class AudioFX {
-    #chui_ap_equalizer_main = document.createElement('chui_ap_equalizer_main')
-    #chui_ap_equalizer_controls = document.createElement('chui_ap_equalizer_controls')
-    #chui_ap_equalizer_block = document.createElement('chui_ap_equalizer_block')
-    #chui_ap_equalizer_preamp_block = document.createElement("chui_ap_equalizer_preamp_block")
-    #chui_ap_equalizer_band_block = document.createElement("chui_ap_equalizer_band_block")
+    #chui_ap_equalizer_main = document.createElement("chui_ap_equalizer_main");
+    #chui_ap_equalizer_controls = document.createElement("chui_ap_equalizer_controls");
+    #chui_ap_equalizer_block = document.createElement("chui_ap_equalizer_block");
+    #chui_ap_equalizer_preamp_block = document.createElement("chui_ap_equalizer_preamp_block");
+    #chui_ap_equalizer_band_block = document.createElement("chui_ap_equalizer_band_block");
     /* Поле пресетов и переключатель — общекитовые `Select` и `Toggle`, вложенные в панель:
        клавиатура, роли и состояния у них уже есть, а размеры для полосы панели задаёт
        `audio_styles.css`. Прежде тут были свои элементы, и список пресетов ломался:
        при ограниченной высоте слоя `Select` сжимал строки до 11 px — лечится `flex: none`
        у опций (`chui_select_box/styles.css`) */
-    #switch = new Toggle({ label: I18n.t("media.enableEqualizer") })
-    #presets = new Select()
-    #eqBands = [60, 170, 310, 600, 1000, 3000, 6000, 12000, 14000, 16000]
+    #switch = new Toggle({ label: I18n.t("media.enableEqualizer") });
+    #presets = new Select();
+    #eqBands = [60, 170, 310, 600, 1000, 3000, 6000, 12000, 14000, 16000];
     // Слайдеры эквалайзера по id: узлы свои, берём их из карты, а не поиском по документу
     #nodes = new Map();
     #media = undefined;
     #filters = undefined;
-    #fx_status = "chuijs.framework.settings.fx_status"
-    #fx_preset = "chuijs.framework.settings.fx_preset"
+    #fx_status = "chuijs.framework.settings.fx_status";
+    #fx_preset = "chuijs.framework.settings.fx_preset";
     #audioContext = new AudioContext();
     #destroyed = false;
     constructor(audio) {
         this.#media = this.#audioContext.createMediaElementSource(audio);
         this.#filters = this.#eqBands.map((band, i) => {
-            let filter = this.#audioContext.createBiquadFilter()
+            let filter = this.#audioContext.createBiquadFilter();
             if (i === 0) {
                 filter.type = "lowshelf";
             } else if (i === this.#eqBands.length - 1) {
@@ -413,55 +505,58 @@ class AudioFX {
             } else {
                 filter.type = "peaking";
             }
-            filter.gain.value = 0
-            filter.Q.value = 1
-            filter.frequency.value = band
-            return filter
-        })
+            filter.gain.value = 0;
+            filter.Q.value = 1;
+            filter.frequency.value = band;
+            return filter;
+        });
         this.#filters.reduce((prev, curr) => {
-            prev.connect(curr)
-            return curr
-        })
+            prev.connect(curr);
+            return curr;
+        });
         this.#media.connect(this.#filters[0]);
         this.#filters[this.#filters.length - 1].connect(this.#audioContext.destination);
         //
-        this.#chui_ap_equalizer_preamp_block.appendChild(this.#setSliderPreamp(this.#filters))
-        this.#filters.forEach((filter) => this.#chui_ap_equalizer_band_block.appendChild(this.#setSliderBand(filter)))
+        this.#chui_ap_equalizer_preamp_block.appendChild(this.#setSliderPreamp(this.#filters));
+        this.#filters.forEach((filter) => this.#chui_ap_equalizer_band_block.appendChild(this.#setSliderBand(filter)));
         // Пресеты: подпись варианта — перевод, значение — имя пресета, поэтому выбор
         // читается из события списка, а не сверкой подписи
-        this.#presets.addOptions(...AudioFX.PRESETS.map((preset) => ({
-            title: I18n.t(preset.titleKey), value: preset.name
-        })))
+        this.#presets.addOptions(
+            ...AudioFX.PRESETS.map((preset) => ({
+                title: I18n.t(preset.titleKey),
+                value: preset.name,
+            }))
+        );
         // Видимой подписи у поля нет: имя для скринридера ставим вводу (так же делал
         // прежний свой список, у которого подписи не было вовсе)
-        this.#presets.set().querySelector("input").setAttribute("aria-label", I18n.t("media.preset"))
-        this.#presets.addValueChangeListener((event) => this.#usePreset(event.detail.value))
+        this.#presets.set().querySelector("input").setAttribute("aria-label", I18n.t("media.preset"));
+        this.#presets.addValueChangeListener((event) => this.#usePreset(event.detail.value));
         // Переключатель — общекитовый `Toggle`; подпись он отдаёт в `aria-label`
         this.#switch.addChangeListener(() => {
-            if (this.#switch.getValue()) this.#fx_ON(this.#audioContext)
-            else this.#fx_OFF(this.#audioContext)
-        })
+            if (this.#switch.getValue()) this.#fx_ON(this.#audioContext);
+            else this.#fx_OFF(this.#audioContext);
+        });
         //
-        this.#chui_ap_equalizer_controls.appendChild(this.#presets.set())
-        this.#chui_ap_equalizer_controls.appendChild(this.#switch.set())
+        this.#chui_ap_equalizer_controls.appendChild(this.#presets.set());
+        this.#chui_ap_equalizer_controls.appendChild(this.#switch.set());
         //
-        this.#chui_ap_equalizer_block.appendChild(this.#chui_ap_equalizer_preamp_block)
-        this.#chui_ap_equalizer_block.appendChild(this.#chui_ap_equalizer_band_block)
+        this.#chui_ap_equalizer_block.appendChild(this.#chui_ap_equalizer_preamp_block);
+        this.#chui_ap_equalizer_block.appendChild(this.#chui_ap_equalizer_band_block);
         //
-        this.#chui_ap_equalizer_main.appendChild(this.#chui_ap_equalizer_controls)
-        this.#chui_ap_equalizer_main.appendChild(this.#chui_ap_equalizer_block)
+        this.#chui_ap_equalizer_main.appendChild(this.#chui_ap_equalizer_controls);
+        this.#chui_ap_equalizer_main.appendChild(this.#chui_ap_equalizer_block);
         // По умолчанию эквалайзер выключен — и вид полосы должен говорить то же: пока
         // `restoreFX()` не позвал хозяин, выключатель выключен, а дорожки уже серые
-        this.#setStatusBlock(false)
+        this.#setStatusBlock(false);
     }
     #usePreset(name = String()) {
-        this.#filters.forEach((filter) => this.#setPreset(filter, name, true))
-        this.#setPresetName(name)
+        this.#filters.forEach((filter) => this.#setPreset(filter, name, true));
+        this.#setPresetName(name);
     }
     /** Имя пресета в поле: значение ставится извне, поэтому без уведомления слушателей */
     #setPresetName(name = String()) {
-        const known = AudioFX.PRESETS.some((preset) => preset.name === name)
-        this.#presets.setValue(known ? name : AudioFX.PRESETS[0].name, true)
+        const known = AudioFX.PRESETS.some((preset) => preset.name === name);
+        this.#presets.setValue(known ? name : AudioFX.PRESETS[0].name, true);
     }
     #fx_ON(audioContext) {
         try {
@@ -472,146 +567,147 @@ class AudioFX {
             this.#media.connect(this.#filters[0]);
             this.#filters[this.#filters.length - 1].connect(audioContext.destination);
         }
-        store.delete(this.#fx_status)
-        store.set(this.#fx_status, true)
-        this.#setStatusBlock(true)
+        store.delete(this.#fx_status);
+        store.set(this.#fx_status, true);
+        this.#setStatusBlock(true);
     }
     #fx_OFF(audioContext) {
         this.#filters[this.#filters.length - 1].disconnect(audioContext.destination);
         this.#media.disconnect(this.#filters[0]);
         this.#media.connect(audioContext.destination);
-        store.delete(this.#fx_status)
-        store.set(this.#fx_status, false)
-        this.#setStatusBlock(false)
+        store.delete(this.#fx_status);
+        store.set(this.#fx_status, false);
+        this.#setStatusBlock(false);
     }
     #setPreset(filter, name) {
-        store.delete(this.#fx_preset)
-        store.set(this.#fx_preset, name)
-        let filter_test = this.#getPreset(name)
-        this.#renderPreampSlider(undefined, filter_test, filter)
-        let input = filter_test.inputs.filter(input => input.id === String(filter.frequency.value))[0]
-        this.#renderSlider(input, filter, filter_test.preamp)
+        store.delete(this.#fx_preset);
+        store.set(this.#fx_preset, name);
+        let filter_test = this.#getPreset(name);
+        this.#renderPreampSlider(undefined, filter_test, filter);
+        let input = filter_test.inputs.filter((input) => input.id === String(filter.frequency.value))[0];
+        this.#renderSlider(input, filter, filter_test.preamp);
     }
     #setStatusBlock(status) {
         //
         // Поле пресетов при выключенном эквалайзере не отвечает, а выключатель трогать
         // нельзя: он и есть способ включить эквалайзер обратно (родной флажок в выключенном
         // состоянии не шлёт `change` — включить было бы нечем)
-        this.#presets.setDisabled(!status)
+        this.#presets.setDisabled(!status);
         //
         for (let band of this.#eqBands) {
             let sliderBand = this.#node(String(band));
             sliderBand.disabled = !status;
             if (status) {
-                sliderBand.style.cursor = "pointer"
-                this.#chui_ap_equalizer_preamp_block.classList.remove("chui_ap_equalizer_disabled")
-                this.#chui_ap_equalizer_band_block.classList.remove("chui_ap_equalizer_disabled")
+                sliderBand.style.cursor = "pointer";
+                this.#chui_ap_equalizer_preamp_block.classList.remove("chui_ap_equalizer_disabled");
+                this.#chui_ap_equalizer_band_block.classList.remove("chui_ap_equalizer_disabled");
             } else {
-                sliderBand.style.cursor = "not-allowed"
-                this.#chui_ap_equalizer_preamp_block.classList.add("chui_ap_equalizer_disabled")
-                this.#chui_ap_equalizer_band_block.classList.add("chui_ap_equalizer_disabled")
+                sliderBand.style.cursor = "not-allowed";
+                this.#chui_ap_equalizer_preamp_block.classList.add("chui_ap_equalizer_disabled");
+                this.#chui_ap_equalizer_band_block.classList.add("chui_ap_equalizer_disabled");
             }
         }
         //
         let sliderPreamp = this.#node("preamp");
         sliderPreamp.disabled = !status;
         if (status) {
-            sliderPreamp.style.cursor = "pointer"
-            this.#chui_ap_equalizer_preamp_block.classList.remove("chui_ap_equalizer_disabled")
-            this.#chui_ap_equalizer_band_block.classList.remove("chui_ap_equalizer_disabled")
+            sliderPreamp.style.cursor = "pointer";
+            this.#chui_ap_equalizer_preamp_block.classList.remove("chui_ap_equalizer_disabled");
+            this.#chui_ap_equalizer_band_block.classList.remove("chui_ap_equalizer_disabled");
         } else {
-            sliderPreamp.style.cursor = "not-allowed"
-            this.#chui_ap_equalizer_preamp_block.classList.add("chui_ap_equalizer_disabled")
-            this.#chui_ap_equalizer_band_block.classList.add("chui_ap_equalizer_disabled")
+            sliderPreamp.style.cursor = "not-allowed";
+            this.#chui_ap_equalizer_preamp_block.classList.add("chui_ap_equalizer_disabled");
+            this.#chui_ap_equalizer_band_block.classList.add("chui_ap_equalizer_disabled");
         }
     }
     #getPreset(name) {
-        return AudioFX.PRESETS.filter(preset => preset.name === name)[0];
+        return AudioFX.PRESETS.filter((preset) => preset.name === name)[0];
     }
     /** Узел эквалайзера по id — из карты слайдеров этого эквалайзера */
     #node(id = String()) {
         return this.#nodes.get(id);
     }
     #setSliderPreamp(filters) {
-        let sliderMain = document.createElement("chui_eq_slider_main")
-        let val = document.createElement("slider_label")
-        let slider = document.createElement('input')
-        let label = document.createElement("slider_label")
-        sliderMain.id = "preamp_main"
-        slider.id = "preamp"
-        slider.type = 'range'
-        slider.className = 'eq_slider_test'
-        slider.step = "1"
-        slider.min = "-10"
-        slider.max = "10"
-        slider.value = "0"
-        slider.setAttribute("aria-label", I18n.t("media.preamp"))
-        slider.setAttribute("aria-valuetext", I18n.t("media.decibels", {value: 0}))
+        let sliderMain = document.createElement("chui_eq_slider_main");
+        let val = document.createElement("slider_label");
+        let slider = document.createElement("input");
+        let label = document.createElement("slider_label");
+        sliderMain.id = "preamp_main";
+        slider.id = "preamp";
+        slider.type = "range";
+        slider.className = "eq_slider_test";
+        slider.step = "1";
+        slider.min = "-10";
+        slider.max = "10";
+        slider.value = "0";
+        slider.setAttribute("aria-label", I18n.t("media.preamp"));
+        slider.setAttribute("aria-valuetext", I18n.t("media.decibels", { value: 0 }));
         // Доля заливки рельса: заливка рисуется градиентом по тому же числу, что у полос
         // прогресса и громкости
-        slider.style.setProperty('--fx-before-width', `50%`);
-        slider.oninput = (e) => this.#renderPreampSlider(e.target, this.#getPreset(store.get(this.#fx_preset)), filters)
-        val.id = "val_preamp"
+        slider.style.setProperty("--fx-before-width", `50%`);
+        slider.oninput = (e) =>
+            this.#renderPreampSlider(e.target, this.#getPreset(store.get(this.#fx_preset)), filters);
+        val.id = "val_preamp";
         this.#nodes.set("preamp", slider);
         this.#nodes.set("val_preamp", val);
-        val.innerText = String(slider.value)
-        label.innerText = "AMP"
-        sliderMain.appendChild(val)
-        sliderMain.appendChild(slider)
-        sliderMain.appendChild(label)
-        return sliderMain
+        val.innerText = String(slider.value);
+        label.innerText = "AMP";
+        sliderMain.appendChild(val);
+        sliderMain.appendChild(slider);
+        sliderMain.appendChild(label);
+        return sliderMain;
     }
     #setSliderBand(filter) {
         let freq_value = String(filter.frequency.value);
-        let sliderMain = document.createElement("chui_eq_slider_main")
-        let val = document.createElement("slider_label")
-        let slider = document.createElement('input')
-        let label = document.createElement("slider_label")
-        slider.id = freq_value
-        slider.type = 'range'
-        slider.className = 'eq_slider_test'
-        slider.step = "0.1"
-        slider.min = "-10"
-        slider.max = "10"
-        slider.value = String(filter.gain.value)
-        slider.setAttribute("aria-label", I18n.t("media.hertzGain", {freq: freq_value}))
-        slider.setAttribute("aria-valuetext", I18n.t("media.decibels", {value: slider.value}))
-        slider.style.setProperty('--fx-before-width', `50%`);
-        slider.oninput = (e) => this.#renderSlider(e.target, filter, Number(this.#node("preamp").value))
-        val.id = "val_" + freq_value
+        let sliderMain = document.createElement("chui_eq_slider_main");
+        let val = document.createElement("slider_label");
+        let slider = document.createElement("input");
+        let label = document.createElement("slider_label");
+        slider.id = freq_value;
+        slider.type = "range";
+        slider.className = "eq_slider_test";
+        slider.step = "0.1";
+        slider.min = "-10";
+        slider.max = "10";
+        slider.value = String(filter.gain.value);
+        slider.setAttribute("aria-label", I18n.t("media.hertzGain", { freq: freq_value }));
+        slider.setAttribute("aria-valuetext", I18n.t("media.decibels", { value: slider.value }));
+        slider.style.setProperty("--fx-before-width", `50%`);
+        slider.oninput = (e) => this.#renderSlider(e.target, filter, Number(this.#node("preamp").value));
+        val.id = "val_" + freq_value;
         this.#nodes.set(freq_value, slider);
         this.#nodes.set("val_" + freq_value, val);
-        val.innerText = String(slider.value)
-        label.innerText = freq_value.replace("000", "K")
-        sliderMain.appendChild(val)
-        sliderMain.appendChild(slider)
-        sliderMain.appendChild(label)
-        return sliderMain
+        val.innerText = String(slider.value);
+        label.innerText = freq_value.replace("000", "K");
+        sliderMain.appendChild(val);
+        sliderMain.appendChild(slider);
+        sliderMain.appendChild(label);
+        return sliderMain;
     }
     restore() {
         setTimeout(() => {
             if (this.#destroyed) return;
-            let status = store.get(this.#fx_status)
-            let preset = store.get(this.#fx_preset)
+            let status = store.get(this.#fx_status);
+            let preset = store.get(this.#fx_preset);
             if (status) {
-                this.#fx_ON(this.#audioContext)
-                this.#switch.setValue(true)
-                this.#setPresetName(store.get(this.#fx_preset))
-                this.#setStatusBlock(status)
+                this.#fx_ON(this.#audioContext);
+                this.#switch.setValue(true);
+                this.#setPresetName(store.get(this.#fx_preset));
+                this.#setStatusBlock(status);
             } else {
-                this.#fx_OFF(this.#audioContext)
-                this.#switch.setValue(false)
+                this.#fx_OFF(this.#audioContext);
+                this.#switch.setValue(false);
                 if (status === undefined || preset === undefined) {
-                    this.#setPresetName("Default")
+                    this.#setPresetName("Default");
                 } else {
-                    this.#setPresetName(store.get(this.#fx_preset))
+                    this.#setPresetName(store.get(this.#fx_preset));
                 }
-                this.#setStatusBlock(status)
+                this.#setStatusBlock(status);
             }
-        }, 250)
+        }, 250);
     }
     set() {
-        return this.#chui_ap_equalizer_main
+        return this.#chui_ap_equalizer_main;
     }
     /** Включить или выключить эквалайзер: тот же путь, что у выключателя в панели */
     setEnabled(boolean = Boolean()) {
@@ -623,7 +719,9 @@ class AudioFX {
         return this;
     }
     /** Состояние выключателя в панели */
-    isEnabled() { return this.#switch.getValue(); }
+    isEnabled() {
+        return this.#switch.getValue();
+    }
     /**
      * Отпустить звуковой граф: контекст держит аудиопоток, а Chromium разрешает ограниченное
      * число контекстов на страницу. Повторный вызов безопасен.
@@ -640,30 +738,30 @@ class AudioFX {
         let p_slider = this.#node("preamp");
         let p_val = this.#node("val_preamp");
         if (input === undefined) {
-            p_slider.value = preset.preamp
+            p_slider.value = preset.preamp;
         } else {
-            p_slider.value = input.value
-            preset.inputs.forEach(inp => {
-                let slid = this.#node(inp.id)
-                filters.forEach(filter => {
+            p_slider.value = input.value;
+            preset.inputs.forEach((inp) => {
+                let slid = this.#node(inp.id);
+                filters.forEach((filter) => {
                     if (String(inp.id) === String(filter.frequency.value)) {
-                        filter.gain.value = Number(slid.value) + Number(input.value)
+                        filter.gain.value = Number(slid.value) + Number(input.value);
                     }
-                })
-            })
+                });
+            });
         }
-        p_val.innerText = String(p_slider.value)
-        p_slider.setAttribute("aria-valuetext", I18n.t("media.decibels", {value: p_slider.value}))
-        p_slider.style.setProperty('--fx-before-width', `${(50 + (p_slider.value * 5)).toFixed(1)}%`);
+        p_val.innerText = String(p_slider.value);
+        p_slider.setAttribute("aria-valuetext", I18n.t("media.decibels", { value: p_slider.value }));
+        p_slider.style.setProperty("--fx-before-width", `${(50 + p_slider.value * 5).toFixed(1)}%`);
     }
     #renderSlider(input, filter, preamp) {
         let slider = this.#node(input.id);
         let val = this.#node("val_" + input.id);
-        slider.value = input.value
-        filter.gain.value = Number(Number(slider.value) + preamp)
-        val.innerText = String(slider.value)
-        slider.setAttribute("aria-valuetext", I18n.t("media.decibels", {value: slider.value}))
-        slider.style.setProperty('--fx-before-width', `${(50 + (slider.value * 5)).toFixed(1)}%`);
+        slider.value = input.value;
+        filter.gain.value = Number(Number(slider.value) + preamp);
+        val.innerText = String(slider.value);
+        slider.setAttribute("aria-valuetext", I18n.t("media.decibels", { value: slider.value }));
+        slider.style.setProperty("--fx-before-width", `${(50 + slider.value * 5).toFixed(1)}%`);
     }
     // ya.music.Audio.fx
     static PRESETS = [
@@ -682,7 +780,7 @@ class AudioFX {
                 { id: "12000", value: 0 },
                 { id: "14000", value: 0 },
                 { id: "16000", value: 0 },
-            ]
+            ],
         },
         {
             name: "Classical",
@@ -699,7 +797,7 @@ class AudioFX {
                 { id: "12000", value: -3.5 },
                 { id: "14000", value: -3.5 },
                 { id: "16000", value: -4.5 },
-            ]
+            ],
         },
         {
             name: "Club",
@@ -716,7 +814,7 @@ class AudioFX {
                 { id: "12000", value: -0.5 },
                 { id: "14000", value: -0.5 },
                 { id: "16000", value: -0.5 },
-            ]
+            ],
         },
         {
             name: "Dance",
@@ -733,7 +831,7 @@ class AudioFX {
                 { id: "12000", value: -3.5 },
                 { id: "14000", value: -0.5 },
                 { id: "16000", value: -0.5 },
-            ]
+            ],
         },
         {
             name: "Full Bass",
@@ -750,7 +848,7 @@ class AudioFX {
                 { id: "12000", value: -5 },
                 { id: "14000", value: -5.5 },
                 { id: "16000", value: -5.5 },
-            ]
+            ],
         },
         {
             name: "Full Treble",
@@ -767,7 +865,7 @@ class AudioFX {
                 { id: "12000", value: 8 },
                 { id: "14000", value: 8 },
                 { id: "16000", value: 8 },
-            ]
+            ],
         },
         {
             name: "Full Bass & Treble",
@@ -784,7 +882,7 @@ class AudioFX {
                 { id: "12000", value: 5.5 },
                 { id: "14000", value: 6 },
                 { id: "16000", value: 6 },
-            ]
+            ],
         },
         {
             name: "Laptop Speakers / Headphone",
@@ -801,7 +899,7 @@ class AudioFX {
                 { id: "12000", value: 4.5 },
                 { id: "14000", value: 6 },
                 { id: "16000", value: 7 },
-            ]
+            ],
         },
         {
             name: "Large Hall",
@@ -818,7 +916,7 @@ class AudioFX {
                 { id: "12000", value: -2 },
                 { id: "14000", value: -0.5 },
                 { id: "16000", value: -0.5 },
-            ]
+            ],
         },
         {
             name: "Live",
@@ -835,7 +933,7 @@ class AudioFX {
                 { id: "12000", value: 1 },
                 { id: "14000", value: 1 },
                 { id: "16000", value: 1 },
-            ]
+            ],
         },
         {
             name: "Party",
@@ -852,7 +950,7 @@ class AudioFX {
                 { id: "12000", value: -0.5 },
                 { id: "14000", value: 3.5 },
                 { id: "16000", value: 3.5 },
-            ]
+            ],
         },
         {
             name: "Pop",
@@ -869,7 +967,7 @@ class AudioFX {
                 { id: "12000", value: -1 },
                 { id: "14000", value: -0.5 },
                 { id: "16000", value: -0.5 },
-            ]
+            ],
         },
         {
             name: "Reggae",
@@ -886,7 +984,7 @@ class AudioFX {
                 { id: "12000", value: -0.5 },
                 { id: "14000", value: -0.5 },
                 { id: "16000", value: -0.5 },
-            ]
+            ],
         },
         {
             name: "Ska",
@@ -903,7 +1001,7 @@ class AudioFX {
                 { id: "12000", value: 4.5 },
                 { id: "14000", value: 5.5 },
                 { id: "16000", value: 4.5 },
-            ]
+            ],
         },
         {
             name: "Soft",
@@ -920,7 +1018,7 @@ class AudioFX {
                 { id: "12000", value: 4.5 },
                 { id: "14000", value: 5.5 },
                 { id: "16000", value: 6 },
-            ]
+            ],
         },
         {
             name: "Rock",
@@ -937,7 +1035,7 @@ class AudioFX {
                 { id: "12000", value: 5.5 },
                 { id: "14000", value: 5.5 },
                 { id: "16000", value: 5.5 },
-            ]
+            ],
         },
         {
             name: "Soft Rock",
@@ -954,7 +1052,7 @@ class AudioFX {
                 { id: "12000", value: -0.5 },
                 { id: "14000", value: 1 },
                 { id: "16000", value: 4 },
-            ]
+            ],
         },
         {
             name: "Techno",
@@ -971,8 +1069,9 @@ class AudioFX {
                 { id: "12000", value: 4.5 },
                 { id: "14000", value: 4.5 },
                 { id: "16000", value: 4 },
-            ]
-        }]
+            ],
+        },
+    ];
 }
 
-exports.Audio = Audio
+exports.Audio = Audio;