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

Remove responsive ad sizes and simplify ad implementation

Browse Source 
Remove mobileWidth and mobileHeight props from AdSenseAd component, update initialization logic, and simplify ad rendering to non-responsive fixed sizes.

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/Myr4JGO
This commit is contained in:
sebastjanartic 2025-09-28 12:54:07 +00:00
parent e03f94b499
commit 235dc584ec
4 changed files with 20 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.replit
View File

@ -23,6 +23,10 @@ externalPort = 3001
localPort = 35637
externalPort = 3000
[[ports]]
localPort = 41551
externalPort = 3002
[env]
PORT = "5000"

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

@ -5,8 +5,6 @@ interface AdSenseAdProps {
adFormat?: 'auto' | 'rectangle' | 'vertical' | 'horizontal';
width?: number;
height?: number;
mobileWidth?: number;
mobileHeight?: number;
className?: string;
lazy?: boolean;
}
@ -16,32 +14,22 @@ export default function AdSenseAd({
adFormat = 'auto',
width,
height,
mobileWidth,
mobileHeight,
className = '',
lazy = false
}: AdSenseAdProps) {
const adRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const initializeAds = () => {
const insElements = adRef.current?.querySelectorAll('ins');
if (!insElements) return;
const initializeAd = () => {
const insElement = adRef.current?.querySelector('ins');
if (!insElement || insElement.dataset.adsbygoogleStatus === 'done') return;
insElements.forEach((insElement) => {
if (insElement.dataset.adsbygoogleStatus === 'done') return;
// Check if this ad is visible (not hidden by responsive classes)
const computedStyle = window.getComputedStyle(insElement);
if (computedStyle.display === 'none') return;
try {
// @ts-ignore
(window.adsbygoogle = window.adsbygoogle || []).push({});
} catch (error) {
console.error('AdSense initialization error:', error);
}
});
try {
// @ts-ignore
(window.adsbygoogle = window.adsbygoogle || []).push({});
} catch (error) {
console.error('AdSense initialization error:', error);
}
};
if (lazy) {
@ -50,8 +38,7 @@ export default function AdSenseAd({
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
// Small delay to ensure responsive CSS has been applied
setTimeout(initializeAds, 100);
initializeAd();
observer.disconnect();
}
});
@ -65,49 +52,12 @@ export default function AdSenseAd({
return () => observer.disconnect();
} else {
// Immediate initialization with delay for responsive CSS
setTimeout(initializeAds, 100);
// Immediate initialization
initializeAd();
}
}, [adSlot, lazy]);
// 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 flex justify-center ${className}`}
ref={adRef}
style={{ width: '100%', minWidth: '320px', position: 'relative', zIndex: 1 }}
>
{/* 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 mx-auto"
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)
// Simple non-responsive ad configuration
const isFixedSize = width && height;
const adStyle: React.CSSProperties = {
display: 'inline-block'
@ -117,7 +67,8 @@ export default function AdSenseAd({
adStyle.width = `${width}px`;
adStyle.height = `${height}px`;
} else {
adStyle.width = '100%';
// Default banner size
adStyle.width = '728px';
adStyle.height = '90px';
}
@ -132,10 +83,7 @@ export default function AdSenseAd({
style={adStyle}
data-ad-client="ca-pub-4465464714854276"
data-ad-slot={adSlot}
{...(isFixedSize ? {} : {
'data-ad-format': adFormat,
'data-full-width-responsive': 'true'
})}
data-ad-format="auto"
/>
</div>
);

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

@ -461,8 +461,6 @@ export default function LivePage() {
adSlot="3047267170"
width={728}
height={90}
mobileWidth={300}
mobileHeight={250}
className="w-full"
/>
</div>
@ -476,8 +474,6 @@ export default function LivePage() {
adSlot="5629279662"
width={728}
height={90}
mobileWidth={300}
mobileHeight={250}
className="w-full"
/>
</div>
@ -540,8 +536,6 @@ export default function LivePage() {
adSlot="9876543210"
width={728}
height={90}
mobileWidth={300}
mobileHeight={250}
/>
</div>
</div>

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

@ -781,8 +781,6 @@ export default function VideoPage() {
adSlot="5629279662"
width={728}
height={90}
mobileWidth={300}
mobileHeight={250}
className="w-full"
/>
</div>
@ -797,8 +795,6 @@ export default function VideoPage() {
adSlot="5629279662"
width={728}
height={90}
mobileWidth={300}
mobileHeight={250}
className="w-full"
/>
</div>
@ -863,8 +859,6 @@ export default function VideoPage() {
adSlot="1372934919"
width={728}
height={90}
mobileWidth={300}
mobileHeight={250}
className="w-full"
/>
</div>