@hyperframes/studio 0.7.37 → 0.7.38

package/src/components/renders/RenderQueue.tsx

@@ -1,5 +1,6 @@
-import { memo, useState, useRef, useEffect } from "react";
+import { memo, useState, useRef, useEffect, useId } from "react";
 import { RenderQueueItem } from "./RenderQueueItem";
+import { Button } from "../ui/Button";
 import type { RenderJob, ResolutionPreset } from "./useRenderQueue";
 import { getPersistedRenderSettings, persistRenderSettings } from "./renderSettings";
 import { trackStudioEvent } from "../../utils/studioTelemetry";
@@ -20,9 +21,17 @@ interface RenderQueueProps {
   jobs: RenderJob[];
   projectId: string;
   onDelete: (jobId: string) => void;
+  onCancel?: (jobId: string) => void;
   onClearCompleted: () => void;
   onStartRender: StartRenderHandler;
   isRendering: boolean;
+  /** History fetch failure (null when the last load succeeded). */
+  loadError?: string | null;
+  /** Retry a failed history load. */
+  onRetryLoad?: () => void;
+  /** Failure of a delete/cancel action, shown inline until dismissed. */
+  actionError?: string | null;
+  onDismissActionError?: () => void;
   /**
    * Authored dimensions of the active composition. Used to pick the
    * matching preset (landscape / portrait / square) when the user selects
@@ -110,9 +119,15 @@ function scaleOptionLabel(
   dims: CompositionDimensions | null | undefined,
 ): string {
   const resolved = resolvedDimensions(scale, dims);
-  return resolved
+  const base = resolved
     ? `${SCALE_LABEL[scale]} · ${resolved.width}×${resolved.height}`
     : SCALE_LABEL[scale];
+  // Explain *why* an option is disabled instead of greying it silently:
+  // the preset must be an exact integer upscale of the authored size.
+  if (dims && !scaleApplies(scale, dims)) {
+    return `${base} — not an integer scale of ${dims.width}×${dims.height}`;
+  }
+  return base;
 }
 
 const FORMAT_INFO: Record<"mp4" | "webm" | "mov", { label: string; desc: string }> = {
@@ -127,9 +142,14 @@ const FORMAT_INFO: Record<"mp4" | "webm" | "mov", { label: string; desc: string
   },
 };
 
+// Rich format guidance in a keyboard-reachable disclosure: the trigger is a
+// real button (focusable, labelled), the panel is tied to it via
+// aria-describedby, and Escape dismisses (WCAG 1.4.13). Content is too rich
+// for the one-line ui/Tooltip primitive, so this stays a local popover.
 function FormatInfoTooltip({ format }: { format: "mp4" | "webm" | "mov" }) {
   const [open, setOpen] = useState(false);
   const timeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const panelId = useId();
 
   const show = () => {
     clearTimeout(timeoutRef.current);
@@ -141,27 +161,51 @@ function FormatInfoTooltip({ format }: { format: "mp4" | "webm" | "mov" }) {
 
   useEffect(() => () => clearTimeout(timeoutRef.current), []);
 
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [open]);
+
   const info = FORMAT_INFO[format];
 
   return (
     <div className="relative" onPointerEnter={show} onPointerLeave={hide}>
-      <svg
-        width="12"
-        height="12"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        className="text-panel-text-5 hover:text-panel-text-3 transition-colors cursor-help"
+      <button
+        type="button"
+        aria-label="About video formats"
+        aria-expanded={open}
+        aria-describedby={open ? panelId : undefined}
+        onFocus={show}
+        onBlur={hide}
+        onClick={() => setOpen((prev) => !prev)}
+        className="flex items-center justify-center p-0.5 -m-0.5 rounded text-panel-text-5 hover:text-panel-text-3 transition-colors cursor-help outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-studio-accent"
       >
-        <circle cx="12" cy="12" r="10" />
-        <path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3" />
-        <line x1="12" y1="17" x2="12.01" y2="17" />
-      </svg>
+        <svg
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden="true"
+        >
+          <circle cx="12" cy="12" r="10" />
+          <path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3" />
+          <line x1="12" y1="17" x2="12.01" y2="17" />
+        </svg>
+      </button>
       {open && (
-        <div className="absolute top-full right-0 mt-1.5 w-52 p-2 rounded bg-panel-input border border-neutral-700 shadow-lg z-50">
+        <div
+          id={panelId}
+          role="tooltip"
+          className="absolute top-full right-0 mt-1.5 w-52 p-2 rounded bg-panel-input border border-neutral-700 shadow-lg z-50"
+        >
           <p className="text-[10px] font-semibold text-panel-text-1 mb-0.5">{info.label}</p>
           <p className="text-[9px] text-panel-text-3 leading-tight">{info.desc}</p>
           <div className="mt-1.5 pt-1.5 border-t border-neutral-800">
@@ -191,14 +235,21 @@ const QUALITY_OPTIONS: {
   { value: "high", label: "High Quality", title: "Best quality, larger file" },
 ];
 
+function formatEta(ms: number): string {
+  const s = Math.round(ms / 1000);
+  return s < 60 ? `${s}s` : `${Math.floor(s / 60)}m ${s % 60}s`;
+}
+
 function FormatExportButton({
   onStartRender,
   isRendering,
   compositionDimensions,
+  lastRenderDurationMs,
 }: {
   onStartRender: StartRenderHandler;
   isRendering: boolean;
   compositionDimensions?: CompositionDimensions | null;
+  lastRenderDurationMs?: number;
 }) {
   const persisted = getPersistedRenderSettings();
   const [format, setFormat] = useState<"mp4" | "webm" | "mov">(persisted.format);
@@ -293,16 +344,26 @@ function FormatExportButton({
           </div>
         )}
       </div>
-      <button
+      <Button
+        variant="primary"
+        size="md"
+        loading={isRendering}
         onClick={() => {
+          // loading already disables the button; this guard also stops a
+          // double-click in the same frame from enqueueing two renders.
+          if (isRendering) return;
           trackStudioEvent("render_start", { format, quality, resolution, fps });
           void onStartRender(format, quality, resolution, fps);
         }}
-        disabled={isRendering}
-        className="w-full flex items-center justify-center h-8 text-[11px] font-semibold rounded-md bg-panel-accent text-[#09090B] hover:brightness-110 transition-colors disabled:opacity-50"
+        className="w-full text-[11px] font-semibold"
       >
-        {isRendering ? "Rendering..." : "Export"}
-      </button>
+        {isRendering ? "Rendering…" : "Export"}
+      </Button>
+      {lastRenderDurationMs !== undefined && !isRendering && (
+        <p className="text-[9px] text-panel-text-5 text-center -mt-1.5">
+          Last render took {formatEta(lastRenderDurationMs)}
+        </p>
+      )}
     </div>
   );
 }
@@ -311,9 +372,14 @@ export const RenderQueue = memo(function RenderQueue({
   jobs,
   projectId,
   onDelete,
+  onCancel,
   onClearCompleted,
   onStartRender,
   isRendering,
+  loadError,
+  onRetryLoad,
+  actionError,
+  onDismissActionError,
   compositionDimensions,
 }: RenderQueueProps) {
   const listRef = useRef<HTMLDivElement>(null);
@@ -327,6 +393,9 @@ export const RenderQueue = memo(function RenderQueue({
   }, [jobs.length]);
 
   const completedCount = jobs.filter((j) => j.status !== "rendering").length;
+  const lastRenderDurationMs = [...jobs]
+    .reverse()
+    .find((j) => j.status === "complete" && j.durationMs !== undefined)?.durationMs;
 
   return (
     <div className="flex flex-col h-full">
@@ -335,12 +404,40 @@ export const RenderQueue = memo(function RenderQueue({
           onStartRender={onStartRender}
           isRendering={isRendering}
           compositionDimensions={compositionDimensions}
+          lastRenderDurationMs={lastRenderDurationMs}
         />
       </div>
 
+      {actionError && (
+        <div
+          role="alert"
+          className="flex items-start justify-between gap-2 px-3 py-2 border-b border-panel-border bg-red-500/10"
+        >
+          <span className="text-[10px] text-red-400">{actionError}</span>
+          {onDismissActionError && (
+            <button
+              onClick={onDismissActionError}
+              aria-label="Dismiss error"
+              className="text-[10px] text-panel-text-4 hover:text-panel-text-2 flex-shrink-0"
+            >
+              ✕
+            </button>
+          )}
+        </div>
+      )}
+
       {/* Job list */}
       <div ref={listRef} className="flex-1 overflow-y-auto">
