chuijs 4.0.3 → 4.0.4

package/framework/components/chui_media/video.js

@@ -17,18 +17,18 @@ const { setStyles, optionOr } = require("../../modules/chui_functions");
  * а события — через `addEventListener()`.
  */
 class Video {
-    #chui_vp_main = document.createElement("chui_vp_main");
-    #chui_vt = document.createElement("video");
+    #chuiVpMain = document.createElement("chui_vp_main");
+    #chuiVt = document.createElement("video");
     // Плавающая полоса управления
-    #chui_vp_panel = document.createElement("chui_vp_panel");
-    #chui_vp_play_pause = document.createElement("chui_vp_play_pause");
-    #chui_vp_time = undefined;
-    #chui_vp_progress = document.createElement("chui_vp_progress");
-    #chui_vp_seek = document.createElement("input");
-    #chui_vp_seek_buf = document.createElement("chui_vp_seek_buf");
-    #chui_vp_volume_icon = document.createElement("chui_vp_volume_icon");
-    #chui_vp_volume = document.createElement("input");
-    #chui_vp_full_mode = document.createElement("chui_vp_full_mode");
+    #chuiVpPanel = document.createElement("chui_vp_panel");
+    #chuiVpPlayPause = document.createElement("chui_vp_play_pause");
+    #chuiVpTime = undefined;
+    #chuiVpProgress = document.createElement("chui_vp_progress");
+    #chuiVpSeek = document.createElement("input");
+    #chuiVpSeekBuf = document.createElement("chui_vp_seek_buf");
+    #chuiVpVolumeIcon = document.createElement("chui_vp_volume_icon");
+    #chuiVpVolume = document.createElement("input");
+    #chuiVpFullMode = document.createElement("chui_vp_full_mode");
     // Состояние
     #controls = true;
     #destroyed = false;
@@ -60,47 +60,47 @@ class Video {
         setStyles(__dirname + "/video_styles.css", "chUiJS_Video");
         // Плеер — именованная группа: своих ролей у панели нет, а без имени скринридер
         // читает подряд безымянные кнопки без контекста
-        this.#chui_vp_main.setAttribute("role", "group");
-        this.#chui_vp_main.setAttribute("aria-label", optionOr(options.label, I18n.t("media.videoPlayer")));
-        this.#chui_vt.preload = "metadata";
-        this.#chui_vt.controls = false;
-        if (options.src !== undefined) this.#chui_vt.setAttribute("src", options.src);
-        if (options.poster !== undefined) this.#chui_vt.setAttribute("poster", options.poster);
-        if (options.autoplay !== undefined) this.#chui_vt.autoplay = options.autoplay === true;
-        if (options.loop !== undefined) this.#chui_vt.loop = options.loop === true;
-        if (options.muted !== undefined) this.#chui_vt.muted = options.muted === true;
-        this.#chui_vt.volume = options.volume === undefined ? 0.5 : Math.min(1, Math.max(0, Number(options.volume)));
+        this.#chuiVpMain.setAttribute("role", "group");
+        this.#chuiVpMain.setAttribute("aria-label", optionOr(options.label, I18n.t("media.videoPlayer")));
+        this.#chuiVt.preload = "metadata";
+        this.#chuiVt.controls = false;
+        if (options.src !== undefined) this.#chuiVt.setAttribute("src", options.src);
+        if (options.poster !== undefined) this.#chuiVt.setAttribute("poster", options.poster);
+        if (options.autoplay !== undefined) this.#chuiVt.autoplay = options.autoplay === true;
+        if (options.loop !== undefined) this.#chuiVt.loop = options.loop === true;
+        if (options.muted !== undefined) this.#chuiVt.muted = options.muted === true;
+        this.#chuiVt.volume = options.volume === undefined ? 0.5 : Math.min(1, Math.max(0, Number(options.volume)));
         // Размеры кадра — стилем: опции принимают и проценты, и `-webkit-fill-available`
-        if (options.width !== undefined) this.#chui_vt.style.width = options.width;
-        if (options.height !== undefined) this.#chui_vt.style.height = options.height;
-        this.#chui_vp_main.appendChild(this.#chui_vt);
+        if (options.width !== undefined) this.#chuiVt.style.width = options.width;
+        if (options.height !== undefined) this.#chuiVt.style.height = options.height;
+        this.#chuiVpMain.appendChild(this.#chuiVt);
         this.#buildPanel();
-        this.#chui_vp_main.appendChild(this.#chui_vp_panel);
+        this.#chuiVpMain.appendChild(this.#chuiVpPanel);
         // О смене состояния и ошибках сообщает скрытый live-регион
         this.#status.classList.add("chui_visually_hidden");
         this.#status.setAttribute("role", "status");
         this.#status.setAttribute("aria-live", "polite");
-        this.#chui_vp_main.appendChild(this.#status);
+        this.#chuiVpMain.appendChild(this.#status);
         // СОБЫТИЯ
-        this.#chui_vt.addEventListener("play", this.#onPlay);
-        this.#chui_vt.addEventListener("pause", this.#onPause);
-        this.#chui_vt.addEventListener("timeupdate", this.#onTimeUpdate);
-        this.#chui_vt.addEventListener("durationchange", this.#onDurationChange);
-        this.#chui_vt.addEventListener("loadedmetadata", this.#onDurationChange);
-        this.#chui_vt.addEventListener("progress", this.#onBuffered);
-        this.#chui_vt.addEventListener("volumechange", () => this.#renderVolume());
-        this.#chui_vt.addEventListener("error", () => {
+        this.#chuiVt.addEventListener("play", this.#onPlay);
+        this.#chuiVt.addEventListener("pause", this.#onPause);
+        this.#chuiVt.addEventListener("timeupdate", this.#onTimeUpdate);
+        this.#chuiVt.addEventListener("durationchange", this.#onDurationChange);
+        this.#chuiVt.addEventListener("loadedmetadata", this.#onDurationChange);
+        this.#chuiVt.addEventListener("progress", this.#onBuffered);
+        this.#chuiVt.addEventListener("volumechange", () => this.#renderVolume());
+        this.#chuiVt.addEventListener("error", () => {
             Log.error(`[Video] не удалось прочитать дорожку: ${this.getSrc()}`);
             this.#setStatus(I18n.t("media.videoNotPlaying", { reason: I18n.t("media.error.sourceFailed") }));
         });
