@twick/visualizer 0.0.1 → 0.14.2

package/src/elements/video.element.tsx

@@ -0,0 +1,55 @@
+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 { applyColorFilter } from "../helpers/filters";
+
+export const VideoElement = {
+  name: "video",
+  *create({ containerRef, element, view }: ElementParams) {
+    yield* waitFor(element?.s);
+    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}`}
+          play={true}
+          {...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().play(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/global.css

@@ -1,12 +1,12 @@
-@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Birthstone&family=Corinthia:wght@400;700&family=Imperial+Script&family=Kumar+One+Outline&family=Londrina+Outline&family=Marck+Script&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Pattaya&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
-@import url('https://fonts.cdnfonts.com/css/peralta');
-@import url('https://fonts.cdnfonts.com/css/impact');
-@import url('https://fonts.cdnfonts.com/css/lumanosimo');
-@import url('https://fonts.cdnfonts.com/css/kapakana');
-@import url('https://fonts.cdnfonts.com/css/handyrush');
-@import url('https://fonts.cdnfonts.com/css/dasher');
+@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Birthstone&family=Corinthia:wght@400;700&family=Imperial+Script&family=Kumar+One+Outline&family=Londrina+Outline&family=Marck+Script&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Pattaya&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@import url('https://fonts.cdnfonts.com/css/peralta');
+@import url('https://fonts.cdnfonts.com/css/impact');
+@import url('https://fonts.cdnfonts.com/css/lumanosimo');
+@import url('https://fonts.cdnfonts.com/css/kapakana');
+@import url('https://fonts.cdnfonts.com/css/handyrush');
+@import url('https://fonts.cdnfonts.com/css/dasher');
 @import url('https://fonts.cdnfonts.com/css/brittany-signature');

package/src/helpers/caption.utils.ts

@@ -1,40 +1,30 @@
-/**
- * Caption utilities for the visualizer package.
- * Provides functions for handling caption text formatting and timing.
- */
-
-/**
- * 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
- * @returns {Array} Array of words with timing information
- */
-export function splitPhraseTiming({ t, s, e }: { t: string, s: number, e: number }) {
-    const words = t.split(" ");
-    const totalDuration = e - s;
-    const totalLength = words.join("").length; // Total character length without spaces
-  
-    let currentTime = s;
-    return words.map((word) => {
-      const wordDuration = (word.length / totalLength) * totalDuration;
-      const wordStart = currentTime;
-      const wordEnd = wordStart + wordDuration;
-      currentTime = wordEnd;
-      return {
-        t: word,
-        s: parseFloat(wordStart.toFixed(2)),
-        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 ...
-}
+/**
+ * Caption utilities for the visualizer package.
+ * Provides functions for handling caption text formatting and timing.
+ */
+
+/**
+ * Splits a phrase into words with timing information
+ * @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 }) {
+    const words = t.split(" ");
+    const totalDuration = e - s;
+    const totalLength = words.join("").length; // Total character length without spaces
+  
+    let currentTime = s;
+    return words.map((word) => {
+      const wordDuration = (word.length / totalLength) * totalDuration;
+      const wordStart = currentTime;
+      const wordEnd = wordStart + wordDuration;
+      currentTime = wordEnd;
+      return {
+        t: word,
+        s: parseFloat(wordStart.toFixed(2)),
+        e: parseFloat(wordEnd.toFixed(2)),
+      };
+    });
+  }

package/src/helpers/constants.ts

@@ -1,159 +1,163 @@
-import { CaptionStyle } from "./types";
-
-/**
- * Constants used throughout the visualizer package.
- * Contains default values, configuration options, and type definitions.
- */
-
-/**
- * Default background color for scenes
- */
-export const DEFAULT_BACKGROUND_COLOR = "#000000";
-
-/**
- * Default position for elements
- */
-export const DEFAULT_POSITION = {
-  x: 0,
-  y: 0
-};
-
-/**
- * Default timing function for animations
- */
-export const DEFAULT_TIMING_FUNCTION = "easeInOut";
-
-/**
- * Available frame shapes for elements
- */
-export const FRAME_SHAPE = {
-  RECTANGLE: "rectangle",
-  CIRCLE: "circle",
-  LINE: "line"
-} as const;
-
-/**
- * Timeline types for different media elements
- */
-export const TIMELINE_TYPES = {
-  VIDEO: "video",
-  AUDIO: "audio",
-  CAPTION: "caption",
-  SCENE: "scene",
-  ELEMENT: "element"
-} as const;
-
-export const CAPTION_STYLE: Record<string, CaptionStyle> = {
-    highlight_bg: {
-      rect: {
-        alignItems: "center",
-        gap: 2,
-      },
-      word: {
-        lineWidth: 0.35,
-        stroke: "#000000",
-        fontWeight: 700,
-        shadowOffset: [-3, 3],
-        shadowColor: "#000000",
-        fill: "#ffffff",
-        fontFamily: "Bangers",
-        bgColor: "#000000",
-        bgOffsetWidth: 30,
-        bgOffsetHeight: 8,
-        fontSize: 54,
-      },
-    },
-    word_by_word: {
-      rect: {
-        alignItems: "center",
-        justifyContent: "center",
-        gap: 12,
-      },
-      word: {
-        lineWidth: 0.35,
-        stroke: "#000000",
-        fontWeight: 700,
-        strokeFirst: true,
-        shadowOffset: [-2, 2],
-        shadowColor: "#000000",
-        shadowBlur: 5,
-        fontFamily: "Bangers",
-        fill: "#FFFFFF",
-        bgOffsetWidth: 20,
-        bgOffsetHeight: 10,
-        fontSize: 54,
-      },
-    },
-    word_by_word_with_bg: {
-      rect: {
-        alignItems: "center",
-        gap: 12,
-        padding: [10, 20],
-        radius: 10,
-      },
-      word: {
-        lineWidth: 0.35,
-        stroke: "#000000",
-        fontWeight: 700,
-        strokeFirst: true,
-        shadowOffset: [-2, 2],
-        shadowColor: "#000000",
-        shadowBlur: 5,
-        fontFamily: "Bangers",
-        fill: "#FFFFFF",
-        bgOffsetWidth: 20,
-        bgOffsetHeight: 10,
-        fontSize: 54,
-      },
-    },
-  };
-
-  export const DEFAULT_CAPTION_COLORS = {
-    text: "#000000",
-    background: "#FFFFFF",
-  };
-
-  export const DEFAULT_CAPTION_FONT = {
-    family: "Poppins",
-    size: 48,
-    weight: 400,
-  };
-
-  export const TRANSPARENT_COLOR = "#FFFFFF00";
-
-  export const ELEMENT_TYPES = {
-    VIDEO: "video",
-    IMAGE: "image",
-    AUDIO: "audio",
-    TEXT: "text",
-    CAPTION: "caption",
-    RECT: "rect",
-    CIRCLE: "circle",
-    ICON: "icon",
-  };
-
-export const OBJECT_FIT = {
-  CONTAIN: "contain",
-  COVER: "cover",
-  FILL: "fill",
-  NONE: "none",
-}
-
-export const COLOR_FILTERS = {
-  SATURATED: "saturated",
-  BRIGHT: "bright",
-  VIBRANT: "vibrant",
-  RETRO: "retro",
-  BLACK_WHITE: "blackWhite",
-  SEPIA: "sepia",
-  COOL: "cool",
-  WARM: "warm",
-  CINEMATIC: "cinematic",
-  SOFT_GLOW: "softGlow",
-  MOODY: "moody",
-  DREAMY: "dreamy",
-  INVERTED: "inverted",
-  VINTAGE: "vintage",
-  DRAMATIC: "dramatic",
-  FADED: "faded",
+import { CaptionStyle } from "./types";
+
+/**
+ * Constants used throughout the visualizer package.
+ * Contains default values, configuration options, and type definitions.
+ */
+
+/**
+ * Default background color for scenes
+ */
+export const DEFAULT_BACKGROUND_COLOR = "#000000";
+
+/**
+ * Default position for elements
+ */
+export const DEFAULT_POSITION = {
+  x: 0,
+  y: 0
+};
+
+/**
+ * Default timing function for animations
+ */
+export const DEFAULT_TIMING_FUNCTION = "easeInOut";
+
+/**
+ * Available frame shapes for elements
+ */
+export const FRAME_SHAPE = {
+  RECTANGLE: "rectangle",
+  CIRCLE: "circle",
+  LINE: "line"
+} as const;
+
+/**
+ * Timeline types for different media elements
+ */
+export const TRACK_TYPES = {
+  VIDEO: "video",
+  AUDIO: "audio",
+  CAPTION: "caption",
+  SCENE: "scene",
+  ELEMENT: "element"
+} as const;
+
+export const CAPTION_STYLE: Record<string, CaptionStyle> = {
+    highlight_bg: {
+      rect: {
+        alignItems: "center",
+        gap: 2,
+      },
+      word: {
+        lineWidth: 0.35,
+        stroke: "#000000",
+        fontWeight: 700,
+        shadowOffset: [-3, 3],
+        shadowColor: "#000000",
+        fill: "#ffffff",
+        fontFamily: "Bangers",
+        bgColor: "#000000",
+        bgOffsetWidth: 30,
+        bgOffsetHeight: 8,
+        fontSize: 54,
+      },
+    },
+    word_by_word: {
+      rect: {
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 12,
+      },
+      word: {
+        lineWidth: 0.35,
+        stroke: "#000000",
+        fontWeight: 700,
+        strokeFirst: true,
+        shadowOffset: [-2, 2],
+        shadowColor: "#000000",
+        shadowBlur: 5,
+        fontFamily: "Bangers",
+        fill: "#FFFFFF",
+        bgOffsetWidth: 20,
+        bgOffsetHeight: 10,
+        fontSize: 54,
+      },
+    },
+    word_by_word_with_bg: {
+      rect: {
+        alignItems: "center",
+        gap: 12,
+        padding: [10, 20],
+        radius: 10,
+      },
+      word: {
+        lineWidth: 0.35,
+        stroke: "#000000",
+        fontWeight: 700,
+        strokeFirst: true,
+        shadowOffset: [-2, 2],
+        shadowColor: "#000000",
+        shadowBlur: 5,
+        fontFamily: "Bangers",
+        fill: "#FFFFFF",
+        bgOffsetWidth: 20,
+        bgOffsetHeight: 10,
+        fontSize: 54,
+      },
+    },
+  };
+
+  export const DEFAULT_CAPTION_COLORS = {
+    text: "#000000",
+    background: "#FFFFFF",
+  };
+
+  export const DEFAULT_CAPTION_FONT = {
+    family: "Poppins",
+    size: 48,
+    weight: 400,
+  };
+
+  export const TRANSPARENT_COLOR = "#FFFFFF00";
+
+  export const ELEMENT_TYPES = {
+    VIDEO: "video",
+    IMAGE: "image",
+    AUDIO: "audio",
+    TEXT: "text",
+    CAPTION: "caption",
+    RECT: "rect",
+    CIRCLE: "circle",
+    ICON: "icon",
+  };
+
+export const OBJECT_FIT = {
+  CONTAIN: "contain",
+  COVER: "cover",
+  FILL: "fill",
+  NONE: "none",
+}
+
+export const COLOR_FILTERS = {
+  SATURATED: "saturated",
+  BRIGHT: "bright",
+  VIBRANT: "vibrant",
+  RETRO: "retro",
+  BLACK_WHITE: "blackWhite",
+  SEPIA: "sepia",
+  COOL: "cool",
+  WARM: "warm",
+  CINEMATIC: "cinematic",
+  SOFT_GLOW: "softGlow",
+  MOODY: "moody",
+  DREAMY: "dreamy",
+  INVERTED: "inverted",
+  VINTAGE: "vintage",
+  DRAMATIC: "dramatic",
+  FADED: "faded",
+}
+
+export const EVENT_TYPES = {
+  PLAYER_UPDATE: "twick:playerUpdate",
 }