@twick/visualizer 0.14.0 → 0.14.2

package/src/controllers/frame-effect.controller.tsx

@@ -1,30 +1,30 @@
-
-import { CircleFrameEffect } from "../frame-effects/circle.frame";
-import { RectFrameEffect } from "../frame-effects/rect.frame";
-import {  FrameEffectPlugin } from "../helpers/types";
-
-export class FrameEffectController {
-    private frameEffects: Map<string, FrameEffectPlugin> = new Map();
-  
-    register(frameEffect: FrameEffectPlugin) {
-      this.frameEffects.set(frameEffect.name, frameEffect);
-    }
-  
-    get(name: string): FrameEffectPlugin | undefined {
-      return this.frameEffects.get(name);
-    }
-  
-    list(): string[] {
-      return Array.from(this.frameEffects.keys());
-    }
-  }
-
-  export const registerFrameEffects = () => {
-    frameEffectController.register(CircleFrameEffect);
-    frameEffectController.register(RectFrameEffect);
-  }
-
-  const frameEffectController = new FrameEffectController();  
-  registerFrameEffects();
-
+
+import { CircleFrameEffect } from "../frame-effects/circle.frame";
+import { RectFrameEffect } from "../frame-effects/rect.frame";
+import {  FrameEffectPlugin } from "../helpers/types";
+
+export class FrameEffectController {
+    private frameEffects: Map<string, FrameEffectPlugin> = new Map();
+  
+    register(frameEffect: FrameEffectPlugin) {
+      this.frameEffects.set(frameEffect.name, frameEffect);
+    }
+  
+    get(name: string): FrameEffectPlugin | undefined {
+      return this.frameEffects.get(name);
+    }
+  
+    list(): string[] {
+      return Array.from(this.frameEffects.keys());
+    }
+  }
+
+  export const registerFrameEffects = () => {
+    frameEffectController.register(CircleFrameEffect);
+    frameEffectController.register(RectFrameEffect);
+  }
+
+  const frameEffectController = new FrameEffectController();  
+  registerFrameEffects();
+
   export default frameEffectController;

package/src/controllers/text-effect.controller.ts

@@ -1,33 +1,33 @@
-import { ElasticEffect } from "../text-effects/elastic";
-import { EraseEffect } from "../text-effects/erase";  
-import { StreamWordEffect } from "../text-effects/stream-word";
-import { TypewriterEffect } from "../text-effects/typewriter";
-import { TextEffect } from "../helpers/types";
-
-export class TextEffectController {
-    private effects: Map<string, TextEffect> = new Map();
-  
-    register(effect: TextEffect) {
-      this.effects.set(effect.name, effect);
-    }
-  
-    get(name: string): TextEffect | undefined {
-      return this.effects.get(name);
-    }
-  
-    list(): string[] {
-      return Array.from(this.effects.keys());
-    }
-  }
-
-  export const registerTextEffects = () => {
-    textEffectController.register(TypewriterEffect);
-    textEffectController.register(StreamWordEffect);
-    textEffectController.register(EraseEffect);
-    textEffectController.register(ElasticEffect);
-  }
-
-  const textEffectController = new TextEffectController();  
-  registerTextEffects();
-
+import { ElasticEffect } from "../text-effects/elastic";
+import { EraseEffect } from "../text-effects/erase";  
+import { StreamWordEffect } from "../text-effects/stream-word";
+import { TypewriterEffect } from "../text-effects/typewriter";
+import { TextEffect } from "../helpers/types";
+
+export class TextEffectController {
+    private effects: Map<string, TextEffect> = new Map();
+  
+    register(effect: TextEffect) {
+      this.effects.set(effect.name, effect);
+    }
+  
+    get(name: string): TextEffect | undefined {
+      return this.effects.get(name);
+    }
+  
+    list(): string[] {
+      return Array.from(this.effects.keys());
+    }
+  }
+
+  export const registerTextEffects = () => {
+    textEffectController.register(TypewriterEffect);
+    textEffectController.register(StreamWordEffect);
+    textEffectController.register(EraseEffect);
+    textEffectController.register(ElasticEffect);
+  }
+
+  const textEffectController = new TextEffectController();  
+  registerTextEffects();
+
   export default textEffectController;

