@elah/core 0.1.0

package/dist/resolver/resolveTimeline.js

@@ -0,0 +1,249 @@
+function applyEasing(t, easing = 'linear') {
+    const c = Math.max(0, Math.min(1, t));
+    if (easing === 'ease-in')
+        return c * c;
+    if (easing === 'ease-out')
+        return c * (2 - c);
+    return c;
+}
+function findClipById(clips, clipId) {
+    for (const [trackId, trackClips] of Object.entries(clips)) {
+        const clip = trackClips.find((c) => c.id === clipId);
+        if (clip)
+            return { clip, trackId };
+    }
+    return null;
+}
+export function resolveTimeline(frame, project) {
+    const scene = {
+        frame,
+        fps: project.fps,
+        stage: project.stage,
+        videos: [],
+        audios: [],
+        texts: [],
+        images: [],
+        transitions: [],
+    };
+    const hasSolo = { video: false, audio: false, text: false };
+    for (const t of project.tracks) {
+        if (t.solo) {
+            if (t.kind === 'video' || t.kind === 'audio' || t.kind === 'text') {
+                hasSolo[t.kind] = true;
+            }
+        }
+    }
+    const maxOrder = project.tracks.reduce((m, t) => Math.max(m, t.order), 0);
+    for (const track of project.tracks) {
+        if (track.disabled)
+            continue;
+        if (hasSolo[track.kind] && !track.solo)
+            continue;
+        const clips = project.clips[track.id];
+        if (!clips || clips.length === 0)
+            continue;
+        const zIndex = track.kind === 'text' ? 1000000 : (maxOrder - track.order) * 1000;
+        for (const clip of clips) {
+            if (clip.disabled)
+                continue;
+            if (frame < clip.startFrame)
+                continue;
+            if (frame >= clip.startFrame + clip.durationFrames)
+                continue;
+            const sourceFrame = frame - clip.startFrame + clip.sourceStartFrame;
+            const opacity = clip.opacity ?? 1;
+            const baseVolume = clip.volume ?? 1;
+            const volume = track.muted ? 0 : baseVolume;
+            if (clip.type === 'video' && clip.src) {
+                const active = {
+                    type: 'video',
+                    id: clip.id,
+                    trackId: clip.trackId,
+                    name: clip.name,
+                    src: clip.src,
+                    sourceFrame,
+                    opacity,
+                    volume,
+                    zIndex,
+                    ...(clip.transform ? { transform: clip.transform } : {}),
+                };
+                scene.videos.push(active);
+            }
+            else if (clip.type === 'audio' && clip.src) {
+                const active = {
+                    type: 'audio',
+                    id: clip.id,
+                    trackId: clip.trackId,
+                    name: clip.name,
+                    src: clip.src,
+                    sourceFrame,
+                    opacity: 1,
+                    volume,
+                    zIndex,
+                    ...(clip.transform ? { transform: clip.transform } : {}),
+                };
+                scene.audios.push(active);
+            }
+            else if (clip.type === 'text') {
+                let resolvedOpacity = opacity;
+                const anim = clip.textAnimation;
+                if (anim) {
+                    const d = Math.max(1, anim.durationFrames);
+                    const localFrame = frame - clip.startFrame;
+                    if (anim.in === 'fade') {
+                        resolvedOpacity = Math.min(resolvedOpacity, Math.min(1, localFrame / d));
+                    }
+                    if (anim.out === 'fade') {
+                        resolvedOpacity = Math.min(resolvedOpacity, Math.min(1, (clip.durationFrames - localFrame) / d));
+                    }
+                }
+                const active = {
+                    type: 'text',
+                    id: clip.id,
+                    trackId: clip.trackId,
+                    name: clip.name,
+                    content: clip.content ?? '',
+                    sourceFrame,
+                    opacity: resolvedOpacity,
+                    zIndex,
+                    ...(clip.transform ? { transform: clip.transform } : {}),
+                    ...(clip.fontSize !== undefined ? { fontSize: clip.fontSize } : {}),
+                    ...(clip.color !== undefined ? { color: clip.color } : {}),
+                    ...(clip.fontFamily !== undefined ? { fontFamily: clip.fontFamily } : {}),
+                    ...(clip.fontWeight !== undefined ? { fontWeight: clip.fontWeight } : {}),
+                    ...(clip.textAlign !== undefined ? { textAlign: clip.textAlign } : {}),
+                };
+                scene.texts.push(active);
+            }
+            else if (clip.type === 'image' && clip.src) {
+                const active = {
+                    type: 'image',
+                    id: clip.id,
+                    trackId: clip.trackId,
+                    name: clip.name,
+                    src: clip.src,
+                    sourceFrame,
+                    opacity,
+                    zIndex,
+                    ...(clip.transform ? { transform: clip.transform } : {}),
+                };
+                scene.images.push(active);
+            }
+        }
+    }
+    for (const transition of project.transitions) {
+        if (frame < transition.startFrame)
+            continue;
+        if (frame >= transition.startFrame + transition.durationFrames)
+            continue;
+        const rawT = (frame - transition.startFrame) / Math.max(1, transition.durationFrames);
+        const t = applyEasing(rawT, transition.easing);
+        const fromResult = findClipById(project.clips, transition.fromClipId);
+        const toResult = findClipById(project.clips, transition.toClipId);
+        if (!fromResult || !toResult)
+            continue;
+        const { clip: fromClip } = fromResult;
+        const { clip: toClip } = toResult;
+        const fromZIndex = (maxOrder - (project.tracks.find((tr) => tr.id === transition.trackId)?.order ?? 0)) * 1000;
+        const toZIndex = fromZIndex + 1;
+        const fromSourceFrame = Math.min(Math.max(0, frame - fromClip.startFrame + fromClip.sourceStartFrame), fromClip.sourceDurationFrames - 1);
+        const toSourceFrame = Math.max(0, Math.min(frame - toClip.startFrame + toClip.sourceStartFrame, toClip.sourceDurationFrames - 1));
+        const fromOpacity = 0;
+        const toOpacity = 1;
+        const toTrackMuted = project.tracks.find((tr) => tr.id === toClip.trackId)?.muted ?? false;
+        if (fromClip.type === 'video' && fromClip.src) {
+            const existing = scene.videos.find((v) => v.id === fromClip.id);
+            if (existing) {
+                existing.opacity = fromOpacity;
+                existing.sourceFrame = fromSourceFrame;
+            }
+            else {
+                scene.videos.push({
+                    type: 'video',
+                    id: fromClip.id,
+                    trackId: fromClip.trackId,
+                    name: fromClip.name,
+                    src: fromClip.src,
+                    sourceFrame: fromSourceFrame,
+                    opacity: fromOpacity,
+                    volume: 0,
+                    zIndex: fromZIndex,
+                    ...(fromClip.transform ? { transform: fromClip.transform } : {}),
+                });
+            }
+        }
+        if (toClip.type === 'video' && toClip.src) {
+            const existing = scene.videos.find((v) => v.id === toClip.id);
+            if (existing) {
+                existing.opacity = toOpacity;
+                existing.sourceFrame = toSourceFrame;
+            }
+            else {
+                scene.videos.push({
+                    type: 'video',
+                    id: toClip.id,
+                    trackId: toClip.trackId,
+                    name: toClip.name,
+                    src: toClip.src,
+                    sourceFrame: toSourceFrame,
+                    opacity: toOpacity,
+                    volume: toTrackMuted ? 0 : (toClip.volume ?? 1),
+                    zIndex: toZIndex,
+                    ...(toClip.transform ? { transform: toClip.transform } : {}),
+                });
+            }
+        }
+        if (fromClip.type === 'image' && fromClip.src) {
+            const existing = scene.images.find((v) => v.id === fromClip.id);
+            if (existing) {
+                existing.opacity = fromOpacity;
+            }
+            else {
+                scene.images.push({
+                    type: 'image',
+                    id: fromClip.id,
+                    trackId: fromClip.trackId,
+                    name: fromClip.name,
+                    src: fromClip.src,
+                    sourceFrame: fromSourceFrame,
+                    opacity: fromOpacity,
+                    zIndex: fromZIndex,
+                    ...(fromClip.transform ? { transform: fromClip.transform } : {}),
+                });
+            }
+        }
+        if (toClip.type === 'image' && toClip.src) {
+            const existing = scene.images.find((v) => v.id === toClip.id);
+            if (existing) {
+                existing.opacity = toOpacity;
+            }
+            else {
+                scene.images.push({
+                    type: 'image',
+                    id: toClip.id,
+                    trackId: toClip.trackId,
+                    name: toClip.name,
+                    src: toClip.src,
+                    sourceFrame: toSourceFrame,
+                    opacity: toOpacity,
+                    zIndex: toZIndex,
+                    ...(toClip.transform ? { transform: toClip.transform } : {}),
+                });
+            }
+        }
+        scene.transitions.push({
+            id: transition.id,
+            kind: transition.kind,
+            t,
+            direction: transition.direction,
+            fromClipId: transition.fromClipId,
+            toClipId: transition.toClipId,
+        });
+    }
+    const byDepth = (a, b) => a.zIndex - b.zIndex;
+    scene.videos.sort(byDepth);
+    scene.audios.sort(byDepth);
+    scene.texts.sort(byDepth);
+    scene.images.sort(byDepth);
+    return scene;
+}

