itube-specs 0.0.964 → 0.0.966

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

@@ -865,6 +865,17 @@ $bg-fade-90: $color-zinc-950-90; // почти непрозрачный
 
 // ─── Оверлей карточек ───
 
+// ─── Player aside models ───
+$aside-models-name: $color-white;
+$aside-models-name--hover: $color-indigo-400;
+$aside-models-params: $color-zinc-400;
+$aside-models-separator: $color-zinc-500;
+$aside-models-count: $color-zinc-500;
+$aside-models-avatar-bg: $color-zinc-800;
+$aside-models-avatar-text: $color-zinc-400;
+$aside-models-avatar-ring: $color-zinc-700;
+$aside-models-avatar-ring--hover: $color-zinc-500;
+
 // ─── Model card ───
 $model-card-bg: $color-zinc-900-50;
 $model-card-bg--hover: $color-zinc-800-50;

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

@@ -891,6 +891,17 @@ $bg-fade-90: $color-gray-950-90; // почти непрозрачный
 
 // ─── Оверлей карточек ───
 
+// ─── Player aside models ───
+$aside-models-name: $color-gray-900;
+$aside-models-name--hover: $color-indigo-600;
+$aside-models-params: $color-gray-600;
+$aside-models-separator: $color-gray-400;
+$aside-models-count: $color-gray-500;
+$aside-models-avatar-bg: $color-gray-200;
+$aside-models-avatar-text: $color-gray-500;
+$aside-models-avatar-ring: $color-gray-300;
+$aside-models-avatar-ring--hover: $color-gray-400;
+
 // ─── Model card ───
 $model-card-bg: $color-gray-100;
 $model-card-bg--hover: $model-card-bg;

package/components/player/aside-models.vue

