@twick/visualizer 0.0.1

package/src/components/timeline.tsx

@@ -0,0 +1,225 @@
+/**
+ * Timeline component that handles the creation and management of different types of timelines
+ * including video, audio, captions, scenes, and elements.
+ */
+
+import { Layout, Rect, View2D, Audio } from "@revideo/2d";
+import { VisualizerTimeline } from "../helpers/types";
+import { all, Color, createRef, waitFor } from "@revideo/core";
+import { addAudioElement, addCaptionElement, addCircleElement, addIconElement, addMediaElement, addRectElement, addTextElement, makeSceneElements } from "./element";
+import { CAPTION_STYLE, DEFAULT_CAPTION_COLORS, DEFAULT_CAPTION_FONT, ELEMENT_TYPES } from "../helpers/constants";
+import { logger } from "../helpers/log.utils";
+
+/**
+ * Creates a video timeline with specified configuration
+ * @param {Object} params - Parameters for video timeline creation
+ * @param {View2D} params.view - The 2D view to render the video in
+ * @param {VideoTimeline} params.timeline - Video timeline configuration
+ * @returns {Generator} Generator function for video timeline animation
+ */
+export function* makeVideoTimeline({
+  view,
+  timeline,
+}: {
+  view: View2D;
+  timeline: VisualizerTimeline;
+}) {
+  const frameRef = createRef<any>();
+  let prevTime = 0;
+  view.add(<Layout size={"100%"} ref={frameRef} layout />);
+  for (const element of timeline.elements || []) {
+    yield* waitFor(element?.s - prevTime);
+    yield* addMediaElement({
+      containerRef: frameRef,
+      element,
+      mediaType: ELEMENT_TYPES.VIDEO,
+      waitOnStart: false,
+    });
+    prevTime = element.e;
+  }
+  yield frameRef().remove();
+}
+
+/**
+ * Creates an audio timeline with specified configuration
+ * @param {Object} params - Parameters for audio timeline creation
+ * @param {View2D} params.view - The 2D view to render the audio in
+ * @param {AudioTimeline} params.timeline - Audio timeline configuration
+ * @returns {Generator} Generator function for audio timeline animation
+ */
+export function* makeAudioTimeline({
+  view,
+  timeline,
+}: {
+  view: View2D;
+  timeline: VisualizerTimeline;
+}) {
+  let prevTime = 0;
+  for (const audioElement of timeline.elements) {
+    const audioRef = createRef<any>();
+    yield* waitFor(audioElement?.s - prevTime);
+    prevTime = audioElement?.e;
+    logger(`Adding audio element ${audioElement.id}`);
+    view.add(
+      <Audio ref={audioRef} key={audioElement.id} {...audioElement.props} />
+    );
+    yield* waitFor(Math.max(0, audioElement.e - audioElement.s));
+    yield audioRef().playing(false);
+    yield audioRef().remove();
+  }
+}
+
+/**
+ * Creates a caption timeline with specified configuration
+ * @param {Object} params - Parameters for caption timeline creation
+ * @param {View2D} params.view - The 2D view to render the caption in
+ * @param {CaptionTimeline} params.timeline - Caption timeline configuration
+ * @returns {Generator} Generator function for caption timeline animation
+ */
+export function* makeCaptionTimeline({ view, timeline }: { view: View2D; timeline: VisualizerTimeline }) {
+  let prevTime = 0;
+  const captionTimelineRef = createRef<any>();
+  view.add(<Layout size={"100%"} ref={captionTimelineRef} />);
+
+  const tProps = timeline?.props;
+
+  const timelineDefaultProps = (CAPTION_STYLE[tProps?.capStyle ?? ""] || {}).word || {};
+
+  for (const element of timeline.elements) {
+    const eProps = element.props;
+    const rectStyle = (CAPTION_STYLE[eProps?.capStyle ?? tProps?.capStyle ?? ""] || {}).rect || {};
+    // Cast alignItems/justifyContent as any to satisfy RectProps
+    const mappedRectStyle = {
+      ...rectStyle,
+      justifyContent: rectStyle.justifyContent as any,
+      alignItems: rectStyle.alignItems as any,
+    };
+    const phraseProps = {
+      ...timelineDefaultProps,
+      colors: {
+        text: eProps?.colors?.text ?? tProps?.colors?.text ?? DEFAULT_CAPTION_COLORS.text,
+        background: eProps?.colors?.background ?? tProps?.colors?.background ?? DEFAULT_CAPTION_COLORS.background,
+      },
+      font: {
+        family: eProps?.font?.family ?? tProps?.font?.family ?? DEFAULT_CAPTION_FONT.family,
+        size: eProps?.font?.size ?? tProps?.font?.size ?? DEFAULT_CAPTION_FONT.size,
+        weight: eProps?.font?.weight ?? tProps?.font?.weight ?? DEFAULT_CAPTION_FONT.weight
+      },
+      fill: eProps?.colors?.text ?? tProps?.colors?.text ?? DEFAULT_CAPTION_COLORS.text,
+      bgColor: eProps?.colors?.background ?? tProps?.colors?.background ??DEFAULT_CAPTION_COLORS.background,
+      bgOpacity: eProps?.bgOpacity ?? tProps?.bgOpacity ?? 1,
+      ...(tProps?.captionProps || {}),
+    };
+
+    yield* waitFor(element?.s - prevTime);
+    const phraseRef = createRef<any>();
+    captionTimelineRef().add(
+      <Rect
+        ref={phraseRef}
+        key={element.id}
+        {...mappedRectStyle}
+        x={eProps?.x ?? tProps?.x}
+        y={eProps?.y ?? tProps?.y}
+        layout
+      />
+    );
+    if (tProps?.capStyle === "word_by_word_with_bg") {
+      phraseRef().fill(
+        new Color(phraseProps.bgColor).alpha(phraseProps.bgOpacity)
+      );
+    }
+    yield* addCaptionElement({
+      caption: {...element, t: element.t ?? ""},
+      captionProps: phraseProps,
+      containerRef: phraseRef,
+      capStyle: eProps?.capStyle ?? tProps?.capStyle,
+    });
+    prevTime = element.e;
+    yield phraseRef().remove();
+  }
+}
+
+/**
+ * Creates a scene timeline with specified configuration
+ * @param {Object} params - Parameters for scene timeline creation
+ * @param {View2D} params.view - The 2D view to render the scene in
+ * @param {SceneTimeline} params.timeline - Scene timeline configuration
+ * @returns {Generator} Generator function for scene timeline animation
+ */
+export function* makeSceneTimeline({ view, timeline }: { view: View2D; timeline: VisualizerTimeline }) {
+  const frameRef = createRef<any>();
+  let prevTime = 0;
+  view.add(<Layout size={"100%"} ref={frameRef} layout />);
+  for (const sceneElement of timeline.elements || []) {
+    yield* waitFor(sceneElement?.s - prevTime);
+    yield* makeSceneElements({
+      containerRef: frameRef,
+      element: sceneElement,
+    });
+    prevTime = sceneElement.e;
+  }
+  yield frameRef().remove();
+}
+
+/**
+ * Creates an element timeline with specified configuration
+ * @param {Object} params - Parameters for element timeline creation
+ * @param {View2D} params.view - The 2D view to render the element in
+ * @param {ElementTimeline} params.timeline - Element timeline configuration
+ * @returns {Generator} Generator function for element timeline animation
+ */
+export function* makeElementTimeline({ view, timeline }: { view: View2D; timeline: VisualizerTimeline }) {
+  const elementTimelineRef = createRef<any>();
+  view.add(<Layout size={"100%"} ref={elementTimelineRef} />);
+
+  const sequence = [];
+  for (const element of timeline.elements) {
+    switch (element.type) {
+      case ELEMENT_TYPES.RECT:
+        sequence.push(
+          addRectElement({ containerRef: elementTimelineRef, element })
+        );
+        break;
+      case ELEMENT_TYPES.TEXT:
+        sequence.push(
+          addTextElement({ containerRef: elementTimelineRef, element })
+        );
+        break;
+      case ELEMENT_TYPES.IMAGE:
+        sequence.push(
+          addMediaElement({
+            containerRef: elementTimelineRef,
+            element,
+            mediaType: ELEMENT_TYPES.IMAGE,
+          })
+        );
+        break;
+      case ELEMENT_TYPES.VIDEO:
+        sequence.push(
+          addMediaElement({
+            containerRef: elementTimelineRef,
+            element,
+            mediaType: ELEMENT_TYPES.VIDEO,
+          })
+        );
+        break;
+      case ELEMENT_TYPES.AUDIO:
+        sequence.push(
+          addAudioElement({ containerRef: elementTimelineRef, element })
+        );
+        break;
+      case ELEMENT_TYPES.CIRCLE:
+        sequence.push(
+          addCircleElement({ containerRef: elementTimelineRef, element })
+        );
+        break;
+      case ELEMENT_TYPES.ICON:
+        sequence.push(
+          addIconElement({ containerRef: elementTimelineRef, element })
+        );
+        break;
+    }
+  }
+  yield* all(...sequence);
+  yield elementTimelineRef().remove();
+}