-        this.#chui_vp_main.addEventListener("mouseenter", this.#onEnter);
-        this.#chui_vp_main.addEventListener("mouseleave", this.#onLeave);
+        this.#chuiVpMain.addEventListener("mouseenter", this.#onEnter);
+        this.#chuiVpMain.addEventListener("mouseleave", this.#onLeave);
         // Панель не должна прятаться, пока в ней стоит клавиатурный фокус
-        this.#chui_vp_main.addEventListener("focusin", this.#onEnter);
-        this.#chui_vp_main.addEventListener("focusout", this.#onLeave);
-        this.#chui_vp_play_pause.addEventListener("click", () => this.#playPause());
-        this.#chui_vp_volume_icon.addEventListener("click", () => this.setMuted(!this.getMuted()));
-        this.#chui_vp_full_mode.addEventListener("click", () => this.#toggleFullscreen());
+        this.#chuiVpMain.addEventListener("focusin", this.#onEnter);
+        this.#chuiVpMain.addEventListener("focusout", this.#onLeave);
+        this.#chuiVpPlayPause.addEventListener("click", () => this.#playPause());
+        this.#chuiVpVolumeIcon.addEventListener("click", () => this.setMuted(!this.getMuted()));
+        this.#chuiVpFullMode.addEventListener("click", () => this.#toggleFullscreen());
         this.#setSliderMax();
         this.setControls(options.controls === undefined ? true : options.controls === true);
         this.#renderPlayState(false);
@@ -108,46 +108,46 @@ class Video {
     }
     /** Полоса управления: кнопки, полоса прогресса, время, громкость, полный экран */
     #buildPanel() {
