import {useAuth} from '../../auth/use-auth';
import {memo, useEffect, useId, useMemo, useRef} from 'react';
import lazyLoader from '../../utils/http/lazy-loader';
import clsx from 'clsx';
import {useSettings} from '../../core/settings/use-settings';
import dot from 'dot-object';
import {Settings} from '@common/core/settings/settings';
import {getScrollParent} from '@react-aria/utils';
interface AdHostProps {
slot: keyof Omit<NonNullable<Settings['ads']>, 'disable'>;
className?: string;
}
export function AdHost({slot, className}: AdHostProps) {
const settings = useSettings();
const {isSubscribed} = useAuth();
const adCode = useMemo(() => {
return dot.pick(`ads.${slot}`, settings);
}, [slot, settings]);
if (settings.ads?.disable || isSubscribed || !adCode) return null;
return <InvariantAd className={className} slot={slot} adCode={adCode} />;
}
interface InvariantAdProps {
slot: string;
adCode: string;
className?: string;
}
const InvariantAd = memo(
({slot, adCode, className}: InvariantAdProps) => {
const ref = useRef<HTMLDivElement>(null);
const id = useId();
useEffect(() => {
if (ref.current) {
loadAdScripts(adCode, ref.current).then(() => {
executeAdJavascript(adCode, id);
});
}
return () => {
// @ts-ignore
delete window['google_ad_modifications'];
};
}, [adCode, id]);
// remove height modifications added by adsense
useEffect(() => {
if (ref.current) {
const scrollParent = getScrollParent(ref.current) as HTMLElement;
if (scrollParent) {
const observer = new MutationObserver(function () {
scrollParent.style.height = '';
scrollParent.style.minHeight = '';
});
observer.observe(scrollParent, {
attributes: true,
attributeFilter: ['style'],
});
return () => observer.disconnect();
}
}
}, []);
return (
<div
ref={ref}
id={id}
className={clsx(
'ad-host flex max-h-[600px] min-h-90 w-full max-w-full items-center justify-center overflow-hidden',
`${slot.replace(/\./g, '-')}-host`,
className,
)}
dangerouslySetInnerHTML={{__html: getAdHtml(adCode)}}
></div>
);
},
() => {
// never re-render
return false;
},
);
function getAdHtml(adCode: string) {
// strip out all script tags from ad code and leave only html
return adCode
?.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
.trim();
}
// Load any external scripts needed by ad.
function loadAdScripts(adCode: string, parentEl: HTMLDivElement): Promise<any> {
const promises = [];
// load ad code script
const pattern = /<script.*?src=['"](.*?)['"]/g;
let match;
while ((match = pattern.exec(adCode))) {
if (match[1]) {
promises.push(lazyLoader.loadAsset(match[1], {type: 'js', parentEl}));
}
}
return Promise.all(promises);
}
// Execute ad code javascript and replace document.write if needed.
function executeAdJavascript(adCode: string, id: string) {
// find any ad code javascript that needs to be executed
const pattern = /<script\b[^>]*>([\s\S]*?)<\/script>/g;
let content;
while ((content = pattern.exec(adCode))) {
if (content[1]) {
const r = `var d = document.createElement('div'); d.innerHTML = $1; document.getElementById('${id}').appendChild(d.firstChild);`;
const toEval = content[1].replace(/document.write\((.+?)\);/, r);
eval(toEval);
}
}
}