sebastjan/folx-tv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hide empty ad containers to prevent layout stretching

Browse Source 
Update AdSense component to accept an onAdStatus callback, allowing parent components to conditionally render ads based on their loaded status. The SidebarAd component now uses this callback to hide itself when no ad is available, preventing empty space and layout distortion.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 7b04aa60-f1a0-418c-904a-d16b3954518f
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/ls5p9ni
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-03-01 09:54:45 +00:00
parent 3d7bfec657
commit bb66851f40
2 changed files with 29 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1772358837576.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 490 KiB

42
client/src/components/adsense.tsx
View File

@ -10,6 +10,7 @@ interface AdSenseProps {
style?: Record<string, string>;
layout?: string;
layoutKey?: string;
onAdStatus?: (filled: boolean) => void;
}
export default function AdSense({
@ -20,10 +21,10 @@ export default function AdSense({
style,
layout,
layoutKey,
onAdStatus,
}: AdSenseProps) {
const adRef = useRef<HTMLModElement>(null);
const pushed = useRef(false);
const [adLoaded, setAdLoaded] = useState(false);
useEffect(() => {
if (pushed.current) return;
@ -34,17 +35,29 @@ export default function AdSense({
} catch (e) {
}
const timer = setTimeout(() => {
if (adRef.current) {
const ins = adRef.current;
const filled = ins.getAttribute("data-ad-status") === "filled" ||
ins.children.length > 0 ||
ins.clientHeight > 0;
setAdLoaded(filled);
}
}, 3000);
return () => clearTimeout(timer);
if (onAdStatus) {
const checkAd = () => {
if (adRef.current) {
const ins = adRef.current;
const status = ins.getAttribute("data-ad-status");
if (status === "filled") {
onAdStatus(true);
return;
}
if (status === "unfilled") {
onAdStatus(false);
return;
}
if (ins.clientHeight > 10) {
onAdStatus(true);
return;
}
}
};
const t1 = setTimeout(checkAd, 2000);
const t2 = setTimeout(checkAd, 5000);
return () => { clearTimeout(t1); clearTimeout(t2); };
}
}, []);
return (
@ -104,12 +117,15 @@ export function MultiplexAd() {
}
export function SidebarAd() {
const [visible, setVisible] = useState(false);
return (
<div className="sticky top-4">
<div className={`sticky top-4 ${visible ? "" : "hidden"}`}>
<div className="bg-card rounded-md border border-card-border p-4 mt-4">
<AdSense
slot="2398082838"
format="auto"
onAdStatus={(filled) => setVisible(filled)}
/>
</div>
</div>