package/src/elements/audio.element.tsx

@@ -1,17 +1,17 @@
-import { ElementParams } from "../helpers/types";
-import { createRef, waitFor } from "@twick/core";
-import { Audio } from "@twick/2d";
-
-export const AudioElement = {
-  name: "audio",
-  *create({ containerRef, element, view }: ElementParams) {
-    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();
-  },
-};
+import { ElementParams } from "../helpers/types";
+import { createRef, waitFor } from "@twick/core";
+import { Audio } from "@twick/2d";
+
+export const AudioElement = {
+  name: "audio",
+  *create({ containerRef, element, view }: ElementParams) {
+    const elementRef = createRef<any>();
+    yield* waitFor(element?.s);
+    yield containerRef().add(
+      <Audio ref={elementRef} key={element.id} play={true} {...element.props} />
+    );
+    yield* waitFor(Math.max(0, element.e - element.s));
+    yield elementRef().play(false);
+    yield elementRef().remove();
+  },
+};

package/src/elements/caption.element.tsx

@@ -1,87 +1,87 @@
-import { CaptionProps, ElementParams } from "../helpers/types";
-import { Color, createRef, Reference, waitFor } from "@twick/core";
-import { Rect, Txt } from "@twick/2d";
-import { splitPhraseTiming } from "../helpers/caption.utils";
-import { TRANSPARENT_COLOR } from "../helpers/constants";
-import { hexToRGB } from "../helpers/utils";
-
-export const CaptionElement = {
-  name: "caption",
-  *create({ containerRef, caption }: ElementParams) {
-    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(caption.props);
-      const textRef = createRef<Txt>();
-      const captionProps = caption.props;
-      containerRef().add(
-        <Txt ref={textRef} {...captionProps} text={word.t} opacity={0} />
-      );
-      if (caption.capStyle == "highlight_bg") {
-        const bgContainerRef = createRef();
-        const childTextRef = createRef();
-        const _color = new Color({...hexToRGB(captionProps.colors.background), a: captionProps?.bgOpacity ?? 1});
-        containerRef().add(
-          <Rect
-            ref={bgContainerRef}
-            fill={_color}
-            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 (caption.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;
-    }
-  },
-};
+import { CaptionProps, ElementParams } from "../helpers/types";
+import { Color, createRef, Reference, waitFor } from "@twick/core";
+import { Rect, Txt } from "@twick/2d";
+import { splitPhraseTiming } from "../helpers/caption.utils";
+import { TRANSPARENT_COLOR } from "../helpers/constants";
+import { hexToRGB } from "../helpers/utils";
+
+export const CaptionElement = {
+  name: "caption",
+  *create({ containerRef, caption }: ElementParams) {
+    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(caption.props);
+      const textRef = createRef<Txt>();
+      const captionProps = caption.props;
+      containerRef().add(
+        <Txt ref={textRef} {...captionProps} text={word.t} opacity={0} />
+      );
+      if (caption.capStyle == "highlight_bg") {
+        const bgContainerRef = createRef();
+        const childTextRef = createRef();
+        const _color = new Color({...hexToRGB(captionProps.colors.background), a: captionProps?.bgOpacity ?? 1});
+        containerRef().add(
+          <Rect
+            ref={bgContainerRef}
+            fill={_color}
+            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 (caption.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;
+    }
+  },
+};

package/src/elements/circle.element.tsx

@@ -1,20 +1,20 @@
-import { ElementParams } from "../helpers/types";
-import { all, createRef, waitFor } from "@twick/core";
-import { Circle } from "@twick/2d";
-import { addAnimation } from "../helpers/element.utils";
-
-export const CircleElement = {
-  name: "circle",
-  *create({ containerRef, element, view }: ElementParams) {
-    const elementRef = createRef<any>();
-    yield* waitFor(element?.s);
-    yield containerRef().add(
-      <Circle ref={elementRef} key={element.id} {...element.props} />
-    );
-    yield* all(
-      addAnimation({ elementRef: elementRef, element: element, view }),
-      waitFor(Math.max(0, element.e - element.s))
-    );
-    yield elementRef().remove();
-  },
-};
+import { ElementParams } from "../helpers/types";
+import { all, createRef, waitFor } from "@twick/core";
+import { Circle } from "@twick/2d";
+import { addAnimation } from "../helpers/element.utils";
+
+export const CircleElement = {
+  name: "circle",
+  *create({ containerRef, element, view }: ElementParams) {
+    const elementRef = createRef<any>();
+    yield* waitFor(element?.s);
+    yield containerRef().add(
+      <Circle ref={elementRef} key={element.id} {...element.props} />
+    );
+    yield* all(
+      addAnimation({ elementRef: elementRef, element: element, view }),
+      waitFor(Math.max(0, element.e - element.s))
+    );
+    yield elementRef().remove();
+  },
+};

package/src/elements/icon.element.tsx

@@ -1,20 +1,20 @@
-import { ElementParams } from "../helpers/types";
-import { all, createRef, waitFor } from "@twick/core";
-import { Icon } from "@twick/2d";
-import { addAnimation } from "../helpers/element.utils";
-
-export const IconElement = {
-  name: "icon",
-  *create({ containerRef, element, view }: ElementParams) {
-    const elementRef = createRef<any>();
-    yield* waitFor(element?.s);
-    yield containerRef().add(
-      <Icon ref={elementRef} key={element.id} {...element.props} />
-    );
-    yield* all(
-      addAnimation({ elementRef: elementRef, element: element, view }),
-      waitFor(Math.max(0, element.e - element.s))
-    );
-    yield elementRef().remove();
-  },
-};
+import { ElementParams } from "../helpers/types";
+import { all, createRef, waitFor } from "@twick/core";
+import { Icon } from "@twick/2d";
+import { addAnimation } from "../helpers/element.utils";
+
+export const IconElement = {
+  name: "icon",
+  *create({ containerRef, element, view }: ElementParams) {
+    const elementRef = createRef<any>();
+    yield* waitFor(element?.s);
+    yield containerRef().add(
+      <Icon ref={elementRef} key={element.id} {...element.props} />
+    );
+    yield* all(
+      addAnimation({ elementRef: elementRef, element: element, view }),
+      waitFor(Math.max(0, element.e - element.s))
+    );
+    yield elementRef().remove();
+  },
+};

package/src/elements/image.element.tsx

@@ -1,55 +1,53 @@
-import { ElementParams } from "../helpers/types";
-import { all, createRef, waitFor } from "@twick/core";
-import { Img, Rect } from "@twick/2d";
-import { addAnimation, addFrameEffect, fitElement } from "../helpers/element.utils";
-import { logger } from "../helpers/log.utils";
-import { applyColorFilter } from "../helpers/filters";
-
-export const ImageElement = {
-  name: "image",
-  *create({ containerRef, element, view }: ElementParams) {
-    yield* waitFor(element?.s);
-    logger(`Adding image element ${element.id}`);
-    const frameContainerRef = createRef<any>();
-    const frameElementRef = createRef<any>();
-
-    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(
-        addAnimation({
-          elementRef: frameElementRef,
-          containerRef: frameContainerRef,
-          element: element,
-          view,
-        }),
-        addFrameEffect({
-          containerRef: frameContainerRef,
-          elementRef: frameElementRef,
-          element,
-        }),
-        waitFor(Math.max(0, element.e - element.s))
-      );
-      yield frameElementRef().remove();
-      yield frameContainerRef().remove();
-    }
-  },
-};
+import { ElementParams } from "../helpers/types";
+import { all, createRef, waitFor } from "@twick/core";
+import { Img, Rect } from "@twick/2d";
+import { addAnimation, addFrameEffect, fitElement } from "../helpers/element.utils";
+import { applyColorFilter } from "../helpers/filters";
+
+export const ImageElement = {
+  name: "image",
+  *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}>
+        <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(
+        addAnimation({
+          elementRef: frameElementRef,
+          containerRef: frameContainerRef,
+          element: element,
+          view,
+        }),
+        addFrameEffect({
+          containerRef: frameContainerRef,
+          elementRef: frameElementRef,
+          element,
+        }),
+        waitFor(Math.max(0, element.e - element.s))
+      );
+      yield frameElementRef().remove();
+      yield frameContainerRef().remove();
+    }
+  },
+};

