1

utils/videoRows.ts

@@ -13,26 +13,26 @@ export interface BigRow {
 
 export type ListRow = NormalRow | BigRow;
 
+const PAGE = 21; // matches API page size
+
 /**
  * Transform a flat VideoItem array into display rows.
- * The last item always becomes a full-width BigRow.
- * All preceding items are grouped into NormalRow pairs.
+ * Videos are chunked by page size (20). The last item of each chunk
+ * becomes a full-width BigRow so BigVideoCards stay at stable positions
+ * even as more pages are loaded.
  */
+
 export function toListRows(videos: VideoItem[]): ListRow[] {
   if (videos.length === 0) return [];
-  if (videos.length === 1) return [{ type: 'big', item: videos[0] }];
-
   const rows: ListRow[] = [];
-  const body = videos.slice(0, videos.length - 1);
-
-  for (let i = 0; i < body.length; i += 2) {
-    rows.push({
-      type: 'pair',
-      left: body[i],
-      right: body[i + 1] ?? null,
-    });
+  for (let start = 0; start < videos.length; start += PAGE) {
+    const chunk = videos.slice(start, start + PAGE);
+    const body = chunk.slice(0, chunk.length - 1);
+    for (let i = 0; i < body.length; i += 2) {
+      rows.push({ type: 'pair', left: body[i], right: body[i + 1] ?? null });
+    }
+    rows.push({ type: 'big', item: chunk[chunk.length - 1] });
   }
 
-  rows.push({ type: 'big', item: videos[videos.length - 1] });
   return rows;
 }