@twick/visualizer 0.15.16 → 0.15.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twick/visualizer",
-  "version": "0.15.16",
+  "version": "0.15.19",
   "license": "https://github.com/ncounterspecialist/twick/blob/main/LICENSE.md",
   "scripts": {
     "start": "twick editor --projectFile ./src/live.tsx",
@@ -22,18 +22,18 @@
   },
   "dependencies": {
     "@preact/signals": "^1.2.1",
-    "@twick/2d": "^0.15.16",
-    "@twick/core": "^0.15.16",
-    "@twick/renderer": "^0.15.16",
-    "@twick/vite-plugin": "^0.15.16",
+    "@twick/2d": "^0.15.19",
+    "@twick/core": "^0.15.19",
+    "@twick/renderer": "^0.15.19",
+    "@twick/vite-plugin": "^0.15.19",
     "date-fns": "^4.1.0",
     "preact": "^10.19.2",
     "crelt": "^1.0.6",
-    "@twick/media-utils": "0.15.16"
+    "@twick/media-utils": "0.15.19"
   },
   "devDependencies": {
-    "@twick/cli": "^0.15.16",
-    "@twick/ui": "^0.15.16",
+    "@twick/cli": "^0.15.19",
+    "@twick/ui": "^0.15.19",
     "typescript": "5.4.2",
     "typedoc": "^0.25.8",
     "typedoc-plugin-markdown": "^3.17.1",

package/src/elements/audio.element.tsx

@@ -69,8 +69,20 @@ export const AudioElement = {
   *create({ containerRef, element, view }: ElementParams) {
     const elementRef = createRef<any>();
     yield* waitFor(element?.s);
+    const trimStart = element.props?.time ?? 0;
+    const playbackRate = element.props?.playbackRate ?? 1;
+    // Clip-relative time so audio content starts at 0 when clip starts at element.s.
+    const time = (trimStart + (view.globalTime() - element.s)) * playbackRate;
     yield containerRef().add(
-      <Audio ref={elementRef} key={element.id} play={true} {...element.props} />
+      <Audio
+        ref={elementRef}
+        key={element.id}
+        play={true}
+        {...element.props}
+        time={time}
+        clipStart={element.s}
+        trimStart={trimStart}
+      />
     );
     yield* waitFor(Math.max(0, element.e - element.s));
     yield elementRef().play(false);

package/src/elements/video.element.tsx

@@ -229,7 +229,10 @@ export const VideoElement = {
     yield* waitFor(element?.s);
     const frameContainerRef = createRef<any>();
     const frameElementRef = createRef<any>();
-
+    const trimStart = element.props?.time ?? 0;
+    const playbackRate = element.props?.playbackRate ?? 1;
+    // Clip-relative time so video content starts at 0 when clip starts at element.s.
+    const time = (trimStart + (view.globalTime() - element.s)) * playbackRate;
     yield containerRef().add(
       <Rect ref={frameContainerRef} key={element.id} {...element.frame}>
         <Video
@@ -237,6 +240,9 @@ export const VideoElement = {
           key={`child-${element.id}`}
           play={true}
           {...element.props}
+          time={time}
+          clipStart={element.s}
+          trimStart={trimStart}
         />
       </Rect>
     );