@shotstack/shotstack-studio 2.0.0-beta.34 → 2.0.0-beta.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +27 -1232
- package/dist/internal.d.ts +478 -0
- package/dist/internal.es.js +3953 -3884
- package/dist/internal.umd.js +17 -17
- package/dist/schema/index.cjs +1 -1
- package/dist/schema/index.d.ts +27 -1232
- package/dist/schema/index.mjs +397 -323
- package/dist/shotstack-studio.es.js +4428 -4561
- package/dist/shotstack-studio.umd.js +114 -140
- package/package.json +9 -4
- package/readme.md +152 -144
package/dist/schema/index.d.ts
CHANGED
|
@@ -1,134 +1,9 @@
|
|
|
1
|
-
import { assetSchema as AssetSchema } from '@shotstack/schemas/zod';
|
|
2
|
-
import { audioAssetSchema as AudioAssetSchema } from '@shotstack/schemas/zod';
|
|
3
|
-
import { captionAssetSchema as CaptionAssetSchema } from '@shotstack/schemas/zod';
|
|
4
|
-
import { clipSchema as ClipSchema } from '@shotstack/schemas/zod';
|
|
5
1
|
import { components } from '@shotstack/schemas';
|
|
6
|
-
import { cropSchema as CropSchema } from '@shotstack/schemas/zod';
|
|
7
|
-
import { editSchema as EditSchema } from '@shotstack/schemas/zod';
|
|
8
|
-
import { htmlAssetSchema as HtmlAssetSchema } from '@shotstack/schemas/zod';
|
|
9
|
-
import { imageAssetSchema as ImageAssetSchema } from '@shotstack/schemas/zod';
|
|
10
|
-
import { imageToVideoAssetSchema as ImageToVideoAssetSchema } from '@shotstack/schemas/zod';
|
|
11
|
-
import { lumaAssetSchema as LumaAssetSchema } from '@shotstack/schemas/zod';
|
|
12
|
-
import { offsetSchema as OffsetSchema } from '@shotstack/schemas/zod';
|
|
13
|
-
import { outputSchema as OutputSchema } from '@shotstack/schemas/zod';
|
|
14
|
-
import * as pixi from 'pixi.js';
|
|
15
|
-
import { richTextAssetSchema as RichTextAssetSchema } from '@shotstack/schemas/zod';
|
|
16
|
-
import { shapeAssetSchema as ShapeAssetSchema } from '@shotstack/schemas/zod';
|
|
17
|
-
import { textAssetSchema as TextAssetSchema } from '@shotstack/schemas/zod';
|
|
18
|
-
import { textToImageAssetSchema as TextToImageAssetSchema } from '@shotstack/schemas/zod';
|
|
19
|
-
import { textToSpeechAssetSchema as TextToSpeechAssetSchema } from '@shotstack/schemas/zod';
|
|
20
|
-
import { timelineSchema as TimelineSchema } from '@shotstack/schemas/zod';
|
|
21
|
-
import { trackSchema as TrackSchema } from '@shotstack/schemas/zod';
|
|
22
|
-
import { transformationSchema as TransformationSchema } from '@shotstack/schemas/zod';
|
|
23
|
-
import { transitionSchema as TransitionSchema } from '@shotstack/schemas/zod';
|
|
24
|
-
import { tweenSchema } from '@shotstack/schemas/zod';
|
|
25
|
-
import { videoAssetSchema as VideoAssetSchema } from '@shotstack/schemas/zod';
|
|
26
|
-
import { z } from 'zod';
|
|
27
|
-
|
|
28
|
-
export declare type Asset = components["schemas"]["Asset"];
|
|
29
|
-
|
|
30
|
-
export { AssetSchema }
|
|
31
|
-
|
|
32
|
-
export declare class AssetToolbar {
|
|
33
|
-
private container;
|
|
34
|
-
private buttonsContainer;
|
|
35
|
-
private ui;
|
|
36
|
-
private unsubscribe;
|
|
37
|
-
private dragResult;
|
|
38
|
-
constructor(ui: UIController);
|
|
39
|
-
getDragState(): ToolbarDragState | null;
|
|
40
|
-
setPosition(screenX: number, screenY: number): void;
|
|
41
|
-
mount(parent: HTMLElement, options?: {
|
|
42
|
-
onDragReset?: () => void;
|
|
43
|
-
}): void;
|
|
44
|
-
private render;
|
|
45
|
-
private setupEventListeners;
|
|
46
|
-
dispose(): void;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
export declare type AudioAsset = components["schemas"]["AudioAsset"];
|
|
50
|
-
|
|
51
|
-
export { AudioAssetSchema }
|
|
52
|
-
|
|
53
|
-
declare type BackgroundChangeCallback = (color: string) => void;
|
|
54
|
-
|
|
55
|
-
/**
|
|
56
|
-
* Abstract base class for toolbars providing shared lifecycle, popup management,
|
|
57
|
-
* and UI helper methods.
|
|
58
|
-
*/
|
|
59
|
-
declare abstract class BaseToolbar {
|
|
60
|
-
protected container: HTMLDivElement | null;
|
|
61
|
-
protected edit: Edit;
|
|
62
|
-
protected selectedTrackIdx: number;
|
|
63
|
-
protected selectedClipIdx: number;
|
|
64
|
-
protected clickOutsideHandler: ((e: MouseEvent) => void) | null;
|
|
65
|
-
protected dragResult: ToolbarDragHandle | null;
|
|
66
|
-
constructor(edit: Edit);
|
|
67
|
-
/**
|
|
68
|
-
* Add a drag handle to the toolbar container and enable free-form dragging.
|
|
69
|
-
*/
|
|
70
|
-
protected enableDrag(): void;
|
|
71
|
-
/**
|
|
72
|
-
* Mount the toolbar to a parent element.
|
|
73
|
-
* Subclasses must implement to build their specific HTML structure.
|
|
74
|
-
*/
|
|
75
|
-
abstract mount(parent: HTMLElement): void;
|
|
76
|
-
/**
|
|
77
|
-
* Show the toolbar for a specific clip.
|
|
78
|
-
* Subclasses can override to add custom behavior.
|
|
79
|
-
*/
|
|
80
|
-
show(trackIndex: number, clipIndex: number): void;
|
|
81
|
-
/**
|
|
82
|
-
* Hide the toolbar.
|
|
83
|
-
*/
|
|
84
|
-
hide(): void;
|
|
85
|
-
/**
|
|
86
|
-
* Dispose the toolbar and clean up resources.
|
|
87
|
-
* Subclasses should call super.dispose() and then null their own references.
|
|
88
|
-
*/
|
|
89
|
-
dispose(): void;
|
|
90
|
-
/**
|
|
91
|
-
* Check if a popup is currently visible (handles both CSS class and inline style patterns).
|
|
92
|
-
*/
|
|
93
|
-
protected isPopupOpen(popup: HTMLElement | null): boolean;
|
|
94
|
-
/**
|
|
95
|
-
* Toggle a popup's visibility, closing all others first.
|
|
96
|
-
* Uses CSS class-based visibility. Optional callback fires when popup opens.
|
|
97
|
-
*/
|
|
98
|
-
protected togglePopup(popup: HTMLElement | null, onOpen?: () => void): void;
|
|
99
|
-
/**
|
|
100
|
-
* Close all popups.
|
|
101
|
-
* Uses CSS class-based visibility.
|
|
102
|
-
*/
|
|
103
|
-
protected closeAllPopups(): void;
|
|
104
|
-
/**
|
|
105
|
-
* Set up a document click handler to close popups when clicking outside.
|
|
106
|
-
*/
|
|
107
|
-
protected setupOutsideClickHandler(): void;
|
|
108
|
-
/**
|
|
109
|
-
* Create a slider input handler with value display update.
|
|
110
|
-
*/
|
|
111
|
-
protected createSliderHandler(slider: HTMLInputElement | null, valueDisplay: HTMLSpanElement | null, callback: (value: number) => void, formatter?: (value: number) => string): void;
|
|
112
|
-
/**
|
|
113
|
-
* Set active state on a button element.
|
|
114
|
-
*/
|
|
115
|
-
protected setButtonActive(btn: HTMLElement | null, active: boolean): void;
|
|
116
|
-
/**
|
|
117
|
-
* Sync UI state with current clip configuration.
|
|
118
|
-
* Subclasses must implement.
|
|
119
|
-
*/
|
|
120
|
-
protected abstract syncState(): void;
|
|
121
|
-
/**
|
|
122
|
-
* Get the list of popup elements for popup management.
|
|
123
|
-
* Subclasses must implement.
|
|
124
|
-
*/
|
|
125
|
-
protected abstract getPopupList(): (HTMLElement | null)[];
|
|
126
|
-
}
|
|
127
2
|
|
|
128
3
|
/**
|
|
129
4
|
* Payload passed to button click handlers.
|
|
130
5
|
*/
|
|
131
|
-
|
|
6
|
+
declare interface ButtonClickPayload {
|
|
132
7
|
/** Current playback position in seconds */
|
|
133
8
|
position: number;
|
|
134
9
|
/** Currently selected clip, if any */
|
|
@@ -142,8 +17,6 @@ export declare class Canvas {
|
|
|
142
17
|
private static extensionsRegistered;
|
|
143
18
|
private viewportSize;
|
|
144
19
|
private readonly edit;
|
|
145
|
-
/** Container for interactive overlays (handles, guides). Renders above content. */
|
|
146
|
-
readonly overlayContainer: pixi.Container;
|
|
147
20
|
private viewportContainer?;
|
|
148
21
|
private editBackground?;
|
|
149
22
|
private viewportMask?;
|
|
@@ -173,28 +46,6 @@ export declare class Canvas {
|
|
|
173
46
|
* Single point of update for all position-dependent UI elements.
|
|
174
47
|
*/
|
|
175
48
|
private syncContentTransforms;
|
|
176
|
-
/**
|
|
177
|
-
* Get the pixel bounds of the canvas content (edit area) within the viewport.
|
|
178
|
-
* Used for positioning toolbars adjacent to the canvas content.
|
|
179
|
-
*/
|
|
180
|
-
getContentBounds(): {
|
|
181
|
-
left: number;
|
|
182
|
-
right: number;
|
|
183
|
-
top: number;
|
|
184
|
-
bottom: number;
|
|
185
|
-
};
|
|
186
|
-
registerTimeline(timeline: Timeline): void;
|
|
187
|
-
/**
|
|
188
|
-
* Get the viewport container for coordinate transforms.
|
|
189
|
-
* Used by selection handles, export coordinator, and other components
|
|
190
|
-
* that need to convert between viewport and world coordinates.
|
|
191
|
-
*/
|
|
192
|
-
getViewportContainer(): pixi.Container;
|
|
193
|
-
/**
|
|
194
|
-
* Update the edit background and viewport mask when size changes.
|
|
195
|
-
* Called from Edit when output size is changed.
|
|
196
|
-
*/
|
|
197
|
-
updateViewportForSize(width: number, height: number, backgroundColor: string): void;
|
|
198
49
|
/**
|
|
199
50
|
* Subscribe to Edit events for visual synchronization.
|
|
200
51
|
* Canvas reacts to these events to update PIXI visuals.
|
|
@@ -211,114 +62,12 @@ export declare class Canvas {
|
|
|
211
62
|
private onTick;
|
|
212
63
|
private configureStage;
|
|
213
64
|
private onBackgroundClick;
|
|
214
|
-
pauseTicker(): void;
|
|
215
|
-
resumeTicker(): void;
|
|
216
65
|
dispose(): void;
|
|
217
66
|
}
|
|
218
67
|
|
|
219
|
-
|
|
220
|
-
* Interface for PixiJS-based overlays that render on the canvas.
|
|
221
|
-
* Used for interactive elements like selection handles, alignment guides, etc.
|
|
222
|
-
*/
|
|
223
|
-
export declare interface CanvasOverlayRegistration {
|
|
224
|
-
/** Mount to PixiJS container */
|
|
225
|
-
mount(container: pixi.Container, app: pixi.Application): void;
|
|
226
|
-
/** Called each frame to update state */
|
|
227
|
-
update(deltaTime: number, elapsed: number): void;
|
|
228
|
-
/** Called each frame to render */
|
|
229
|
-
draw(): void;
|
|
230
|
-
/** Clean up resources */
|
|
231
|
-
dispose(): void;
|
|
232
|
-
}
|
|
233
|
-
|
|
234
|
-
export declare class CanvasToolbar {
|
|
235
|
-
private container;
|
|
236
|
-
private edit;
|
|
237
|
-
private currentWidth;
|
|
238
|
-
private currentHeight;
|
|
239
|
-
private currentFps;
|
|
240
|
-
private currentBgColor;
|
|
241
|
-
private resolutionPopup;
|
|
242
|
-
private backgroundPopup;
|
|
243
|
-
private fpsPopup;
|
|
244
|
-
private variablesPopup;
|
|
245
|
-
private resolutionBtn;
|
|
246
|
-
private backgroundBtn;
|
|
247
|
-
private fpsBtn;
|
|
248
|
-
private variablesBtn;
|
|
249
|
-
private variablesList;
|
|
250
|
-
private variablesEmpty;
|
|
251
|
-
private resolutionLabel;
|
|
252
|
-
private fpsLabel;
|
|
253
|
-
private bgColorDot;
|
|
254
|
-
private customWidthInput;
|
|
255
|
-
private customHeightInput;
|
|
256
|
-
private colorInput;
|
|
257
|
-
private resolutionChangeCallback;
|
|
258
|
-
private fpsChangeCallback;
|
|
259
|
-
private backgroundChangeCallback;
|
|
260
|
-
private clickOutsideHandler;
|
|
261
|
-
private dragResult;
|
|
262
|
-
private showMergeFields;
|
|
263
|
-
private maxPixels?;
|
|
264
|
-
constructor(edit?: Edit, options?: CanvasToolbarOptions);
|
|
265
|
-
/** Check if given dimensions exceed the configured pixel limit */
|
|
266
|
-
private isOverLimit;
|
|
267
|
-
/** Get the edit as ShotstackEdit if it has merge field capabilities */
|
|
268
|
-
private getShotstackEdit;
|
|
269
|
-
getDragState(): ToolbarDragState | null;
|
|
270
|
-
setPosition(screenX: number, screenY: number): void;
|
|
271
|
-
mount(parent: HTMLElement, options?: {
|
|
272
|
-
onDragReset?: () => void;
|
|
273
|
-
}): void;
|
|
274
|
-
private setupEventListeners;
|
|
275
|
-
private togglePopup;
|
|
276
|
-
private closeAllPopups;
|
|
277
|
-
private handleResolutionSelect;
|
|
278
|
-
private handleCustomSizeChange;
|
|
279
|
-
private handleFpsSelect;
|
|
280
|
-
private handleColorChange;
|
|
281
|
-
private updateResolutionLabel;
|
|
282
|
-
private updateFpsLabel;
|
|
283
|
-
private updateColorPreview;
|
|
284
|
-
private updateActiveStates;
|
|
285
|
-
private renderVariablesList;
|
|
286
|
-
private addVariable;
|
|
287
|
-
setResolution(width: number, height: number): void;
|
|
288
|
-
/** Update warning state for inputs when loaded resolution exceeds configured limit */
|
|
289
|
-
private updateConstraintWarning;
|
|
290
|
-
setFps(fps: number): void;
|
|
291
|
-
setBackground(color: string): void;
|
|
292
|
-
onResolutionChange(callback: ResolutionChangeCallback): void;
|
|
293
|
-
onFpsChange(callback: FpsChangeCallback): void;
|
|
294
|
-
onBackgroundChange(callback: BackgroundChangeCallback): void;
|
|
295
|
-
dispose(): void;
|
|
296
|
-
}
|
|
297
|
-
|
|
298
|
-
declare interface CanvasToolbarOptions {
|
|
299
|
-
mergeFields?: boolean;
|
|
300
|
-
/** Maximum total pixels allowed for custom resolution input. Omit for unlimited. */
|
|
301
|
-
maxPixels?: number;
|
|
302
|
-
}
|
|
303
|
-
|
|
304
|
-
export declare type CaptionAsset = components["schemas"]["CaptionAsset"];
|
|
305
|
-
|
|
306
|
-
export { CaptionAssetSchema }
|
|
307
|
-
|
|
308
|
-
export declare type ChromaKey = components["schemas"]["ChromaKey"];
|
|
309
|
-
|
|
310
|
-
export declare type Clip = components["schemas"]["Clip"];
|
|
68
|
+
declare type Clip = components["schemas"]["Clip"];
|
|
311
69
|
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
/** Clip info for interactions */
|
|
315
|
-
declare interface ClipInfo {
|
|
316
|
-
trackIndex: number;
|
|
317
|
-
clipIndex: number;
|
|
318
|
-
config: ResolvedClip;
|
|
319
|
-
}
|
|
320
|
-
|
|
321
|
-
export declare type ClipLocation = {
|
|
70
|
+
declare type ClipLocation = {
|
|
322
71
|
trackIndex: number;
|
|
323
72
|
clipIndex: number;
|
|
324
73
|
};
|
|
@@ -328,40 +77,10 @@ export declare type ClipLocation = {
|
|
|
328
77
|
* Contains original timing values like "auto", "end", and alias references.
|
|
329
78
|
* Used in public SDK events so consumers see the document state.
|
|
330
79
|
*/
|
|
331
|
-
|
|
80
|
+
declare type ClipReference = ClipLocation & {
|
|
332
81
|
clip: Clip;
|
|
333
82
|
};
|
|
334
83
|
|
|
335
|
-
/** Custom clip renderer interface */
|
|
336
|
-
declare interface ClipRenderer {
|
|
337
|
-
/** Render custom content inside clip element */
|
|
338
|
-
render(clip: ResolvedClip, element: HTMLElement): void;
|
|
339
|
-
/** Optional cleanup when clip is removed */
|
|
340
|
-
dispose?(element: HTMLElement): void;
|
|
341
|
-
}
|
|
342
|
-
|
|
343
|
-
export { ClipSchema }
|
|
344
|
-
|
|
345
|
-
/**
|
|
346
|
-
* Toolbar for clip-level properties (timing, linking).
|
|
347
|
-
* Shows compact timing controls for start and length with:
|
|
348
|
-
* - Click-to-cycle mode badges
|
|
349
|
-
* - Scrubbable time values (drag to adjust)
|
|
350
|
-
* - Keyboard increment/decrement (arrow keys)
|
|
351
|
-
*/
|
|
352
|
-
export declare class ClipToolbar extends BaseToolbar {
|
|
353
|
-
private startControl;
|
|
354
|
-
private lengthControl;
|
|
355
|
-
private editChangedListener;
|
|
356
|
-
mount(parent: HTMLElement): void;
|
|
357
|
-
private setupEventListeners;
|
|
358
|
-
private mountComponents;
|
|
359
|
-
private applyTimingUpdate;
|
|
360
|
-
protected syncState(): void;
|
|
361
|
-
protected getPopupList(): (HTMLElement | null)[];
|
|
362
|
-
dispose(): void;
|
|
363
|
-
}
|
|
364
|
-
|
|
365
84
|
export declare class Controls {
|
|
366
85
|
private edit;
|
|
367
86
|
private seekDistance;
|
|
@@ -374,88 +93,7 @@ export declare class Controls {
|
|
|
374
93
|
private handleKeyUp;
|
|
375
94
|
}
|
|
376
95
|
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
export { CropSchema }
|
|
380
|
-
|
|
381
|
-
export declare type Destination = components["schemas"]["Destinations"];
|
|
382
|
-
|
|
383
|
-
export declare const DestinationSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
|
|
384
|
-
provider: z.ZodLiteral<"shotstack">;
|
|
385
|
-
exclude: z.ZodOptional<z.ZodBoolean>;
|
|
386
|
-
}, z.core.$strip>, z.ZodObject<{
|
|
387
|
-
provider: z.ZodLiteral<"mux">;
|
|
388
|
-
options: z.ZodOptional<z.ZodObject<{
|
|
389
|
-
playbackPolicy: z.ZodOptional<z.ZodArray<z.ZodEnum<{
|
|
390
|
-
public: "public";
|
|
391
|
-
signed: "signed";
|
|
392
|
-
}>>>;
|
|
393
|
-
passthrough: z.ZodOptional<z.ZodString>;
|
|
394
|
-
}, z.core.$strip>>;
|
|
395
|
-
}, z.core.$strip>, z.ZodObject<{
|
|
396
|
-
provider: z.ZodLiteral<"s3">;
|
|
397
|
-
options: z.ZodOptional<z.ZodObject<{
|
|
398
|
-
region: z.ZodString;
|
|
399
|
-
bucket: z.ZodString;
|
|
400
|
-
prefix: z.ZodOptional<z.ZodString>;
|
|
401
|
-
filename: z.ZodOptional<z.ZodString>;
|
|
402
|
-
acl: z.ZodOptional<z.ZodString>;
|
|
403
|
-
}, z.core.$strip>>;
|
|
404
|
-
}, z.core.$strip>, z.ZodObject<{
|
|
405
|
-
provider: z.ZodLiteral<"google-cloud-storage">;
|
|
406
|
-
options: z.ZodOptional<z.ZodObject<{
|
|
407
|
-
bucket: z.ZodString;
|
|
408
|
-
prefix: z.ZodOptional<z.ZodString>;
|
|
409
|
-
filename: z.ZodOptional<z.ZodString>;
|
|
410
|
-
}, z.core.$strip>>;
|
|
411
|
-
}, z.core.$strip>, z.ZodObject<{
|
|
412
|
-
provider: z.ZodLiteral<"google-drive">;
|
|
413
|
-
options: z.ZodObject<{
|
|
414
|
-
folderId: z.ZodString;
|
|
415
|
-
filename: z.ZodOptional<z.ZodString>;
|
|
416
|
-
}, z.core.$strip>;
|
|
417
|
-
}, z.core.$strip>, z.ZodObject<{
|
|
418
|
-
provider: z.ZodLiteral<"vimeo">;
|
|
419
|
-
options: z.ZodOptional<z.ZodObject<{
|
|
420
|
-
name: z.ZodOptional<z.ZodString>;
|
|
421
|
-
description: z.ZodOptional<z.ZodString>;
|
|
422
|
-
privacy: z.ZodOptional<z.ZodObject<{
|
|
423
|
-
view: z.ZodOptional<z.ZodEnum<{
|
|
424
|
-
anybody: "anybody";
|
|
425
|
-
nobody: "nobody";
|
|
426
|
-
contacts: "contacts";
|
|
427
|
-
password: "password";
|
|
428
|
-
unlisted: "unlisted";
|
|
429
|
-
}>>;
|
|
430
|
-
embed: z.ZodOptional<z.ZodEnum<{
|
|
431
|
-
public: "public";
|
|
432
|
-
private: "private";
|
|
433
|
-
whitelist: "whitelist";
|
|
434
|
-
}>>;
|
|
435
|
-
comments: z.ZodOptional<z.ZodEnum<{
|
|
436
|
-
anybody: "anybody";
|
|
437
|
-
nobody: "nobody";
|
|
438
|
-
contacts: "contacts";
|
|
439
|
-
}>>;
|
|
440
|
-
download: z.ZodOptional<z.ZodBoolean>;
|
|
441
|
-
add: z.ZodOptional<z.ZodBoolean>;
|
|
442
|
-
}, z.core.$strip>>;
|
|
443
|
-
folderUri: z.ZodOptional<z.ZodString>;
|
|
444
|
-
}, z.core.$strip>>;
|
|
445
|
-
}, z.core.$strip>, z.ZodObject<{
|
|
446
|
-
provider: z.ZodLiteral<"tiktok">;
|
|
447
|
-
options: z.ZodOptional<z.ZodObject<{
|
|
448
|
-
title: z.ZodOptional<z.ZodString>;
|
|
449
|
-
privacyLevel: z.ZodOptional<z.ZodEnum<{
|
|
450
|
-
public: "public";
|
|
451
|
-
friends: "friends";
|
|
452
|
-
private: "private";
|
|
453
|
-
}>>;
|
|
454
|
-
disableDuet: z.ZodDefault<z.ZodOptional<z.ZodBoolean>>;
|
|
455
|
-
disableStitch: z.ZodDefault<z.ZodOptional<z.ZodBoolean>>;
|
|
456
|
-
disableComment: z.ZodDefault<z.ZodOptional<z.ZodBoolean>>;
|
|
457
|
-
}, z.core.$strip>>;
|
|
458
|
-
}, z.core.$strip>], "provider">;
|
|
96
|
+
declare type Destination = components["schemas"]["Destinations"];
|
|
459
97
|
|
|
460
98
|
export declare class Edit {
|
|
461
99
|
private static readonly MAX_HISTORY_SIZE;
|
|
@@ -466,6 +104,8 @@ export declare class Edit {
|
|
|
466
104
|
totalDuration: Seconds;
|
|
467
105
|
isPlaying: boolean;
|
|
468
106
|
private get clips();
|
|
107
|
+
private internalEvents;
|
|
108
|
+
events: ReadonlyEventEmitter<EditEventMap>;
|
|
469
109
|
private canvas;
|
|
470
110
|
private timingManager;
|
|
471
111
|
private lumaMaskController;
|
|
@@ -506,16 +146,6 @@ export declare class Edit {
|
|
|
506
146
|
loadEdit(edit: Edit_2): Promise<void>;
|
|
507
147
|
private loadSoundtrack;
|
|
508
148
|
getEdit(): Edit_2;
|
|
509
|
-
/**
|
|
510
|
-
* Validates an edit configuration.
|
|
511
|
-
*/
|
|
512
|
-
validateEdit(edit: unknown): {
|
|
513
|
-
valid: boolean;
|
|
514
|
-
errors: Array<{
|
|
515
|
-
path: string;
|
|
516
|
-
message: string;
|
|
517
|
-
}>;
|
|
518
|
-
};
|
|
519
149
|
addClip(trackIdx: number, clip: Clip): void | Promise<void>;
|
|
520
150
|
getClip(trackIdx: number, clipIdx: number): Clip | null;
|
|
521
151
|
/**
|
|
@@ -591,16 +221,9 @@ export declare class Edit {
|
|
|
591
221
|
getOutputResolution(): string | undefined;
|
|
592
222
|
setOutputAspectRatio(aspectRatio: string): Promise<void>;
|
|
593
223
|
getOutputAspectRatio(): string | undefined;
|
|
594
|
-
getTimelineFonts(): Array<{
|
|
595
|
-
src: string;
|
|
596
|
-
}>;
|
|
597
224
|
setTimelineBackground(color: string): Promise<void>;
|
|
598
225
|
private setTimelineBackgroundInternal;
|
|
599
226
|
getTimelineBackground(): string;
|
|
600
|
-
/**
|
|
601
|
-
* Get the content clip ID for a luma clip.
|
|
602
|
-
*/
|
|
603
|
-
getContentClipIdForLuma(lumaClipId: string): string | null;
|
|
604
227
|
/**
|
|
605
228
|
* Find the content clip that best matches a luma (by temporal overlap).
|
|
606
229
|
*/
|
|
@@ -613,7 +236,7 @@ declare type Edit_2 = components["schemas"]["Edit"];
|
|
|
613
236
|
/** Configuration for defining an edit - the structure passed to EditSession */
|
|
614
237
|
export declare type EditConfig = Edit_2;
|
|
615
238
|
|
|
616
|
-
|
|
239
|
+
declare const EditEvent: {
|
|
617
240
|
readonly PlaybackPlay: "playback:play";
|
|
618
241
|
readonly PlaybackPause: "playback:pause";
|
|
619
242
|
readonly TimelineUpdated: "timeline:updated";
|
|
@@ -640,11 +263,7 @@ export declare const EditEvent: {
|
|
|
640
263
|
readonly OutputFpsChanged: "output:fpsChanged";
|
|
641
264
|
readonly OutputFormatChanged: "output:formatChanged";
|
|
642
265
|
readonly OutputDestinationsChanged: "output:destinationsChanged";
|
|
643
|
-
readonly MergeFieldRegistered: "mergefield:registered";
|
|
644
|
-
readonly MergeFieldUpdated: "mergefield:updated";
|
|
645
|
-
readonly MergeFieldRemoved: "mergefield:removed";
|
|
646
266
|
readonly MergeFieldChanged: "mergefield:changed";
|
|
647
|
-
readonly MergeFieldApplied: "mergefield:applied";
|
|
648
267
|
readonly TranscriptionProgress: "transcription:progress";
|
|
649
268
|
readonly TranscriptionCompleted: "transcription:completed";
|
|
650
269
|
readonly TranscriptionFailed: "transcription:failed";
|
|
@@ -652,7 +271,7 @@ export declare const EditEvent: {
|
|
|
652
271
|
readonly LumaDetached: "luma:detached";
|
|
653
272
|
};
|
|
654
273
|
|
|
655
|
-
|
|
274
|
+
declare type EditEventMap = {
|
|
656
275
|
[EditEvent.PlaybackPlay]: void;
|
|
657
276
|
[EditEvent.PlaybackPause]: void;
|
|
658
277
|
/** Contains the document (source of truth) with original timing values like "auto", "end" */
|
|
@@ -724,22 +343,8 @@ export declare type EditEventMap = {
|
|
|
724
343
|
[EditEvent.OutputDestinationsChanged]: {
|
|
725
344
|
destinations: Destination[];
|
|
726
345
|
};
|
|
727
|
-
[EditEvent.MergeFieldRegistered]: {
|
|
728
|
-
field: MergeField_2;
|
|
729
|
-
};
|
|
730
|
-
[EditEvent.MergeFieldUpdated]: {
|
|
731
|
-
field: MergeField_2;
|
|
732
|
-
};
|
|
733
|
-
[EditEvent.MergeFieldRemoved]: ClipLocation & {
|
|
734
|
-
propertyPath: string;
|
|
735
|
-
fieldName: string | null;
|
|
736
|
-
};
|
|
737
346
|
[EditEvent.MergeFieldChanged]: {
|
|
738
|
-
fields:
|
|
739
|
-
};
|
|
740
|
-
[EditEvent.MergeFieldApplied]: ClipLocation & {
|
|
741
|
-
propertyPath: string;
|
|
742
|
-
fieldName: string;
|
|
347
|
+
fields: MergeField[];
|
|
743
348
|
};
|
|
744
349
|
[EditEvent.TranscriptionProgress]: {
|
|
745
350
|
clipAlias: string;
|
|
@@ -760,212 +365,9 @@ export declare type EditEventMap = {
|
|
|
760
365
|
[EditEvent.LumaDetached]: ClipLocation;
|
|
761
366
|
};
|
|
762
367
|
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
export { EditSchema }
|
|
766
|
-
|
|
767
|
-
declare abstract class Entity {
|
|
768
|
-
private readonly container;
|
|
769
|
-
constructor();
|
|
770
|
-
abstract load(): Promise<void>;
|
|
771
|
-
}
|
|
772
|
-
|
|
773
|
-
/** SDK-extended CaptionAsset with stroke, width, height, alignment */
|
|
774
|
-
export declare type ExtendedCaptionAsset = CaptionAsset & {
|
|
775
|
-
stroke?: {
|
|
776
|
-
width: number;
|
|
777
|
-
color: string;
|
|
778
|
-
};
|
|
779
|
-
width?: number;
|
|
780
|
-
height?: number;
|
|
781
|
-
alignment?: {
|
|
782
|
-
horizontal?: "left" | "center" | "right";
|
|
783
|
-
vertical?: "top" | "center" | "bottom";
|
|
784
|
-
};
|
|
785
|
-
};
|
|
786
|
-
|
|
787
|
-
export declare type Font = components["schemas"]["Font"];
|
|
788
|
-
|
|
789
|
-
declare type FpsChangeCallback = (fps: number) => void;
|
|
790
|
-
|
|
791
|
-
export declare const HexColorSchema: z.ZodString;
|
|
792
|
-
|
|
793
|
-
export declare type HtmlAsset = components["schemas"]["HtmlAsset"];
|
|
794
|
-
|
|
795
|
-
export declare type HtmlAssetPosition = NonNullable<HtmlAsset["position"]>;
|
|
796
|
-
|
|
797
|
-
export { HtmlAssetSchema }
|
|
798
|
-
|
|
799
|
-
export declare type ImageAsset = components["schemas"]["ImageAsset"];
|
|
800
|
-
|
|
801
|
-
export { ImageAssetSchema }
|
|
802
|
-
|
|
803
|
-
export declare type ImageToVideoAsset = components["schemas"]["ImageToVideoAsset"];
|
|
804
|
-
|
|
805
|
-
export { ImageToVideoAssetSchema }
|
|
806
|
-
|
|
807
|
-
/**
|
|
808
|
-
* Inspector displays performance stats as an HTML overlay.
|
|
809
|
-
* Shows FPS, memory, playback health, and clip statistics.
|
|
810
|
-
*/
|
|
811
|
-
export declare class Inspector {
|
|
812
|
-
private container;
|
|
813
|
-
private animationFrameId;
|
|
814
|
-
private lastFrameTime;
|
|
815
|
-
private edit;
|
|
816
|
-
private fpsEl;
|
|
817
|
-
private playbackEl;
|
|
818
|
-
private frameStatsEl;
|
|
819
|
-
private frameSparklineEl;
|
|
820
|
-
private jankEl;
|
|
821
|
-
private heapEl;
|
|
822
|
-
private heapSparklineEl;
|
|
823
|
-
private clipsEl;
|
|
824
|
-
private historySamples;
|
|
825
|
-
private readonly maxSamples;
|
|
826
|
-
private lastSampleTime;
|
|
827
|
-
private readonly sampleInterval;
|
|
828
|
-
private frameTimes;
|
|
829
|
-
private readonly frameTimeWindow;
|
|
830
|
-
private readonly jankThreshold;
|
|
831
|
-
constructor(edit: Edit);
|
|
832
|
-
/**
|
|
833
|
-
* Mount the inspector to a parent element.
|
|
834
|
-
* @param parent - The parent element to append the inspector to
|
|
835
|
-
*/
|
|
836
|
-
mount(parent: HTMLElement): void;
|
|
837
|
-
private startUpdateLoop;
|
|
838
|
-
private update;
|
|
839
|
-
private trackFrameTime;
|
|
840
|
-
private getFrameStats;
|
|
841
|
-
private getFrameTimeSparkline;
|
|
842
|
-
private addHistorySample;
|
|
843
|
-
private getJsHeapSparkline;
|
|
844
|
-
private render;
|
|
845
|
-
private getMemoryInfo;
|
|
846
|
-
private bytesToMegabytes;
|
|
847
|
-
dispose(): void;
|
|
848
|
-
}
|
|
849
|
-
|
|
850
|
-
declare type Keyframe_2 = Tween;
|
|
851
|
-
export { Keyframe_2 as Keyframe }
|
|
852
|
-
|
|
853
|
-
export declare type LumaAsset = components["schemas"]["LumaAsset"];
|
|
854
|
-
|
|
855
|
-
export { LumaAssetSchema }
|
|
856
|
-
|
|
857
|
-
export declare class MediaToolbar extends BaseToolbar {
|
|
858
|
-
private showMergeFields;
|
|
859
|
-
private assetType;
|
|
860
|
-
constructor(edit: Edit, options?: MediaToolbarOptions);
|
|
861
|
-
/** Get the edit as ShotstackEdit if it has merge field capabilities */
|
|
862
|
-
private getShotstackEdit;
|
|
863
|
-
private currentFit;
|
|
864
|
-
private currentVolume;
|
|
865
|
-
private transitionPanel;
|
|
866
|
-
private effectPanel;
|
|
867
|
-
private opacitySlider;
|
|
868
|
-
private scaleSlider;
|
|
869
|
-
private fitBtn;
|
|
870
|
-
private opacityBtn;
|
|
871
|
-
private scaleBtn;
|
|
872
|
-
private volumeBtn;
|
|
873
|
-
private transitionBtn;
|
|
874
|
-
private effectBtn;
|
|
875
|
-
private advancedBtn;
|
|
876
|
-
private audioFadeBtn;
|
|
877
|
-
private fitPopup;
|
|
878
|
-
private opacityPopup;
|
|
879
|
-
private scalePopup;
|
|
880
|
-
private volumePopup;
|
|
881
|
-
private transitionPopup;
|
|
882
|
-
private effectPopup;
|
|
883
|
-
private advancedPopup;
|
|
884
|
-
private audioFadePopup;
|
|
885
|
-
private fitLabel;
|
|
886
|
-
private volumeSlider;
|
|
887
|
-
private volumeValue;
|
|
888
|
-
private volumeDisplayInput;
|
|
889
|
-
private volumeSection;
|
|
890
|
-
private visualSection;
|
|
891
|
-
private audioSection;
|
|
892
|
-
private dynamicToggle;
|
|
893
|
-
private dynamicPanel;
|
|
894
|
-
private dynamicInput;
|
|
895
|
-
private dragManager;
|
|
896
|
-
private audioFadeEffect;
|
|
897
|
-
private isDynamicSource;
|
|
898
|
-
private dynamicFieldName;
|
|
899
|
-
private originalSrc;
|
|
900
|
-
private abortController;
|
|
901
|
-
mount(parent: HTMLElement): void;
|
|
902
|
-
/**
|
|
903
|
-
* Mount composite UI components into their placeholder elements.
|
|
904
|
-
*/
|
|
905
|
-
private mountCompositeComponents;
|
|
906
|
-
private setupEventListeners;
|
|
907
|
-
private togglePopupByName;
|
|
908
|
-
protected closeAllPopups(): void;
|
|
909
|
-
protected getPopupList(): (HTMLElement | null)[];
|
|
910
|
-
protected syncState(): void;
|
|
911
|
-
/**
|
|
912
|
-
* Capture and deep-clone the current clip state for drag rollback.
|
|
913
|
-
*/
|
|
914
|
-
private captureClipState;
|
|
915
|
-
/**
|
|
916
|
-
* Start a drag session for a slider control.
|
|
917
|
-
*/
|
|
918
|
-
private startSliderDrag;
|
|
919
|
-
/**
|
|
920
|
-
* End a drag session and commit a single undo entry.
|
|
921
|
-
*/
|
|
922
|
-
private endSliderDrag;
|
|
923
|
-
private handleFitChange;
|
|
924
|
-
private handleOpacityChange;
|
|
925
|
-
private handleScaleChange;
|
|
926
|
-
private handleVolumeChange;
|
|
927
|
-
/**
|
|
928
|
-
* Parse and commit the value from the volume text input.
|
|
929
|
-
*/
|
|
930
|
-
private commitVolumeInputValue;
|
|
931
|
-
/**
|
|
932
|
-
* Revert the volume text input to match the current slider value.
|
|
933
|
-
*/
|
|
934
|
-
private revertVolumeInputValue;
|
|
935
|
-
/**
|
|
936
|
-
* Parse user input, strip non-numeric chars, clamp to 0-100.
|
|
937
|
-
*/
|
|
938
|
-
private parseVolumeInputValue;
|
|
939
|
-
private applyTransitionUpdate;
|
|
940
|
-
private applyEffect;
|
|
941
|
-
private handleAudioFadeSelect;
|
|
942
|
-
private applyAudioFade;
|
|
943
|
-
private updateAudioFadeUI;
|
|
944
|
-
private applyClipUpdate;
|
|
945
|
-
private setupDynamicSourceHandlers;
|
|
946
|
-
private applyDynamicUrl;
|
|
947
|
-
private showUrlError;
|
|
948
|
-
private clearUrlError;
|
|
949
|
-
private clearDynamicSource;
|
|
950
|
-
private updateDynamicSourceUI;
|
|
951
|
-
private updateFitDisplay;
|
|
952
|
-
private updateOpacityDisplay;
|
|
953
|
-
private updateScaleDisplay;
|
|
954
|
-
private updateVolumeDisplay;
|
|
955
|
-
private updateFitActiveState;
|
|
956
|
-
/**
|
|
957
|
-
* Show the toolbar for a specific clip.
|
|
958
|
-
* Derives assetType from the clip's asset configuration.
|
|
959
|
-
*/
|
|
960
|
-
show(trackIndex: number, clipIndex: number): void;
|
|
961
|
-
dispose(): void;
|
|
962
|
-
}
|
|
963
|
-
|
|
964
|
-
declare interface MediaToolbarOptions {
|
|
965
|
-
mergeFields?: boolean;
|
|
966
|
-
}
|
|
368
|
+
declare type EventPayloadMap<TPayload = any> = Record<string, TPayload>;
|
|
967
369
|
|
|
968
|
-
|
|
370
|
+
declare type Listener<TPayload = any> = (payload: TPayload) => void;
|
|
969
371
|
|
|
970
372
|
/**
|
|
971
373
|
* Merge field types for the Shotstack Studio SDK.
|
|
@@ -976,7 +378,7 @@ export declare type MergeField = components["schemas"]["MergeField"];
|
|
|
976
378
|
/**
|
|
977
379
|
* A merge field definition used throughout the SDK.
|
|
978
380
|
*/
|
|
979
|
-
declare interface
|
|
381
|
+
declare interface MergeField {
|
|
980
382
|
/** Field identifier (uppercase convention: MY_FIELD) */
|
|
981
383
|
name: string;
|
|
982
384
|
/** Default value used for preview when no runtime value is provided */
|
|
@@ -985,196 +387,16 @@ declare interface MergeField_2 {
|
|
|
985
387
|
description?: string;
|
|
986
388
|
}
|
|
987
389
|
|
|
988
|
-
|
|
989
|
-
start: number;
|
|
990
|
-
length: number;
|
|
991
|
-
from: number;
|
|
992
|
-
to: number;
|
|
993
|
-
interpolation?: Tween["interpolation"];
|
|
994
|
-
easing?: Tween["easing"];
|
|
995
|
-
}
|
|
996
|
-
|
|
997
|
-
export declare type Offset = components["schemas"]["Offset"];
|
|
998
|
-
|
|
999
|
-
export { OffsetSchema }
|
|
1000
|
-
|
|
1001
|
-
export declare type Output = components["schemas"]["Output"];
|
|
1002
|
-
|
|
1003
|
-
export declare const OutputAspectRatioSchema: z.ZodOptional<z.ZodEnum<{
|
|
1004
|
-
"16:9": "16:9";
|
|
1005
|
-
"9:16": "9:16";
|
|
1006
|
-
"1:1": "1:1";
|
|
1007
|
-
"4:3": "4:3";
|
|
1008
|
-
"4:5": "4:5";
|
|
1009
|
-
}>>;
|
|
1010
|
-
|
|
1011
|
-
export declare const OutputFormatSchema: z.ZodEnum<{
|
|
1012
|
-
mp4: "mp4";
|
|
1013
|
-
gif: "gif";
|
|
1014
|
-
mp3: "mp3";
|
|
1015
|
-
jpg: "jpg";
|
|
1016
|
-
png: "png";
|
|
1017
|
-
bmp: "bmp";
|
|
1018
|
-
}>;
|
|
1019
|
-
|
|
1020
|
-
export declare const OutputFpsSchema: z.ZodUnion<readonly [z.ZodLiteral<12>, z.ZodLiteral<15>, z.ZodLiteral<23.976>, z.ZodLiteral<24>, z.ZodLiteral<25>, z.ZodLiteral<29.97>, z.ZodLiteral<30>, z.ZodLiteral<48>, z.ZodLiteral<50>, z.ZodLiteral<59.94>, z.ZodLiteral<60>]>;
|
|
1021
|
-
|
|
1022
|
-
export declare const OutputResolutionSchema: z.ZodOptional<z.ZodEnum<{
|
|
1023
|
-
preview: "preview";
|
|
1024
|
-
mobile: "mobile";
|
|
1025
|
-
sd: "sd";
|
|
1026
|
-
hd: "hd";
|
|
1027
|
-
1080: "1080";
|
|
1028
|
-
"4k": "4k";
|
|
1029
|
-
}>>;
|
|
1030
|
-
|
|
1031
|
-
export { OutputSchema }
|
|
390
|
+
declare type Output = components["schemas"]["Output"];
|
|
1032
391
|
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
id: string;
|
|
1042
|
-
start: Seconds;
|
|
1043
|
-
length: Seconds;
|
|
1044
|
-
};
|
|
1045
|
-
|
|
1046
|
-
export declare type RichTextAsset = components["schemas"]["RichTextAsset"];
|
|
1047
|
-
|
|
1048
|
-
export { RichTextAssetSchema }
|
|
1049
|
-
|
|
1050
|
-
export declare class RichTextToolbar extends BaseToolbar {
|
|
1051
|
-
private showMergeFields;
|
|
1052
|
-
private fontPopup;
|
|
1053
|
-
private fontPreview;
|
|
1054
|
-
private fontPicker;
|
|
1055
|
-
private sizeInput;
|
|
1056
|
-
private sizePopup;
|
|
1057
|
-
private weightDropdown;
|
|
1058
|
-
private weightPopup;
|
|
1059
|
-
private weightPreview;
|
|
1060
|
-
private spacingPopup;
|
|
1061
|
-
private spacingPanel;
|
|
1062
|
-
private anchorTopBtn;
|
|
1063
|
-
private anchorMiddleBtn;
|
|
1064
|
-
private anchorBottomBtn;
|
|
1065
|
-
private alignIcon;
|
|
1066
|
-
private transformBtn;
|
|
1067
|
-
private underlineBtn;
|
|
1068
|
-
private linethroughBtn;
|
|
1069
|
-
private textEditPopup;
|
|
1070
|
-
private textEditArea;
|
|
1071
|
-
private textEditDebounceTimer;
|
|
1072
|
-
private autocompletePopup;
|
|
1073
|
-
private autocompleteItems;
|
|
1074
|
-
private autocompleteVisible;
|
|
1075
|
-
private autocompleteFilter;
|
|
1076
|
-
private autocompleteStartPos;
|
|
1077
|
-
private selectedAutocompleteIndex;
|
|
1078
|
-
private backgroundPopup;
|
|
1079
|
-
private backgroundColorPicker;
|
|
1080
|
-
private fontColorPopup;
|
|
1081
|
-
private fontColorPicker;
|
|
1082
|
-
private colorDisplay;
|
|
1083
|
-
private animationPopup;
|
|
1084
|
-
private animationDurationSlider;
|
|
1085
|
-
private animationDurationValue;
|
|
1086
|
-
private animationStyleSection;
|
|
1087
|
-
private animationDirectionSection;
|
|
1088
|
-
/**
|
|
1089
|
-
* Per-control drag state manager.
|
|
1090
|
-
*/
|
|
1091
|
-
private dragManager;
|
|
1092
|
-
private lastSyncedClipId;
|
|
1093
|
-
private currentAnimationDuration;
|
|
1094
|
-
private transitionPopup;
|
|
1095
|
-
private transitionPanel;
|
|
1096
|
-
private effectPopup;
|
|
1097
|
-
private effectPanel;
|
|
1098
|
-
private stylePopup;
|
|
1099
|
-
private stylePanel;
|
|
1100
|
-
private boundHandleClick;
|
|
1101
|
-
constructor(edit: Edit, options?: RichTextToolbarOptions);
|
|
1102
|
-
private getShotstackEdit;
|
|
1103
|
-
mount(parent: HTMLElement): void;
|
|
1104
|
-
private handleClick;
|
|
1105
|
-
private getCurrentAsset;
|
|
1106
|
-
private updateSize;
|
|
1107
|
-
private static readonly FONT_WEIGHTS;
|
|
1108
|
-
private static readonly CHECKMARK_SVG;
|
|
1109
|
-
/** Single source of truth for weight normalization - handles string, number, or object */
|
|
1110
|
-
private normalizeWeight;
|
|
1111
|
-
private getWeightName;
|
|
1112
|
-
private toggleWeightPopup;
|
|
1113
|
-
/** Build popup once at mount - uses event delegation (no per-item listeners) */
|
|
1114
|
-
private buildWeightPopup;
|
|
1115
|
-
/** Update active state without rebuilding DOM */
|
|
1116
|
-
private updateWeightPopupState;
|
|
1117
|
-
private setFontWeight;
|
|
1118
|
-
private toggleSizePopup;
|
|
1119
|
-
/** Build popup once at mount - uses event delegation (no per-item listeners) */
|
|
1120
|
-
private buildSizePopup;
|
|
1121
|
-
/** Update active state without rebuilding DOM */
|
|
1122
|
-
private updateSizePopupState;
|
|
1123
|
-
private applyManualSize;
|
|
1124
|
-
private toggleSpacingPopup;
|
|
1125
|
-
private toggleAnimationPopup;
|
|
1126
|
-
private toggleFontColorPopup;
|
|
1127
|
-
private toggleFontPopup;
|
|
1128
|
-
private toggleTextEditPopup;
|
|
1129
|
-
private debouncedApplyTextEdit;
|
|
1130
|
-
private applyTextEdit;
|
|
1131
|
-
private checkAutocomplete;
|
|
1132
|
-
private showAutocomplete;
|
|
1133
|
-
private hideAutocomplete;
|
|
1134
|
-
private insertVariable;
|
|
1135
|
-
private insertSelectedVariable;
|
|
1136
|
-
private getFilteredFieldCount;
|
|
1137
|
-
private buildFontPicker;
|
|
1138
|
-
private getDisplayName;
|
|
1139
|
-
/**
|
|
1140
|
-
* Live update animation property during drag.
|
|
1141
|
-
*/
|
|
1142
|
-
private updateAnimationLive;
|
|
1143
|
-
/**
|
|
1144
|
-
* Capture current clip state for two-phase drag pattern (Phase 1).
|
|
1145
|
-
* Creates a deep clone of the clip's current state to enable command rollback on drag end.
|
|
1146
|
-
*
|
|
1147
|
-
* @returns Object with clipId and cloned initial state, or null if no clip selected
|
|
1148
|
-
*/
|
|
1149
|
-
private captureClipState;
|
|
1150
|
-
private selectFont;
|
|
1151
|
-
private updateVerticalAlign;
|
|
1152
|
-
private cycleAlignment;
|
|
1153
|
-
private updateAlignment;
|
|
1154
|
-
private updateAlignIcon;
|
|
1155
|
-
private cycleTransform;
|
|
1156
|
-
private toggleUnderline;
|
|
1157
|
-
private toggleLinethrough;
|
|
1158
|
-
private updateBorderProperty;
|
|
1159
|
-
private updateShadowProperty;
|
|
1160
|
-
private updateAnimationProperty;
|
|
1161
|
-
private updateAnimationSections;
|
|
1162
|
-
private updateBackgroundProperty;
|
|
1163
|
-
/**
|
|
1164
|
-
* Remove background property entirely (sets to undefined).
|
|
1165
|
-
*/
|
|
1166
|
-
private removeBackgroundProperty;
|
|
1167
|
-
private updatePaddingProperty;
|
|
1168
|
-
private updateFontColorProperty;
|
|
1169
|
-
private updateClipProperty;
|
|
1170
|
-
private applyClipUpdate;
|
|
1171
|
-
protected getPopupList(): (HTMLElement | null)[];
|
|
1172
|
-
protected syncState(): void;
|
|
1173
|
-
dispose(): void;
|
|
1174
|
-
}
|
|
1175
|
-
|
|
1176
|
-
declare interface RichTextToolbarOptions {
|
|
1177
|
-
mergeFields?: boolean;
|
|
392
|
+
/**
|
|
393
|
+
* Read-only view of an EventEmitter that only exposes subscription methods.
|
|
394
|
+
* Used as the public `events` type on Edit to prevent consumers from emitting events.
|
|
395
|
+
*/
|
|
396
|
+
declare interface ReadonlyEventEmitter<TEventPayloadMap extends EventPayloadMap> {
|
|
397
|
+
on<K extends keyof TEventPayloadMap>(name: K, listener: Listener<TEventPayloadMap[K]>): () => void;
|
|
398
|
+
once<K extends keyof TEventPayloadMap>(name: K, listener: Listener<TEventPayloadMap[K]>): () => void;
|
|
399
|
+
off<K extends keyof TEventPayloadMap>(name: K, listener: Listener<TEventPayloadMap[K]>): void;
|
|
1178
400
|
}
|
|
1179
401
|
|
|
1180
402
|
/**
|
|
@@ -1187,166 +409,11 @@ declare type Seconds = number & {
|
|
|
1187
409
|
|
|
1188
410
|
declare const SecondsSymbol: unique symbol;
|
|
1189
411
|
|
|
1190
|
-
export declare class SelectionHandles implements CanvasOverlayRegistration {
|
|
1191
|
-
private edit;
|
|
1192
|
-
private container;
|
|
1193
|
-
private outline;
|
|
1194
|
-
private handles;
|
|
1195
|
-
private edgeHandles;
|
|
1196
|
-
private app;
|
|
1197
|
-
private positionBuilder;
|
|
1198
|
-
private dimensionContainer;
|
|
1199
|
-
private dimensionBackground;
|
|
1200
|
-
private dimensionLabel;
|
|
1201
|
-
private selectedPlayer;
|
|
1202
|
-
private selectedClipId;
|
|
1203
|
-
private selectedTrackIndex;
|
|
1204
|
-
private selectedClipIndex;
|
|
1205
|
-
private isHovering;
|
|
1206
|
-
private isDragging;
|
|
1207
|
-
private dragOffset;
|
|
1208
|
-
private scaleDirection;
|
|
1209
|
-
private edgeDragDirection;
|
|
1210
|
-
private edgeDragStart;
|
|
1211
|
-
private originalDimensions;
|
|
1212
|
-
private isRotating;
|
|
1213
|
-
private rotationStart;
|
|
1214
|
-
private initialRotation;
|
|
1215
|
-
private rotationCorner;
|
|
1216
|
-
private initialClipConfiguration;
|
|
1217
|
-
private finalDragState;
|
|
1218
|
-
private onClipSelectedBound;
|
|
1219
|
-
private onSelectionClearedBound;
|
|
1220
|
-
private onPointerDownBound;
|
|
1221
|
-
private onPointerMoveBound;
|
|
1222
|
-
private onPointerUpBound;
|
|
1223
|
-
constructor(edit: Edit);
|
|
1224
|
-
mount(parent: pixi.Container, app: pixi.Application): void;
|
|
1225
|
-
update(_deltaTime: number, _elapsed: number): void;
|
|
1226
|
-
draw(): void;
|
|
1227
|
-
dispose(): void;
|
|
1228
|
-
private onClipSelected;
|
|
1229
|
-
private onSelectionCleared;
|
|
1230
|
-
private syncToPlayer;
|
|
1231
|
-
private drawOutline;
|
|
1232
|
-
private drawHandles;
|
|
1233
|
-
private drawEdgeHandles;
|
|
1234
|
-
private getUIScale;
|
|
1235
|
-
private onPointerDown;
|
|
1236
|
-
private onPointerMove;
|
|
1237
|
-
private onPointerUp;
|
|
1238
|
-
private startDrag;
|
|
1239
|
-
private handleDrag;
|
|
1240
|
-
private startCornerResize;
|
|
1241
|
-
private handleCornerResize;
|
|
1242
|
-
private startEdgeResize;
|
|
1243
|
-
private handleEdgeResize;
|
|
1244
|
-
private startRotation;
|
|
1245
|
-
private handleRotation;
|
|
1246
|
-
private showDimensionLabel;
|
|
1247
|
-
private hideDimensionLabel;
|
|
1248
|
-
private captureOriginalDimensions;
|
|
1249
|
-
private getContentCenter;
|
|
1250
|
-
private getRotationCorner;
|
|
1251
|
-
private getCornerResizeCursor;
|
|
1252
|
-
private updateHoverState;
|
|
1253
|
-
private resetDragState;
|
|
1254
|
-
}
|
|
1255
|
-
|
|
1256
|
-
export declare type ShapeAsset = components["schemas"]["ShapeAsset"];
|
|
1257
|
-
|
|
1258
|
-
export { ShapeAssetSchema }
|
|
1259
|
-
|
|
1260
|
-
export declare type Soundtrack = components["schemas"]["Soundtrack"];
|
|
1261
|
-
|
|
1262
|
-
export declare type TextAsset = components["schemas"]["TextAsset"];
|
|
1263
|
-
|
|
1264
|
-
export { TextAssetSchema }
|
|
1265
|
-
|
|
1266
|
-
export declare type TextToImageAsset = components["schemas"]["TextToImageAsset"];
|
|
1267
|
-
|
|
1268
|
-
export { TextToImageAssetSchema }
|
|
1269
|
-
|
|
1270
|
-
export declare class TextToolbar extends BaseToolbar {
|
|
1271
|
-
private textEditBtn;
|
|
1272
|
-
private textEditPopup;
|
|
1273
|
-
private textEditArea;
|
|
1274
|
-
private textEditDebounceTimer;
|
|
1275
|
-
private sizeInput;
|
|
1276
|
-
private sizePopup;
|
|
1277
|
-
private fontBtn;
|
|
1278
|
-
private fontPopup;
|
|
1279
|
-
private fontPreview;
|
|
1280
|
-
private boldBtn;
|
|
1281
|
-
private fontColorBtn;
|
|
1282
|
-
private fontColorPopup;
|
|
1283
|
-
private fontColorInput;
|
|
1284
|
-
private colorDisplay;
|
|
1285
|
-
private spacingBtn;
|
|
1286
|
-
private spacingPopup;
|
|
1287
|
-
private spacingPanel;
|
|
1288
|
-
private anchorTopBtn;
|
|
1289
|
-
private anchorMiddleBtn;
|
|
1290
|
-
private anchorBottomBtn;
|
|
1291
|
-
private alignBtn;
|
|
1292
|
-
private alignIcon;
|
|
1293
|
-
private backgroundBtn;
|
|
1294
|
-
private backgroundPopup;
|
|
1295
|
-
private bgColorInput;
|
|
1296
|
-
private bgOpacitySlider;
|
|
1297
|
-
private bgOpacityValue;
|
|
1298
|
-
private strokeBtn;
|
|
1299
|
-
private strokePopup;
|
|
1300
|
-
private strokeWidthSlider;
|
|
1301
|
-
private strokeWidthValue;
|
|
1302
|
-
private strokeColorInput;
|
|
1303
|
-
private transitionBtn;
|
|
1304
|
-
private transitionPopup;
|
|
1305
|
-
private transitionPanel;
|
|
1306
|
-
private effectBtn;
|
|
1307
|
-
private effectPopup;
|
|
1308
|
-
private effectPanel;
|
|
1309
|
-
private boundHandleClick;
|
|
1310
|
-
private getShotstackEdit;
|
|
1311
|
-
mount(parent: HTMLElement): void;
|
|
1312
|
-
private bindElements;
|
|
1313
|
-
private setupEventListeners;
|
|
1314
|
-
private mountCompositePanels;
|
|
1315
|
-
private handleClick;
|
|
1316
|
-
protected getPopupList(): (HTMLElement | null)[];
|
|
1317
|
-
private buildFontPopup;
|
|
1318
|
-
private buildSizePopup;
|
|
1319
|
-
private getCurrentAsset;
|
|
1320
|
-
private updateAssetProperty;
|
|
1321
|
-
private debouncedApplyTextEdit;
|
|
1322
|
-
private adjustSize;
|
|
1323
|
-
private setSize;
|
|
1324
|
-
private applyManualSize;
|
|
1325
|
-
private setFont;
|
|
1326
|
-
private updateFontActiveState;
|
|
1327
|
-
private toggleBold;
|
|
1328
|
-
private handleFontColorChange;
|
|
1329
|
-
private setVerticalAnchor;
|
|
1330
|
-
private updateAnchorActiveState;
|
|
1331
|
-
private cycleAlignment;
|
|
1332
|
-
private updateAlignmentIcon;
|
|
1333
|
-
private handleBackgroundChange;
|
|
1334
|
-
private handleStrokeChange;
|
|
1335
|
-
private applyClipUpdate;
|
|
1336
|
-
protected syncState(): void;
|
|
1337
|
-
dispose(): void;
|
|
1338
|
-
}
|
|
1339
|
-
|
|
1340
|
-
export declare type TextToSpeechAsset = components["schemas"]["TextToSpeechAsset"];
|
|
1341
|
-
|
|
1342
|
-
export { TextToSpeechAssetSchema }
|
|
1343
|
-
|
|
1344
412
|
export declare class Timeline {
|
|
1345
413
|
private readonly edit;
|
|
1346
414
|
readonly element: HTMLElement;
|
|
1347
415
|
private readonly container;
|
|
1348
416
|
private readonly stateManager;
|
|
1349
|
-
private features;
|
|
1350
417
|
private clipRenderers;
|
|
1351
418
|
private thumbnailGenerator;
|
|
1352
419
|
private mediaThumbnailRenderer;
|
|
@@ -1371,11 +438,9 @@ export declare class Timeline {
|
|
|
1371
438
|
private readonly handleClipLoadFailed;
|
|
1372
439
|
private readonly handleClipUpdated;
|
|
1373
440
|
private readonly handleRulerMouseMove;
|
|
1374
|
-
constructor(edit: Edit, container: HTMLElement
|
|
441
|
+
constructor(edit: Edit, container: HTMLElement);
|
|
1375
442
|
/** Initialize and mount the timeline */
|
|
1376
443
|
load(): Promise<void>;
|
|
1377
|
-
/** Render/draw component to DOM (called each frame after update) */
|
|
1378
|
-
draw(): void;
|
|
1379
444
|
/** Clean up and unmount the timeline */
|
|
1380
445
|
dispose(): void;
|
|
1381
446
|
/**
|
|
@@ -1392,162 +457,12 @@ export declare class Timeline {
|
|
|
1392
457
|
private tick;
|
|
1393
458
|
/** Request a single render (used when idle and data changes) */
|
|
1394
459
|
private requestRender;
|
|
1395
|
-
/** Mark interaction as started (enables render loop) */
|
|
1396
|
-
beginInteraction(): void;
|
|
1397
|
-
/** Mark interaction as ended (may stop render loop) */
|
|
1398
|
-
endInteraction(): void;
|
|
1399
460
|
private buildComponents;
|
|
1400
461
|
private disposeComponents;
|
|
1401
|
-
setZoom(pixelsPerSecond: number): void;
|
|
1402
462
|
zoomIn(): void;
|
|
1403
463
|
zoomOut(): void;
|
|
1404
|
-
scrollTo(time: Seconds): void;
|
|
1405
|
-
/** Recalculate size from container and re-render */
|
|
1406
|
-
resize(): void;
|
|
1407
|
-
selectClip(trackIndex: number, clipIndex: number): void;
|
|
1408
|
-
clearSelection(): void;
|
|
1409
|
-
enableFeature(feature: keyof TimelineFeatures): void;
|
|
1410
|
-
disableFeature(feature: keyof TimelineFeatures): void;
|
|
1411
|
-
registerClipRenderer(type: string, renderer: ClipRenderer): void;
|
|
1412
|
-
getEdit(): Edit;
|
|
1413
|
-
findClipAtPosition(x: number, y: number): ClipInfo | null;
|
|
1414
|
-
}
|
|
1415
|
-
|
|
1416
|
-
/** Feature toggles for Timeline */
|
|
1417
|
-
export declare interface TimelineFeatures {
|
|
1418
|
-
/** Show toolbar with playback controls */
|
|
1419
|
-
toolbar?: boolean;
|
|
1420
|
-
/** Show time ruler */
|
|
1421
|
-
ruler?: boolean;
|
|
1422
|
-
/** Show playhead indicator */
|
|
1423
|
-
playhead?: boolean;
|
|
1424
|
-
/** Enable snap-to-grid/clips */
|
|
1425
|
-
snap?: boolean;
|
|
1426
|
-
/** Show timing intent badges on clips */
|
|
1427
|
-
badges?: boolean;
|
|
1428
|
-
/** Enable multi-select with shift/ctrl+click */
|
|
1429
|
-
multiSelect?: boolean;
|
|
1430
|
-
}
|
|
1431
|
-
|
|
1432
|
-
/** Interaction configuration */
|
|
1433
|
-
declare interface TimelineInteractionConfig {
|
|
1434
|
-
/** Minimum pixels to move before starting drag */
|
|
1435
|
-
dragThreshold?: number;
|
|
1436
|
-
/** Snap distance in pixels */
|
|
1437
|
-
snapThreshold?: number;
|
|
1438
|
-
/** Width of resize zone at clip edges */
|
|
1439
|
-
resizeZone?: number;
|
|
1440
|
-
/** Callback to request timeline re-render */
|
|
1441
|
-
onRequestRender?: () => void;
|
|
1442
|
-
}
|
|
1443
|
-
|
|
1444
|
-
/** Configuration options for Timeline */
|
|
1445
|
-
export declare interface TimelineOptions {
|
|
1446
|
-
/** Feature toggles */
|
|
1447
|
-
features?: TimelineFeatures;
|
|
1448
|
-
/** Interaction configuration */
|
|
1449
|
-
interaction?: TimelineInteractionConfig;
|
|
1450
|
-
/** Initial pixels per second (zoom level) */
|
|
1451
|
-
pixelsPerSecond?: number;
|
|
1452
|
-
/** Track height in pixels */
|
|
1453
|
-
trackHeight?: number;
|
|
1454
464
|
}
|
|
1455
465
|
|
|
1456
|
-
export { TimelineSchema }
|
|
1457
|
-
|
|
1458
|
-
export declare interface TimelineTheme {
|
|
1459
|
-
timeline: {
|
|
1460
|
-
background: number;
|
|
1461
|
-
divider: number;
|
|
1462
|
-
toolbar: {
|
|
1463
|
-
background: number;
|
|
1464
|
-
surface: number;
|
|
1465
|
-
hover: number;
|
|
1466
|
-
active: number;
|
|
1467
|
-
divider: number;
|
|
1468
|
-
icon: number;
|
|
1469
|
-
text: number;
|
|
1470
|
-
height: number;
|
|
1471
|
-
};
|
|
1472
|
-
ruler: {
|
|
1473
|
-
background: number;
|
|
1474
|
-
text: number;
|
|
1475
|
-
markers: number;
|
|
1476
|
-
height: number;
|
|
1477
|
-
};
|
|
1478
|
-
tracks: {
|
|
1479
|
-
surface: number;
|
|
1480
|
-
surfaceAlt: number;
|
|
1481
|
-
border: number;
|
|
1482
|
-
height: number;
|
|
1483
|
-
};
|
|
1484
|
-
clips: {
|
|
1485
|
-
video: number;
|
|
1486
|
-
audio: number;
|
|
1487
|
-
image: number;
|
|
1488
|
-
text: number;
|
|
1489
|
-
"rich-text": number;
|
|
1490
|
-
shape: number;
|
|
1491
|
-
html: number;
|
|
1492
|
-
luma: number;
|
|
1493
|
-
default: number;
|
|
1494
|
-
selected: number;
|
|
1495
|
-
radius: number;
|
|
1496
|
-
};
|
|
1497
|
-
playhead: number;
|
|
1498
|
-
snapGuide: number;
|
|
1499
|
-
dropZone: number;
|
|
1500
|
-
trackInsertion: number;
|
|
1501
|
-
};
|
|
1502
|
-
}
|
|
1503
|
-
|
|
1504
|
-
export declare interface TimelineThemeInput {
|
|
1505
|
-
timeline: {
|
|
1506
|
-
background: string;
|
|
1507
|
-
divider: string;
|
|
1508
|
-
toolbar: {
|
|
1509
|
-
background: string;
|
|
1510
|
-
surface: string;
|
|
1511
|
-
hover: string;
|
|
1512
|
-
active: string;
|
|
1513
|
-
divider: string;
|
|
1514
|
-
icon: string;
|
|
1515
|
-
text: string;
|
|
1516
|
-
height?: number;
|
|
1517
|
-
};
|
|
1518
|
-
ruler: {
|
|
1519
|
-
background: string;
|
|
1520
|
-
text: string;
|
|
1521
|
-
markers: string;
|
|
1522
|
-
height?: number;
|
|
1523
|
-
};
|
|
1524
|
-
tracks: {
|
|
1525
|
-
surface: string;
|
|
1526
|
-
surfaceAlt: string;
|
|
1527
|
-
border: string;
|
|
1528
|
-
height?: number;
|
|
1529
|
-
};
|
|
1530
|
-
clips: {
|
|
1531
|
-
video: string;
|
|
1532
|
-
audio: string;
|
|
1533
|
-
image: string;
|
|
1534
|
-
text: string;
|
|
1535
|
-
shape: string;
|
|
1536
|
-
html: string;
|
|
1537
|
-
luma: string;
|
|
1538
|
-
default: string;
|
|
1539
|
-
selected: string;
|
|
1540
|
-
radius?: number;
|
|
1541
|
-
};
|
|
1542
|
-
playhead: string;
|
|
1543
|
-
snapGuide: string;
|
|
1544
|
-
dropZone: string;
|
|
1545
|
-
trackInsertion: string;
|
|
1546
|
-
};
|
|
1547
|
-
}
|
|
1548
|
-
|
|
1549
|
-
export declare type TitleAsset = components["schemas"]["TitleAsset"];
|
|
1550
|
-
|
|
1551
466
|
/**
|
|
1552
467
|
* Configuration for a toolbar button.
|
|
1553
468
|
*/
|
|
@@ -1562,68 +477,19 @@ export declare interface ToolbarButtonConfig {
|
|
|
1562
477
|
dividerBefore?: boolean;
|
|
1563
478
|
}
|
|
1564
479
|
|
|
1565
|
-
declare
|
|
1566
|
-
getState(): ToolbarDragState;
|
|
1567
|
-
dispose(): void;
|
|
1568
|
-
}
|
|
1569
|
-
|
|
1570
|
-
declare interface ToolbarDragState {
|
|
1571
|
-
readonly hasUserPosition: boolean;
|
|
1572
|
-
readonly userX: number;
|
|
1573
|
-
readonly userY: number;
|
|
1574
|
-
}
|
|
1575
|
-
|
|
1576
|
-
export declare type Track = components["schemas"]["Track"];
|
|
1577
|
-
|
|
1578
|
-
export { TrackSchema }
|
|
1579
|
-
|
|
1580
|
-
export declare class TranscriptionIndicator extends Entity {
|
|
1581
|
-
private background;
|
|
1582
|
-
private spinner;
|
|
1583
|
-
private statusText;
|
|
1584
|
-
private spinnerAngle;
|
|
1585
|
-
private isVisible;
|
|
1586
|
-
private currentMessage;
|
|
1587
|
-
load(): Promise<void>;
|
|
1588
|
-
show(message: string): void;
|
|
1589
|
-
hide(): void;
|
|
1590
|
-
getIsVisible(): boolean;
|
|
1591
|
-
update(deltaTime: number, _elapsed: number): void;
|
|
1592
|
-
private redraw;
|
|
1593
|
-
setPosition(x: number, y: number): void;
|
|
1594
|
-
getWidth(): number;
|
|
1595
|
-
dispose(): void;
|
|
1596
|
-
}
|
|
1597
|
-
|
|
1598
|
-
export declare type Transformation = components["schemas"]["Transformation"];
|
|
1599
|
-
|
|
1600
|
-
export { TransformationSchema }
|
|
1601
|
-
|
|
1602
|
-
export declare type Transition = components["schemas"]["Transition"];
|
|
1603
|
-
|
|
1604
|
-
export { TransitionSchema }
|
|
1605
|
-
|
|
1606
|
-
export declare type Tween = components["schemas"]["Tween"];
|
|
1607
|
-
|
|
1608
|
-
export { tweenSchema as KeyframeSchema }
|
|
1609
|
-
export { tweenSchema as TweenSchema }
|
|
480
|
+
declare type Track = components["schemas"]["Track"];
|
|
1610
481
|
|
|
1611
482
|
/**
|
|
1612
483
|
* Controller for managing UI elements (toolbars, utilities) separately from Canvas.
|
|
1613
484
|
*
|
|
1614
485
|
* This enables:
|
|
1615
486
|
* - Pure preview mode (Canvas without UI)
|
|
1616
|
-
* - Custom toolbar registration
|
|
1617
487
|
* - Optional UI element loading
|
|
1618
488
|
*
|
|
1619
489
|
* @example
|
|
1620
490
|
* ```typescript
|
|
1621
|
-
* // Standard setup with all toolbars
|
|
1622
491
|
* const ui = UIController.create(edit, canvas, { mergeFields: true });
|
|
1623
|
-
*
|
|
1624
|
-
* // Minimal setup for custom toolbars
|
|
1625
|
-
* const ui = UIController.minimal(edit, canvas);
|
|
1626
|
-
* ui.registerToolbar('text', new CustomTextToolbar(edit));
|
|
492
|
+
* ui.registerButton({ id: "text", icon: "...", tooltip: "Add Text" });
|
|
1627
493
|
* ```
|
|
1628
494
|
*/
|
|
1629
495
|
export declare class UIController {
|
|
@@ -1673,7 +539,7 @@ export declare class UIController {
|
|
|
1673
539
|
static create(edit: Edit, canvas: Canvas, options?: UIControllerOptions): UIController;
|
|
1674
540
|
/**
|
|
1675
541
|
* Create a minimal UIController without pre-registered toolbars.
|
|
1676
|
-
* Use this when you
|
|
542
|
+
* Use this when you only need custom buttons without default toolbars.
|
|
1677
543
|
*
|
|
1678
544
|
* @param edit - The Edit instance
|
|
1679
545
|
* @param canvas - Optional Canvas instance
|
|
@@ -1682,8 +548,7 @@ export declare class UIController {
|
|
|
1682
548
|
* @example
|
|
1683
549
|
* ```typescript
|
|
1684
550
|
* const ui = UIController.minimal(edit, canvas);
|
|
1685
|
-
* ui.
|
|
1686
|
-
* ui.registerToolbar('video', new CustomVideoToolbar(edit));
|
|
551
|
+
* ui.registerButton({ id: "text", icon: "...", tooltip: "Add Text" });
|
|
1687
552
|
* ```
|
|
1688
553
|
*/
|
|
1689
554
|
static minimal(edit: Edit, canvas?: Canvas): UIController;
|
|
@@ -1700,31 +565,6 @@ export declare class UIController {
|
|
|
1700
565
|
* Register all standard toolbars. Called by create() factory.
|
|
1701
566
|
*/
|
|
1702
567
|
private registerStandardToolbars;
|
|
1703
|
-
/**
|
|
1704
|
-
* Register a toolbar for one or more asset types.
|
|
1705
|
-
* When a clip of that type is selected, the toolbar will be shown.
|
|
1706
|
-
*
|
|
1707
|
-
* @param assetTypes - Single type or array of types (e.g., 'text', ['video', 'image'])
|
|
1708
|
-
* @param toolbar - The toolbar component implementing UIRegistration
|
|
1709
|
-
* @returns this (for chaining)
|
|
1710
|
-
*/
|
|
1711
|
-
registerToolbar(assetTypes: string | string[], toolbar: UIRegistration): this;
|
|
1712
|
-
/**
|
|
1713
|
-
* Register a utility component (Inspector, TranscriptionIndicator, etc.).
|
|
1714
|
-
* Utilities are mounted but not tied to clip selection.
|
|
1715
|
-
*
|
|
1716
|
-
* @param component - The utility component implementing UIRegistration
|
|
1717
|
-
* @returns this (for chaining)
|
|
1718
|
-
*/
|
|
1719
|
-
registerUtility(component: UIRegistration): this;
|
|
1720
|
-
/**
|
|
1721
|
-
* Register a PixiJS-based canvas overlay (SelectionHandles, AlignmentGuides, etc.).
|
|
1722
|
-
* Overlays render on the canvas and receive update/draw calls each frame.
|
|
1723
|
-
*
|
|
1724
|
-
* @param overlay - The overlay component implementing CanvasOverlayRegistration
|
|
1725
|
-
* @returns this (for chaining)
|
|
1726
|
-
*/
|
|
1727
|
-
registerCanvasOverlay(overlay: CanvasOverlayRegistration): this;
|
|
1728
568
|
/**
|
|
1729
569
|
* Mount all registered UI components to a container.
|
|
1730
570
|
* Should be called after all registrations are complete.
|
|
@@ -1732,32 +572,14 @@ export declare class UIController {
|
|
|
1732
572
|
* @param container - The DOM element to mount UI components into
|
|
1733
573
|
*/
|
|
1734
574
|
mount(container: HTMLElement): void;
|
|
1735
|
-
/**
|
|
1736
|
-
* Update all canvas overlays. Called by Canvas each tick.
|
|
1737
|
-
*/
|
|
1738
|
-
updateOverlays(deltaTime: number, elapsed: number): void;
|
|
1739
575
|
/**
|
|
1740
576
|
* Position a sidebar toolbar at autoX/autoY, applying the user's drag offset if present.
|
|
1741
577
|
*/
|
|
1742
578
|
private applySidebarPosition;
|
|
1743
|
-
/**
|
|
1744
|
-
* Update toolbar positions to be adjacent to the canvas content.
|
|
1745
|
-
* Uses position: fixed with screen coordinates for complete independence from parent CSS.
|
|
1746
|
-
* Called by Canvas after zoom, pan, or resize operations.
|
|
1747
|
-
*/
|
|
1748
|
-
updateToolbarPositions(): void;
|
|
1749
579
|
/**
|
|
1750
580
|
* Dispose all registered UI components and clean up event listeners.
|
|
1751
581
|
*/
|
|
1752
582
|
dispose(): void;
|
|
1753
|
-
/**
|
|
1754
|
-
* Get the toolbar registered for a specific asset type.
|
|
1755
|
-
*/
|
|
1756
|
-
getToolbar(assetType: string): UIRegistration | undefined;
|
|
1757
|
-
/**
|
|
1758
|
-
* Check if a toolbar is registered for an asset type.
|
|
1759
|
-
*/
|
|
1760
|
-
hasToolbar(assetType: string): boolean;
|
|
1761
583
|
/**
|
|
1762
584
|
* Register a toolbar button.
|
|
1763
585
|
* Buttons appear in the left toolbar and trigger events when clicked.
|
|
@@ -1786,10 +608,6 @@ export declare class UIController {
|
|
|
1786
608
|
* @returns this (for chaining)
|
|
1787
609
|
*/
|
|
1788
610
|
unregisterButton(id: string): this;
|
|
1789
|
-
/**
|
|
1790
|
-
* Get all registered toolbar buttons.
|
|
1791
|
-
*/
|
|
1792
|
-
getButtons(): ToolbarButtonConfig[];
|
|
1793
611
|
/**
|
|
1794
612
|
* Subscribe to a button click event.
|
|
1795
613
|
*
|
|
@@ -1805,10 +623,6 @@ export declare class UIController {
|
|
|
1805
623
|
* @returns Unsubscribe function
|
|
1806
624
|
*/
|
|
1807
625
|
on<K extends `button:${string}`>(event: K, handler: (payload: ButtonClickPayload) => void): () => void;
|
|
1808
|
-
/**
|
|
1809
|
-
* Unsubscribe from a button click event.
|
|
1810
|
-
*/
|
|
1811
|
-
off<K extends `button:${string}`>(event: K, handler: (payload: ButtonClickPayload) => void): void;
|
|
1812
626
|
/**
|
|
1813
627
|
* Set the toolbar mode and update visibility accordingly.
|
|
1814
628
|
* @param mode - "asset" shows asset-specific toolbar, "clip" shows ClipToolbar
|
|
@@ -1851,27 +665,8 @@ export declare interface UIControllerOptions {
|
|
|
1851
665
|
maxPixels?: number;
|
|
1852
666
|
}
|
|
1853
667
|
|
|
1854
|
-
/**
|
|
1855
|
-
* Interface for HTML/DOM UI components that can be registered with UIController.
|
|
1856
|
-
* Toolbars, inspectors, and other UI elements should implement this interface.
|
|
1857
|
-
*/
|
|
1858
|
-
export declare interface UIRegistration {
|
|
1859
|
-
/** Mount the component to a parent container */
|
|
1860
|
-
mount(container: HTMLElement): void;
|
|
1861
|
-
/** Show the component for a specific clip (optional - utilities may not need this) */
|
|
1862
|
-
show?(trackIndex: number, clipIndex: number): void;
|
|
1863
|
-
/** Hide the component */
|
|
1864
|
-
hide?(): void;
|
|
1865
|
-
/** Clean up resources */
|
|
1866
|
-
dispose(): void;
|
|
1867
|
-
}
|
|
1868
|
-
|
|
1869
668
|
export declare const VERSION: string;
|
|
1870
669
|
|
|
1871
|
-
export declare type VideoAsset = components["schemas"]["VideoAsset"];
|
|
1872
|
-
|
|
1873
|
-
export { VideoAssetSchema }
|
|
1874
|
-
|
|
1875
670
|
export declare class VideoExporter {
|
|
1876
671
|
private readonly edit;
|
|
1877
672
|
private readonly canvas;
|