Add explanation for ad indicators and improve video loading

Introduce a new modal to explain the meaning of ad indicators and enhance video loading performance by implementing lazy loading and async decoding.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d7424866-83d1-4486-a212-ac12b4c7becf
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/d7424866-83d1-4486-a212-ac12b4c7becf/BWSPHB9

server/routes.ts

@@ -132,9 +132,9 @@ export async function registerRoutes(app: Express): Promise<Server> {
   // Bunny.net administration routes
   app.get("/api/bunny/stats", async (req, res) => {
     try {
-      const result = await storage.getVideos(1, 1000);
+      const result = await storage.getVideos({ limit: 1000, offset: 0 });
       const videos = result?.videos || [];
-      const totalViews = videos.length > 0 ? videos.reduce((sum, video) => sum + video.views, 0) : 0;
+      const totalViews = videos.length > 0 ? videos.reduce((sum: number, video: any) => sum + video.views, 0) : 0;
       
       const stats = {
         totalVideos: videos.length,
@@ -165,19 +165,26 @@ export async function registerRoutes(app: Express): Promise<Server> {
 
   app.get("/api/videos", async (req, res) => {
     try {
+      // Set cache headers for better performance
+      res.set({
+        'Cache-Control': 'public, max-age=300, s-maxage=300', // 5 minutes cache
+        'ETag': `"videos-${Date.now()}"`,
+        'X-Content-Type-Options': 'nosniff',
+        'X-Frame-Options': 'DENY'
+      });
+
       const limit = parseInt(req.query.limit as string) || 20;
       const offset = parseInt(req.query.offset as string) || 0;
       const search = req.query.search as string;
 
-      const videos = await storage.getVideos(limit, offset, search);
-      const total = await storage.getVideoCount(search);
-
-      res.json({
-        videos,
-        total,
-        hasMore: offset + limit < total
-      });
+      console.log(`Fetching videos: limit=${limit}, offset=${offset}, search=${search}`);
+      
+      const result = await storage.getVideos({ limit, offset, search });
+      console.log(`Returning ${result.videos.length} videos`);
+      
+      res.json(result);
     } catch (error) {
+      console.error("Error fetching videos:", error);
       res.status(500).json({ message: "Failed to fetch videos" });
     }
   });