package/dist/resolver/scene.d.ts

@@ -0,0 +1,54 @@
+import type { Transform, TransitionKind, TransitionDirection } from '../types';
+export interface ActiveClipBase {
+    id: string;
+    trackId: string;
+    name: string;
+    sourceFrame: number;
+    opacity: number;
+    zIndex: number;
+    transform?: Transform;
+}
+export interface ActiveVideoClip extends ActiveClipBase {
+    type: 'video';
+    src: string;
+    volume: number;
+}
+export interface ActiveAudioClip extends ActiveClipBase {
+    type: 'audio';
+    src: string;
+    volume: number;
+}
+export interface ActiveTextClip extends ActiveClipBase {
+    type: 'text';
+    content: string;
+    fontSize?: number;
+    color?: string;
+    fontFamily?: string;
+    fontWeight?: 'normal' | 'bold';
+    textAlign?: 'left' | 'center' | 'right';
+}
+export interface ActiveImageClip extends ActiveClipBase {
+    type: 'image';
+    src: string;
+}
+export interface ActiveTransition {
+    id: string;
+    kind: TransitionKind;
+    t: number;
+    direction?: TransitionDirection;
+    fromClipId: string;
+    toClipId: string;
+}
+export interface Scene {
+    frame: number;
+    fps: number;
+    stage: {
+        width: number;
+        height: number;
+    };
+    videos: ActiveVideoClip[];
+    audios: ActiveAudioClip[];
+    texts: ActiveTextClip[];
+    images: ActiveImageClip[];
+    transitions: ActiveTransition[];
+}

