Function VersionPreview

frontend/src/components/VersionPreview.tsx:20–161

({
	item,
	versionIdx
}: {
	item: ItemWrapper
	versionIdx: number
})

import { Button } from './ui/button'

export default function VersionPreview({
	item,
	versionIdx
}: {
	item: ItemWrapper
	versionIdx: number
}) {
	const iframeSrc = /127.0.0.1|localhost/.test(document.location.hostname)
		? 'http://localhost:7878'
		: 'https://wandb.github.io'
	const iframeRef = useRef<HTMLIFrameElement | null>(null)
	const [isFrameReady, setIsFrameReady] = useState(false)
	const isVisible = useAtomValue(historySidebarStateAtom) === 'versions'
	const uiState = useAtomValue(uiStateAtom)
	const isRendering = uiState.rendering
	const uiTheme = useAtomValue(uiThemeAtom)
	const theme = themes.find(t => t.name === uiTheme) ?? themes[0]
	const [html, setHtml] = useState<string | undefined>()
	const id = useMemo(() => nanoid(8), [])
	const saveHistory = useSaveHistory()
	const [currentVersionIdx] = useVersion(item)
	const image = useAtomValue(imageDB.item(`image-${item.id}-${versionIdx}`))

	const darkMode = useAtomValue(darkModeAtom)
	const [previewDarkMode, setPreviewDarkMode] = useState<string>(darkMode)

	useEffect(() => {
		if (darkMode === 'system') {
			if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
				setPreviewDarkMode('dark')
			} else {
				setPreviewDarkMode('light')
			}
		}
		if (['light', 'dark'].includes(previewDarkMode)) {
			iframeRef.current?.contentWindow?.postMessage(
				{ action: 'toggle-dark-mode', mode: previewDarkMode },
				'*'
			)
		}
		iframeRef.current?.contentWindow?.postMessage(
			{ action: 'theme', theme },
			'*'
		)
	}, [darkMode, previewDarkMode, theme])

	useEffect(() => {
		item
			.html(versionIdx)
			.then(hjs => setHtml(hjs?.html))
			.catch((error: unknown) => console.error('HTML parse error', error))
	}, [item, versionIdx, setHtml])

	useEffect(() => {
		const listener = (event: MessageEvent<IFrameEvent>) => {
			// Only listen to events from our iframe
			if (event.origin !== iframeSrc) return
			if (event.data.id !== id) return