feat: smart video prefetching - buffer first 3 videos immediately on load

frontend/src/components/Feed.tsx

@@ -332,6 +332,9 @@ export const Feed: React.FC = () => {
                     if (loaded.length > 0) {
                         setVideos(loaded);
                         setViewState('feed');
+
+                        // Start prefetching first 3 videos immediately
+                        videoPrefetcher.prefetchInitialBatch(loaded, 3);
                     }
                 }
             );

frontend/src/utils/videoPrefetch.ts

@@ -8,8 +8,8 @@ interface PrefetchConfig {
 }
 
 const DEFAULT_CONFIG: PrefetchConfig = {
-  lookahead: 2,
-  concurrency: 1,
+  lookahead: 3,        // Increased from 2 for better buffering
+  concurrency: 2,      // Increased from 1 for parallel downloads
   timeoutMs: 30000
 };
 
@@ -49,6 +49,33 @@ class VideoPrefetcher {
     }
   }
 
+  /**
+   * Prefetch initial batch of videos immediately after feed loads.
+   * This ensures first few videos are ready before user starts scrolling.
+   */
+  async prefetchInitialBatch(
+    videos: Video[],
+    count: number = 3
+  ): Promise<void> {
+    if (!this.isInitialized) await this.init();
+    if (videos.length === 0) return;
+
+    console.log(`PREFETCH: Starting initial batch of ${Math.min(count, videos.length)} videos...`);
+
+    const toPrefetch = videos
+      .slice(0, count)
+      .filter((v) => v.url && !this.prefetchQueue.has(v.id));
+
+    // Start all prefetches in parallel (respects concurrency via browser limits)
+    const promises = toPrefetch.map((video) => {
+      this.prefetchQueue.add(video.id);
+      return this.prefetchVideo(video);
+    });
+
+    await Promise.allSettled(promises);
+    console.log(`PREFETCH: Initial batch complete (${toPrefetch.length} videos buffered)`);
+  }
+
   private async prefetchVideo(video: Video): Promise<void> {
     if (!video.url) return;