chuijs 4.0.3 → 4.0.4

package/framework/components/chui_media/audio.js

@@ -18,25 +18,25 @@ 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;
@@ -65,99 +65,99 @@ class Audio {
         }
     ) {
         require("../../modules/chui_functions").setStyles(__dirname + "/audio_styles.css", "chUiJS_Audio");
-        this.#chui_at.preload = "metadata";
-        this.#chui_at.controls = false;
+        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);
@@ -165,17 +165,17 @@ 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 () => {
@@ -188,31 +188,26 @@ class Audio {
         } 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", `${доля}%`);
+        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.#chui_ap_volume_icon,
-            this.getMuted() || доля === 0 ? Icons.AUDIO_VIDEO.VOLUME_OFF : Icons.AUDIO_VIDEO.VOLUME_UP,
-            "18px"
+            this.#chuiApVolumeIcon,
+            this.getMuted() || доля === 0 ? Icons.AUDIO_VIDEO.VOLUME_OFF : Icons.AUDIO_VIDEO.VOLUME_UP
         );
-        this.#setLabel(this.#chui_ap_volume_icon, I18n.t(this.getMuted() ? "media.unmute" : "media.mute"));
+        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) {
             // Буфер ещё пуст (метаданные не пришли) — рисовать нечего
         }
@@ -222,28 +217,28 @@ class Audio {
     #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", `${доля}%`);
+        this.#chuiApMain.style.setProperty("--seek_before_width", `${доля}%`);
     };
     #calculateTime = (secs) => {
         const seconds = Number.isFinite(Number(secs)) ? Number(secs) : 0;
