chuijs 4.0.2 → 4.0.4

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();
 
 /**
@@ -18,131 +18,146 @@ const store = new Store();
  * (`setPin("top" | "bottom" | "left" | "right")`) — тогда она висит поверх содержимого.
  */
 class Audio {
-    #chui_ap_main = document.createElement("chui_ap_main");
-    #chui_ap_block = document.createElement("chui_ap_block");
-    #chui_ap_row = document.createElement("chui_ap_row");
-    #chui_at = document.createElement("audio");
+    #chuiApMain = document.createElement("chui_ap_main");
+    #chuiApBlock = document.createElement("chui_ap_block");
+    #chuiApRow = document.createElement("chui_ap_row");
+    #chuiAt = document.createElement("audio");
     // Управление
-    #chui_ap_play_pause = document.createElement("chui_ap_play_pause");
-    #chui_ap_info = document.createElement("chui_ap_info");
-    #chui_ap_time1 = undefined;
-    #chui_ap_time2 = undefined;
-    #chui_ap_seek_block = document.createElement("chui_ap_seek_block");
-    #chui_ap_seek = document.createElement("input");
-    #chui_ap_seek_buf = document.createElement("chui_ap_seek_buf");
-    #chui_ap_volume_block = document.createElement("chui_ap_volume_block");
-    #chui_ap_volume_icon = document.createElement("chui_ap_volume_icon");
-    #chui_ap_volume = document.createElement("input");
+    #chuiApPlayPause = document.createElement("chui_ap_play_pause");
+    #chuiApInfo = document.createElement("chui_ap_info");
+    #chuiApTime1 = undefined;
+    #chuiApTime2 = undefined;
+    #chuiApSeekBlock = document.createElement("chui_ap_seek_block");
+    #chuiApSeek = document.createElement("input");
+    #chuiApSeekBuf = document.createElement("chui_ap_seek_buf");
+    #chuiApVolumeBlock = document.createElement("chui_ap_volume_block");
+    #chuiApVolumeIcon = document.createElement("chui_ap_volume_icon");
+    #chuiApVolume = document.createElement("input");
     // Эквалайзер
-    #chui_ap_fx_icon = document.createElement("chui_ap_fx_icon");
-    #chui_ap_fx_dropdown = document.createElement("chui_ap_fx_dropdown");
-    #chui_audio_fx = new AudioFX(this.#chui_at);
+    #chuiApFxIcon = document.createElement("chui_ap_fx_icon");
+    #chuiApFxDropdown = document.createElement("chui_ap_fx_dropdown");
+    #chuiAudioFx = new AudioFX(this.#chuiAt);
     // Состояние
     #status = document.createElement("div");
     #pin = false;
     #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');
-        this.#chui_at.preload = "metadata";
-        this.#chui_at.controls = 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");
+        this.#chuiAt.preload = "metadata";
+        this.#chuiAt.controls = false;
         // Плеер — именованная группа: без имени скринридер читает подряд безымянные кнопки
-        this.#chui_ap_main.setAttribute("role", "group");
-        this.#chui_ap_main.setAttribute("aria-label", optionOr(options.label, I18n.t("media.audioPlayer")));
+        this.#chuiApMain.setAttribute("role", "group");
+        this.#chuiApMain.setAttribute("aria-label", optionOr(options.label, I18n.t("media.audioPlayer")));
         // НАСТРОЙКИ
-        if (options.src !== undefined) this.#chui_at.setAttribute("src", options.src);
-        if (options.autoplay !== undefined) this.#chui_at.autoplay = options.autoplay === true;
-        if (options.loop !== undefined) this.#chui_at.loop = options.loop === true;
-        if (options.muted !== undefined) this.#chui_at.muted = options.muted === true;
-        this.#chui_at.volume = options.volume === undefined ? 1 : Math.min(1, Math.max(0, Number(options.volume)));
-        if (options.width !== undefined) this.#chui_ap_main.style.width = options.width;
-        if (options.height !== undefined) this.#chui_ap_main.style.height = options.height;
+        if (options.src !== undefined) this.#chuiAt.setAttribute("src", options.src);
+        if (options.autoplay !== undefined) this.#chuiAt.autoplay = options.autoplay === true;
+        if (options.loop !== undefined) this.#chuiAt.loop = options.loop === true;
+        if (options.muted !== undefined) this.#chuiAt.muted = options.muted === true;
+        this.#chuiAt.volume = options.volume === undefined ? 1 : Math.min(1, Math.max(0, Number(options.volume)));
+        if (options.width !== undefined) this.#chuiApMain.style.width = options.width;
+        if (options.height !== undefined) this.#chuiApMain.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_seek.type = "range";
-        this.#chui_ap_seek.id = "chui_ap_seek";
-        this.#chui_ap_seek.max = "0";
-        this.#chui_ap_seek.value = "0";
-        this.#chui_ap_seek.step = "any";
-        this.#chui_ap_seek.setAttribute("aria-label", I18n.t("media.position"));
+        this.#chuiApTime1 = new Label({ text: `0:00` });
+        this.#chuiApTime2 = new Label({ text: `0:00` });
+        this.#chuiApSeek.type = "range";
+        this.#chuiApSeek.id = "chui_ap_seek";
+        this.#chuiApSeek.max = "0";
+        this.#chuiApSeek.value = "0";
+        this.#chuiApSeek.step = "any";
+        this.#chuiApSeek.setAttribute("aria-label", I18n.t("media.position"));
         // До метаданных длительность неизвестна: ползунок включается в #setSliderMax()
         this.#setSliderMax();
-        this.#chui_ap_seek_block.appendChild(this.#chui_ap_seek);
-        this.#chui_ap_seek_block.appendChild(this.#chui_ap_seek_buf);
-        this.#chui_ap_info.appendChild(this.#chui_ap_time1.set());
-        this.#chui_ap_info.appendChild(this.#chui_ap_seek_block);
-        this.#chui_ap_info.appendChild(this.#chui_ap_time2.set());
-        // КНОПКИ
-        this.#setButton(this.#chui_ap_play_pause, I18n.t("media.play"), Icons.AUDIO_VIDEO.PLAY_ARROW, "18px");
-        this.#setButton(this.#chui_ap_volume_icon, I18n.t("media.mute"), Icons.AUDIO_VIDEO.VOLUME_UP, "18px");
-        this.#setButton(this.#chui_ap_fx_icon, I18n.t("media.equalizer"), Icons.AUDIO_VIDEO.EQUALIZER, "18px");
+        this.#chuiApSeekBlock.appendChild(this.#chuiApSeek);
+        this.#chuiApSeekBlock.appendChild(this.#chuiApSeekBuf);
+        this.#chuiApInfo.appendChild(this.#chuiApTime1.set());
+        this.#chuiApInfo.appendChild(this.#chuiApSeekBlock);
+        this.#chuiApInfo.appendChild(this.#chuiApTime2.set());
+        // КНОПКИ: кегль глифа задаёт стиль кнопки (--player_icon_size), значок его наследует
+        this.#setButton(this.#chuiApPlayPause, I18n.t("media.play"), Icons.AUDIO_VIDEO.PLAY_ARROW);
+        this.#setButton(this.#chuiApVolumeIcon, I18n.t("media.mute"), Icons.AUDIO_VIDEO.VOLUME_UP);
+        this.#setButton(this.#chuiApFxIcon, I18n.t("media.equalizer"), Icons.AUDIO_VIDEO.EQUALIZER);
         // ГРОМКОСТЬ
-        this.#chui_ap_volume.type = "range";
-        this.#chui_ap_volume.id = "chui_ap_volume";
-        this.#chui_ap_volume.max = "100";
-        this.#chui_ap_volume.value = String(Math.round(this.#chui_at.volume * 100));
-        this.#chui_ap_volume.step = "1";
-        this.#chui_ap_volume.setAttribute("aria-label", I18n.t("media.volume"));
-        this.#chui_ap_volume_block.appendChild(this.#chui_ap_volume_icon);
-        this.#chui_ap_volume_block.appendChild(this.#chui_ap_volume);
-        this.#chui_ap_volume_block.appendChild(this.#chui_ap_fx_icon);
+        this.#chuiApVolume.type = "range";
+        this.#chuiApVolume.id = "chui_ap_volume";
+        this.#chuiApVolume.max = "100";
+        this.#chuiApVolume.value = String(Math.round(this.#chuiAt.volume * 100));
+        this.#chuiApVolume.step = "1";
+        this.#chuiApVolume.setAttribute("aria-label", I18n.t("media.volume"));
+        this.#chuiApVolumeBlock.appendChild(this.#chuiApVolumeIcon);
+        this.#chuiApVolumeBlock.appendChild(this.#chuiApVolume);
+        this.#chuiApVolumeBlock.appendChild(this.#chuiApFxIcon);
         // СБОРКА: одна строка — воспроизведение, прогресс со временем, звук и эквалайзер
-        this.#chui_ap_row.appendChild(this.#chui_ap_play_pause);
-        this.#chui_ap_row.appendChild(this.#chui_ap_info);
-        this.#chui_ap_row.appendChild(this.#chui_ap_volume_block);
-        this.#chui_ap_block.appendChild(this.#chui_ap_row);
+        this.#chuiApRow.appendChild(this.#chuiApPlayPause);
+        this.#chuiApRow.appendChild(this.#chuiApInfo);
+        this.#chuiApRow.appendChild(this.#chuiApVolumeBlock);
+        this.#chuiApBlock.appendChild(this.#chuiApRow);
         // Эквалайзер — секция внутри карточки, под полосой управления: наложением он быть
         // не может, у карточки `overflow: hidden` (её скругление)
-        this.#chui_ap_block.appendChild(this.#chui_ap_fx_dropdown);
-        this.#chui_ap_fx_dropdown.appendChild(this.#chui_audio_fx.set());
-        this.#chui_ap_main.appendChild(this.#chui_at);
-        this.#chui_ap_main.appendChild(this.#chui_ap_block);
+        this.#chuiApBlock.appendChild(this.#chuiApFxDropdown);
+        this.#chuiApFxDropdown.appendChild(this.#chuiAudioFx.set());
+        this.#chuiApMain.appendChild(this.#chuiAt);
+        this.#chuiApMain.appendChild(this.#chuiApBlock);
         // О смене состояния и ошибках сообщает скрытый live-регион
         this.#status.classList.add("chui_visually_hidden");
         this.#status.setAttribute("role", "status");
         this.#status.setAttribute("aria-live", "polite");
-        this.#chui_ap_main.appendChild(this.#status);
+        this.#chuiApMain.appendChild(this.#status);
         // СОБЫТИЯ
         // Состояние кнопки идёт от самого элемента: play() может отклониться политикой
         // автозапуска, и «пауза» на кнопке была бы неправдой
-        this.#chui_at.addEventListener("play", this.#onPlay);
-        this.#chui_at.addEventListener("pause", this.#onPause);
-        this.#chui_at.addEventListener("timeupdate", this.#onTimeUpdate);
-        this.#chui_at.addEventListener("loadedmetadata", this.#onDurationChange);
-        this.#chui_at.addEventListener("durationchange", this.#onDurationChange);
-        this.#chui_at.addEventListener("progress", () => this.#displayBufferedAmount());
-        this.#chui_at.addEventListener("volumechange", () => this.#renderVolume());
-        this.#chui_at.addEventListener("error", () => this.#onMediaError());
-        this.#chui_ap_play_pause.addEventListener("click", () => this.#playPause());
-        this.#chui_ap_volume_icon.addEventListener("click", () => this.setMuted(!this.getMuted()));
-        this.#chui_ap_seek.addEventListener("input", () => {
-            this.#chui_at.currentTime = Number(Number(this.#chui_ap_seek.value).toFixed(6));
+        this.#chuiAt.addEventListener("play", this.#onPlay);
+        this.#chuiAt.addEventListener("pause", this.#onPause);
+        this.#chuiAt.addEventListener("timeupdate", this.#onTimeUpdate);
+        this.#chuiAt.addEventListener("loadedmetadata", this.#onDurationChange);
+        this.#chuiAt.addEventListener("durationchange", this.#onDurationChange);
+        this.#chuiAt.addEventListener("progress", () => this.#displayBufferedAmount());
+        this.#chuiAt.addEventListener("volumechange", () => this.#renderVolume());
+        this.#chuiAt.addEventListener("error", () => this.#onMediaError());
+        this.#chuiApPlayPause.addEventListener("click", () => this.#playPause());
+        this.#chuiApVolumeIcon.addEventListener("click", () => this.setMuted(!this.getMuted()));
+        this.#chuiApSeek.addEventListener("input", () => {
+            this.#chuiAt.currentTime = Number(Number(this.#chuiApSeek.value).toFixed(6));
             this.#renderProgress();
         });
