itube-specs 0.0.919 → 0.0.921

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
@@ -1059,8 +1060,8 @@ $document-link: $color-indigo-400;
 $document-link--hover: $color-indigo-300;
 
 // ─── Вебкам-блок ───
-$webcam-header-icon: $color-white;
-$webcam-header-icon-bg: $color-white-10;
+$webcam-icon-text: $color-white;
+$webcam-icon-bg: $color-white-10;
 $webcam-header-promo-text: $color-white;
 $webcam-header-promo-bg: $color-indigo-600;
 $webcam-header-promo-bg--hover: $color-indigo-500;
@@ -1072,12 +1073,15 @@ $webcam-counters-language-bg: $color-zinc-800-70;
 $card-webcam-poster-bg: $color-zinc-800;
 $card-webcam-online-dot: $color-emerald-400;
 $card-webcam-online-ring: $color-black-42;
-$card-webcam-new-text: $color-white-90;
-$card-webcam-new-bg: $color-black-42;
-$card-webcam-new-border: $color-white-25;
+$card-webcam-badge-text: $color-white-90;
+$card-webcam-badge-bg: $color-black-45;
+$card-webcam-badge-border: $color-white-25;
+$card-webcam-badge-shadow: $color-black-90;
 $card-webcam-goal-text: $color-white;
 $card-webcam-goal-label: $color-zinc-400;
 $card-webcam-goal-percent: $color-white-70;
+$card-webcam-goal-plain-text: $color-zinc-300;
+$card-webcam-goal-plain-percent: $color-zinc-400;
 $card-webcam-goal-track-bg: $color-white-15;
 $card-webcam-goal-fill-bg: $color-emerald-400;
 $card-webcam-goal-shade-from: $color-black-95;
@@ -1090,6 +1094,28 @@ $card-webcam-tag-text: $color-zinc-300;
 $card-webcam-tag-bg: $color-zinc-800;
 $card-webcam-tag-text--hover: $color-white;
 $card-webcam-tag-bg--hover: $color-zinc-700;
+$page-webcams-divider: $color-zinc-700;
+$page-webcams-control-bg: $color-zinc-800-30;
+$page-webcams-control-border: $color-zinc-700-30;
+$page-webcams-control-text: $color-white;
+
+// ─── Switcher ───
+$switcher-bg: $color-zinc-900-80;
+$switcher-border: $color-zinc-800;
+$switcher-text: $color-zinc-400;
+$switcher-text--hover: $color-white;
+$switcher-text--active: $color-white;
+$switcher-bg--active: $color-indigo-600;
+$switcher-icon: $color-zinc-500;
+$switcher-icon--active: $color-emerald-400;
+$switcher-subtitle: $color-zinc-600;
+$switcher-subtitle--active: $color-white-60;
+
+// ─── Filter: сброс всех фильтров в облаке чипсов ───
+$filter-model-clear-text: $color-zinc-500;
+$filter-model-clear-text--hover: $color-white;
+
+// ─── Вебкам-карточка (продолжение) ───
 $card-webcam-languages-border: $color-white-20;
 $card-webcam-languages-fallback-bg: $color-zinc-800;
 $card-webcam-languages-fallback-icon: $color-zinc-300;

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
@@ -1087,8 +1088,8 @@ $document-link: $color-indigo-400;
 $document-link--hover: $color-indigo-300;
 
 // ─── Вебкам-блок ───
-$webcam-header-icon: $color-gray-700;
-$webcam-header-icon-bg: $color-gray-200;
+$webcam-icon-text: $color-gray-700;
+$webcam-icon-bg: $color-gray-200;
 $webcam-header-promo-text: $color-white;
 $webcam-header-promo-bg: $color-indigo-600;
 $webcam-header-promo-bg--hover: $color-indigo-500;
@@ -1100,12 +1101,15 @@ $webcam-counters-language-bg: $color-gray-200;
 $card-webcam-poster-bg: $color-gray-200;
 $card-webcam-online-dot: $color-emerald-500;
 $card-webcam-online-ring: $color-black-25;
-$card-webcam-new-text: $color-white;
-$card-webcam-new-bg: $color-black-42;
-$card-webcam-new-border: $color-white-25;
+$card-webcam-badge-text: $color-white;
+$card-webcam-badge-bg: $color-black-45;
+$card-webcam-badge-border: $color-white-25;
+$card-webcam-badge-shadow: $color-black-90;
 $card-webcam-goal-text: $color-white;
 $card-webcam-goal-label: $color-gray-300;
 $card-webcam-goal-percent: $color-white-70;