package/src/elements/rect.element.tsx

@@ -1,22 +1,22 @@
-import { ElementParams } from "../helpers/types";
-import { all, createRef, waitFor } from "@twick/core";
-import { Rect } from "@twick/2d";
-import { addAnimation } from "../helpers/element.utils";
-import { logger } from "../helpers/log.utils";
-
-export const RectElement = {
-  name: "rect",
-  *create({ containerRef, element, view }: ElementParams) {
-    const elementRef = createRef<any>();
-    yield* waitFor(element?.s);
-    logger(`RectElement: ${JSON.stringify(element)}`);
-    yield containerRef().add(
-      <Rect ref={elementRef} key={element.id} {...element.props}/>
-    );
-    yield* all(
-      addAnimation({ elementRef: elementRef, element: element, view }),
-      waitFor(Math.max(0, element.e - element.s))
-    );
-    yield elementRef().remove();
-  },
-};
+import { ElementParams } from "../helpers/types";
+import { all, createRef, waitFor } from "@twick/core";
+import { Rect } from "@twick/2d";
+import { addAnimation } from "../helpers/element.utils";
+import { logger } from "../helpers/log.utils";
+
+export const RectElement = {
+  name: "rect",
+  *create({ containerRef, element, view }: ElementParams) {
+    const elementRef = createRef<any>();
+    yield* waitFor(element?.s);
+    logger(`RectElement: ${JSON.stringify(element)}`);
+    yield containerRef().add(
+      <Rect ref={elementRef} key={element.id} {...element.props}/>
+    );
+    yield* all(
+      addAnimation({ elementRef: elementRef, element: element, view }),
+      waitFor(Math.max(0, element.e - element.s))
+    );
+    yield elementRef().remove();
+  },
+};