package/src/global.css

@@ -0,0 +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.cdnfonts.com/css/brittany-signature');

package/src/helpers/caption.utils.ts

@@ -0,0 +1,40 @@
+/**
+ * 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 ...
+}

package/src/helpers/constants.ts

@@ -0,0 +1,159 @@
+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",
+}

package/src/helpers/element.utils.ts

@@ -0,0 +1,85 @@
+import { Reference } from "@revideo/core";
+import { ObjectFit, SizeVector } from "./types";
+import { OBJECT_FIT } from "./constants";
+
+/**
+ * Element utilities for the visualizer package.
+ * Provides functions for handling element positioning, sizing, and transformations.
+ */
+
+/**
+ * Fits an element within specified bounds while maintaining aspect ratio
+ * @param {Object} params - Parameters for fitting the element
+ * @param {Object} params.containerSize - The container size
+ * @param {Object} params.elementSize - The element size
+ * @param {Object} params.elementRef - The element reference
+ * @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;
+      }
+    }

package/src/helpers/filters.ts

@@ -0,0 +1,128 @@
+import { Reference } from "@revideo/core";
+import { COLOR_FILTERS } from "./constants";
+
+/**
+ * Filter utilities for the visualizer package.
+ * Provides functions for applying various visual filters to elements.
+ */
+
+/**
+ * Applies a blur filter to an element
+ * @param {Object} params - Parameters for the blur filter
+ * @param {Reference<any>} params.element - The element to apply the filter to
+ * @param {number} params.amount - The blur amount
+ * @returns {void}
+ */
+export function applyBlurFilter({ element, amount }: { element: Reference<any>; amount: number }) {
+  // ... existing code ...
+}
+
+/**
+ * Applies a brightness filter to an element
+ * @param {Object} params - Parameters for the brightness filter
+ * @param {Reference<any>} params.element - The element to apply the filter to
+ * @param {number} params.amount - The brightness amount
+ * @returns {void}
+ */
+export function applyBrightnessFilter({ element, amount }: { element: Reference<any>; amount: number }) {
+  // ... existing code ...
+}
+
+/**
+ * Applies a contrast filter to an element
+ * @param {Object} params - Parameters for the contrast filter
+ * @param {Reference<any>} params.element - The element to apply the filter to
+ * @param {number} params.amount - The contrast amount
+ * @returns {void}
+ */
+export function applyContrastFilter({ element, amount }: { element: Reference<any>; amount: number }) {
+  // ... existing code ...
+}
+
+export const applyColorFilter = (ref: Reference<any>, filterType: string) => {
+    switch (filterType) {
+      case COLOR_FILTERS.SATURATED:
+        ref().filters.saturate(1.4);
+        ref().filters.contrast(1.1);
+        break;
+      case COLOR_FILTERS.BRIGHT:
+        ref().filters.brightness(1.3);
+        ref().filters.contrast(1.05);
+        break;
+      case COLOR_FILTERS.VIBRANT:
+        ref().filters.saturate(1.6);
+        ref().filters.brightness(1.15);
+        ref().filters.contrast(1.1);
+        break;
+      case COLOR_FILTERS.RETRO:
+        ref().filters.sepia(0.8);
+        ref().filters.contrast(1.3);
+        ref().filters.brightness(0.85);
+        ref().filters.saturate(0.8);
+        break;
+      case COLOR_FILTERS.BLACK_WHITE:
+        ref().filters.grayscale(1);
+        ref().filters.contrast(1.25);
+        ref().filters.brightness(1.05);
+        break;
+      case COLOR_FILTERS.COOL:
+        ref().filters.hue(15);
+        ref().filters.brightness(1.1);
+        ref().filters.saturate(1.3);
+        ref().filters.contrast(1.05);
+        break;
+      case COLOR_FILTERS.WARM:
+        ref().filters.hue(-15);
+        ref().filters.brightness(1.15);
+        ref().filters.saturate(1.3);
+        ref().filters.contrast(1.05);
+        break;
+      case COLOR_FILTERS.CINEMATIC:
+        ref().filters.contrast(1.4);
+        ref().filters.brightness(0.95);
+        ref().filters.saturate(0.85);
+        ref().filters.sepia(0.2);
+        break;
+      case COLOR_FILTERS.SOFT_GLOW:
+        ref().filters.brightness(1.2);
+        ref().filters.contrast(0.95);
+        ref().filters.blur(1.2);
+        ref().filters.saturate(1.1);
+        break;
+      case COLOR_FILTERS.MOODY:
+        ref().filters.brightness(1.05);
+        ref().filters.contrast(1.4);
+        ref().filters.saturate(0.65);
+        ref().filters.sepia(0.2);
+        break;
+      case COLOR_FILTERS.DREAMY:
+        ref().filters.brightness(1.3);
+        ref().filters.blur(2);
+        ref().filters.saturate(1.4);
+        ref().filters.contrast(0.95);
+        break;
+      case COLOR_FILTERS.INVERTED:
+        ref().filters.invert(1);
+        ref().filters.hue(180);
+        break;
+      case COLOR_FILTERS.VINTAGE:
+        ref().filters.sepia(0.4);
+        ref().filters.saturate(1.4);
+        ref().filters.contrast(1.2);
+        ref().filters.brightness(1.1);
+        break;
+      case COLOR_FILTERS.DRAMATIC:
+        ref().filters.contrast(1.5);
+        ref().filters.brightness(0.9);
+        ref().filters.saturate(1.2);
+        break;
+      case COLOR_FILTERS.FADED:
+        ref().filters.opacity(0.9);
+        ref().filters.brightness(1.2);
+        ref().filters.saturate(0.8);
+        ref().filters.contrast(0.9);
+        break;
+      default:
+        break;
+    }
+  };

package/src/helpers/log.utils.ts

@@ -0,0 +1,32 @@
+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);
+};
+
+/**
+ * Logging utilities for the visualizer package.
+ * Provides consistent logging functionality across the application.
+ */
+
+/**
+ * Logs a message to the console with a visualizer prefix
+ * @param {string} message - The message to log
+ * @param {any} [data] - Optional data to log
+ */
+export function logger(message: string, data?: any) {
+  console.log(`[Visualizer] ${message}`, data ? data : "");
+}
+
+/**
+ * Logs an error to the console with a visualizer prefix
+ * @param {string} message - The error message to log
+ * @param {Error} [error] - Optional error object
+ */
+export function errorLogger(message: string, error?: Error) {
+  console.error(`[Visualizer Error] ${message}`, error ? error : "");
+}