ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-10 22:20:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(studio): shell UX — data-loss guards, error surfacing, dialog contracts, toasts (#1964)

Browse Source
This commit is contained in:
Vance Ingalls
2026-07-06 16:56:06 -07:00
committed by GitHub
parent ccc1308839
commit 89e36da13d
23 changed files with 700 additions and 281 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/studio/src/components/MediaPreview.tsx
+36 -1
View File
@@ -1,8 +1,41 @@
import { useState } from "react";
import { IMAGE_EXT, VIDEO_EXT, AUDIO_EXT } from "../utils/mediaTypes";
function MediaErrorPanel({ name, filePath }: { name: string; filePath: string }) {
return (
<div className="flex flex-col items-center justify-center h-full p-4 bg-neutral-950 gap-2">
<svg
width="40"
height="40"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
className="text-neutral-600"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10" />
<line x1="12" y1="8" x2="12" y2="12" strokeLinecap="round" />
<line x1="12" y1="16" x2="12.01" y2="16" strokeLinecap="round" />
</svg>
<span className="text-sm text-neutral-400 font-medium">{name}</span>
<span className="text-[11px] text-neutral-600 font-mono">{filePath}</span>
<span className="text-[10px] text-neutral-500">
Couldn't load this file — it may be missing or corrupt
</span>
</div>
);
}
export function MediaPreview({ projectId, filePath }: { projectId: string; filePath: string }) {
const serveUrl = `/api/projects/${projectId}/preview/${filePath}`;
const name = filePath.split("/").pop() ?? filePath;
// Keyed by path so switching to another file clears a previous failure.
const [failedPath, setFailedPath] = useState<string | null>(null);
const failed = failedPath === filePath;
const setFailed = () => setFailedPath(filePath);
if (failed) return <MediaErrorPanel name={name} filePath={filePath} />;
if (IMAGE_EXT.test(filePath)) {
return (
@@ -10,6 +43,7 @@ export function MediaPreview({ projectId, filePath }: { projectId: string; fileP
<img
src={serveUrl}
alt={name}
onError={setFailed}
className="max-w-full max-h-[70%] object-contain rounded border border-neutral-800"
/>
<span className="mt-3 text-[11px] text-neutral-500 font-mono">{filePath}</span>
@@ -23,6 +57,7 @@ export function MediaPreview({ projectId, filePath }: { projectId: string; fileP
<video
src={serveUrl}
controls
onError={setFailed}
className="max-w-full max-h-[70%] rounded border border-neutral-800"
/>
<span className="mt-3 text-[11px] text-neutral-500 font-mono">{filePath}</span>
@@ -46,7 +81,7 @@ export function MediaPreview({ projectId, filePath }: { projectId: string; fileP
<circle cx="6" cy="18" r="3" />
<circle cx="18" cy="16" r="3" />
</svg>
<audio src={serveUrl} controls className="w-full max-w-[280px]" />
<audio src={serveUrl} controls onError={setFailed} className="w-full max-w-[280px]" />
<span className="text-[11px] text-neutral-500 font-mono">{filePath}</span>
</div>
);