diff --git a/client/src/components/adsense-ad.tsx b/client/src/components/adsense-ad.tsx new file mode 100644 index 0000000..961ba7e --- /dev/null +++ b/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(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 ( +
+ +
+ ); +} \ No newline at end of file diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx index c8b7c09..89bf414 100644 --- a/client/src/pages/VideoPage.tsx +++ b/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 */}
+ {/* Sidebar Ad */} +
+ +
+

Empfohlene Videos

@@ -790,6 +802,17 @@ export default function VideoPage() {
))}
+ + {/* Bottom Sidebar Ad */} +
+ +
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx index 1f168ea..4364c41 100644 --- a/client/src/pages/home.tsx +++ b/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() { )} + {/* Header Banner Ad */} +
+
+ +
+
+
+ + {/* Mid-content Rectangle Ad */} +
+ +
+ {/* Bottom Banner Ad */} +
+
+ +
+
+ {/* Footer */}