+$card-webcam-goal-plain-text: $color-gray-700;
+$card-webcam-goal-plain-percent: $color-gray-500;
 $card-webcam-goal-track-bg: $color-white-15;
 $card-webcam-goal-fill-bg: $color-emerald-400;
 $card-webcam-goal-shade-from: $color-black-95;
@@ -1118,6 +1122,28 @@ $card-webcam-tag-text: $color-gray-700;
 $card-webcam-tag-bg: $color-gray-200;
 $card-webcam-tag-text--hover: $color-gray-950;
 $card-webcam-tag-bg--hover: $color-gray-300;
+$page-webcams-divider: $color-gray-300;
+$page-webcams-control-bg: $color-gray-100;
+$page-webcams-control-border: $color-gray-200;
+$page-webcams-control-text: $color-gray-950;
+
+// ─── Switcher ───
+$switcher-bg: $color-gray-100;
+$switcher-border: $color-gray-200;
+$switcher-text: $color-gray-500;
+$switcher-text--hover: $color-gray-950;
+$switcher-text--active: $color-white;
+$switcher-bg--active: $color-indigo-600;
+$switcher-icon: $color-gray-500;
+$switcher-icon--active: $color-emerald-400;
+$switcher-subtitle: $color-gray-500;
+$switcher-subtitle--active: $color-white-60;
+
+// ─── Filter: сброс всех фильтров в облаке чипсов ───
+$filter-model-clear-text: $color-gray-500;
+$filter-model-clear-text--hover: $color-gray-950;
+
+// ─── Вебкам-карточка (продолжение) ───
 $card-webcam-languages-border: $color-gray-300;
 $card-webcam-languages-fallback-bg: $color-gray-200;
 $card-webcam-languages-fallback-icon: $color-gray-600;

package/assets/scss/vars/_palette.scss

@@ -5,6 +5,7 @@ $color-zinc-950-0: lab(2.51107% .242703 -.886115 / 0%); // zinc-950 / 0%
 $color-zinc-950-75: lab(2.51107% .242703 -.886115 / 75%); // zinc-950 / 75%
 $color-zinc-950-90: lab(2.51107% .242703 -.886115 / 90%); // zinc-950 / 90%
 $color-zinc-900: lab(8.30603% .618205 -2.16572); // #18181b
+$color-zinc-900-80: lab(8.30603% .618205 -2.16572 / 80%);
 $color-zinc-900-70: lab(8.30603% .618205 -2.16572 / 70%); // zinc-900 / 70%
 $color-zinc-900-60: lab(8.30603% .618205 -2.16572 / 60%); // zinc-900 / 60%
 $color-zinc-900-50: lab(8.30603% .618205 -2.16572 / 50%); // #18181b
@@ -59,6 +60,7 @@ $color-indigo-500-20: lab(48.295% 38.3129 -81.9673 / 20%);
 $color-indigo-500-40: lab(48.295% 38.3129 -81.9673 / 40%);
 $color-indigo-500-50: lab(48.295% 38.3129 -81.9673 / 50%);
 $color-indigo-600: lab(38.4009% 52.6132 -92.3857); // #4f39f6
+$color-indigo-600-10: lab(38.4009% 52.6132 -92.3857 / 10%);
 $color-indigo-600-20: lab(38.4009% 52.6132 -92.3857 / 20%);
 $color-indigo-600-90: lab(38.4009% 52.6132 -92.3857 / 90%);
 $color-indigo-700: lab(32.4486% 49.2217 -84.6695); // #432dd7
@@ -99,6 +101,7 @@ $mono-white-5: lab(100% 0 0 / 5%);
 
 // $color- duplicates of the mono-black/mono-white opacity scale
 $color-black-100: lab(0% 0 0);
+$color-black-90: lab(0% 0 0 / 90%);
 $color-black-95: lab(0% 0 0 / 95%);
 $color-black-75: lab(0% 0 0 / 75%);
 $color-black-70: lab(0% 0 0 / 70%);

package/components/card/webcam/index.vue

@@ -51,9 +51,24 @@
       />
 
       <span
