itube-specs 0.0.820 → 0.0.822

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>