-        {jobs.length === 0 ? (
+        {loadError && jobs.length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-full px-4 gap-2" role="alert">
+            <p className="text-[10px] text-red-400 text-center">{loadError}</p>
+            {onRetryLoad && (
+              <Button size="sm" variant="secondary" onClick={onRetryLoad}>
+                Retry
+              </Button>
+            )}
+          </div>
+        ) : jobs.length === 0 ? (
           <div className="flex flex-col items-center justify-center h-full px-4 gap-2">
             <svg
               width="20"
@@ -376,11 +473,14 @@ export const RenderQueue = memo(function RenderQueue({
                 <span className="text-[10px] text-panel-text-4">
                   {jobs.length} render{jobs.length === 1 ? "" : "s"}
                 </span>
+                {/* "Hide", not "Clear": files stay on disk (delete is per-row
+                    and confirmed); hidden rows don't resurrect on reload. */}
                 <button
                   onClick={onClearCompleted}
+                  title="Hide finished renders from this list (files stay on disk)"
                   className="text-[10px] text-panel-text-4 hover:text-panel-text-2 transition-colors"
                 >
-                  Clear
+                  Hide finished
                 </button>
               </div>
             )}
@@ -390,6 +490,7 @@ export const RenderQueue = memo(function RenderQueue({
                 job={job}
                 projectId={projectId}
                 onDelete={() => onDelete(job.id)}
+                onCancel={() => onCancel?.(job.id)}
               />
             ))}
           </div>

package/src/components/renders/RenderQueueItem.tsx

@@ -1,11 +1,13 @@
 import { memo, useCallback, useState } from "react";
 import { VideoFrameThumbnail } from "../ui/VideoFrameThumbnail";
+import { Button } from "../ui/Button";
 import type { RenderJob } from "./useRenderQueue";
 
 interface RenderQueueItemProps {
   job: RenderJob;
   projectId: string;
   onDelete: () => void;
+  onCancel: () => void;
 }
 
 function formatDuration(ms: number): string {
@@ -27,8 +29,11 @@ export const RenderQueueItem = memo(function RenderQueueItem({
   job,
   projectId,
   onDelete,
+  onCancel,
 }: RenderQueueItemProps) {
   const [hovered, setHovered] = useState(false);
+  const [videoReady, setVideoReady] = useState(false);
+  const [confirmingDelete, setConfirmingDelete] = useState(false);
 
   // Direct file URL — serves from disk, survives server restarts
   const fileSrc = `/api/projects/${projectId}/renders/file/${job.filename}`;
@@ -50,25 +55,35 @@ export const RenderQueueItem = memo(function RenderQueueItem({
 
   const viewSrc = fileSrc;
   const isComplete = job.status === "complete";
+  const isRendering = job.status === "rendering";
 
   return (
     <div
       onPointerEnter={() => setHovered(true)}
-      onPointerLeave={() => setHovered(false)}
-      onClick={isComplete ? handleOpen : undefined}
-      className={[
-        "px-3 py-2.5 border-b border-panel-border last:border-0 transition-colors duration-150",
-        isComplete ? "cursor-pointer hover:bg-panel-hover/30" : "",
-      ]
-        .filter(Boolean)
-        .join(" ")}
+      onPointerLeave={() => {
+        setHovered(false);
+        setVideoReady(false);
+        setConfirmingDelete(false);
+      }}
+      className="px-3 py-2.5 border-b border-panel-border last:border-0 transition-colors duration-150 hover:bg-panel-hover/30"
     >
       <div className="flex items-center gap-2.5">
-        {/* Thumbnail — static frame; swaps to live video on hover */}
-        <div className="w-20 h-[45px] rounded-md overflow-hidden bg-panel-input flex-shrink-0 relative">
+        {/* Thumbnail — static frame; swaps to live video on hover.
+            A real button so keyboard users can open the render too. */}
+        <button
+          type="button"
+          onClick={isComplete ? handleOpen : undefined}
+          disabled={!isComplete}
+          aria-label={isComplete ? `Open ${job.filename} in a new tab` : undefined}
+          className={[
+            "w-20 h-[45px] rounded-md overflow-hidden bg-panel-input flex-shrink-0 relative",
+            "outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-studio-accent",
+            isComplete ? "cursor-pointer" : "cursor-default",
+          ].join(" ")}
+        >
           {isComplete && (
             <>
-              {/* Live video — visible on hover */}
+              {/* Live video — fades in over the static frame once it can play */}
               {hovered && (
                 <video
                   src={viewSrc}
@@ -76,21 +91,23 @@ export const RenderQueueItem = memo(function RenderQueueItem({
                   muted
                   loop
                   playsInline
-                  className="absolute inset-0 w-full h-full object-contain"
+                  onCanPlay={() => setVideoReady(true)}
+                  className="absolute inset-0 w-full h-full object-contain transition-opacity duration-150"
+                  style={{ opacity: videoReady ? 1 : 0 }}
                 />
               )}
               {/* Static frame — visible when not hovering */}
               <div
                 className="absolute inset-0 transition-opacity duration-150"
-                style={{ opacity: hovered ? 0 : 1 }}
+                style={{ opacity: hovered && videoReady ? 0 : 1 }}
               >
                 <VideoFrameThumbnail src={viewSrc} />
               </div>
             </>
           )}
-          {job.status === "rendering" && (
+          {isRendering && (
             <div className="w-full h-full flex items-center justify-center">
-              <div className="w-2 h-2 rounded-full bg-panel-accent animate-pulse" />
+              <div className="w-2 h-2 rounded-full bg-panel-accent animate-pulse motion-reduce:animate-none" />
             </div>
           )}
           {job.status === "failed" && (
@@ -103,7 +120,7 @@ export const RenderQueueItem = memo(function RenderQueueItem({
               <div className="w-2 h-2 rounded-full bg-neutral-600" />
             </div>
           )}
-        </div>
+        </button>
 
         {/* Info */}
         <div className="flex-1 min-w-0">
@@ -118,13 +135,20 @@ export const RenderQueueItem = memo(function RenderQueueItem({
             )}
           </div>
 
-          {job.status === "rendering" && (
+          {isRendering && (
             <div className="mt-1">
               <div className="flex items-center justify-between mb-0.5">
                 <span className="text-[9px] text-panel-text-4">{job.stage || "Rendering"}</span>
                 <span className="text-[9px] font-mono text-panel-accent">{job.progress}%</span>
               </div>
-              <div className="w-full h-1 bg-panel-border rounded-full overflow-hidden">
+              <div
+                className="w-full h-1 bg-panel-border rounded-full overflow-hidden"
+                role="progressbar"
+                aria-valuenow={job.progress}
+                aria-valuemin={0}
+                aria-valuemax={100}
+                aria-label={`Render progress: ${job.progress}%`}
+              >
                 <div
                   className="h-full bg-panel-accent rounded-full transition-all duration-300"
                   style={{ width: `${job.progress}%` }}
@@ -136,59 +160,103 @@ export const RenderQueueItem = memo(function RenderQueueItem({
           {job.status === "failed" && job.error && (
             <span className="text-[9px] text-red-400 mt-0.5 block">{job.error}</span>
           )}
+          {job.status === "cancelled" && (
+            <span className="text-[9px] text-panel-text-4 mt-0.5 block">Cancelled</span>
+          )}
 
-          {job.status !== "rendering" && (
+          {!isRendering && (
             <span className="text-[9px] text-panel-text-5">{formatTimeAgo(job.createdAt)}</span>
           )}
         </div>
 
         {/* Actions — always visible to prevent layout shifts */}
-        <div className="flex items-center gap-1 flex-shrink-0">
-          <button
-            onClick={isComplete ? handleDownload : undefined}
-            className={`p-1 rounded transition-colors ${
-              isComplete
-                ? "text-panel-text-5 hover:text-panel-accent"
-                : "text-panel-text-5/30 pointer-events-none"
-            }`}
-            title={isComplete ? "Download" : "Rendering..."}
-            disabled={!isComplete}
-          >
-            <svg
-              width="12"
-              height="12"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            >
-              <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
-              <polyline points="7 10 12 15 17 10" />
-              <line x1="12" y1="15" x2="12" y2="3" />
-            </svg>
-          </button>
-          <button
-            onClick={(e) => {
-              e.stopPropagation();
-              onDelete();
-            }}
-            className="p-1 rounded text-panel-text-5 hover:text-red-400 transition-colors"
-            title="Remove"
-          >
-            <svg
-              width="12"
-              height="12"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
+        <div className="flex items-center gap-1.5 flex-shrink-0">
+          {isRendering ? (
+            <Button
+              size="sm"
+              variant="secondary"
+              onClick={(e) => {
+                e.stopPropagation();
+                onCancel();
+              }}
             >
-              <path d="M18 6L6 18M6 6l12 12" />
-            </svg>
-          </button>
+              Cancel
+            </Button>
+          ) : confirmingDelete ? (
+            <>
+              <Button
+                size="sm"
+                variant="danger"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setConfirmingDelete(false);
+                  onDelete();
+                }}
+              >
+                Delete?
+              </Button>
+              <Button
+                size="sm"
+                variant="ghost"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setConfirmingDelete(false);
+                }}
+              >
+                Keep
+              </Button>
+            </>
+          ) : (
+            <>
+              <button
+                onClick={isComplete ? handleDownload : undefined}
+                className={`p-1.5 min-w-6 min-h-6 rounded transition-colors outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-studio-accent ${
+                  isComplete
+                    ? "text-panel-text-5 hover:text-panel-accent"
+                    : "text-panel-text-5/30 cursor-default"
+                }`}
+                title={isComplete ? "Download" : undefined}
+                aria-label={`Download ${job.filename}`}
+                disabled={!isComplete}
+              >
+                <svg
+                  width="12"
+                  height="12"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
+                  <polyline points="7 10 12 15 17 10" />
+                  <line x1="12" y1="15" x2="12" y2="3" />
+                </svg>
+              </button>
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setConfirmingDelete(true);
+                }}
+                className="p-1.5 min-w-6 min-h-6 rounded text-panel-text-5 hover:text-red-400 transition-colors outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-studio-accent"
+                title="Delete render file"
+                aria-label={`Delete ${job.filename}`}
+              >
+                <svg
+                  width="12"
+                  height="12"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                >
+                  <path d="M18 6L6 18M6 6l12 12" />
+                </svg>
+              </button>
+            </>
+          )}
         </div>
       </div>
     </div>