-        this.#setButton(this.#chui_vp_play_pause, I18n.t("media.play"), Icons.AUDIO_VIDEO.PLAY_ARROW);
-        this.#setButton(this.#chui_vp_volume_icon, I18n.t("media.mute"), Icons.AUDIO_VIDEO.VOLUME_UP);
-        this.#setButton(this.#chui_vp_full_mode, I18n.t("media.fullscreen"), Icons.NAVIGATION.FULLSCREEN);
-        this.#chui_vp_time = new Label({ text: this.#calculateTime(0) });
-        this.#chui_vp_seek.type = "range";
-        this.#chui_vp_seek.id = "chui_vp_seek";
-        this.#chui_vp_seek.max = "0";
-        this.#chui_vp_seek.value = "0";
-        this.#chui_vp_seek.setAttribute("aria-label", I18n.t("media.position"));
-        this.#chui_vp_seek.addEventListener("input", () => {
-            this.#chui_vt.currentTime = Number(this.#chui_vp_seek.value);
+        this.#setButton(this.#chuiVpPlayPause, I18n.t("media.play"), Icons.AUDIO_VIDEO.PLAY_ARROW);
+        this.#setButton(this.#chuiVpVolumeIcon, I18n.t("media.mute"), Icons.AUDIO_VIDEO.VOLUME_UP);
+        this.#setButton(this.#chuiVpFullMode, I18n.t("media.fullscreen"), Icons.NAVIGATION.FULLSCREEN);
+        this.#chuiVpTime = new Label({ text: this.#calculateTime(0) });
+        this.#chuiVpSeek.type = "range";
+        this.#chuiVpSeek.id = "chui_vp_seek";
+        this.#chuiVpSeek.max = "0";
+        this.#chuiVpSeek.value = "0";
+        this.#chuiVpSeek.setAttribute("aria-label", I18n.t("media.position"));
+        this.#chuiVpSeek.addEventListener("input", () => {
+            this.#chuiVt.currentTime = Number(this.#chuiVpSeek.value);
             this.#renderProgress();
         });
-        this.#chui_vp_progress.appendChild(this.#chui_vp_seek);
-        this.#chui_vp_progress.appendChild(this.#chui_vp_seek_buf);
-        this.#chui_vp_volume.type = "range";
-        this.#chui_vp_volume.id = "chui_vp_volume";
-        this.#chui_vp_volume.max = "100";
-        this.#chui_vp_volume.value = String(Math.round(this.#chui_vt.volume * 100));
-        this.#chui_vp_volume.setAttribute("aria-label", I18n.t("media.volume"));
-        this.#chui_vp_volume.addEventListener("input", () => {
-            this.#chui_vt.volume = Number(this.#chui_vp_volume.value) / 100;
-            this.#chui_vt.muted = false;
+        this.#chuiVpProgress.appendChild(this.#chuiVpSeek);
+        this.#chuiVpProgress.appendChild(this.#chuiVpSeekBuf);
+        this.#chuiVpVolume.type = "range";
+        this.#chuiVpVolume.id = "chui_vp_volume";
+        this.#chuiVpVolume.max = "100";
+        this.#chuiVpVolume.value = String(Math.round(this.#chuiVt.volume * 100));
+        this.#chuiVpVolume.setAttribute("aria-label", I18n.t("media.volume"));
+        this.#chuiVpVolume.addEventListener("input", () => {
+            this.#chuiVt.volume = Number(this.#chuiVpVolume.value) / 100;
+            this.#chuiVt.muted = false;
         });
         //
