mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-10 04:18:01 +00:00
feat(studio): revamps Studio + improves code quality (#2291)
* feat(studio): glue API coexistence layer for the NLE swap What: extends 21 glue files so the OLD timeline/canvas engine and the NEW NLE components type-check side by side: playerStore (multi-select setters, zoom pin, snap toggle, non-reactive scale scratch), drag-state types gain optional NLE fields, timelineLayout/timelineAssetDrop/timelineEditingHelpers/ timelineEditing/timelineElementHelpers/studioHelpers/assetHelpers gain the NLE exports, DomEditOverlay + gestures + AssetContextMenu + Timeline props gain optional callbacks/params, contexts gain *Optional hooks, and TimelineEditCallbacks.onMoveElements becomes a bivariant method accepting both engines' change shapes. patchDocumentRootDuration's test rides along. Why: this is the keystone that dissolves the old "welded glue" problem — every symbol the NLE components need is ADDED next to what the old engine still uses, so the engine components and the swaps can land as separate reviewable PRs. How: 15 authored intermediate files (main content + additive symbols; no behavior changes — new fields optional, new callbacks unused until wired) plus 6 files whose final content is already purely additive. New exports without consumers yet carry TEMP(studio-dnd) ignoreExports entries, removed by the app-shell swap. Test plan: tsc --noEmit in studio + studio-server (verifies BOTH engines compile); bunx vitest run (full suite green incl. the 6 new patchDocumentRootDuration tests); fallow audit clean. * feat(studio): timeline interaction hooks and lanes component (unwired) What: the timeline-side wiring layer, unwired: TimelineLanes (the lane renderer driving drag/resize/marquee), timelineMarquee (+tests), useTimelineStackingSync, useTimelineGeometry, useTimelineEditPinning, useTimelineEditingDrops. Why: everything between the pure drag math and <Timeline> itself; the timeline-glue swap PR then only rewires Timeline/TimelineCanvas onto these. How: new files, tsc-clean against the coexistence layer. Unwired components carry TEMP(studio-dnd) entry registrations, removed at the app-shell swap. Test plan: bunx vitest run timelineMarquee.test.ts; tsc --noEmit; fallow audit clean. * feat(studio): NLE shell assembly (unwired) What: EditorShell (the full editor layout replacing NLELayout + StudioPreviewArea), TimelinePane (timeline host with sub-comp rebasing) and useTimelineEditCallbacks (the callback bag bridging store edits to the timeline), all unwired. Why: the shell that App swaps to in the final step; reviewing it standalone keeps that swap PR small. How: new files against the coexistence layer; TEMP(studio-dnd) entries until App mounts EditorShell in the app-shell swap. Test plan: tsc --noEmit; bunx vitest run (suite unchanged); fallow audit clean. * feat(studio): timeline glue swap — Timeline/TimelineCanvas onto the NLE engine What: flips the timeline glue to its final form (23 files): Timeline and TimelineCanvas rebuilt on TimelineLanes/TimelineOverlays, useTimelineClipDrag drives preview/commit through the new drag engine, range selection goes multi-select, playback loop moves to useTimelinePlayerLoop. Deletes the 9 old-engine files this orphans (group drag, marquee selection, snap targets, layer gutter, selection overlays + their suites) — each is compile- or gate-forced by this swap, verified by probe. Why: second swap step; timeline-only, canvas and App untouched. How: modified files to final content + forced deletions. playerStore/timelineEditing/timelineCallbacks stay at their coexistence form until the app swap (the old App still runs on them). Test plan: tsc --noEmit; bunx vitest run (full suite); fallow audit clean. * feat(studio): clip thumbnail modules What: ImageThumbnail (+tests) and thumbnailUtils (+tests) — frame decode with SVG/AVIF format fallbacks and rounded-corner clipping — plus VideoThumbnail updates. Why: the decode layer for timeline clip thumbnails, ahead of the visual refresh that renders them. How: new modules + one modified file; purely presentational. Test plan: bunx vitest run on both test files; tsc --noEmit; fallow audit clean. * feat(studio): assets/blocks panel behaviors + preview helpers What: blocks tab install flow, right-panel and global drag-overlay polish, music beat analysis and clip-content rendering hooks, and the preview-helper utilities backing asset preview. Why: completes the studio NLE stack on top of the visual refresh. How: modified files only (kept as one PR: splitting further would produce sub-150-LOC fragments of interdependent panel glue). Test plan: bunx vitest run studioPreviewHelpers/studioUrlState suites; tsc --noEmit; fallow audit clean. * fix(studio): restore timeline playback loop * fix(studio): restore missing GSAP helpers module * refactor(studio): split timeline GSAP helpers * style(studio): keep timeline helper under size limit * fix(studio): restore timeline overlays module * fix(studio): remove stale GSAP import * fix(studio): restore canonical timeline dependencies * style(studio): format restored timeline helpers * style(studio): satisfy helper line limit * fix(studio): repair rebuilt timeline integration * feat(studio): complete rebuilt NLE cutover * fix(studio): guard project and timeline race boundaries * fix(studio): preserve graded resize and crop geometry * fix(studio): log resize/rotate commit failures, move anchor accumulator to resize-local * fix(studio): treat duration-0 tweens as static holds and settle resize position before persist Instant holds (to()/fromTo() with duration 0) were classified as animated tweens by every commit route, so resizing or rotating them converted the hold into a corrupt duration-0 keyframes tween (new value at 0%, old at 100%) that GSAP drops; panel edits appended a losing set. A shared isInstantHold() now routes them through the static replace-in-place path, and percentage math guards zero-duration windows. Separately, anchored-corner resizes painted 3-5 frames at the new size but old position while the offset persist round-tripped the server. The commit path now applies the corrected GSAP position synchronously before awaiting the offset persist, mirroring the scale route's settle. * feat(studio): gesture-transaction seam with commit observability Introduce runGestureTransaction — one owner for a gesture commit's settle -> persist -> record lifecycle. It settles the live DOM synchronously before any async persist, folds every mutation into one undo entry via a per-transaction coalesceKey, restores pre-gesture state exactly once on failure, and asserts (dev console) + reports (PostHog: commit_transaction / commit_invariant_violation / commit_transaction_failed) that a persist never changes pixels. The box-size resize path is migrated onto it; the ad hoc per-route coalesceKey/reload handling is removed. Extract the resize draft-rect math into resizeDraft.ts to keep the gesture-handler file under the size cap. Also: keep url_hash telemetry to the route slug only (drop the query string, which carried the user's selected element id/selector), and gate the [hf-resize] diagnostics behind localStorage hf-resize-debug so they ship as opt-in tracing rather than console noise. * fix(studio): transaction owns the undo label The coalesced history entry took the last sub-mutation's label, so a resize surfaced as "Move layer" (the offset persist) in undo/redo. The seam now stamps tx.label on every wrapped mutation, so the folded entry reads as the gesture. * fix(studio): atomic static size/position commits (no data loss) Static resize/position holds updated an existing set via delete+add — two undo entries, and a delete that succeeded before a failed add lost the hold on disk. Use one in-place update-properties mutation when a set exists (one undo entry, no partial-failure window). The keyframed-hold heal that can't be expressed as a property update now adds before it deletes, so any single failure leaves a recoverable duplicate, never a lost hold. Transaction-owned commits are tracked via a WeakSet so the heal path never double-wraps an already-wrapped gesture. * fix(core): restore timed-clip visibility after a forced timeline rebind __hfForceTimelineRebind force-rendered the re-registered timeline but never re-ran the per-[data-start] visibility pass, so after undo or soft reload every clip rendered regardless of its time window until a full page reload. Extract the visibility loop into syncTimedElementVisibility and call it from both syncMediaForCurrentState (unchanged) and the rebind. * fix(studio): atomic z-order/keyframe/split commits, one undo entry each Three edit-commit paths hardened onto the one-transaction invariant: - Z-order reorder (useElementLifecycleOps): N per-element writes now fold into one undo entry (coalesceMs Infinity) and, on a failed persist, restore already-written files to disk so no partial reorder survives. - Enable-keyframes (useEnableKeyframes/useGsapKeyframeOps): the intermediate convert phase no longer full-reloads the preview (skipReload), killing the black-flash remount; convert + edit share one coalesce key = one undo entry. - Razor split-all (useRazorSplit): snapshot before the batch and restore on any failure, so a mid-batch error never leaves un-revertable partial splits. Shared file-history helpers (RecordEditInput, DomEditCommitBaseParams, readProjectFileContent, restoreFilesToOriginal) dedupe the rollback/commit logic across these paths. Commit options thread as one partial object rather than field-by-field. Test setup extracted into colocated helpers. * fix(studio): fold multi-step edits into one undo entry; guard text revert - Gesture recording (useGestureCommit): the per-property-group commits now share one coalesce key and only the last reloads, so a recording is one undo entry and one preview reload instead of up to four. - Delete selected keyframes (deleteSelectedKeyframes, split out of timelineEditingHelpers): N removals fold into one coalesced undo entry with a single reload. - Text-field commit (useDomEditTextCommits): commitDomTextFields now uses the same version-guarded revert as handleDomTextCommit, so a stale failed commit can no longer stomp a newer successful one. * feat(studio): batch a gesture's mutations into one atomic server write A transaction that emits N mutations previously did N sequential POSTs, each rewriting the file and soft-reloading — the root of the multi-phase persist window. Add a gsap-mutations-batch endpoint that validates every mutation up front, applies them in one in-memory rewrite chain, and writes the file once (all-or-nothing: an invalid entry rejects the whole batch, no partial write). The seam buffers a transaction's commits and, when more than one targets the same file, dispatches a single batch — one write, one history entry, one reload. The batch capability rides on the existing commit-function reference; no option fields are threaded through callers. * fix(studio): soften off-canvas indicator outline to 30% opacity The dashed off-canvas selection outline at 60% was noisy with many protruding elements on screen; drop the resting opacity to 30% (hover still restores full opacity so it stays discoverable). * fix(studio): drop off-canvas indicator outline to 10% opacity Follow-up to the 30% softening — 10% resting opacity reads much calmer with many protruding elements; hover still restores full opacity. * fix(studio): gate [hf-commit] console traces to dev only The start/settled/persisted/restore lifecycle traces logged on every gesture commit in all environments — console noise for end users. Route them through a dev-only traceCommit helper (matching the pixel-violation error's existing DEV gate). The commit_* PostHog events stay always on; they are the production observability, the console lines are a dev aid. * fix(studio): count actual reloads, not softReload requests, in commit telemetry A resize's size and offset persists both request softReload; the seam counted each request, so a batched gesture reported reload_count 2 even though the batch is one write and one reload. Compute the count from what dispatchBufferedCommits actually did — one for a batch, the request count for the sequential fallback. * fix(studio): rotate hover + off-canvas overlays with the element; flicker-free crop - Hover overlay applied the element's rotation only to the selection chrome, not the hover box; it now rotates about center like the selection, via a shared orientedGroupAwareOverlayRect router (one owner for rotation-aware overlay geometry across hover/selection/off-canvas). - Off-canvas indicator was axis-aligned; it now rotates with the element and inverse-rotates the canvas-exclusion clip into the element's local frame, so the protruding-sliver clip stays correct for rotated elements. - Crop commit re-lifted the element only in the commit's .then(), so one frame painted the cropped state (the flicker). Re-lift synchronously right after onStyleCommit (which applies the clip before its first await), so the cropped state never paints; the persisted file value is unchanged. * fix(studio): address code-review findings across the commit-hardening campaign Correctness (would ship green, bite under latency): - Enable-keyframes phase 2 now carries coalesceMs: Infinity, so the convert folds into one undo entry instead of splitting past the 300ms default. - The SDK keyframe persist path forwards coalesceMs (CutoverOptions gains the field); multi-keyframe delete and convert coalesce correctly when SDK-routed. - Razor split-all's rollback is guarded so a failing restore can't swallow the error toast that tells the user the split failed. Simplification (single source of truth / no dead flexibility): - Decompose resolveResizeDraftRect (drops a fallow-ignore suppression). - Delegate the third readProjectFileContent copy to the shared helper. - Inline setPatchFromUpdateProperties (its only caller passes one mutation). - One toSdkPersistOptions translates gesture overrides to SDK options. - Bundle the reorder-rollback deps into one object (was 7-9 positional args). - Dedupe the 'last group reloads' ternary; type gesture options as CommitMutationOptions; drop a Map+array wrapper around a single write. * feat(studio): atomic z-order reorder via batch patch-element endpoint Z-order reorder issued N per-element inline-style patches (one server write each), so a mid-chain failure could leave a partial reorder on disk. Add a patch-elements-batch endpoint that validates every patch, folds them over the file in one in-memory rewrite, and writes once (all-or-nothing; unsafe input rejects with no write). The reorder now sends one batch per source file and records one undo entry. Because a failed atomic write persists nothing, the interim disk-write-back rollback (restoreReorderedFile / restoreFulfilledReorderFiles / ReorderRollbackDeps) is deleted — failure rolls back only live DOM/store state. Closes the last disk-atomicity gap. * fix(studio): razor-split undo no longer silently no-ops The split clone was written to disk without a data-hf-id, so the split endpoint recorded that unstamped HTML as the undo entry's afterHash. The next reloadPreview() ran the preview route's ensureHfIds write-back, which minted a fresh id and persisted DIFFERENT bytes — so at undo time the disk hash no longer matched afterHash and editHistory's content-mismatch guard silently refused the undo (no write, no network, no error). Stamp the split output via ensureHfIds in splitElementInHtml before it is written/returned, so the preview write-back is a no-op and the recorded afterHash always equals the final on-disk bytes. Fixes at the source rather than relaxing the mismatch guard. Corrects the stale comment that credited forceReloadSdkSession. * feat(studio): closed-hand grab cursor on the rotate handle The rotate handle used the default arrow cursor; show a grabbing (closed-hand) cursor on hover to signal it's grabbed and dragged to rotate. * fix(studio): dropping a dragged element over another no longer selects it A moved drag's release fired the box click, which re-selected whatever now sat under the pointer via the hover cache — so dropping an element over a higher-z one selected the drop target instead of keeping the dragged element selected. The drag-move branch now suppresses the next box click, mirroring the resize branch. * fix(studio): group drag is one undo entry, not one per element Dragging a multi-selected group committed each member's position write as its own undo entry, so reverting took N Cmd+Z presses. Force a shared coalesceKey (infinite window) across every member's commit so they fold into a single undo entry, like the other multi-step commit paths. * fix(studio): undo of a split no longer leaves a ghost clip in the timeline The file and the composition iframe revert correctly on undo, but the timeline panel kept a ghost node for the split clone. The element-merge that repopulates the timeline preserves elements the fresh scan dropped — intended for enriched sub-composition children a bare DOM re-scan misses, but it also preserved a genuinely-removed TOP-LEVEL element (the split clone after undo), leaving a phantom clip. Restrict the preserve to elements with a compositionSrc (the enriched sub-comp children); a top-level element missing from the fresh scan was truly removed. --------- Co-authored-by: ukimsanov <ular.kimsanov@heygen.com>
This commit is contained in:
Miguel Ángel
co-authored by
ukimsanov
ukimsanov
parent
9940503102
commit
df29fa7a5e
@@ -0,0 +1,326 @@
|
||||
/**
|
||||
* AssetCard and FontRow — visual asset tile / row components for the Assets panel.
|
||||
* Extracted from AssetsTab.tsx to keep that file under the 600-line CI gate.
|
||||
*/
|
||||
import { useState, useEffect, useRef, useCallback } from "react";
|
||||
import { VideoFrameThumbnail } from "../ui/VideoFrameThumbnail";
|
||||
import { VIDEO_EXT, IMAGE_EXT } from "../../utils/mediaTypes";
|
||||
import { TIMELINE_ASSET_MIME } from "../../utils/timelineAssetDrop";
|
||||
import { ContextMenu } from "./AssetContextMenu";
|
||||
import { usePlayerStore } from "../../player/store/playerStore";
|
||||
import { useAssetPreviewStore } from "../../utils/assetPreviewStore";
|
||||
import { findClipForAsset, isPointerClick } from "../../utils/assetClickBehavior";
|
||||
import { basename, ext, truncateMiddle, formatDuration } from "./assetHelpers";
|
||||
import { resolveMediaPreviewUrl } from "../../player/components/thumbnailUtils";
|
||||
|
||||
/** Drag payload writer shared by the asset tile and the font row: copy effect
|
||||
* plus the timeline-asset MIME and a plain-text path fallback. */
|
||||
function writeAssetDragData(e: React.DragEvent, asset: string): void {
|
||||
e.dataTransfer.effectAllowed = "copy";
|
||||
e.dataTransfer.setData(TIMELINE_ASSET_MIME, JSON.stringify({ path: asset }));
|
||||
e.dataTransfer.setData("text/plain", asset);
|
||||
}
|
||||
|
||||
/** Open the row/tile context menu at the pointer, shared by asset tile + font row. */
|
||||
function openAssetContextMenu(
|
||||
e: React.MouseEvent,
|
||||
setContextMenu: (menu: { x: number; y: number }) => void,
|
||||
): void {
|
||||
e.preventDefault();
|
||||
setContextMenu({ x: e.clientX, y: e.clientY });
|
||||
}
|
||||
|
||||
/**
|
||||
* Lazily probe a video/audio URL for its duration via a hidden HTMLVideoElement
|
||||
* (`preload="metadata"`). The manifest only covers ~/.media assets, so project
|
||||
* assets in assets/ have no manifest entry — this fills the gap.
|
||||
* Returns `undefined` until the probe completes; `null` if it failed.
|
||||
*/
|
||||
function useProbedDuration(src: string, skip: boolean): number | null | undefined {
|
||||
const [duration, setDuration] = useState<number | null | undefined>(undefined);
|
||||
useEffect(() => {
|
||||
if (skip) return;
|
||||
let cancelled = false;
|
||||
let retryTimer: ReturnType<typeof setTimeout> | undefined;
|
||||
// The in-flight probe element, so unmount cleanup can abort its network
|
||||
// fetch (clearing `src`) instead of leaving it to finish in the background.
|
||||
let liveVid: HTMLVideoElement | null = null;
|
||||
|
||||
function teardown(vid: HTMLVideoElement) {
|
||||
vid.onloadedmetadata = null;
|
||||
vid.onerror = null;
|
||||
vid.src = "";
|
||||
}
|
||||
|
||||
function probe(attempt: number) {
|
||||
if (cancelled) return;
|
||||
const vid = document.createElement("video");
|
||||
liveVid = vid;
|
||||
vid.preload = "metadata";
|
||||
vid.muted = true;
|
||||
vid.onloadedmetadata = () => {
|
||||
const d = Number.isFinite(vid.duration) && vid.duration > 0 ? vid.duration : null;
|
||||
teardown(vid);
|
||||
if (!cancelled) setDuration(d);
|
||||
};
|
||||
vid.onerror = () => {
|
||||
teardown(vid);
|
||||
if (!cancelled) {
|
||||
if (attempt < 1) retryTimer = setTimeout(() => probe(attempt + 1), 50);
|
||||
else setDuration(null);
|
||||
}
|
||||
};
|
||||
vid.src = src;
|
||||
}
|
||||
|
||||
probe(0);
|
||||
return () => {
|
||||
cancelled = true;
|
||||
if (retryTimer) clearTimeout(retryTimer);
|
||||
if (liveVid) teardown(liveVid);
|
||||
};
|
||||
}, [src, skip]);
|
||||
return duration;
|
||||
}
|
||||
|
||||
export interface AssetCardProps {
|
||||
projectId: string;
|
||||
asset: string;
|
||||
used: boolean;
|
||||
duration?: number;
|
||||
onCopy: (path: string) => void;
|
||||
isCopied: boolean;
|
||||
onDelete?: (path: string) => void;
|
||||
onRename?: (oldPath: string, newPath: string) => void;
|
||||
onAddAssetToTimeline?: (path: string) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Thumbnail card for images and video assets. Renders in a 2-col grid.
|
||||
*
|
||||
* Click behaviour (CapCut-style):
|
||||
* - Already added → selects the clip on the timeline (setSelectedElementId).
|
||||
* - Not yet added → opens the asset preview overlay over the canvas.
|
||||
* Drag behaviour is preserved: a pointer movement exceeding DRAG_THRESHOLD_PX
|
||||
* before pointerup is treated as drag-start, not a click.
|
||||
*/
|
||||
// fallow-ignore-next-line complexity
|
||||
export function AssetCard({
|
||||
projectId,
|
||||
asset,
|
||||
used,
|
||||
duration,
|
||||
onCopy,
|
||||
isCopied,
|
||||
onDelete,
|
||||
onRename,
|
||||
onAddAssetToTimeline,
|
||||
}: AssetCardProps) {
|
||||
const [contextMenu, setContextMenu] = useState<{ x: number; y: number } | null>(null);
|
||||
const [hovered, setHovered] = useState(false);
|
||||
const fullName = asset.split("/").pop() ?? asset;
|
||||
const name = basename(asset);
|
||||
const extension = ext(asset);
|
||||
const serveUrl = resolveMediaPreviewUrl(asset, projectId);
|
||||
const isVideo = VIDEO_EXT.test(asset);
|
||||
const isImage = IMAGE_EXT.test(asset);
|
||||
const probedDuration = useProbedDuration(serveUrl, !isVideo || duration != null);
|
||||
const resolvedDuration = duration ?? probedDuration ?? undefined;
|
||||
const durationLabel = formatDuration(resolvedDuration ?? 0);
|
||||
|
||||
// Drag-threshold click gate: track pointer-down position so we can ignore
|
||||
// pointer-up events that followed a real drag gesture.
|
||||
const pointerDownRef = useRef<{ x: number; y: number } | null>(null);
|
||||
|
||||
const setSelectedElementId = usePlayerStore((s) => s.setSelectedElementId);
|
||||
const elements = usePlayerStore((s) => s.elements);
|
||||
const setPreviewAsset = useAssetPreviewStore((s) => s.setPreviewAsset);
|
||||
|
||||
const handlePointerDown = useCallback((e: React.PointerEvent) => {
|
||||
pointerDownRef.current = { x: e.clientX, y: e.clientY };
|
||||
}, []);
|
||||
|
||||
const handlePointerUp = useCallback(
|
||||
(e: React.PointerEvent) => {
|
||||
const origin = pointerDownRef.current;
|
||||
pointerDownRef.current = null;
|
||||
if (!origin) return;
|
||||
if (!isPointerClick(e.clientX - origin.x, e.clientY - origin.y)) return;
|
||||
// Treat as click
|
||||
if (used) {
|
||||
const clip = findClipForAsset(elements, asset);
|
||||
if (clip) {
|
||||
setSelectedElementId(clip.key ?? clip.id);
|
||||
return;
|
||||
}
|
||||
}
|
||||
// Not added (or no matching clip found) → preview overlay
|
||||
setPreviewAsset(asset, projectId);
|
||||
},
|
||||
[used, elements, asset, projectId, setSelectedElementId, setPreviewAsset],
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
draggable
|
||||
onPointerDown={handlePointerDown}
|
||||
onPointerUp={handlePointerUp}
|
||||
onDragStart={(e) => writeAssetDragData(e, asset)}
|
||||
onContextMenu={(e) => openAssetContextMenu(e, setContextMenu)}
|
||||
onPointerEnter={() => setHovered(true)}
|
||||
onPointerLeave={() => setHovered(false)}
|
||||
className={`flex flex-col gap-1 cursor-pointer rounded-md p-1 transition-colors ${
|
||||
isCopied ? "bg-studio-accent/10" : "hover:bg-neutral-800/40"
|
||||
}`}
|
||||
>
|
||||
{/* Thumbnail */}
|
||||
<div className="w-full aspect-video rounded overflow-hidden bg-neutral-900 relative">
|
||||
{isImage && (
|
||||
<img
|
||||
src={serveUrl}
|
||||
alt={name}
|
||||
loading="lazy"
|
||||
className="w-full h-full object-cover"
|
||||
onError={(e) => {
|
||||
(e.target as HTMLImageElement).style.display = "none";
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{isVideo && (
|
||||
<>
|
||||
<VideoFrameThumbnail src={serveUrl} />
|
||||
{hovered && (
|
||||
<video
|
||||
src={serveUrl}
|
||||
autoPlay
|
||||
muted
|
||||
loop
|
||||
playsInline
|
||||
className="absolute inset-0 w-full h-full object-cover"
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{!isImage && !isVideo && (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<span className="text-[10px] font-medium text-neutral-600">{extension}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* "Added" badge — top-left */}
|
||||
{used && (
|
||||
<span className="absolute top-1 left-1 text-[9px] font-semibold leading-none px-1.5 py-[3px] rounded bg-neutral-950/80 text-panel-text-1">
|
||||
Added
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Duration badge — top-right, media only */}
|
||||
{durationLabel && (
|
||||
<span className="absolute top-1 right-1 text-[9px] font-medium leading-none px-1.5 py-[3px] rounded bg-neutral-950/80 text-panel-text-2 tabular-nums">
|
||||
{durationLabel}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Filename caption */}
|
||||
<span
|
||||
className={`text-[10px] leading-tight text-center block w-full ${
|
||||
used ? "text-panel-text-2" : "text-panel-text-4"
|
||||
}`}
|
||||
title={fullName}
|
||||
>
|
||||
{truncateMiddle(fullName, 22)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{contextMenu && (
|
||||
<ContextMenu
|
||||
x={contextMenu.x}
|
||||
y={contextMenu.y}
|
||||
asset={asset}
|
||||
onClose={() => setContextMenu(null)}
|
||||
onCopy={onCopy}
|
||||
onDelete={onDelete}
|
||||
onRename={onRename}
|
||||
onAddAtPlayhead={onAddAssetToTimeline}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export interface FontRowProps {
|
||||
asset: string;
|
||||
used: boolean;
|
||||
onCopy: (path: string) => void;
|
||||
isCopied: boolean;
|
||||
onDelete?: (path: string) => void;
|
||||
onRename?: (oldPath: string, newPath: string) => void;
|
||||
onAddAssetToTimeline?: (path: string) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Compact row for font assets (no meaningful thumbnail; show ext badge + name).
|
||||
*/
|
||||
export function FontRow({
|
||||
asset,
|
||||
used,
|
||||
onCopy,
|
||||
isCopied,
|
||||
onDelete,
|
||||
onRename,
|
||||
onAddAssetToTimeline,
|
||||
}: FontRowProps) {
|
||||
const [contextMenu, setContextMenu] = useState<{ x: number; y: number } | null>(null);
|
||||
const name = basename(asset);
|
||||
const extension = ext(asset);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
draggable
|
||||
onClick={() => onCopy(asset)}
|
||||
onDragStart={(e) => writeAssetDragData(e, asset)}
|
||||
onContextMenu={(e) => openAssetContextMenu(e, setContextMenu)}
|
||||
className={`px-2.5 py-1.5 flex items-center gap-2.5 cursor-pointer transition-colors ${
|
||||
isCopied
|
||||
? "bg-studio-accent/10 border-l-2 border-studio-accent"
|
||||
: "border-l-2 border-transparent hover:bg-neutral-800/50"
|
||||
}`}
|
||||
>
|
||||
<div className="w-[50px] h-[32px] rounded overflow-hidden bg-neutral-900 flex-shrink-0 flex items-center justify-center">
|
||||
<span className="text-[9px] font-medium text-neutral-700">{extension}</span>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<span
|
||||
className={`text-xs font-medium truncate block ${used ? "text-panel-text-1" : "text-panel-text-3"}`}
|
||||
>
|
||||
{name}
|
||||
</span>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-[10px] text-neutral-600 truncate">{extension}</span>
|
||||
{used && (
|
||||
<span className="text-[9px] font-medium text-panel-accent bg-panel-accent/10 px-1.5 py-px rounded">
|
||||
in use
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{contextMenu && (
|
||||
<ContextMenu
|
||||
x={contextMenu.x}
|
||||
y={contextMenu.y}
|
||||
asset={asset}
|
||||
onClose={() => setContextMenu(null)}
|
||||
onCopy={onCopy}
|
||||
onDelete={onDelete}
|
||||
onRename={onRename}
|
||||
onAddAtPlayhead={onAddAssetToTimeline}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -6,6 +6,7 @@ export function ContextMenu({
|
||||
onCopy,
|
||||
onDelete,
|
||||
onRename,
|
||||
onAddAtPlayhead,
|
||||
}: {
|
||||
x: number;
|
||||
y: number;
|
||||
@@ -14,6 +15,7 @@ export function ContextMenu({
|
||||
onCopy: (path: string) => void;
|
||||
onDelete?: (path: string) => void;
|
||||
onRename?: (oldPath: string, newPath: string) => void;
|
||||
onAddAtPlayhead?: (path: string) => void;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
@@ -28,6 +30,19 @@ export function ContextMenu({
|
||||
className="absolute bg-neutral-900 border border-neutral-700 rounded-lg shadow-xl py-1 min-w-[140px] text-xs"
|
||||
style={{ left: x, top: y }}
|
||||
>
|
||||
{onAddAtPlayhead && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onAddAtPlayhead(asset);
|
||||
onClose();
|
||||
}}
|
||||
className="w-full text-left px-3 py-1.5 text-neutral-300 hover:bg-neutral-800 transition-colors"
|
||||
>
|
||||
Add at playhead
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
@@ -65,33 +80,3 @@ export function ContextMenu({
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function DeleteConfirm({
|
||||
name,
|
||||
onConfirm,
|
||||
onCancel,
|
||||
}: {
|
||||
name: string;
|
||||
onConfirm: () => void;
|
||||
onCancel: () => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="px-2 py-1.5 bg-red-950/30 border-l-2 border-red-500 flex items-center justify-between gap-2">
|
||||
<span className="text-[10px] text-red-400 truncate">Delete {name}?</span>
|
||||
<div className="flex items-center gap-1 flex-shrink-0">
|
||||
<button
|
||||
onClick={onConfirm}
|
||||
className="px-2 py-0.5 text-[10px] rounded bg-red-600 text-white hover:bg-red-500 transition-colors"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
<button
|
||||
onClick={onCancel}
|
||||
className="px-2 py-0.5 text-[10px] rounded text-neutral-400 hover:text-neutral-200 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { filterByUsage, countUsage, deriveUsedPaths } from "./AssetsTab";
|
||||
import { truncateMiddle, formatDuration } from "./assetHelpers";
|
||||
import { globalAssetRows } from "./GlobalAssetsView";
|
||||
|
||||
const assets = ["bgm.mp3", "logo.png", "orphan.wav"];
|
||||
@@ -47,6 +48,39 @@ describe("deriveUsedPaths", () => {
|
||||
"assets/logo.png",
|
||||
]);
|
||||
});
|
||||
|
||||
it("handles fully-absolute URLs produced by the core runtime (toAbsoluteAssetUrl)", () => {
|
||||
// The runtime calls new URL(raw, document.baseURI).toString() which produces
|
||||
// "http://localhost:3012/api/projects/demo/preview/assets/clip.mp4"
|
||||
const used = deriveUsedPaths([
|
||||
{ src: "http://localhost:3012/api/projects/demo/preview/assets/clip.mp4" },
|
||||
{ src: "http://localhost:3012/api/projects/abc123/preview/assets/logo.png" },
|
||||
]);
|
||||
expect(used.has("assets/clip.mp4")).toBe(true);
|
||||
expect(used.has("assets/logo.png")).toBe(true);
|
||||
expect(used.size).toBe(2);
|
||||
});
|
||||
|
||||
it("decodes percent-encoded filenames (spaces, parens) so they match the asset list", () => {
|
||||
// Files with spaces/parens: "assets/my file (1).mp4" authored in HTML
|
||||
// → runtime resolves to "http://…/assets/my%20file%20(1).mp4"
|
||||
const used = deriveUsedPaths([
|
||||
{ src: "http://localhost:3012/api/projects/p/preview/assets/my%20file%20(1).mp4" },
|
||||
{ src: "/api/projects/p/preview/assets/track%20one.mp3" },
|
||||
]);
|
||||
expect(used.has("assets/my file (1).mp4")).toBe(true);
|
||||
expect(used.has("assets/track one.mp3")).toBe(true);
|
||||
expect(used.size).toBe(2);
|
||||
});
|
||||
|
||||
it("round-trips: absolute URL with spaces matches filterByUsage against plain asset list", () => {
|
||||
const used = deriveUsedPaths([
|
||||
{ src: "http://localhost:3012/api/projects/demo/preview/assets/my%20video.mp4" },
|
||||
]);
|
||||
expect(filterByUsage(["assets/my video.mp4", "assets/other.png"], used, "used")).toEqual([
|
||||
"assets/my video.mp4",
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("countUsage", () => {
|
||||
@@ -59,6 +93,68 @@ describe("countUsage", () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe("truncateMiddle", () => {
|
||||
it("returns the original string when it fits within maxLen", () => {
|
||||
expect(truncateMiddle("short.mp4", 20)).toBe("short.mp4");
|
||||
expect(truncateMiddle("exact_length_str.mp4", 20)).toBe("exact_length_str.mp4");
|
||||
});
|
||||
|
||||
it("truncates longer strings with an ellipsis in the middle", () => {
|
||||
const result = truncateMiddle("2a37eabf-long-uuid-887d8.mp4", 20);
|
||||
expect(result.length).toBeLessThanOrEqual(20);
|
||||
expect(result).toContain("…");
|
||||
// Preserves head
|
||||
expect(result.startsWith("2a37eabf-long-uuid-8")).toBe(false); // head is shortened
|
||||
expect(result.startsWith("2a37eabf")).toBe(true);
|
||||
// Preserves tail
|
||||
expect(result.endsWith("887d8.mp4")).toBe(false); // tail portion only
|
||||
expect(result.endsWith(".mp4")).toBe(true);
|
||||
});
|
||||
|
||||
it("preserves the full filename extension in the tail", () => {
|
||||
const result = truncateMiddle("verylongnamehere12345.mp4", 14);
|
||||
expect(result.endsWith(".mp4")).toBe(true);
|
||||
expect(result.length).toBeLessThanOrEqual(14);
|
||||
});
|
||||
|
||||
it("handles maxLen of 1 (degenerate)", () => {
|
||||
const result = truncateMiddle("abcdef", 1);
|
||||
// head = 0, tail = 0 → just the ellipsis
|
||||
expect(result).toBe("…");
|
||||
});
|
||||
|
||||
it("handles a string of exactly maxLen+1 chars", () => {
|
||||
const result = truncateMiddle("abcdefgh", 7);
|
||||
expect(result.length).toBeLessThanOrEqual(7);
|
||||
expect(result).toContain("…");
|
||||
});
|
||||
});
|
||||
|
||||
describe("formatDuration", () => {
|
||||
it("formats whole seconds as MM:SS", () => {
|
||||
expect(formatDuration(28)).toBe("00:28");
|
||||
expect(formatDuration(60)).toBe("01:00");
|
||||
expect(formatDuration(90)).toBe("01:30");
|
||||
expect(formatDuration(3661)).toBe("61:01");
|
||||
});
|
||||
|
||||
it("rounds fractional seconds to nearest whole", () => {
|
||||
expect(formatDuration(28.4)).toBe("00:28");
|
||||
expect(formatDuration(28.6)).toBe("00:29");
|
||||
});
|
||||
|
||||
it("returns empty string for non-positive values", () => {
|
||||
expect(formatDuration(0)).toBe("");
|
||||
expect(formatDuration(-1)).toBe("");
|
||||
});
|
||||
|
||||
it("returns empty string for non-finite values", () => {
|
||||
expect(formatDuration(NaN)).toBe("");
|
||||
expect(formatDuration(Infinity)).toBe("");
|
||||
expect(formatDuration(-Infinity)).toBe("");
|
||||
});
|
||||
});
|
||||
|
||||
describe("globalAssetRows", () => {
|
||||
const recs = [
|
||||
{ id: "bgm_001", type: "bgm", description: "calm ambient" },
|
||||
|
||||
@@ -1,21 +1,12 @@
|
||||
// fallow-ignore-file code-duplication
|
||||
import { memo, useState, useCallback, useRef, useMemo, useEffect } from "react";
|
||||
import { VideoFrameThumbnail } from "../ui/VideoFrameThumbnail";
|
||||
import { MEDIA_EXT, IMAGE_EXT, VIDEO_EXT, FONT_EXT } from "../../utils/mediaTypes";
|
||||
import { TIMELINE_ASSET_MIME } from "../../utils/timelineAssetDrop";
|
||||
import { MEDIA_EXT, FONT_EXT } from "../../utils/mediaTypes";
|
||||
import { copyTextToClipboard } from "../../utils/clipboard";
|
||||
import { ContextMenu } from "./AssetContextMenu";
|
||||
import { usePlayerStore } from "../../player/store/playerStore";
|
||||
import {
|
||||
type MediaCategory,
|
||||
getCategory,
|
||||
basename,
|
||||
ext,
|
||||
CATEGORY_LABELS,
|
||||
FILTER_ORDER,
|
||||
} from "./assetHelpers";
|
||||
import { type MediaCategory, getCategory, CATEGORY_LABELS, FILTER_ORDER } from "./assetHelpers";
|
||||
import { AudioRow } from "./AudioRow";
|
||||
import { GlobalAssetsView } from "./GlobalAssetsView";
|
||||
import { AssetCard, FontRow } from "./AssetCard";
|
||||
|
||||
interface AssetsTabProps {
|
||||
projectId: string;
|
||||
@@ -23,155 +14,7 @@ interface AssetsTabProps {
|
||||
onImport?: (files: FileList) => void;
|
||||
onDelete?: (path: string) => void;
|
||||
onRename?: (oldPath: string, newPath: string) => void;
|
||||
}
|
||||
|
||||
// fallow-ignore-next-line complexity
|
||||
function ImageCard({
|
||||
projectId,
|
||||
asset,
|
||||
used,
|
||||
onCopy,
|
||||
isCopied,
|
||||
onDelete,
|
||||
onRename,
|
||||
size,
|
||||
}: {
|
||||
projectId: string;
|
||||
asset: string;
|
||||
used: boolean;
|
||||
onCopy: (path: string) => void;
|
||||
isCopied: boolean;
|
||||
onDelete?: (path: string) => void;
|
||||
onRename?: (oldPath: string, newPath: string) => void;
|
||||
size: "large" | "small";
|
||||
}) {
|
||||
const [contextMenu, setContextMenu] = useState<{ x: number; y: number } | null>(null);
|
||||
const [hovered, setHovered] = useState(false);
|
||||
const name = basename(asset);
|
||||
const extension = ext(asset);
|
||||
const serveUrl = `/api/projects/${projectId}/preview/${asset}`;
|
||||
const isVideo = VIDEO_EXT.test(asset);
|
||||
const isImage = IMAGE_EXT.test(asset);
|
||||
|
||||
const thumbW = size === "large" ? "w-full" : "w-[50px]";
|
||||
const thumbH = size === "large" ? "h-[100px]" : "h-[32px]";
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
draggable
|
||||
onClick={() => onCopy(asset)}
|
||||
onDragStart={(e) => {
|
||||
e.dataTransfer.effectAllowed = "copy";
|
||||
e.dataTransfer.setData(TIMELINE_ASSET_MIME, JSON.stringify({ path: asset }));
|
||||
e.dataTransfer.setData("text/plain", asset);
|
||||
}}
|
||||
onContextMenu={(e) => {
|
||||
e.preventDefault();
|
||||
setContextMenu({ x: e.clientX, y: e.clientY });
|
||||
}}
|
||||
onPointerEnter={() => setHovered(true)}
|
||||
onPointerLeave={() => setHovered(false)}
|
||||
className={`transition-colors cursor-pointer ${
|
||||
size === "large"
|
||||
? `px-2.5 py-1 ${isCopied ? "bg-studio-accent/10" : "hover:bg-neutral-800/30"}`
|
||||
: `px-2.5 py-1.5 flex items-center gap-2.5 ${
|
||||
isCopied
|
||||
? "bg-studio-accent/10 border-l-2 border-studio-accent"
|
||||
: "border-l-2 border-transparent hover:bg-neutral-800/50"
|
||||
}`
|
||||
}`}
|
||||
>
|
||||
{size === "large" ? (
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className={`${thumbW} ${thumbH} rounded overflow-hidden bg-neutral-900 relative`}>
|
||||
{isImage && (
|
||||
<img
|
||||
src={serveUrl}
|
||||
alt={name}
|
||||
loading="lazy"
|
||||
className="w-full h-full object-cover"
|
||||
onError={(e) => {
|
||||
(e.target as HTMLImageElement).style.display = "none";
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{isVideo && <VideoFrameThumbnail src={serveUrl} />}
|
||||
{isVideo && hovered && (
|
||||
<video
|
||||
src={serveUrl}
|
||||
autoPlay
|
||||
muted
|
||||
loop
|
||||
playsInline
|
||||
className="absolute inset-0 w-full h-full object-cover"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span
|
||||
className={`text-xs font-medium truncate ${used ? "text-panel-text-1" : "text-panel-text-3"}`}
|
||||
>
|
||||
{name}
|
||||
</span>
|
||||
<span className="text-[10px] text-neutral-600">{extension}</span>
|
||||
{used && (
|
||||
<span className="text-[9px] font-medium text-panel-accent bg-panel-accent/10 px-1.5 py-px rounded">
|
||||
in use
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="w-[50px] h-[32px] rounded overflow-hidden bg-neutral-900 flex-shrink-0 flex items-center justify-center">
|
||||
{isImage && (
|
||||
<img
|
||||
src={serveUrl}
|
||||
alt={name}
|
||||
loading="lazy"
|
||||
className="w-full h-full object-cover"
|
||||
onError={(e) => {
|
||||
(e.target as HTMLImageElement).style.display = "none";
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{!isImage && (
|
||||
<span className="text-[9px] font-medium text-neutral-700">{extension}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<span
|
||||
className={`text-xs font-medium truncate block ${used ? "text-panel-text-1" : "text-panel-text-3"}`}
|
||||
>
|
||||
{name}
|
||||
</span>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-[10px] text-neutral-600 truncate">{extension}</span>
|
||||
{used && (
|
||||
<span className="text-[9px] font-medium text-panel-accent bg-panel-accent/10 px-1.5 py-px rounded">
|
||||
in use
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{contextMenu && (
|
||||
<ContextMenu
|
||||
x={contextMenu.x}
|
||||
y={contextMenu.y}
|
||||
asset={asset}
|
||||
onClose={() => setContextMenu(null)}
|
||||
onCopy={onCopy}
|
||||
onDelete={onDelete}
|
||||
onRename={onRename}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
onAddAssetToTimeline?: (path: string) => void;
|
||||
}
|
||||
|
||||
export type UsageFilter = "all" | "used" | "unused";
|
||||
@@ -200,20 +43,48 @@ export function countUsage(
|
||||
/**
|
||||
* Project-relative asset paths referenced by composition elements — the set the
|
||||
* "in use" badge, used-first sort, and usage filter all key on. Element src is
|
||||
* the raw authored value (timelineElementHelpers sets entry.src =
|
||||
* getAttribute("src")), so it can be a relative path ("assets/x.png"), a
|
||||
* "./"-prefixed path, the served "/api/projects/<id>/preview/assets/x.png" form,
|
||||
* or carry a ?query — normalize all of them to the bare project path so they
|
||||
* match the asset-list entries. Pure — unit-tested.
|
||||
* populated from the core runtime's `resolveNodeAssetUrl` which calls
|
||||
* `new URL(raw, document.baseURI).toString()`, turning authored relative paths
|
||||
* into fully-absolute URLs with percent-encoded characters, e.g.
|
||||
* "assets/my file (1).mp4"
|
||||
* → "http://localhost:3012/api/projects/demo/preview/assets/my%20file%20(1).mp4"
|
||||
*
|
||||
* This function normalizes every src shape to the bare project-relative path so
|
||||
* it matches the asset-list entries:
|
||||
* - Absolute URL → strip origin + /api/projects/<id>/preview/ prefix, decode %XX
|
||||
* - Server-relative /api/…preview/… → same strip + decode
|
||||
* - Relative "./"-prefixed or bare → strip leading ./ or /
|
||||
* - ?query / #hash → dropped
|
||||
*
|
||||
* Pure — unit-tested.
|
||||
*/
|
||||
export function deriveUsedPaths(elements: Array<{ src?: string }>): Set<string> {
|
||||
const paths = new Set<string>();
|
||||
for (const el of elements) {
|
||||
if (!el.src) continue;
|
||||
const s = el.src
|
||||
let s = el.src;
|
||||
|
||||
// Strip absolute origin if present (http://host/path → /path)
|
||||
try {
|
||||
const u = new URL(s);
|
||||
s = u.pathname + (u.search ? u.search : "") + (u.hash ? u.hash : "");
|
||||
} catch {
|
||||
// Not a valid absolute URL — leave as-is (relative path)
|
||||
}
|
||||
|
||||
s = s
|
||||
.replace(/^\/api\/projects\/[^/]+\/preview\//, "") // strip the dev serve prefix
|
||||
.replace(/^\.?\//, "") // strip leading ./ or /
|
||||
.split(/[?#]/)[0]; // drop query / hash
|
||||
|
||||
// Decode percent-encoded characters (spaces, parens, etc.) so the path
|
||||
// matches the plain-text asset-list entries the server returns.
|
||||
try {
|
||||
s = decodeURIComponent(s);
|
||||
} catch {
|
||||
// Malformed encoding — use as-is
|
||||
}
|
||||
|
||||
if (s) paths.add(s);
|
||||
}
|
||||
return paths;
|
||||
@@ -225,6 +96,7 @@ export const AssetsTab = memo(function AssetsTab({
|
||||
onImport,
|
||||
onDelete,
|
||||
onRename,
|
||||
onAddAssetToTimeline,
|
||||
}: AssetsTabProps) {
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const [dragOver, setDragOver] = useState(false);
|
||||
@@ -232,17 +104,11 @@ export const AssetsTab = memo(function AssetsTab({
|
||||
const [activeFilter, setActiveFilter] = useState<MediaCategory | "all">("all");
|
||||
const [usageFilter, setUsageFilter] = useState<"all" | "used" | "unused">("all");
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
// Cross-project view: the global media-use cache (~/.media). The view itself
|
||||
// (GlobalAssetsView) owns its fetch — AssetsTab only tracks which scope is active.
|
||||
const [viewMode, setViewMode] = useState<"local" | "global">("local");
|
||||
const [manifest, setManifest] = useState<
|
||||
Map<string, { description?: string; duration?: number; width?: number; height?: number }>
|
||||
>(new Map());
|
||||
|
||||
// Projects whose media manifest 404'd — most don't have one. Cache the miss so
|
||||
// we don't re-fetch (and spam the console) on every re-render; the effect was
|
||||
// also keyed on the `assets` array reference, which changes each render, so it
|
||||
// re-fired constantly. Key on a stable join + skip known-missing manifests.
|
||||
const manifest404Ref = useRef<Set<string>>(new Set());
|
||||
const assetsKey = assets.join("|");
|
||||
useEffect(() => {
|
||||
@@ -278,7 +144,6 @@ export const AssetsTab = memo(function AssetsTab({
|
||||
cancelled = true;
|
||||
};
|
||||
}, [projectId, assetsKey]);
|
||||
|
||||
const handleDrop = useCallback(
|
||||
(e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
@@ -287,7 +152,6 @@ export const AssetsTab = memo(function AssetsTab({
|
||||
},
|
||||
[onImport],
|
||||
);
|
||||
|
||||
const handleCopyPath = useCallback(async (path: string) => {
|
||||
const copied = await copyTextToClipboard(path);
|
||||
if (copied) {
|
||||
@@ -295,22 +159,27 @@ export const AssetsTab = memo(function AssetsTab({
|
||||
setTimeout(() => setCopiedPath(null), 1500);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const elements = usePlayerStore((s) => s.elements);
|
||||
const usedPaths = useMemo(() => deriveUsedPaths(elements), [elements]);
|
||||
|
||||
const mediaAssets = useMemo(() => {
|
||||
const media = assets.filter((a) => MEDIA_EXT.test(a) || FONT_EXT.test(a));
|
||||
const all = filterByUsage(media, usedPaths, usageFilter);
|
||||
if (!searchQuery) return all;
|
||||
const q = searchQuery.toLowerCase();
|
||||
return all.filter((a) => {
|
||||
if (basename(a).toLowerCase().includes(q)) return true;
|
||||
if (
|
||||
a
|
||||
.split("/")
|
||||
.pop()
|
||||
?.replace(/\.[^.]*$/, "")
|
||||
.toLowerCase()
|
||||
.includes(q)
|
||||
)
|
||||
return true;
|
||||
const rec = manifest.get(a);
|
||||
return rec?.description?.toLowerCase().includes(q);
|
||||
});
|
||||
}, [assets, searchQuery, manifest, usageFilter, usedPaths]);
|
||||
|
||||
const categorized = useMemo(() => {
|
||||
const groups: Record<MediaCategory, string[]> = { audio: [], images: [], video: [], fonts: [] };
|
||||
for (const a of mediaAssets) {
|
||||
@@ -327,15 +196,11 @@ export const AssetsTab = memo(function AssetsTab({
|
||||
}
|
||||
return groups;
|
||||
}, [mediaAssets, usedPaths]);
|
||||
|
||||
const counts = useMemo(() => {
|
||||
const c: Record<string, number> = { all: mediaAssets.length };
|
||||
for (const cat of FILTER_ORDER) c[cat] = categorized[cat].length;
|
||||
return c;
|
||||
}, [mediaAssets, categorized]);
|
||||
|
||||
// Usage counts over the full media set (independent of the active usage filter,
|
||||
// so the chips don't show their own filtered totals).
|
||||
const usageCounts = useMemo(
|
||||
() =>
|
||||
countUsage(
|
||||
@@ -344,12 +209,10 @@ export const AssetsTab = memo(function AssetsTab({
|
||||
),
|
||||
[assets, usedPaths],
|
||||
);
|
||||
|
||||
const visibleCategories =
|
||||
activeFilter === "all"
|
||||
? FILTER_ORDER.filter((c) => categorized[c].length > 0)
|
||||
: [activeFilter as MediaCategory].filter((c) => categorized[c].length > 0);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex-1 flex flex-col min-h-0 transition-colors ${dragOver ? "bg-studio-accent/[0.05]" : ""}`}
|
||||
@@ -362,7 +225,7 @@ export const AssetsTab = memo(function AssetsTab({
|
||||
>
|
||||
{/* Header — matches design panel Section pattern */}
|
||||
<div className="px-4 pt-2.5 pb-1.5 flex-shrink-0">
|
||||
{/* Scope toggle — this project's assets vs the global media-use cache */}
|
||||
{/* Scope toggle */}
|
||||
<div className="flex gap-1 mb-2.5 p-0.5 rounded-md bg-panel-input">
|
||||
{(["local", "global"] as const).map((m) => (
|
||||
<button
|
||||
@@ -447,7 +310,7 @@ export const AssetsTab = memo(function AssetsTab({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Filter chips — panel-input style (local view only) */}
|
||||
{/* Filter chips */}
|
||||
{viewMode === "local" && mediaAssets.length > 0 && (
|
||||
<div className="flex gap-1.5 flex-wrap">
|
||||
<button
|
||||
@@ -475,7 +338,6 @@ export const AssetsTab = memo(function AssetsTab({
|
||||
</button>
|
||||
) : null,
|
||||
)}
|
||||
{/* Usage filter — show only assets the composition references, or only the unused ones */}
|
||||
{usageCounts.used > 0 && usageCounts.unused > 0 && (
|
||||
<>
|
||||
<span className="w-px self-stretch bg-panel-input mx-0.5" aria-hidden="true" />
|
||||
@@ -505,7 +367,6 @@ export const AssetsTab = memo(function AssetsTab({
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Asset list */}
|
||||
<div className="flex-1 overflow-y-auto mt-1">
|
||||
{viewMode === "global" ? (
|
||||
<GlobalAssetsView searchQuery={searchQuery} />
|
||||
@@ -553,34 +414,38 @@ export const AssetsTab = memo(function AssetsTab({
|
||||
isCopied={copiedPath === a}
|
||||
onDelete={onDelete}
|
||||
onRename={onRename}
|
||||
onAddAssetToTimeline={onAddAssetToTimeline}
|
||||
/>
|
||||
))}
|
||||
{(cat === "images" || cat === "video") &&
|
||||
categorized[cat].map((a) => (
|
||||
<ImageCard
|
||||
key={a}
|
||||
projectId={projectId}
|
||||
asset={a}
|
||||
used={usedPaths.has(a)}
|
||||
onCopy={handleCopyPath}
|
||||
isCopied={copiedPath === a}
|
||||
onDelete={onDelete}
|
||||
onRename={onRename}
|
||||
size={categorized[cat].length <= 4 ? "large" : "small"}
|
||||
/>
|
||||
))}
|
||||
{(cat === "images" || cat === "video") && (
|
||||
<div className="grid grid-cols-2 gap-1 px-2 pb-1">
|
||||
{categorized[cat].map((a) => (
|
||||
<AssetCard
|
||||
key={a}
|
||||
projectId={projectId}
|
||||
asset={a}
|
||||
used={usedPaths.has(a)}
|
||||
duration={manifest.get(a)?.duration}
|
||||
onCopy={handleCopyPath}
|
||||
isCopied={copiedPath === a}
|
||||
onDelete={onDelete}
|
||||
onRename={onRename}
|
||||
onAddAssetToTimeline={onAddAssetToTimeline}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{cat === "fonts" &&
|
||||
categorized[cat].map((a) => (
|
||||
<ImageCard
|
||||
<FontRow
|
||||
key={a}
|
||||
projectId={projectId}
|
||||
asset={a}
|
||||
used={usedPaths.has(a)}
|
||||
onCopy={handleCopyPath}
|
||||
isCopied={copiedPath === a}
|
||||
onDelete={onDelete}
|
||||
onRename={onRename}
|
||||
size="small"
|
||||
onAddAssetToTimeline={onAddAssetToTimeline}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -2,6 +2,10 @@ import { useState, useRef, useEffect, useCallback } from "react";
|
||||
import { ContextMenu } from "./AssetContextMenu";
|
||||
import { basename, getAudioSubtype } from "./assetHelpers";
|
||||
import { TIMELINE_ASSET_MIME } from "../../utils/timelineAssetDrop";
|
||||
import { usePlayerStore } from "../../player/store/playerStore";
|
||||
import { useAssetPreviewStore } from "../../utils/assetPreviewStore";
|
||||
import { findClipForAsset, isPointerClick } from "../../utils/assetClickBehavior";
|
||||
import { resolveMediaPreviewUrl } from "../../player/components/thumbnailUtils";
|
||||
|
||||
export function AudioRow({
|
||||
projectId,
|
||||
@@ -12,6 +16,7 @@ export function AudioRow({
|
||||
isCopied,
|
||||
onDelete,
|
||||
onRename,
|
||||
onAddAssetToTimeline,
|
||||
}: {
|
||||
projectId: string;
|
||||
asset: string;
|
||||
@@ -21,6 +26,7 @@ export function AudioRow({
|
||||
isCopied: boolean;
|
||||
onDelete?: (path: string) => void;
|
||||
onRename?: (oldPath: string, newPath: string) => void;
|
||||
onAddAssetToTimeline?: (path: string) => void;
|
||||
}) {
|
||||
const [contextMenu, setContextMenu] = useState<{ x: number; y: number } | null>(null);
|
||||
const [playing, setPlaying] = useState(false);
|
||||
@@ -32,7 +38,36 @@ export function AudioRow({
|
||||
const animRef = useRef<number>(0);
|
||||
const name = basename(asset);
|
||||
const subtype = getAudioSubtype(asset);
|
||||
const serveUrl = `/api/projects/${projectId}/preview/${asset}`;
|
||||
const serveUrl = resolveMediaPreviewUrl(asset, projectId);
|
||||
|
||||
// CapCut-style click behavior: drag-threshold gate.
|
||||
const pointerDownRef = useRef<{ x: number; y: number } | null>(null);
|
||||
const setSelectedElementId = usePlayerStore((s) => s.setSelectedElementId);
|
||||
const elements = usePlayerStore((s) => s.elements);
|
||||
const setPreviewAsset = useAssetPreviewStore((s) => s.setPreviewAsset);
|
||||
|
||||
const handlePointerDown = useCallback((e: React.PointerEvent) => {
|
||||
pointerDownRef.current = { x: e.clientX, y: e.clientY };
|
||||
}, []);
|
||||
|
||||
const handlePointerUp = useCallback(
|
||||
(e: React.PointerEvent) => {
|
||||
const origin = pointerDownRef.current;
|
||||
pointerDownRef.current = null;
|
||||
if (!origin) return;
|
||||
if (!isPointerClick(e.clientX - origin.x, e.clientY - origin.y)) return;
|
||||
if (used) {
|
||||
const clip = findClipForAsset(elements, asset);
|
||||
if (clip) {
|
||||
setSelectedElementId(clip.key ?? clip.id);
|
||||
return;
|
||||
}
|
||||
}
|
||||
// Not added → preview overlay (audio player)
|
||||
setPreviewAsset(asset, projectId);
|
||||
},
|
||||
[used, elements, asset, projectId, setSelectedElementId, setPreviewAsset],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
@@ -109,7 +144,8 @@ export function AudioRow({
|
||||
<>
|
||||
<div
|
||||
draggable
|
||||
onClick={() => onCopy(asset)}
|
||||
onPointerDown={handlePointerDown}
|
||||
onPointerUp={handlePointerUp}
|
||||
onDragStart={(e) => {
|
||||
e.dataTransfer.effectAllowed = "copy";
|
||||
e.dataTransfer.setData(TIMELINE_ASSET_MIME, JSON.stringify({ path: asset }));
|
||||
@@ -195,6 +231,7 @@ export function AudioRow({
|
||||
onCopy={onCopy}
|
||||
onDelete={onDelete}
|
||||
onRename={onRename}
|
||||
onAddAtPlayhead={onAddAssetToTimeline}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
|
||||
@@ -10,6 +10,7 @@ import {
|
||||
import { usePlayerStore } from "../../player";
|
||||
import { formatTime } from "../../player/lib/time";
|
||||
import { useStudioShellContext } from "../../contexts/StudioContext";
|
||||
import { TIMELINE_BLOCK_MIME } from "../../utils/timelineAssetDrop";
|
||||
export interface BlockPreviewInfo {
|
||||
videoUrl?: string;
|
||||
posterUrl?: string;
|
||||
@@ -383,10 +384,16 @@ function BlockCard({
|
||||
return (
|
||||
<div
|
||||
className="group/card rounded-md overflow-hidden cursor-pointer transition-colors bg-neutral-900 hover:bg-neutral-800"
|
||||
draggable
|
||||
onDragStart={(e) => {
|
||||
e.dataTransfer.effectAllowed = "copy";
|
||||
e.dataTransfer.setData(TIMELINE_BLOCK_MIME, JSON.stringify({ name }));
|
||||
e.dataTransfer.setData("text/plain", name);
|
||||
handleLeave(); // cancel the hover-preview timer so it doesn't fire mid-drag
|
||||
}}
|
||||
onPointerEnter={handleEnter}
|
||||
onPointerLeave={handleLeave}
|
||||
>
|
||||
{/* Thumbnail */}
|
||||
<div className="aspect-video w-full overflow-hidden relative">
|
||||
{hovered && videoUrl ? (
|
||||
<video
|
||||
|
||||
@@ -60,6 +60,7 @@ interface LeftSidebarProps {
|
||||
onAddBlock?: (blockName: string) => void;
|
||||
onPreviewBlock?: (preview: BlockPreviewInfo | null) => void;
|
||||
takeoverContent?: ReactNode;
|
||||
onAddAssetToTimeline?: (path: string) => void;
|
||||
}
|
||||
|
||||
export const LeftSidebar = memo(
|
||||
@@ -92,6 +93,7 @@ export const LeftSidebar = memo(
|
||||
onAddBlock,
|
||||
onPreviewBlock,
|
||||
takeoverContent,
|
||||
onAddAssetToTimeline,
|
||||
},
|
||||
ref,
|
||||
) {
|
||||
@@ -111,7 +113,7 @@ export const LeftSidebar = memo(
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex flex-col h-full bg-neutral-950 border-r border-neutral-800/50"
|
||||
className="flex flex-col h-full overflow-hidden rounded-lg border border-neutral-800/50 bg-neutral-950"
|
||||
style={{ width }}
|
||||
>
|
||||
{takeoverContent ? (
|
||||
@@ -230,6 +232,7 @@ export const LeftSidebar = memo(
|
||||
onImport={onImportFiles}
|
||||
onDelete={onDeleteFile}
|
||||
onRename={onRenameFile}
|
||||
onAddAssetToTimeline={onAddAssetToTimeline}
|
||||
/>
|
||||
)}
|
||||
{tab === "code" && (
|
||||
|
||||
@@ -30,6 +30,35 @@ export function ext(path: string): string {
|
||||
return dot > 0 ? name.slice(dot + 1).toUpperCase() : "";
|
||||
}
|
||||
|
||||
/**
|
||||
* Truncate a string to at most `maxLen` chars, preserving the start and end.
|
||||
* Middle characters are replaced with an ellipsis. If the string is short
|
||||
* enough it is returned unchanged.
|
||||
*
|
||||
* @example truncateMiddle("2a37eabf-long-uuid-887d8.mp4", 20) → "2a37eabf-…887d8.mp4"
|
||||
*
|
||||
* Pure — unit-tested.
|
||||
*/
|
||||
export function truncateMiddle(str: string, maxLen: number): string {
|
||||
if (str.length <= maxLen) return str;
|
||||
const keep = maxLen - 1; // 1 char for ellipsis
|
||||
const tail = Math.floor(keep / 3);
|
||||
const head = keep - tail;
|
||||
return str.slice(0, head) + "…" + str.slice(str.length - tail);
|
||||
}
|
||||
|
||||
/**
|
||||
* Format a duration in seconds as MM:SS. Returns an empty string for
|
||||
* non-positive, NaN, or Infinity values. Pure — unit-tested.
|
||||
*/
|
||||
export function formatDuration(seconds: number): string {
|
||||
if (!Number.isFinite(seconds) || seconds <= 0) return "";
|
||||
const total = Math.round(seconds);
|
||||
const m = Math.floor(total / 60);
|
||||
const s = total % 60;
|
||||
return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
export const CATEGORY_LABELS: Record<MediaCategory, string> = {
|
||||
audio: "Audio",
|
||||
images: "Images",
|
||||
|
||||
Reference in New Issue
Block a user