@twick/visualizer 0.0.1 → 0.14.2

package/src/helpers/timing.utils.ts

@@ -1,129 +1,110 @@
-import {
-  linear,
-  easeInSine,
-  easeOutSine,
-  easeInOutSine,
-  easeInQuad,
-  easeOutQuad,
-  easeInOutQuad,
-  easeInCubic,
-  easeOutCubic,
-  easeInOutCubic,
-  easeInQuart,
-  easeOutQuart,
-  easeInOutQuart,
-  easeInQuint,
-  easeOutQuint,
-  easeInOutQuint,
-  easeInExpo,
-  easeOutExpo,
-  easeInOutExpo,
-  easeInCirc,
-  easeOutCirc,
-  easeInOutCirc,
-  easeInBack,
-  easeOutBack,
-  easeInOutBack,
-  easeInElastic,
-  easeOutElastic,
-  easeInOutElastic,
-  easeInBounce,
-  easeOutBounce,
-  easeInOutBounce,
-} from "@revideo/core";
-
-/**
- * Timing utilities for the visualizer package.
- * Provides functions for handling timing and animation calculations.
- */
-
-/**
- * Gets the timing function based on the provided name
- * @param {string} name - Name of the timing function
- * @returns {Function} The timing function
- */
-export function getTimingFunction(name: string) {
-  switch (name) {
-    case "easeInSine":
-      return easeInSine;
-    case "easeOutSine":
-      return easeOutSine;
-    case "easeInOutSine":
-      return easeInOutSine;
-    case "easeInQuad":
-      return easeInQuad;
-    case "easeOutQuad":
-      return easeOutQuad;
-    case "easeInOutQuad":
-      return easeInOutQuad;
-    case "easeInCubic":
-      return easeInCubic;
-    case "easeOutCubic":
-      return easeOutCubic;
-    case "easeInOutCubic":
-      return easeInOutCubic;
-    case "easeInQuart":
-      return easeInQuart;
-    case "easeOutQuart":
-      return easeOutQuart;
-    case "easeInOutQuart":
-      return easeInOutQuart;
-    case "easeInQuint":
-      return easeInQuint;
-    case "easeOutQuint":
-      return easeOutQuint;
-    case "easeInOutQuint":
-      return easeInOutQuint;
-    case "easeInExpo":
-      return easeInExpo;
-    case "easeOutExpo":
-      return easeOutExpo;
-    case "easeInOutExpo":
-      return easeInOutExpo;
-    case "easeInCirc":
-      return easeInCirc;
-    case "easeOutCirc":
-      return easeOutCirc;
-    case "easeInOutCirc":
-      return easeInOutCirc;
-    case "easeInBack":
-      return easeInBack;
-    case "easeOutBack":
-      return easeOutBack;
-    case "easeInOutBack":
-      return easeInOutBack;
-    case "easeInElastic":
-      return easeInElastic;
-    case "easeOutElastic":
-      return easeOutElastic;
-    case "easeInOutElastic":
-      return easeInOutElastic;
-    case "easeInBounce":
-      return easeInBounce;
-    case "easeOutBounce":
-      return easeOutBounce;
-    case "easeInOutBounce":
-      return easeInOutBounce;
-    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 ...
-}
+import {
+  linear,
+  easeInSine,
+  easeOutSine,
+  easeInOutSine,
+  easeInQuad,
+  easeOutQuad,
+  easeInOutQuad,
+  easeInCubic,
+  easeOutCubic,
+  easeInOutCubic,
+  easeInQuart,
+  easeOutQuart,
+  easeInOutQuart,
+  easeInQuint,
+  easeOutQuint,
+  easeInOutQuint,
+  easeInExpo,
+  easeOutExpo,
+  easeInOutExpo,
+  easeInCirc,
+  easeOutCirc,
+  easeInOutCirc,
+  easeInBack,
+  easeOutBack,
+  easeInOutBack,
+  easeInElastic,
+  easeOutElastic,
+  easeInOutElastic,
+  easeInBounce,
+  easeOutBounce,
+  easeInOutBounce,
+} from "@twick/core";
+
+/**
+ * Timing utilities for the visualizer package.
+ * Provides functions for handling timing and animation calculations.
+ */
+
+/**
+ * Gets the timing function based on the provided name
+ * @param {string} name - Name of the timing function
+ * @returns {Function} The timing function
+ */
+export function getTimingFunction(name: string) {
+  switch (name) {
+    case "easeInSine":
+      return easeInSine;
+    case "easeOutSine":
+      return easeOutSine;
+    case "easeInOutSine":
+      return easeInOutSine;
+    case "easeInQuad":
+      return easeInQuad;
+    case "easeOutQuad":
+      return easeOutQuad;
+    case "easeInOutQuad":
+      return easeInOutQuad;
+    case "easeInCubic":
+      return easeInCubic;
+    case "easeOutCubic":
+      return easeOutCubic;
+    case "easeInOutCubic":
+      return easeInOutCubic;
+    case "easeInQuart":
+      return easeInQuart;
+    case "easeOutQuart":
+      return easeOutQuart;
+    case "easeInOutQuart":
+      return easeInOutQuart;
+    case "easeInQuint":
+      return easeInQuint;
+    case "easeOutQuint":
+      return easeOutQuint;
+    case "easeInOutQuint":
+      return easeInOutQuint;
+    case "easeInExpo":
+      return easeInExpo;
+    case "easeOutExpo":
+      return easeOutExpo;
+    case "easeInOutExpo":
+      return easeInOutExpo;
+    case "easeInCirc":
+      return easeInCirc;
+    case "easeOutCirc":
+      return easeOutCirc;
+    case "easeInOutCirc":
+      return easeInOutCirc;
+    case "easeInBack":
+      return easeInBack;
+    case "easeOutBack":
+      return easeOutBack;
+    case "easeInOutBack":
+      return easeInOutBack;
+    case "easeInElastic":
+      return easeInElastic;
+    case "easeOutElastic":
+      return easeOutElastic;
+    case "easeInOutElastic":
+      return easeInOutElastic;
+    case "easeInBounce":
+      return easeInBounce;
+    case "easeOutBounce":
+      return easeOutBounce;
+    case "easeInOutBounce":
+      return easeInOutBounce;
+    default:
+      return linear;
+  }
+}

package/src/helpers/types.ts

@@ -1,146 +1,242 @@
-export type VideoInput = {
-  backgroundColor: string;
-  properties: {
-    width: number;
-    height: number;
-  };
-  timeline: VisualizerTimeline[];
-};
-
-export type MediaType = "video" | "image";
-
-export type ObjectFit = "contain" | "cover" | "fill" | "none";
-
-export type SizeVector = {
-  x: number;
-  y: number;
-};
-
-export type Size = {
-  width: number;
-  height: number;
-};
-
-export type SizeArray = [number, number];
-
-export type Position = {
-  x: number;
-  y: number;
-};
-
-export type FrameEffect = {
-  s: number;
-  e: number;
-  props: FrameEffectProps;
-};
-
-
-export type FrameEffectProps = {
-  frameSize: SizeArray;
-  frameShape: "circle" | "rect";
-  framePosition: Position;
-  radius: number;
-  objectFit: ObjectFit;
-  transitionDuration: number;
-  transitionEasing?: string;
-  elementPosition: Position;
-};
-
-export type CaptionStyle = {
-  rect: {
-    alignItems?: string;
-    gap?: number;
-    justifyContent?: string;
-    padding?: [number, number];
-    radius?: number;
-  };
-  word: {
-    lineWidth: number;
-    stroke: string;
-    fontWeight: number;
-    shadowOffset?: number[];
-    shadowColor?: string;
-    shadowBlur?: number;
-    fill: string;
-    fontFamily: string;
-    bgColor?: string;
-    bgOffsetWidth?: number;
-    bgOffsetHeight?: number;
-    fontSize: number;
-    strokeFirst?: boolean;
-  };
-};
-
-export type Caption = {
-  t: string;
-  s: number;
-  e: number;
-  props?: CaptionProps;
-}
-
-export type CaptionProps = {
-  colors: CaptionColors;
-  font: CaptionFont;
-  bgOpacity?: number;
-  bgOffsetWidth?: number;
-  bgOffsetHeight?: number;
-  bgMargin?: [number, number];
-  bgRadius?: number;
-  bgPadding?: [number, number];
-  x?: number;
-  y?: number;
-};
-
-export type CaptionColors = {
-  text?: string;
-  background?: string;
-  highlight?: string;
-};
-
-export type CaptionFont = {
-  family?: string;
-  size?: number;
-  weight?: number;
-  style?: string;
-};
-
-export type VisualizerElement = {
-  id: string;
-  frame?: any;
-  props?: any;
-  objectFit?: 'contain' | 'cover' | 'fill';
-  type?: string;
-  s: number;
-  e: number;
-  backgroundColor?: string;
-  elements?: VisualizerElement[];
-  animations?: any[];
-  scale?: number;
-  t?: string;
-  hWords?: any;
-};
-
-export type VisualizerTimeline = {
-  id: string;
-  type: string;
-  elements: VisualizerElement[];
-  captions?: Caption[];
-  props?: {
-    capStyle?: string;
-    bgOpacity?: number;
-    x?: number;
-    y?: number;
-    colors?: {
-      text?: string;
-      background?: string;
-      highlight?: string;
-    };
-    font?: {
-      family?: string;
-      size?: number;
-      weight?: number;
-      style?: string;
-    };
-    captionProps?: CaptionProps;
-  };
-};
+import { View2D } from "@twick/2d";
+import { Reference, ThreadGenerator, Vector2 } from "@twick/core";
+
+export type VideoInput = {
+  playerId: string,
+  backgroundColor: string;
+  properties: {
+    width: number;
+    height: number;
+  };
+  tracks: VisualizerTrack[];
+};
+
+export type MediaType = "video" | "image";
+
+export type ObjectFit = "contain" | "cover" | "fill" | "none";
+
+export type SizeVector = {
+  x: number;
+  y: number;
+};
+
+export type Size = {
+  width: number;
+  height: number;
+};
+
+export type SizeArray = [number, number];
+
+export type Position = {
+  x: number;
+  y: number;
+};
+
+export type FrameEffect = {
+  name: string;
+  s: number;
+  e: number;
+  props: FrameEffectProps;
+};
+
+export type FrameEffectProps = {
+  frameSize: SizeArray;
+  frameShape: "circle" | "rect";
+  framePosition: Position;
+  radius: number;
+  objectFit: ObjectFit;
+  transitionDuration: number;
+  transitionEasing?: string;
+  elementPosition: Position;
+};
+
+export type CaptionStyle = {
+  rect: {
+    alignItems?: string;
+    gap?: number;
+    justifyContent?: string;
+    padding?: [number, number];
+    radius?: number;
+  };
+  word: {
+    lineWidth: number;
+    stroke: string;
+    fontWeight: number;
+    shadowOffset?: number[];
+    shadowColor?: string;
+    shadowBlur?: number;
+    fill: string;
+    fontFamily: string;
+    bgColor?: string;
+    bgOffsetWidth?: number;
+    bgOffsetHeight?: number;
+    fontSize: number;
+    strokeFirst?: boolean;
+  };
+};
+
+export type Caption = {
+  t: string;
+  s: number;
+  e: number;
+  capStyle?: string;
+  props?: CaptionProps;
+};
+
+export type CaptionProps = {
+  colors: CaptionColors;
+  font: CaptionFont;
+  bgOpacity?: number;
+  bgOffsetWidth?: number;
+  bgOffsetHeight?: number;
+  bgMargin?: [number, number];
+  bgRadius?: number;
+  bgPadding?: [number, number];
+  x?: number;
+  y?: number;
+};
+
+export type CaptionColors = {
+  text?: string;
+  background?: string;
+  highlight?: string;
+};
+
+export type CaptionFont = {
+  family?: string;
+  size?: number;
+  weight?: number;
+  style?: string;
+};
+
+export type VisualizerElement = {
+  id: string;
+  trackId?: string;
+  frame?: any;
+  props?: any;
+  objectFit?: "contain" | "cover" | "fill";
+  type?: string;
+  s: number;
+  e: number;
+  backgroundColor?: string;
+  animation?: AnimationProps;
+  textEffect: TextEffectProps;
+  frameEffects?: FrameEffect[];
+  scale?: number;
+  t?: string;
+  hWords?: any;
+};
+
+export type VisualizerTrack = {
+  id: string;
+  type: string;
+  elements: VisualizerElement[];
+  props?: {
+    capStyle?: string;
+    bgOpacity?: number;
+    x?: number;
+    y?: number;
+    colors?: {
+      text?: string;
+      background?: string;
+      highlight?: string;
+    };
+    font?: {
+      family?: string;
+      size?: number;
+      weight?: number;
+      style?: string;
+    };
+    captionProps?: CaptionProps;
+  };
+};
+
+export type ElementParams = {
+  view: View2D;
+  containerRef: Reference<any>;
+  element?: VisualizerElement;
+  caption?: Caption;
+  waitOnStart?: boolean;
+};
+
+export interface Element<Params = ElementParams> {
+  name: string;
+  create(params: Params): ThreadGenerator;
+}
+
+export type TextEffectParams = {
+  elementRef: Reference<any>;
+  interval?: number;
+  duration?: number;
+  bufferTime?: number;
+  delay?: number;
+  direction?: "left" | "right" | "center";
+};
+
+export type TextEffectProps = {
+  name: string;
+  interval?: number;
+  duration?: number;
+  bufferTime?: number;
+  delay?: number;
+  direction?: "left" | "right" | "center";
+};
+
+export interface TextEffect<Params = TextEffectParams> {
+  name: string;
+  run(params: Params): Generator;
+}
+
+export type AnimationParams = {
+  elementRef: Reference<any>;
+  containerRef?: Reference<any>;
+  view: View2D;
+  interval?: number;
+  duration?: number;
+  intensity?: number;
+  mode?: "in" | "out";
+  animate?: "enter" | "exit" | "both";
+  direction?: "left" | "right" | "center" | "up" | "down";
+};
+
+export type AnimationProps = {
+  name: string;
+  interval?: number;
+  duration?: number;
+  intensity?: number;
+  mode?: "in" | "out";
+  animate?: "enter" | "exit" | "both";
+  direction?: "left" | "right" | "center" | "up" | "down";
+};
+
+export interface Animation<Params = AnimationParams> {
+  name: string;
+  run(params: Params): ThreadGenerator;
+}
+
+export type FrameEffectParams = {
+  elementRef: Reference<any>;
+  containerRef?: Reference<any>;
+  initFrameState: FrameState;
+  frameEffect: FrameEffect;
+};
+
+export interface FrameEffectPlugin<Params = FrameEffectParams> {
+  name: string;
+  run(params: Params): ThreadGenerator;
+}
+
+export type FrameState = {
+  frame: {
+    size: Vector2;
+    pos: Vector2;
+    radius: number;
+    scale: Vector2;
+    rotation: number;
+  };
+  element: {
+    size: Vector2;
+    pos: Vector2;
+    scale: Vector2;
+  };
+};

package/src/helpers/utils.ts

@@ -0,0 +1,20 @@
+export const hexToRGB = (color: string) => {
+  // Remove leading '#' if present
+  let hex = color.replace(/^#/, '');
+
+  // Handle shorthand hex (e.g., #abc)
+  if (hex.length === 3) {
+    hex = hex.split('').map(c => c + c).join('');
+  }
+
+  if (hex.length !== 6) {
+    throw new Error('Invalid hex color');
+  }
+
+  const num = parseInt(hex, 16);
+  const r = (num >> 16) & 255;
+  const g = (num >> 8) & 255;
+  const b = num & 255;
+
+  return { r, g, b };
+}

package/src/index.ts

@@ -1,4 +1,6 @@
-export * from './visualizer';
-export * from './components/element';
-export * from './helpers/types';
-
+// Types
+export * from './helpers/types';
+
+// Components
+export * from './visualizer';
+