package/dist/resolver/scene.js

@@ -0,0 +1 @@
+export {};

package/dist/stores/playback.store.d.ts

@@ -0,0 +1,50 @@
+export interface PlaybackState {
+    currentFrame: number;
+    currentFrameEpoch: number;
+    isPlaying: boolean;
+    playbackRate: number;
+    loop: boolean;
+    volume: number;
+    muted: boolean;
+    zoom: number;
+    snapEnabled: boolean;
+}
+export interface PlaybackActions {
+    setCurrentFrame: (frame: number) => void;
+    play: () => void;
+    pause: () => void;
+    togglePlayPause: () => void;
+    setPlaybackRate: (rate: number) => void;
+    toggleLoop: () => void;
+    setVolume: (volume: number) => void;
+    toggleMute: () => void;
+    setZoom: (zoom: number) => void;
+    toggleSnap: () => void;
+}
+export declare const usePlaybackStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<PlaybackState & PlaybackActions>, "setState" | "persist"> & {
+    setState(partial: (PlaybackState & PlaybackActions) | Partial<PlaybackState & PlaybackActions> | ((state: PlaybackState & PlaybackActions) => (PlaybackState & PlaybackActions) | Partial<PlaybackState & PlaybackActions>), replace?: false | undefined): unknown;
+    setState(state: (PlaybackState & PlaybackActions) | ((state: PlaybackState & PlaybackActions) => PlaybackState & PlaybackActions), replace: true): unknown;
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<PlaybackState & PlaybackActions, {
+            zoom: number;
+            volume: number;
+            muted: boolean;
+            playbackRate: number;
+            loop: boolean;
+            snapEnabled: boolean;
+        }, unknown>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: PlaybackState & PlaybackActions) => void) => () => void;
+        onFinishHydration: (fn: (state: PlaybackState & PlaybackActions) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<PlaybackState & PlaybackActions, {
+            zoom: number;
+            volume: number;
+            muted: boolean;
+            playbackRate: number;
+            loop: boolean;
+            snapEnabled: boolean;
+        }, unknown>>;
+    };
+}>;

