@twick/visualizer 0.0.1 → 0.14.0

package/src/elements/video.element.tsx

@@ -0,0 +1,56 @@
+import { ElementParams } from "../helpers/types";
+import { all, createRef, waitFor } from "@twick/core";
+import { Rect, Video } from "@twick/2d";
+import { addAnimation, addFrameEffect, fitElement } from "../helpers/element.utils";
+import { logger } from "../helpers/log.utils";
+import { applyColorFilter } from "../helpers/filters";
+
+export const VideoElement = {
+  name: "video",
+  *create({ containerRef, element, view }: ElementParams) {
+    yield* waitFor(element?.s);
+    logger(`Adding video element ${element.id}`);
+    const frameContainerRef = createRef<any>();
+    const frameElementRef = createRef<any>();
+
+    yield containerRef().add(
+      <Rect ref={frameContainerRef} key={element.id} {...element.frame}>
+        <Video
+          ref={frameElementRef}
+          key={`child-${element.id}`}
+          {...element.props}
+        />
+      </Rect>
+    );
+    if (frameContainerRef()) {
+      yield fitElement({
+        elementRef: frameElementRef,
+        containerSize: frameContainerRef().size(),
+        elementSize: frameElementRef().size(),
+        objectFit: element.objectFit,
+      });
+
+      if (element?.props?.mediaFilter) {
+        applyColorFilter(frameElementRef, element.props.mediaFilter);
+      }
+
+      yield* all(
+        addAnimation({
+          elementRef: frameElementRef,
+          containerRef: frameContainerRef,
+          element: element,
+          view,
+        }),
+        addFrameEffect({
+          containerRef: frameContainerRef,
+          elementRef: frameElementRef,
+          element,
+        }),
+        waitFor(Math.max(0, element.e - element.s))
+      );
+      yield frameElementRef().playing(false);
+      yield frameElementRef().remove();
+      yield frameContainerRef().remove();
+    }
+  },
+};

package/src/frame-effects/circle.frame.tsx

@@ -0,0 +1,103 @@
+/**
+ * Frame effects component that handles the application of various visual effects
+ * to frames and elements in the scene.
+ */
+
+import { all, waitFor } from "@twick/core";
+import { getTimingFunction } from "../helpers/timing.utils";
+import { fitElement } from "../helpers/element.utils";
+import {
+  DEFAULT_POSITION,
+  DEFAULT_TIMING_FUNCTION,
+} from "../helpers/constants";
+import { FrameEffectParams } from "../helpers/types";
+
+/**
+ * CircleFrameEffect animates a frame transitioning into a circular shape,
+ * resizing, repositioning, and optionally fitting its content.
+ *
+ * Behavior:
+ * - Waits for the specified start time.
+ * - Resizes and repositions the frame container smoothly.
+ * - Animates the corner radius to create a perfect circle.
+ * - Repositions the content element if needed.
+ * - Optionally fits the element inside the container based on object-fit.
+ *
+ * @param containerRef - Reference to the frame container element.
+ * @param elementRef - Reference to the content element inside the frame.
+ * @param initFrameState - Initial size and position state of the element.
+ * @param frameEffect - Frame transformation configuration and timing.
+ */
+export const CircleFrameEffect = {
+  name: "circle",
+
+  /**
+   * Generator function controlling the circle frame animation.
+   */
+  *run({
+    containerRef,
+    elementRef,
+    initFrameState,
+    frameEffect,
+  }: FrameEffectParams) {
+    // Wait for the specified start time before starting animation
+    yield* waitFor(frameEffect.s);
+
+    const props = frameEffect.props;
+    const sequence = [];
+
+    // Animate resizing the container to target size
+    sequence.push(
+      containerRef().size(
+        { x: props.frameSize[0], y: props.frameSize[1] },
+        props.transitionDuration,
+        getTimingFunction(props.transitionEasing ?? DEFAULT_TIMING_FUNCTION)
+      )
+    );
+
+    // Animate repositioning the container
+    sequence.push(
+      containerRef().position(
+        props.framePosition ?? { x: 0, y: 0 },
+        props.transitionDuration,
+        getTimingFunction(props.transitionEasing ?? DEFAULT_TIMING_FUNCTION)
+      )
+    );
+
+    // Animate repositioning the element inside the container
+    sequence.push(
+      elementRef().position(
+        props.elementPosition ?? DEFAULT_POSITION,
+        props.transitionDuration,
+        getTimingFunction(props.transitionEasing ?? DEFAULT_TIMING_FUNCTION)
+      )
+    );
+
+    // Animate rounding corners to create a circle (radius = half the width)
+    sequence.push(
+      containerRef().radius(
+        props.frameSize[0] / 2,
+        props.transitionDuration,
+        getTimingFunction(props.transitionEasing ?? DEFAULT_TIMING_FUNCTION)
+      )
+    );
+
+    // Optionally fit the element inside the resized container
+    if (props.objectFit) {
+      sequence.push(
+        fitElement({
+          elementRef,
+          containerSize: {
+            x: props.frameSize[0],
+            y: props.frameSize[1],
+          },
+          elementSize: initFrameState.element.size,
+          objectFit: props.objectFit,
+        })
+      );
+    }
+
+    // Run all animations in parallel
+    yield* all(...sequence);
+  },
+};

