Add monetization features for ad revenue generation and management

Integrate VAST ad player, ad settings UI, and monetization dashboard for ad network integration and revenue tracking.

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/nN8xkSA

client/src/pages/home.tsx

@@ -3,6 +3,7 @@ import { useQuery } from "@tanstack/react-query";
 import { type Video } from "@shared/schema";
 import SearchHeader from "@/components/search-header";
 import VideoGrid from "@/components/video-grid";
+import AdSettings from "@/components/ad-settings";
 
 interface VideosResponse {
   videos: Video[];
@@ -15,6 +16,7 @@ export default function Home() {
   const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
   const [offset, setOffset] = useState(0);
   const [allVideos, setAllVideos] = useState<Video[]>([]);
+  const [showAdSettings, setShowAdSettings] = useState(false);
 
   // Fetch videos
   const { data: videosResponse, isLoading, refetch } = useQuery<VideosResponse>({
@@ -74,6 +76,7 @@ export default function Home() {
         onSearch={handleSearch}
         onViewChange={setViewMode}
         currentView={viewMode}
+        onAdSettingsOpen={() => setShowAdSettings(true)}
       />
 
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
@@ -86,6 +89,12 @@ export default function Home() {
         />
       </main>
 
+      {/* VAST Ad Settings Modal */}
+      <AdSettings 
+        isOpen={showAdSettings}
+        onClose={() => setShowAdSettings(false)}
+      />
+
       {/* Footer */}
       <footer className="bg-bunny-gray/50 border-t border-gray-700 mt-16">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">