sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjust ad sizes for mobile and desktop displays

Browse Source 
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
This commit is contained in:
sebastjanartic 2025-09-27 05:14:27 +00:00
parent 2994138b00
commit 98cbe292b0
3 changed files with 70 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
client/src/components/adsense-ad.tsx
View File

@ -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'

27
client/src/pages/LivePage.tsx
View File

@ -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>

15
client/src/pages/VideoPage.tsx
View File

@ -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>