139 lines
3.5 KiB
TypeScript
139 lines
3.5 KiB
TypeScript
import { useEffect, useMemo, useRef, useState } from "react";
|
|
import ArtistPatternBg from "./artist-pattern-bg";
|
|
|
|
type AdFormat = "auto" | "fluid" | "rectangle" | "horizontal" | "vertical" | "autorelaxed";
|
|
|
|
interface AdSenseProps {
|
|
slot: string;
|
|
format?: AdFormat;
|
|
responsive?: boolean;
|
|
className?: string;
|
|
style?: Record<string, string>;
|
|
layout?: string;
|
|
layoutKey?: string;
|
|
onAdStatus?: (filled: boolean) => void;
|
|
}
|
|
|
|
export default function AdSense({
|
|
slot,
|
|
format = "auto",
|
|
responsive = true,
|
|
className = "",
|
|
style,
|
|
layout,
|
|
layoutKey,
|
|
onAdStatus,
|
|
}: AdSenseProps) {
|
|
const adRef = useRef<HTMLModElement>(null);
|
|
const pushed = useRef(false);
|
|
|
|
useEffect(() => {
|
|
if (pushed.current) return;
|
|
try {
|
|
const adsbygoogle = (window as any).adsbygoogle || [];
|
|
adsbygoogle.push({});
|
|
pushed.current = true;
|
|
} catch (e) {
|
|
}
|
|
|
|
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 (
|
|
<div className={`ad-container ${className}`} data-testid={`ad-slot-${slot}`}>
|
|
<ins
|
|
ref={adRef}
|
|
className="adsbygoogle"
|
|
style={style || { display: "block" }}
|
|
data-ad-client="ca-pub-4465464714854276"
|
|
data-ad-slot={slot}
|
|
data-ad-format={format}
|
|
data-full-width-responsive={responsive ? "true" : undefined}
|
|
{...(layout ? { "data-ad-layout": layout } : {})}
|
|
{...(layoutKey ? { "data-ad-layout-key": layoutKey } : {})}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
let adSeedCounter = 1;
|
|
|
|
export function ArticleCardAd() {
|
|
const seed = useMemo(() => adSeedCounter++, []);
|
|
return (
|
|
<ArtistPatternBg className="rounded-md border border-card-border h-full bg-card" seed={seed}>
|
|
<AdSense
|
|
slot="3854634730"
|
|
format="fluid"
|
|
layoutKey="-6r+cy-10+8a-3"
|
|
style={{ display: "block" }}
|
|
/>
|
|
</ArtistPatternBg>
|
|
);
|
|
}
|
|
|
|
export function InArticleAd() {
|
|
return (
|
|
<div className="my-8 py-4 border-y border-border/30">
|
|
<div className="text-[10px] text-muted-foreground/40 text-center mb-2 uppercase tracking-widest">Anzeige</div>
|
|
<AdSense
|
|
slot="4154017639"
|
|
format="fluid"
|
|
layout="in-article"
|
|
style={{ display: "block", textAlign: "center" }}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function MultiplexAd() {
|
|
return (
|
|
<div className="bg-card rounded-md border border-card-border overflow-hidden">
|
|
<AdSense
|
|
slot="4593001335"
|
|
format="autorelaxed"
|
|
style={{ display: "block" }}
|
|
className="w-full min-h-[250px]"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function SidebarAd() {
|
|
const [visible, setVisible] = useState(false);
|
|
|
|
return (
|
|
<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>
|
|
);
|
|
}
|