@twick/visualizer 0.0.1 → 0.14.0

package/src/text-effects/typewriter.tsx

@@ -0,0 +1,59 @@
+import { waitFor } from "@twick/core";
+import { TextEffectParams } from "../helpers/types";
+
+/**
+ * TypewriterEffect animates text appearing one character at a time,
+ * mimicking the behavior of a classic typewriter.
+ *
+ * Behavior:
+ * - Optionally waits for a delay before starting.
+ * - Clears the text initially and preserves the element's original size.
+ * - Reveals one character at a time at a consistent interval.
+ *
+ * @param elementRef - Reference to the text element to animate.
+ * @param duration - Total duration of the animation.
+ * @param delay - Optional delay before starting.
+ * @param bufferTime - Time reserved at the end of animation (default: 0.1).
+ */
+export const TypewriterEffect = {
+  name: "typewriter",
+
+  /**
+   * Generator function controlling the character-by-character typing animation.
+   */
+  *run({
+    elementRef,
+    duration,
+    delay,
+    bufferTime = 0.1,
+  }: TextEffectParams) {
+    // Retrieve the full text content
+    const fullText = elementRef().text();
+
+    // Store the element's size to prevent resizing during animation
+    const size = elementRef().size();
+
+    // Clear the text and set fixed size
+    elementRef().setText("");
+    elementRef().size(size);
+
+    // Align text to the left for consistent typing effect
+    elementRef().textAlign("left");
+
+    // Wait for an optional initial delay
+    if (delay) {
+      yield* waitFor(delay);
+    }
+
+    let timeInterval =(duration - bufferTime) / fullText.length;
+
+    // Wait briefly before starting typing
+    yield* waitFor(timeInterval);
+
+    // Reveal each character one by one
+    for (let i = 0; i < fullText.length; i++) {
+      yield* waitFor(timeInterval);
+      elementRef().setText(fullText.substring(0, i + 1));
+    }
+  },
+};

package/src/visualizer.tsx

@@ -4,19 +4,19 @@
  */
 
 import "./global.css";
-import { Rect, makeScene2D, View2D } from "@revideo/2d";
-import { all, useScene } from "@revideo/core";
+import { Rect, makeScene2D, View2D } from "@twick/2d";
+import { all, useScene } from "@twick/core";
 
