@twick/visualizer 0.0.1 → 0.14.2

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();
-}

package/src/components/timeline.tsx

@@ -1,225 +0,0 @@
-/**
- * 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();
-}