@hyperframes/studio 0.1.10 → 0.1.11

package/src/player/components/TimelineClip.tsx

@@ -0,0 +1,80 @@
+// TimelineClip — Visual clip component for the NLE timeline.
+
+import { memo, type ReactNode } from "react";
+import type { TimelineElement } from "../store/playerStore";
+
+interface TimelineClipProps {
+  el: TimelineElement;
+  pps: number;
+  trackH: number;
+  clipY: number;
+  isSelected: boolean;
+  isHovered: boolean;
+  hasCustomContent: boolean;
+  style: { clip: string; label: string };
+  isComposition: boolean;
+  onHoverStart: () => void;
+  onHoverEnd: () => void;
+  onClick: (e: React.MouseEvent) => void;
+  onDoubleClick: (e: React.MouseEvent) => void;
+  children?: ReactNode;
+}
+
+export const TimelineClip = memo(function TimelineClip({
+  el,
+  pps,
+  clipY,
+  isSelected,
+  isHovered,
+  hasCustomContent,
+  style,
+  isComposition,
+  onHoverStart,
+  onHoverEnd,
+  onClick,
+  onDoubleClick,
+  children,
+}: TimelineClipProps) {
+  const leftPx = el.start * pps;
+  const widthPx = Math.max(el.duration * pps, 4);
+
+  return (
+    <div
+      data-clip="true"
+      className={hasCustomContent ? "absolute" : "absolute flex items-center"}
+      style={{
+        left: leftPx,
+        width: widthPx,
+        top: clipY,
+        bottom: clipY,
+        borderRadius: 5,
+        backgroundColor: hasCustomContent ? (isComposition ? "#111" : style.clip) : style.clip,
+        backgroundImage:
+          isComposition && !hasCustomContent
+            ? `repeating-linear-gradient(135deg, transparent, transparent 3px, rgba(255,255,255,0.08) 3px, rgba(255,255,255,0.08) 6px)`
+            : undefined,
+        border: isSelected
+          ? `2px solid rgba(255,255,255,0.9)`
+          : `1px solid rgba(255,255,255,${isHovered ? 0.3 : 0.15})`,
+        boxShadow: isSelected
+          ? `0 0 0 1px ${style.clip}, 0 2px 8px rgba(0,0,0,0.4)`
+          : isHovered
+            ? "0 1px 4px rgba(0,0,0,0.3)"
+            : "none",
+        transition: "border-color 120ms, box-shadow 120ms",
+        zIndex: isSelected ? 10 : isHovered ? 5 : 1,
+      }}
+      title={
+        isComposition
+          ? `${el.compositionSrc} \u2022 Double-click to open`
+          : `${el.id || el.tag} \u2022 ${el.start.toFixed(1)}s \u2013 ${(el.start + el.duration).toFixed(1)}s`
+      }
+      onPointerEnter={onHoverStart}
+      onPointerLeave={onHoverEnd}
+      onClick={onClick}
+      onDoubleClick={onDoubleClick}
+    >
+      {children}
+    </div>
+  );
+});

package/src/player/components/VideoThumbnail.tsx

