'use client';
import { useMemo } from 'react';
import type { InteractiveContent } from '@/lib/types/stage';
interface InteractiveRendererProps {
readonly content: InteractiveContent;
readonly mode: 'autonomous' | 'playback';
readonly sceneId: string;
}
export function InteractiveRenderer({ content, mode: _mode, sceneId }: InteractiveRendererProps) {
const patchedHtml = useMemo(
() => (content.html ? patchHtmlForIframe(content.html) : undefined),
[content.html],
);
return (
);
}
/**
* Patch embedded HTML to display correctly inside an iframe.
*
* Fixes:
* - min-h-screen / h-screen → use 100% of iframe viewport
* - Ensure html/body fill the iframe with no overflow issues
* - Canvas elements use container sizing instead of viewport
*/
function patchHtmlForIframe(html: string): string {
const iframeCss = ``;
// Insert right after or at the start of the document
const headIdx = html.indexOf('');
if (headIdx !== -1) {
const insertPos = headIdx + 6; // after
return html.substring(0, insertPos) + '\n' + iframeCss + html.substring(insertPos);
}
const headWithAttrs = html.indexOf('', headWithAttrs);
if (closeAngle !== -1) {
const insertPos = closeAngle + 1;
return html.substring(0, insertPos) + '\n' + iframeCss + html.substring(insertPos);
}
}
// Fallback: prepend
return iframeCss + html;
}