@hyperframes/studio 0.1.12 → 0.1.14

package/src/components/renders/RenderQueueItem.tsx

@@ -1,8 +1,10 @@
 import { memo, useCallback, useState } from "react";
+import { VideoFrameThumbnail } from "../ui/VideoFrameThumbnail";
 import type { RenderJob } from "./useRenderQueue";
 
 interface RenderQueueItemProps {
   job: RenderJob;
+  projectId: string;
   onDelete: () => void;
 }
 
@@ -19,34 +21,88 @@ function formatTimeAgo(timestamp: number): string {
   return `${Math.floor(diff / 3600000)}h ago`;
 }
 
+/** Static frame extracted once via hidden video + canvas. */
+
 export const RenderQueueItem = memo(function RenderQueueItem({
   job,
+  projectId,
   onDelete,
 }: RenderQueueItemProps) {
   const [hovered, setHovered] = useState(false);
 
-  const handleDownload = useCallback(() => {
-    const a = document.createElement("a");
-    a.href = `/api/render/${job.id}/download`;
-    a.download = job.filename;
-    a.click();
-  }, [job.id, job.filename]);
+  // Direct file URL — serves from disk, survives server restarts
+  const fileSrc = `/api/projects/${projectId}/renders/file/${job.filename}`;
+
+  const handleOpen = useCallback(() => {
+    window.open(fileSrc, "_blank");
+  }, [fileSrc]);
+
+  const handleDownload = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      const a = document.createElement("a");
+      a.href = fileSrc;
+      a.download = job.filename;
+      a.click();
+    },
+    [fileSrc, job.filename],
+  );
+
+  const viewSrc = fileSrc;
+  const isComplete = job.status === "complete";
 
   return (
     <div
       onPointerEnter={() => setHovered(true)}
       onPointerLeave={() => setHovered(false)}
-      className="px-3 py-2.5 border-b border-neutral-800/30 last:border-0"
+      onClick={isComplete ? handleOpen : undefined}
+      className={[
+        "px-3 py-2.5 border-b border-neutral-800/30 last:border-0 transition-colors duration-150",
+        isComplete ? "cursor-pointer hover:bg-neutral-800/30" : "",
+      ]
+        .filter(Boolean)
+        .join(" ")}
     >
-      <div className="flex items-center gap-2">
-        {/* Status indicator */}
-        <div className="flex-shrink-0">
+      <div className="flex items-center gap-2.5">
+        {/* Thumbnail — static frame; swaps to live video on hover */}
+        <div className="w-20 h-[45px] rounded overflow-hidden bg-neutral-900 flex-shrink-0 relative">
+          {isComplete && (
+            <>
+              {/* Live video — visible on hover */}
+              {hovered && (
+                <video
+                  src={viewSrc}
+                  autoPlay
+                  muted
+                  loop
+                  playsInline
+                  className="absolute inset-0 w-full h-full object-contain"
+                />
+              )}
+              {/* Static frame — visible when not hovering */}
+              <div
+                className="absolute inset-0 transition-opacity duration-150"
+                style={{ opacity: hovered ? 0 : 1 }}
+              >
+                <VideoFrameThumbnail src={viewSrc} />
+              </div>
+            </>
+          )}
           {job.status === "rendering" && (
-            <div className="w-2 h-2 rounded-full bg-[#3CE6AC] animate-pulse" />
+            <div className="w-full h-full flex items-center justify-center">
+              <div className="w-2 h-2 rounded-full bg-studio-accent animate-pulse" />
+            </div>
+          )}
+          {job.status === "failed" && (
+            <div className="w-full h-full flex items-center justify-center">
+              <div className="w-2 h-2 rounded-full bg-red-400" />
+            </div>
+          )}
+          {job.status === "cancelled" && (
+            <div className="w-full h-full flex items-center justify-center">
+              <div className="w-2 h-2 rounded-full bg-neutral-600" />
+            </div>
           )}
-          {job.status === "complete" && <div className="w-2 h-2 rounded-full bg-green-400" />}
-          {job.status === "failed" && <div className="w-2 h-2 rounded-full bg-red-400" />}
-          {job.status === "cancelled" && <div className="w-2 h-2 rounded-full bg-neutral-600" />}
         </div>
 
         {/* Info */}
@@ -62,16 +118,15 @@ export const RenderQueueItem = memo(function RenderQueueItem({
             )}
           </div>
 
-          {/* Progress bar + percentage */}
           {job.status === "rendering" && (
             <div className="mt-1">
               <div className="flex items-center justify-between mb-0.5">
                 <span className="text-[9px] text-neutral-500">{job.stage || "Rendering"}</span>
-                <span className="text-[9px] font-mono text-[#3CE6AC]">{job.progress}%</span>
+                <span className="text-[9px] font-mono text-studio-accent">{job.progress}%</span>
               </div>
               <div className="w-full h-1 bg-neutral-800 rounded-full overflow-hidden">
                 <div
-                  className="h-full bg-[#3CE6AC] rounded-full transition-all duration-300"
+                  className="h-full bg-studio-accent rounded-full transition-all duration-300"
                   style={{ width: `${job.progress}%` }}
                 />
               </div>
@@ -90,7 +145,7 @@ export const RenderQueueItem = memo(function RenderQueueItem({
         {/* Actions */}
         {hovered && (
           <div className="flex items-center gap-1 flex-shrink-0">
-            {job.status === "complete" && (
+            {isComplete && (
               <button
                 onClick={handleDownload}
                 className="p-1 rounded text-neutral-500 hover:text-green-400 transition-colors"
@@ -113,7 +168,10 @@ export const RenderQueueItem = memo(function RenderQueueItem({
               </button>
             )}
             <button
-              onClick={onDelete}
+              onClick={(e) => {
+                e.stopPropagation();
+                onDelete();
+              }}
               className="p-1 rounded text-neutral-500 hover:text-red-400 transition-colors"
               title="Remove"
             >

package/src/components/renders/useRenderQueue.ts

@@ -128,6 +128,7 @@ export function useRenderQueue(projectId: string | null) {
                           ? "failed"
                           : j.status,
                     durationMs: data.status === "complete" ? Date.now() - startTime : undefined,
+                    error: data.error ?? j.error,
                   }
                 : j,
             ),

package/src/components/sidebar/AssetsTab.tsx

@@ -1,5 +1,6 @@
 import { memo, useState, useCallback, useRef } from "react";
-import { ExpandOnHover } from "../ui/ExpandOnHover";
+import { VideoFrameThumbnail } from "../ui/VideoFrameThumbnail";
+import { MEDIA_EXT, IMAGE_EXT, VIDEO_EXT, AUDIO_EXT } from "../../utils/mediaTypes";
 
 interface AssetsTabProps {
   projectId: string;
@@ -7,11 +8,7 @@ interface AssetsTabProps {
   onImport?: (files: FileList) => void;
 }
 
-const MEDIA_EXT = /\.(mp4|webm|mov|mp3|wav|ogg|m4a|jpg|jpeg|png|gif|webp|svg)$/i;
-const IMAGE_EXT = /\.(jpg|jpeg|png|gif|webp|svg)$/i;
-const VIDEO_EXT = /\.(mp4|webm|mov)$/i;
-const AUDIO_EXT = /\.(mp3|wav|ogg|m4a)$/i;
-
+/** Inline thumbnail content — rendered inside the container div in AssetCard. */
 function AssetThumbnail({
   serveUrl,
   name,
@@ -26,36 +23,21 @@ function AssetThumbnail({
   isAudio: boolean;
 }) {
   return (
-    <div className="w-16 h-10 rounded overflow-hidden bg-neutral-900 flex-shrink-0 relative">
+    <>
       {isImage && (
         <img
           src={serveUrl}
           alt={name}
           loading="lazy"
-          className="w-full h-full object-cover"
+          className="w-full h-full object-contain"
           onError={(e) => {
             (e.target as HTMLImageElement).style.display = "none";
           }}
         />
       )}
-      {isVideo && (
-        <>
-          <video
-            src={serveUrl}
-            muted
-            playsInline
-            preload="metadata"
-            className="w-full h-full object-cover"
-          />
-          <div className="absolute inset-0 flex items-center justify-center bg-black/30">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="white" className="opacity-80">
-              <polygon points="6,3 20,12 6,21" />
-            </svg>
-          </div>
-        </>
-      )}
+      {isVideo && <VideoFrameThumbnail src={serveUrl} />}
       {isAudio && (
-        <div className="w-full h-full flex items-center justify-center bg-neutral-900">
+        <div className="w-full h-full flex items-center justify-center">
           <svg
             width="16"
             height="16"
@@ -72,7 +54,7 @@ function AssetThumbnail({
         </div>
       )}
       {!isImage && !isVideo && !isAudio && (
-        <div className="w-full h-full flex items-center justify-center bg-neutral-900">
+        <div className="w-full h-full flex items-center justify-center">
           <svg
             width="14"
             height="14"
@@ -91,78 +73,7 @@ function AssetThumbnail({
           </svg>
         </div>
       )}
-    </div>
-  );
-}
-
-function ExpandedAssetPreview({
-  serveUrl,
-  name,
-  asset,
-  isImage,
-  isVideo,
-  isAudio,
-  onCopy,
-}: {
-  serveUrl: string;
-  name: string;
-  asset: string;
-  isImage: boolean;
-  isVideo: boolean;
-  isAudio: boolean;
-  onCopy: () => void;
-}) {
-  return (
-    <div className="w-full h-full bg-neutral-950 rounded-[16px] overflow-hidden flex flex-col">
-      <div className="flex-1 min-h-0 flex items-center justify-center bg-black p-4">
-        {isImage && (
-          <img src={serveUrl} alt={name} className="max-w-full max-h-full object-contain rounded" />
-        )}
-        {isVideo && (
-          <video
-            src={serveUrl}
-            autoPlay
-            muted
-            loop
-            playsInline
-            className="max-w-full max-h-full object-contain rounded"
-          />
-        )}
-        {isAudio && (
-          <div className="flex flex-col items-center gap-4">
-            <svg
-              width="48"
-              height="48"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="1.5"
-              className="text-purple-400"
-            >
-              <path d="M9 18V5l12-2v13" strokeLinecap="round" strokeLinejoin="round" />
-              <circle cx="6" cy="18" r="3" />
-              <circle cx="18" cy="16" r="3" />
-            </svg>
-            <audio src={serveUrl} controls autoPlay className="w-64" />
-          </div>
-        )}
-      </div>
-      <div className="px-5 py-3 bg-neutral-900 border-t border-neutral-800/50 flex items-center justify-between flex-shrink-0">
-        <div>
-          <div className="text-sm font-medium text-neutral-200">{name}</div>
-          <div className="text-[10px] text-neutral-600 font-mono mt-0.5">{asset}</div>
-        </div>
-        <button
-          onClick={(e) => {
-            e.stopPropagation();
-            onCopy();
-          }}
-          className="px-4 py-1.5 text-xs font-semibold text-[#09090B] bg-[#3CE6AC] rounded-lg hover:brightness-110 transition-colors"
-        >
-          Copy Path
-        </button>
-      </div>
-    </div>
+    </>
   );
 }
 
@@ -177,75 +88,52 @@ function AssetCard({
   onCopy: (path: string) => void;
   isCopied: boolean;
 }) {
+  const [hovered, setHovered] = useState(false);
   const name = asset.split("/").pop() ?? asset;
   const serveUrl = `/api/projects/${projectId}/preview/${asset}`;
-  const isImage = IMAGE_EXT.test(asset);
   const isVideo = VIDEO_EXT.test(asset);
-  const isAudio = AUDIO_EXT.test(asset);
-  const hasExpandablePreview = isImage || isVideo || isAudio;
 
-  const card = (
+  return (
     <div
+      onClick={() => onCopy(asset)}
+      onPointerEnter={() => setHovered(true)}
+      onPointerLeave={() => setHovered(false)}
       className={`w-full text-left px-2 py-1.5 flex items-center gap-2.5 transition-colors cursor-pointer ${
         isCopied
-          ? "bg-[#3CE6AC]/10 border-l-2 border-[#3CE6AC]"
+          ? "bg-studio-accent/10 border-l-2 border-studio-accent"
           : "border-l-2 border-transparent hover:bg-neutral-800/50"
       }`}
     >
-      <AssetThumbnail
-        serveUrl={serveUrl}
-        name={name}
-        isImage={isImage}
-        isVideo={isVideo}
-        isAudio={isAudio}
-      />
+      <div className="w-16 h-10 rounded overflow-hidden bg-neutral-900 flex-shrink-0 relative">
+        <AssetThumbnail
+          serveUrl={serveUrl}
+          name={name}
+          isImage={IMAGE_EXT.test(asset)}
+          isVideo={isVideo}
+          isAudio={AUDIO_EXT.test(asset)}
+        />
+        {/* Inline video autoplay on hover — same pattern as renders */}
+        {isVideo && hovered && (
+          <video
+            src={serveUrl}
+            autoPlay
+            muted
+            loop
+            playsInline
+            className="absolute inset-0 w-full h-full object-contain"
+          />
+        )}
+      </div>
       <div className="min-w-0 flex-1">
         <span className="text-[11px] font-medium text-neutral-300 truncate block">{name}</span>
         {isCopied ? (
-          <span className="text-[9px] text-[#3CE6AC]">Copied!</span>
+          <span className="text-[9px] text-studio-accent">Copied!</span>
         ) : (
           <span className="text-[9px] text-neutral-600 truncate block">{asset}</span>
         )}
       </div>
     </div>
   );
-
-  if (!hasExpandablePreview) {
-    return (
-      <button
-        type="button"
-        onClick={() => onCopy(asset)}
-        title="Click to copy path"
-        className="w-full"
-      >
-        {card}
-      </button>
-    );
-  }
-
-  return (
-    <ExpandOnHover
-      expandedContent={(closeExpand) => (
-        <ExpandedAssetPreview
-          serveUrl={serveUrl}
-          name={name}
-          asset={asset}
-          isImage={isImage}
-          isVideo={isVideo}
-          isAudio={isAudio}
-          onCopy={() => {
-            closeExpand();
-            onCopy(asset);
-          }}
-        />
-      )}
-      onClick={() => onCopy(asset)}
-      expandScale={0.45}
-      delay={500}
-    >
-      {card}
-    </ExpandOnHover>
-  );
 }
 
 export const AssetsTab = memo(function AssetsTab({ projectId, assets, onImport }: AssetsTabProps) {
@@ -276,7 +164,7 @@ export const AssetsTab = memo(function AssetsTab({ projectId, assets, onImport }
 
   return (
     <div
-      className={`flex-1 flex flex-col min-h-0 transition-colors ${dragOver ? "bg-blue-950/20" : ""}`}
+      className={`flex-1 flex flex-col min-h-0 transition-colors ${dragOver ? "bg-studio-accent/[0.05]" : ""}`}
       onDragOver={(e) => {
         e.preventDefault();
         setDragOver(true);

package/src/components/sidebar/CompositionsTab.tsx

@@ -1,5 +1,4 @@
-import { memo, useRef, useState, useCallback, useEffect } from "react";
-import { ExpandOnHover } from "../ui/ExpandOnHover";
+import { memo, useRef, useState } from "react";
 
 interface CompositionsTabProps {
   projectId: string;
@@ -8,132 +7,6 @@ interface CompositionsTabProps {
   onSelect: (comp: string) => void;
 }
 
-function ExpandedCompPreview({
-  previewUrl,
-  name,
-  comp,
-  onSelect,
-}: {
-  previewUrl: string;
-  name: string;
-  comp: string;
-  onSelect: () => void;
-}) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const iframeRef = useRef<HTMLIFrameElement>(null);
-  const [dims, setDims] = useState({ w: 1920, h: 1080 });
-  const [scale, setScale] = useState(1);
-
-  const updateScale = useCallback(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    const s = Math.min(el.clientWidth / dims.w, el.clientHeight / dims.h);
-    setScale(s);
-  }, [dims]);
-
-  // eslint-disable-next-line no-restricted-syntax
-  useEffect(() => {
-    updateScale();
-    const el = containerRef.current;
-    if (!el) return;
-    const ro = new ResizeObserver(updateScale);
-    ro.observe(el);
-    return () => ro.disconnect();
-  }, [updateScale]);
-
-  const handleLoad = useCallback(() => {
-    const iframe = iframeRef.current;
-    if (!iframe) return;
-    // Detect dimensions from composition
-    try {
-      const doc = iframe.contentDocument;
-      if (doc) {
-        const root = doc.querySelector("[data-composition-id]");
-        if (root) {
-          const w = parseInt(root.getAttribute("data-width") ?? "0", 10);
-          const h = parseInt(root.getAttribute("data-height") ?? "0", 10);
-          if (w > 0 && h > 0) setDims({ w, h });
-        }
-      }
-    } catch {
-      /* cross-origin */
-    }
-
-    let attempts = 0;
-    const interval = setInterval(() => {
-      try {
-        const win = iframe.contentWindow as Window & {
-          __player?: { play: () => void; seek: (t: number) => void };
-          __timelines?: Record<string, { play: () => void; seek: (t: number) => void }>;
-        };
-        if (win?.__player) {
-          win.__player.seek(0.5);
-          win.__player.play();
-          clearInterval(interval);
-          return;
-        }
-        if (win?.__timelines) {
-          const keys = Object.keys(win.__timelines);
-          const tl = keys.length > 0 ? win.__timelines[keys[keys.length - 1]] : null;
-          if (tl) {
-            tl.seek(0.5);
-            tl.play();
-            clearInterval(interval);
-          }
-        }
-      } catch {
-        /* cross-origin */
-      }
-      if (++attempts > 15) clearInterval(interval);
-    }, 200);
-  }, []);
-
-  const offsetX = containerRef.current
-    ? (containerRef.current.clientWidth - dims.w * scale) / 2
-    : 0;
-  const offsetY = containerRef.current
-    ? (containerRef.current.clientHeight - dims.h * scale) / 2
-    : 0;
-
-  return (
-    <div className="w-full h-full bg-neutral-950 rounded-[16px] overflow-hidden flex flex-col">
-      <div ref={containerRef} className="flex-1 min-h-0 relative overflow-hidden bg-black">
-        <iframe
-          ref={iframeRef}
-          src={previewUrl}
-          sandbox="allow-scripts allow-same-origin"
-          onLoad={handleLoad}
-          className="absolute border-none"
-          style={{
-            left: Math.max(0, offsetX),
-            top: Math.max(0, offsetY),
-            width: dims.w,
-            height: dims.h,
-            transformOrigin: "0 0",
-            transform: `scale(${scale})`,
-          }}
-          tabIndex={-1}
-        />
-      </div>
-      <div className="px-5 py-3 bg-neutral-900 border-t border-neutral-800/50 flex items-center justify-between flex-shrink-0">
-        <div>
-          <div className="text-sm font-medium text-neutral-200">{name}</div>
-          <div className="text-[10px] text-neutral-600 font-mono mt-0.5">{comp}</div>
-        </div>
-        <button
-          onClick={(e) => {
-            e.stopPropagation();
-            onSelect();
-          }}
-          className="px-4 py-1.5 text-xs font-semibold text-[#09090B] bg-[#3CE6AC] rounded-lg hover:brightness-110 transition-colors"
-        >
-          Open
-        </button>
-      </div>
-    </div>
-  );
-}
-
 function CompCard({
   projectId,
   comp,
@@ -145,28 +18,62 @@ function CompCard({
   isActive: boolean;
   onSelect: () => void;
 }) {
+  const [hovered, setHovered] = useState(false);
+  const hoverTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const handleEnter = () => {
+    hoverTimer.current = setTimeout(() => setHovered(true), 300);
+  };
+  const handleLeave = () => {
+    if (hoverTimer.current) {
+      clearTimeout(hoverTimer.current);
+      hoverTimer.current = null;
+    }
+    setHovered(false);
+  };
   const name = comp.replace(/^compositions\//, "").replace(/\.html$/, "");
-  const thumbnailUrl = `/api/projects/${projectId}/thumbnail/${comp}?t=0.5`;
+  const thumbnailUrl = `/api/projects/${projectId}/thumbnail/${comp}?t=2`;
   const previewUrl = `/api/projects/${projectId}/preview/comp/${comp}`;
 
-  const card = (
+  return (
     <div
+      onClick={onSelect}
+      onPointerEnter={handleEnter}
+      onPointerLeave={handleLeave}
       className={`w-full text-left px-2 py-1.5 flex items-center gap-2.5 transition-colors cursor-pointer ${
         isActive
-          ? "bg-[#3CE6AC]/10 border-l-2 border-[#3CE6AC]"
+          ? "bg-studio-accent/10 border-l-2 border-studio-accent"
           : "border-l-2 border-transparent hover:bg-neutral-800/50"
       }`}
     >
-      <div className="w-20 h-[45px] rounded overflow-hidden bg-neutral-900 flex-shrink-0">
-        <img
-          src={thumbnailUrl}
-          alt={name}
-          loading="lazy"
-          className="w-full h-full object-cover"
-          onError={(e) => {
-            (e.target as HTMLImageElement).style.display = "none";
-          }}
-        />
+      <div className="w-20 h-[45px] rounded overflow-hidden bg-neutral-900 flex-shrink-0 relative">
+        {/* Live iframe preview on hover */}
+        {hovered && (
+          <iframe
+            src={previewUrl}
+            sandbox="allow-scripts allow-same-origin"
+            className="absolute inset-0 w-[1920px] h-[1080px] border-none pointer-events-none"
+            style={{
+              transformOrigin: "0 0",
+              transform: `scale(${80 / 1920})`,
+            }}
+            tabIndex={-1}
+          />
+        )}
+        {/* Static thumbnail — hidden while hovering */}
+        <div
+          className="absolute inset-0 transition-opacity duration-150"
+          style={{ opacity: hovered ? 0 : 1 }}
+        >
+          <img
+            src={thumbnailUrl}
+            alt={name}
+            loading="lazy"
+            className="w-full h-full object-contain"
+            onError={(e) => {
+              (e.target as HTMLImageElement).style.display = "none";
+            }}
+          />
+        </div>
       </div>
       <div className="min-w-0 flex-1">
         <span className="text-[11px] font-medium text-neutral-300 truncate block">{name}</span>
@@ -174,27 +81,6 @@ function CompCard({
       </div>
     </div>
   );
-
-  return (
-    <ExpandOnHover
-      expandedContent={(closeExpand) => (
-        <ExpandedCompPreview
-          previewUrl={previewUrl}
-          name={name}
-          comp={comp}
-          onSelect={() => {
-            closeExpand();
-            onSelect();
-          }}
-        />
-      )}
-      onClick={onSelect}
-      expandScale={0.5}
-      delay={500}
-    >
-      {card}
-    </ExpandOnHover>
-  );
 }
 
 export const CompositionsTab = memo(function CompositionsTab({