package/dist/stores/playback.store.js

@@ -0,0 +1,42 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { toFrame } from '../utils/frames';
+export const usePlaybackStore = create()(persist((set) => ({
+    currentFrame: 0,
+    currentFrameEpoch: 0,
+    isPlaying: false,
+    playbackRate: 1,
+    loop: false,
+    volume: 1,
+    muted: false,
+    zoom: 4,
+    snapEnabled: true,
+    setCurrentFrame: (frame) => set((s) => {
+        const next = toFrame(frame);
+        return s.currentFrame === next
+            ? { currentFrameEpoch: s.currentFrameEpoch + 1 }
+            : {
+                currentFrame: next,
+                currentFrameEpoch: s.currentFrameEpoch + 1,
+            };
+    }),
+    play: () => set((s) => (s.isPlaying ? s : { isPlaying: true })),
+    pause: () => set((s) => (s.isPlaying ? { isPlaying: false } : s)),
+    togglePlayPause: () => set((s) => ({ isPlaying: !s.isPlaying })),
+    setPlaybackRate: (rate) => set({ playbackRate: rate }),
+    toggleLoop: () => set((s) => ({ loop: !s.loop })),
+    setVolume: (volume) => set({ volume: Math.max(0, Math.min(1, volume)) }),
+    toggleMute: () => set((s) => ({ muted: !s.muted })),
+    setZoom: (zoom) => set({ zoom: Math.max(0.02, Math.min(50, zoom)) }),
+    toggleSnap: () => set((s) => ({ snapEnabled: !s.snapEnabled })),
+}), {
+    name: 'myeditor-playback',
+    partialize: (s) => ({
+        zoom: s.zoom,
+        volume: s.volume,
+        muted: s.muted,
+        playbackRate: s.playbackRate,
+        loop: s.loop,
+        snapEnabled: s.snapEnabled,
+    }),
+}));

package/dist/stores/selection.store.d.ts

@@ -0,0 +1,12 @@
+export interface SelectionState {
+    selectedClipIds: Set<string>;
+    activeTrackId: string | null;
+}
+export interface SelectionActions {
+    selectClip: (clipId: string) => void;
+    toggleClipSelection: (clipId: string) => void;
+    selectClips: (clipIds: string[]) => void;
+    clearSelection: () => void;
+    setActiveTrack: (trackId: string | null) => void;
+}
+export declare const useSelectionStore: import("zustand").UseBoundStore<import("zustand").StoreApi<SelectionState & SelectionActions>>;

package/dist/stores/selection.store.js

