itube-specs 0.0.920 → 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

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.921",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {