fix(canvas): render generated video posters from one-second frame

Author: erickkkyt

src/components/beatcanvas/nodes/generation-card-node-interaction.test.ts

@@ -62,9 +62,12 @@ test('generated videos expose a direct playback entry', () => {
     source,
     /cardMediaType === 'video'[\s\S]*?<button[\s\S]*?handlePreviewLatestOutput/
   );
+  assert.match(source, /function StaticVideoPoster/);
+  assert.match(source, /captureStaticVideoPreview\(video, maxEdge\)/);
+  assert.match(source, /<img[\s\S]*?src=\{poster\}/);
   assert.match(
     source,
-    /<video[\s\S]*?onDoubleClick=\{[\s\S]*?handlePreviewLatestOutput/
+    /<StaticVideoPoster[\s\S]*?onDoubleClick=\{[\s\S]*?handlePreviewLatestOutput/
   );
   assert.match(source, /seekStaticVideoPreview\(event\.currentTarget\)/);
 });

src/components/beatcanvas/nodes/generation-card-node.tsx

@@ -6,9 +6,19 @@ import {
   useInternalNode,
 } from '@xyflow/react';
 import { ScanSearch, Sparkles } from 'lucide-react';
+import {
+  useCallback,
+  useEffect,
+  useState,
+  type CSSProperties,
+  type MouseEventHandler,
+} from 'react';
 
 import type { GenerationTake } from '@/core/beatcanvas/generation-history';
-import { seekStaticVideoPreview } from '@/core/media/video-preview';
+import {
+  captureStaticVideoPreview,
+  seekStaticVideoPreview,
+} from '@/core/media/video-preview';
 
 import { getBeatCanvasNodeCopy } from './beatcanvas-node-copy';
 import type { BeatCanvasFlowNode } from '../react-flow/beatcanvas-react-flow-types';
@@ -22,6 +32,86 @@ const FRAME_BACKGROUND =
   'linear-gradient(180deg, var(--beat-surface-2) 0%, var(--beat-surface) 100%)';
 const PLACEHOLDER_COLOR = 'rgba(255, 255, 255, 0.22)';
 
+function StaticVideoPoster({
+  src,
+  alt,
+  maxEdge = 512,
+  cursor = 'default',
+  onDoubleClick,
+}: {
+  src: string;
+  alt: string;
+  maxEdge?: number;
+  cursor?: CSSProperties['cursor'];
+  onDoubleClick?: MouseEventHandler<HTMLDivElement>;
+}) {
+  const [poster, setPoster] = useState<string | null>(null);
+
+  useEffect(() => setPoster(null), [src]);
+
+  const captureFrame = useCallback(
+    (video: HTMLVideoElement) => {
+      const nextPoster = captureStaticVideoPreview(video, maxEdge);
+      if (nextPoster) setPoster((current) => current ?? nextPoster);
+    },
+    [maxEdge]
+  );
+
+  return (
+    <div
+      className="nowheel"
+      onDoubleClick={onDoubleClick}
+      style={{
+        position: 'relative',
+        width: '100%',
+        height: '100%',
+        overflow: 'hidden',
+        cursor,
+        background:
+          'linear-gradient(145deg, var(--beat-surface-2), var(--beat-surface))',
+      }}
+    >
+      <video
+        src={src}
+        muted
+        playsInline
+        preload="metadata"
+        className="nowheel"
+        aria-hidden="true"
+        tabIndex={-1}
+        onLoadedMetadata={(event) =>
+          seekStaticVideoPreview(event.currentTarget)
+        }
+        onLoadedData={(event) => captureFrame(event.currentTarget)}
+        onSeeked={(event) => captureFrame(event.currentTarget)}
+        style={{
+          position: 'absolute',
+          inset: 0,
+          width: '100%',
+          height: '100%',
+          objectFit: 'cover',
+          opacity: 0,
+          pointerEvents: 'none',
+        }}
+      />
+      {poster ? (
+        <img
+          src={poster}
+          alt={alt}
+          draggable={false}
+          className="nowheel"
+          style={{
+            display: 'block',
+            width: '100%',
+            height: '100%',
+            objectFit: 'cover',
+          }}
+        />
+      ) : null}
+    </div>
+  );
+}
+
 export function GenerationCardNode({
   id,
   data,
@@ -286,28 +376,16 @@ export function GenerationCardNode({
                   </div>
                 </div>
               ) : cardMediaType === 'video' ? (
-                <video
-                  src={latestOutputUrl ?? undefined}
-                  muted
-                  playsInline
-                  preload="metadata"
-                  onLoadedMetadata={(event) =>
-                    seekStaticVideoPreview(event.currentTarget)
-                  }
-                  draggable={false}
+                <StaticVideoPoster
+                  key={latestOutputUrl}
+                  src={latestOutputUrl ?? ''}
+                  alt={displayLabel}
+                  cursor="zoom-in"
                   onDoubleClick={(event) => {
                     event.preventDefault();
                     event.stopPropagation();
                     handlePreviewLatestOutput();
                   }}
-                  className="nowheel"
-                  style={{
-                    display: 'block',
-                    width: '100%',
-                    height: '100%',
-                    objectFit: 'cover',
-                    cursor: 'zoom-in',
-                  }}
                 />
               ) : (
                 <img
@@ -491,21 +569,11 @@ export function GenerationCardNode({
                   }}
                 >
                   {take.url && take.type === 'video' ? (
-                    <video
+                    <StaticVideoPoster
+                      key={take.url}
                       src={take.url}
-                      muted
-                      playsInline
-                      preload="metadata"
-                      className="nowheel"
-                      onLoadedMetadata={(event) =>
-                        seekStaticVideoPreview(event.currentTarget)
-                      }
-                      style={{
-                        display: 'block',
-                        width: '100%',
-                        height: '100%',
-                        objectFit: 'cover',
-                      }}
+                      alt=""
+                      maxEdge={96}
                     />
                   ) : take.url ? (
                     <img

src/core/media/video-preview.test.ts

@@ -2,6 +2,7 @@ import assert from 'node:assert/strict';
 import test from 'node:test';
 
 import {
+  getStaticVideoPreviewSize,
   getStaticVideoPreviewTime,
   seekStaticVideoPreview,
   STATIC_VIDEO_PREVIEW_TIME_SECONDS,
@@ -27,3 +28,18 @@ test('static video preview seeking tolerates non-seekable media', () => {
   };
   assert.doesNotThrow(() => seekStaticVideoPreview(video));
 });
+
+test('static video preview frames are downscaled without changing aspect ratio', () => {
+  assert.deepEqual(getStaticVideoPreviewSize(720, 1280), {
+    width: 288,
+    height: 512,
+  });
+  assert.deepEqual(getStaticVideoPreviewSize(1920, 1080, 320), {
+    width: 320,
+    height: 180,
+  });
+  assert.deepEqual(getStaticVideoPreviewSize(240, 180), {
+    width: 240,
+    height: 180,
+  });
+});

src/core/media/video-preview.ts

@@ -1,4 +1,5 @@
 export const STATIC_VIDEO_PREVIEW_TIME_SECONDS = 1;
+export const STATIC_VIDEO_PREVIEW_MAX_EDGE = 512;
 
 export function getStaticVideoPreviewTime(
   duration: number,
@@ -25,3 +26,57 @@ export function seekStaticVideoPreview(
     // Some remote or not-yet-seekable media rejects programmatic seeking.
   }
 }
+
+export function getStaticVideoPreviewSize(
+  sourceWidth: number,
+  sourceHeight: number,
+  maxEdge = STATIC_VIDEO_PREVIEW_MAX_EDGE
+) {
+  if (
+    !Number.isFinite(sourceWidth) ||
+    !Number.isFinite(sourceHeight) ||
+    sourceWidth <= 0 ||
+    sourceHeight <= 0 ||
+    !Number.isFinite(maxEdge) ||
+    maxEdge <= 0
+  ) {
+    return { width: 0, height: 0 };
+  }
+
+  const scale = Math.min(1, maxEdge / Math.max(sourceWidth, sourceHeight));
+  return {
+    width: Math.max(1, Math.round(sourceWidth * scale)),
+    height: Math.max(1, Math.round(sourceHeight * scale)),
+  };
+}
+
+export function captureStaticVideoPreview(
+  video: HTMLVideoElement,
+  maxEdge = STATIC_VIDEO_PREVIEW_MAX_EDGE
+) {
+  if (typeof document === 'undefined' || video.readyState < 2) return null;
+
+  const targetTime = getStaticVideoPreviewTime(video.duration);
+  if (Math.abs(video.currentTime - targetTime) > 0.12) return null;
+
+  const size = getStaticVideoPreviewSize(
+    video.videoWidth,
+    video.videoHeight,
+    maxEdge
+  );
+  if (size.width === 0 || size.height === 0) return null;
+
+  try {
+    const canvas = document.createElement('canvas');
+    canvas.width = size.width;
+    canvas.height = size.height;
+    const context = canvas.getContext('2d');
+    if (!context) return null;
+    context.drawImage(video, 0, 0, size.width, size.height);
+    return canvas.toDataURL('image/jpeg', 0.84);
+  } catch {
+    // Cross-origin media can reject canvas capture. The caller keeps its
+    // non-black loading surface instead of exposing a broken video layer.
+    return null;
+  }
+}