package/src/elements/scene.element.tsx

@@ -1,29 +1,29 @@
-import { ElementParams } from "../helpers/types";
-import { createRef, waitFor } from "@twick/core";
-import { Rect } from "@twick/2d";
-import { DEFAULT_BACKGROUND_COLOR, ELEMENT_TYPES } from "../helpers/constants";
-import { ImageElement } from "./image.element";
-import { VideoElement } from "./video.element";
-import { logger } from "../helpers/log.utils";
-
-export const SceneElement = {
-  name: "scene",
-  *create({ containerRef, element, view }: ElementParams) {
-    yield* waitFor(element?.s);
-    const mediaContainerRef = createRef<any>();
-    logger(`SceneElement: ${JSON.stringify(element)}`);
-    yield containerRef().add(
-      <Rect
-        ref={mediaContainerRef}
-        fill={element.backgroundColor ?? DEFAULT_BACKGROUND_COLOR}
-        size={"100%"}
-      />
-    );
-    if (element.type === ELEMENT_TYPES.IMAGE) {
-      yield* ImageElement.create({ containerRef, element, view });
-    } else if (element.type === ELEMENT_TYPES.VIDEO) {
-      yield* VideoElement.create({ containerRef, element, view });
-    }
-    yield mediaContainerRef().remove();
-  },
-};
+import { ElementParams } from "../helpers/types";
+import { createRef, waitFor } from "@twick/core";
+import { Rect } from "@twick/2d";
+import { DEFAULT_BACKGROUND_COLOR, ELEMENT_TYPES } from "../helpers/constants";
+import { ImageElement } from "./image.element";
+import { VideoElement } from "./video.element";
+import { logger } from "../helpers/log.utils";
+
+export const SceneElement = {
+  name: "scene",
+  *create({ containerRef, element, view }: ElementParams) {
+    yield* waitFor(element?.s);
+    const mediaContainerRef = createRef<any>();
+    logger(`SceneElement: ${JSON.stringify(element)}`);
+    yield containerRef().add(
+      <Rect
+        ref={mediaContainerRef}
+        fill={element.backgroundColor ?? DEFAULT_BACKGROUND_COLOR}
+        size={"100%"}
+      />
+    );
+    if (element.type === ELEMENT_TYPES.IMAGE) {
+      yield* ImageElement.create({ containerRef, element, view });
+    } else if (element.type === ELEMENT_TYPES.VIDEO) {
+      yield* VideoElement.create({ containerRef, element, view });
+    }
+    yield mediaContainerRef().remove();
+  },
+};