@shotstack/shotstack-studio 1.2.2 → 1.4.0

package/dist/src/components/canvas/index.d.ts

@@ -0,0 +1,14 @@
+export { Entity } from "@core/shared/entity";
+export { Player } from "./players/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 "@core/edit";
+export { Inspector } from "./system/inspector";

package/dist/{core/entities → src/components/canvas/players}/audio-player.d.ts

@@ -1,6 +1,6 @@
-import { type Size } from "../layouts/geometry";
-import { type Clip } from "../schemas/clip";
-import type { Edit } from "./edit";
+import type { Edit } from "@core/edit";
+import { type Size } from "@layouts/geometry";
+import { type Clip } from "@schemas/clip";
 import { Player } from "./player";
 export declare class AudioPlayer extends Player {
     private audioResource;

package/dist/{core/entities → src/components/canvas/players}/html-player.d.ts

@@ -1,6 +1,6 @@
-import { type Size } from "../layouts/geometry";
-import { type Clip } from "../schemas/clip";
-import type { Edit } from "./edit";
+import { type Size } from "@layouts/geometry";
+import { type Clip } from "@schemas/clip";
+import type { Edit } from "core/edit";
 import { Player } from "./player";
 export declare class HtmlPlayer extends Player {
     private background;

package/dist/{core/entities → src/components/canvas/players}/image-player.d.ts

@@ -1,6 +1,6 @@
-import { type Size } from "../layouts/geometry";
-import { type Clip } from "../schemas/clip";
-import type { Edit } from "./edit";
+import type { Edit } from "@core/edit";
+import { type Size } from "@layouts/geometry";
+import { type Clip } from "@schemas/clip";
 import { Player } from "./player";
 export declare class ImagePlayer extends Player {
     private texture;

package/dist/{core/entities → src/components/canvas/players}/luma-player.d.ts

@@ -1,7 +1,7 @@
+import type { Edit } from "@core/edit";
+import { type Size } from "@layouts/geometry";
+import { type Clip } from "@schemas/clip";
 import * as pixi from "pixi.js";
-import { type Size } from "../layouts/geometry";
-import { type Clip } from "../schemas/clip";
-import type { Edit } from "./edit";
 import { Player } from "./player";
 export declare class LumaPlayer extends Player {
     private texture;

package/dist/{core/entities → src/components/canvas/players}/player.d.ts

@@ -1,7 +1,7 @@
-import { type Size, type Vector } from "../layouts/geometry";
-import { type Clip } from "../schemas/clip";
-import { type Edit } from "./edit";
-import { Entity } from "./entity";
+import { type Edit } from "@core/edit";
+import { type Size, type Vector } from "@layouts/geometry";
+import { type Clip } from "@schemas/clip";
+import { Entity } from "../../../core/shared/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
@@ -46,6 +46,7 @@ export declare abstract class Player extends Entity {
     private rotationOffset;
     private initialClipConfiguration;
     constructor(edit: Edit, clipConfiguration: Clip);
+    reconfigureAfterRestore(): void;
     protected configureKeyframes(): void;
     load(): Promise<void>;
     update(_: number, __: number): void;

package/dist/{core/entities → src/components/canvas/players}/shape-player.d.ts

@@ -1,6 +1,6 @@
-import { type Size } from "../layouts/geometry";
-import { type Clip } from "../schemas/clip";
-import type { Edit } from "./edit";
+import type { Edit } from "@core/edit";
+import { type Size } from "@layouts/geometry";
+import { type Clip } from "@schemas/clip";
 import { Player } from "./player";
 export declare class ShapePlayer extends Player {
     private shape;

package/dist/src/components/canvas/players/text-player.d.ts

@@ -0,0 +1,19 @@
+import { Player } from "@canvas/players/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 → src/components/canvas/players}/video-player.d.ts

@@ -1,6 +1,6 @@
-import { type Size } from "../layouts/geometry";
-import { type Clip } from "../schemas/clip";
-import type { Edit } from "./edit";
+import type { Edit } from "@core/edit";
+import { type Size } from "@layouts/geometry";
+import { type Clip } from "@schemas/clip";
 import { Player } from "./player";
 export declare class VideoPlayer extends Player {
     private texture;

package/dist/{core → src/components/canvas}/shotstack-canvas.d.ts

@@ -1,5 +1,5 @@
-import { Edit } from "./entities/edit";
-import { type Size } from "./layouts/geometry";
+import { Edit } from "@core/edit";
+import { type Size } from "@layouts/geometry";
 export declare class Canvas {
     private static extensionsRegistered;
     private readonly size;

package/dist/{core/entities → src/components/canvas/system}/inspector.d.ts

@@ -1,4 +1,4 @@
-import { Entity } from "./entity";
+import { Entity } from "@core/shared/entity";
 export declare class Inspector extends Entity {
     private static readonly Width;
     private static readonly Height;

package/dist/src/components/canvas/text/text-cursor.d.ts

@@ -0,0 +1,47 @@
+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/src/components/canvas/text/text-editor.d.ts

@@ -0,0 +1,43 @@
+import type { TextPlayer } from "@canvas/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/src/components/canvas/text/text-input-handler.d.ts

@@ -0,0 +1,54 @@
+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/src/core/commands/add-clip-command.d.ts

@@ -0,0 +1,14 @@
+import { ClipSchema } from "@schemas/clip";
+import type { z } from "zod";
+import type { EditCommand, CommandContext } from "./types";
+type ClipType = z.infer<typeof ClipSchema>;
+export declare class AddClipCommand implements EditCommand {
+    private trackIdx;
+    private clip;
+    name: string;
+    private addedPlayer?;
+    constructor(trackIdx: number, clip: ClipType);
+    execute(context?: CommandContext): Promise<void>;
+    undo(context?: CommandContext): Promise<void>;
+}
+export {};

package/dist/src/core/commands/add-track-command.d.ts

@@ -0,0 +1,8 @@
+import type { EditCommand, CommandContext } from "./types";
+export declare class AddTrackCommand implements EditCommand {
+    private trackIdx;
+    name: string;
+    constructor(trackIdx: number);
+    execute(context?: CommandContext): void;
+    undo(context?: CommandContext): void;
+}

package/dist/src/core/commands/delete-clip-command.d.ts

@@ -0,0 +1,10 @@
+import type { EditCommand, CommandContext } from "./types";
+export declare class DeleteClipCommand implements EditCommand {
+    private trackIdx;
+    private clipIdx;
+    name: string;
+    private deletedClip?;
+    constructor(trackIdx: number, clipIdx: number);
+    execute(context?: CommandContext): void;
+    undo(context?: CommandContext): void;
+}

package/dist/src/core/commands/delete-track-command.d.ts

@@ -0,0 +1,9 @@
+import type { EditCommand, CommandContext } from "./types";
+export declare class DeleteTrackCommand implements EditCommand {
+    private trackIdx;
+    name: string;
+    private deletedClips;
+    constructor(trackIdx: number);
+    execute(context?: CommandContext): void;
+    undo(context?: CommandContext): Promise<void>;
+}

package/dist/src/core/commands/set-updated-clip-command.d.ts

@@ -0,0 +1,17 @@
+import type { Player } from "@canvas/players/player";
+import { ClipSchema } from "@schemas/clip";
+import { z } from "zod";
+import type { EditCommand, CommandContext } from "./types";
+type ClipType = z.infer<typeof ClipSchema>;
+export declare class SetUpdatedClipCommand implements EditCommand {
+    private clip;
+    private initialClipConfig;
+    private finalClipConfig;
+    name: string;
+    private storedInitialConfig;
+    private storedFinalConfig;
+    constructor(clip: Player, initialClipConfig: ClipType | null, finalClipConfig: ClipType | null);
+    execute(context?: CommandContext): void;
+    undo(context?: CommandContext): void;
+}
+export {};

package/dist/src/core/commands/types.d.ts

@@ -0,0 +1,25 @@
+import type { Player } from "@canvas/players/player";
+import type { ClipSchema } from "@schemas/clip";
+import type { Container } from "pixi.js";
+import type { z } from "zod";
+type ClipType = z.infer<typeof ClipSchema>;
+export type EditCommand = {
+    execute(context?: CommandContext): void | Promise<void>;
+    undo?(context?: CommandContext): void | Promise<void>;
+    readonly name: string;
+};
+export type CommandContext = {
+    getClips(): Player[];
+    getTracks(): Player[][];
+    getContainer(): Container;
+    addPlayer(trackIdx: number, player: Player): Promise<void>;
+    createPlayerFromAssetType(clipConfiguration: ClipType): Player;
+    queueDisposeClip(player: Player): void;
+    disposeClips(): void;
+    undeleteClip(trackIdx: number, clip: Player): void;
+    setUpdatedClip(clip: Player): void;
+    restoreClipConfiguration(clip: Player, previousConfig: ClipType): void;
+    updateDuration(): void;
+    emitEvent(name: string, data: unknown): void;
+};
+export {};

package/dist/src/core/commands/update-text-content-command.d.ts

@@ -0,0 +1,16 @@
+import type { Player } from "@canvas/players/player";
+import type { ClipSchema } from "@schemas/clip";
+import type { z } from "zod";
+import type { EditCommand, CommandContext } from "./types";
+type ClipType = z.infer<typeof ClipSchema>;
+export declare class UpdateTextContentCommand implements EditCommand {
+    private clip;
+    private newText;
+    private initialConfig;
+    name: string;
+    private previousText;
+    constructor(clip: Player, newText: string, initialConfig: ClipType);
+    execute(context?: CommandContext): void;
+    undo(context?: CommandContext): void;
+}
+export {};

package/dist/{core/entities → src/core}/edit.d.ts

@@ -1,11 +1,11 @@
+import { EventEmitter } from "@core/events/event-emitter";
+import { Entity } from "@core/shared/entity";
+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 { 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 "./entity";
 type EditType = z.infer<typeof EditSchema>;
 type ClipType = z.infer<typeof ClipSchema>;
 type TrackType = z.infer<typeof TrackSchema>;
@@ -17,6 +17,8 @@ export declare class Edit extends Entity {
     private tracks;
     private clipsToDispose;
     private clips;
+    private commandHistory;
+    private commandIndex;
     playbackTime: number;
     totalDuration: number;
     constructor(size: Size, backgroundColor?: string);
@@ -34,6 +36,10 @@ export declare class Edit extends Entity {
     getTrack(trackIdx: number): TrackType | null;
     deleteTrack(trackIdx: number): void;
     getTotalDuration(): number;
+    undo(): void;
+    redo(): void;
+    private executeCommand;
+    private createCommandContext;
     private queueDisposeClip;
     protected disposeClips(): void;
     private disposeClip;

package/dist/{core → src/core}/export/video-exporter.d.ts

@@ -1,5 +1,5 @@
-import { Edit } from "../entities/edit";
-import { Canvas } from "../shotstack-canvas";
+import { Canvas } from "@canvas/shotstack-canvas";
+import { Edit } from "@core/edit";
 export declare class VideoExporter {
     private readonly ffmpeg;
     private isReady;

package/dist/{core → src/core}/inputs/controls.d.ts

@@ -1,4 +1,4 @@
-import { Edit } from "../entities/edit";
+import { Edit } from "@core/edit";
 export declare class Controls {
     private edit;
     private seekDistance;