itube-specs 0.0.1058 → 0.0.1059

package/SITE_UPDATES.md

@@ -11,6 +11,21 @@
 коммиты до бампа); `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'` — как было, популярные теги

package/app.config.ts

@@ -61,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 + врезки из хвоста на случайных местах. */
@@ -86,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/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.1058",
+  "version": "0.0.1059",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {