first commit

common/resources/client/admin/ads/ad-host.tsx

@@ -0,0 +1,123 @@
+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);
+    }
+  }
+}