@@ -0,0 +1,19 @@
+import { create } from 'zustand';
+export const useSelectionStore = create()((set) => ({
+    selectedClipIds: new Set(),
+    activeTrackId: null,
+    selectClip: (clipId) => set({ selectedClipIds: new Set([clipId]) }),
+    toggleClipSelection: (clipId) => set((s) => {
+        const next = new Set(s.selectedClipIds);
+        if (next.has(clipId)) {
+            next.delete(clipId);
+        }
+        else {
+            next.add(clipId);
+        }
+        return { selectedClipIds: next };
+    }),
+    selectClips: (clipIds) => set({ selectedClipIds: new Set(clipIds) }),
+    clearSelection: () => set({ selectedClipIds: new Set() }),
+    setActiveTrack: (trackId) => set({ activeTrackId: trackId }),
+}));

package/dist/stores/tracks.store.d.ts

@@ -0,0 +1,19 @@
+import type { Clip, Project, Track } from '../types';
+export interface TracksState {
+    tracks: Track[];
+    clips: Record<string, Clip[]>;
+    stage: {
+        width: number;
+        height: number;
+    };
+    totalFrames: number;
+    canUndo: boolean;
+    canRedo: boolean;
+}
+export interface TracksActions {
+    sync: (project: Project, meta: {
+        canUndo: boolean;
+        canRedo: boolean;
+    }) => void;
+}
+export declare const useTracksStore: import("zustand").UseBoundStore<import("zustand").StoreApi<TracksState & TracksActions>>;

package/dist/stores/tracks.store.js

@@ -0,0 +1,27 @@
+import { create } from 'zustand';
+export const useTracksStore = create()((set) => ({
+    tracks: [],
+    clips: {},
+    stage: { width: 1080, height: 1920 },
+    totalFrames: 0,
+    canUndo: false,
+    canRedo: false,
+    sync: (project, meta) => {
+        let max = 0;
+        for (const trackClips of Object.values(project.clips)) {
+            for (const c of trackClips) {
+                const end = c.startFrame + c.durationFrames;
+                if (end > max)
+                    max = end;
+            }
+        }
+        set({
+            tracks: project.tracks,
+            clips: project.clips,
+            stage: project.stage,
+            totalFrames: max,
+            canUndo: meta.canUndo,
+            canRedo: meta.canRedo,
+        });
+    },
+}));

package/dist/stores/transitions.store.d.ts

@@ -0,0 +1,9 @@
+import type { Transition, Project } from '../types';
+interface TransitionsState {
+    transitions: Transition[];
+}
+interface TransitionsActions {
+    sync: (project: Project) => void;
+}
+export declare const useTransitionsStore: import("zustand").UseBoundStore<import("zustand").StoreApi<TransitionsState & TransitionsActions>>;
+export {};

package/dist/stores/transitions.store.js

@@ -0,0 +1,7 @@
+import { create } from 'zustand';
+export const useTransitionsStore = create()((set) => ({
+    transitions: [],
+    sync: (project) => {
+        set({ transitions: project.transitions });
+    },
+}));

package/dist/track/track.d.ts

@@ -0,0 +1,8 @@
+import type { Track, TrackKind } from '../types';
+export interface CreateTrackOptions {
+    kind: TrackKind;
+    name?: string;
+    order?: number;
+    height?: number;
+}
+export declare function createTrack(options: CreateTrackOptions): Track;

package/dist/track/track.js

@@ -0,0 +1,19 @@
+import { generateId } from '../utils/id';
+export function createTrack(options) {
+    return {
+        id: generateId(),
+        name: options.name ??
+            (options.kind === 'video'
+                ? 'Video'
+                : options.kind === 'audio'
+                    ? 'Audio'
+                    : 'Text'),
+        kind: options.kind,
+        order: options.order ?? 0,
+        height: options.height ?? 64,
+        locked: false,
+        disabled: false,
+        muted: false,
+        solo: false,
+    };
+}

package/dist/types/index.d.ts