@@ -0,0 +1,196 @@
+import { memo, useRef, useState, useCallback, useEffect } from "react";
+import { useMountEffect } from "../../hooks/useMountEffect";
+
+interface VideoThumbnailProps {
+  videoSrc: string;
+  label: string;
+  labelColor: string;
+  duration?: number;
+}
+
+const CLIP_HEIGHT = 66;
+const MAX_UNIQUE_FRAMES: number = 6;
+
+/**
+ * Renders a film-strip of video frames extracted client-side via a hidden
+ * <video> + <canvas>. Each frame is a fixed-width tile; frames repeat to
+ * fill the clip width — matching ClipThumbnail's visual pattern.
+ */
+export const VideoThumbnail = memo(function VideoThumbnail({
+  videoSrc,
+  label,
+  labelColor,
+  duration = 5,
+}: VideoThumbnailProps) {
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [visible, setVisible] = useState(false);
+  const [frames, setFrames] = useState<string[]>([]);
+  const [aspect, setAspect] = useState(16 / 9);
+  const ioRef = useRef<IntersectionObserver | null>(null);
+  const roRef = useRef<ResizeObserver | null>(null);
+  const extractingRef = useRef(false);
+
+  const setContainerRef = useCallback((el: HTMLDivElement | null) => {
+    ioRef.current?.disconnect();
+    roRef.current?.disconnect();
+    if (!el) return;
+
+    const measured = el.parentElement?.clientWidth || el.clientWidth;
+    setContainerWidth(measured);
+
+    ioRef.current = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setVisible(true);
+          ioRef.current?.disconnect();
+        }
+      },
+      { rootMargin: "200px" },
+    );
+    ioRef.current.observe(el);
+
+    const target = el.parentElement || el;
+    roRef.current = new ResizeObserver(([entry]) => {
+      setContainerWidth(entry.contentRect.width);
+    });
+    roRef.current.observe(target);
+  }, []);
+
+  useMountEffect(() => () => {
+    ioRef.current?.disconnect();
+    roRef.current?.disconnect();
+  });
+
+  // Extract frames progressively — each frame appears as soon as it's ready.
+  // Note: useEffect with deps is acceptable — syncs with external video element API,
+  // requires cleanup (cancel extraction, revoke URLs) when inputs change.
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (!visible || extractingRef.current) return;
+    extractingRef.current = true;
+
+    const video = document.createElement("video");
+    video.crossOrigin = "anonymous";
+    video.muted = true;
+    video.preload = "auto";
+
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      extractingRef.current = false;
+      return;
+    }
+
+    const timestamps: number[] = [];
+    const minSeek = Math.min(0.4, duration * 0.05);
+    for (let i = 0; i < MAX_UNIQUE_FRAMES; i++) {
+      const raw =
+        MAX_UNIQUE_FRAMES === 1 ? duration * 0.15 : (i / (MAX_UNIQUE_FRAMES - 1)) * duration;
+      timestamps.push(Math.max(raw, minSeek));
+    }
+
+    let idx = 0;
+    let cancelled = false;
+
+    const extractNext = () => {
+      if (cancelled || idx >= timestamps.length) {
+        if (!cancelled) {
+          video.src = "";
+          video.load();
+        }
+        return;
+      }
+      video.currentTime = timestamps[idx];
+    };
+
+    video.addEventListener("loadedmetadata", () => {
+      if (video.videoWidth > 0 && video.videoHeight > 0) {
+        setAspect(video.videoWidth / video.videoHeight);
+        const h = CLIP_HEIGHT * 2;
+        const w = Math.round(h * (video.videoWidth / video.videoHeight));
+        canvas.width = w;
+        canvas.height = h;
+      }
+      extractNext();
+    });
+
+    video.addEventListener("seeked", () => {
+      if (cancelled) return;
+      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+      const dataUrl = canvas.toDataURL("image/jpeg", 0.6);
+      // Stream each frame immediately
+      setFrames((prev) => [...prev, dataUrl]);
+      idx++;
+      extractNext();
+    });
+
+    video.addEventListener("error", () => {
+      /* keep whatever frames we have */
+    });
+
+    video.src = videoSrc;
+    video.load();
+
+    return () => {
+      cancelled = true;
+      extractingRef.current = false;
+      setFrames([]);
+      video.src = "";
+      video.load();
+    };
+  }, [visible, videoSrc, duration]);
+
+  const frameW = Math.round(CLIP_HEIGHT * aspect);
+  const frameCount = containerWidth > 0 ? Math.max(1, Math.ceil(containerWidth / frameW)) : 1;
+
+  return (
+    <div ref={setContainerRef} className="absolute inset-0 overflow-hidden">
+      {visible && frames.length > 0 && (
+        <div className="absolute inset-0 flex">
+          {Array.from({ length: frameCount }).map((_, i) => {
+            const src = frames[i % frames.length];
+            return (
+              <div
+                key={i}
+                className="flex-shrink-0 h-full relative overflow-hidden bg-neutral-900"
+                style={{ width: frameW }}
+              >
+                <img
+                  src={src}
+                  alt=""
+                  draggable={false}
+                  className="absolute inset-0 w-full h-full object-cover"
+                />
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {visible && frames.length === 0 && (
+        <div
+          className="absolute inset-0 animate-pulse"
+          style={{
+            background:
+              "linear-gradient(90deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.02) 100%)",
+          }}
+        />
+      )}
+
+      <div
+        className="absolute bottom-0 left-0 right-0 z-10 px-1.5 pb-0.5 pt-3"
+        style={{
+          background:
+            "linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%)",
+        }}
+      >
+        <span
+          className="text-[9px] font-semibold truncate block leading-tight"
+          style={{ color: labelColor, textShadow: "0 1px 2px rgba(0,0,0,0.9)" }}
+        >
+          {label}
+        </span>
+      </div>
+    </div>
+  );
+});