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

client/src/components/ad-explanation.tsx

@@ -0,0 +1,80 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Info, DollarSign, PlayCircle, Eye } from "lucide-react";
+
+interface AdExplanationProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function AdExplanation({ isOpen, onClose }: AdExplanationProps) {
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="bg-gray-800 border-gray-700 text-white max-w-2xl">
+        <DialogHeader>
+          <DialogTitle className="text-xl font-bold flex items-center gap-2">
+            <DollarSign className="w-6 h-6 text-yellow-500" />
+            Kaj pomenijo oznake "💰 OGLAS"?
+          </DialogTitle>
+        </DialogHeader>
+        
+        <div className="space-y-6 py-4">
+          <div className="bg-yellow-500/10 border border-yellow-500/20 rounded-lg p-4">
+            <div className="flex items-center gap-2 mb-2">
+              <div className="bg-gradient-to-r from-yellow-500 to-orange-500 text-white text-xs px-2 py-1 rounded-full font-bold">
+                💰 OGLAS
+              </div>
+              <span className="text-yellow-300 font-medium">Monetizirani videji</span>
+            </div>
+            <p className="text-sm text-gray-300">
+              Te oznake prikazujejo, da so videji opremljeni z naprednim VAST oglasnim sistemom
+            </p>
+          </div>
+          
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="bg-gray-700/50 rounded-lg p-4">
+              <div className="flex items-center gap-2 mb-2">
+                <PlayCircle className="w-5 h-5 text-blue-400" />
+                <h3 className="font-medium">Kako deluje?</h3>
+              </div>
+              <p className="text-sm text-gray-300">
+                Pred ali med predvajanjem videa se prikazujejo oglasi, ki omogočajo brezplačno gledanje vsebine
+              </p>
+            </div>
+            
+            <div className="bg-gray-700/50 rounded-lg p-4">
+              <div className="flex items-center gap-2 mb-2">
+                <Eye className="w-5 h-5 text-green-400" />
+                <h3 className="font-medium">Brezplačno gledanje</h3>
+              </div>
+              <p className="text-sm text-gray-300">
+                Oglasi omogočajo, da lahko vse videji gledate povsem brezplačno brez naročnine
+              </p>
+            </div>
+          </div>
+          
+          <div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-4">
+            <h3 className="font-medium text-blue-300 mb-2">VAST oglasni sistem</h3>
+            <p className="text-sm text-gray-300 mb-2">
+              Platforma uporablja profesionalni VAST (Video Ad Serving Template) sistem z 5 oglasnimi mrežami:
+            </p>
+            <ul className="text-sm text-gray-300 space-y-1">
+              <li>• Publift - Agregator več oglaševalskih omrežij</li>
+              <li>• Vdo.ai - AI ciljanje z visokim eCPM</li>
+              <li>• Primis - Video discovery platforma</li>
+              <li>• AdPlayer.Pro - Outstream rešitve</li>
+              <li>• Aniview - Programmatic oglasne tehnologije</li>
+            </ul>
+          </div>
+          
+          <div className="flex justify-end">
+            <Button onClick={onClose} className="bg-bunny-blue hover:bg-blue-600">
+              Razumem
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

client/src/components/search-header.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Search, Play, Menu, Grid3X3, List, DollarSign, Settings } from "lucide-react";
+import { Search, Play, Menu, Grid3X3, List, DollarSign, Settings, Info } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
@@ -9,13 +9,15 @@ interface SearchHeaderProps {
   onViewChange: (view: "grid" | "list") => void;
   currentView: "grid" | "list";
   onAdSettingsOpen?: () => void;
+  onAdExplanationOpen?: () => void;
 }
 
 export default function SearchHeader({
   onSearch,
   onViewChange,
   currentView,
-  onAdSettingsOpen
+  onAdSettingsOpen,
+  onAdExplanationOpen
 }: SearchHeaderProps) {
   const [searchQuery, setSearchQuery] = useState("");
 

client/src/components/video-card.tsx

@@ -56,6 +56,8 @@ export default function VideoCard({ video, onClick }: VideoCardProps) {
           alt={video.title}
           className="w-full h-full object-cover transition-all duration-300 group-hover:scale-105"
           data-testid={`img-thumbnail-${video.id}`}
+          loading="lazy"
+          decoding="async"
           onError={(e) => {
             const target = e.target as HTMLImageElement;
             target.style.display = 'none';
@@ -72,7 +74,7 @@ export default function VideoCard({ video, onClick }: VideoCardProps) {
         
         {/* VAST Ad monetization indicator */}
         <div className="absolute top-2 left-2 bg-gradient-to-r from-yellow-500 to-orange-500 text-white text-xs px-2 py-1 rounded-full font-bold shadow-lg">
-          💰 SPOT
+          💰 OGLAS
         </div>
         
         {/* Play button overlay */}