@@ -0,0 +1,219 @@
+<!-- Блок одной модели ролика в боковой колонке плеера: шапка со ссылкой на модель
+(аватар, имя с флагами, параметры и счётчик роликов) и сетка её роликов 2×2.
+Ролики — обычные мини-карточки, поэтому превью, меню и ссылки у них те же, что
+в остальных сетках. -->
+<template>
+  <section class="player-aside-models">
+    <NuxtLink
+      :to="generateLink(`/models/${slug}`)"
+      :title="title"
+      class="player-aside-models__head"
+    >
+      <UiImg
+        v-if="avatar"
+        :src="avatar"
+        :alt="title"
+        class="player-aside-models__avatar"
+        width="56"
+        height="56"
+        sizes="56px"
+        loading="lazy"
+        @error="avatarError = true"
+      />
+      <span
+        v-else
+        class="player-aside-models__avatar --empty"
+      >{{ title.slice(0, 1) }}</span>
+
+      <span class="player-aside-models__info">
+        <span class="player-aside-models__name-row">
+          <span class="player-aside-models__name">{{ title }}</span>
+          <!-- Национальность нигде больше не подписана — флаг её единственный носитель,
+          поэтому в `alt` идёт название страны, а не ISO-код. -->
+          <img
+            v-for="code in info?.nationalityIsoCodes || []"
+            :key="`flag-${code}`"
+            :src="`/icons/flags/${code}.svg`"
+            :alt="isoCodeToCountryName(code, locale)"
+            class="player-aside-models__flag"
+            width="16"
+            height="12"
+          >
+        </span>
+        <span class="player-aside-models__params">
+          <span
+            v-if="parameters"
+            class="player-aside-models__params-text"
+          >{{ parameters }}</span>
+          <span
+            v-if="info?.videosCount"
+            class="player-aside-models__count"
+          >
+            <UiIcon
+              name="video-camera"
+              size="14"
+            />
+            {{ n(info.videosCount, 'compact') }}
+          </span>
+        </span>
+      </span>
+    </NuxtLink>
+
+    <div
+      v-if="videos?.length"
+      class="player-aside-models__grid"
+    >
+      <CardVideo
+        v-for="video in videos"
+        :key="`aside-model-video-${video.guid}`"
+        :card="video"
+        class="player-aside-models__card"
+        loading="lazy"
+        mini
+      />
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { isoCodeToCountryName } from '../../utils/iso-code-to-country-name';
+import type { ICardInfo, IVideoCard } from '../../types';
+
+/** Что показываем в строке параметров и в каком порядке — как в макете. */
+const PARAMETER_NAMES = ['guy_type', 'ethnicity', 'age'];
+
+const props = defineProps<{
+  title: string
+  slug: string
+  info?: ICardInfo | null
+  videos?: IVideoCard[]
+}>();
+
+const { t, n, locale } = useI18n();
+const { generateLink } = useGenerateLink();
+
+const avatarError = ref(false);
+const avatar = computed(() => avatarError.value ? '' : props.info?.img || '');
+
+const parameters = computed(() => PARAMETER_NAMES
+  .map((name) => {
+    const value = props.info?.parameters?.find(item => item.name === name)?.values?.[0]?.title;
+    if (!value) return '';
+
+    return name === 'age' ? `${value} ${t('yo')}` : value;
+  })
+  .filter(Boolean)
+  .join(' · '));
+</script>
+
+<style lang="scss">
+.player-aside-models__head {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  column-gap: 12px;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.player-aside-models__avatar {
+  width: 56px;
+  height: 56px;
+  object-fit: cover;
+  object-position: center 10%;
+  background-color: $aside-models-avatar-bg;
+  border-radius: $radius-full;
+  box-shadow: 0 0 0 2px $aside-models-avatar-ring;
+
+  @media (hover: hover) {
+    transition: var(--transition) box-shadow;
+  }
+}
+
+.player-aside-models__avatar.--empty {
+  display: grid;
+  place-content: center;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: $aside-models-avatar-text;
+}
+
+@media (hover: hover) {
+  .player-aside-models__head:is(:hover, :focus-visible) .player-aside-models__avatar {
+    box-shadow: 0 0 0 2px $aside-models-avatar-ring--hover;
+  }
+
+  .player-aside-models__head:is(:hover, :focus-visible) .player-aside-models__name {
+    color: $aside-models-name--hover;
+  }
+}
+
+.player-aside-models__info {
+  display: grid;
+  row-gap: 2px;
+  min-width: 0;
+}
+
+.player-aside-models__name-row {
+  display: flex;
+  align-items: center;
+  column-gap: 6px;
+  min-width: 0;
+}
+
+.player-aside-models__name {
+  @include font-base;
+
+  font-weight: 700;
+  color: $aside-models-name;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+
+  @media (hover: hover) {
+    transition: var(--transition) color;
+  }
+}
+
+.player-aside-models__flag {
+  flex-shrink: 0;
+  border-radius: 2px;
+  object-fit: cover;
+}
+
+.player-aside-models__params {
+  @include font-sm;
+
+  display: flex;
+  align-items: center;
+  column-gap: 6px;
+  min-width: 0;
+  color: $aside-models-params;
+}
+
+.player-aside-models__params-text {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+/* Разделитель между параметрами и счётчиком — точка, как в макете */
+.player-aside-models__params-text + .player-aside-models__count::before {
+  content: '·';
+  color: $aside-models-separator;
+}
+
+.player-aside-models__count {
+  display: flex;
+  align-items: center;
+  column-gap: 4px;
+  flex-shrink: 0;
+  color: $aside-models-count;
+}
+
+.player-aside-models__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  column-gap: 12px;
+  row-gap: 16px;
+}
+</style>

package/components/player/aside-videos.vue

@@ -1,14 +1,31 @@
-<!-- Боковая колонка справа: рекомендации или реклама -->
+<!-- Боковая колонка справа от плеера: реклама и блоки моделей ролика.
+
+У каждой модели своя шапка со ссылкой и сетка её роликов 2×2 (см. PlayerAsideModels
+и useFetchAsideModels). Реклама, если она включена на сайте, стоит ПОД ними — в
+макете её нет, но формат живёт именно в этой колонке.
+
+Если моделей у ролика нет (и рекламы тоже), колонка не пустует: показываем пару
+рекомендаций, как было до макета. -->
 <template>
   <div
     :class="[
       {'_loading': status === 'pending'},
     ]"
-    class="player-aside-videos _from-md"
+    class="player-aside-videos _from-sd"
   >
+    <PlayerAsideModels
+      v-for="item in models || []"
+      :key="`aside-model-${item.slug}`"
+      :title="item.title"
+      :slug="item.slug"
+      :info="item.info"
+      :videos="item.videos?.items"
+      class="player-aside-videos__model"
+    />
+
     <AdvNtv v-if="featureFlags.AdsNTVEnabled" />
 
-    <template v-else>
+    <template v-if="!models?.length && !featureFlags.AdsNTVEnabled">
       <CardVideo
         v-for="item in asideVideos?.items?.slice(0, 2)"
         :key="`aside-video-${item.guid}`"
@@ -20,7 +37,7 @@
 </template>
 
 <script setup lang="ts">
