sebastjanartic
f0dd51a3a9
Introduce a `forceShow` prop to the InterstitialAd component, and utilize it in `horoscope.tsx` to make the interstitial ad appear on every visit to the horoscope page, bypassing the previous article visit counter logic. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 23852c00-4779-460a-9e0c-d09fee4b6c92 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 49bdd096-9b74-4b58-b1ec-4755d50170b1 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/23852c00-4779-460a-9e0c-d09fee4b6c92/OPD8Ro3 Replit-Helium-Checkpoint-Created: true
72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
import { useState, useEffect } from "react";
|
|
import { X } from "lucide-react";
|
|
import AdSense from "./adsense";
|
|
|
|
const COUNTER_KEY = "folx-interstitial-count";
|
|
const DELAY_MS = 3000;
|
|
|
|
export default function InterstitialAd({ forceShow }: { forceShow?: boolean } = {}) {
|
|
const [visible, setVisible] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (forceShow) {
|
|
const timer = setTimeout(() => setVisible(true), DELAY_MS);
|
|
return () => clearTimeout(timer);
|
|
}
|
|
|
|
const raw = sessionStorage.getItem(COUNTER_KEY);
|
|
const count = raw ? parseInt(raw, 10) : 0;
|
|
const next = count + 1;
|
|
sessionStorage.setItem(COUNTER_KEY, next.toString());
|
|
|
|
const shouldShow = next % 2 === 1;
|
|
if (!shouldShow) return;
|
|
|
|
const timer = setTimeout(() => setVisible(true), DELAY_MS);
|
|
return () => clearTimeout(timer);
|
|
}, [forceShow]);
|
|
|
|
useEffect(() => {
|
|
if (visible) {
|
|
document.body.style.overflow = "hidden";
|
|
}
|
|
return () => {
|
|
document.body.style.overflow = "";
|
|
};
|
|
}, [visible]);
|
|
|
|
if (!visible) return null;
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/70 animate-in fade-in duration-300"
|
|
onClick={() => setVisible(false)}
|
|
data-testid="interstitial-ad-overlay"
|
|
>
|
|
<div
|
|
className="relative bg-card rounded-xl shadow-2xl w-[90vw] max-w-lg p-6"
|
|
onClick={(e) => e.stopPropagation()}
|
|
data-testid="interstitial-ad-container"
|
|
>
|
|
<button
|
|
onClick={() => setVisible(false)}
|
|
className="absolute top-3 right-3 z-10 w-8 h-8 flex items-center justify-center rounded-full bg-muted hover:bg-muted/80 text-foreground transition-colors"
|
|
data-testid="button-interstitial-close"
|
|
aria-label="Schließen"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
<div className="text-[10px] text-muted-foreground/40 text-center mb-2 uppercase tracking-widest">Anzeige</div>
|
|
<div className="min-h-[250px] flex items-center justify-center">
|
|
<AdSense
|
|
slot="4154017639"
|
|
format="rectangle"
|
|
responsive={false}
|
|
style={{ display: "inline-block", width: "300px", height: "250px" }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|