-        this.#chui_vp_panel.appendChild(this.#chui_vp_play_pause);
-        this.#chui_vp_panel.appendChild(this.#chui_vp_progress);
-        this.#chui_vp_panel.appendChild(this.#chui_vp_time.set());
-        this.#chui_vp_panel.appendChild(this.#chui_vp_volume_icon);
-        this.#chui_vp_panel.appendChild(this.#chui_vp_volume);
-        this.#chui_vp_panel.appendChild(this.#chui_vp_full_mode);
+        this.#chuiVpPanel.appendChild(this.#chuiVpPlayPause);
+        this.#chuiVpPanel.appendChild(this.#chuiVpProgress);
+        this.#chuiVpPanel.appendChild(this.#chuiVpTime.set());
+        this.#chuiVpPanel.appendChild(this.#chuiVpVolumeIcon);
+        this.#chuiVpPanel.appendChild(this.#chuiVpVolume);
+        this.#chuiVpPanel.appendChild(this.#chuiVpFullMode);
     }
     // === ПАНЕЛЬ И ПОЛОСЫ ===
     /** Полоса показывается, пока курсор над плеером или фокус в нём (состояние — класс) */
     #openPanel() {
         if (!this.#controls) return;
-        this.#chui_vp_main.classList.add("vp_panel_open");
+        this.#chuiVpMain.classList.add("vp_panel_open");
     }
     #closePanel() {
-        this.#chui_vp_main.classList.remove("vp_panel_open");
+        this.#chuiVpMain.classList.remove("vp_panel_open");
     }
     #playPause = async () => {
         if (this.getPaused()) await this.play();
@@ -158,26 +158,26 @@ class Video {
         else await this.exitFullscreen();
     };
     #renderPlayState(playing) {
-        this.#setIcon(this.#chui_vp_play_pause, playing ? Icons.AUDIO_VIDEO.PAUSE : Icons.AUDIO_VIDEO.PLAY_ARROW);
-        this.#setLabel(this.#chui_vp_play_pause, playing ? I18n.t("media.pause") : I18n.t("media.play"));
+        this.#setIcon(this.#chuiVpPlayPause, playing ? Icons.AUDIO_VIDEO.PAUSE : Icons.AUDIO_VIDEO.PLAY_ARROW);
+        this.#setLabel(this.#chuiVpPlayPause, playing ? I18n.t("media.pause") : I18n.t("media.play"));
     }
     #renderVolume = () => {
