diff --git a/client/src/components/ad-explanation.tsx b/client/src/components/ad-explanation.tsx
new file mode 100644
index 0000000..6d46dd1
--- /dev/null
+++ b/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 (
+
+ );
+}
\ No newline at end of file
diff --git a/client/src/components/search-header.tsx b/client/src/components/search-header.tsx
index 53c4978..96a661c 100644
--- a/client/src/components/search-header.tsx
+++ b/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("");
diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index 058e7b2..2c7d318 100644
--- a/client/src/components/video-card.tsx
+++ b/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 */}
- 💰 SPOT
+ 💰 OGLAS
{/* Play button overlay */}
diff --git a/client/src/lib/queryClient.ts b/client/src/lib/queryClient.ts
index f315a14..52dd842 100644
--- a/client/src/lib/queryClient.ts
+++ b/client/src/lib/queryClient.ts
@@ -47,8 +47,9 @@ export const queryClient = new QueryClient({
queryFn: getQueryFn({ on401: "throw" }),
refetchInterval: false,
refetchOnWindowFocus: false,
- staleTime: Infinity,
- retry: false,
+ staleTime: 5 * 60 * 1000, // 5 minutes cache
+ gcTime: 10 * 60 * 1000, // 10 minutes retention
+ retry: 1,
},
mutations: {
retry: false,
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 29f6d58..761a25d 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -4,6 +4,7 @@ import { type Video } from "@shared/schema";
import SearchHeader from "@/components/search-header";
import VideoGrid from "@/components/video-grid";
import AdSettings from "@/components/ad-settings";
+import AdExplanation from "@/components/ad-explanation";
interface VideosResponse {
videos: Video[];
@@ -17,6 +18,7 @@ export default function Home() {
const [offset, setOffset] = useState(0);
const [allVideos, setAllVideos] = useState