itube-specs 0.0.1057 → 0.0.1059

package/SITE_UPDATES.md

@@ -11,6 +11,35 @@
 коммиты до бампа); `npm run patch` сам проставит ей номер версии. Формат пункта: что сделать и где,
 кому именно (всем / сайтам с N), что будет, если не сделать.
 
+## 0.0.1059 — 2026-10-30
+
+- **Всем, срочно к сведению:** с 0.0.1056 блок Live Cams и врезки вебкамов пропали из сеток видео на страницах, которые
+  не передают `webcamsQuery` (канал, поиск, листинги на `ViewVideos` без запроса): проп был `{…} | false`, и Vue приводил
+  отсутствующий булев проп к `false` = «без вебкамов». Починено. Сайтам, где сетке передавали `:webcams-query="false"`,
+  — заменить на `no-webcams` (новый булев проп `GridVideos` / `ViewVideos`), иначе вебкамы там снова появятся.
+
+- **Всем — к сведению:** `GridInsert` / `useGridRowAfter` умеют `afterCards` — после строки с N-й карточкой (без дыр,
+  вебкам-тумбы с `data-grid-extra` не в счёт; карточек меньше — за последней строкой); пересчёт и на перестановку
+  соседних вставок (раньше реклама могла сдвинуть блок, а он не замечал). Новые ключи: `gridWebcams.videos.afterCards`,
+  `gridWebcams.models.afterCards` (важнее `afterRows`), `videoPage.webcamsInRelatedAfter` — блок Live Cams внутри
+  сетки похожих. Дефолты — как было, делать ничего не надо; videosection-redesign ставит 14 / 10 / 14.
+- **Всем — к сведению:** у `WebcamMain` проп `fullRows` (по умолчанию `true` — только полные строки, как было);
+  `false` — все модели, последняя строка может быть неполной.
+
+## 0.0.1058 — 2026-10-30
+
+- **Всем — к сведению:** новый ключ `appConfig.channelTagsSource` (по умолчанию `'popular'` — как было, популярные теги
+  роликов канала). `'channel'` — теги самого канала из его карточки, без тегов блока нет, запрос популярных тегов не
+  идёт. Делать ничего не надо; videosection-redesign ставит `'channel'`.
+
+- **Всем, срочно к сведению:** в 0.0.1056 страница поиска (`/search/{q}`, страница слоя и сайтовые на
+  `useSearchRelatedPhrases()`) падала с 500 — композабл звал `useAppConfig` после `await`, вне контекста Nuxt. Починено,
+  делать ничего не надо — обновиться.
+
+- **Всем — к сведению:** ролики плейлиста приходят целиком (до 200) — `getVideosByPlaylist` слал `limit=100`, которого
+  ручка не знает, и получал только первые 20: на плеере плейлиста список, «следующий» и перемешивание ходили по 20,
+  счётчик показывал `N/20`. Теперь `per-page` (по умолчанию 200, как на плеере videosection.com). Делать ничего не надо.
+
 ## 0.0.1056 — 2026-10-30
 
 - **Всем — к сведению:** починена `/search/{q}/models` — метод получал аргументы не в том порядке (фраза уходила в

package/app.config.ts

@@ -17,6 +17,9 @@ export default defineAppConfig({
   /** Есть ли у сайта сгруппированный вид категорий (`/categories` — группы, `/categories/all` — A–Z).
    *  `false` — `/categories` сам список A–Z: `CategoryNav` без табов Grouped / A-Z, «All» ведёт на `/categories`. */
   categoriesGrouped: true,
+  /** Чипсы тегов на странице канала: `popular` — популярные теги роликов канала (`popular-tags-by-channel-name`),
+   *  `channel` — теги самого канала из его карточки (`tags`), нет тегов — нет блока (как на videosection.com). */
+  channelTagsSource: 'popular' as 'popular' | 'channel',
   /** Порядок выдачи без `?sort` (значение `order` API). `null` — дефолт слоя, `''` — `order` не передавать (дефолт
    *  API). Вкладки сортировок не меняет. */
   defaultOrders: {
@@ -58,8 +61,9 @@ export default defineAppConfig({
    *  карточек и сколько врезок вебкам-тумб (хвост того же списка) в сетке видео листинга (не похожие, не плейлист,
    *  не когда страница передала врезки сама); `models` — в основной сетке моделей (`priority`, не футер). */
   gridWebcams: {
-    videos: null as { afterRows: number, inserts: number } | null,
-    models: null as { afterRows: number } | null,
+    /** `afterCards` — после строки с N-й карточкой (карточек меньше — в конец сетки); задан — важнее `afterRows`. */
+    videos: null as { afterRows: number, afterCards?: number, inserts: number } | null,
+    models: null as { afterRows: number, afterCards?: number } | null,
     /** Раскладка videosection.com (`WEBCAMS_LEGACY_LAYOUT`): список 42 на страницу, блок — модели 0–11, врезки в сетку
      *  видео — 21–24 после ¼, ½, ¾ сетки и за 4 карточки до конца (`inserts` из `videos` не используется), мини-блок
      *  после сетки видео и моделей — 25–36. `false` — раскладка слоя: блок 12 + врезки из хвоста на случайных местах. */
@@ -83,6 +87,9 @@ export default defineAppConfig({
     relatedModels: true,
     /** Блок Live Cams после похожих (при `FeatureWebcamsEnabled`); врезки в похожие берут хвост того же списка. */
     webcamsBlock: false,
+    /** Блок Live Cams внутри сетки похожих — после строки с N-й карточкой (похожих меньше — в конце сетки);
+     *  `null` — после секции похожих. */
+    webcamsInRelatedAfter: null as number | null,
     /** Сколько моделей из хвоста списка уходит во врезки похожих, когда блок Live Cams включён. */
     webcamInserts: 8,
     /** С 1024px прятать чипсы моделей над плеером, у которых есть блок в боковой колонке (не дублировать ссылку). */

package/components/grid/insert.vue

@@ -1,5 +1,6 @@
 <!-- Полноширинная вставка в CSS-сетку карточек (`GridVideos`, `GridModels`): встаёт после N-й строки карточек
-при любом числе колонок (`useGridRowAfter`), пустая места не занимает. Класть прямым потомком сетки — через её слоты. -->
+(`afterRows`) или после строки с N-й карточкой (`afterCards`, карточек меньше — в конец) при любом числе колонок
+(`useGridRowAfter`), пустая места не занимает. Класть прямым потомком сетки — через её слоты. -->
 <template>
   <div
     ref="root"
@@ -12,12 +13,14 @@
 <script setup lang="ts">
 const props = defineProps<{
   /** После какой строки карточек встать. */
-  afterRows: number
+  afterRows?: number
+  /** После строки, в которой лежит N-я карточка (без дыр перед блоком); задан — важнее `afterRows`. */
+  afterCards?: number
 }>();
 
 const root = ref<HTMLElement | null>(null);
 
-useGridRowAfter(root, () => props.afterRows);
+useGridRowAfter(root, () => (props.afterCards ? { cards: props.afterCards } : { rows: props.afterRows ?? 0 }));
 </script>
 
 <style lang="scss">

package/components/grid/models.vue

@@ -17,6 +17,7 @@
     <GridInsert
       v-if="webcams"
       :after-rows="webcams.afterRows"
+      :after-cards="webcams.afterCards"
     >
       <LazyWebcamMain
         :list="legacy ? WEBCAMS_LEGACY_LAYOUT.list : undefined"

package/components/grid/videos.vue

@@ -21,6 +21,7 @@
         v-if="cell.webcam"
         :model="cell.webcam"
         class="grid-videos__webcam"
+        data-grid-extra
         @click="onInsertClick(cell)"
         @poster="element => onInsertView(cell, element)"
       />
@@ -44,6 +45,7 @@
     <GridInsert
       v-if="webcams"
       :after-rows="webcams.afterRows"
+      :after-cards="webcams.afterCards"
     >
       <LazyWebcamMain
         v-if="legacyList"
@@ -64,6 +66,7 @@
         v-if="cell.webcam"
         :model="cell.webcam"
         class="grid-videos__webcam"
+        data-grid-extra
         @click="onInsertClick(cell)"
         @poster="element => onInsertView(cell, element)"
       />
@@ -90,6 +93,7 @@
         v-if="cell.webcam"
         :model="cell.webcam"
         class="grid-videos__webcam"
+        data-grid-extra
         @click="onInsertClick(cell)"
         @poster="element => onInsertView(cell, element)"
       />
@@ -159,9 +163,11 @@ const props = defineProps<{
   insertSeed?: string
   /**
    * Выборка вебкамов листинга при `gridWebcams.legacy`: категория провайдера, `random` и размер списка (по умолчанию
-   * `WEBCAMS_LEGACY_LAYOUT.list`, случайные). `false` — без блока и врезок (в любой раскладке).
+   * `WEBCAMS_LEGACY_LAYOUT.list`, случайные). Только объект: булев тип в пропе Vue приводит отсутствующий проп к `false`.
    */
-  webcamsQuery?: { category?: string, random?: boolean, list?: number } | false
+  webcamsQuery?: { category?: string, random?: boolean, list?: number }
+  /** Без блока Live Cams и врезок (в любой раскладке). */
+  noWebcams?: boolean
 }>();
 
 /** Клики и показы врезанных тумб уходят наружу — статистику отправляет сайт. */
@@ -189,16 +195,16 @@ const cardTriggerClass = appConfig.cardTriggerClass || undefined;
 const legacy = !!appConfig.gridWebcams?.legacy;
 
 /** Блок Live Cams и свои врезки — у листингов (похожие и плейлист без них, страница видео передаёт врезки сама). */
-const webcams = !props.inserts && !props.related && !props.playlist && props.webcamsQuery !== false
+const webcams = !props.inserts && !props.related && !props.playlist && !props.noWebcams
   ? appConfig.gridWebcams?.videos
   : null;
 
 /** Общий список страницы в раскладке videosection.com (`gridWebcams.legacy`): блок, врезки и мини-блок режут его по индексам. */
 const legacyList = webcams && legacy
   ? {
-      list: (props.webcamsQuery && props.webcamsQuery.list) || WEBCAMS_LEGACY_LAYOUT.list,
-      category: (props.webcamsQuery && props.webcamsQuery.category) || undefined,
-      random: props.webcamsQuery ? props.webcamsQuery.random !== false : true,
+      list: props.webcamsQuery?.list || WEBCAMS_LEGACY_LAYOUT.list,
+      category: props.webcamsQuery?.category || undefined,
+      random: props.webcamsQuery?.random !== false,
     }
   : null;
 

package/components/view/video.vue

@@ -81,6 +81,20 @@
         <template #grid-end>
           <AdvNativeBottom v-if="featureFlags.AdsNativeEnabled"/>
         </template>
+
+        <GridInsert
+          v-if="videoPage.webcamsBlock && videoPage.webcamsInRelatedAfter"
+          :after-cards="videoPage.webcamsInRelatedAfter"
+        >
+          <WebcamMain
+            v-if="legacyWebcams"
+            v-bind="legacyWebcams"
+          />
+          <WebcamMain
+            v-else
+            :reserve-tail="videoPage.webcamInserts"
+          />
+        </GridInsert>
       </LazyGridVideos>
     </section>
 
@@ -102,16 +116,18 @@
       hydrate-on-visible
     />
 
-    <WebcamMain
-      v-if="videoPage.webcamsBlock && legacyWebcams"
-      v-bind="legacyWebcams"
-      class="_mt-24"
-    />
-    <WebcamMain
-      v-else-if="videoPage.webcamsBlock"
-      :reserve-tail="videoPage.webcamInserts"
-      class="_mt-24"
-    />
+    <template v-if="videoPage.webcamsBlock && !videoPage.webcamsInRelatedAfter">
+      <WebcamMain
+        v-if="legacyWebcams"
+        v-bind="legacyWebcams"
+        class="_mt-24"
+      />
+      <WebcamMain
+        v-else
+        :reserve-tail="videoPage.webcamInserts"
+        class="_mt-24"
+      />
+    </template>
 
     <ViewVideoAfterRelatedSlot :data="data"/>
 

package/components/view/videos.vue

@@ -31,6 +31,7 @@
       v-if="data && data.items && data.items?.length > 0"
       :items="data.items"
       :webcams-query="webcamsQuery"
+      :no-webcams="noWebcams"
       :class="{'_loading': status === 'pending'}"
       class="view-videos__grid"
       id="anchor"
@@ -118,7 +119,9 @@ const props = defineProps<{
   /** Чипсы поисковых фраз во второй строке грида, как на странице категории. */
   relatedSearch?: IChipsItem[]
   /** Выборка вебкамов сетки (`GridVideos`). */
-  webcamsQuery?: { category?: string, random?: boolean, list?: number } | false
+  webcamsQuery?: { category?: string, random?: boolean, list?: number }
+  /** Сетка без вебкамов (`GridVideos`). */
+  noWebcams?: boolean
 }>();
 
 const route = useRoute();

package/components/webcam/main.vue

@@ -55,10 +55,13 @@ const props = withDefaults(defineProps<{
   id?: string
   /** Без счётчиков онлайна в шапке (мини-блок videosection.com). */
   hideCounts?: boolean
+  /** Только полные строки (по умолчанию); `false` — все модели, последняя строка может быть неполной. */
+  fullRows?: boolean
 }>(), {
   reserveTail: 0,
   offset: 0,
   random: true,
+  fullRows: true,
 });
 
 const NO_COUNTS = { total: 0, byLanguages: {} };
@@ -103,7 +106,7 @@ const columns = ref(0);
  */
 const visibleItems = computed<IStripcashModel[]>(() => {
   const cols = columns.value;
-  if (!cols) return blockItems.value;
+  if (!cols || !props.fullRows) return blockItems.value;
 
   return blockItems.value.slice(0, Math.floor(blockItems.value.length / cols) * cols);
 });

package/composables/fetch/use-search-related-phrases.ts

@@ -1,22 +1,28 @@
-import type { ComputedRef } from 'vue';
+import type { ComputedRef, Ref } from 'vue';
 import { SearchApiService } from '../../services/api/search.service';
+import type { IRelatedPhrases } from '../../types';
 
 /**
  * Фразы для чипсов страницы поиска (`useSearchPage`), без самой фразы поиска. С `appConfig.relatedSearches.queryLimit`
  * — топ похожих на запрос (`/video/related-searches`), без него — общие фразы (`/search/phrases`). Порядок —
- * `useRelatedPhrases`.
+ * `useRelatedPhrases`. Всё, что требует контекста Nuxt, вызывается до `await`: после него в обычной функции контекста нет.
  */
 export async function useSearchRelatedPhrases(): Promise<ComputedRef<string[]>> {
   const { queryLimit } = useAppConfig().relatedSearches;
   const query = useSlug();
+  const source = shallowRef<Ref<IRelatedPhrases | string[] | null | undefined> | null>(null);
+
+  const phrases = useRelatedPhrases(() => {
+    const value = source.value?.value;
+    const items = Array.isArray(value) ? value : value?.items;
+    return items?.filter(item => (typeof item === 'string' ? item : item.query) !== query.value);
+  }, useRelatedSearchLimit('queryLimit'));
 
   const { data } = queryLimit === null
     ? await useFetchRelatedSearch(SearchApiService.getPhrases)
     : await useFetchRelatedSearchesByQuery(SearchApiService.getRelatedSearches, query);
 
-  return useRelatedPhrases(() => {
-    const value = data.value;
-    const items = Array.isArray(value) ? value : value?.items;
-    return items?.filter(item => (typeof item === 'string' ? item : item.query) !== query.value);
-  }, useRelatedSearchLimit('queryLimit'));
+  source.value = data;
+
+  return phrases;
 }

package/composables/page/use-channel-page.ts

@@ -7,13 +7,14 @@ import { VideosApiService } from '../../services/api/videos.service';
 import type { IBreadcrumbItem, IChipsItem, IPopularTags, INavLinkItem } from '../../types';
 
 /**
- * Данные страницы канала: карточка канала, видео, популярные теги. Только запросы — их можно запускать в
+ * Данные страницы канала: карточка канала, видео, популярные теги (при `appConfig.channelTagsSource: 'popular'`). Только запросы — их можно запускать в
  * `Promise.all` вместе с запросами одной страницы (модели канала). Каналы сети зависят от карточки, их страница
  * запрашивает после. Разметку страница держит свою, логику — `useChannelPage()`.
  */
 export async function useChannelPageData() {
   const lang = useLang() as Language;
   const redirectLegacySlug = useLegacySlugRedirect('channel', name => ChannelsApiService.getChannelsByName(lang, name).then(Boolean));
+  const popularTags = useAppConfig().channelTagsSource !== 'channel';
 
   const [
     { data: cardInfo, status },
@@ -22,7 +23,9 @@ export async function useChannelPageData() {
   ] = await Promise.all([
     useFetchChannelsByName(ChannelsApiService.getChannelsByName),
     useFetchVideosByChannel(VideosApiService.getListByNicheAndChannel),
-    useFetchPopularTagsByChannelName(VideosApiService.popularTagsByChannelName),
+    popularTags
+      ? useFetchPopularTagsByChannelName(VideosApiService.popularTagsByChannelName)
+      : { data: ref<IPopularTags[] | null>(null) },
   ]);
 
   if (!cardInfo.value) await redirectLegacySlug();
@@ -76,9 +79,14 @@ export function useChannelPage(
     { name: title.value },
   ]);
 
-  const channelTags = computed<IChipsItem[]>(() => (channelTagsData.value || []).map((item: IPopularTags) => ({
-    title: item.title,
-    value: item.title,
+  const fromChannel = useAppConfig().channelTagsSource === 'channel';
+
+  const channelTags = computed<IChipsItem[]>(() => (fromChannel
+    ? (cardInfo.value?.tags || [])
+    : (channelTagsData.value || []).map((item: IPopularTags) => item.title)
+  ).map(tag => ({
+    title: tag,
+    value: tag,
     prefix: 'tag',
   })));
 

package/composables/use-grid-row-after.ts

@@ -1,35 +1,61 @@
 import { useDebounceFn } from '@vueuse/core';
 
+/** Где встать: после N строк карточек или после строки, в которой лежит N-я карточка. */
+export type GridInsertPlace = { rows: number } | { cards: number };
+
 /**
  * Ставит полноширинный блок CSS-сетки после N-й строки карточек — при любом числе колонок.
  *
  * Считаем по карточкам, а не по строкам сетки: в сетку попадают и полноширинные врезки (карусель
  * моделей, блок вебкамов, реклама), они занимают строку целиком. Карточку отличаем геометрически —
- * шириной в одну колонку. Карточек до нужной строки не хватает — блок остаётся на своём месте в DOM.
+ * шириной в одну колонку; скрытые (`display: none`) не считаем.
+ *
+ * `{ cards: N }` — после строки с N-й карточкой (без дыр в строке перед блоком; врезки с `data-grid-extra` не в счёт);
+ * карточек меньше — сразу за строкой последней. `{ rows: N }` — карточек до нужной строки не хватает — блок остаётся
+ * на своём месте в DOM.
  */
-export function placeAfterCardRows(el: HTMLElement | null, rows: number) {
+export function placeAfterCardRows(el: HTMLElement | null, place: number | GridInsertPlace) {
   const grid = el?.parentElement;
   if (!el || !grid) return;
 
   const columns = getComputedStyle(grid).gridTemplateColumns.split(' ').filter(Boolean);
   const columnWidth = Number.parseFloat(columns[0]) || 0;
 
-  const siblings = Array.from(grid.children).filter(item => item !== el) as HTMLElement[];
+  const siblings = (Array.from(grid.children) as HTMLElement[]).filter(item => item !== el && item.offsetWidth > 0);
   const cards = siblings.filter(item => item.offsetWidth <= columnWidth * 1.5);
+  const setRow = (row: string) => {
+    if (el.style.gridRow !== row) el.style.gridRow = row;
+  };
+
+  if (typeof place === 'object' && 'cards' in place) {
+    // N-я карточка выдачи (врезки с `data-grid-extra` — вебкам-тумбы — не в счёт) или последняя, если их меньше;
+    // блок — сразу за её строкой
+    const counted = cards.filter(item => !item.hasAttribute('data-grid-extra'));
+    const anchor = counted[place.cards - 1] || counted.at(-1);
+    const rowsUpToAnchor = anchor
+      ? new Set(siblings.filter(item => item.offsetTop <= anchor.offsetTop).map(item => item.offsetTop)).size
+      : 0;
+
+    setRow(anchor ? String(rowsUpToAnchor + 1) : '');
+
+    return;
+  }
+
+  const target = cards[(typeof place === 'number' ? place : place.rows) * columns.length];
 
-  const target = cards[rows * columns.length];
   if (!target) {
-    el.style.gridRow = '';
+    setRow('');
 
     return;
   }
 
   const rowsAbove = new Set(siblings.filter(item => item.offsetTop < target.offsetTop).map(item => item.offsetTop));
-  el.style.gridRow = String(rowsAbove.size + 1);
+  setRow(String(rowsAbove.size + 1));
 }
 
-/** То же для компонента: пересчёт на resize (меняются колонки) и на доезд карточек (ленивая гидрация). */
-export const useGridRowAfter = (el: Ref<HTMLElement | null>, rows: () => number) => {
+/** То же для компонента: пересчёт на resize (меняются колонки), на доезд карточек (ленивая гидрация) и на перестановку
+ *  соседних вставок. */
+export const useGridRowAfter = (el: Ref<HTMLElement | null>, rows: () => number | GridInsertPlace) => {
   const place = () => placeAfterCardRows(el.value, rows());
 
   onMounted(() => {
@@ -37,11 +63,19 @@ export const useGridRowAfter = (el: Ref<HTMLElement | null>, rows: () => number)
     if (!grid) return;
 
     const replace = useDebounceFn(place, 200);
-    const observer = new MutationObserver(replace);
+    // соседние вставки (реклама, другие блоки) тоже переставляют себя через style — пересчитываемся вслед за ними;
+    // style внутри карточек (превью и пр.) не интересен — только у прямых детей сетки, кроме себя
+    const observer = new MutationObserver((mutations) => {
+      if (mutations.some(item => (item.type === 'childList'
+        ? item.target === grid
+        : item.target.parentElement === grid && item.target !== el.value))) {
+        replace();
+      }
+    });
 
     place();
     window.addEventListener('resize', replace, { passive: true });
-    observer.observe(grid, { childList: true });
+    observer.observe(grid, { childList: true, subtree: true, attributes: true, attributeFilter: ['style'] });
 
     onBeforeUnmount(() => {
       window.removeEventListener('resize', replace);

package/package.json

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

package/services/api/playlists.service.ts

@@ -78,11 +78,13 @@ export class PlaylistsApiService {
         );
     }
 
+    /** Ролики плейлиста. Размер страницы — `per-page` (`limit` ручка не знает); без него в `pagination` — 200, весь
+     *  плейлист одной страницей, как на плеере плейлиста videosection.com. */
     static async getVideosByPlaylist(
         id: string,
         pagination: RequestPagination,
         lang: Language,
-        limit? = 100,
+        perPage = 200,
     ): Promise<PaginatedResponse<IVideoCard>> {
         return await ApiHelper.fetch(
             `/playlist/get-playlist-videos-by-id/${id}`,
@@ -94,7 +96,7 @@ export class PlaylistsApiService {
                     'Content-Type': 'application/json',
                 },
                 params: {
-                    limit: limit,
+                    'per-page': perPage,
                     ...pagination,
                 },
             },