-import { DEFAULT_BACKGROUND_COLOR, TIMELINE_TYPES } from "./helpers/constants";
+import { DEFAULT_BACKGROUND_COLOR, TRACK_TYPES } from "./helpers/constants";
 import { VideoInput } from "./helpers/types";
 import { logger } from "./helpers/log.utils";
 import {
-  makeAudioTimeline,
-  makeCaptionTimeline,
-  makeElementTimeline,
-  makeSceneTimeline,
-  makeVideoTimeline,
-} from "./components/timeline";
+  makeAudioTrack,
+  makeCaptionTrack,
+  makeElementTrack,
+  makeSceneTrack,
+  makeVideoTrack,
+} from "./components/track";
 
 /**
  * Creates and configures the main scene for video visualization
@@ -29,7 +29,7 @@ export const scene = makeScene2D("scene", function* (view: View2D) {
   const input = useScene().variables.get("input", null)() as VideoInput | null;
   
   if (input) {
-    logger("Scene updated");
+    logger("Scene updated", input);
     
     // Add background rectangle with specified or default color
     yield view.add(
@@ -39,39 +39,39 @@ export const scene = makeScene2D("scene", function* (view: View2D) {
       />
     );
 
-    // Process timeline elements if present
-    if (input.timeline) {
+    // Process track elements if present
+    if (input.tracks) {
       const movie = [];
       let index = 1;
 
-      // Iterate through each timeline element and create appropriate visualization
-      for (const timeline of input.timeline) {
-        switch (timeline.type) {
-          case TIMELINE_TYPES.VIDEO:
-            movie.push(makeVideoTimeline({ view, timeline }));
+      // Iterate through each track element and create appropriate visualization
+      for (const track of input.tracks) {
+        switch (track.type) {
+          case TRACK_TYPES.VIDEO:
+            movie.push(makeVideoTrack({ view, track }));
             break;
-          case TIMELINE_TYPES.AUDIO:
-            movie.push(makeAudioTimeline({ view, timeline }));
+          case TRACK_TYPES.AUDIO:
+            movie.push(makeAudioTrack({ view, track }));
             break;
-          case TIMELINE_TYPES.CAPTION:
+          case TRACK_TYPES.CAPTION:
             movie.push(
-              makeCaptionTimeline({
+              makeCaptionTrack({
                 view,
-                timeline,
+                track,
               })
             );
             break;
-          case TIMELINE_TYPES.SCENE:
-            movie.push(makeSceneTimeline({ view, timeline }));
+          case TRACK_TYPES.SCENE:
+            movie.push(makeSceneTrack({ view, track }));
             break;
-          case TIMELINE_TYPES.ELEMENT:
-            movie.push(makeElementTimeline({ view, timeline }));
+          case TRACK_TYPES.ELEMENT:
+            movie.push(makeElementTrack({ view, track }));
             break;
         }
         index++;
       }
       
-      // Execute all timeline animations in parallel
+      // Execute all track animations in parallel
       yield* all(...movie);
     }
   }

package/tsconfig.json

@@ -1,10 +1,11 @@
 {
-  "extends": "@revideo/2d/tsconfig.project.json",
+  "extends": "@twick/2d/tsconfig.project.json",
   "include": ["src"],
   "compilerOptions": {
     "noEmit": false,
     "outDir": "dist",
     "module": "CommonJS",
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "jsx": "react-jsx"
   }
 }

package/vite.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from "vite";
-import motionCanvas from '@revideo/vite-plugin';
+import motionCanvas from '@twick/vite-plugin';
 
 export default defineConfig({
   plugins: [motionCanvas()],

package/src/components/animation.tsx

@@ -1,7 +0,0 @@
-import { all, Reference } from "@revideo/core";
-
-export function* addAnimations({ elementRef }: { elementRef: Reference<any>;}) {
-    yield elementRef();
-    const animations:any[] = []
-    return yield* all(...animations);
-}

package/src/components/element.tsx

@@ -1,344 +0,0 @@
-/**
- * Element component that handles the creation and management of visual elements
- * with various properties like position, size, rotation, and effects.
- */
-
-import { createRef, waitFor, all, Reference, Color } from "@revideo/core";
-import { Audio, Circle, Icon, Img, Rect, Txt, Video } from "@revideo/2d";
-import { logger } from "../helpers/log.utils";
-import {
-  DEFAULT_BACKGROUND_COLOR,
-  ELEMENT_TYPES,
-  TRANSPARENT_COLOR,
-} from "../helpers/constants";
-import { fitElement } from "../helpers/element.utils";
-import { applyColorFilter } from "../helpers/filters";
-import { addFrameEffect } from "./frame-effects";
-import { Caption, CaptionProps, VisualizerElement } from "../helpers/types";
-import { splitPhraseTiming } from "../helpers/caption.utils";
-import { addAnimations } from "./animation";
-
-
-export function* addMediaElement({
-  containerRef,
-  element,
-  mediaType,
-  waitOnStart = true,
-}: {
-  containerRef: Reference<any>;
-  element: VisualizerElement;
-  mediaType: string;
-  waitOnStart?: boolean;
-}) {
-  if (waitOnStart) {
-    yield* waitFor(element.s);
-  }
-  const frameContainerRef = createRef<any>();
-  const frameElementRef = createRef<any>();
-  if (mediaType === ELEMENT_TYPES.VIDEO) {
-    const frameProps = element.frame || element.props;
-    logger(`Adding video element ${element.id}`);
-    yield containerRef().add(
-      <Rect ref={frameContainerRef} key={element.id} {...frameProps}>
-        <Video
-          ref={frameElementRef}
-          key={`child-${element.id}`}
-          {...element.props}
-        />
-      </Rect>
-    );
-  } else if (mediaType === ELEMENT_TYPES.IMAGE) {
-    logger(`Adding image element ${element.id}`);
-    yield containerRef().add(
-      <Rect ref={frameContainerRef} key={element.id} {...element.frame}>
-        <Img
-          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(
-      addAnimations({
-        elementRef: frameElementRef,
-      }),
-      addFrameEffect({
-        containerRef: frameContainerRef,
-        elementRef: frameElementRef,
-        frameElement,
-      }),
-      waitFor(Math.max(0, element.e - element.s))
-    );
-    if (element.type === ELEMENT_TYPES.VIDEO) {
-      yield frameElementRef().playing(false);
-    }
-    yield frameElementRef().remove();
-    yield frameContainerRef().remove();
-  }
-}
-
-export function* addCaptionElement({
-  caption,
-  captionProps,
-  containerRef,
-  capStyle,
-}: {
-  caption: Caption;
-  captionProps: CaptionProps;
-  containerRef: Reference<any>;
-  capStyle: string;
-}) {
-  const words = splitPhraseTiming(caption);
-  let phraseStart = 0;
-  if (words?.length) {
-    phraseStart = words[0].s;
-  }
-  let wordsState: {
-    refs: Array<{ bgRef?: Reference<any>; textRef: Reference<any> }>;
-    props: CaptionProps[];
-    idx: number;
-    prevTime: number;
-  } = {
-    refs: [],
-    props: [],
-    idx: 0,
-    prevTime: phraseStart,
-  };
-
-  for (const word of words) {
-    wordsState.props.push(captionProps);
-    const textRef = createRef<Txt>();
-    containerRef().add(
-      <Txt ref={textRef} {...captionProps} text={word.t} opacity={0} />
-    );
-    if (capStyle == "highlight_bg") {
-      const bgContainerRef = createRef();
-      const childTextRef = createRef();
-      containerRef().add(
-        <Rect
-          ref={bgContainerRef}
-          fill={new Color(captionProps.colors.background).alpha(
-            captionProps?.bgOpacity ?? 1
-          )}
-          width={textRef().width() + (captionProps.bgOffsetWidth ?? 30)}
-          height={textRef().height() + (captionProps.bgOffsetHeight ?? 10)}
-          margin={captionProps.bgMargin ?? [0, -5]}
-          radius={captionProps.bgRadius ?? 10}
-          padding={captionProps.bgPadding ?? [0, 15]}
-          opacity={0}
-          alignItems={"center"}
-          justifyContent={"center"}
-          layout
-        >
-          <Txt ref={childTextRef} {...captionProps} text={word.t} />
-        </Rect>
-      );
-      textRef().remove();
-      wordsState.refs.push({
-        bgRef: bgContainerRef,
-        textRef: childTextRef,
-      });
-    } else {
-      wordsState.refs.push({
-        textRef: textRef,
-      });
-    }
-    wordsState.prevTime = word.e;
-    wordsState.idx = wordsState.idx + 1;
-  }
-
-  wordsState.prevTime = phraseStart;
-  wordsState.idx = 0;
-
-  for (const word of words) {
-    if (capStyle == "highlight_bg") {
-      yield* wordsState.refs[wordsState.idx]?.bgRef?.().opacity(1, 0);
-      yield* waitFor(Math.max(0, word.e - word.s));
-      yield* wordsState.refs[wordsState.idx]
-        ?.bgRef?.()
-        .fill(TRANSPARENT_COLOR, 0);
-    } else {
-      yield* wordsState.refs[wordsState.idx]?.textRef?.().opacity(1, 0);
-      yield* waitFor(Math.max(0, word.e - word.s));
-    }
-    wordsState.prevTime = word.e;
-    wordsState.idx = wordsState.idx + 1;
-  }
-}
-
-export function* makeSceneElements({
-  containerRef,
-  element,
-}: {
-  containerRef: Reference<any>;
-  element: VisualizerElement;
-}) {
-  switch (element.type) {
-    case ELEMENT_TYPES.RECT:
-      yield* addSceneRectElement({ containerRef, element });
-      break;
-    case ELEMENT_TYPES.IMAGE:
-    case ELEMENT_TYPES.VIDEO:
-      const mediaContainerRef = createRef<any>();
-      yield containerRef().add(
-        <Rect
-          ref={mediaContainerRef}
-          fill={element.backgroundColor ?? DEFAULT_BACKGROUND_COLOR}
-          size={"100%"}
-        />
-      );
-      yield* addMediaElement({
-        containerRef: mediaContainerRef,
-        element,
-        mediaType: element.type,
-        waitOnStart: false,
-      });
-      yield mediaContainerRef().remove();
-      break;
-    default:
-      yield* waitFor(Math.max(0, element.e - element.s));
-      break;
-  }
-}
-
-function* addSceneRectElement({
-  containerRef,
-  element,
-}: {
-  containerRef: Reference<any>;
-  element: VisualizerElement;
-}) {
-  const elementRef = createRef<any>();
-  let sequence: any[] = [];
-  yield containerRef().add(
-    <Rect ref={elementRef} key={element.id} {...element.props}></Rect>
-  );
-  for (const childElement of element.elements || []) {
-    sequence.push(
-      makeSceneElements({
-        containerRef: elementRef,
-        element: childElement,
-      })
-    );
-  }
-
-  yield* all(
-    ...sequence,
-    addAnimations({
-      elementRef,
-    }),
-    waitFor(Math.max(0, element.e - element.s))
-  );
-  yield elementRef().remove();
-}
-
-export function* addRectElement({
-  containerRef,
-  element,
-}: {
-  containerRef: Reference<any>;
-  element: VisualizerElement;
-}) {
-  const elementRef = createRef<any>();
-  yield* waitFor(element?.s);
-  yield containerRef().add(
-    <Rect ref={elementRef} key={element.id} {...element.props} />
-  );
-  yield* all(
-    addAnimations({ elementRef: elementRef }),
-    waitFor(Math.max(0, element.e - element.s))
-  );
-  yield elementRef().remove();
-}
-
-export function* addTextElement({
-  containerRef,
-  element,
-}: {
-  containerRef: Reference<any>;
-  element: VisualizerElement;
-}) {
-  const elementRef = createRef<any>();
-  yield* waitFor(element?.s);
-  yield containerRef().add(
-    <Txt
-      ref={elementRef}
-      key={element.id}
-      text={element.t}
-      {...element.props}
-    />
-  );
-  yield* all(
-    addAnimations({ elementRef: elementRef }),
-    waitFor(Math.max(0, element.e - element.s))
-  );
-  yield elementRef().remove();
-}
-
-export function* addCircleElement({
-  containerRef,
-  element,
-}: {
-  containerRef: Reference<any>;
-  element: VisualizerElement;
-}) {
-  const elementRef = createRef<any>();
-  yield* waitFor(element?.s);
-  yield containerRef().add(
-    <Circle ref={elementRef} key={element.id} {...element.props} />
-  );
-  yield* all(
-    addAnimations({ elementRef: elementRef }),
-    waitFor(Math.max(0, element.e - element.s))
-  );
-  yield elementRef().remove();
-}
-
-export function* addIconElement({
-  containerRef,
-  element,
-}: {
-  containerRef: Reference<any>;
-  element: VisualizerElement;
-}) {
-  const elementRef = createRef<any>();
-  yield* waitFor(element?.s);
-  yield containerRef().add(
-    <Icon ref={elementRef} key={element.id} {...element.props} />
-  );
-  yield* all(
-    addAnimations({ elementRef: elementRef }),
-    waitFor(Math.max(0, element.e - element.s))
-  );
-  yield elementRef().remove();
-}
-
-export function* addAudioElement({
-  containerRef,
-  element,
-}: {
-  containerRef: Reference<any>;
-  element: VisualizerElement;
-}) {
-  const elementRef = createRef<any>();
-  yield* waitFor(element?.s);
-  yield containerRef().add(
-    <Audio ref={elementRef} key={element.id} {...element.props} />
-  );
-  yield* waitFor(Math.max(0, element.e - element.s));
-  yield elementRef().playing(false);
-  yield elementRef().remove();
-}