@@ -252,7 +247,7 @@ class Audio {
         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") })}${причина}`);
@@ -260,13 +255,13 @@ class Audio {
     #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) {
@@ -305,8 +300,8 @@ 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() {
@@ -315,10 +310,10 @@ class Audio {
     // === ЭКВАЛАЙЗЕР ===
     /** Включить или выключить эквалайзер: то же, что делает выключатель в панели */
     setEqualizerEnabled(boolean = Boolean()) {
-        return (this.#chui_audio_fx.setEnabled(boolean), this);
+        return (this.#chuiAudioFx.setEnabled(boolean), this);
     }
     isEqualizerEnabled() {
-        return this.#chui_audio_fx.isEnabled();
+        return this.#chuiAudioFx.isEnabled();
     }
     /** Раскрыть или свернуть панель эквалайзера */
     setEqualizerOpen(open = Boolean()) {
@@ -327,142 +322,142 @@ class Audio {
     }
     /** Показать панель эквалайзера, если она скрыта, и наоборот */
     isEqualizerOpen() {
-        return this.#chui_ap_fx_dropdown.classList.contains("fx_open");
+        return this.#chuiApFxDropdown.classList.contains("fx_open");
     }
     /** Прочитать сохранённое состояние эквалайзера из настроек */
     restoreFX() {
-        this.#chui_audio_fx.restore();
+        this.#chuiAudioFx.restore();
         return this;
     }
     // === СТАНДАРТНЫЕ ВОЗМОЖНОСТИ `<audio>` ===
     /** Сам элемент: для всего, чего нет в списке ниже */
     getAudio() {
-        return this.#chui_at;
+        return this.#chuiAt;
     }
     /** Воспроизведение: промис, как у `<audio>` */
     play() {
-        return this.#chui_at.play();
+        return this.#chuiAt.play();
     }
     pause() {
-        this.#chui_at.pause();
+        this.#chuiAt.pause();
         return this;
     }
     load() {
-        this.#chui_at.load();
+        this.#chuiAt.load();
         return this;
     }
     canPlayType(type = String()) {
-        return this.#chui_at.canPlayType(type);
+        return this.#chuiAt.canPlayType(type);
     }
     getSrc() {
-        return this.#chui_at.getAttribute("src") ?? "";
+        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;
+        return this.#chuiAt.srcObject;
     }
     /** Живой поток — штатное `srcObject`, а не путь */
     setSrcObject(object) {
-        this.#chui_at.srcObject = object;
+        this.#chuiAt.srcObject = object;
         return this;
     }
     getCurrentTime() {
-        return this.#chui_at.currentTime;
+        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;
+        return this.#chuiAt.duration;
     }
     getBuffered() {
-        return this.#chui_at.buffered;
+        return this.#chuiAt.buffered;
     }
     getPaused() {
-        return this.#chui_at.paused;
+        return this.#chuiAt.paused;
     }
     getEnded() {
-        return this.#chui_at.ended;
+        return this.#chuiAt.ended;
     }
     getReadyState() {
-        return this.#chui_at.readyState;
+        return this.#chuiAt.readyState;
     }
     getVolume() {
-        return this.#chui_at.volume;
+        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;
+        return this.#chuiAt.muted;
     }
     setMuted(boolean = Boolean()) {
-        this.#chui_at.muted = boolean === true;
+        this.#chuiAt.muted = boolean === true;
         return this;
     }
     getPlaybackRate() {
-        return this.#chui_at.playbackRate;
+        return this.#chuiAt.playbackRate;
     }
     setPlaybackRate(rate = Number()) {
-        this.#chui_at.playbackRate = Number(rate);
+        this.#chuiAt.playbackRate = Number(rate);
         return this;
     }
     getDefaultPlaybackRate() {
-        return this.#chui_at.defaultPlaybackRate;
+        return this.#chuiAt.defaultPlaybackRate;
     }
     setDefaultPlaybackRate(rate = Number()) {
-        this.#chui_at.defaultPlaybackRate = Number(rate);
+        this.#chuiAt.defaultPlaybackRate = Number(rate);
         return this;
     }
     getLoop() {
-        return this.#chui_at.loop;
+        return this.#chuiAt.loop;
     }
     setLoop(boolean = Boolean()) {
-        this.#chui_at.loop = boolean === true;
+        this.#chuiAt.loop = boolean === true;
         return this;
     }
     getAutoplay() {
-        return this.#chui_at.autoplay;
+        return this.#chuiAt.autoplay;
     }
     setAutoplay(boolean = Boolean()) {
-        this.#chui_at.autoplay = boolean === true;
+        this.#chuiAt.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;
+        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 = {
@@ -473,11 +468,11 @@ class Audio {
     };
 }
 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`. Прежде тут были свои элементы, и список пресетов ломался:
@@ -490,14 +485,14 @@ class AudioFX {
     #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) {
@@ -517,8 +512,8 @@ class AudioFX {
         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(
@@ -533,18 +528,18 @@ class AudioFX {
         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);
@@ -558,7 +553,7 @@ class AudioFX {
         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]);
@@ -567,25 +562,25 @@ 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);
+        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);
+        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) {
         //
@@ -594,30 +589,30 @@ class AudioFX {
         // состоянии не шлёт `change` — включить было бы нечем)
         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");
+                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");
+                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");
+            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");
+            this.#chuiApEqualizerPreampBlock.classList.add("chui_ap_equalizer_disabled");
+            this.#chuiApEqualizerBandBlock.classList.add("chui_ap_equalizer_disabled");
         }
     }
     #getPreset(name) {
@@ -628,10 +623,10 @@ class AudioFX {
         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");
+        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";
@@ -644,9 +639,8 @@ class AudioFX {
         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);
+        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);
@@ -658,27 +652,27 @@ class AudioFX {
         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;
+        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: freq_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.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.id = "val_" + freqValue;
+        this.#nodes.set(freqValue, slider);
+        this.#nodes.set("val_" + freqValue, val);
         val.innerText = String(slider.value);
-        label.innerText = freq_value.replace("000", "K");
+        label.innerText = freqValue.replace("000", "K");
         sliderMain.appendChild(val);
         sliderMain.appendChild(slider);
         sliderMain.appendChild(label);
@@ -687,35 +681,35 @@ class AudioFX {
     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.#fxON(this.#audioContext);
                 this.#switch.setValue(true);
-                this.#setPresetName(store.get(this.#fx_preset));
+                this.#setPresetName(store.get(this.#fxPreset));
                 this.#setStatusBlock(status);
             } else {
-                this.#fx_OFF(this.#audioContext);
+                this.#fxOFF(this.#audioContext);
                 this.#switch.setValue(false);
                 if (status === undefined || preset === undefined) {
                     this.#setPresetName("Default");
                 } else {
-                    this.#setPresetName(store.get(this.#fx_preset));
+                    this.#setPresetName(store.get(this.#fxPreset));
                 }
                 this.#setStatusBlock(status);
             }
         }, 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;
     }
     /** Состояние выключателя в панели */
@@ -735,14 +729,14 @@ 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;
+            preampSlider.value = input.value;
             preset.inputs.forEach((inp) => {
-                let slid = this.#node(inp.id);
+                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);
@@ -750,18 +744,18 @@ class AudioFX {
                 });
             });
         }
-        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);
+        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)}%`);
+        slider.style.setProperty("--fx_before_width", `${(50 + slider.value * 5).toFixed(1)}%`);
     }
     // ya.music.Audio.fx
     static PRESETS = [