itube-specs 0.0.920 → 0.0.922

package/assets/scss/base/_global.scss

@@ -82,15 +82,18 @@ summary::-webkit-details-marker {
   clip-path: inset(100%);
 }
 
+// Убрать элемент из потока целиком, в отличие от ._visually-hidden.
 ._hidden {
   display: none !important;
 }
 
 @for $i from 1 through 12 {
+  // Отбивка снизу: чётные значения 2…24px (._mb-8 = margin-bottom: 8px).
   ._mb-#{$i * 2} {
     margin-bottom: #{$i * 2}px;
   }
 
+  // Отбивка сверху: чётные значения 2…24px (._mt-8 = margin-top: 8px).
   ._mt-#{$i * 2} {
     margin-top: #{$i * 2}px;
   }

package/assets/scss/base/_loading.scss

@@ -1,5 +1,6 @@
 @use 'vars' as *;
 
+// Состояние загрузки блока: заблюренная подложка со спиннером поверх содержимого (::before/::after).
 ._loading {
   position: relative;
 

package/assets/scss/base/_utils.scss

@@ -1,21 +1,31 @@
 @use '../mixins/breakpoints' as *;
 
+// Виден только ниже xs (475px), на xs и шире скрыт.
 @include from-br(xs) { ._to-xs { display: none !important; } }
 
+// Виден только ниже sm (960px), на sm и шире скрыт.
 @include from-br(sm) { ._to-sm { display: none !important; } }
 
+// Виден только ниже md (1350px), на md и шире скрыт.
 @include from-br(md) { ._to-md { display: none !important; } }
 
+// Виден только ниже lg (1792px), на lg и шире скрыт.
 @include from-br(lg) { ._to-lg { display: none !important; } }
 
+// Виден с xs (475px) и шире, ниже скрыт.
 @include to-br(xs) { ._from-xs { display: none !important; } }
 
+// Виден с sm (960px) и шире, ниже скрыт.
 @include to-br(sm) { ._from-sm { display: none !important; } }
 
+// Виден с md (1350px) и шире, ниже скрыт.
 @include to-br(md) { ._from-md { display: none !important; } }
 
+// Виден с lg (1792px) и шире, ниже скрыт.
 @include to-br(lg) { ._from-lg { display: none !important; } }
 
+// Обрезка текста в N строк: число строк задаётся --line-clamp (по умолчанию 1),
+// выравнивание — --align, перенос — --word-break.
 ._truncate {
   display: -webkit-box !important;
   -webkit-line-clamp: var(--line-clamp, 1);

package/assets/scss/layout/_page.scss

@@ -1,15 +1,18 @@
 @use 'vars' as *;
 @use '../mixins' as *;
 
+// Корень страницы: колонка с вертикальными отступами. Вешается на корневой элемент в pages/**.
 ._page {
   @include page;
 }
 
+// Хлебные крошки. Свой верхний отступ нужен, когда крошки лежат вне ._page.
 ._breadcrumbs {
   margin-bottom: 24px;
   padding-top: 24px;
 }
 
+// Крошки на страницах с инфо-блоком — отбивка снизу меньше.
 ._breadcrumbs-info {
   margin-bottom: 16px;
   padding-top: 24px;
@@ -20,20 +23,24 @@
   padding-top: 0;
 }
 
+// Блок SEO-ссылок внизу страницы: прижат к низу и отбит линией.
 ._footer-links {
   @include page-footer-links;
 }
 
+// Заголовок страницы: font-lg, uppercase, 700.
 ._title {
   @include page-title;
 
   margin-bottom: 24px;
 }
 
+// Строка фильтров/навигации под заголовком — только отбивка снизу.
 ._nav-filter {
   margin-bottom: 32px;
 }
 
+// Центрирующий контейнер: боковые паддинги из --container-padding-inline, с md — max-width.
 ._container {
   width: 100%;
   margin: 0 auto;
@@ -44,6 +51,7 @@
   }
 }
 
+// Пагинация внизу листинга — только отбивка сверху.
 ._pagination {
   margin-top: 32px;
 }

package/assets/scss/mixins/_breakpoints.scss

@@ -60,9 +60,9 @@ $brkpnts: (
 }
 
 /**
-  Container query брейкпоинты
-  @include from-cq($width) { ... }
-  @include to-cq($width) { ... }
+  Container query брейкпоинты — меряют контейнер, а не окно. Требуют `container-type`
+  на предке; значение только в единицах, ключей из $brkpnts тут нет.
+  @include from-cq(400px) { ... }
  */
 @mixin from-cq($bp) {
   @container (min-width: #{$bp}) {
@@ -70,6 +70,9 @@ $brkpnts: (
   }
 }
 
+/**
+  @include to-cq(400px) { ... }
+ */
 @mixin to-cq($bp) {
   @container (max-width: #{$bp - 1px}) {
     @content;

package/assets/scss/mixins/_font-sizes.scss

@@ -1,58 +1,70 @@
+// 10px / 10px
 @mixin font-4xs {
   font-size: 10px;
   line-height: 1;
 }
 
+// 11px / 11px
 @mixin font-3xs {
   font-size: 11px;
   line-height: 1;
 }
 
+// 12px / 16px
 @mixin font-xs {
   font-size: 12px;
   line-height: 1.333;
 }
 
+// 13px / 19.5px
 @mixin font-2xs {
   font-size: 13px;
   line-height: 1.5;
 }
 
+// 14px / 20px
 @mixin font-sm {
   font-size: 14px;
   line-height: 1.429;
 }
 
+// 15px / 22.5px
 @mixin font-md {
   font-size: 15px;
   line-height: 1.5;
 }
 
+// 16px / 24px
 @mixin font-base {
   font-size: 16px;
   line-height: 1.5;
 }
 
+// 18px / 28px
 @mixin font-lg {
   font-size: 18px;
   line-height: 1.556;
 }
 
+// 20px / 28px
 @mixin font-xl {
   font-size: 20px;
   line-height: 1.4;
 }
 
+// 24px / 32px
 @mixin font-2xl {
   font-size: 24px;
   line-height: 1.333;
 }
 
+// 30px / 36px
 @mixin font-3xl {
   font-size: 30px;
   line-height: 1.2;
 }
 
+// 36px / 40px
 @mixin font-4xl {
   font-size: 36px;
   line-height: 1.111;

package/assets/scss/mixins/_page.scss

@@ -2,6 +2,8 @@
 @use 'font-sizes' as *;
 @use 'vars' as *;
 
+// Каркас страницы: колонка с вертикальными отступами. В разметке используется через
+// глобальный класс `._page` (layout/_page.scss), напрямую в компонентах не нужен.
 @mixin page {
   display: flex;
   flex-direction: column;
@@ -9,6 +11,7 @@
   padding-bottom: 24px;
 }
 
+// Заголовок страницы: font-lg, uppercase, 700. В разметке — глобальный класс `._title`.
 @mixin page-title {
   @include font-lg;
 
@@ -17,6 +20,8 @@
   font-weight: 700;
 }
 
+// Блок SEO-ссылок внизу страницы: прижат к низу (margin-top: auto) и отбит линией.
+// В разметке — глобальный класс `._footer-links`.
 @mixin page-footer-links {
   margin-top: auto;
   padding-top: 8px;

package/assets/scss/mixins/_video-card.scss

@@ -2,6 +2,7 @@
 @use 'font-sizes' as *;
 @use 'vars' as *;
 
+// Каркас карточки видео: колонка «постер + мета» с зазором 16px, контент прижат к верху.
 @mixin video-card {
   display: grid;
   row-gap: 16px;
@@ -32,6 +33,7 @@
   }
 }
 
+// Постер карточки: 16/9, скруглённый, с обрезкой — база для абсолютных бейджей поверх.
 @mixin video-card-poster {
   position: relative;
   aspect-ratio: 16/9;

package/assets/scss/themes/dark/_theme.scss

@@ -720,6 +720,7 @@ $player-menu-option-bar--active: $color-zinc-400;    // bg-zinc-400
 $player-menu-row-bg--hover: $mono-white-10;
 $player-menu-option-bg--hover: $mono-white-5;        // hover:bg-white/5
 $player-menu-toggle-bg--active: $color-indigo-500;   // switch on: bg-indigo-500
+$player-center-label-shadow: $color-black-50;   // мета в центре бара поверх видео
 
 // accordion (scene types)
 $player-menu-acc-border: $color-zinc-800-60;         // border-zinc-800/60

package/assets/scss/themes/light/_theme.scss

@@ -771,6 +771,7 @@ $player-menu-option-bar--active: $color-gray-400;    // bg-zinc-400
 $player-menu-row-bg--hover: $mono-white-10;
 $player-menu-option-bg--hover: $mono-white-5;        // hover:bg-white/5
 $player-menu-toggle-bg--active: $color-indigo-500;   // switch on: bg-indigo-500
+$player-center-label-shadow: $color-black-50;   // мета в центре бара поверх видео
 
 // accordion (scene types)
 $player-menu-acc-border: $color-slate-700;         // border-zinc-800/60

package/components/player/core.vue

@@ -208,7 +208,7 @@ function nextPreviewMeta(card: IVideoCard): PreviewMetaItem[] {
     { text: card.channelName || t('user_uploaded'), icon: CHANNEL_META_ICON },
   ];
   if (!props.hideViews && card.views != null) {
-    meta.push(`${n(card.views, 'compact')} ${t('views')}`);
+    meta.push(`${n(card.views, 'compact')} ${t('views', card.views)}`);
   }
   return meta;
 }
@@ -244,6 +244,32 @@ watch(() => props.data.videoUrl, () => {
   source.value = buildSource();
 });
 
+/**
+ * Центр контрол-бара: «N просмотров · 3 месяца назад» вместо названия текущей
+ * сцены (опция `controls.centerLabel`, плеер 0.11.0+). Больше этой меты на
+ * странице нигде нет — под плеером её не выводим.
+ *
+ * Отдаём СВОЙ элемент, а не строку: кастомный центр плеер рисует один раз при
+ * инициализации и больше не трогает, а ролик на странице меняется без пересоздания
+ * плеера (`externalAdvance` → `player.load()`), так что строка осталась бы от
+ * предыдущего ролика. Свой элемент мы просто переписываем сами.
+ */
+const centerLabel = shallowRef<HTMLElement | null>(null);
+
+if (import.meta.client) {
+  centerLabel.value = document.createElement('span');
+}
+
+watchEffect(() => {
+  if (!centerLabel.value) return;
+
+  const parts: string[] = [];
+  if (props.data.views != null) parts.push(`${n(props.data.views, 'compact')} ${t('views', props.data.views)}`);
+  if (props.data.created) parts.push(useFormatTimeAgo(props.data.created, locale.value));
+
+  centerLabel.value.textContent = parts.join(' · ');
+});
+
 const options = computed<Omit<PlayerOptions, 'source'>>(() => ({
   playOnInit: true,
   muted: false,
@@ -265,6 +291,8 @@ const options = computed<Omit<PlayerOptions, 'source'>>(() => ({
     scenes: false,
     // Порядок правого кластера: sceneTypes → gear (настройки) → fullscreen (последней).
     order: ['sceneTypes', 'gear', 'fullscreen'],
+    // Центр бара — мета ролика вместо названия текущей сцены (см. centerLabel выше).
+    centerLabel: centerLabel.value || false,
   },
   icons: PLAYER_ICONS,
   // Заголовок дропдауна выбора типа сцен (дефолт «Scene type»).
@@ -300,4 +328,12 @@ async function loadAdConfig(): Promise<AdsOptions | undefined> {
     border-radius: 0;
   }
 }
+
+// Мета ролика в центре бара: по макету белая с тенью и средней жирностью,
+// у плеера по умолчанию — приглушённая и без тени.
+.player-core .imp-controls__chapter {
+  font-weight: 500;
+  opacity: 1;
+  filter: drop-shadow(0 1px 2px $player-center-label-shadow);
+}
 </style>

package/package.json

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

package/server/middleware/x-domain.ts

@@ -0,0 +1,19 @@
+/**
+ * Гарантирует `X-Domain` у запросов к BFF.
+ *
+ * Бекенд разруливает сайты по этому заголовку — у stripcash-ручек к домену
+ * привязан ещё и ключ провайдера, поэтому без него они отвечают 500
+ * («mux: route doesn't have a host»). Заголовок ставит `ApiHelper`, но не каждый
+ * вызов идёт через него: блок вебкамов, например, дёргает свою ручку обычным
+ * `useFetch`, и тогда до бекенда доезжали только проксированные заголовки запроса
+ * страницы — на локальной машине это прощалось, а за прокси на стенде ломалось.
+ *
+ * Значение берём из runtimeConfig сайта и НЕ перебиваем то, что уже пришло.
+ */
+export default defineEventHandler((event) => {
+  if (!event.path.startsWith('/api/') && !event.path.startsWith('/bff/')) return;
+  if (event.node.req.headers['x-domain']) return;
+
+  const xDomain = useRuntimeConfig(event).public.xDomain;
+  if (xDomain) event.node.req.headers['x-domain'] = String(xDomain);
+});