@shotstack/shotstack-studio 1.3.0 → 1.4.1

package/package.json

@@ -5,7 +5,7 @@
 		"cpuccino",
 		"dazzatron"
 	],
-	"version": "1.3.0",
+	"version": "1.4.1",
 	"description": "A video editing library for creating and editing videos with Shotstack",
 	"type": "module",
 	"main": "dist/shotstack-studio.umd.js",
@@ -28,7 +28,7 @@
 		"url": "https://github.com/shotstack/shotstack-studio-sdk"
 	},
 	"scripts": {
-		"build": "vite build && tsc --emitDeclarationOnly",
+		"build": "vite build",
 		"prepublishOnly": "npm run build"
 	},
 	"peerDependencies": {
@@ -46,7 +46,8 @@
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-import": "^2.31.0",
 		"typescript": "^5.6.2",
-		"vite": "^5.4.10"
+		"vite": "^5.4.10",
+		"vite-plugin-dts": "^4.5.4"
 	},
 	"dependencies": {
 		"howler": "^2.2.4",

package/readme.md

@@ -109,6 +109,10 @@ edit.addTrack(1, { clips: [] });
 edit.deleteClip(0, 0);
 edit.deleteTrack(1);
 
+// Undo/Redo
+edit.undo();
+edit.redo();
+
 // Get edit information
 const clip = edit.getClip(0, 0);
 const track = edit.getTrack(0);
@@ -174,6 +178,8 @@ await controls.load();
 // Shift + Arrow - Seek larger amount
 // Comma - Step backward one frame
 // Period - Step forward one frame
+// Cmd/Ctrl + Z - Undo
+// Cmd/Ctrl + Shift + Z - Redo
 ```
 
 ### VideoExporter
@@ -277,11 +283,15 @@ Creates a new Edit instance with the specified dimensions and background color.
 - `getTrack(trackIdx: number)` - Get a track by index
 - `deleteTrack(trackIdx: number)` - Delete a track
 - `getEdit()` - Get the full edit configuration as a JSON object
+- `undo()` - Undo the last editing operation
+- `redo()` - Redo the last undone operation
 
 #### Events
 
 - `clip:selected` - Triggered when a clip is selected
 - `clip:updated` - Triggered when a clip is modified
+- `edit:undo` - Triggered when an undo operation is performed
+- `edit:redo` - Triggered when a redo operation is performed
 
 ### Canvas
 

package/dist/core/animations/curve-interpolator.d.ts

@@ -1,6 +0,0 @@
-export declare class CurveInterpolator {
-    private curves;
-    constructor();
-    private initializeCurves;
-    getValue(from: number, to: number, progress: number, easing?: string): number;
-}

package/dist/core/animations/effect-preset-builder.d.ts

@@ -1,18 +0,0 @@
-import { type Size } from "../layouts/geometry";
-import { type Clip } from "../schemas/clip";
-import { type Keyframe } from "../schemas/keyframe";
-export type EffectKeyframeSet = {
-    offsetXKeyframes: Keyframe[];
-    offsetYKeyframes: Keyframe[];
-    opacityKeyframes: Keyframe[];
-    scaleKeyframes: Keyframe[];
-    rotationKeyframes: Keyframe[];
-};
-export declare class EffectPresetBuilder {
-    private clipConfiguration;
-    constructor(clipConfiguration: Clip);
-    build(editSize: Size, clipSize: Size): EffectKeyframeSet;
-    private getPresetName;
-    private getZoomSpeed;
-    private getSlideStart;
-}

package/dist/core/animations/keyframe-builder.d.ts

@@ -1,12 +0,0 @@
-import { type Keyframe } from "../schemas/keyframe";
-export declare class KeyframeBuilder {
-    private readonly property;
-    private readonly length;
-    private readonly cubicBuilder;
-    constructor(value: Keyframe[] | number, length: number, initialValue?: number);
-    getValue(time: number): number;
-    private createKeyframes;
-    private createNormalizedKeyframes;
-    private validateKeyframes;
-    private insertFillerKeyframes;
-}

package/dist/core/animations/transition-preset-builder.d.ts

@@ -1,20 +0,0 @@
-import { type Clip } from "../schemas/clip";
-import { type Keyframe } from "../schemas/keyframe";
-export type TransitionKeyframeSet = {
-    offsetXKeyframes: Keyframe[];
-    offsetYKeyframes: Keyframe[];
-    opacityKeyframes: Keyframe[];
-    scaleKeyframes: Keyframe[];
-    rotationKeyframes: Keyframe[];
-};
-export declare class TransitionPresetBuilder {
-    private clipConfiguration;
-    constructor(clipConfiguration: Clip);
-    build(): TransitionKeyframeSet;
-    private buildInPreset;
-    private buildOutPreset;
-    private getInPresetName;
-    private getOutPresetName;
-    private getInPresetLength;
-    private getOutPresetLength;
-}

package/dist/core/entities/base/entity.d.ts

@@ -1,5 +0,0 @@
-export declare abstract class Entity {
-    private readonly container;
-    constructor();
-    abstract load(): Promise<void>;
-}

package/dist/core/entities/base/player.d.ts

@@ -1,75 +0,0 @@
-import { type Size, type Vector } from "../../layouts/geometry";
-import { type Clip } from "../../schemas/clip";
-import { type Edit } from "../system/edit";
-import { Entity } from "./entity";
-/**
- * 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
- */
-export 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;
-    constructor(edit: Edit, clipConfiguration: Clip);
-    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;
-}

package/dist/core/entities/index.d.ts

@@ -1,14 +0,0 @@
-export { Entity } from './base/entity';
-export { Player } from './base/player';
-export { AudioPlayer } from './players/audio-player';
-export { HtmlPlayer } from './players/html-player';
-export { ImagePlayer } from './players/image-player';
-export { LumaPlayer } from './players/luma-player';
-export { ShapePlayer } from './players/shape-player';
-export { TextPlayer } from './players/text-player';
-export { VideoPlayer } from './players/video-player';
-export { TextCursor } from './text/text-cursor';
-export { TextEditor } from './text/text-editor';
-export { TextInputHandler } from './text/text-input-handler';
-export { Edit } from './system/edit';
-export { Inspector } from './system/inspector';

package/dist/core/entities/players/audio-player.d.ts

@@ -1,17 +0,0 @@
-import { type Size } from "../../layouts/geometry";
-import { type Clip } from "../../schemas/clip";
-import { Player } from "../base/player";
-import type { Edit } from "../system/edit";
-export declare class AudioPlayer extends Player {
-    private audioResource;
-    private isPlaying;
-    private volumeKeyframeBuilder;
-    private syncTimer;
-    constructor(edit: Edit, clipConfiguration: Clip);
-    load(): Promise<void>;
-    update(deltaTime: number, elapsed: number): void;
-    draw(): void;
-    dispose(): void;
-    getSize(): Size;
-    getVolume(): number;
-}

package/dist/core/entities/players/html-player.d.ts

@@ -1,17 +0,0 @@
-import { type Size } from "../../layouts/geometry";
-import { type Clip } from "../../schemas/clip";
-import { Player } from "../base/player";
-import type { Edit } from "../system/edit";
-export declare class HtmlPlayer extends Player {
-    private background;
-    private text;
-    constructor(timeline: Edit, clipConfiguration: Clip);
-    load(): Promise<void>;
-    update(deltaTime: number, elapsed: number): void;
-    draw(): void;
-    dispose(): void;
-    getSize(): Size;
-    protected getFitScale(): number;
-    private parseDocument;
-    private parseAlignment;
-}

package/dist/core/entities/players/image-player.d.ts

@@ -1,15 +0,0 @@
-import { type Size } from "../../layouts/geometry";
-import { type Clip } from "../../schemas/clip";
-import { Player } from "../base/player";
-import type { Edit } from "../system/edit";
-export declare class ImagePlayer extends Player {
-    private texture;
-    private sprite;
-    constructor(timeline: Edit, clipConfiguration: Clip);
-    load(): Promise<void>;
-    update(deltaTime: number, elapsed: number): void;
-    draw(): void;
-    dispose(): void;
-    getSize(): Size;
-    private createCroppedTexture;
-}

package/dist/core/entities/players/luma-player.d.ts

@@ -1,18 +0,0 @@
-import * as pixi from "pixi.js";
-import { type Size } from "../../layouts/geometry";
-import { type Clip } from "../../schemas/clip";
-import { Player } from "../base/player";
-import type { Edit } from "../system/edit";
-export declare class LumaPlayer extends Player {
-    private texture;
-    private sprite;
-    private isPlaying;
-    constructor(edit: Edit, clipConfiguration: Clip);
-    load(): Promise<void>;
-    update(deltaTime: number, elapsed: number): void;
-    draw(): void;
-    dispose(): void;
-    getSize(): Size;
-    getVolume(): number;
-    getMask(): pixi.Sprite | null;
-}

package/dist/core/entities/players/shape-player.d.ts

@@ -1,15 +0,0 @@
-import { type Size } from "../../layouts/geometry";
-import { type Clip } from "../../schemas/clip";
-import { Player } from "../base/player";
-import type { Edit } from "../system/edit";
-export declare class ShapePlayer extends Player {
-    private shape;
-    private shapeBackground;
-    constructor(timeline: Edit, clipConfiguration: Clip);
-    load(): Promise<void>;
-    update(deltaTime: number, elapsed: number): void;
-    draw(): void;
-    dispose(): void;
-    getSize(): Size;
-    protected getFitScale(): number;
-}

package/dist/core/entities/players/text-player.d.ts

@@ -1,19 +0,0 @@
-import { Player } from "@entities/base/player";
-import { type Size } from "@layouts/geometry";
-import { type Clip } from "@schemas/clip";
-/**
- * TextPlayer renders and manages editable text elements in the canvas
- */
-export declare class TextPlayer extends Player {
-    private background;
-    private text;
-    private textEditor;
-    load(): Promise<void>;
-    update(deltaTime: number, elapsed: number): void;
-    dispose(): void;
-    getSize(): Size;
-    protected getFitScale(): number;
-    private createTextStyle;
-    private positionText;
-    updateTextContent(newText: string, initialConfig: Clip): void;
-}

package/dist/core/entities/players/video-player.d.ts

@@ -1,22 +0,0 @@
-import { type Size } from "../../layouts/geometry";
-import { type Clip } from "../../schemas/clip";
-import { Player } from "../base/player";
-import type { Edit } from "../system/edit";
-export declare class VideoPlayer extends Player {
-    private texture;
-    private sprite;
-    private isPlaying;
-    private volumeKeyframeBuilder;
-    private syncTimer;
-    constructor(edit: Edit, clipConfiguration: Clip);
-    /**
-     * TODO: Add support for .mov and .webm files
-     */
-    load(): Promise<void>;
-    update(deltaTime: number, elapsed: number): void;
-    draw(): void;
-    dispose(): void;
-    getSize(): Size;
-    getVolume(): number;
-    private createCroppedTexture;
-}

package/dist/core/entities/system/edit.d.ts

@@ -1,46 +0,0 @@
-import { z } from "zod";
-import { EventEmitter } from "../../events/event-emitter";
-import type { Size } from "../../layouts/geometry";
-import { AssetLoader } from "../../loaders/asset-loader";
-import { ClipSchema } from "../../schemas/clip";
-import { EditSchema } from "../../schemas/edit";
-import { TrackSchema } from "../../schemas/track";
-import { Entity } from "../base/entity";
-type EditType = z.infer<typeof EditSchema>;
-type ClipType = z.infer<typeof ClipSchema>;
-type TrackType = z.infer<typeof TrackSchema>;
-export declare class Edit extends Entity {
-    private static readonly ZIndexPadding;
-    assetLoader: AssetLoader;
-    events: EventEmitter;
-    private edit;
-    private tracks;
-    private clipsToDispose;
-    private clips;
-    playbackTime: number;
-    totalDuration: number;
-    constructor(size: Size, backgroundColor?: string);
-    load(): Promise<void>;
-    play(): void;
-    pause(): void;
-    seek(target: number): void;
-    stop(): void;
-    loadEdit(edit: EditType): Promise<void>;
-    getEdit(): EditType;
-    addClip(trackIdx: number, clip: ClipType): void;
-    getClip(trackIdx: number, clipIdx: number): ClipType | null;
-    deleteClip(trackIdx: number, clipIdx: number): void;
-    addTrack(trackIdx: number, track: TrackType): void;
-    getTrack(trackIdx: number): TrackType | null;
-    deleteTrack(trackIdx: number): void;
-    getTotalDuration(): number;
-    private queueDisposeClip;
-    protected disposeClips(): void;
-    private disposeClip;
-    private unloadClipAssets;
-    protected clearClips(): void;
-    private updateTotalDuration;
-    private createPlayerFromAssetType;
-    private addPlayer;
-}
-export {};

package/dist/core/entities/system/inspector.d.ts

@@ -1,18 +0,0 @@
-import { Entity } from "../base/entity";
-export declare class Inspector extends Entity {
-    private static readonly Width;
-    private static readonly Height;
-    fps: number;
-    playbackTime: number;
-    playbackDuration: number;
-    isPlaying: boolean;
-    private background;
-    private text;
-    constructor();
-    load(): Promise<void>;
-    update(_: number, __: number): void;
-    draw(): void;
-    dispose(): void;
-    private getMemoryInfo;
-    private bytesToMegabytes;
-}

package/dist/core/entities/text/text-cursor.d.ts

@@ -1,47 +0,0 @@
-import { type Clip } from "@schemas/clip";
-import * as pixi from "pixi.js";
-type TextCursorOptions = {
-    width?: number;
-    color?: number;
-    blinkInterval?: number;
-};
-export declare class TextCursor {
-    private static readonly DEFAULT_BLINK_INTERVAL_MS;
-    private static readonly DEFAULT_CURSOR_WIDTH_PX;
-    private static readonly DEFAULT_CURSOR_COLOR;
-    private cursor;
-    private parent;
-    private textElement;
-    private clipConfig;
-    private textPosition;
-    private pixelX;
-    private pixelY;
-    private currentLine;
-    private isBlinking;
-    private blinkInterval;
-    private blinkIntervalMs;
-    private width;
-    private color;
-    private isVisible;
-    constructor(parent: pixi.Container, textElement: pixi.Text, clipConfig: Clip, options?: TextCursorOptions);
-    updatePosition(textPosition: number): void;
-    setPosition(x: number, y: number): void;
-    show(): void;
-    hide(): void;
-    setVisible(visible: boolean): void;
-    startBlinking(): void;
-    stopBlinking(): void;
-    setBlinkInterval(intervalMs: number): void;
-    dispose(): void;
-    private createCursor;
-    private validateTextPosition;
-    private calculateAndApplyPixelPosition;
-    private calculatePixelPositionFromText;
-    private updateGraphicsPosition;
-    private startBlinkingAnimation;
-    private stopBlinkingAnimation;
-    private measureText;
-    isInitialized(): boolean;
-    getState(): object;
-}
-export {};

package/dist/core/entities/text/text-editor.d.ts

@@ -1,43 +0,0 @@
-import type { TextPlayer } from "@entities/players/text-player";
-import { type Clip } from "@schemas/clip";
-import * as pixi from "pixi.js";
-export declare enum HorizontalAlignment {
-    LEFT = "left",
-    CENTER = "center",
-    RIGHT = "right"
-}
-export declare enum VerticalAlignment {
-    TOP = "top",
-    CENTER = "center",
-    BOTTOM = "bottom"
-}
-export declare class TextEditor {
-    private static readonly DOUBLE_CLICK_THRESHOLD_MS;
-    private static readonly EDITING_BG_PADDING_PX;
-    private static readonly EDITING_BG_ALPHA;
-    private static readonly CLICK_HANDLER_DELAY_MS;
-    private parent;
-    private targetText;
-    private clipConfig;
-    private isEditing;
-    private lastClickTime;
-    private editingContainer;
-    private editableText;
-    private textCursor;
-    private textInputHandler;
-    private outsideClickHandler;
-    constructor(parent: TextPlayer, targetText: pixi.Text, clipConfig: Clip);
-    dispose(): void;
-    private startEditing;
-    private stopEditing;
-    private checkForDoubleClick;
-    private setupOutsideClickHandler;
-    private createEditingEnvironment;
-    private setupEditingContainer;
-    private setupTextInputHandler;
-    private updateTextAlignment;
-    private calculateHorizontalPosition;
-    private calculateVerticalPosition;
-    private getContainerDimensions;
-    private getAlignmentSettings;
-}

package/dist/core/entities/text/text-input-handler.d.ts

@@ -1,54 +0,0 @@
-type TextInputHandlerOptions = {
-    initialText?: string;
-    autoFocus?: boolean;
-    focusDelay?: number;
-};
-type TextChangeCallback = (text: string, cursorPosition: number) => void;
-type KeyboardEventHandlers = {
-    onTextInput?: TextChangeCallback;
-    onCursorMove?: (direction: "left" | "right" | "up" | "down", event: KeyboardEvent) => void;
-    onEnter?: (event: KeyboardEvent) => void;
-    onEscape?: (event: KeyboardEvent) => void;
-    onDelete?: (type: "backspace" | "delete", event: KeyboardEvent) => void;
-    onFocus?: (event: FocusEvent) => void;
-    onBlur?: (event: FocusEvent) => void;
-    onTabNavigation?: (direction: "forward" | "backward") => void;
-    onCustomKey?: (key: string, event: KeyboardEvent) => boolean;
-};
-export declare class TextInputHandler {
-    private static readonly DEFAULT_FOCUS_DELAY_MS;
-    private hiddenInput;
-    private isFocused;
-    private focusRetryCount;
-    private maxFocusRetries;
-    private focusDelay;
-    private eventHandlers;
-    private abortController;
-    private textChangeCallback;
-    private lastSyncedText;
-    private isComposing;
-    setupInput(initialText: string, options?: TextInputHandlerOptions): void;
-    updateInputValue(text: string): void;
-    focusInput(): void;
-    blurInput(): void;
-    setSelectionRange(start: number, end: number): void;
-    getCursorPosition(): number;
-    getValue(): string;
-    setTextInputHandler(callback: TextChangeCallback): void;
-    setEventHandlers(handlers: Partial<KeyboardEventHandlers>): void;
-    isFocusedInput(): boolean;
-    dispose(): void;
-    private createHiddenTextarea;
-    private setupEventListeners;
-    private removeAllEventListeners;
-    private handleTextInput;
-    private handleKeyDown;
-    private handleKeyboardShortcuts;
-    private handleCompositionStart;
-    private handleCompositionEnd;
-    private handleFocus;
-    private handleBlur;
-    private handlePaste;
-    private selectAll;
-}
-export {};

package/dist/core/events/asset-load-tracker.d.ts

@@ -1,16 +0,0 @@
-import { EventEmitter } from "./event-emitter";
-export type AssetLoadInfoStatus = "pending" | "loading" | "success" | "failed";
-export type AssetLoadInfo = {
-    progress: number;
-    status: AssetLoadInfoStatus;
-};
-export type AssetLoadInfoUpdatedPayload = {
-    registry: Record<string, AssetLoadInfo>;
-};
-export type AssetEventMap = {
-    onAssetLoadInfoUpdated: AssetLoadInfoUpdatedPayload;
-};
-export declare class AssetLoadTracker extends EventEmitter<AssetEventMap> {
-    registry: Record<string, AssetLoadInfo>;
-    constructor();
-}

package/dist/core/events/event-emitter.d.ts

@@ -1,10 +0,0 @@
-export type Listener<TPayload = any> = (payload: TPayload) => void;
-export type EventPayloadMap<TPayload = any> = Record<string, TPayload>;
-export declare class EventEmitter<TEventPayloadMap extends EventPayloadMap = EventPayloadMap> {
-    private readonly events;
-    constructor();
-    on<TEventName extends keyof TEventPayloadMap>(name: TEventName, listener: Listener<TEventPayloadMap[TEventName]>): void;
-    off<TEventName extends keyof TEventPayloadMap>(name: TEventName, listener: Listener<TEventPayloadMap[TEventName]>): void;
-    clear(name: keyof TEventPayloadMap): void;
-    emit<TEventName extends keyof TEventPayloadMap>(name: TEventName, payload: TEventPayloadMap[TEventName]): void;
-}

package/dist/core/export/video-exporter.d.ts

@@ -1,17 +0,0 @@
-import { Edit } from "@entities/system/edit";
-import { Canvas } from "../shotstack-canvas";
-export declare class VideoExporter {
-    private readonly ffmpeg;
-    private isReady;
-    private readonly edit;
-    private readonly application;
-    constructor(edit: Edit, canvas: Canvas);
-    private init;
-    export(filename?: string, fps?: number): Promise<void>;
-    private findAudioPlayers;
-    private searchContainerForPlayers;
-    private processAudioTrack;
-    private createProgressOverlay;
-    private updateProgressOverlay;
-    private removeProgressOverlay;
-}

package/dist/core/inputs/controls.d.ts

@@ -1,11 +0,0 @@
-import { Edit } from "@entities/system/edit";
-export declare class Controls {
-    private edit;
-    private seekDistance;
-    private seekDistanceLarge;
-    private frameTime;
-    constructor(timeline: Edit);
-    load(): Promise<void>;
-    private handleKeyDown;
-    private handleKeyUp;
-}

package/dist/core/inputs/pointer.d.ts

@@ -1,4 +0,0 @@
-export declare class Pointer {
-    static readonly ButtonLeftClick = 0;
-    static readonly ButtonRightClick = 3;
-}

package/dist/core/layouts/geometry.d.ts

@@ -1,8 +0,0 @@
-export type Vector = {
-    x: number;
-    y: number;
-};
-export type Size = {
-    width: number;
-    height: number;
-};

package/dist/core/layouts/position-builder.d.ts

@@ -1,8 +0,0 @@
-import { type ClipAnchor } from "../schemas/clip";
-import { type Size, type Vector } from "./geometry";
-export declare class PositionBuilder {
-    private containerSize;
-    constructor(containerSize: Size);
-    relativeToAbsolute(entitySize: Size, anchor: ClipAnchor, relativePosition: Vector): Vector;
-    absoluteToRelative(entitySize: Size, anchor: ClipAnchor, absolutePosition: Vector): Vector;
-}