-        v-if="model.isNew"
-        class="card-webcam__new"
-      >{{ t('webcams.new_model') }}</span>
+        v-if="model.isNew || model.viewers"
+        class="card-webcam__badge"
+      >
+        <span
+          v-if="model.isNew"
+          class="card-webcam__badge-new"
+        >{{ t('webcams.new_model') }}</span>
+
+        <span
+          v-if="model.viewers"
+          class="card-webcam__badge-viewers"
+        >
+          <UiIcon
+            name="eye"
+            size="12"
+          />{{ $n(model.viewers) }}
+        </span>
+      </span>
 
       <span class="card-webcam__online"/>
 
@@ -99,7 +114,29 @@
       >{{ t('webcams.years_old', { age: model.age }) }}</span>
     </div>
 
-    <div class="card-webcam__meta">
+    <!-- На узких экранах ховера нет, поэтому цель стримера с прогрессом живёт под
+    карточкой; на десктопе она остаётся оверлеем на постере. -->
+    <div
+      v-if="model.goal"
+      class="card-webcam__goal-plain"
+    >
+      <span class="card-webcam__goal-plain-text _truncate">{{ model.goal.message }}</span>
+
+      <span class="card-webcam__goal-progress">
+        <span class="card-webcam__goal-track">
+          <span
+            :style="{ width: `${model.goal.percent}%` }"
+            class="card-webcam__goal-fill"
+          />
+        </span>
+        <span class="card-webcam__goal-percent --plain">{{ model.goal.percent }}%</span>
+      </span>
+    </div>
+
+    <div
+      v-if="model.viewers || model.country"
+      class="card-webcam__meta"
+    >
       <span
         v-if="model.viewers"
         class="card-webcam__viewers"
@@ -112,7 +149,7 @@
 
       <a
         v-if="model.country"
-        :href="`${nichePath}/webcams?mf_country=${model.country}`"
+        :href="`${nichePath}/webcams?filter_country=${model.country}`"
         class="card-webcam__country _truncate"
       >{{ countryName }}</a>
     </div>