-        this.#chui_ap_volume.addEventListener("input", () => {
-            this.#chui_at.volume = Number(this.#chui_ap_volume.value) / 100;
-            this.#chui_at.muted = false;
+        this.#chuiApVolume.addEventListener("input", () => {
+            this.#chuiAt.volume = Number(this.#chuiApVolume.value) / 100;
+            this.#chuiAt.muted = false;
         });
         // ЭКВАЛАЙЗЕР: панель открывает кнопка, закрывают повторное нажатие, клик мимо и Escape
-        this.#chui_ap_fx_icon.setAttribute("aria-haspopup", "true");
-        this.#chui_ap_fx_icon.setAttribute("aria-expanded", "false");
-        this.#chui_ap_fx_icon.addEventListener("click", (event) => {
+        this.#chuiApFxIcon.setAttribute("aria-haspopup", "true");
+        this.#chuiApFxIcon.setAttribute("aria-expanded", "false");
+        this.#chuiApFxIcon.addEventListener("click", (event) => {
             // Клик по кнопке не должен тут же закрывать панель общим обработчиком окна
             event.stopPropagation();
             this.#toggleFx();
         });
-        this.#chui_ap_fx_dropdown.addEventListener("keydown", (event) => {
+        this.#chuiApFxDropdown.addEventListener("keydown", (event) => {
             if (event.key !== "Escape") return;
             event.preventDefault();
             this.#toggleFx(false);
