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

Ensure full-screen ads always display on the horoscope page

Browse Source 
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
This commit is contained in:
sebastjanartic 2026-03-08 07:06:17 +00:00
parent dc6648c54d
commit f0dd51a3a9
2 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
client/src/components/interstitial-ad.tsx
View File

@ -5,10 +5,15 @@ import AdSense from "./adsense";
const COUNTER_KEY = "folx-interstitial-count"; const COUNTER_KEY = "folx-interstitial-count";
const DELAY_MS = 3000; const DELAY_MS = 3000;
export default function InterstitialAd() { export default function InterstitialAd({ forceShow }: { forceShow?: boolean } = {}) {
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
useEffect(() => { useEffect(() => {
if (forceShow) {
const timer = setTimeout(() => setVisible(true), DELAY_MS);
return () => clearTimeout(timer);
}
const raw = sessionStorage.getItem(COUNTER_KEY); const raw = sessionStorage.getItem(COUNTER_KEY);
const count = raw ? parseInt(raw, 10) : 0; const count = raw ? parseInt(raw, 10) : 0;
const next = count + 1; const next = count + 1;
@ -19,7 +24,7 @@ export default function InterstitialAd() {
const timer = setTimeout(() => setVisible(true), DELAY_MS); const timer = setTimeout(() => setVisible(true), DELAY_MS);
return () => clearTimeout(timer); return () => clearTimeout(timer);
}, []); }, [forceShow]);
useEffect(() => { useEffect(() => {
if (visible) { if (visible) {

2
client/src/pages/horoscope.tsx
View File

@ -21,6 +21,7 @@ import {
} from "lucide-react"; } from "lucide-react";
import Header from "@/components/header"; import Header from "@/components/header";
import Footer from "@/components/footer"; import Footer from "@/components/footer";
import InterstitialAd from "@/components/interstitial-ad";
import { InArticleAd, PageSideAds } from "@/components/adsense"; import { InArticleAd, PageSideAds } from "@/components/adsense";
import { import {
SIGNS, SIGNS,
@ -395,6 +396,7 @@ export default function HoroscopePage() {
return ( return (
<div className="min-h-screen bg-background"> <div className="min-h-screen bg-background">
<Header /> <Header />
<InterstitialAd forceShow />
<PageSideAds /> <PageSideAds />
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4"> <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
<div className="flex items-center gap-3 mb-2"> <div className="flex items-center gap-3 mb-2">