@@ -0,0 +1,117 @@
+export type FrameCount = number;
+export type TextAnimationKind = 'fade';
+export interface TextAnimation {
+    in?: TextAnimationKind;
+    out?: TextAnimationKind;
+    durationFrames: number;
+}
+export interface Transform {
+    x: number;
+    y: number;
+    scale: number;
+    rotation: number;
+    anchor: {
+        x: number;
+        y: number;
+    };
+}
+export type ClipType = 'video' | 'audio' | 'text' | 'image';
+export type TrackKind = 'video' | 'audio' | 'text';
+export interface Clip {
+    id: string;
+    trackId: string;
+    type: ClipType;
+    name: string;
+    startFrame: FrameCount;
+    durationFrames: FrameCount;
+    sourceStartFrame: FrameCount;
+    sourceDurationFrames: FrameCount;
+    src?: string;
+    assetId?: string;
+    content?: string;
+    fontSize?: number;
+    color?: string;
+    fontFamily?: string;
+    fontWeight?: 'normal' | 'bold';
+    textAlign?: 'left' | 'center' | 'right';
+    volume?: number;
+    opacity?: number;
+    locked?: boolean;
+    disabled?: boolean;
+    transform?: Transform;
+    textAnimation?: TextAnimation;
+}
+export interface Track {
+    id: string;
+    name: string;
+    kind: TrackKind;
+    order: number;
+    height: number;
+    locked: boolean;
+    disabled: boolean;
+    muted: boolean;
+    solo: boolean;
+}
+export interface Project {
+    id: string;
+    fps: number;
+    stage: {
+        width: number;
+        height: number;
+    };
+    tracks: Track[];
+    clips: Record<string, Clip[]>;
+    transitions: Transition[];
+    version: number;
+}
+export interface InitialTrackConfig {
+    kind: TrackKind;
+    name?: string;
+}
+export interface TimelineConfig {
+    fps: number;
+    stage?: {
+        width: number;
+        height: number;
+    };
+    defaultTrackHeight?: number;
+    maxHistorySize?: number;
+    initialTracks?: InitialTrackConfig[];
+}
+export type TransitionKind = 'fade' | 'slide' | 'wipe';
+export type TransitionEasing = 'linear' | 'ease-in' | 'ease-out';
+export type TransitionDirection = 'left' | 'right' | 'up' | 'down';
+export interface Transition {
+    id: string;
+    kind: TransitionKind;
+    fromClipId: string;
+    toClipId: string;
+    trackId: string;
+    startFrame: FrameCount;
+    durationFrames: FrameCount;
+    direction?: TransitionDirection;
+    easing?: TransitionEasing;
+}
+export type EngineEvent = 'change' | 'track:added' | 'track:removed' | 'clip:added' | 'clip:removed' | 'clip:updated' | 'clip:split' | 'transition:added' | 'transition:removed' | 'history:change';
+export type EngineEventPayload = {
+    change: Project;
+    'track:added': Track;
+    'track:removed': string;
+    'clip:added': Clip;
+    'clip:removed': {
+        clipId: string;
+        trackId: string;
+    };
+    'clip:updated': Clip;
+    'clip:split': {
+        leftId: string;
+        rightId: string;
+        trackId: string;
+    };
+    'transition:added': Transition;
+    'transition:removed': string;
+    'history:change': {
+        canUndo: boolean;
+        canRedo: boolean;
+    };
+};

package/dist/types/index.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/frames.d.ts

@@ -0,0 +1,20 @@
+import type { Clip } from '../types';
+export declare function toFrame(value: number): number;
+export declare function secondsToFrames(seconds: number, fps: number): number;
+export declare function framesToSeconds(frames: number, fps: number): number;
+export declare function framesToTimecode(frames: number, fps: number): string;
+export declare function getTotalFrames(clips: Record<string, Array<{
+    startFrame: number;
+    durationFrames: number;
+}>>): number;
+export declare function clipsOverlap(a: {
+    startFrame: number;
+    durationFrames: number;
+}, b: {
+    startFrame: number;
+    durationFrames: number;
+}): boolean;
+export declare function findOverlaps(trackClips: Clip[], candidate: {
+    startFrame: number;
+    durationFrames: number;
+}, excludeId?: string): Clip[];