itube-specs 0.0.821 → 0.0.823

package/components/player/core.vue

@@ -14,12 +14,19 @@
     @ended="emit('end')"
     @advancerequest="onAdvanceRequest"
     @sourcechange="onSourceChange"
+    @menurequest="onMenuRequest"
+  />
+
+  <!-- Внешнее меню плеера в нашем ui-popup (только мобила — menus: 'external-mobile'). -->
+  <PlayerMenu
+    v-model:open="menuOpen"
+    :request="menuRequest"
   />
 </template>
 
 <script setup lang="ts">
 import { ITubePlayer } from 'itube-modern-player/vue';
-import type { Player, PlayerOptions, VideoSource, LocaleCode, AdsOptions, PreviewMetaItem, SceneGroup } from 'itube-modern-player';
+import type { Player, PlayerOptions, VideoSource, LocaleCode, AdsOptions, PreviewMetaItem, SceneGroup, MenuRequestPayload } from 'itube-modern-player';
 import { AdvertsHelper } from '../../utils/adverts-helper';
 import { AdSpotType, ThumbSize  } from '../../runtime';
 import type { IVideoData, IVideoCard } from '../../types';
@@ -56,6 +63,16 @@ const { t, n, locale } = useI18n();
 
 const playerRef = ref<InstanceType<typeof ITubePlayer> & { player: Player | null }>();
 
+// Внешнее меню (menus: 'external-mobile'): по нажатию меню-кнопки плеер эмитит модель,
+// а рисуем её мы (PlayerMenu → ui-popup). menurequest прилетает на каждое нажатие.
+const menuRequest = shallowRef<MenuRequestPayload | null>(null);
+const menuOpen = ref(false);
+
+function onMenuRequest(request: MenuRequestPayload): void {
+  menuRequest.value = request;
+  menuOpen.value = true;
+}
+
 // Плеер эмитит advancerequest 'ended' только при включённом тумблере Autoplay, а на
 // кнопку next — 'next'. Значит play после свапа нужен ТОЛЬКО когда переход инициировали
 // мы (next / автопереход), а не когда source пересобрался по другой причине (сменилось
