diff --git a/.replit b/.replit index 2c88453..40cc28f 100644 --- a/.replit +++ b/.replit @@ -24,7 +24,7 @@ localPort = 35637 externalPort = 3000 [[ports]] -localPort = 44083 +localPort = 45277 externalPort = 3002 [env] diff --git a/client/src/components/adsense-ad.tsx b/client/src/components/adsense-ad.tsx index cbbdb69..273dda2 100644 --- a/client/src/components/adsense-ad.tsx +++ b/client/src/components/adsense-ad.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef } from 'react'; +import { useEffect, useRef, useState } from 'react'; interface AdSenseAdProps { adSlot: string; @@ -16,18 +16,51 @@ export default function AdSenseAd({ className = '' }: AdSenseAdProps) { const adRef = useRef(null); + const [isInitialized, setIsInitialized] = useState(false); useEffect(() => { - try { - // Ensure adsbygoogle is loaded - if (typeof window !== 'undefined') { - // @ts-ignore - (window.adsbygoogle = window.adsbygoogle || []).push({}); + if (isInitialized) return; + + const initializeAd = () => { + const insElement = adRef.current?.querySelector('ins'); + if (!insElement) return; + + // Check if element has width > 0 + const clientWidth = insElement.clientWidth; + if (clientWidth > 0) { + try { + // @ts-ignore + (window.adsbygoogle = window.adsbygoogle || []).push({}); + setIsInitialized(true); + } catch (error) { + console.error('AdSense initialization error:', error); + } } - } catch (error) { - console.error('AdSense initialization error:', error); + }; + + // Try immediate initialization after short delay + const timer = setTimeout(initializeAd, 100); + + // Use ResizeObserver as fallback + if (typeof window !== 'undefined' && window.ResizeObserver) { + const observer = new ResizeObserver(() => { + if (!isInitialized) { + initializeAd(); + } + }); + + if (adRef.current) { + observer.observe(adRef.current); + } + + return () => { + clearTimeout(timer); + observer.disconnect(); + }; } - }, [adSlot]); + + return () => clearTimeout(timer); + }, [adSlot, isInitialized]); const adStyle: React.CSSProperties = { display: 'block', @@ -44,7 +77,11 @@ export default function AdSenseAd({ } return ( -
+
(null); diff --git a/client/src/pages/GeschichteLiedPage.tsx b/client/src/pages/GeschichteLiedPage.tsx index 3260953..e57d562 100644 --- a/client/src/pages/GeschichteLiedPage.tsx +++ b/client/src/pages/GeschichteLiedPage.tsx @@ -8,6 +8,7 @@ import { useState, useEffect } from 'react'; import type { Video } from '@shared/schema'; import { Input } from '@/components/ui/input'; import { Search } from 'lucide-react'; +import AdSenseAd from '@/components/adsense-ad'; export default function GeschichteLiedPage() { const [selectedVideo, setSelectedVideo] = useState