@shotstack/shotstack-studio 1.1.1 → 1.2.0

package/package.json

@@ -5,7 +5,7 @@
 		"cpuccino",
 		"dazzatron"
 	],
-	"version": "1.1.1",
+	"version": "1.2.0",
 	"description": "A video editing library for creating and editing videos with Shotstack",
 	"type": "module",
 	"main": "dist/shotstack-studio.umd.js",

package/readme.md

@@ -126,11 +126,18 @@ edit.events.on("clip:selected", data => {
 	console.log("Track index:", data.trackIndex);
 	console.log("Clip index:", data.clipIndex);
 });
+
+// Listen for clip update events
+edit.events.on("clip:updated", data => {
+	console.log("Previous state:", data.previous); // { clip, trackIndex, clipIndex }
+	console.log("Current state:", data.current); // { clip, trackIndex, clipIndex }
+});
 ```
 
 Available events:
 
-- `clip:selected` - Emitted when a clip is selected, providing data about the clip, its track index, and clip index
+- `clip:selected` - Emitted when a clip is initially selected, providing data about the clip, its track index, and clip index.
+- `clip:updated` - Emitted when a clip's properties are modified, providing both previous and current states.
 
 ### Canvas
 
@@ -145,6 +152,7 @@ await canvas.load();
 canvas.centerEdit();
 canvas.zoomToFit();
 canvas.setZoom(1.5); // 1.0 is 100%, 0.5 is 50%, etc.
+canvas.dispose(); // Clean up resources when done
 ```
 
 ### Controls
@@ -271,20 +279,8 @@ Creates a new Edit instance with the specified dimensions and background color.
 
 #### Events
 
-The Edit class provides an event system to listen for specific actions:
-
-```typescript
-// Listen for clip selection events
-edit.events.on("clip:selected", data => {
-	console.log("Clip selected:", data.clip);
-	console.log("Track index:", data.trackIndex);
-	console.log("Clip index:", data.clipIndex);
-});
-```
-
-Available events:
-
-- `clip:selected` - Emitted when a clip is selected, providing data about the clip, its track index, and clip index
+- `clip:selected` - Triggered when a clip is selected
+- `clip:updated` - Triggered when a clip is modified
 
 ### Canvas
 
@@ -309,6 +305,7 @@ Creates a new canvas with specified dimensions for rendering the edit.
 - `centerEdit()` - Center the edit in the canvas
 - `zoomToFit()` - Zoom to fit the entire edit
 - `setZoom(zoom: number)` - Set zoom level
+- `dispose()` - Clean up resources and remove the canvas from the DOM
 
 ### Controls