@@ -219,6 +236,8 @@ const options = computed<Omit<PlayerOptions, 'source'>>(() => ({
   },
   pauseScreen: false,
   language: playerLanguage.value,
+  // Десктоп — нативные попапы плеера; мобила (≤767px) — эмитит menurequest, рисуем сами.
+  menus: 'external-mobile',
   controls: {
     seekButtons: { label: (seconds) => String(seconds) },
     playlistButton: false,
@@ -263,27 +282,4 @@ async function loadAdConfig(): Promise<AdsOptions | undefined> {
     border-radius: 0;
   }
 }
-
-// Хост (.player-core) уже клипует по $radius-lg — снимаем собственный radius заглушки
-// пакета (inline 8px), иначе двойное скругление даёт чёрные уголки на свопе.
-.player-core .imp-player--lazy {
-  border-radius: 0 !important;
-}
-
-// Пиксель-парити SSR-заглушки с реальной центральной кнопкой. Пакет форсит
-// inlineStyles:true (84px, --imp-accent-цвет), а прокинуть наши размеры/цвет через
-// styling нельзя — styling.themeColor перебил бы наш --imp-accent на живом плеере.
-// Поэтому бьём инлайн !important'ом (совпадает с .imp-center-btn--play в main.vue).
-.player-core .imp-player--lazy .imp-poster__play {
-  width: 80px !important;
-  height: 80px !important;
-  padding: 22px !important;
-  color: $video-play-btn-icon !important;
-  background: $video-play-btn-bg !important;
-}
-
-.player-core .imp-player--lazy .imp-poster__play svg {
-  width: 100%;
-  height: 100%;
-}
 </style>

package/components/player/main.vue

@@ -131,410 +131,4 @@ const { nextVideo, goNext } = useNextVideo({
     grid-row: 2;
   }
 }
-
-// Оверрайды иконок/кнопок плеера (itube-modern-player). Держим здесь, а не в
-// ленивом core.vue: CSS пакета грузится по интеракции, наши стили в бандле страницы
-// присутствуют до неё и выигрывают в каскаде сразу (без вспышки дефолтного акцента).
-.player-main__player .imp-player {
-  --imp-accent: #{$video-status-accent};
-}
-
-// Центральная и постерная play-кнопки — один в один (постерную показывает плеер
-// во время load(), при свопе с центральной был скачок размера/паддинга).
-// Локальный --imp-accent = наш цвет: пакет рисует фон через var(--imp-accent) и
-// анимирует его (transition: background) — совпадение значений убирает вспышку.
-.player-main__player .imp-center-btn.imp-center-btn--play,
-.player-main__player .imp-poster .imp-poster__play {
-  $size: 80px;
-
-  --imp-accent: #{$video-play-btn-bg};
-
-  width: $size;
-  height: $size;
-  padding: 22px;
-  color: $video-play-btn-icon;
-  background: $video-play-btn-bg;
-
-  @include hover(background) {
-    background: $video-play-btn-bg--hover;
-  }
-}
-
-.player-main__player .imp-btn.imp-btn--play {
-  @include hover(color) {
-    color: $video-play-console-play-btn-bg--hover;
-    background-color: transparent;
-  }
-}
-
-.player-main__player button.imp-btn {
-  color: $video-play-console-btn-bg;
-
-  @include hover(color) {
-    background-color: transparent;
-    color: $video-play-console-btn-bg--hover;
-  }
-}
-
-.player-main__player .imp-btn.imp-btn--next {
-  padding: 8px;
-}
-
-// Последний ролик последней страницы related — кнопки перехода на следующий скрыты.
-.player-main__player.--playlist-end .imp-btn--next,
-.player-main__player.--playlist-end .imp-center-btn--next {
-  display: none;
-}
-
-// Все кнопки нижнего бара (кроме play) — иконка 20px. Без этого svg тянется на 100%
-// кнопки (правило пакета .imp-btn svg).
-.player-main__player .imp-btn:not(.imp-btn--play, .imp-poster__play) svg {
-  width: 20px;
-  height: 20px;
-}
-
-// Шестерёнка настроек: когда открыто её меню (рядом появляется .imp-menu--wide) —
-// поворачиваем иконку на 45°. transform у .imp-btn уже с transition в пакете.
-.player-main__player .imp-btn--settings svg {
-  display: block;
-  transform-box: fill-box;
-  transform-origin: center;
-  transition: var(--transition) transform;
-}
-
-.player-main__player .imp-btn--settings:has(~ .imp-menu--wide) svg {
-  transform: rotate(45deg);
-}
-
-// Перемотка назад — та же иконка, что и вперёд, отражённая по горизонтали.
-// Зеркалим только svg, число .imp-seek-num (сосед svg) остаётся читаемым.
-.player-main__player .imp-btn--seek-back svg,
-.player-main__player .imp-center-btn--seek-back svg {
-  transform: scaleX(-1);
-}
-
-// Число шага (15) — внутрь круга иконки, по центру. Кнопки делаем relative,
-// число позиционируем поверх svg абсолютно.
-.player-main__player .imp-btn--seek-back,
-.player-main__player .imp-btn--seek-forward,
-.player-main__player .imp-center-btn--seek-back,
-.player-main__player .imp-center-btn--seek-forward {
-  position: relative;
-}
-
-.player-main__player .imp-center-btn.imp-center-btn--seek-back,
-.player-main__player .imp-center-btn.imp-center-btn--seek-forward {
-  width: 48px;
-  height: 48px;
-  background: $video-play-btn-bg;
-  border-radius: $radius-full;
-
-  @include hover(background) {
-    background: $video-play-btn-bg--hover;
-  }
-}
-
-.player-main__player .imp-center-btn--seek-back svg,
-.player-main__player .imp-center-btn--seek-forward svg {
-  width: 36px;
-  height: 36px;
-}
-
-.player-main__player .imp-btn--seek-back .imp-seek-num,
-.player-main__player .imp-btn--seek-forward .imp-seek-num,
-.player-main__player .imp-center-btn--seek-back .imp-seek-num,
-.player-main__player .imp-center-btn--seek-forward .imp-seek-num {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  font-size: 10px;
-  font-weight: 700;
-  transform: translate(-50%, -50%);
-}
-
-.player-main__player .imp-controls__group {
-  column-gap: 8px;
-}
-
-.player-main__player .imp-next-preview {
-  width: 320px;
-  bottom: 64px;
-  left: 64px;
-  padding: 0;
-  overflow: hidden;
-  border: 1px solid $video-play-preview-border;
-  border-radius: $radius-xl;
-  background-color: $video-play-preview-bg;
-  backdrop-filter: blur($blur-md);
-  transform-origin: bottom left;
-  animation: next-preview-in 200ms ease;
-
-  // Скрим над «NEXT VIDEO» — читабельность поверх светлой обложки (kicker выше по DOM).
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 48px;
-    z-index: $z-index-plus;
-    background: linear-gradient(to bottom, $video-play-preview-scrim, transparent);
-  }
-}
-
-.player-main__player .imp-next-preview__kicker {
-  @include font-3xs;
-
-  position: absolute;
-  top: 8px;
-  left: 12px;
-  color: $video-play-preview-title;
-  font-weight: 600;
-  letter-spacing: var(--tracking-widest);
-  z-index: $z-index-plus;
-}
-
-.player-main__player .imp-next-preview__duration {
-  @include font-3xs;
-
-  bottom: 8px;
-  right: 8px;
-  padding: 2px 6px;
-  color: $video-play-preview-title;
-  background: $video-play-preview-duration-bg;
-  border-radius: $radius-small;
-  font-weight: 500;
-  font-variant-numeric: tabular-nums;
-}
-
-.player-main__player .imp-next-preview__thumb {
-  border-radius: 0;
-  border-radius: $radius-xl $radius-xl 0 0;
-}
-
-.player-main__player .imp-next-preview__title {
-  @include font-sm;
-
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-  font-weight: 600;
-  padding: 12px 12px 0;
-  margin-top: 0;
-  color: $video-play-preview-title;
-}
-
-.player-main__player .imp-next-preview__meta {
-  @include font-xs;
-
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  opacity: 1;
-  padding: 0 12px 12px;
-  margin-top: 6px;
-  color: $video-play-preview-meta;
-}
-
-// Аватар канала — кружок 16px (svg-круг из previewMeta), цвет отдельным токеном.
-.player-main__player .imp-next-preview__meta-icon {
-  width: 16px;
-  height: 16px;
-  margin-right: 6px;
-  vertical-align: middle;
-  color: $video-play-preview-avatar-bg;
-}
-
-.player-main__player .imp-next-preview__meta-icon svg {
-  width: 100%;
-  height: 100%;
-}
-
-// Разделитель чанков meta: пакет рисует «·», нам нужен «|». Рисуем прямоугольником,
-// а не символом — глиф «|» позиционируется шрифтом и всегда чуть смещён. margin слева;
-// справа отступ даёт flex-gap контейнера — так «|» ровно по центру между чанками.
-.player-main__player .imp-next-preview__meta-chunk:not(:last-child)::after {
-  content: '';
-  display: inline-block;
-  width: 1px;
-  height: 0.85em;
-  margin-left: 6px;
-  vertical-align: middle;
-  background: $video-play-preview-separator;
-}
-
-@keyframes next-preview-in {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-}
-
-.player-main__player .imp-controls__time {
-  @include font-xs;
-}
-
-.player-main__player .imp-layer__bottom {
-  padding: 32px 16px 10px;
-}
-
-.player-main__player .imp-controls {
-  gap: 0;
-}
-
-.player-main__player .imp-menu--wide .imp-menu__item:not(.imp-menu__back, .imp-menu__toggle) {
-  justify-content: center;
-}
-
-.player-main__player .imp-menu__back {
-  color: $video-play-menu-back-text;
-  margin-bottom: 0;
-  border: none;
-}
-
-.player-main__player .imp-btn.imp-btn--scene-types {
-  @include to-br(sm) {
-    width: auto;
-  }
-}
-
-.player-main__player .imp-menu {
-  min-width: 224px;
-  color: $video-play-menu-label;
-  padding: 0;
-  background-color: $video-play-menu-bg;
-  border: 1px solid $video-play-menu-border;
-  border-radius: $radius-xl;
-  backdrop-filter: blur($blur-md);
-  box-shadow: $video-play-menu-shadow;
-
-  @include to-br(sm) {
-    bottom: 4px;
-    max-height: unset;
-  }
-
-  @include from-br(sm) {
-    max-height: 400px;
-  }
-}
-
-.player-main__player .imp-menu__title {
-  display: none;
-}
-
-// Заголовок показываем только у меню типов сцен (единственное с иконками пунктов;
-// у gear-меню строки без .imp-menu__icon). Стиль — под дизайн, а не дефолтный uppercase.
-.player-main__player .imp-menu:has(.imp-menu__icon) .imp-menu__title {
-  @include font-sm;
-
-  display: block;
-  padding: 12px;
-  color: $video-play-menu-label;
-  font-weight: 500;
-  letter-spacing: normal;
-  text-transform: none;
-  opacity: 1;
-}
-
-// Иконка типа сцен в пункте меню — 16px (как иконки по проекту), цвет по currentColor.
-.player-main__player .imp-menu__icon {
-  width: 16px;
-  height: 16px;
-}
-
-.player-main__player .imp-menu__label {
-  color: $video-play-menu-label;
-}
-
-.player-main__player .imp-menu__row.imp-menu__value {
-  color: $video-play-menu-value;
-  opacity: 1;
-}
-
-.player-main__player .imp-menu__row .imp-menu__chevron {
-  margin-left: 0;
-  color: $video-play-menu-chevron;
-  opacity: 1;
-}
-
-.player-main__player .imp-menu__row {
-  column-gap: 4px;
-}
-
-.player-main__player .imp-menu__item {
-  padding: 12px 16px;
-  border-radius: 0;
-  color: $video-play-item-text;
-
-  @include hover(background-color) {
-    background-color: $video-play-item--hover;
-  }
-}
-
-.player-main__player .imp-menu__item.imp-menu__item--active {
-  position: relative;
-  color: $video-play-item-text--active;
-  background-color: $video-play-item--active;
-
-  &::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 2px;
-    height: 20px;
-    right: 0;
-    border-radius: $radius-md;
-    background-color: $video-play-item-active-decorate;
-  }
-}
-
-.player-main__player .imp-progress__tooltip {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  padding: 0;
-  border-radius: $radius-xl;
-  overflow: hidden;
-  border: 1px solid $video-play-progress-tooltip-border;
-  background-color: $video-play-progress-tooltip-bg;
-  backdrop-filter: blur($blur-md);
-}
-
-// Размер тумбы задаёт пакет инлайном по тайлу VTT — фикс-ширину/aspect не навязываем
-// (иначе тумба вылезает); только не даём выйти за тултип.
-.player-main__player .imp-progress__thumb {
-  grid-column: 1/-1;
-  max-width: 100%;
-}
-
-// Полоса подписи (chapter/time) — пакет для --thumb даёт ей свой фон #26262d.
-// Совмещаем с фоном карточки, чтобы поверхность была единой, как в дизайне.
-.player-main__player .imp-progress__tooltip--thumb .imp-progress__caption {
-  background: $video-play-progress-tooltip-bg;
-}
-
-.player-main__player .imp-progress__tooltip-chapter {
-  @include font-3xs;
-
-  grid-column: 1;
-  min-width: 0;
-  padding: 6px 8px;
-  font-weight: 500;
-  letter-spacing: 0.025em;
-}
-
-.player-main__player .imp-progress__tooltip-time {
-  @include font-3xs;
-
-  grid-column: 2;
-  justify-self: end;
-  padding: 6px 8px;
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-}
-
-.player-main__player .imp-progress__track {
-  column-gap: 4px;
-}
 </style>

