From 98cbe292b0490bfac9766c4494dc0bd887191cab Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 27 Sep 2025 05:14:27 +0000
Subject: [PATCH] Adjust ad sizes for mobile and desktop displays

Introduce responsive ad size configurations in `AdSenseAd.tsx` to display smaller ads on mobile devices and larger ads on desktop for both live and video pages.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 45a1dcfc-f8a2-475a-a6b9-96fbb841dc27
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/60d372ff-2c10-46c7-b01b-10c3435136b0/45a1dcfc-f8a2-475a-a6b9-96fbb841dc27/JMKe3od
---
 client/src/components/adsense-ad.tsx | 43 +++++++++++++++++++++++++++-
 client/src/pages/LivePage.tsx        | 27 ++++++++++-------
 client/src/pages/VideoPage.tsx       | 15 ++++++++--
 3 files changed, 70 insertions(+), 15 deletions(-)

diff --git a/client/src/components/adsense-ad.tsx b/client/src/components/adsense-ad.tsx
index 179bd15..a1d9911 100644
--- a/client/src/components/adsense-ad.tsx
+++ b/client/src/components/adsense-ad.tsx
@@ -5,6 +5,8 @@ interface AdSenseAdProps {
   adFormat?: 'auto' | 'rectangle' | 'vertical' | 'horizontal';
   width?: number;
   height?: number;
+  mobileWidth?: number;
+  mobileHeight?: number;
   className?: string;
   lazy?: boolean;
 }
@@ -14,6 +16,8 @@ export default function AdSenseAd({
   adFormat = 'auto',
   width,
   height,
+  mobileWidth,
+  mobileHeight,
   className = '',
   lazy = false
 }: AdSenseAdProps) {
@@ -57,7 +61,44 @@ export default function AdSenseAd({
     }
   }, [adSlot, lazy]);
 
-  // Fixed size configuration
+  // Responsive configuration
+  const hasResponsiveSizes = (width && height) || (mobileWidth && mobileHeight);
+  
+  if (hasResponsiveSizes) {
+    // Responsive ads with different sizes for desktop/mobile
+    return (
+      <div 
+        className={`adsense-wrapper w-full ${className}`} 
+        ref={adRef}
+        style={{ width: '100%', minWidth: '320px' }}
+      >
+        {/* Desktop ad */}
+        <ins
+          className="adsbygoogle hidden md:inline-block"
+          style={{ 
+            display: 'inline-block',
+            width: width ? `${width}px` : '728px',
+            height: height ? `${height}px` : '90px'
+          }}
+          data-ad-client="ca-pub-4465464714854276"
+          data-ad-slot={adSlot}
+        />
+        {/* Mobile ad */}
+        <ins
+          className="adsbygoogle block md:hidden"
+          style={{ 
+            display: 'inline-block',
+            width: mobileWidth ? `${mobileWidth}px` : '300px',
+            height: mobileHeight ? `${mobileHeight}px` : '250px'
+          }}
+          data-ad-client="ca-pub-4465464714854276"
+          data-ad-slot={adSlot}
+        />
+      </div>
+    );
+  }
+
+  // Standard configuration (non-responsive)
   const isFixedSize = width && height;
   const adStyle: React.CSSProperties = {
     display: 'inline-block'
diff --git a/client/src/pages/LivePage.tsx b/client/src/pages/LivePage.tsx
index 47f6a33..e90dcc7 100644
--- a/client/src/pages/LivePage.tsx
+++ b/client/src/pages/LivePage.tsx
@@ -457,15 +457,14 @@ export default function LivePage() {
 
             {/* AdSense Ad under video stream */}
             <div className="mt-6">
-              <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4465464714854276" crossOrigin="anonymous"></script>
-              <ins className="adsbygoogle"
-                   style={{display: 'block'}}
-                   data-ad-format="autorelaxed"
-                   data-ad-client="ca-pub-4465464714854276"
-                   data-ad-slot="3047267170"></ins>
-              <script dangerouslySetInnerHTML={{
-                __html: `(adsbygoogle = window.adsbygoogle || []).push({});`
-              }} />
+              <AdSenseAd 
+                adSlot="3047267170"
+                width={728}
+                height={90}
+                mobileWidth={300}
+                mobileHeight={250}
+                className="w-full"
+              />
             </div>
           </div>
 
@@ -475,7 +474,10 @@ export default function LivePage() {
             <div className="mb-6">
               <AdSenseAd 
                 adSlot="5629279662"
-                adFormat="auto"
+                width={728}
+                height={90}
+                mobileWidth={300}
+                mobileHeight={250}
                 className="w-full"
               />
             </div>
@@ -536,7 +538,10 @@ export default function LivePage() {
             <div className="mt-6">
               <AdSenseAd 
                 adSlot="9876543210"
-                adFormat="vertical" 
+                width={728}
+                height={90}
+                mobileWidth={300}
+                mobileHeight={250}
               />
             </div>
           </div>
diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index ddb1f8b..fc9ced6 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -779,7 +779,10 @@ export default function VideoPage() {
               <div className="mt-6">
                 <AdSenseAd 
                   adSlot="5629279662"
-                  adFormat="auto"
+                  width={728}
+                  height={90}
+                  mobileWidth={300}
+                  mobileHeight={250}
                   className="w-full"
                 />
               </div>
@@ -792,7 +795,10 @@ export default function VideoPage() {
             <div className="mb-6">
               <AdSenseAd 
                 adSlot="5629279662"
-                adFormat="auto"
+                width={728}
+                height={90}
+                mobileWidth={300}
+                mobileHeight={250}
                 className="w-full"
               />
             </div>
@@ -855,7 +861,10 @@ export default function VideoPage() {
             <div className="mt-6">
               <AdSenseAd 
                 adSlot="1372934919"
-                adFormat="auto"
+                width={728}
+                height={90}
+                mobileWidth={300}
+                mobileHeight={250}
                 className="w-full"
               />
             </div>