-import type { IVideoCard, PaginatedResponse } from '../../types';
+import type { ICardInfo, IVideoCard, PaginatedResponse } from '../../types';
 import type { AsyncDataRequestStatus } from '#app';
 
 const featureFlags = useRuntimeConfig().public.featureFlags;
@@ -28,15 +45,23 @@ const featureFlags = useRuntimeConfig().public.featureFlags;
 defineProps<{
   asideVideos?: PaginatedResponse<IVideoCard> | null
   status?: AsyncDataRequestStatus
+  /** Модели ролика с их карточками и роликами (useFetchAsideModels). */
+  models?: Array<{
+    title: string
+    slug: string
+    info: ICardInfo | null
+    videos: PaginatedResponse<IVideoCard> | null
+  }>
 }>();
 </script>
 
 <style lang="scss">
 .player-aside-videos {
-  @include from-br(md) {
+  @include from-br(sd) {
     display: grid;
-    gap: 16px;
+    gap: 32px;
     grid-template-columns: 1fr;
+    width: 288px;
     height: 100%;
     grid-column: 2;
     grid-row: 1;

package/components/player/main.vue

@@ -61,15 +61,16 @@ const { nextVideo, goNext } = useNextVideo({
 </script>
 
 <style lang="scss">
+/* Боковая колонка встаёт с 1024px — так в макете (до этого плеер во всю ширину). */
 .player-main {
-  @include to-br(md) {
+  @include to-br(sd) {
     display: contents;
   }
 
-  @include from-br(md) {
+  @include from-br(sd) {
     display: grid;
     column-gap: 16px;
-    grid-template-columns: 1fr auto;
+    grid-template-columns: minmax(0, 1fr) auto;
   }
 }
 

package/composables/fetch/use-fetch-aside-models.ts

@@ -0,0 +1,72 @@
+import type { Ref } from 'vue';
+import type { Language } from '../../runtime';
+import { AsyncData, convertString } from '../../runtime';
+import { ModelsApiService } from '../../services/api/models.service';
+import { VideosApiService } from '../../services/api/videos.service';
+import type { ICardInfo, IVideoCard, PaginatedResponse } from '../../types';
+
+/**
+ * Сколько моделей ролика показывать в боковой колонке. В макете их две; потолок
+ * нужен потому, что каждая модель — это ДВА запроса (инфо + её ролики), и у ролика
+ * с длинным составом колонка иначе тянула бы десяток запросов.
+ */
+export const ASIDE_MODELS_LIMIT = 3;
+
+/** Сколько роликов модели показывать — в макете сетка 2×2. */
+export const ASIDE_MODEL_VIDEOS = 4;
+
+/** Порядок роликов модели — тот же, что на её странице по умолчанию. */
+const ORDER = '-popularity';
+
+export interface IAsideModel {
+  title: string
+  /** Слаг для ссылки на страницу модели. */
+  slug: string
+  info: Ref<ICardInfo | null>
+  videos: Ref<PaginatedResponse<IVideoCard> | null>
+}
+
+/**
+ * Модели ролика для боковой колонки плеера: у каждой — своя карточка (аватар,
+ * параметры, счётчик роликов) и первые её ролики.
+ *
+ * В данных самого ролика у модели есть только `guid` и `title`, поэтому карточку
+ * приходится добирать ручками страницы модели. Слаг для ссылки считается из имени
+ * так же, как его строят ссылки на модель, а в САМИ ручки уходит не слаг, а имя,
+ * прогнанное через `fromSlug` — ровно то, что подставляет страница модели
+ * (`useSlug`): бекенд ищет модель по имени, от слага с дефисами он 500-тит.
+ */
+export const useFetchAsideModels = async (
+  titles: string[],
+  limit = ASIDE_MODELS_LIMIT,
+): Promise<IAsideModel[]> => {
+  const lang = useLang() as Language;
+
+  return await Promise.all(titles.slice(0, limit).map(async (title) => {
+    const slug = convertString().toSlug(title);
+    const name = convertString().fromSlug(slug);
+    const infoKey = `data-${AsyncData.ModelsByName}-aside-${slug}-${lang}`;
+    const videosKey = `data-${AsyncData.ModelsVideos}-aside-${slug}-${lang}`;
+
+    const [{ data: info }, { data: videos }] = await Promise.all([
+      useAsyncData<ICardInfo>(
+        infoKey,
+        () => useApiFetcher<ICardInfo>(infoKey, ModelsApiService.getModelsByName, lang, name)(),
+      ),
+      useAsyncData<PaginatedResponse<IVideoCard>>(
+        videosKey,
+        () => useApiFetcher<PaginatedResponse<IVideoCard>>(
+          videosKey,
+          VideosApiService.getListByNicheAndModel,
+          { page: 1, 'per-page': ASIDE_MODEL_VIDEOS },
+          {},
+          name,
+          lang,
+          ORDER,
+        )(),
+      ),
+    ]);
+
+    return { title, slug, info, videos };
+  }));
+};

package/composables/use-webcam-alive.ts

@@ -16,6 +16,9 @@ type AliveResponse = { statuses: WebcamAliveStatus[], replacements: WebcamReplac
  * Опрашиваем только при видимой вкладке: в фоне это бессмысленный трафик, а при
  * возврате на вкладку проверяем сразу, потому что за время «сна» модели могли уйти.
  *
+ * Если ручка отвечает 404 (на окружении её просто нет) или трижды подряд падает,
+ * проверку выключаем до перезагрузки страницы — нет смысла долбиться каждые 45 секунд.
+ *
  * Проверку арминг ставит ОДИН раз на страницу (`useState`-флаг): список общий, а
  * потребителей у него два — блок и врезки.
  *
@@ -42,9 +45,23 @@ export function useWebcamAlive(cacheKey: string) {
 
   let timer: ReturnType<typeof setInterval> | null = null;
   let checking = false;
+  let stopped = false;
+  let failures = 0;
+
+  /** После скольких подряд неудач бросаем проверять до перезагрузки страницы. */
+  const MAX_FAILURES = 3;
+
+  function stop() {
+    stopped = true;
+
+    if (!timer) return;
+
+    clearInterval(timer);
+    timer = null;
+  }
 
   async function check() {
-    if (checking || document.visibilityState !== 'visible') return;
+    if (stopped || checking || document.visibilityState !== 'visible') return;
 
     const usernames = models.value.map(model => model.username).filter(Boolean);
     if (!usernames.length) return;
@@ -58,12 +75,21 @@ export function useWebcamAlive(cacheKey: string) {
         body: { usernames },
       });
 
+      failures = 0;
+
       const next = applyWebcamReplacements(models.value, response?.statuses || [], response?.replacements || []);
       // ссылку меняем только когда список действительно другой: иначе лишний
       // ререндер сетки на каждой проверке
       if (next !== models.value) models.value = next;
-    } catch {
-      // ручка не ответила — на следующей проверке попробуем снова
+    } catch (error) {
+      failures += 1;
+
+      // 404 — ручки на этом окружении нет вовсе (бывает, когда стенд смотрит в
+      // API без неё): долбиться каждые 45 секунд незачем. Прочие ошибки могут
+      // быть сетевой икотой, поэтому даём три попытки.
+      const err = error as { statusCode?: number, status?: number, response?: { status?: number } };
+      const status = err?.statusCode ?? err?.status ?? err?.response?.status;
+      if (status === 404 || failures >= MAX_FAILURES) stop();
     } finally {
       checking = false;
     }
@@ -79,7 +105,7 @@ export function useWebcamAlive(cacheKey: string) {
   });
 
   onScopeDispose(() => {
-    if (timer) clearInterval(timer);
+    stop();
     document.removeEventListener('visibilitychange', onVisible);
     armed.value = false;
   });

package/package.json

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

package/pages/videos/[slug].vue

@@ -14,6 +14,7 @@
     <PlayerAsideVideos
       :aside-videos="relatedVideos"
       :status="status"
+      :models="asideModels"
       class="video__aside"
     />
   </ViewVideo>
@@ -50,6 +51,18 @@ const [
   useFetchTopModels(ModelsApiService.getTop, 24, AsyncData.TopModelsMore, String(pageName)),
 ]);
 
+// Модели ролика для боковой колонки: у каждой своя карточка и её ролики. Запрос
+// зависит от ответа по ролику (имена моделей есть только в нём), поэтому идёт
+// вторым заходом, а не в общем Promise.all.
+const asideModelsData = await useFetchAsideModels(videoData.value?.models?.map(item => item.title) || []);
+
+const asideModels = computed(() => asideModelsData.map(item => ({
+  title: item.title,
+  slug: item.slug,
+  info: item.info.value,
+  videos: item.videos.value,
+})));
+
 const { t, locale } = useI18n();
 
 const defaultLocale = useRuntimeConfig().public.locales.default;
@@ -171,11 +184,3 @@ useHead(computed(() => videoJsonLd.value
   : {}
 ));
 </script>
-
-<style lang="scss">
-.video__aside {
-  @include from-br(md) {
-    width: 288px;
-  }
-}
-</style>