package/src/frame-effects/rect.frame.tsx

@@ -0,0 +1,103 @@
+/**
+ * Frame effects component that handles the application of various visual effects
+ * to frames and elements in the scene.
+ */
+
+import { all, waitFor } from "@twick/core";
+import { getTimingFunction } from "../helpers/timing.utils";
+import { fitElement } from "../helpers/element.utils";
+import {
+  DEFAULT_POSITION,
+  DEFAULT_TIMING_FUNCTION,
+} from "../helpers/constants";
+import { FrameEffectParams } from "../helpers/types";
+
+/**
+ * RectFrameEffect applies frame transformations such as resizing,
+ * repositioning, rounding corners, and optionally fitting the element
+ * within the frame according to an object-fit mode.
+ *
+ * Behavior:
+ * - Waits for the specified start time.
+ * - Resizes and repositions the container and element smoothly.
+ * - Adjusts corner radius if provided.
+ * - Optionally fits the element inside the container.
+ *
+ * @param containerRef - Reference to the frame container element.
+ * @param elementRef - Reference to the content element inside the frame.
+ * @param initFrameState - Initial size and position state of the element.
+ * @param frameEffect - Frame transformation configuration and timing.
+ */
+export const RectFrameEffect = {
+  name: "rect",
+
+  /**
+   * Generator function controlling the frame resizing and positioning animation.
+   */
+  *run({
+    containerRef,
+    elementRef,
+    initFrameState,
+    frameEffect,
+  }: FrameEffectParams) {
+    // Wait until the effect start time
+    yield* waitFor(frameEffect.s);
+
+    const props = frameEffect.props;
+    const sequence = [];
+
+    // Animate resizing the container
+    sequence.push(
+      containerRef().size(
+        props.frameSize,
+        props.transitionDuration,
+        getTimingFunction(props.transitionEasing ?? DEFAULT_TIMING_FUNCTION)
+      )
+    );
+
+    // Animate repositioning the container
+    sequence.push(
+      containerRef().position(
+        props.framePosition ?? { x: 0, y: 0 },
+        props.transitionDuration,
+        getTimingFunction(props.transitionEasing ?? DEFAULT_TIMING_FUNCTION)
+      )
+    );
+
+    // Animate repositioning the element inside the container
+    sequence.push(
+      elementRef().position(
+        props.elementPosition ?? DEFAULT_POSITION,
+        props.transitionDuration,
+        getTimingFunction(props.transitionEasing ?? DEFAULT_TIMING_FUNCTION)
+      )
+    );
+
+    // Animate corner radius if specified
+    sequence.push(
+      containerRef().radius(
+        props.radius ?? 0,
+        props.transitionDuration,
+        getTimingFunction(props.transitionEasing ?? DEFAULT_TIMING_FUNCTION)
+      )
+    );
+
+    // Optionally fit the element within the container based on object-fit
+    if (props.objectFit) {
+      sequence.push(
+        fitElement({
+          elementRef,
+          containerSize: {
+            x: props.frameSize[0],
+            y: props.frameSize[1],
+          },
+          elementSize: initFrameState.element.size,
+          objectFit: props.objectFit,
+        })
+      );
+    }
+
+    // Run all animations in parallel
+    yield* all(...sequence);
+  },
+};