-            this.#chui_ap_fx_icon.focus();
+            this.#chuiApFxIcon.focus();
         });
         this.#setMediaActions();
         this.#renderPlayState(false);
@@ -150,19 +165,19 @@ class Audio {
         this.setPin(options.pin === undefined ? false : options.pin);
     }
     #toggleFx(open = undefined) {
-        const следующий = open === undefined ? !this.#chui_ap_fx_dropdown.classList.contains("fx_open") : open;
-        if (следующий === this.#chui_ap_fx_dropdown.classList.contains("fx_open")) return;
-        this.#chui_ap_fx_dropdown.classList.toggle("fx_open", следующий);
-        this.#chui_ap_fx_icon.classList.toggle("fx_icon_open", следующий);
-        this.#chui_ap_fx_icon.setAttribute("aria-expanded", String(следующий));
+        const следующий = open === undefined ? !this.#chuiApFxDropdown.classList.contains("fx_open") : open;
+        if (следующий === this.#chuiApFxDropdown.classList.contains("fx_open")) return;
+        this.#chuiApFxDropdown.classList.toggle("fx_open", следующий);
+        this.#chuiApFxIcon.classList.toggle("fx_icon_open", следующий);
+        this.#chuiApFxIcon.setAttribute("aria-expanded", String(следующий));
         if (следующий) document.addEventListener("mousedown", this.#onFxOutside);
         else document.removeEventListener("mousedown", this.#onFxOutside);
     }
     #onFxOutside = (event) => {
-        if (this.#chui_ap_fx_dropdown.contains(event.target)) return;
-        if (this.#chui_ap_fx_icon.contains(event.target)) return;
+        if (this.#chuiApFxDropdown.contains(event.target)) return;
+        if (this.#chuiApFxIcon.contains(event.target)) return;
         this.#toggleFx(false);
-    }
+    };
     #playPause = async () => {
         if (this.getPaused()) {
             try {
@@ -171,78 +186,82 @@ 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.#setLabel(this.#chui_ap_play_pause, playing ? I18n.t("media.pause") : I18n.t("media.play"));
+        this.#setIcon(this.#chuiApPlayPause, playing ? Icons.AUDIO_VIDEO.PAUSE : Icons.AUDIO_VIDEO.PLAY_ARROW);
+        this.#setLabel(this.#chuiApPlayPause, 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.#setLabel(this.#chui_ap_volume_icon, I18n.t(this.getMuted() ? "media.unmute" : "media.mute"));
-    }
+        const доля = Math.min(100, Math.max(0, Math.round(this.#chuiAt.volume * 100)));
+        this.#chuiApVolume.value = String(доля);
+        this.#chuiApVolume.disabled = this.getMuted();
+        this.#chuiApMain.style.setProperty("--volume_before_width", `${доля}%`);
+        this.#setIcon(
+            this.#chuiApVolumeIcon,
+            this.getMuted() || доля === 0 ? Icons.AUDIO_VIDEO.VOLUME_OFF : Icons.AUDIO_VIDEO.VOLUME_UP
+        );
+        this.#setLabel(this.#chuiApVolumeIcon, I18n.t(this.getMuted() ? "media.unmute" : "media.mute"));
+    };
     #displayBufferedAmount = () => {
-        const max = Number(this.#chui_ap_seek.max);
+        const max = Number(this.#chuiApSeek.max);
         if (!(max > 0)) return;
         try {
-            const конец = Math.floor(this.#chui_at.buffered.end(0) / max * 100);
-            this.#chui_ap_seek_buf.style.width = `${Math.min(100, Math.max(0, конец))}%`;
+            const конец = Math.floor((this.#chuiAt.buffered.end(0) / max) * 100);
+            this.#chuiApSeekBuf.style.width = `${Math.min(100, Math.max(0, конец))}%`;
         } catch (_error) {
             // Буфер ещё пуст (метаданные не пришли) — рисовать нечего
         }
-    }
+    };
     // Длительность приходит с метаданными: без неё полоса прокрутки делила бы на ноль,
     // а у живого потока её нет вовсе (duration = Infinity)
     #setSliderMax = () => {
         const duration = this.getDuration();
         const известна = Number.isFinite(duration) && duration > 0;
-        this.#chui_ap_seek.max = известна ? String(Math.floor(duration)) : "0";
+        this.#chuiApSeek.max = известна ? String(Math.floor(duration)) : "0";
         // Без известной длительности ползунок бессмысленен: перетаскивание отправляло бы плеер в начало
-        this.#chui_ap_seek.disabled = !известна;
-    }
+        this.#chuiApSeek.disabled = !известна;
+    };
     #renderProgress = () => {
-        const max = Number(this.#chui_ap_seek.max);
+        const max = Number(this.#chuiApSeek.max);
         const position = this.getCurrentTime();
         const duration = this.getDuration();
         if (!(max > 0)) {
             // «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.#chuiApTime1.setText(this.#calculateTime(position));
+            this.#chuiApTime2.setText("");
+            this.#chuiApMain.style.setProperty("--seek_before_width", "0%");
             return;
         }
-        this.#chui_ap_time1.setText(this.#calculateTime(position));
-        this.#chui_ap_time2.setText(this.#calculateTime(duration));
-        this.#chui_ap_seek.value = String(position);
+        this.#chuiApTime1.setText(this.#calculateTime(position));
+        this.#chuiApTime2.setText(this.#calculateTime(duration));
+        this.#chuiApSeek.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.#chuiApMain.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 код = this.#chuiAt.error === null ? undefined : this.#chuiAt.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();
+    #setButton(node, label, icon) {
+        node.innerHTML = new Icon(icon).getHTML();
         node.setAttribute("aria-label", label);
         makeKeyboardButton(node);
     }
-    #setIcon(node, icon, size) {
-        const глиф = new Icon(icon, size).getHTML();
+    #setIcon(node, icon) {
+        const глиф = new Icon(icon).getHTML();
         if (node.innerHTML !== глиф) node.innerHTML = глиф;
     }
     #setLabel(node, label) {
@@ -281,96 +300,164 @@ class Audio {
             return this;
         }
         this.#pin = значение;
-        if (значение === false) this.#chui_ap_main.removeAttribute("data_pin");
-        else this.#chui_ap_main.setAttribute("data_pin", значение);
+        if (значение === false) this.#chuiApMain.removeAttribute("data_pin");
+        else this.#chuiApMain.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.#chuiAudioFx.setEnabled(boolean), this);
+    }
+    isEqualizerEnabled() {
+        return this.#chuiAudioFx.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.#chuiApFxDropdown.classList.contains("fx_open");
+    }
     /** Прочитать сохранённое состояние эквалайзера из настроек */
-    restoreFX() { this.#chui_audio_fx.restore(); return this; }
+    restoreFX() {
+        this.#chuiAudioFx.restore();
+        return this;
+    }
     // === СТАНДАРТНЫЕ ВОЗМОЖНОСТИ `<audio>` ===
     /** Сам элемент: для всего, чего нет в списке ниже */
-    getAudio() { return this.#chui_at; }
+    getAudio() {
+        return this.#chuiAt;
+    }
     /** Воспроизведение: промис, как у `<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.#chuiAt.play();
+    }
+    pause() {
+        this.#chuiAt.pause();
+        return this;
+    }
+    load() {
+        this.#chuiAt.load();
+        return this;
+    }
+    canPlayType(type = String()) {
+        return this.#chuiAt.canPlayType(type);
+    }
+    getSrc() {
+        return this.#chuiAt.getAttribute("src") ?? "";
+    }
     setSrc(url = String()) {
-        this.#chui_at.setAttribute("src", url);
-        this.#chui_at.load();
+        this.#chuiAt.setAttribute("src", url);
+        this.#chuiAt.load();
         return this;
     }
-    getSrcObject() { return this.#chui_at.srcObject; }
+    getSrcObject() {
+        return this.#chuiAt.srcObject;
+    }
     /** Живой поток — штатное `srcObject`, а не путь */
     setSrcObject(object) {
-        this.#chui_at.srcObject = object;
+        this.#chuiAt.srcObject = object;
         return this;
     }
-    getCurrentTime() { return this.#chui_at.currentTime; }
+    getCurrentTime() {
+        return this.#chuiAt.currentTime;
+    }
     setCurrentTime(seconds = Number()) {
-        this.#chui_at.currentTime = Number(seconds);
+        this.#chuiAt.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.#chuiAt.duration;
+    }
+    getBuffered() {
+        return this.#chuiAt.buffered;
+    }
+    getPaused() {
+        return this.#chuiAt.paused;
+    }
+    getEnded() {
+        return this.#chuiAt.ended;
+    }
+    getReadyState() {
+        return this.#chuiAt.readyState;
+    }
+    getVolume() {
+        return this.#chuiAt.volume;
+    }
     setVolume(value = Number()) {
-        this.#chui_at.volume = Math.min(1, Math.max(0, Number(value)));
+        this.#chuiAt.volume = Math.min(1, Math.max(0, Number(value)));
         return this;
     }
-    getMuted() { return this.#chui_at.muted; }
+    getMuted() {
+        return this.#chuiAt.muted;
+    }
     setMuted(boolean = Boolean()) {
-        this.#chui_at.muted = boolean === true;
+        this.#chuiAt.muted = boolean === true;
+        return this;
+    }
+    getPlaybackRate() {
+        return this.#chuiAt.playbackRate;
+    }
+    setPlaybackRate(rate = Number()) {
+        this.#chuiAt.playbackRate = Number(rate);
+        return this;
+    }
+    getDefaultPlaybackRate() {
+        return this.#chuiAt.defaultPlaybackRate;
+    }
+    setDefaultPlaybackRate(rate = Number()) {
+        this.#chuiAt.defaultPlaybackRate = Number(rate);
+        return this;
+    }
+    getLoop() {
+        return this.#chuiAt.loop;
+    }
+    setLoop(boolean = Boolean()) {
+        this.#chuiAt.loop = boolean === true;
+        return this;
+    }
+    getAutoplay() {
+        return this.#chuiAt.autoplay;
+    }
+    setAutoplay(boolean = Boolean()) {
+        this.#chuiAt.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);
+        this.#chuiAt.addEventListener(type, listener);
         return this;
     }
     removeEventListener(type = String(), listener = () => {}) {
-        this.#chui_at.removeEventListener(type, listener);
+        this.#chuiAt.removeEventListener(type, listener);
         return this;
     }
-    set() { return this.#chui_ap_main; }
+    set() {
+        return this.#chuiApMain;
+    }
     detach() {
         this.pause();
-        this.#chui_ap_main.remove();
+        this.#chuiApMain.remove();
         return this;
     }
     /** Остановить плеер и снять всё, что живёт вне его узлов. Повторный вызов безопасен */
     destroy() {
         if (this.#destroyed) return this;
         this.#destroyed = true;
-        this.#chui_at.pause();
-        this.#chui_at.removeAttribute("src");
-        this.#chui_at.load();                       // отпускает декодер и прочитанный файл
+        this.#chuiAt.pause();
+        this.#chuiAt.removeAttribute("src");
+        this.#chuiAt.load(); // отпускает декодер и прочитанный файл
         this.#unsetMediaActions();
         document.removeEventListener("mousedown", this.#onFxOutside);
-        this.#chui_audio_fx.destroy();
-        if (this.#chui_ap_main.parentElement !== null) this.#chui_ap_main.remove();
+        this.#chuiAudioFx.destroy();
+        if (this.#chuiApMain.parentElement !== null) this.#chuiApMain.remove();
         return this;
     }
     static #ERRORS = {
@@ -378,34 +465,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")
+    #chuiApEqualizerMain = document.createElement("chui_ap_equalizer_main");
+    #chuiApEqualizerControls = document.createElement("chui_ap_equalizer_controls");
+    #chuiApEqualizerBlock = document.createElement("chui_ap_equalizer_block");
+    #chuiApEqualizerPreampBlock = document.createElement("chui_ap_equalizer_preamp_block");
+    #chuiApEqualizerBandBlock = 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"
+    #fxStatus = "chuijs.framework.settings.fx_status";
+    #fxPreset = "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()
+            const filter = this.#audioContext.createBiquadFilter();
             if (i === 0) {
                 filter.type = "lowshelf";
             } else if (i === this.#eqBands.length - 1) {
@@ -413,57 +500,60 @@ 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.#chuiApEqualizerPreampBlock.appendChild(this.#setSliderPreamp(this.#filters));
+        this.#filters.forEach((filter) => this.#chuiApEqualizerBandBlock.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.#fxON(this.#audioContext);
+            else this.#fxOFF(this.#audioContext);
+        });
         //
-        this.#chui_ap_equalizer_controls.appendChild(this.#presets.set())
-        this.#chui_ap_equalizer_controls.appendChild(this.#switch.set())
+        this.#chuiApEqualizerControls.appendChild(this.#presets.set());
+        this.#chuiApEqualizerControls.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.#chuiApEqualizerBlock.appendChild(this.#chuiApEqualizerPreampBlock);
+        this.#chuiApEqualizerBlock.appendChild(this.#chuiApEqualizerBandBlock);
         //
-        this.#chui_ap_equalizer_main.appendChild(this.#chui_ap_equalizer_controls)
-        this.#chui_ap_equalizer_main.appendChild(this.#chui_ap_equalizer_block)
+        this.#chuiApEqualizerMain.appendChild(this.#chuiApEqualizerControls);
+        this.#chuiApEqualizerMain.appendChild(this.#chuiApEqualizerBlock);
         // По умолчанию эквалайзер выключен — и вид полосы должен говорить то же: пока
         // `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) {
+    #fxON(audioContext) {
         try {
             this.#media.disconnect(audioContext.destination);
             this.#media.connect(this.#filters[0]);
@@ -472,158 +562,160 @@ 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.#fxStatus);
+        store.set(this.#fxStatus, true);
+        this.#setStatusBlock(true);
     }
-    #fx_OFF(audioContext) {
+    #fxOFF(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.#fxStatus);
+        store.set(this.#fxStatus, 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.#fxPreset);
+        store.set(this.#fxPreset, name);
+        const preset = this.#getPreset(name);
+        this.#renderPreampSlider(undefined, preset, filter);
+        const input = preset.inputs.filter((input) => input.id === String(filter.frequency.value))[0];
+        this.#renderSlider(input, filter, preset.preamp);
     }
     #setStatusBlock(status) {
         //
         // Поле пресетов при выключенном эквалайзере не отвечает, а выключатель трогать
         // нельзя: он и есть способ включить эквалайзер обратно (родной флажок в выключенном
         // состоянии не шлёт `change` — включить было бы нечем)
-        this.#presets.setDisabled(!status)
+        this.#presets.setDisabled(!status);
         //
-        for (let band of this.#eqBands) {
-            let sliderBand = this.#node(String(band));
+        for (const band of this.#eqBands) {
+            const 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.#chuiApEqualizerPreampBlock.classList.remove("chui_ap_equalizer_disabled");
+                this.#chuiApEqualizerBandBlock.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.#chuiApEqualizerPreampBlock.classList.add("chui_ap_equalizer_disabled");
+                this.#chuiApEqualizerBandBlock.classList.add("chui_ap_equalizer_disabled");
             }
         }
         //
-        let sliderPreamp = this.#node("preamp");
+        const 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.#chuiApEqualizerPreampBlock.classList.remove("chui_ap_equalizer_disabled");
+            this.#chuiApEqualizerBandBlock.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.#chuiApEqualizerPreampBlock.classList.add("chui_ap_equalizer_disabled");
+            this.#chuiApEqualizerBandBlock.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}))
+        const sliderMain = document.createElement("chui_eq_slider_main");
+        const val = document.createElement("slider_label");
+        const slider = document.createElement("input");
+        const 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.#fxPreset)), 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
-        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
+        const freqValue = String(filter.frequency.value);
+        const sliderMain = document.createElement("chui_eq_slider_main");
+        const val = document.createElement("slider_label");
+        const slider = document.createElement("input");
+        const label = document.createElement("slider_label");
+        slider.id = freqValue;
+        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: freqValue }));
+        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_" + freqValue;
+        this.#nodes.set(freqValue, slider);
+        this.#nodes.set("val_" + freqValue, val);
+        val.innerText = String(slider.value);
+        label.innerText = freqValue.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)
+            const status = store.get(this.#fxStatus);
+            const preset = store.get(this.#fxPreset);
             if (status) {
-                this.#fx_ON(this.#audioContext)
-                this.#switch.setValue(true)
-                this.#setPresetName(store.get(this.#fx_preset))
-                this.#setStatusBlock(status)
+                this.#fxON(this.#audioContext);
+                this.#switch.setValue(true);
+                this.#setPresetName(store.get(this.#fxPreset));
+                this.#setStatusBlock(status);
             } else {
-                this.#fx_OFF(this.#audioContext)
-                this.#switch.setValue(false)
+                this.#fxOFF(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.#fxPreset));
                 }
-                this.#setStatusBlock(status)
+                this.#setStatusBlock(status);
             }
-        }, 250)
+        }, 250);
     }
     set() {
-        return this.#chui_ap_equalizer_main
+        return this.#chuiApEqualizerMain;
     }
     /** Включить или выключить эквалайзер: тот же путь, что у выключателя в панели */
     setEnabled(boolean = Boolean()) {
         const включён = this.#switch.getValue();
         if (boolean === включён) return this;
         this.#switch.setValue(boolean);
-        if (boolean) this.#fx_ON(this.#audioContext);
-        else this.#fx_OFF(this.#audioContext);
+        if (boolean) this.#fxON(this.#audioContext);
+        else this.#fxOFF(this.#audioContext);
         return this;
     }
     /** Состояние выключателя в панели */
-    isEnabled() { return this.#switch.getValue(); }
+    isEnabled() {
+        return this.#switch.getValue();
+    }
     /**
      * Отпустить звуковой граф: контекст держит аудиопоток, а Chromium разрешает ограниченное
      * число контекстов на страницу. Повторный вызов безопасен.
@@ -637,33 +729,33 @@ class AudioFX {
         return this;
     }
     #renderPreampSlider(input, preset, filters = []) {
-        let p_slider = this.#node("preamp");
-        let p_val = this.#node("val_preamp");
+        const preampSlider = this.#node("preamp");
+        const preampValue = this.#node("val_preamp");
         if (input === undefined) {
-            p_slider.value = preset.preamp
+            preampSlider.value = preset.preamp;
         } else {
-            p_slider.value = input.value
-            preset.inputs.forEach(inp => {
-                let slid = this.#node(inp.id)
-                filters.forEach(filter => {
+            preampSlider.value = input.value;
+            preset.inputs.forEach((inp) => {
+                const 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)}%`);
+        preampValue.innerText = String(preampSlider.value);
+        preampSlider.setAttribute("aria-valuetext", I18n.t("media.decibels", { value: preampSlider.value }));
+        preampSlider.style.setProperty("--fx_before_width", `${(50 + preampSlider.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)}%`);
+        const slider = this.#node(input.id);
+        const 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)}%`);
     }
     // ya.music.Audio.fx
     static PRESETS = [
@@ -682,7 +774,7 @@ class AudioFX {
                 { id: "12000", value: 0 },
                 { id: "14000", value: 0 },
                 { id: "16000", value: 0 },
-            ]
+            ],
         },
         {
             name: "Classical",
@@ -699,7 +791,7 @@ class AudioFX {
                 { id: "12000", value: -3.5 },
                 { id: "14000", value: -3.5 },
                 { id: "16000", value: -4.5 },
-            ]
+            ],
         },
         {
             name: "Club",
@@ -716,7 +808,7 @@ class AudioFX {
                 { id: "12000", value: -0.5 },
                 { id: "14000", value: -0.5 },
                 { id: "16000", value: -0.5 },
-            ]
+            ],
         },
         {
             name: "Dance",
@@ -733,7 +825,7 @@ class AudioFX {
                 { id: "12000", value: -3.5 },
                 { id: "14000", value: -0.5 },
                 { id: "16000", value: -0.5 },
-            ]
+            ],
         },
         {
             name: "Full Bass",
@@ -750,7 +842,7 @@ class AudioFX {
                 { id: "12000", value: -5 },
                 { id: "14000", value: -5.5 },
                 { id: "16000", value: -5.5 },
-            ]
+            ],
         },
         {
             name: "Full Treble",
@@ -767,7 +859,7 @@ class AudioFX {
                 { id: "12000", value: 8 },
                 { id: "14000", value: 8 },
                 { id: "16000", value: 8 },
-            ]
+            ],
         },
         {
             name: "Full Bass & Treble",
@@ -784,7 +876,7 @@ class AudioFX {
                 { id: "12000", value: 5.5 },
                 { id: "14000", value: 6 },
                 { id: "16000", value: 6 },
-            ]
+            ],
         },
         {
             name: "Laptop Speakers / Headphone",
@@ -801,7 +893,7 @@ class AudioFX {
                 { id: "12000", value: 4.5 },
                 { id: "14000", value: 6 },
                 { id: "16000", value: 7 },
-            ]
+            ],
         },
         {
             name: "Large Hall",
@@ -818,7 +910,7 @@ class AudioFX {
                 { id: "12000", value: -2 },
                 { id: "14000", value: -0.5 },
                 { id: "16000", value: -0.5 },
-            ]
+            ],
         },
         {
             name: "Live",
@@ -835,7 +927,7 @@ class AudioFX {
                 { id: "12000", value: 1 },
                 { id: "14000", value: 1 },
                 { id: "16000", value: 1 },
-            ]
+            ],
         },
         {
             name: "Party",
@@ -852,7 +944,7 @@ class AudioFX {
                 { id: "12000", value: -0.5 },
                 { id: "14000", value: 3.5 },
                 { id: "16000", value: 3.5 },
-            ]
+            ],
         },
         {
             name: "Pop",
@@ -869,7 +961,7 @@ class AudioFX {
                 { id: "12000", value: -1 },
                 { id: "14000", value: -0.5 },
                 { id: "16000", value: -0.5 },
-            ]
+            ],
         },
         {
             name: "Reggae",
@@ -886,7 +978,7 @@ class AudioFX {
                 { id: "12000", value: -0.5 },
                 { id: "14000", value: -0.5 },
                 { id: "16000", value: -0.5 },
-            ]
+            ],
         },
         {
             name: "Ska",
@@ -903,7 +995,7 @@ class AudioFX {
                 { id: "12000", value: 4.5 },
                 { id: "14000", value: 5.5 },
                 { id: "16000", value: 4.5 },
-            ]
+            ],
         },
         {
             name: "Soft",
@@ -920,7 +1012,7 @@ class AudioFX {
                 { id: "12000", value: 4.5 },
                 { id: "14000", value: 5.5 },
                 { id: "16000", value: 6 },
-            ]
+            ],
         },
         {
             name: "Rock",
@@ -937,7 +1029,7 @@ class AudioFX {
                 { id: "12000", value: 5.5 },
                 { id: "14000", value: 5.5 },
                 { id: "16000", value: 5.5 },
-            ]
+            ],
         },
         {
             name: "Soft Rock",
@@ -954,7 +1046,7 @@ class AudioFX {
                 { id: "12000", value: -0.5 },
                 { id: "14000", value: 1 },
                 { id: "16000", value: 4 },
-            ]
+            ],
         },
         {
             name: "Techno",
@@ -971,8 +1063,9 @@ class AudioFX {
                 { id: "12000", value: 4.5 },
                 { id: "14000", value: 4.5 },
                 { id: "16000", value: 4 },
-            ]
-        }]
+            ],
+        },
+    ];
 }
 
-exports.Audio = Audio
+exports.Audio = Audio;