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/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<Video[]>([]);
   const [showAdSettings, setShowAdSettings] = useState(false);
+  const [showAdExplanation, setShowAdExplanation] = useState(false);
 
   // Fetch videos
   const { data: videosResponse, isLoading, refetch } = useQuery<VideosResponse>({
@@ -77,6 +79,7 @@ export default function Home() {
         onViewChange={setViewMode}
         currentView={viewMode}
         onAdSettingsOpen={() => setShowAdSettings(true)}
+        onAdExplanationOpen={() => setShowAdExplanation(true)}
       />
 
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
@@ -94,6 +97,12 @@ export default function Home() {
         isOpen={showAdSettings}
         onClose={() => setShowAdSettings(false)}
       />
+      
+      {/* Ad Explanation Modal */}
+      <AdExplanation 
+        isOpen={showAdExplanation}
+        onClose={() => setShowAdExplanation(false)}
+      />
 
       {/* Footer */}
       <footer className="bg-bunny-gray/50 border-t border-gray-700 mt-16">