package/src/helpers/caption.utils.ts

@@ -5,9 +5,9 @@
 
 /**
  * Splits a phrase into words with timing information
- * @param {string} phrase - The phrase to split
- * @param {number} startTime - Start time of the phrase
- * @param {number} duration - Duration of the phrase
+ * @param {string} t - The phrase to split
+ * @param {number} s - Start time of the phrase
+ * @param {number} e - End time of the phrase
  * @returns {Array} Array of words with timing information
  */
 export function splitPhraseTiming({ t, s, e }: { t: string, s: number, e: number }) {
@@ -27,14 +27,4 @@ export function splitPhraseTiming({ t, s, e }: { t: string, s: number, e: number
         e: parseFloat(wordEnd.toFixed(2)),
       };
     });
-  }
-
-/**
- * Formats caption text with specified style
- * @param {string} text - The text to format
- * @param {Object} style - The style to apply
- * @returns {string} Formatted text
- */
-export function formatCaptionText(text: string, style: any) {
-  // ... existing code ...
-}
+  }

package/src/helpers/constants.ts

@@ -35,7 +35,7 @@ export const FRAME_SHAPE = {
 /**
  * Timeline types for different media elements
  */
-export const TIMELINE_TYPES = {
+export const TRACK_TYPES = {
   VIDEO: "video",
   AUDIO: "audio",
   CAPTION: "caption",

package/src/helpers/element.utils.ts

@@ -1,6 +1,11 @@
-import { Reference } from "@revideo/core";
-import { ObjectFit, SizeVector } from "./types";
+import { all, Reference, waitFor } from "@twick/core";
+import { FrameState, ObjectFit, SizeVector, VisualizerElement } from "./types";
 import { OBJECT_FIT } from "./constants";
+import textEffectController from "../controllers/text-effect.controller";
+import animationController from "../controllers/animation.controller";
+import { View2D } from "@twick/2d";
+import frameEffectController from "../controllers/frame-effect.controller";
+import { logger } from "./log.utils";
 
 /**
  * Element utilities for the visualizer package.
@@ -16,70 +21,219 @@ import { OBJECT_FIT } from "./constants";
  * @param {string} [params.objectFit] - The fit mode (contain, cover, fill)
  * @returns {Object} Updated element dimensions
  */
-export function* fitElement({ 
-    containerSize, 
-    elementSize, 
-    elementRef, 
-    objectFit 
-  }: { 
-    containerSize: SizeVector; 
-    elementSize: SizeVector; 
-    elementRef: Reference<any>; 
-    objectFit?: ObjectFit;
-  }) {
-      const containerAspectRatio = containerSize.x / containerSize.y;
-      const elementAspectRatio = elementSize.x / elementSize.y;
-      switch (objectFit) {
-        case OBJECT_FIT.CONTAIN:
-          if (elementAspectRatio > containerAspectRatio) {
-            yield elementRef().size({
-              x: containerSize.x,
-              y: containerSize.x / elementAspectRatio,
-            });
-            yield elementRef().scale(
-              containerSize.x / elementSize.x,
-              (containerSize.x * elementAspectRatio) / elementSize.y
-            );
-          } else {
-            yield elementRef().size({
-              x: containerSize.y * elementAspectRatio,
-              y: containerSize.y,
-            });
-            yield elementRef().scale(
-              (containerSize.y * elementAspectRatio) / elementSize.x,
-              containerSize.y / elementSize.y
-            );
-          }
-          break;
-        case OBJECT_FIT.COVER:
-          if (elementAspectRatio > containerAspectRatio) {
-            yield elementRef().size({
-              x: containerSize.y * elementAspectRatio,
-              y: containerSize.y,
-            });
-            yield elementRef().scale(
-              (containerSize.y * elementAspectRatio) / elementSize.x,
-              containerSize.y / elementSize.y
-            );
-          } else {
-            yield elementRef().size({
-              x: containerSize.x,
-              y: containerSize.x / elementAspectRatio,
-            });
-            yield elementRef().scale(
-              containerSize.x / elementSize.x,
-              (containerSize.x * elementAspectRatio) / elementSize.y
-            );
-          }
-          break;
-        case OBJECT_FIT.FILL:
-          yield elementRef().size(containerSize);
-          yield elementRef().scale(
-            containerSize.x / elementSize.x,
-            containerSize.x / elementSize.y
-          );
-          break;
-        default:
-          break;
+export function* fitElement({
+  containerSize,
+  elementSize,
+  elementRef,
+  objectFit,
+}: {
+  containerSize: SizeVector;
+  elementSize: SizeVector;
+  elementRef: Reference<any>;
+  objectFit?: ObjectFit;
+}) {
+  const containerAspectRatio = containerSize.x / containerSize.y;
+  const elementAspectRatio = elementSize.x / elementSize.y;
+  switch (objectFit) {
+    case OBJECT_FIT.CONTAIN:
+      if (elementAspectRatio > containerAspectRatio) {
+        yield elementRef().size({
+          x: containerSize.x,
+          y: containerSize.x / elementAspectRatio,
+        });
+        yield elementRef().scale(
+          containerSize.x / elementSize.x,
+          (containerSize.x * elementAspectRatio) / elementSize.y
+        );
+      } else {
+        yield elementRef().size({
+          x: containerSize.y * elementAspectRatio,
+          y: containerSize.y,
+        });
+        yield elementRef().scale(
+          (containerSize.y * elementAspectRatio) / elementSize.x,
+          containerSize.y / elementSize.y
+        );
       }
-    }
+      break;
+    case OBJECT_FIT.COVER:
+      if (elementAspectRatio > containerAspectRatio) {
+        yield elementRef().size({
+          x: containerSize.y * elementAspectRatio,
+          y: containerSize.y,
+        });
+        yield elementRef().scale(
+          (containerSize.y * elementAspectRatio) / elementSize.x,
+          containerSize.y / elementSize.y
+        );
+      } else {
+        yield elementRef().size({
+          x: containerSize.x,
+          y: containerSize.x / elementAspectRatio,
+        });
+        yield elementRef().scale(
+          containerSize.x / elementSize.x,
+          (containerSize.x * elementAspectRatio) / elementSize.y
+        );
+      }
+      break;
+    case OBJECT_FIT.FILL:
+      yield elementRef().size(containerSize);
+      yield elementRef().scale(
+        containerSize.x / elementSize.x,
+        containerSize.x / elementSize.y
+      );
+      break;
+    default:
+      break;
+  }
+}
+
+export function* addTextEffect({
+  elementRef,
+  element,
+}: {
+  elementRef: Reference<any>;
+  element: VisualizerElement;
+}) {
+  yield elementRef();
+  if (element.textEffect) {
+    const effect = textEffectController.get(element.textEffect.name);
+    if (effect) {
+      yield* effect.run({
+        elementRef,
+        duration: element.e - element.s,
+        ...element.textEffect,
+      });
+    }
+  }
+}
+
+export function* addAnimation({
+  elementRef,
+  containerRef,
+  element,
+  view,
+}: {
+  elementRef: Reference<any>;
+  containerRef?: Reference<any>;
+  element: VisualizerElement;
+  view: View2D;
+}) {
+  yield elementRef();
+  if (element.animation) {
+    const animation = animationController.get(element.animation.name);
+    if (animation) {
+      yield* animation.run({
+        elementRef,
+        containerRef,
+        view,
+        duration: element.e - element.s,
+        ...element.animation,
+      });
+    }
+  }
+}
+
+
+export function* addFrameEffect({
+  containerRef,
+  elementRef,
+  element,
+}: {
+  containerRef: Reference<any>;
+  elementRef: Reference<any>;
+  element: VisualizerElement;
+}) {
+  let frameEffects = [];
+  const initProps = getFrameState({
+    containerRef,
+    elementRef,
+  });
+
+  for (let i = 0; i < element?.frameEffects?.length; i++) {
+    const frameEffect = element.frameEffects[i];
+    const restore =
+      i === element.frameEffects.length - 1 ||
+      element.frameEffects[i + 1].s !== frameEffect.e;
+      const frameEffectPlugin = frameEffectController.get(frameEffect.name);
+      if (frameEffectPlugin) {
+        yield* frameEffectPlugin.run({
+          containerRef,
+          elementRef,
+          initFrameState: initProps,
+          frameEffect,
+        });
+        if (restore) {
+          yield* restoreFrameState({
+              containerRef,
+              elementRef,
+              duration: frameEffect.e - frameEffect.s,
+              element,  
+              initProps,
+            }) 
+        }
+        // frameEffects.push(...sequence);
+      
+      }
+  }
+  // yield* all(...frameEffects);
+}
+
+export function getFrameState({
+  containerRef,
+  elementRef,
+}: {
+  containerRef: Reference<any>;
+  elementRef: Reference<any>;
+}): FrameState {
+  return {
+    frame: {
+      size: containerRef().size(),
+      pos: containerRef().position(),
+      radius: containerRef().radius(),
+      scale: containerRef().scale(),
+      rotation: containerRef().rotation(),
+    },
+    element: {
+      size: containerRef().size(),
+      pos: elementRef().position(),
+      scale: elementRef().scale(),
+    },
+  }
+}
+
+export function* restoreFrameState({
+  containerRef,
+  elementRef,
+  duration,
+  element,
+  initProps,
+}: {
+  containerRef: Reference<any>;
+  elementRef: Reference<any>;
+  duration: number;
+  element: VisualizerElement;
+  initProps: FrameState;
+}) {
+  yield* waitFor(duration);
+  logger(`restoreFrameState: ${JSON.stringify(initProps)}`);
+  let sequence = [];
+  sequence.push(containerRef().size(initProps.frame.size));
+  sequence.push(containerRef().position(initProps.frame.pos));
+  sequence.push(containerRef().scale(initProps.frame.scale));
+  sequence.push(containerRef().rotation(initProps.frame.rotation));
+  sequence.push(containerRef().radius(initProps.frame.radius));
+  sequence.push(elementRef().size(initProps.element.size));
+  sequence.push(elementRef().position(initProps.element.pos));
+  sequence.push(elementRef().scale(initProps.element.scale));
+  sequence.push(
+    fitElement({
+      elementRef,
+      containerSize: initProps.frame.size,
+      elementSize: initProps.element.size,
+      objectFit: element.objectFit ?? "none",
+    })
+  );
+  yield* all(...sequence);
+}

package/src/helpers/filters.ts

@@ -1,4 +1,4 @@
-import { Reference } from "@revideo/core";
+import { Reference } from "@twick/core";
 import { COLOR_FILTERS } from "./constants";
 
 /**

package/src/helpers/log.utils.ts

@@ -1,8 +1,5 @@
-import { useLogger } from "@revideo/core";
 import { format } from "date-fns";
 
-const loggerInstance = useLogger();
-
 const getCurrentTime = (dateFormat = "mm:ss:SSS") => {
   const now = new Date();
   return format(now, dateFormat);

package/src/helpers/timing.utils.ts

@@ -30,7 +30,7 @@ import {
   easeInBounce,
   easeOutBounce,
   easeInOutBounce,
-} from "@revideo/core";
+} from "@twick/core";
 
 /**
  * Timing utilities for the visualizer package.
@@ -107,23 +107,4 @@ export function getTimingFunction(name: string) {
     default:
       return linear;
   }
-}
-
-/**
- * Calculates the duration between two timestamps
- * @param {number} startTime - Start timestamp
- * @param {number} endTime - End timestamp
- * @returns {number} Duration in milliseconds
- */
-export function calculateDuration(startTime: number, endTime: number) {
-  // ... existing code ...
-}
-
-/**
- * Formats a timestamp into a readable time string
- * @param {number} timestamp - Timestamp to format
- * @returns {string} Formatted time string
- */
-export function formatTime(timestamp: number) {
-  // ... existing code ...
-}
+}