@elah/timeline 0.1.0

package/dist/useTimelineDrop.js

@@ -0,0 +1,187 @@
+import { useEffect } from 'react';
+import { MEDIA_DRAG_MIME, } from '@elah/core';
+import { useAudioDropDialogStore } from './audioDropDialog.store';
+import { ELEMENT_DRAG_MIME } from './elementDrag';
+import { useMediaLibraryStore } from '@elah/core';
+import { useTracksStore } from '@elah/core';
+import { usePlaybackStore } from '@elah/core';
+import { buildSnapPoints, snapFrame } from '@elah/core';
+import { secondsToFrames, clipsOverlap } from '@elah/core';
+import { useTimeline } from './engine-context';
+const DEFAULT_TEXT_DURATION_SEC = 3;
+function resolveDropPosition(existingClips, desiredStart, durationFrames) {
+    const sorted = [...existingClips].sort((a, b) => a.startFrame - b.startFrame);
+    const overlapping = sorted.filter((c) => clipsOverlap(c, { startFrame: desiredStart, durationFrames }));
+    if (overlapping.length === 0)
+        return { startFrame: desiredStart, durationFrames };
+    const firstOverlap = overlapping[0];
+    if (desiredStart < firstOverlap.startFrame) {
+        const prevEnd = Math.max(0, ...sorted
+            .filter((c) => c.startFrame + c.durationFrames <= desiredStart)
+            .map((c) => c.startFrame + c.durationFrames));
+        const gapSize = firstOverlap.startFrame - prevEnd;
+        return { startFrame: prevEnd, durationFrames: Math.min(durationFrames, gapSize) };
+    }
+    const lastOverlapEnd = Math.max(...overlapping.map((c) => c.startFrame + c.durationFrames));
+    const nextClip = sorted.find((c) => c.startFrame >= lastOverlapEnd);
+    if (nextClip) {
+        const available = nextClip.startFrame - lastOverlapEnd;
+        return { startFrame: lastOverlapEnd, durationFrames: Math.min(durationFrames, available) };
+    }
+    return { startFrame: lastOverlapEnd, durationFrames };
+}
+function mediaKindToClipType(kind) {
+    return kind;
+}
+function isCompatibleTrackKind(trackKind, mediaKind) {
+    if (trackKind === 'audio')
+        return mediaKind === 'audio';
+    if (trackKind === 'video')
+        return mediaKind === 'video' || mediaKind === 'image';
+    return false;
+}
+export function useTimelineDrop(trackId, lane) {
+    const engine = useTimeline();
+    useEffect(() => {
+        if (!lane)
+            return;
+        const acceptsDrag = (e) => e.dataTransfer?.types.includes(MEDIA_DRAG_MIME) ||
+            e.dataTransfer?.types.includes(ELEMENT_DRAG_MIME);
+        const startFrameAt = (clientX) => {
+            const zoom = usePlaybackStore.getState().zoom;
+            const rect = lane.getBoundingClientRect();
+            let startFrame = Math.max(0, Math.round((clientX - rect.left) / zoom));
+            if (usePlaybackStore.getState().snapEnabled) {
+                const allClips = useTracksStore.getState().clips;
+                const snapPoints = buildSnapPoints(allClips);
+                snapPoints.push(usePlaybackStore.getState().currentFrame);
+                const threshold = Math.max(1, Math.round(5 / zoom));
+                startFrame = snapFrame(startFrame, snapPoints, threshold);
+            }
+            return startFrame;
+        };
+        const handleDragOver = (e) => {
+            if (!acceptsDrag(e))
+                return;
+            e.preventDefault();
+            e.dataTransfer.dropEffect = 'copy';
+        };
+        const ensureAudioTrack = () => {
+            const existing = useTracksStore
+                .getState()
+                .tracks.find((t) => t.kind === 'audio');
+            return existing ? existing.id : engine.addTrack('audio').id;
+        };
+        const resolveOn = (tid, desired, dur) => resolveDropPosition(useTracksStore.getState().clips[tid] ?? [], desired, dur);
+        const addMediaClip = (tid, type, asset, startFrame, durationFrames) => {
+            engine.addClip({
+                trackId: tid,
+                type,
+                name: asset.name,
+                startFrame,
+                durationFrames,
+                src: asset.src,
+                assetId: asset.id,
+            });
+        };
+        const dropMediaAsset = async (e, track) => {
+            let payload;
+            try {
+                payload = JSON.parse(e.dataTransfer.getData(MEDIA_DRAG_MIME));
+            }
+            catch {
+                return;
+            }
+            if (payload.kind !== 'media-asset' || !payload.assetId)
+                return;
+            const asset = useMediaLibraryStore.getState().getAsset(payload.assetId);
+            if (!asset)
+                return;
+            if (!isCompatibleTrackKind(track.kind, asset.kind))
+                return;
+            const fps = engine.getProject().fps;
+            const fullDuration = Math.max(1, asset.durationSec > 0 ? secondsToFrames(asset.durationSec, fps) : fps * 5);
+            const desiredStart = startFrameAt(e.clientX);
+            if (asset.kind !== 'video' || !asset.hasAudio) {
+                const r = resolveOn(trackId, desiredStart, fullDuration);
+                addMediaClip(trackId, mediaKindToClipType(asset.kind), asset, r.startFrame, r.durationFrames);
+                return;
+            }
+            const choice = await useAudioDropDialogStore.getState().request(asset.name);
+            if (!choice)
+                return;
+            engine.batch(() => {
+                if (choice === 'video-only') {
+                    const v = resolveOn(trackId, desiredStart, fullDuration);
+                    addMediaClip(trackId, 'video', asset, v.startFrame, v.durationFrames);
+                }
+                else if (choice === 'both') {
+                    const audioTrackId = ensureAudioTrack();
+                    const videoClips = useTracksStore.getState().clips[trackId] ?? [];
+                    const audioClips = useTracksStore.getState().clips[audioTrackId] ?? [];
+                    const r = resolveDropPosition([...videoClips, ...audioClips], desiredStart, fullDuration);
+                    addMediaClip(trackId, 'video', asset, r.startFrame, r.durationFrames);
+                    addMediaClip(audioTrackId, 'audio', asset, r.startFrame, r.durationFrames);
+                }
+                else {
+                    const audioTrackId = ensureAudioTrack();
+                    const a = resolveOn(audioTrackId, desiredStart, fullDuration);
+                    addMediaClip(audioTrackId, 'audio', asset, a.startFrame, a.durationFrames);
+                }
+            }, 'Add media');
+        };
+        const dropElement = (e, track) => {
+            let payload;
+            try {
+                payload = JSON.parse(e.dataTransfer.getData(ELEMENT_DRAG_MIME));
+            }
+            catch {
+                return;
+            }
+            if (payload.element !== 'text' || track.kind !== 'text')
+                return;
+            const fps = engine.getProject().fps;
+            const existing = useTracksStore.getState().clips[trackId] ?? [];
+            const n = existing.length + 1;
+            const textDuration = Math.max(1, fps * DEFAULT_TEXT_DURATION_SEC);
+            const { startFrame: textStart, durationFrames: textDurationResolved } = resolveDropPosition(existing, startFrameAt(e.clientX), textDuration);
+            engine.addClip({
+                trackId,
+                type: 'text',
+                name: `Text ${n}`,
+                startFrame: textStart,
+                durationFrames: textDurationResolved,
+                text: {
+                    content: `Text ${n}`,
+                    fontSize: 200,
+                    color: '#ffffff',
+                    fontFamily: 'sans-serif',
+                    fontWeight: 'normal',
+                    textAlign: 'center',
+                },
+            });
+        };
+        const handleDrop = (e) => {
+            if (!acceptsDrag(e))
+                return;
+            e.preventDefault();
+            const track = useTracksStore
+                .getState()
+                .tracks.find((t) => t.id === trackId);
+            if (!track)
+                return;
+            if (e.dataTransfer.types.includes(ELEMENT_DRAG_MIME)) {
+                dropElement(e, track);
+            }
+            else {
+                void dropMediaAsset(e, track);
+            }
+        };
+        lane.addEventListener('dragover', handleDragOver);
+        lane.addEventListener('drop', handleDrop);
+        return () => {
+            lane.removeEventListener('dragover', handleDragOver);
+            lane.removeEventListener('drop', handleDrop);
+        };
+    }, [trackId, lane, engine]);
+}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@elah/timeline",
+  "version": "0.1.0",
+  "description": "Reusable timeline UI framework",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "build": "tsc --noEmit && tsc -p tsconfig.build.json"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "@elah/core": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "jsdom": "^29.1.1",
+    "typescript": "^5.7.3",
+    "vitest": "^3.0.6"
+  }
+}