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 });
+ }}
+ className={`group w-full text-left px-4 py-1.5 flex items-center gap-2.5 transition-all cursor-pointer ${
+ playing
+ ? "bg-panel-accent/[0.06]"
+ : isCopied
+ ? "bg-panel-accent/10"
+ : "hover:bg-panel-surface-hover"
+ }`}
+ >
+
- {/* Context menu */}
{contextMenu && (
- setContextMenu(null)}
- onContextMenu={(e) => {
- e.preventDefault();
- setContextMenu(null);
- }}
- >
-
- )}
-
- {/* Delete confirmation */}
- {confirmDelete && (
-
-
- {onRename && (
-
- )}
- {onDelete && (
-
- )}
-
-
- Delete {name}?
-
+
-
-
-
- setDragOver(false)}
onDrop={handleDrop}
>
- {/* Import button */}
- {onImport && (
-
{/* Asset list */}
-
-
+ )}
+
+ {/* Filter chips — panel-input style */}
+ {mediaAssets.length > 0 && (
+
+
+ {FILTER_ORDER.map((cat) =>
+ counts[cat] > 0 ? (
+
+ ) : null,
+ )}
+
+ )}
+
+ = {
+ audio: "Audio",
+ images: "Images",
+ video: "Video",
+ fonts: "Fonts",
+};
+
+export const FILTER_ORDER: MediaCategory[] = ["audio", "images", "video", "fonts"];
diff --git a/packages/studio/src/hooks/useMusicBeatAnalysis.ts b/packages/studio/src/hooks/useMusicBeatAnalysis.ts
index 73a143f700..da533487e5 100644
--- a/packages/studio/src/hooks/useMusicBeatAnalysis.ts
+++ b/packages/studio/src/hooks/useMusicBeatAnalysis.ts
@@ -92,33 +92,48 @@ export function useMusicBeatAnalysis(): void {
return;
}
let cancelled = false;
-
- let promise = analysisCache.get(musicSrc);
- if (!promise) {
- promise = analyzeMusicFromUrl(musicSrc);
- cacheAnalysis(musicSrc, promise);
- }
-
const beatPath = beatFilePathForSrc(musicSrc);
- promise
- .then(async (analysis) => {
+ const io = ioRef.current;
+
+ // Only run expensive audio decode + beat analysis when the user has an
+ // explicit beats file saved. Without one, skip entirely — no surprise
+ // green lines on the timeline after dragging unrelated assets.
+ (async () => {
+ if (!beatPath || !io) return;
+ let hasSavedBeats = false;
+ try {
+ const content = await io.readOptionalProjectFile(beatPath);
+ const parsed = content ? parseBeats(content) : null;
+ hasSavedBeats = !!(parsed && parsed.times.length > 0);
+ } catch {
+ /* no file */
+ }
+ if (cancelled) return;
+ if (!hasSavedBeats) {
+ setBeatAnalysis(null);
+ return;
+ }
+
+ let promise = analysisCache.get(musicSrc);
+ if (!promise) {
+ promise = analyzeMusicFromUrl(musicSrc);
+ cacheAnalysis(musicSrc, promise);
+ }
+ try {
+ const analysis = await promise;
const detected = { times: analysis.beatTimes, strengths: analysis.beatStrengths };
- const io = ioRef.current;
- if (!io) return;
- const { times, strengths, hasFile } = await resolveBeats(beatPath, detected, io);
+ const { times, strengths } = await resolveBeats(beatPath, detected, io);
if (cancelled) return;
setBeatEdits(null);
resetBeatHistory();
setBeatAnalysis({ ...analysis, beatTimes: times, beatStrengths: strengths });
- // Seed a missing file through the SAME debounced writer the edits use, so
- // the initial write can't race a near-simultaneous edit's persist.
- if (beatPath && !hasFile && times.length > 0) usePlayerStore.getState().beatPersist?.();
- })
- .catch(() => {
- if (cancelled) return;
- setBeatAnalysis(null);
- analysisCache.delete(musicSrc);
- });
+ } catch {
+ if (!cancelled) {
+ setBeatAnalysis(null);
+ analysisCache.delete(musicSrc);
+ }
+ }
+ })();
return () => {
cancelled = true;
{mediaAssets.length === 0 ? (
) : (
- mediaAssets.map((asset) => (
-
diff --git a/packages/studio/src/components/sidebar/assetHelpers.ts b/packages/studio/src/components/sidebar/assetHelpers.ts
new file mode 100644
index 0000000000..069c47491c
--- /dev/null
+++ b/packages/studio/src/components/sidebar/assetHelpers.ts
@@ -0,0 +1,40 @@
+import { AUDIO_EXT, IMAGE_EXT, VIDEO_EXT, FONT_EXT } from "../../utils/mediaTypes";
+
+export type MediaCategory = "audio" | "images" | "video" | "fonts";
+
+export function getCategory(path: string): MediaCategory | null {
+ if (AUDIO_EXT.test(path)) return "audio";
+ if (IMAGE_EXT.test(path)) return "images";
+ if (VIDEO_EXT.test(path)) return "video";
+ if (FONT_EXT.test(path)) return "fonts";
+ return null;
+}
+
+export function getAudioSubtype(path: string): string {
+ const lower = path.toLowerCase();
+ if (lower.includes("/bgm/") || lower.includes("/music/")) return "BGM";
+ if (lower.includes("/sfx/") || lower.includes("/sound")) return "SFX";
+ if (lower.includes("/voice/") || lower.includes("/narrat")) return "Voice";
+ return "Audio";
+}
+
+export function basename(path: string): string {
+ const name = path.split("/").pop() ?? path;
+ const dot = name.lastIndexOf(".");
+ return dot > 0 ? name.slice(0, dot) : name;
+}
+
+export function ext(path: string): string {
+ const name = path.split("/").pop() ?? path;
+ const dot = name.lastIndexOf(".");
+ return dot > 0 ? name.slice(dot + 1).toUpperCase() : "";
+}
+
+export const CATEGORY_LABELS: Record
+ {activeFilter === "all" && (
+
))
)}
+
+ )}
+ {cat === "audio" &&
+ categorized[cat].map((a) => (
+