Integrate ads to enhance platform monetization and user engagement

Introduce AdSenseAd component and integrate it across multiple pages (VideoPage, Home) to display various ad formats, including header, sidebar, and mid-content placements.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 946a0075-7e32-454b-b348-9e7f576d7f45
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/60d372ff-2c10-46c7-b01b-10c3435136b0/946a0075-7e32-454b-b348-9e7f576d7f45/tiAdL5T

client/src/components/adsense-ad.tsx

@@ -0,0 +1,56 @@
+import { useEffect, useRef } from 'react';
+
+interface AdSenseAdProps {
+  adSlot: string;
+  adFormat?: 'auto' | 'rectangle' | 'vertical' | 'horizontal';
+  width?: number;
+  height?: number;
+  className?: string;
+}
+
+export default function AdSenseAd({ 
+  adSlot, 
+  adFormat = 'auto',
+  width,
+  height,
+  className = '' 
+}: AdSenseAdProps) {
+  const adRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    try {
+      // Ensure adsbygoogle is loaded
+      if (typeof window !== 'undefined') {
+        // @ts-ignore
+        (window.adsbygoogle = window.adsbygoogle || []).push({});
+      }
+    } catch (error) {
+      console.error('AdSense initialization error:', error);
+    }
+  }, []);
+
+  const adStyle: React.CSSProperties = {
+    display: 'block'
+  };
+
+  if (adFormat !== 'auto' && width && height) {
+    adStyle.width = `${width}px`;
+    adStyle.height = `${height}px`;
+  } else {
+    adStyle.width = '100%';
+    adStyle.height = 'auto';
+  }
+
+  return (
+    <div className={`adsense-wrapper ${className}`} ref={adRef}>
+      <ins
+        className="adsbygoogle"
+        style={adStyle}
+        data-ad-client="ca-pub-4465464714854276"
+        data-ad-slot={adSlot}
+        data-ad-format={adFormat}
+        data-full-width-responsive="true"
+      />
+    </div>
+  );
+}

client/src/pages/VideoPage.tsx

@@ -43,6 +43,7 @@ import {
   TwitterIcon,
   WhatsappIcon,
 } from "react-share";
+import AdSenseAd from "@/components/adsense-ad";
 
 interface VideosResponse {
   videos: Video[];
@@ -737,6 +738,17 @@ export default function VideoPage() {
 
           {/* Recommended videos sidebar */}
           <div className="w-full lg:w-96">
+            {/* Sidebar Ad */}
+            <div className="mb-6">
+              <AdSenseAd 
+                adSlot="1234567893"
+                adFormat="rectangle"
+                width={300}
+                height={250}
+                className="w-full"
+              />
+            </div>
+            
             <h2 className="text-lg font-semibold text-bunny-light mb-4">Empfohlene Videos</h2>
             
             <div className="space-y-2">
@@ -790,6 +802,17 @@ export default function VideoPage() {
                 </div>
               ))}
             </div>
+            
+            {/* Bottom Sidebar Ad */}
+            <div className="mt-6">
+              <AdSenseAd 
+                adSlot="1234567894"
+                adFormat="rectangle"
+                width={300}
+                height={250}
+                className="w-full"
+              />
+            </div>
           </div>
         </div>
       </div>

client/src/pages/home.tsx

@@ -5,6 +5,7 @@ import NetflixGrid from "@/components/netflix-grid";
 import { Link } from "wouter";
 import { Input } from "@/components/ui/input";
 import { Search, Menu, X } from "lucide-react";
+import AdSenseAd from "@/components/adsense-ad";
 
 interface VideosResponse {
   videos: Video[];
@@ -194,15 +195,51 @@ export default function Home() {
         )}
       </div>
 
+      {/* Header Banner Ad */}
+      <div className="container py-4 border-b border-white/10">
+        <div className="flex justify-center">
+          <AdSenseAd 
+            adSlot="1234567890"
+            adFormat="horizontal"
+            width={728}
+            height={90}
+            className="max-w-full"
+          />
+        </div>
+      </div>
+
       <main className="w-full pt-8 pb-8 relative">
         <div className="container">
           <NetflixGrid
             videos={allVideos}
             isLoading={isLoading}
           />
+          
+          {/* Mid-content Rectangle Ad */}
+          <div className="flex justify-center my-8 py-4">
+            <AdSenseAd 
+              adSlot="1234567891"
+              adFormat="rectangle"
+              width={336}
+              height={280}
+            />
+          </div>
         </div>
       </main>
 
+      {/* Bottom Banner Ad */}
+      <div className="container py-4 border-t border-white/10">
+        <div className="flex justify-center">
+          <AdSenseAd 
+            adSlot="1234567892"
+            adFormat="horizontal"
+            width={728}
+            height={90}
+            className="max-w-full"
+          />
+        </div>
+      </div>
+
       {/* Footer */}
       <footer className="bg-bunny-dark/90 border-t border-white/10 py-8 mt-12">
         <div className="container">