@@ -367,6 +404,12 @@ onBeforeUnmount(() => {
   min-width: 0;
 }
 
+// нормализация даёт каждому следующему ребёнку `<article>` отступ 1em — в карточке
+// отступы задаются построчно, поэтому ресет тут гасим
+.card-webcam > * + * {
+  margin-top: 0;
+}
+
 .card-webcam__poster {
   position: relative;
   display: block;
@@ -399,26 +442,49 @@ onBeforeUnmount(() => {
   opacity: 1;
 }
 
-.card-webcam__new {
+// одна плашка на постере: признак новой модели и зрители онлайн (на узких экранах
+// меты под карточкой нет, поэтому зрители показываются здесь)
+.card-webcam__badge {
   @include font-4xs;
 
   position: absolute;
   top: 8px;
   left: 8px;
   z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: 6px;
   padding: 2px 6px;
   font-weight: 600;
   line-height: 1;
   text-transform: uppercase;
   letter-spacing: .025em;
-  color: $card-webcam-new-text;
+  color: $card-webcam-badge-text;
+  text-shadow: 0 1px 2px $card-webcam-badge-shadow;
 
   // лёгкое затенение: на светлом постере плашка иначе сливается с кадром
-  background-color: $card-webcam-new-bg;
-  border: 1px solid $card-webcam-new-border;
+  background-color: $card-webcam-badge-bg;
+  border: 1px solid $card-webcam-badge-border;
   border-radius: $radius-small;
 }
 
+.card-webcam__badge-viewers {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  @include from-br(xm) {
+    display: none;
+  }
+}
+
+// на десктопе плашка нужна только под признак новой модели
+.card-webcam__badge:not(:has(.card-webcam__badge-new)) {
+  @include from-br(xm) {
+    display: none;
+  }
+}
+
 .card-webcam__online {
   position: absolute;
   top: 8px;
@@ -492,10 +558,34 @@ onBeforeUnmount(() => {
 
   flex-shrink: 0;
   min-width: 4ch;
+  line-height: 16px;
   font-weight: 500;
   font-variant-numeric: tabular-nums;
   text-align: right;
   color: $card-webcam-goal-percent;
+
+  &.--plain {
+    color: $card-webcam-goal-plain-percent;
+  }
+}
+
+// цель под карточкой — только там, где нет ховера
+.card-webcam__goal-plain {
+  display: grid;
+  row-gap: 6px;
+  margin-top: 8px;
+
+  @include from-br(xm) {
+    display: none;
+  }
+}
+
+.card-webcam__goal-plain-text {
+  @include font-xs;
+
+  --line-clamp: 1;
+
+  color: $card-webcam-goal-plain-text;
 }
 
 .card-webcam__head {
@@ -525,15 +615,21 @@ onBeforeUnmount(() => {
   color: $card-webcam-meta-text;
 }
 
+// на узких экранах мету не показываем: зрители уехали в плашку на постере, а
+// место под карточкой занимает цель стримера
 .card-webcam__meta {
   @include font-xs;
 
-  display: flex;
+  display: none;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   margin-top: 8px;
   color: $card-webcam-meta-text;
+
+  @include from-br(xm) {
+    display: flex;
+  }
 }
 
 .card-webcam__viewers {
@@ -545,25 +641,48 @@ onBeforeUnmount(() => {
 .card-webcam__country {
   --line-clamp: 1;
 
+  margin-left: auto;
+
   &:is(:hover, :focus) {
     color: $card-webcam-meta-text--hover;
   }
 }
 
-.card-webcam__meta:has(+ .card-webcam__tags) {
-  margin-bottom: 10px;
-}
-
-.card-webcam__tags {
+// селектор с родителем не случайно: ресет обнуляет отступы у `ul[class]`, и
+// одиночного класса ему не хватает
+.card-webcam > .card-webcam__tags {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
+  margin-top: 10px;
+}
+
+// на узких экранах теги в один ряд с горизонтальным скроллом: в две колонки они
+// не влезают, а перенос делал карточки в сетке разной высоты
+.card-webcam > .card-webcam__tags {
+  @include to-br(xm) {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    padding-right: 24px;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}
+
+// не сжимаем элементы ряда: иначе подпись внутри чипса переносится и ряд
+// становится двухстрочным
+.card-webcam__tags > li {
+  flex-shrink: 0;
 }
 
 .card-webcam__tag {
   @include font-xs;
 
   display: block;
+  white-space: nowrap;
   padding: 4px 8px;
   color: $card-webcam-tag-text;
   background-color: $card-webcam-tag-bg;
@@ -573,5 +692,12 @@ onBeforeUnmount(() => {
     color: $card-webcam-tag-text--hover;
     background-color: $card-webcam-tag-bg--hover;
   }
+
+  @include to-br(xm) {
+    @include font-3xs;
+
+    padding: 2px 8px;
+    line-height: 18px;
+  }
 }
 </style>

package/components/card/webcam/languages.vue

@@ -68,9 +68,13 @@ const broken = ref<Record<string, boolean>>({});
 const items = computed(() => {
   const first = (props.firstLang || locale.value).slice(0, 2).toLowerCase();
 
-  const all = props.languages.map((lang, index) => ({
+  // провайдер вместо пустого массива присылает null — дефолт пропа в этом случае
+  // не срабатывает, поэтому подстраховываемся на самой границе компонента
+  const flags = props.flags || [];
+
+  const all = (props.languages || []).map((lang, index) => ({
     lang,
-    country: (props.flags[index] || LANG_TO_FLAG[lang] || lang).toLowerCase(),
+    country: (flags[index] || LANG_TO_FLAG[lang] || lang).toLowerCase(),
   }));
 
   return [...all.filter(item => item.lang === first), ...all.filter(item => item.lang !== first)]
@@ -81,7 +85,7 @@ const items = computed(() => {
 const names = computed(() => {
   const display = new Intl.DisplayNames([locale.value], { type: 'language' });
 
-  return props.languages.map(lang => display.of(lang) || lang.toUpperCase()).join(', ');
+  return (props.languages || []).map(lang => display.of(lang) || lang.toUpperCase()).join(', ');
 });
 </script>
 

package/components/filter/model.vue

@@ -4,7 +4,14 @@
     <FilterChips
       :items="chipsItems"
       @click="onChipsClick"
-    />
+    >
+      <button
+        v-if="chipsItems.length > 1"
+        class="filter-model__clear"
+        type="button"
+        @click="onClearAllClick"
+      >{{ t('reset_all') }}</button>
+    </FilterChips>
     <transition appear>
       <FilterPopup
         v-model="model"
@@ -18,6 +25,19 @@
         @chip-click="onPendingChipsClick"
         @field-update="onFieldUpdate"
       >
+        <template #quick-field="{ item, index }">
+          <FilterModelField
+            v-if="quickFilter(item as { name: string })"
+            :field="quickFilter(item as { name: string }) as IModelFilter"
+            :index="index"
+            :pending-query="pendingQuery"
+            :units="units"
+            :unit-items="unitItems"
+            @update:pending-query="onQueryUpdate"
+            @update:units="units = $event"
+          />
+        </template>
+
         <template #field="{ field, index }">
           <FilterModelField
             :field="field as IModelFilter"
@@ -147,6 +167,11 @@ watch(units, () => {
   pendingQuery.value = next;
 });
 
+/** Быстрые поля в модалку приходят уже маппингом — исходный фильтр ищем по имени. */
+function quickFilter(item: { name: string }) {
+  return quickFilters.value.find(filter => filter.name === item.name);
+}
+
 function selectItems(item: IModelFilter) {
   return item.options.map(option => ({
     value: option.name,
@@ -218,6 +243,17 @@ function onResetClick() {
   pendingQuery.value = {};
 }
 
+/** «Сбросить всё» в облаке чипсов: снимает фильтры, сортировку не трогает. */
+function onClearAllClick() {
+  const query = { ...route.query };
+  Object.keys(query)
+    .filter(key => key.startsWith('filter_'))
+    .forEach(key => delete query[key]);
+  delete query['page'];
+
+  router.replace({ query });
+}
+
 function onApplyClick() {
   model.value = false;
   router.replace({ query: pendingQuery.value });
@@ -229,6 +265,25 @@ function onApplyClick() {
   margin-top: 8px;
 }
 
+// в облаке чипсов кнопка идёт последней, а слот `FilterChips` кладёт её первой
+.filter-model__clear {
+  @include font-sm;
+
+  order: 1;
+  padding: 6px 8px;
+  color: $filter-model-clear-text;
+
+  &:is(:hover, :focus) {
+    color: $filter-model-clear-text--hover;
+  }
+}
+
+// диапазон в сетке быстрых фильтров занимает обе колонки: слайдеру нужна вся
+// ширина под шкалу и подписи границ
+.filter-popup__grid > .filter-model-field__slider {
+  grid-column: 1 / -1;
+}
+
 .filter-model__footer-buttons {
   display: flex;
   justify-content: space-between;

package/components/grid/webcams.vue

@@ -0,0 +1,78 @@
+<!-- Сетка вебкам-тумб: те же колонки, что у основной сетки видео (2 / 3 / 4).
+
+Компонент отвечает только за раскладку и за выбор обёртки провайдера: обёртка
+берётся из мапы адаптеров по конфигу и рендерится через `<component :is>`, так
+что сетка не знает ни про Stripcash, ни про формат его полей.
+
+События тумб (клик и появление постера) уходят наружу вместе с индексом — сквозной
+индекс тумбы на странице нужен статистике, а карточка про страницу не знает. -->
+<template>
+  <ul class="grid-webcams">
+    <li
+      v-for="(model, index) in items"
+      :key="`webcam-${model.id || model.username}`"
+      class="grid-webcams__item"
+    >
+      <component
+        :is="adapter"
+        :item="model"
+        :touch-preview="isMobile"
+        :first-lang="locale"
+        @click="emit('model-click', { model, index })"
+        @poster="element => emit('model-view', { model, index, element })"
+      />
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import type { IStripcashModel, IWebcamsConfig } from '../../types';
+import { WEBCAMS_DEFAULTS } from '../../runtime';
+import { resolveWebcamAdapter } from '../../utils/webcams/adapters';
+
+defineProps<{
+  items: IStripcashModel[]
+}>();
+
+/**
+ * Клики и показы тумб сетка отдаёт наружу: индексы она знает, а куда их
+ * отправлять — дело сайта (у статистики свой контекст страницы и устройства).
+ */
+const emit = defineEmits<{
+  'model-click': [payload: { model: IStripcashModel, index: number }]
+  'model-view': [payload: { model: IStripcashModel, index: number, element: HTMLElement }]
+}>();
+
+const { locale } = useI18n();
+const isMobile = useState<boolean>('isMobile');
+
+const webcamsConfig = computed(() => (useRuntimeConfig().public.webcamsConfig || {}) as IWebcamsConfig);
+
+/** Обёртка активного провайдера: ленивый импорт из мапы адаптеров. */
+const provider = computed(() => String(webcamsConfig.value.provider || WEBCAMS_DEFAULTS.provider));
+const adapter = computed(() => defineAsyncComponent(resolveWebcamAdapter(provider.value)));
+</script>
+
+<style lang="scss">
+.grid-webcams {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+
+  @include from-br(xs) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  @include from-br(xm) {
+    gap: 24px;
+  }
+
+  @include from-br(md) {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+.grid-webcams__item {
+  min-width: 0;
+}
+</style>

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>