mirror of
https://github.com/zoriya/v10.git
synced 2026-08-10 08:08:10 +00:00
71 lines
2.3 KiB
TypeScript
71 lines
2.3 KiB
TypeScript
import type { PreloadValue } from '@app/shared/sandbox-listener';
|
|
import type { SourceId } from '@app/shared/sources';
|
|
import type { Preset, Skin, Styling } from '@app/types';
|
|
import { forwardRef, useState } from 'react';
|
|
|
|
type PreviewProps = {
|
|
pagePath: string;
|
|
preset: Preset;
|
|
skin: Skin;
|
|
styling: Styling;
|
|
source: SourceId;
|
|
autoplay: boolean;
|
|
muted: boolean;
|
|
loop: boolean;
|
|
preload: PreloadValue;
|
|
};
|
|
|
|
export const Preview = forwardRef<HTMLIFrameElement, PreviewProps>(function Preview(
|
|
{ pagePath, preset, skin, styling, source, autoplay, muted, loop, preload },
|
|
ref
|
|
) {
|
|
const buildUrl = (base: string) => {
|
|
const params = new URLSearchParams({
|
|
preset,
|
|
skin,
|
|
styling,
|
|
source,
|
|
autoplay: autoplay ? '1' : '0',
|
|
muted: muted ? '1' : '0',
|
|
loop: loop ? '1' : '0',
|
|
preload,
|
|
});
|
|
return `${base}?${params}`;
|
|
};
|
|
|
|
// Capture the initial query so the iframe doesn't reload when autoplay/muted
|
|
// toggle — those changes are streamed in via postMessage.
|
|
const [iframeUrl] = useState(() => buildUrl(pagePath));
|
|
const openUrl = buildUrl(pagePath);
|
|
|
|
return (
|
|
<main className="flex-1 min-h-0 relative bg-zinc-50 dark:bg-zinc-900">
|
|
<a
|
|
href={openUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="absolute top-3 right-3 z-10 inline-flex items-center gap-1 h-7 rounded-md bg-clip-border ring ring-zinc-800/10 dark:ring-white/10 bg-white dark:bg-zinc-800 px-2.5 text-xs font-medium text-zinc-600 dark:text-zinc-300 shadow-xs shadow-black/20 transition-colors hover:bg-zinc-50 dark:hover:bg-zinc-800 hover:text-zinc-950 dark:hover:text-zinc-50"
|
|
title="Open in new tab"
|
|
>
|
|
Open
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className="size-3"
|
|
aria-hidden="true"
|
|
>
|
|
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
|
|
<polyline points="15 3 21 3 21 9" />
|
|
<line x1="10" x2="21" y1="14" y2="3" />
|
|
</svg>
|
|
</a>
|
|
<iframe ref={ref} src={iframeUrl} className="absolute inset-0 w-full h-full border-0" title="player demo" />
|
|
</main>
|
|
);
|
|
});
|