package/components/player/menu.vue

@@ -0,0 +1,406 @@
+<!-- Внешнее меню плеера (menus: 'external-mobile'): плеер на мобиле не рисует свои
+     попапы, а эмитит menurequest с готовой моделью (настройки / тайм-коды / ⋯) и живыми
+     колбэками, которые сами применяют выбор. Рендерим её в нашем ui-popup (--sheet).
+     Дрилл «Настройки → Скорость/Качество» — через стек drill с кнопкой «назад». -->
+<template>
+  <UiPopup
+    v-if="open && request"
+    v-model="open"
+    sheet
+    :back="!!drill"
+    class="player-menu"
+    @back="drill = null"
+  >
+    <template #title>
+      {{ drill?.label ?? request.title }}
+    </template>
+
+    <!-- Дрилл: опции одной настройки (скорость / качество / субтитры) -->
+    <ul
+      v-if="drill"
+      class="player-menu__options"
+    >
+      <li
+        v-for="option in drill.options"
+        :key="option.value"
+      >
+        <button
+          :class="{ '--active': option.active }"
+          class="player-menu__option"
+          type="button"
+          @click="pick(drill.select, option.value)"
+        >
+          {{ option.label }}
+        </button>
+      </li>
+    </ul>
+
+    <!-- Шестерёнка: тоглы + строки-дриллы -->
+    <ul
+      v-else-if="request.kind === 'settings'"
+      class="player-menu__rows"
+    >
+      <li
+        v-for="entry in request.entries"
+        :key="entry.key"
+        class="player-menu__row"
+      >
+        <div
+          v-if="entry.toggle"
+          class="player-menu__toggle-row"
+        >
+          <span class="player-menu__label">{{ entry.label }}</span>
+          <UiToggle
+            :model-value="entry.toggle.value"
+            @update:model-value="entry.toggle.set(!!$event)"
+          />
+        </div>
+        <button
+          v-else-if="entry.options && entry.select"
+          class="player-menu__row-btn"
+          type="button"
+          @click="drill = { label: entry.label, options: entry.options, select: entry.select }"
+        >
+          <span class="player-menu__label">{{ entry.label }}</span>
+          <span class="player-menu__value">
+            {{ entry.value }}
+            <UiIcon
+              name="angle-right"
+              size="16"
+            />
+          </span>
+        </button>
+        <div
+          v-else
+          class="player-menu__toggle-row"
+        >
+          <span class="player-menu__label">{{ entry.label }}</span>
+          <span class="player-menu__value">{{ entry.value }}</span>
+        </div>
+      </li>
+    </ul>
+
+    <!-- Тайм-коды: аккордеон типов сцен -->
+    <ul
+      v-else-if="request.kind === 'sceneTypes'"
+      class="player-menu__groups"
+    >
+      <li
+        v-for="group in request.groups"
+        :key="group.id"
+      >
+        <details
+          :open="group.active"
+          class="player-menu__group"
+          @toggle="onGroupToggle($event, group)"
+        >
+          <summary class="player-menu__summary">
+            <span
+              v-if="iconSvg(group.icon)"
+              class="player-menu__summary-icon"
+              v-html="iconSvg(group.icon)"
+            />
+            <span class="player-menu__summary-title">{{ group.title }}</span>
+            <UiIcon
+              name="angle-right"
+              size="16"
+              class="player-menu__summary-arrow"
+            />
+          </summary>
+          <ul class="player-menu__scenes">
+            <li
+              v-for="scene in group.scenes"
+              :key="scene.start"
+            >
+              <button
+                :class="{ '--current': scene.current }"
+                class="player-menu__scene"
+                type="button"
+                @click="selectScene(group.id, scene.start)"
+              >
+                <span class="player-menu__scene-label">{{ scene.label }}</span>
+                <span class="player-menu__scene-time">{{ scene.time }}</span>
+              </button>
+            </li>
+          </ul>
+        </details>
+      </li>
+    </ul>
+
+    <!-- ⋯ и одиночные меню (скорость/качество/субтитры, если вынесены кнопками) -->
+    <template v-else-if="request.kind === 'menu'">
+      <section
+        v-for="(section, index) in request.sections"
+        :key="index"
+        class="player-menu__section"
+      >
+        <h3
+          v-if="section.title"
+          class="player-menu__section-title"
+        >
+          {{ section.title }}
+        </h3>
+        <ul class="player-menu__options">
+          <li
+            v-for="item in section.items"
+            :key="item.value"
+          >
+            <button
+              :class="{ '--active': item.active }"
+              class="player-menu__option"
+              type="button"
+              @click="pick(section.select, item.value)"
+            >
+              {{ item.label }}
+            </button>
+          </li>
+        </ul>
+      </section>
+    </template>
+  </UiPopup>
+</template>
+
+<script setup lang="ts">
+import type { MenuRequestPayload } from 'itube-modern-player';
+
+type SceneGroup = Extract<MenuRequestPayload, { kind: 'sceneTypes' }>['groups'][number];
+type SettingsEntry = Extract<MenuRequestPayload, { kind: 'settings' }>['entries'][number];
+
+// Иконку типа сцен рендерим только когда это сырой svg (мы отдаём именно {svg} из core.vue).
+function iconSvg(icon?: SceneGroup['icon']): string | undefined {
+  return icon && typeof icon === 'object' && 'svg' in icon ? icon.svg : undefined;
+}
+
+interface Drill {
+  label: string
+  options: NonNullable<SettingsEntry['options']>
+  select: (value: string) => void
+}
+
+const props = defineProps<{
+  request: MenuRequestPayload | null
+}>();
+
+const open = defineModel<boolean>('open', { required: true });
+
+// Стек дрилла «Настройки → опция». Сбрасываем на каждый новый запрос (плеер эмитит
+// menurequest на каждое нажатие кнопки — открываем корень меню заново).
+const drill = shallowRef<Drill | null>(null);
+watch(() => props.request, () => {
+  drill.value = null;
+});
+
+// select у плеера сам делает setRate/seek/play и шлёт свои события — руками ничего не
+// дёргаем, просто закрываем шторку.
+function pick(select: (value: string) => void, value: string): void {
+  select(value);
+  open.value = false;
+}
+
+function selectScene(groupId: string, start: number): void {
+  if (props.request?.kind !== 'sceneTypes') return;
+  props.request.select(groupId, start);
+  open.value = false;
+}
+
+// Раскрытие группы = смена активного типа сцен (native ведёт себя так же).
+function onGroupToggle(event: Event, group: SceneGroup): void {
+  if (props.request?.kind !== 'sceneTypes') return;
+  if ((event.target as HTMLDetailsElement).open && !group.active) {
+    props.request.activate(group.id);
+  }
+}
+</script>
+
+<style lang="scss">
+// Фон шторки под нативную (bg-zinc-900); шапка/бордеры ui-popup уже совпадают (#0d0d0d, zinc-800).
+.player-menu .ui-popup__wrapper,
+.player-menu .ui-popup__content {
+  background-color: $player-menu-bg;
+}
+
+.player-menu__rows,
+.player-menu__groups,
+.player-menu__options {
+  display: flex;
+  flex-direction: column;
+}
+
+.player-menu__row + .player-menu__row {
+  border-top: 1px solid $player-menu-row-border;
+}
+
+.player-menu__toggle-row,
+.player-menu__row-btn {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  width: 100%;
+  min-height: 52px;
+  padding: 8px 20px;
+}
+
+.player-menu__row-btn {
+  @include hover(background-color) {
+    background-color: $player-menu-row-bg--hover;
+  }
+}
+
+.player-menu__label {
+  @include font-sm;
+
+  color: $player-menu-row-text;
+}
+
+.player-menu__value {
+  @include font-sm;
+
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: $player-menu-value;
+}
+
+.player-menu__option {
+  @include font-sm;
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 48px;
+  padding: 8px 20px;
+  color: $player-menu-option-text;
+
+  @include hover(background-color) {
+    background-color: $player-menu-option-bg--hover;
+  }
+}
+
+.player-menu__option.--active {
+  background-color: $player-menu-option-bg--active;
+  color: $player-menu-option-text--active;
+  font-weight: 500;
+}
+
+.player-menu__option.--active::before {
+  content: '';
+  position: absolute;
+  inset-block: 0;
+  left: 0;
+  width: 2px;
+  background-color: $player-menu-option-bar--active;
+}
+
+.player-menu__groups > li + li {
+  border-top: 1px solid $player-menu-acc-border;
+}
+
+.player-menu__summary {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 52px;
+  padding: 13px 20px;
+  color: $player-menu-acc-head-text;
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+
+  &::-webkit-details-marker {
+    display: none;
+  }
+}
+
+.player-menu__group[open] .player-menu__summary {
+  color: $player-menu-acc-head-text--open;
+}
+
+.player-menu__summary-icon {
+  display: grid;
+  place-content: center;
+  color: $player-menu-icon;
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+.player-menu__summary-title {
+  @include font-sm;
+
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.player-menu__summary-arrow {
+  flex-shrink: 0;
+  color: $player-menu-icon;
+  transition: transform var(--transition);
+}
+
+.player-menu__group[open] .player-menu__summary-arrow {
+  transform: rotate(90deg);
+}
+
+.player-menu__scene {
+  @include font-sm;
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  width: 100%;
+  min-height: 44px;
+  padding: 10px 20px 10px 48px;
+  color: $player-menu-scene-text;
+
+  @include hover(background-color, color) {
+    background-color: $player-menu-scene-bg--hover;
+    color: $player-menu-scene-text--current;
+  }
+}
+
+.player-menu__scene.--current {
+  background-color: $player-menu-scene-bg--current;
+  color: $player-menu-scene-text--current;
+  font-weight: 500;
+  box-shadow: inset 3px 0 $player-menu-scene-bar--current;
+}
+
+.player-menu__scene-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.player-menu__scene-time {
+  @include font-xs;
+
+  flex-shrink: 0;
+  font-variant-numeric: tabular-nums;
+  color: $player-menu-scene-time;
+}
+
+.player-menu__scene.--current .player-menu__scene-time {
+  color: $player-menu-scene-time--current;
+}
+
+.player-menu__section + .player-menu__section {
+  border-top: 1px solid $player-menu-row-border;
+}
+
+.player-menu__section-title {
+  @include font-xs;
+
+  padding: 12px 20px 4px;
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-wider);
+  color: $player-menu-section-title;
+}
+</style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "itube-specs",
   "type": "module",
-  "version": "0.0.821",
+  "version": "0.0.823",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {