@shotstack/shotstack-studio 2.0.0 → 2.0.1
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/internal.es.js +31594 -16226
- package/dist/internal.umd.js +111 -34
- package/dist/shotstack-studio.es.js +38103 -22623
- package/dist/shotstack-studio.umd.js +306 -223
- package/package.json +1 -1
- package/readme.md +22 -14
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -37,8 +37,7 @@ yarn add @shotstack/shotstack-studio
|
|
|
37
37
|
## Quick Start
|
|
38
38
|
|
|
39
39
|
```typescript
|
|
40
|
-
import { Edit, Canvas, Controls, Timeline, UIController
|
|
41
|
-
import type { EditConfig, UIControllerOptions, ToolbarButtonConfig } from "@shotstack/shotstack-studio";
|
|
40
|
+
import { Edit, Canvas, Controls, Timeline, UIController } from "@shotstack/shotstack-studio";
|
|
42
41
|
|
|
43
42
|
// 1) Load a template
|
|
44
43
|
const response = await fetch("https://shotstack-assets.s3.amazonaws.com/templates/hello-world/hello.json");
|
|
@@ -49,17 +48,18 @@ const edit = new Edit(template);
|
|
|
49
48
|
const canvas = new Canvas(edit);
|
|
50
49
|
const ui = UIController.create(edit, canvas);
|
|
51
50
|
|
|
52
|
-
// 3) Load
|
|
51
|
+
// 3) Load canvas and edit
|
|
53
52
|
await canvas.load();
|
|
54
53
|
await edit.load();
|
|
55
54
|
|
|
56
|
-
// 4)
|
|
55
|
+
// 4) Register toolbar buttons
|
|
57
56
|
ui.registerButton({
|
|
58
57
|
id: "text",
|
|
59
58
|
icon: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3H13"/><path d="M8 3V13"/><path d="M5 13H11"/></svg>`,
|
|
60
59
|
tooltip: "Add Text"
|
|
61
60
|
});
|
|
62
61
|
|
|
62
|
+
// 5) Handle button clicks
|
|
63
63
|
ui.on("button:text", ({ position }) => {
|
|
64
64
|
edit.addTrack(0, {
|
|
65
65
|
clips: [
|
|
@@ -79,13 +79,19 @@ ui.on("button:text", ({ position }) => {
|
|
|
79
79
|
});
|
|
80
80
|
});
|
|
81
81
|
|
|
82
|
-
//
|
|
82
|
+
// 6) Initialize the Timeline
|
|
83
83
|
const timelineContainer = document.querySelector("[data-shotstack-timeline]") as HTMLElement;
|
|
84
84
|
const timeline = new Timeline(edit, timelineContainer);
|
|
85
85
|
await timeline.load();
|
|
86
86
|
|
|
87
|
+
// 7) Add keyboard controls
|
|
87
88
|
const controls = new Controls(edit);
|
|
88
89
|
await controls.load();
|
|
90
|
+
|
|
91
|
+
// 8) Add event handlers
|
|
92
|
+
edit.events.on("clip:selected", data => {
|
|
93
|
+
console.log("Clip selected:", data);
|
|
94
|
+
});
|
|
89
95
|
```
|
|
90
96
|
|
|
91
97
|
Your HTML must include both containers:
|
|
@@ -172,15 +178,17 @@ unsubscribeClipSelected();
|
|
|
172
178
|
|
|
173
179
|
Available event names:
|
|
174
180
|
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
181
|
+
| Category | Event Names |
|
|
182
|
+
| --- | --- |
|
|
183
|
+
| Playback | `playback:play`, `playback:pause` |
|
|
184
|
+
| Timeline | `timeline:updated`, `timeline:backgroundChanged` |
|
|
185
|
+
| Clip lifecycle | `clip:added`, `clip:selected`, `clip:updated`, `clip:deleted`, `clip:restored`, `clip:copied`, `clip:loadFailed`, `clip:unresolved` |
|
|
186
|
+
| Selection | `selection:cleared` |
|
|
187
|
+
| Edit state | `edit:changed`, `edit:undo`, `edit:redo` |
|
|
188
|
+
| Track | `track:added`, `track:removed` |
|
|
189
|
+
| Duration | `duration:changed` |
|
|
190
|
+
| Output | `output:resized`, `output:resolutionChanged`, `output:aspectRatioChanged`, `output:fpsChanged`, `output:formatChanged`, `output:destinationsChanged` |
|
|
191
|
+
| Merge fields | `mergefield:changed` |
|
|
184
192
|
|
|
185
193
|
### Canvas
|
|
186
194
|
|