602 lines
32 KiB
TypeScript
602 lines
32 KiB
TypeScript
// 展示项目资产库，按来源区分「本地上传」与「项目素材」；点击资产 → makeClipFromAsset
|
||
// → dispatch addClip 加入时间线（添加到匹配 kind 的轨道末尾）。资产是
|
||
// "仅时间线作用域"直连媒体（nodeId=asset:<id>）。导入链路：uploadResourceFile →
|
||
// linkProjectAsset（后端按资源元数据合成资产记录）→ refreshAssets。
|
||
|
||
import { useEffect, useRef, useState } from "react";
|
||
import { Boxes, Check, ChevronDown, ChevronRight, Clapperboard, Film, FolderOpen, HardDrive, Image as ImageIcon, Loader2, Music2, Plus, X } from "lucide-react";
|
||
|
||
import { useEditorHostContext, useEditorStoreContext } from "@/components/editor/editor-context";
|
||
import { defaultAssetCategoryForKind } from "@/lib/asset-category";
|
||
import { probeMediaDurationMs } from "@/lib/media-metadata";
|
||
import { makeClipFromAsset } from "@/lib/timeline/asset-ingest";
|
||
import { DEFAULT_AUDIO_TRACK_ID, DEFAULT_SUBTITLE_TRACK_ID, DEFAULT_VIDEO_TRACK_ID } from "@/lib/timeline/timeline-tracks";
|
||
import { linkProjectAsset } from "@/services/api/projects";
|
||
import { uploadResourceFile, type ResourceUploadMeta } from "@/services/api/resources";
|
||
import { resolveMediaUrl } from "@/services/file-storage";
|
||
import type { ProjectAsset } from "@/services/api/projects";
|
||
import type { TimelineProject } from "@/types/timeline";
|
||
|
||
|
||
const MEDIA_ACCEPT = "video/*,audio/*,image/*";
|
||
/** 库内重复判定用的归一键（文件名+媒体类型）。 */
|
||
function assetDedupeKey(title: string | undefined, mediaType: string): string {
|
||
return `${(title || "").trim().toLowerCase()}|${mediaType}`;
|
||
}
|
||
/** 毫秒 → m:ss 时长文案。 */
|
||
function formatDurationMs(ms: number | undefined): string {
|
||
if (!ms || ms <= 0) return "";
|
||
const total = Math.round(ms / 1000);
|
||
return `${Math.floor(total / 60)}:${String(total % 60).padStart(2, "0")}`;
|
||
}
|
||
const IMAGE_RE = /\.(png|jpe?g|webp|gif|avif)$/i;
|
||
const AUDIO_RE = /\.(mp3|wav|m4a|ogg|flac|aac)$/i;
|
||
const MEDIA_RE = /\.(mp4|mov|webm|mkv|m4v|avi)$/i;
|
||
|
||
/** 本地上传标记（assetFromUploadedResource 写入 payload.data.source）。画布产物同步时写入 canvas，仅作数据追溯，面板不再单列分组。 */
|
||
const SOURCE_UPLOADED = "uploaded";
|
||
|
||
type AssetFilter = "all" | "project" | "uploaded";
|
||
|
||
const FILTER_TABS: { id: AssetFilter; label: string }[] = [
|
||
{ id: "all", label: "全部" },
|
||
{ id: "project", label: "项目素材" },
|
||
{ id: "uploaded", label: "本地上传" },
|
||
];
|
||
|
||
/** 按 MIME 与扩展名推断媒体 kind；非媒体文件返回 null。 */
|
||
function kindFromFile(file: File): "image" | "video" | "audio" | null {
|
||
if (file.type.startsWith("video/")) return "video";
|
||
if (file.type.startsWith("audio/")) return "audio";
|
||
if (file.type.startsWith("image/")) return "image";
|
||
if (IMAGE_RE.test(file.name)) return "image";
|
||
if (AUDIO_RE.test(file.name)) return "audio";
|
||
if (MEDIA_RE.test(file.name)) return "video";
|
||
return null;
|
||
}
|
||
|
||
function trackIdForKind(kind: string, project: TimelineProject): string {
|
||
const track = project.tracks.find((t) => t.kind === kind);
|
||
if (track) return track.id;
|
||
if (kind === "video" || kind === "image") return project.tracks.find((t) => t.kind === "video")?.id ?? DEFAULT_VIDEO_TRACK_ID;
|
||
if (kind === "audio") return project.tracks.find((t) => t.kind === "audio")?.id ?? DEFAULT_AUDIO_TRACK_ID;
|
||
return DEFAULT_SUBTITLE_TRACK_ID;
|
||
}
|
||
|
||
function trackEndMs(project: TimelineProject, trackId: string): number {
|
||
return project.clips.filter((c) => c.trackId === trackId).reduce((max, c) => Math.max(max, c.startMs + c.durationMs), 0);
|
||
}
|
||
|
||
function AssetIcon({ mediaType }: { mediaType: string }) {
|
||
const cls = "size-4";
|
||
if (mediaType === "video") return <Film className={cls} />;
|
||
if (mediaType === "audio") return <Music2 className={cls} />;
|
||
if (mediaType === "image") return <ImageIcon className={cls} />;
|
||
return <Clapperboard className={cls} />;
|
||
}
|
||
|
||
/** 列表行小缩略图：图片媒体显示真实画面；视频/音频无法在 <img> 解码，
|
||
* 统一渲染类型色块+图标占位（不再出现破图），视频缩略图由展开卡片提供。 */
|
||
function AssetThumb({ asset }: { asset: ProjectAsset }) {
|
||
const isImage = asset.mediaType === "image";
|
||
const [url, setUrl] = useState<string | null>(null);
|
||
useEffect(() => {
|
||
if (!isImage || !asset.storageKey) return;
|
||
let alive = true;
|
||
resolveMediaUrl(asset.storageKey)
|
||
.then((resolved) => alive && setUrl(resolved ?? null))
|
||
.catch(() => alive && setUrl(null));
|
||
return () => {
|
||
alive = false;
|
||
};
|
||
}, [asset.storageKey, isImage]);
|
||
if (url) {
|
||
return (
|
||
<div className="grid size-9 shrink-0 place-items-center overflow-hidden rounded-md bg-[var(--director-control-hover)]">
|
||
<img src={url} alt="" className="size-full object-cover" />
|
||
</div>
|
||
);
|
||
}
|
||
const kind =
|
||
asset.mediaType === "video"
|
||
? { icon: <Film className="size-4" />, tone: "text-[var(--director-accent)]", tile: "bg-[var(--director-accent)]/15" }
|
||
: asset.mediaType === "audio"
|
||
? { icon: <Music2 className="size-4" />, tone: "text-[var(--director-dock-fg)]/70", tile: "bg-[var(--director-control-hover)]" }
|
||
: { icon: <ImageIcon className="size-4" />, tone: "text-[var(--director-dock-fg)]/60", tile: "bg-[var(--director-control-hover)]" };
|
||
return (
|
||
<div className={`grid size-9 shrink-0 place-items-center overflow-hidden rounded-md ${kind.tile}`}>
|
||
<span className={kind.tone}>{kind.icon}</span>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/** 尝试用 <video> 抓取视频首帧作为封面 dataURL；失败时保留媒体类型图标。 */
|
||
function useVideoPoster(url: string | null): string | null {
|
||
const [poster, setPoster] = useState<string | null>(null);
|
||
useEffect(() => {
|
||
if (!url) {
|
||
setPoster(null);
|
||
return;
|
||
}
|
||
let alive = true;
|
||
const video = document.createElement("video");
|
||
video.muted = true;
|
||
video.playsInline = true;
|
||
video.preload = "metadata";
|
||
video.src = url;
|
||
const seekToHead = () => {
|
||
if (!alive || video.readyState < 1) return;
|
||
try {
|
||
video.currentTime = Math.min(0.05, Number.isFinite(video.duration) ? video.duration : 0.05);
|
||
} catch {
|
||
/* 忽略跨域/编解码异常 */
|
||
}
|
||
};
|
||
const grabFrame = () => {
|
||
if (!alive || video.readyState < 2 || video.videoWidth === 0) return;
|
||
try {
|
||
const canvas = document.createElement("canvas");
|
||
canvas.width = video.videoWidth;
|
||
canvas.height = video.videoHeight;
|
||
const ctx = canvas.getContext("2d");
|
||
if (!ctx) return;
|
||
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
|
||
const dataUrl = canvas.toDataURL("image/jpeg", 0.7);
|
||
if (dataUrl.length > 100) setPoster(dataUrl);
|
||
} catch {
|
||
/* canvas 跨域污染等：放弃自动封面 */
|
||
}
|
||
};
|
||
video.addEventListener("loadeddata", seekToHead);
|
||
video.addEventListener("seeked", grabFrame);
|
||
return () => {
|
||
alive = false;
|
||
video.removeAttribute("src");
|
||
video.load();
|
||
};
|
||
}, [url]);
|
||
return poster;
|
||
}
|
||
|
||
/** 展开卡片预览：图片直接展示；视频给出自动首帧封面 + 原生播放器；音频为说明。 */
|
||
function MediaPreview({ asset }: { asset: ProjectAsset }) {
|
||
const [url, setUrl] = useState<string | null>(null);
|
||
useEffect(() => {
|
||
if (!asset.storageKey) return;
|
||
let alive = true;
|
||
resolveMediaUrl(asset.storageKey)
|
||
.then((resolved) => alive && setUrl(resolved ?? null))
|
||
.catch(() => alive && setUrl(null));
|
||
return () => {
|
||
alive = false;
|
||
};
|
||
}, [asset.storageKey]);
|
||
const poster = useVideoPoster(asset.mediaType === "video" ? url : null);
|
||
if (asset.mediaType === "image") {
|
||
return url ? <img src={url} alt="" className="h-28 w-full rounded-md object-cover" /> : <div className="h-28 animate-pulse rounded-md bg-[var(--director-control-hover)]" />;
|
||
}
|
||
if (asset.mediaType === "video") {
|
||
return (
|
||
<div className="relative overflow-hidden rounded-md bg-black">
|
||
<video
|
||
src={url ?? undefined}
|
||
poster={poster ?? undefined}
|
||
preload="metadata"
|
||
controls
|
||
playsInline
|
||
className="aspect-video w-full"
|
||
/>
|
||
{!url ? <div className="aspect-video w-full animate-pulse bg-[var(--director-control-hover)]" /> : null}
|
||
</div>
|
||
);
|
||
}
|
||
return (
|
||
<div className="flex h-16 items-center justify-center gap-2 rounded-md bg-[var(--director-control-hover)] text-[var(--director-dock-fg)]/60">
|
||
<Music2 className="size-4" />
|
||
<span className="text-[10px]">音频素材 · 点击下方按钮加入时间线</span>
|
||
</div>
|
||
);
|
||
}
|
||
/** 展开详情浮层：覆盖在素材列表上方（列表保持原位不被挤压、滚动位置不变），
|
||
* 自带头部（标题+关闭）、可滚动内容区与固定底部操作；Esc 或关闭按钮退出。 */
|
||
function AssetDetailSheet({
|
||
asset,
|
||
added,
|
||
onAdd,
|
||
onClose,
|
||
}: {
|
||
asset: ProjectAsset;
|
||
added: boolean;
|
||
onAdd: () => void;
|
||
onClose: () => void;
|
||
}) {
|
||
const closeRef = useRef<HTMLButtonElement | null>(null);
|
||
const [shown, setShown] = useState(false);
|
||
useEffect(() => {
|
||
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
|
||
setShown(true);
|
||
return;
|
||
}
|
||
const raf = window.requestAnimationFrame(() => setShown(true));
|
||
return () => window.cancelAnimationFrame(raf);
|
||
}, []);
|
||
useEffect(() => {
|
||
const onKeyDown = (e: KeyboardEvent) => {
|
||
if (e.key === "Escape") onClose();
|
||
};
|
||
window.addEventListener("keydown", onKeyDown);
|
||
closeRef.current?.focus();
|
||
return () => window.removeEventListener("keydown", onKeyDown);
|
||
}, [onClose]);
|
||
return (
|
||
<div
|
||
role="dialog"
|
||
aria-label={`${asset.title || "素材"} 详情`}
|
||
className={`absolute inset-1.5 z-10 flex min-h-0 flex-col overflow-hidden rounded-lg border border-[var(--director-sequencer-border)] bg-[var(--director-sequencer-surface-raised)] shadow-[0_12px_32px_rgba(0,0,0,0.35)] transition-[opacity,transform] duration-150 ease-out ${
|
||
shown ? "translate-y-0 opacity-100" : "translate-y-1 opacity-0"
|
||
}`}
|
||
>
|
||
<div className="flex items-center gap-2 border-b border-[var(--director-sequencer-border)] px-2.5 py-2">
|
||
<span className="grid size-5 shrink-0 place-items-center rounded-[5px] bg-[var(--director-accent)]/15">
|
||
<AssetIcon mediaType={asset.mediaType} />
|
||
</span>
|
||
<span className="min-w-0 flex-1 truncate text-[11px] font-medium text-[var(--director-dock-fg-strong)]">
|
||
{asset.title || asset.storageKey}
|
||
</span>
|
||
<button
|
||
ref={closeRef}
|
||
type="button"
|
||
onClick={onClose}
|
||
aria-label="关闭详情"
|
||
className="grid size-5 shrink-0 place-items-center rounded-md text-[var(--director-dock-fg)]/55 transition-colors hover:bg-[var(--director-control-hover)] hover:text-[var(--director-dock-fg-strong)]"
|
||
>
|
||
<X className="size-3.5" />
|
||
</button>
|
||
</div>
|
||
<div className="director-scroll min-h-0 flex-1 overflow-y-auto px-2.5 py-2">
|
||
<MediaPreview asset={asset} />
|
||
<dl className="mt-2.5 grid grid-cols-2 gap-x-3 gap-y-1 text-[10px]">
|
||
<dt className="text-[var(--director-dock-fg)]/60">媒体类型</dt>
|
||
<dd className="truncate text-right capitalize text-[var(--director-dock-fg-strong)]">{asset.mediaType}</dd>
|
||
<dt className="text-[var(--director-dock-fg)]/60">分类</dt>
|
||
<dd className="truncate text-right text-[var(--director-dock-fg-strong)]">{asset.category}</dd>
|
||
{asset.durationMs ? (
|
||
<>
|
||
<dt className="text-[var(--director-dock-fg)]/60">时长</dt>
|
||
<dd className="text-right tabular-nums text-[var(--director-dock-fg-strong)]">{formatDurationMs(asset.durationMs)}</dd>
|
||
</>
|
||
) : null}
|
||
</dl>
|
||
{asset.previewText ? (
|
||
<p className="mt-2 line-clamp-2 text-[10px] leading-relaxed text-[var(--director-dock-fg)]/60">{asset.previewText}</p>
|
||
) : null}
|
||
</div>
|
||
<div className="border-t border-[var(--director-sequencer-border)] p-2">
|
||
<button
|
||
type="button"
|
||
disabled={added}
|
||
onClick={onAdd}
|
||
className={`flex h-7 w-full items-center justify-center gap-1 rounded-md text-[11px] font-medium transition-colors ${
|
||
added
|
||
? "bg-[var(--director-success-soft)] text-[var(--director-success)]"
|
||
: "bg-[var(--director-accent)] text-[var(--director-on-accent)] hover:bg-[var(--director-accent-hover)]"
|
||
}`}
|
||
>
|
||
{added ? <Check className="size-3.5" /> : <Plus className="size-3.5" />}
|
||
{added ? "已添加到时间线" : "添加到时间线"}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export function EditorAssetIngest() {
|
||
const { projectId, assets, refreshAssets } = useEditorHostContext();
|
||
const { project, dispatch } = useEditorStoreContext();
|
||
const [added, setAdded] = useState<string | null>(null);
|
||
const [importing, setImporting] = useState(false);
|
||
const [importError, setImportError] = useState<string | null>(null);
|
||
const [importNote, setImportNote] = useState<string | null>(null);
|
||
useEffect(() => {
|
||
if (!importNote) return;
|
||
const timer = window.setTimeout(() => setImportNote(null), 3200);
|
||
return () => window.clearTimeout(timer);
|
||
}, [importNote]);
|
||
const [dragOver, setDragOver] = useState(false);
|
||
|
||
const [filter, setFilter] = useState<AssetFilter>("all");
|
||
const [expandedId, setExpandedId] = useState<string | null>(null);
|
||
const [openGroups, setOpenGroups] = useState<{ uploaded: boolean; project: boolean }>({ uploaded: true, project: true });
|
||
const inputRef = useRef<HTMLInputElement | null>(null);
|
||
const lastAddKey = useRef<string | null>(null);
|
||
const lastAddAt = useRef(0);
|
||
// 展开浮层指向的素材被移除/刷新消失时自动关闭，避免浮层残留指向已不存在的数据。
|
||
useEffect(() => {
|
||
if (expandedId && !assets.some((a) => a.id === expandedId)) {
|
||
setExpandedId(null);
|
||
}
|
||
}, [assets, expandedId]);
|
||
|
||
if (!project) return null;
|
||
|
||
const importFiles = async (fileList: FileList | File[]) => {
|
||
const media = Array.from(fileList)
|
||
.map((file) => ({ file, kind: kindFromFile(file) }))
|
||
.filter((x): x is { file: File; kind: "image" | "video" | "audio" } => x.kind !== null);
|
||
if (media.length === 0) {
|
||
setImportError("仅支持视频、音频与图片文件");
|
||
return;
|
||
}
|
||
setImporting(true);
|
||
setImportError(null);
|
||
setImportNote(null);
|
||
let okCount = 0;
|
||
let firstErrorMsg: string | null = null;
|
||
const failedNames: string[] = [];
|
||
try {
|
||
// 去重：同名同类型视为同一素材。库内已有或本批内重复的跳过，避免
|
||
// 再次上传同一大文件生成重复 asset（历史上重复导入会把素材堆积成多条）。
|
||
const seen = new Set<string>();
|
||
const toImport = media.filter(({ file, kind }) => {
|
||
const key = assetDedupeKey(file.name, kind);
|
||
const known = assets.some((a) => assetDedupeKey(a.title, a.mediaType) === key);
|
||
const duplicated = seen.has(key);
|
||
seen.add(key);
|
||
return !known && !duplicated;
|
||
});
|
||
const skipped = media.length - toImport.length;
|
||
// 逐文件导入：单文件失败不中断整批，汇总失败数提示。
|
||
const linkedIds: string[] = [];
|
||
for (const { file, kind } of toImport) {
|
||
try {
|
||
// 上传前探测真实时长（视频/音频），随 meta 入库供时间线片段使用。
|
||
const durationMs = await probeMediaDurationMs(file);
|
||
const resource = await uploadResourceFile(file, kind, durationMs !== undefined ? { durationMs } : undefined);
|
||
if (resource.status === "failed") {
|
||
failedNames.push(file.name);
|
||
if (!firstErrorMsg) firstErrorMsg = resource.error ? `「${file.name}」${resource.error}` : null;
|
||
continue;
|
||
}
|
||
let linked = false;
|
||
try {
|
||
await linkProjectAsset(projectId, { assetId: resource.id, category: defaultAssetCategoryForKind(kind), title: file.name });
|
||
linked = true;
|
||
} catch {
|
||
// 链接偶发失败（网络抖动/后端竞态）时重试一次，避免资源已入库却未挂到项目下。
|
||
linked = await linkProjectAsset(projectId, { assetId: resource.id, category: defaultAssetCategoryForKind(kind), title: file.name })
|
||
.then(() => true)
|
||
.catch(() => false);
|
||
}
|
||
if (!linked) {
|
||
// 两次挂载都失败（asset 可能已创建但未挂上项目）：不删除，提示重试——重试走幂等路径可补挂。
|
||
failedNames.push(file.name);
|
||
if (!firstErrorMsg) firstErrorMsg = `「${file.name}」已上传但挂载到项目失败，请重试`;
|
||
continue;
|
||
}
|
||
okCount += 1;
|
||
linkedIds.push(resource.id);
|
||
} catch (err) {
|
||
failedNames.push(file.name);
|
||
const detail = extractApiMessage(err);
|
||
if (!firstErrorMsg) firstErrorMsg = detail ? `「${file.name}」${detail}` : `「${file.name}」导入失败`;
|
||
}
|
||
}
|
||
if (okCount > 0) {
|
||
// 刷新后校验本次挂载的素材是否都出现在列表里；若单次刷新因网络抖动
|
||
// 或后端提交延迟而拿不到最新结果，立即再刷新一次，避免列表停留在旧快照。
|
||
const firstList = await refreshAssets();
|
||
if (firstList && linkedIds.some((id) => !firstList.some((asset) => asset.id === id))) {
|
||
await refreshAssets();
|
||
}
|
||
setImportNote(skipped > 0 ? `已导入 ${okCount} 个，跳过 ${skipped} 个重复文件` : `已导入 ${okCount} 个媒体`);
|
||
} else if (skipped > 0 && failedNames.length === 0) {
|
||
setImportNote(`媒体库中已有同名素材，跳过 ${skipped} 个重复文件`);
|
||
}
|
||
if (firstErrorMsg) {
|
||
setImportError(firstErrorMsg);
|
||
} else if (failedNames.length > 0) {
|
||
const failedText = failedNames.length === 1 ? `「${failedNames[0]}」` : `${failedNames.length} 个文件`;
|
||
setImportError(`${failedText}导入失败，请重试`);
|
||
}
|
||
} finally {
|
||
setImporting(false);
|
||
}
|
||
};
|
||
|
||
// 双击“添加到时间线”会连续 dispatch 两次，产生两个同一素材的相邻片段；用时间戳守卫拦截 1.5s 内的重复添加。
|
||
const addToTimeline = (asset: ProjectAsset) => {
|
||
const now = Date.now();
|
||
if (lastAddKey.current === asset.id && now - lastAddAt.current < 1500) return;
|
||
lastAddKey.current = asset.id;
|
||
lastAddAt.current = now;
|
||
const kind = asset.mediaType === "video" ? "video" : asset.mediaType === "audio" ? "audio" : asset.mediaType === "image" ? "image" : null;
|
||
if (!kind) return;
|
||
const trackId = trackIdForKind(kind, project);
|
||
const startMs = trackEndMs(project, trackId);
|
||
const clip = makeClipFromAsset(asset, {
|
||
trackId,
|
||
startMs,
|
||
defaultDurationMs: kind === "image" ? 3_000 : 5_000,
|
||
});
|
||
if (!clip) return;
|
||
dispatch({ op: "addClip", payload: { clip } });
|
||
setAdded(asset.id);
|
||
setTimeout(() => setAdded(null), 1200);
|
||
};
|
||
|
||
const uploadedAssets = assets.filter((a) => a.source === SOURCE_UPLOADED);
|
||
// 画布产物已自动同步为普通项目素材：并入「项目素材」，不再按来源单列分组。
|
||
const projectAssets = assets.filter((a) => a.source !== SOURCE_UPLOADED);
|
||
const groups: { id: "uploaded" | "project"; label: string; icon: typeof HardDrive; items: ProjectAsset[] }[] = [
|
||
{ id: "uploaded", label: "本地上传", icon: HardDrive, items: uploadedAssets },
|
||
{ id: "project", label: "项目素材", icon: Boxes, items: projectAssets },
|
||
];
|
||
const visibleGroups = groups.filter((g) => filter === "all" || g.id === filter);
|
||
const totalCount = assets.length;
|
||
const expandedAsset = assets.find((a) => a.id === expandedId) ?? null;
|
||
|
||
return (
|
||
<div
|
||
className={`flex h-full min-h-0 flex-col bg-[var(--director-sequencer-surface)] ${dragOver ? "ring-2 ring-inset ring-[var(--director-accent)]" : ""}`}
|
||
onDragOver={(e) => {
|
||
e.preventDefault();
|
||
setDragOver(true);
|
||
}}
|
||
onDragLeave={() => setDragOver(false)}
|
||
onDrop={(e) => {
|
||
e.preventDefault();
|
||
setDragOver(false);
|
||
void importFiles(e.dataTransfer.files);
|
||
}}
|
||
>
|
||
{/* 标题行：媒体库 + 导入按钮 */}
|
||
<div className="flex items-center gap-1.5 p-2 pb-1">
|
||
<input
|
||
ref={inputRef}
|
||
type="file"
|
||
accept={MEDIA_ACCEPT}
|
||
multiple
|
||
className="hidden"
|
||
onChange={(e) => {
|
||
if (e.target.files) void importFiles(e.target.files);
|
||
e.target.value = "";
|
||
}}
|
||
/>
|
||
<span className="text-xs font-semibold text-[var(--director-dock-fg-strong)]">媒体库</span>
|
||
<span className="rounded-full bg-[var(--director-control-hover)] px-1.5 text-[9px] tabular-nums text-[var(--director-dock-fg)]/70">{totalCount}</span>
|
||
<div className="flex-1" />
|
||
<button
|
||
type="button"
|
||
disabled={importing}
|
||
onClick={() => inputRef.current?.click()}
|
||
className="flex h-7 items-center gap-1.5 rounded-md border border-dashed border-[var(--director-sequencer-border)] px-2.5 text-[11px] font-medium text-[var(--director-dock-fg-strong)] transition-colors hover:border-[var(--director-accent)] hover:bg-[var(--director-control-hover)] disabled:cursor-not-allowed disabled:opacity-60"
|
||
>
|
||
{importing ? <Loader2 className="size-3.5 animate-spin" /> : <FolderOpen className="size-3.5" />}
|
||
{importing ? "导入中…" : "导入媒体"}
|
||
</button>
|
||
</div>
|
||
|
||
{/* 来源筛选：全部 / 项目素材 / 本地上传 */}
|
||
<div className="flex items-center gap-0.5 px-2 pb-1">
|
||
{FILTER_TABS.map((tab) => (
|
||
<button
|
||
key={tab.id}
|
||
type="button"
|
||
aria-pressed={filter === tab.id}
|
||
onClick={() => setFilter(tab.id)}
|
||
className={`h-6 rounded-md px-2 text-[10px] transition-colors ${
|
||
filter === tab.id
|
||
? "bg-[var(--director-dock-active-surface)] text-[var(--director-dock-fg-strong)]"
|
||
: "text-[var(--director-dock-fg)] hover:bg-[var(--director-control-hover)]"
|
||
}`}
|
||
>
|
||
{tab.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{importError ? <p className="px-2 pb-1 text-[10px] text-[var(--director-danger)]">{importError}</p> : null}
|
||
{importNote ? <p className="px-2 pb-1 text-[10px] text-[var(--director-success)]">{importNote}</p> : null}
|
||
|
||
<div className="relative min-h-0 flex-1">
|
||
<div className="director-scroll h-full overflow-y-auto p-1.5">
|
||
{assets.length === 0 ? (
|
||
<div className="flex h-full flex-col items-center justify-center gap-2 p-4 text-center">
|
||
<p className="text-xs text-[var(--director-dock-fg)]/60">项目暂无资产</p>
|
||
<p className="max-w-[180px] text-[11px] leading-relaxed text-[var(--director-dock-fg)]/45">点击上方导入媒体，或将文件拖入此区域</p>
|
||
</div>
|
||
) : visibleGroups.every((g) => g.items.length === 0) ? (
|
||
<div className="flex h-full flex-col items-center justify-center gap-2 p-4 text-center">
|
||
<p className="text-xs text-[var(--director-dock-fg)]/60">
|
||
{filter === "uploaded" ? "暂无本地上传的媒体" : filter === "project" ? "暂无项目素材" : "项目暂无资产"}
|
||
</p>
|
||
<p className="max-w-[180px] text-[11px] leading-relaxed text-[var(--director-dock-fg)]/45">点击上方导入媒体，或将文件拖入此区域</p>
|
||
</div>
|
||
) : (
|
||
<div className="flex flex-col gap-1">
|
||
{visibleGroups.map((group) => {
|
||
if (group.items.length === 0) return null;
|
||
const open = openGroups[group.id];
|
||
return (
|
||
<div key={group.id} className="flex flex-col">
|
||
<button
|
||
type="button"
|
||
aria-expanded={open}
|
||
onClick={() => setOpenGroups((s) => ({ ...s, [group.id]: !open }))}
|
||
className="group flex h-7 w-full items-center gap-1.5 rounded-md px-1 text-left transition-colors hover:bg-[var(--director-control-hover)]"
|
||
>
|
||
<span
|
||
className={`grid size-4 shrink-0 place-items-center rounded-[5px] transition-colors ${
|
||
open ? "bg-[var(--director-accent)]/15 text-[var(--director-accent)]" : "bg-[var(--director-control-hover)] text-[var(--director-dock-fg)]/55 group-hover:text-[var(--director-dock-fg-strong)]"
|
||
}`}
|
||
>
|
||
<ChevronRight className={`size-3 transition-transform duration-150 ease-out ${open ? "rotate-90" : ""}`} />
|
||
</span>
|
||
<group.icon className={`size-3.5 shrink-0 transition-colors ${open ? "text-[var(--director-accent)]" : "text-[var(--director-dock-fg)]/60"}`} />
|
||
<span className="truncate text-[11px] font-medium text-[var(--director-dock-fg-strong)]">{group.label}</span>
|
||
<span className="ml-auto rounded-full bg-[var(--director-control-hover)] px-1.5 text-[9px] tabular-nums text-[var(--director-dock-fg)]/70">{group.items.length}</span>
|
||
</button>
|
||
{open ? (
|
||
<ul className="flex flex-col">
|
||
{group.items.map((asset) => {
|
||
const expanded = expandedId === asset.id;
|
||
return (
|
||
<li key={asset.id}>
|
||
<button
|
||
type="button"
|
||
aria-expanded={expanded}
|
||
onClick={() => setExpandedId(expanded ? null : asset.id)}
|
||
title={asset.title || asset.storageKey}
|
||
className={`group flex w-full items-center gap-2 rounded-md px-1 py-[3px] text-left transition-colors ${
|
||
added === asset.id ? "bg-[var(--director-accent)]/15" : "hover:bg-[var(--director-control-hover)]"
|
||
}`}
|
||
>
|
||
<AssetThumb asset={asset} />
|
||
<span className="min-w-0 flex-1">
|
||
<span className="block truncate text-[11px] text-[var(--director-dock-fg-strong)]">{asset.title || asset.storageKey}</span>
|
||
<span className="mt-0.5 flex items-center gap-1 text-[9px] text-[var(--director-dock-fg)]/60">
|
||
<span className="uppercase">{asset.mediaType}</span>
|
||
{asset.durationMs ? <span className="tabular-nums opacity-80">{formatDurationMs(asset.durationMs)}</span> : null}
|
||
</span>
|
||
</span>
|
||
<span
|
||
className={`grid size-5 shrink-0 place-items-center rounded-[5px] transition-colors ${
|
||
expanded ? "bg-[var(--director-accent)]/15 text-[var(--director-accent)]" : "text-[var(--director-dock-fg)]/40 group-hover:text-[var(--director-dock-fg)]/80"
|
||
}`}
|
||
>
|
||
<ChevronDown className={`size-3.5 transition-transform duration-150 ease-out ${expanded ? "rotate-180" : ""}`} />
|
||
</span>
|
||
</button>
|
||
</li>
|
||
);
|
||
})}
|
||
</ul>
|
||
) : null}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
</div>
|
||
{expandedAsset ? (
|
||
<AssetDetailSheet
|
||
asset={expandedAsset}
|
||
added={added === expandedAsset.id}
|
||
onClose={() => setExpandedId(null)}
|
||
onAdd={() => addToTimeline(expandedAsset)}
|
||
/>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/** 从 Axios 错误中提取后端业务信息（{ code, data, msg } 的 msg），无则返回 null。 */
|
||
function extractApiMessage(err: unknown): string | null {
|
||
if (typeof err !== "object" || err === null) return null;
|
||
const anyErr = err as { response?: { data?: { msg?: string } } };
|
||
const msg = anyErr.response?.data?.msg;
|
||
if (typeof msg === "string" && msg.trim()) return msg.trim();
|
||
return null;
|
||
}
|