@shotstack/shotstack-studio 2.0.3 → 2.1.0
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 +18 -1
- package/dist/internal.d.ts +4 -0
- package/dist/internal.es.js +3685 -3678
- package/dist/internal.umd.js +34 -34
- package/dist/shotstack-studio.es.js +5388 -5327
- package/dist/shotstack-studio.umd.js +114 -114
- package/package.json +3 -3
- package/readme.md +7 -3
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"dazzatron",
|
|
7
7
|
"kratos2k7"
|
|
8
8
|
],
|
|
9
|
-
"version": "2.0
|
|
9
|
+
"version": "2.1.0",
|
|
10
10
|
"description": "A video editing library for creating and editing videos with Shotstack",
|
|
11
11
|
"type": "module",
|
|
12
12
|
"main": "dist/shotstack-studio.umd.js",
|
|
@@ -87,8 +87,8 @@
|
|
|
87
87
|
"vite-plugin-dts": "^4.5.4"
|
|
88
88
|
},
|
|
89
89
|
"dependencies": {
|
|
90
|
-
"@shotstack/schemas": "1.7
|
|
91
|
-
"@shotstack/shotstack-canvas": "^
|
|
90
|
+
"@shotstack/schemas": "1.8.7",
|
|
91
|
+
"@shotstack/shotstack-canvas": "^2.0.13",
|
|
92
92
|
"howler": "^2.2.4",
|
|
93
93
|
"mediabunny": "^1.11.2",
|
|
94
94
|
"opentype.js": "^1.3.4",
|
package/readme.md
CHANGED
|
@@ -81,7 +81,7 @@ ui.on("button:text", ({ position }) => {
|
|
|
81
81
|
|
|
82
82
|
// 6) Initialize the Timeline
|
|
83
83
|
const timelineContainer = document.querySelector("[data-shotstack-timeline]") as HTMLElement;
|
|
84
|
-
const timeline = new Timeline(edit, timelineContainer);
|
|
84
|
+
const timeline = new Timeline(edit, timelineContainer, { resizable: true });
|
|
85
85
|
await timeline.load();
|
|
86
86
|
|
|
87
87
|
// 7) Add keyboard controls
|
|
@@ -181,7 +181,7 @@ Available event names:
|
|
|
181
181
|
| Category | Event Names |
|
|
182
182
|
| --- | --- |
|
|
183
183
|
| Playback | `playback:play`, `playback:pause` |
|
|
184
|
-
| Timeline | `timeline:updated`, `timeline:backgroundChanged` |
|
|
184
|
+
| Timeline | `timeline:updated`, `timeline:backgroundChanged`, `timeline:resized` |
|
|
185
185
|
| Clip lifecycle | `clip:added`, `clip:selected`, `clip:updated`, `clip:deleted`, `clip:restored`, `clip:copied`, `clip:loadFailed`, `clip:unresolved` |
|
|
186
186
|
| Selection | `selection:cleared` |
|
|
187
187
|
| Edit state | `edit:changed`, `edit:undo`, `edit:redo` |
|
|
@@ -236,11 +236,13 @@ ui.dispose();
|
|
|
236
236
|
|
|
237
237
|
`Timeline` provides visual clip editing.
|
|
238
238
|
|
|
239
|
+
The container must have an explicit CSS `height` (e.g. `height: 300px`) and `overflow: hidden`. Avoid `flex-grow` or `!important` on height — the resize handle sets height via inline style.
|
|
240
|
+
|
|
239
241
|
```typescript
|
|
240
242
|
import { Timeline } from "@shotstack/shotstack-studio";
|
|
241
243
|
|
|
242
244
|
const container = document.querySelector("[data-shotstack-timeline]") as HTMLElement;
|
|
243
|
-
const timeline = new Timeline(edit, container);
|
|
245
|
+
const timeline = new Timeline(edit, container, { resizable: true });
|
|
244
246
|
|
|
245
247
|
await timeline.load();
|
|
246
248
|
timeline.zoomIn();
|
|
@@ -248,6 +250,8 @@ timeline.zoomOut();
|
|
|
248
250
|
timeline.dispose();
|
|
249
251
|
```
|
|
250
252
|
|
|
253
|
+
Pass `{ resizable: false }` to hide the drag handle. When enabled (default), a `timeline:resized` event fires with `{ height }` after the user finishes dragging or double-clicks to reset.
|
|
254
|
+
|
|
251
255
|
### Controls
|
|
252
256
|
|
|
253
257
|
`Controls` enables keyboard playback/edit shortcuts.
|