@shotstack/shotstack-studio 1.4.1 → 1.5.0

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import { Container } from 'pixi.js';
 import * as pixi from 'pixi.js';
 import { z } from 'zod';
 import * as zod from 'zod';
@@ -45,6 +46,7 @@ export declare class Canvas {
     private readonly inspector;
     private container?;
     private background?;
+    private timeline?;
     private minZoom;
     private maxZoom;
     private currentZoom;
@@ -54,14 +56,30 @@ export declare class Canvas {
     centerEdit(): void;
     zoomToFit(): void;
     setZoom(zoom: number): void;
+    registerTimeline(timeline: Timeline): void;
     private registerExtensions;
     private configureApplication;
     private onTick;
     private configureStage;
     private onClick;
+    private onBackgroundClick;
     dispose(): void;
 }
 
+declare type Clip = zod.infer<typeof ClipSchema>;
+
+declare type ClipConfig = z.infer<typeof ClipSchema>;
+
+declare interface ClipInfo {
+    trackIndex: number;
+    clipIndex: number;
+    clipConfig: ClipConfig;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+
 declare const ClipSchema: zod.ZodObject<{
     asset: zod.ZodEffects<zod.ZodUnion<[zod.ZodObject<{
         type: zod.ZodLiteral<"text">;
@@ -1241,6 +1259,34 @@ declare const ClipSchema: zod.ZodObject<{
 
 declare type ClipType = z.infer<typeof ClipSchema>;
 
+declare type ClipType_2 = z.infer<typeof ClipSchema>;
+
+declare type CommandContext = {
+    getClips(): Player[];
+    getTracks(): Player[][];
+    getTrack(trackIndex: number): Player[] | null;
+    getContainer(): Container;
+    addPlayer(trackIdx: number, player: Player): Promise<void>;
+    addPlayerToContainer(trackIdx: number, player: Player): void;
+    createPlayerFromAssetType(clipConfiguration: ClipType_2): Player;
+    queueDisposeClip(player: Player): void;
+    disposeClips(): void;
+    undeleteClip(trackIdx: number, clip: Player): void;
+    setUpdatedClip(clip: Player): void;
+    restoreClipConfiguration(clip: Player, previousConfig: ClipType_2): void;
+    updateDuration(): void;
+    emitEvent(name: string, data: unknown): void;
+    findClipIndices(player: Player): {
+        trackIndex: number;
+        clipIndex: number;
+    } | null;
+    getClipAt(trackIndex: number, clipIndex: number): Player | null;
+    getSelectedClip(): Player | null;
+    setSelectedClip(clip: Player | null): void;
+    movePlayerToTrackContainer(player: Player, fromTrackIdx: number, toTrackIdx: number): void;
+    getEditState(): EditType_2;
+};
+
 export declare class Controls {
     private edit;
     private seekDistance;
@@ -1252,6 +1298,10 @@ export declare class Controls {
     private handleKeyUp;
 }
 
+declare type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+
 export declare class Edit extends Entity {
     private static readonly ZIndexPadding;
     assetLoader: AssetLoader;
@@ -1274,13 +1324,16 @@ export declare class Edit extends Entity {
     getEdit(): EditType;
     addClip(trackIdx: number, clip: ClipType): void;
     getClip(trackIdx: number, clipIdx: number): ClipType | null;
+    getPlayerClip(trackIdx: number, clipIdx: number): Player | null;
     deleteClip(trackIdx: number, clipIdx: number): void;
+    splitClip(trackIndex: number, clipIndex: number, splitTime: number): void;
     addTrack(trackIdx: number, track: TrackType): void;
     getTrack(trackIdx: number): TrackType | null;
     deleteTrack(trackIdx: number): void;
     getTotalDuration(): number;
     undo(): void;
     redo(): void;
+    executeEditCommand(command: EditCommand): void | Promise<void>;
     private executeCommand;
     private createCommandContext;
     private queueDisposeClip;
@@ -1289,10 +1342,34 @@ export declare class Edit extends Entity {
     private unloadClipAssets;
     protected clearClips(): void;
     private updateTotalDuration;
+    private addPlayerToContainer;
+    private movePlayerToTrackContainer;
     private createPlayerFromAssetType;
     private addPlayer;
+    selectClip(trackIndex: number, clipIndex: number): void;
+    clearSelection(): void;
+    isClipSelected(trackIndex: number, clipIndex: number): boolean;
+    getSelectedClipInfo(): {
+        trackIndex: number;
+        clipIndex: number;
+        player: Player;
+    } | null;
+    findClipIndices(player: Player): {
+        trackIndex: number;
+        clipIndex: number;
+    } | null;
+    getClipAt(trackIndex: number, clipIndex: number): Player | null;
+    selectPlayer(player: Player): void;
+    isPlayerSelected(player: Player): boolean;
+    private setupIntentListeners;
 }
 
+declare type EditCommand = {
+    execute(context?: CommandContext): void | Promise<void>;
+    undo?(context?: CommandContext): void | Promise<void>;
+    readonly name: string;
+};
+
 declare const EditSchema: zod.ZodObject<{
     timeline: zod.ZodObject<{
         background: zod.ZodOptional<zod.ZodString>;
@@ -3494,6 +3571,10 @@ declare const EditSchema: zod.ZodObject<{
 
 declare type EditType = z.infer<typeof EditSchema>;
 
+declare type EditType_2 = z.infer<typeof EditSchema>;
+
+declare type EditType_3 = z.infer<typeof EditSchema>;
+
 declare abstract class Entity {
     private readonly container;
     constructor();
@@ -3513,11 +3594,328 @@ declare type EventPayloadMap<TPayload = any> = Record<string, TPayload>;
 
 declare type Listener<TPayload = any> = (payload: TPayload) => void;
 
+/**
+ * TODO: Move handles on UI level (screen space)
+ * TODO: Handle overlapping frames - ex: length of a clip is 1.5s but there's an in (1s) and out (1s) transition
+ * TODO: Scale X and Y needs to be implemented separately for getFitScale cover
+ * TODO: Move animation effects and transitions out of player
+ * TODO: On pointer down and custom keyframe, add a keyframe at the current time. Get current and time and push a keyframe into the state, and then reconfigure the keyframes.
+ * TODO: Move bounding box to a separate entity
+ */
+declare abstract class Player extends Entity {
+    private static readonly SnapThreshold;
+    private static readonly DiscardedFrameCount;
+    private static readonly ScaleHandleRadius;
+    private static readonly RotationHandleRadius;
+    private static readonly RotationHandleOffset;
+    private static readonly OutlineWidth;
+    private static readonly MinScale;
+    private static readonly MaxScale;
+    layer: number;
+    shouldDispose: boolean;
+    protected edit: Edit;
+    clipConfiguration: Clip;
+    private positionBuilder;
+    private offsetXKeyframeBuilder?;
+    private offsetYKeyframeBuilder?;
+    private scaleKeyframeBuilder?;
+    private opacityKeyframeBuilder?;
+    private rotationKeyframeBuilder?;
+    private outline;
+    private topLeftScaleHandle;
+    private topRightScaleHandle;
+    private bottomLeftScaleHandle;
+    private bottomRightScaleHandle;
+    private rotationHandle;
+    private isHovering;
+    private isDragging;
+    private dragOffset;
+    private scaleDirection;
+    private scaleStart;
+    private scaleOffset;
+    private isRotating;
+    private rotationStart;
+    private rotationOffset;
+    private initialClipConfiguration;
+    protected contentContainer: pixi.Container;
+    constructor(edit: Edit, clipConfiguration: Clip);
+    reconfigureAfterRestore(): void;
+    protected configureKeyframes(): void;
+    load(): Promise<void>;
+    update(_: number, __: number): void;
+    draw(): void;
+    dispose(): void;
+    getStart(): number;
+    getLength(): number;
+    getEnd(): number;
+    getPlaybackTime(): number;
+    abstract getSize(): Size;
+    getOpacity(): number;
+    getPosition(): Vector;
+    getPivot(): Vector;
+    protected getFitScale(): number;
+    getScale(): number;
+    getRotation(): number;
+    isActive(): boolean;
+    shouldDiscardFrame(): boolean;
+    private onPointerStart;
+    private onPointerMove;
+    private onPointerUp;
+    private onPointerOver;
+    private onPointerOut;
+    private clipHasPresets;
+    private clipHasKeyframes;
+    private hasStateChanged;
+}
+
+declare interface SelectionBounds {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    cornerRadius: number;
+    borderWidth: number;
+}
+
+declare class SelectionOverlayRenderer {
+    private overlay;
+    private theme;
+    private selectionGraphics;
+    constructor(overlay: pixi.Container, theme: TimelineTheme);
+    renderSelection(clipId: string, bounds: SelectionBounds, isSelected: boolean): void;
+    clearSelection(clipId: string): void;
+    clearAllSelections(): void;
+    updateTheme(theme: TimelineTheme): void;
+    getOverlay(): pixi.Container;
+    dispose(): void;
+}
+
 declare type Size = {
     width: number;
     height: number;
 };
 
+export declare class Timeline extends Entity {
+    private edit;
+    private currentEditType;
+    private layout;
+    private theme;
+    private lastPlaybackTime;
+    private static readonly TIMELINE_BUFFER_MULTIPLIER;
+    private interaction;
+    private dragPreviewManager;
+    private viewportManager;
+    private visualTrackManager;
+    private eventHandler;
+    private renderer;
+    private featureManager;
+    private optionsManager;
+    constructor(edit: Edit, size: {
+        width: number;
+        height: number;
+    }, themeOptions?: TimelineThemeOptions);
+    private initializeManagers;
+    load(): Promise<void>;
+    private setupViewport;
+    private setupTimelineFeatures;
+    private recreateTimelineFeatures;
+    setScroll(x: number, y: number): void;
+    setZoom(zoom: number): void;
+    getViewport(): {
+        x: number;
+        y: number;
+        zoom: number;
+    };
+    getClipData(trackIndex: number, clipIndex: number): ClipConfig | null;
+    getLayout(): TimelineLayout;
+    getVisualTracks(): VisualTrack[];
+    getEdit(): Edit;
+    getExtendedTimelineWidth(): number;
+    hideDragGhost(): void;
+    showDragGhost(trackIndex: number, time: number, freeY?: number): void;
+    setPlayheadTime(time: number): void;
+    getPlayheadTime(): number;
+    getActualEditDuration(): number;
+    findClipAtPosition(x: number, y: number): ClipInfo | null;
+    setTheme(themeOptions: TimelineThemeOptions): void;
+    getTheme(): TimelineTheme;
+    getCurrentEditType(): EditType_3 | null;
+    getOptions(): TimelineOptions;
+    setOptions(options: Partial<TimelineOptions>): void;
+    getTimeDisplay(): {
+        updateTimeDisplay(): void;
+    };
+    updateTime(time: number, emit?: boolean): void;
+    get timeRange(): {
+        startTime: number;
+        endTime: number;
+    };
+    get viewportHeight(): number;
+    get zoomLevelIndex(): number;
+    zoomIn(): void;
+    zoomOut(): void;
+    private onZoomChanged;
+}
+
+declare class TimelineLayout {
+    private options;
+    private theme?;
+    static readonly TOOLBAR_HEIGHT_RATIO: 0.12;
+    static readonly RULER_HEIGHT_RATIO: 0.133;
+    static readonly TOOLBAR_HEIGHT_DEFAULT: 36;
+    static readonly RULER_HEIGHT_DEFAULT: 40;
+    static readonly TRACK_HEIGHT_DEFAULT: 80;
+    static readonly CLIP_PADDING: 4;
+    static readonly BORDER_WIDTH: 2;
+    static readonly CORNER_RADIUS: 4;
+    static readonly LABEL_PADDING: 8;
+    static readonly TRACK_PADDING: 2;
+    private config;
+    constructor(options: Required<TimelineOptions>, theme?: TimelineTheme | undefined);
+    private calculateLayout;
+    get toolbarHeight(): number;
+    get toolbarY(): number;
+    get rulerHeight(): number;
+    get trackHeight(): number;
+    get rulerY(): number;
+    get tracksY(): number;
+    get gridY(): number;
+    get playheadY(): number;
+    get viewportY(): number;
+    positionTrack(trackIndex: number): number;
+    positionClip(startTime: number): number;
+    calculateClipWidth(duration: number): number;
+    calculateDropPosition(globalX: number, globalY: number): {
+        track: number;
+        time: number;
+        x: number;
+        y: number;
+    };
+    getTrackAtY(y: number): number;
+    getTimeAtX(x: number): number;
+    getXAtTime(time: number): number;
+    getYAtTrack(trackIndex: number): number;
+    getGridHeight(): number;
+    getRulerWidth(): number;
+    getGridWidth(): number;
+    calculateViewportPosition(scrollX: number, scrollY: number): {
+        x: number;
+        y: number;
+    };
+    updateOptions(options: Required<TimelineOptions>, theme?: TimelineTheme): void;
+    isPointInToolbar(_x: number, y: number): boolean;
+    isPointInRuler(_x: number, y: number): boolean;
+    isPointInTracks(_x: number, y: number): boolean;
+    getVisibleTrackRange(scrollY: number, viewportHeight: number): {
+        start: number;
+        end: number;
+    };
+}
+
+declare interface TimelineOptions {
+    width?: number;
+    height?: number;
+    pixelsPerSecond?: number;
+    trackHeight?: number;
+    backgroundColor?: number;
+    antialias?: boolean;
+    resolution?: number;
+}
+
+export declare interface TimelineTheme {
+    timeline: {
+        background: number;
+        divider: number;
+        toolbar: {
+            background: number;
+            surface: number;
+            hover: number;
+            active: number;
+            divider: number;
+            icon: number;
+            text: number;
+            height: number;
+        };
+        ruler: {
+            background: number;
+            text: number;
+            markers: number;
+            height: number;
+        };
+        tracks: {
+            surface: number;
+            surfaceAlt: number;
+            border: number;
+            height: number;
+        };
+        clips: {
+            video: number;
+            audio: number;
+            image: number;
+            text: number;
+            shape: number;
+            html: number;
+            luma: number;
+            default: number;
+            selected: number;
+            radius: number;
+        };
+        playhead: number;
+        snapGuide: number;
+        dropZone: number;
+        trackInsertion: number;
+    };
+}
+
+export declare interface TimelineThemeInput {
+    timeline: {
+        background: string;
+        divider: string;
+        toolbar: {
+            background: string;
+            surface: string;
+            hover: string;
+            active: string;
+            divider: string;
+            icon: string;
+            text: string;
+            height?: number;
+        };
+        ruler: {
+            background: string;
+            text: string;
+            markers: string;
+            height?: number;
+        };
+        tracks: {
+            surface: string;
+            surfaceAlt: string;
+            border: string;
+            height?: number;
+        };
+        clips: {
+            video: string;
+            audio: string;
+            image: string;
+            text: string;
+            shape: string;
+            html: string;
+            luma: string;
+            default: string;
+            selected: string;
+            radius?: number;
+        };
+        playhead: string;
+        snapGuide: string;
+        dropZone: string;
+        trackInsertion: string;
+    };
+}
+
+declare interface TimelineThemeOptions {
+    theme?: TimelineThemeInput | DeepPartial<TimelineThemeInput>;
+}
+
 declare const TrackSchema: zod.ZodObject<{
     clips: zod.ZodArray<zod.ZodObject<{
         asset: zod.ZodEffects<zod.ZodUnion<[zod.ZodObject<{
@@ -5011,6 +5409,13 @@ declare const TrackSchema: zod.ZodObject<{
 
 declare type TrackType = z.infer<typeof TrackSchema>;
 
+declare type TrackType_2 = z.infer<typeof TrackSchema>;
+
+declare type Vector = {
+    x: number;
+    y: number;
+};
+
 export declare class VideoExporter {
     private readonly ffmpeg;
     private isReady;
@@ -5027,4 +5432,97 @@ export declare class VideoExporter {
     private removeProgressOverlay;
 }
 
+declare class VisualClip extends Entity {
+    private clipConfig;
+    private options;
+    private graphics;
+    private background;
+    private text;
+    private selectionRenderer;
+    private lastGlobalX;
+    private lastGlobalY;
+    private readonly CLIP_PADDING;
+    private readonly BORDER_WIDTH;
+    private get CORNER_RADIUS();
+    constructor(clipConfig: ClipConfig, options: VisualClipOptions);
+    load(): Promise<void>;
+    private setupContainer;
+    private setupGraphics;
+    updateFromConfig(newConfig: ClipConfig): void;
+    private setVisualState;
+    private getEffectiveWidth;
+    private drawClipBackground;
+    private drawClipBorder;
+    private updateSelectionState;
+    private getClipColor;
+    private getStateStyles;
+    setSelected(selected: boolean): void;
+    setDragging(dragging: boolean): void;
+    setResizing(resizing: boolean): void;
+    setPreviewWidth(width: number | null): void;
+    setPixelsPerSecond(pixelsPerSecond: number): void;
+    updateOptions(updates: Partial<VisualClipOptions>): void;
+    getClipConfig(): ClipConfig;
+    getOptions(): VisualClipOptions;
+    getVisualState(): {
+        mode: "normal" | "selected" | "dragging" | "resizing";
+        previewWidth?: number;
+    };
+    getSelected(): boolean;
+    getClipId(): string;
+    getDragging(): boolean;
+    getRightEdgeX(): number;
+}
+
+declare interface VisualClipOptions {
+    pixelsPerSecond: number;
+    trackHeight: number;
+    trackIndex: number;
+    clipIndex: number;
+    theme: TimelineTheme;
+    selectionRenderer?: SelectionOverlayRenderer;
+}
+
+declare class VisualTrack extends Entity {
+    private clips;
+    private options;
+    private background;
+    private readonly TRACK_PADDING;
+    private readonly LABEL_PADDING;
+    constructor(options: VisualTrackOptions);
+    load(): Promise<void>;
+    private setupContainer;
+    rebuildFromTrackData(trackData: TrackType_2, pixelsPerSecond: number): void;
+    private addClip;
+    private clearAllClips;
+    removeClip(clipIndex: number): void;
+    updateClip(clipIndex: number, newClipConfig: ClipConfig): void;
+    setPixelsPerSecond(pixelsPerSecond: number): void;
+    setWidth(width: number): void;
+    setTrackIndex(trackIndex: number): void;
+    selectClip(clipIndex: number): void;
+    clearAllSelections(): void;
+    getSelectedClip(): VisualClip | null;
+    getSelectedClipIndex(): number;
+    getClips(): VisualClip[];
+    getClip(clipIndex: number): VisualClip | null;
+    getClipCount(): number;
+    getTrackIndex(): number;
+    getTrackHeight(): number;
+    getOptions(): VisualTrackOptions;
+    findClipAtPosition(x: number, y: number): {
+        clip: VisualClip;
+        clipIndex: number;
+    } | null;
+}
+
+declare interface VisualTrackOptions {
+    pixelsPerSecond: number;
+    trackHeight: number;
+    trackIndex: number;
+    width: number;
+    theme: TimelineTheme;
+    selectionRenderer?: SelectionOverlayRenderer;
+}
+
 export { }