Fix interactive HTML media display for Arweave iframe content

components/common/SandboxedExternalIframe.tsx

@@ -20,6 +20,8 @@ interface SandboxedExternalIframeProps {
   readonly onError?:
     | React.IframeHTMLAttributes<HTMLIFrameElement>["onError"]
     | undefined;
+  /** Fires once when the container scrolls into view and the iframe is about to render. */
+  readonly onVisible?: (() => void) | undefined;
 }
 
 /**
@@ -39,6 +41,7 @@ const SandboxedExternalIframe: React.FC<SandboxedExternalIframeProps> = ({
   containerClassName,
   onLoad,
   onError,
+  onVisible,
 }) => {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const [isVisible, setIsVisible] = useState(false);
@@ -71,6 +74,7 @@ const SandboxedExternalIframe: React.FC<SandboxedExternalIframeProps> = ({
 
     if (typeof window === "undefined" || !("IntersectionObserver" in window)) {
       setIsVisible(true);
+      onVisible?.();
       return;
     }
 
@@ -79,6 +83,7 @@ const SandboxedExternalIframe: React.FC<SandboxedExternalIframeProps> = ({
         const isIntersecting = entries.some((entry) => entry.isIntersecting);
         if (isIntersecting) {
           setIsVisible(true);
+          onVisible?.();
           observerInstance.disconnect();
         }
       },

components/drops/view/item/content/media/MediaDisplay.tsx

@@ -52,6 +52,7 @@ function InteractiveHtmlMediaDisplay({
   );
   const [activeIndex, setActiveIndex] = useState(0);
   const [didLoadCurrentUrl, setDidLoadCurrentUrl] = useState(false);
+  const [isIframeVisible, setIsIframeVisible] = useState(false);
   const activeUrl = urls[activeIndex];
 
   useEffect(() => {
@@ -61,6 +62,7 @@ function InteractiveHtmlMediaDisplay({
   useEffect(() => {
     setActiveIndex(0);
     setDidLoadCurrentUrl(false);
+    setIsIframeVisible(false);
   }, [urls]);
 
   useEffect(() => {
@@ -70,6 +72,7 @@ function InteractiveHtmlMediaDisplay({
   useEffect(() => {
     if (
       !activeUrl ||
+      !isIframeVisible ||
       didLoadCurrentUrl ||
       activeIndex + 1 >= urls.length ||
       !shouldUseIframeFallbackTimeout(activeUrl)
@@ -88,7 +91,7 @@ function InteractiveHtmlMediaDisplay({
     return () => {
       globalThis.clearTimeout(timeoutId);
     };
-  }, [activeIndex, activeUrl, didLoadCurrentUrl, urls.length]);
+  }, [activeIndex, activeUrl, didLoadCurrentUrl, isIframeVisible, urls.length]);
 
   const advanceToNextUrl = () => {
     setActiveIndex((current) =>
@@ -121,6 +124,9 @@ function InteractiveHtmlMediaDisplay({
         setDidLoadCurrentUrl(true);
       }}
       onError={advanceToNextUrl}
+      onVisible={() => {
+        setIsIframeVisible(true);
+      }}
     />
   );
 }

lib/media/arweave-gateways.ts

@@ -6,6 +6,10 @@ const ARWEAVE_GATEWAY_HOSTS = [
   "gateway.ar.io",
 ] as const;
 
+// gateway.ar.io redirects interactive content to <txid>.ar.io (not
+// <txid>.gateway.ar.io), so CSP / remote-pattern lists must also allow ar.io.
+const ADDITIONAL_CSP_HOSTS = ["ar.io"] as const;
+
 const dedupe = (values: readonly string[]): string[] =>
   Array.from(new Set(values));
 
@@ -26,7 +30,7 @@ const ARWEAVE_GATEWAY_EXACT_HOSTS = dedupe(ARWEAVE_GATEWAY_HOSTS);
 const ARWEAVE_GATEWAY_WILDCARD_BASE_HOSTS = dedupe(ARWEAVE_GATEWAY_HOSTS);
 
 export const ARWEAVE_GATEWAY_CSP_SOURCES = dedupe(
-  ARWEAVE_GATEWAY_HOSTS.flatMap((hostname) => [
+  [...ARWEAVE_GATEWAY_HOSTS, ...ADDITIONAL_CSP_HOSTS].flatMap((hostname) => [
     `https://${hostname}`,
     `https://*.${hostname}`,
   ])