-        const доля = Math.min(100, Math.max(0, Math.round(this.#chui_vt.volume * 100)));
-        this.#chui_vp_volume.value = String(доля);
-        this.#chui_vp_volume.disabled = this.getMuted();
-        this.#chui_vp_main.style.setProperty("--volume-before-width", `${доля}%`);
+        const доля = Math.min(100, Math.max(0, Math.round(this.#chuiVt.volume * 100)));
+        this.#chuiVpVolume.value = String(доля);
+        this.#chuiVpVolume.disabled = this.getMuted();
+        this.#chuiVpMain.style.setProperty("--volume_before_width", `${доля}%`);
         this.#setIcon(
-            this.#chui_vp_volume_icon,
-            this.getMuted() || this.#chui_vt.volume === 0 ? Icons.AUDIO_VIDEO.VOLUME_OFF : Icons.AUDIO_VIDEO.VOLUME_UP
+            this.#chuiVpVolumeIcon,
+            this.getMuted() || this.#chuiVt.volume === 0 ? Icons.AUDIO_VIDEO.VOLUME_OFF : Icons.AUDIO_VIDEO.VOLUME_UP
         );
-        this.#chui_vp_volume_icon.setAttribute("aria-label", I18n.t(this.getMuted() ? "media.unmute" : "media.mute"));
+        this.#chuiVpVolumeIcon.setAttribute("aria-label", I18n.t(this.getMuted() ? "media.unmute" : "media.mute"));
     };
     #displayBufferedAmount = () => {
-        const max = Number(this.#chui_vp_seek.max);
+        const max = Number(this.#chuiVpSeek.max);
         if (!(max > 0)) return;
         try {
-            const end = Math.floor((this.#chui_vt.buffered.end(0) / max) * 100);
-            this.#chui_vp_seek_buf.style.width = `${Math.min(100, Math.max(0, end))}%`;
+            const end = Math.floor((this.#chuiVt.buffered.end(0) / max) * 100);
+            this.#chuiVpSeekBuf.style.width = `${Math.min(100, Math.max(0, end))}%`;
         } catch (_error) {
             // Буфер ещё пуст — рисовать нечего
         }
@@ -187,26 +187,26 @@ class Video {
     #setSliderMax = () => {
         const duration = this.getDuration();
         const known = Number.isFinite(duration) && duration > 0;
-        this.#chui_vp_seek.max = known ? String(Math.floor(duration)) : "0";
+        this.#chuiVpSeek.max = known ? String(Math.floor(duration)) : "0";
         // Без известной длительности ползунок бессмысленен: перетаскивание отправляло бы плеер в начало
-        this.#chui_vp_seek.disabled = !known;
+        this.#chuiVpSeek.disabled = !known;
     };
     #renderProgress = () => {
-        const max = Number(this.#chui_vp_seek.max);
+        const max = Number(this.#chuiVpSeek.max);
         const position = this.getCurrentTime();
         const duration = this.getDuration();
         if (!(max > 0)) {
             // «0:07 / 0:00» читалось бы как поломка: у источника без длительности показываем только прошедшее
-            this.#chui_vp_time.setText(this.#calculateTime(position));
-            this.#chui_vp_main.style.setProperty("--seek-before-width", "0%");
+            this.#chuiVpTime.setText(this.#calculateTime(position));
+            this.#chuiVpMain.style.setProperty("--seek_before_width", "0%");
             return;
         }
-        this.#chui_vp_time.setText(`${this.#calculateTime(position)} / ${this.#calculateTime(duration)}`);
-        this.#chui_vp_seek.value = String(Math.floor(position));
+        this.#chuiVpTime.setText(`${this.#calculateTime(position)} / ${this.#calculateTime(duration)}`);
+        this.#chuiVpSeek.value = String(Math.floor(position));
         // Доля ограничена сотней: `max` — округлённая длительность, а позиция идёт дальше,
         // и без ограничения полоса целиком заливалась акцентом
         const доля = Math.min(100, Math.max(0, Math.floor((position / max) * 100)));
-        this.#chui_vp_main.style.setProperty("--seek-before-width", `${доля}%`);
+        this.#chuiVpMain.style.setProperty("--seek_before_width", `${доля}%`);
     };
     #calculateTime = (secs) => {
         const seconds = Number.isFinite(Number(secs)) ? Number(secs) : 0;
@@ -219,12 +219,12 @@ class Video {
         this.#status.innerText = text;
     }
     #setButton(node, label, icon) {
-        node.innerHTML = new Icon(icon, "18px").getHTML();
+        node.innerHTML = new Icon(icon).getHTML();
         node.setAttribute("aria-label", label);
         makeKeyboardButton(node);
     }
-    #setIcon(node, icon, size = "18px") {
-        const glyph = new Icon(icon, size).getHTML();
+    #setIcon(node, icon) {
+        const glyph = new Icon(icon).getHTML();
         if (node.innerHTML !== glyph) node.innerHTML = glyph;
     }
     #setLabel(node, label) {
@@ -235,7 +235,7 @@ class Video {
     /** Полоса управления: `false` — панели нет вовсе, остаётся только кадр */
     setControls(boolean = Boolean()) {
         this.#controls = boolean === true;
-        this.#chui_vp_main.classList.toggle("vp_controls_off", !this.#controls);
+        this.#chuiVpMain.classList.toggle("vp_controls_off", !this.#controls);
         if (!this.#controls) this.#closePanel();
         return this;
     }
@@ -245,151 +245,151 @@ class Video {
     // === СТАНДАРТНЫЕ ВОЗМОЖНОСТИ `<video>` ===
     /** Сам элемент: для всего, чего нет в списке ниже */
     getVideo() {
-        return this.#chui_vt;
+        return this.#chuiVt;
     }
     /** Воспроизведение: промис, как у `<video>` (разрешается, когда воспроизведение началось) */
     play() {
-        return this.#chui_vt.play();
+        return this.#chuiVt.play();
     }
     pause() {
-        this.#chui_vt.pause();
+        this.#chuiVt.pause();
         return this;
     }
     load() {
-        this.#chui_vt.load();
+        this.#chuiVt.load();
         return this;
     }
     canPlayType(type = String()) {
-        return this.#chui_vt.canPlayType(type);
+        return this.#chuiVt.canPlayType(type);
     }
     getSrc() {
-        return this.#chui_vt.getAttribute("src") ?? "";
+        return this.#chuiVt.getAttribute("src") ?? "";
     }
     setSrc(url = String()) {
-        this.#chui_vt.setAttribute("src", url);
-        this.#chui_vt.load();
+        this.#chuiVt.setAttribute("src", url);
+        this.#chuiVt.load();
         return this;
     }
     getSrcObject() {
-        return this.#chui_vt.srcObject;
+        return this.#chuiVt.srcObject;
     }
     /** Живой поток (камера, `getUserMedia`) — штатное `srcObject`, а не путь */
     setSrcObject(object) {
-        this.#chui_vt.srcObject = object;
+        this.#chuiVt.srcObject = object;
         return this;
     }
     getPoster() {
-        return this.#chui_vt.getAttribute("poster") ?? "";
+        return this.#chuiVt.getAttribute("poster") ?? "";
     }
     setPoster(url = String()) {
-        if (url === "") this.#chui_vt.removeAttribute("poster");
-        else this.#chui_vt.setAttribute("poster", url);
+        if (url === "") this.#chuiVt.removeAttribute("poster");
+        else this.#chuiVt.setAttribute("poster", url);
         return this;
     }
     getCurrentTime() {
-        return this.#chui_vt.currentTime;
+        return this.#chuiVt.currentTime;
     }
     setCurrentTime(seconds = Number()) {
-        this.#chui_vt.currentTime = Number(seconds);
+        this.#chuiVt.currentTime = Number(seconds);
         // Подписи и заливка не ждут `timeupdate`: перемотка из кода видна сразу
         this.#renderProgress();
         return this;
     }
     getDuration() {
-        return this.#chui_vt.duration;
+        return this.#chuiVt.duration;
     }
     getBuffered() {
-        return this.#chui_vt.buffered;
+        return this.#chuiVt.buffered;
     }
     getPaused() {
-        return this.#chui_vt.paused;
+        return this.#chuiVt.paused;
     }
     getEnded() {
-        return this.#chui_vt.ended;
+        return this.#chuiVt.ended;
     }
     getReadyState() {
-        return this.#chui_vt.readyState;
+        return this.#chuiVt.readyState;
     }
     getVolume() {
-        return this.#chui_vt.volume;
+        return this.#chuiVt.volume;
     }
     setVolume(value = Number()) {
-        this.#chui_vt.volume = Math.min(1, Math.max(0, Number(value)));
+        this.#chuiVt.volume = Math.min(1, Math.max(0, Number(value)));
         return this;
     }
     getMuted() {
-        return this.#chui_vt.muted;
+        return this.#chuiVt.muted;
     }
     setMuted(boolean = Boolean()) {
-        this.#chui_vt.muted = boolean === true;
+        this.#chuiVt.muted = boolean === true;
         return this;
     }
     getPlaybackRate() {
-        return this.#chui_vt.playbackRate;
+        return this.#chuiVt.playbackRate;
     }
     setPlaybackRate(rate = Number()) {
-        this.#chui_vt.playbackRate = Number(rate);
+        this.#chuiVt.playbackRate = Number(rate);
         return this;
     }
     getDefaultPlaybackRate() {
-        return this.#chui_vt.defaultPlaybackRate;
+        return this.#chuiVt.defaultPlaybackRate;
     }
     setDefaultPlaybackRate(rate = Number()) {
-        this.#chui_vt.defaultPlaybackRate = Number(rate);
+        this.#chuiVt.defaultPlaybackRate = Number(rate);
         return this;
     }
     getLoop() {
-        return this.#chui_vt.loop;
+        return this.#chuiVt.loop;
     }
     setLoop(boolean = Boolean()) {
-        this.#chui_vt.loop = boolean === true;
+        this.#chuiVt.loop = boolean === true;
         return this;
     }
     getAutoplay() {
-        return this.#chui_vt.autoplay;
+        return this.#chuiVt.autoplay;
     }
     setAutoplay(boolean = Boolean()) {
-        this.#chui_vt.autoplay = boolean === true;
+        this.#chuiVt.autoplay = boolean === true;
         return this;
     }
     getWidth() {
-        return getComputedStyle(this.#chui_vt).width;
+        return getComputedStyle(this.#chuiVt).width;
     }
     setWidth(value = String()) {
-        this.#chui_vt.style.width = value;
+        this.#chuiVt.style.width = value;
         return this;
     }
     getHeight() {
-        return getComputedStyle(this.#chui_vt).height;
+        return getComputedStyle(this.#chuiVt).height;
     }
     setHeight(value = String()) {
-        this.#chui_vt.style.height = value;
+        this.#chuiVt.style.height = value;
         return this;
     }
     getFullscreen() {
-        return this.#chui_vp_main === document.fullscreenElement;
+        return this.#chuiVpMain === document.fullscreenElement;
     }
     /** Полный экран — на весь плеер, а не на кадр: иначе полоса управления осталась бы снаружи */
     requestFullscreen() {
-        return this.#chui_vp_main.requestFullscreen({ navigationUI: "hide" });
+        return this.#chuiVpMain.requestFullscreen({ navigationUI: "hide" });
     }
     exitFullscreen() {
         return document.exitFullscreen();
     }
     addEventListener(type = String(), listener = () => {}) {
-        this.#chui_vt.addEventListener(type, listener);
+        this.#chuiVt.addEventListener(type, listener);
         return this;
     }
     removeEventListener(type = String(), listener = () => {}) {
-        this.#chui_vt.removeEventListener(type, listener);
+        this.#chuiVt.removeEventListener(type, listener);
         return this;
     }
     set() {
-        return this.#chui_vp_main;
+        return this.#chuiVpMain;
     }
     detach() {
         this.pause();
-        this.#chui_vp_main.remove();
+        this.#chuiVpMain.remove();
         return this;
     }
     /** Остановить плеер и снять свои обработчики. Повторный вызов безопасен */
@@ -397,18 +397,18 @@ class Video {
         if (this.#destroyed) return this;
         this.#destroyed = true;
         this.pause();
-        this.#chui_vt.removeEventListener("play", this.#onPlay);
-        this.#chui_vt.removeEventListener("pause", this.#onPause);
-        this.#chui_vt.removeEventListener("timeupdate", this.#onTimeUpdate);
-        this.#chui_vt.removeEventListener("durationchange", this.#onDurationChange);
-        this.#chui_vt.removeEventListener("loadedmetadata", this.#onDurationChange);
-        this.#chui_vt.removeEventListener("progress", this.#onBuffered);
-        this.#chui_vp_main.removeEventListener("mouseenter", this.#onEnter);
-        this.#chui_vp_main.removeEventListener("mouseleave", this.#onLeave);
-        this.#chui_vp_main.removeEventListener("focusin", this.#onEnter);
-        this.#chui_vp_main.removeEventListener("focusout", this.#onLeave);
-        this.#chui_vt.removeAttribute("src");
-        this.#chui_vt.load();
+        this.#chuiVt.removeEventListener("play", this.#onPlay);
+        this.#chuiVt.removeEventListener("pause", this.#onPause);
+        this.#chuiVt.removeEventListener("timeupdate", this.#onTimeUpdate);
+        this.#chuiVt.removeEventListener("durationchange", this.#onDurationChange);
+        this.#chuiVt.removeEventListener("loadedmetadata", this.#onDurationChange);
+        this.#chuiVt.removeEventListener("progress", this.#onBuffered);
+        this.#chuiVpMain.removeEventListener("mouseenter", this.#onEnter);
+        this.#chuiVpMain.removeEventListener("mouseleave", this.#onLeave);
+        this.#chuiVpMain.removeEventListener("focusin", this.#onEnter);
+        this.#chuiVpMain.removeEventListener("focusout", this.#onLeave);
+        this.#chuiVt.removeAttribute("src");
+        this.#chuiVt.load();
         return this;
     }
 }

package/framework/components/chui_media/video_styles.css

@@ -11,11 +11,11 @@ chui_vp_main {
     display: block;
     width: 100%;
     border-radius: var(--radius_md);
-    background: var(--ap_main_background);
+    background: var(--player_background);
     border: 1px solid var(--border_color);
     overflow: hidden;
-    --seek-before-width: 0%;
-    --volume-before-width: 0%;
+    --seek_before_width: 0%;
+    --volume_before_width: 0%;
 }
 
 /* Кадр занимает всю ширину, а высоту считает соотношение сторон: прежде элемент показывал
@@ -50,7 +50,7 @@ chui_vp_panel {
        `pointer-events` гасим вместе с прозрачностью — иначе невидимая полоса ловит щелчки */
     opacity: 0;
     pointer-events: none;
-    transition: opacity var(--transition_time) var(--ease_out);
+    transition: opacity var(--motion_fast) var(--motion_ease);
 }
 
 chui_vp_main.vp_panel_open chui_vp_panel {
@@ -78,6 +78,14 @@ chui_vp_full_mode {
     border-radius: var(--radius_sm);
 }
 
+/* Кегль глифа — ключом плеера: у `chui_icon` есть своё правило (размер шапки),
+   поэтому размер задаётся значку, а не кнопке. Прежде число стояло в коде */
+chui_vp_play_pause chui_icon,
+chui_vp_volume_icon chui_icon,
+chui_vp_full_mode chui_icon {
+    font-size: var(--player_icon_size);
+}
+
 /* Главная кнопка — светлый круг с глифом цвета подложки, как у Audio: он адаптивен к схеме
    и не спорит с акцентом полосы прогресса */
 chui_vp_play_pause {
@@ -158,7 +166,7 @@ chui_vp_seek_buf {
     width: 0;
     height: var(--player_track_height);
     border-radius: var(--radius_pill);
-    background: var(--ap_slider_buf_background);
+    background: var(--player_slider_buffer_background);
     position: absolute;
     /* На те же полголовки ползунка, что и дорожка: иначе буфер выступал бы слева */
     inset-inline-start: 6px;
@@ -203,8 +211,8 @@ chui_vp_seek_buf {
 #chui_vp_seek {
     background-image: linear-gradient(
         to right,
-        var(--blue_prime_background) 0 var(--seek-before-width, 0%),
-        var(--ap_slider_background) var(--seek-before-width, 0%) 100%
+        var(--blue_prime_background) 0 var(--seek_before_width, 0%),
+        var(--player_slider_background) var(--seek_before_width, 0%) 100%
     );
 }
 
@@ -213,8 +221,8 @@ chui_vp_seek_buf {
 #chui_vp_volume {
     background-image: linear-gradient(
         to right,
-        var(--text_color) 0 var(--volume-before-width, 0%),
-        var(--ap_slider_background) var(--volume-before-width, 0%) 100%
+        var(--text_color) 0 var(--volume_before_width, 0%),
+        var(--player_slider_background) var(--volume_before_width, 0%) 100%
     );
 }
 
@@ -222,8 +230,8 @@ chui_vp_seek_buf {
 #chui_vp_volume:disabled {
     background-image: linear-gradient(
         to right,
-        var(--ap_slider_buf_background) 0 var(--volume-before-width, 0%),
-        var(--ap_slider_background) var(--volume-before-width, 0%) 100%
+        var(--player_slider_buffer_background) 0 var(--volume_before_width, 0%),
+        var(--player_slider_background) var(--volume_before_width, 0%) 100%
     );
 }
 
@@ -248,6 +256,14 @@ chui_vp_seek_buf {
     box-shadow: 0 0 0 2px var(--header_background);
     cursor: pointer;
     margin-top: calc((var(--player_track_height) - 9px) / 2);
+    /* Рост под курсором — тот же переход: своё время у ручки есть только здесь,
+       общее правило до псевдоэлемента бегунка не достаёт */
+    transition:
+        height var(--motion_fast) var(--motion_ease),
+        width var(--motion_fast) var(--motion_ease),
+        margin-top var(--motion_fast) var(--motion_ease),
+        background-color var(--motion_fast) var(--motion_ease),
+        box-shadow var(--motion_fast) var(--motion_ease);
 }
 
 /* У выключенной полосы ползунка нет: она и так приглушена заливкой */