@twick/visualizer 0.15.19 → 0.15.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twick/visualizer",
-  "version": "0.15.19",
+  "version": "0.15.21",
   "license": "https://github.com/ncounterspecialist/twick/blob/main/LICENSE.md",
   "scripts": {
     "start": "twick editor --projectFile ./src/live.tsx",
@@ -22,18 +22,19 @@
   },
   "dependencies": {
     "@preact/signals": "^1.2.1",
-    "@twick/2d": "^0.15.19",
-    "@twick/core": "^0.15.19",
-    "@twick/renderer": "^0.15.19",
-    "@twick/vite-plugin": "^0.15.19",
-    "date-fns": "^4.1.0",
-    "preact": "^10.19.2",
+    "@twick/2d": "^0.15.21",
+    "@twick/core": "^0.15.21",
+    "@twick/effects": "0.15.21",
+    "@twick/media-utils": "0.15.21",
+    "@twick/renderer": "^0.15.21",
+    "@twick/vite-plugin": "^0.15.21",
     "crelt": "^1.0.6",
-    "@twick/media-utils": "0.15.19"
+    "date-fns": "^4.1.0",
+    "preact": "^10.19.2"
   },
   "devDependencies": {
-    "@twick/cli": "^0.15.19",
-    "@twick/ui": "^0.15.19",
+    "@twick/cli": "^0.15.21",
+    "@twick/ui": "^0.15.21",
     "typescript": "5.4.2",
     "typedoc": "^0.25.8",
     "typedoc-plugin-markdown": "^3.17.1",

package/src/caption-styles/highlight-bg.handler.tsx

@@ -0,0 +1,60 @@
+import { Color, createRef, waitFor } from "@twick/core";
+import { Rect, Txt } from "@twick/2d";
+import { TRANSPARENT_COLOR } from "../helpers/constants";
+import { hexToRGB } from "../helpers/utils";
+import type { CaptionStyleHandler, RenderWordsParams, AnimateWordsParams } from "./types";
+
+export const highlightBgHandler: CaptionStyleHandler = {
+  id: "highlight_bg",
+
+  renderWords({ containerRef, words, caption }) {
+    const captionProps = caption.props;
+    const refs: Array<{ textRef: ReturnType<typeof createRef<Txt>>; bgRef: ReturnType<typeof createRef<Rect>> }> = [];
+
+    for (const word of words) {
+      const textRef = createRef<Txt>();
+      containerRef().add(
+        <Txt ref={textRef} {...captionProps} text={word.t} opacity={0} />
+      );
+      const bgContainerRef = createRef<Rect>();
+      const childTextRef = createRef<Txt>();
+      const _color = new Color({
+        ...hexToRGB(captionProps.colors.bgColor ?? "#444444"),
+        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();
+      refs.push({ textRef: childTextRef, bgRef: bgContainerRef });
+    }
+
+    return { refs };
+  },
+
+  *animateWords({ words, refs }) {
+    for (let i = 0; i < words.length; i++) {
+      const r = refs.refs[i];
+      const bgRef = r.bgRef;
+      if (bgRef) {
+        yield* bgRef().opacity(1, 0);
+        yield* waitFor(Math.max(0, words[i].e - words[i].s));
+        yield* bgRef().fill(TRANSPARENT_COLOR, 0);
+      }
+    }
+  },
+};

package/src/caption-styles/index.ts

@@ -0,0 +1,32 @@
+import { registerCaptionStyle } from "./registry";
+import { highlightBgHandler } from "./highlight-bg.handler";
+import { wordByWordHandler } from "./word-by-word.handler";
+import { wordByWordWithBgHandler } from "./word-by-word-with-bg.handler";
+import { outlineOnlyHandler } from "./outline-only.handler";
+import { softBoxHandler } from "./soft-box.handler";
+import { lowerThirdHandler } from "./lower-third.handler";
+import { typewriterHandler } from "./typewriter.handler";
+import { karaokeHandler } from "./karaoke.handler";
+import { popScaleHandler } from "./pop-scale.handler";
+
+/**
+ * Register all built-in caption style handlers.
+ * Called automatically on first import.
+ */
+export function registerCaptionStyles(): void {
+  registerCaptionStyle(highlightBgHandler);
+  registerCaptionStyle(wordByWordHandler);
+  registerCaptionStyle(wordByWordWithBgHandler);
+  registerCaptionStyle(outlineOnlyHandler);
+  registerCaptionStyle(softBoxHandler);
+  registerCaptionStyle(lowerThirdHandler);
+  registerCaptionStyle(typewriterHandler);
+  registerCaptionStyle(karaokeHandler);
+  registerCaptionStyle(popScaleHandler);
+}
+
+// Auto-register on module load so handlers are available
+registerCaptionStyles();
+
+export { getCaptionStyleHandler, getDefaultCaptionStyleHandler, registerCaptionStyle } from "./registry";
+export type { CaptionStyleHandler, WordRefs, WordTiming } from "./types";

package/src/caption-styles/karaoke.handler.tsx

@@ -0,0 +1,58 @@
+import { Color, createRef, waitFor } from "@twick/core";
+import { Txt } from "@twick/2d";
+import { hexToRGB } from "../helpers/utils";
+import type { CaptionStyleHandler, RenderWordsParams, AnimateWordsParams } from "./types";
+
+const INACTIVE_OPACITY = 0.5;
+
+/**
+ * Karaoke: all words visible; current word switches to highlight color (one Txt per word, animate fill).
+ * Same ref/animate pattern as word_by_word; no overlay needed.
+ */
+export const karaokeHandler: CaptionStyleHandler = {
+  id: "karaoke",
+
+  renderWords({ containerRef, words, caption }) {
+    const captionProps = caption.props;
+    const textColor = captionProps.colors?.text ?? "#ffffff";
+    const refs: Array<{ textRef: ReturnType<typeof createRef<Txt>> }> = [];
+
+    for (const word of words) {
+      const textRef = createRef<Txt>();
+      containerRef().add(
+        <Txt
+          ref={textRef}
+          {...captionProps}
+          fill={textColor}
+          text={word.t}
+          opacity={INACTIVE_OPACITY}
+        />
+      );
+      refs.push({ textRef });
+    }
+
+    return { refs };
+  },
+
+  *animateWords({ words, refs, caption }) {
+    const textColor = caption.props.colors?.text ?? "#ffffff";
+    const highlightColor = caption.props.colors?.highlight ?? "#ff4081";
+    const textColorObj = new Color({ ...hexToRGB(textColor), a: 1 });
+    const highlightColorObj = new Color({ ...hexToRGB(highlightColor), a: 1 });
+    const n = refs.refs.length;
+
+    for (let i = 0; i < words.length; i++) {
+      for (let j = 0; j < n; j++) {
+        refs.refs[j].textRef().opacity(INACTIVE_OPACITY);
+        refs.refs[j].textRef().fill(textColorObj);
+      }
+      refs.refs[i].textRef().opacity(1);
+      refs.refs[i].textRef().fill(highlightColorObj, 0);
+      yield* waitFor(Math.max(0, words[i].e - words[i].s));
+    }
+    for (let j = 0; j < n; j++) {
+      refs.refs[j].textRef().opacity(INACTIVE_OPACITY);
+      refs.refs[j].textRef().fill(textColorObj);
+    }
+  },
+};

package/src/caption-styles/lower-third.handler.tsx

@@ -0,0 +1,44 @@
+import { Color, createRef, waitFor } from "@twick/core";
+import { Txt } from "@twick/2d";
+import { hexToRGB } from "../helpers/utils";
+import type { CaptionStyleHandler, RenderWordsParams, AnimateWordsParams } from "./types";
+
+/**
+ * Lower third: broadcast-style bar. Same word-by-word animation as word_by_word;
+ * preparePhraseContainer gives the phrase a bar background (mirrors soft_box pattern).
+ */
+export const lowerThirdHandler: CaptionStyleHandler = {
+  id: "lower_third",
+
+  renderWords({ containerRef, words, caption }) {
+    const captionProps = caption.props;
+    const refs: Array<{ textRef: ReturnType<typeof createRef<Txt>> }> = [];
+
+    for (const word of words) {
+      const textRef = createRef<Txt>();
+      containerRef().add(
+        <Txt ref={textRef} {...captionProps} text={word.t} opacity={0} />
+      );
+      refs.push({ textRef });
+    }
+
+    return { refs };
+  },
+
+  *animateWords({ words, refs }) {
+    for (let i = 0; i < words.length; i++) {
+      yield* refs.refs[i].textRef().opacity(1, 0);
+      yield* waitFor(Math.max(0, words[i].e - words[i].s));
+    }
+  },
+
+  preparePhraseContainer({ phraseRef, phraseProps }) {
+    const opacity = Math.min(phraseProps?.bgOpacity ?? 0.75, 0.85);
+    const bgColor = phraseProps.colors?.bgColor ?? "#1a1a1a";
+    const _color = new Color({
+      ...hexToRGB(bgColor),
+      a: opacity,
+    });
+    phraseRef().fill(_color);
+  },
+};

package/src/caption-styles/outline-only.handler.tsx

@@ -0,0 +1,29 @@
+import { createRef, waitFor } from "@twick/core";
+import { Txt } from "@twick/2d";
+import type { CaptionStyleHandler, RenderWordsParams, AnimateWordsParams } from "./types";
+
+export const outlineOnlyHandler: CaptionStyleHandler = {
+  id: "outline_only",
+
+  renderWords({ containerRef, words, caption }) {
+    const captionProps = caption.props;
+    const refs: Array<{ textRef: ReturnType<typeof createRef<Txt>> }> = [];
+
+    for (const word of words) {
+      const textRef = createRef<Txt>();
+      containerRef().add(
+        <Txt ref={textRef} {...captionProps} text={word.t} opacity={0} />
+      );
+      refs.push({ textRef });
+    }
+
+    return { refs };
+  },
+
+  *animateWords({ words, refs }) {
+    for (let i = 0; i < words.length; i++) {
+      yield* refs.refs[i].textRef().opacity(1, 0);
+      yield* waitFor(Math.max(0, words[i].e - words[i].s));
+    }
+  },
+};

package/src/caption-styles/pop-scale.handler.tsx

@@ -0,0 +1,35 @@
+import { createRef, waitFor } from "@twick/core";
+import { Txt } from "@twick/2d";
+import type { CaptionStyleHandler, RenderWordsParams, AnimateWordsParams } from "./types";
+
+const POP_DURATION = 0.2;
+
+/**
+ * Pop: words pop in with a quick opacity fade (same ref/animate pattern as word_by_word).
+ * Scale-based bounce can be added later if Txt scale API is confirmed in this engine.
+ */
+export const popScaleHandler: CaptionStyleHandler = {
+  id: "pop_scale",
+
+  renderWords({ containerRef, words, caption }) {
+    const captionProps = caption.props;
+    const refs: Array<{ textRef: ReturnType<typeof createRef<Txt>> }> = [];
+
+    for (const word of words) {
+      const textRef = createRef<Txt>();
+      containerRef().add(
+        <Txt ref={textRef} {...captionProps} text={word.t} opacity={0} />
+      );
+      refs.push({ textRef });
+    }
+
+    return { refs };
+  },
+
+  *animateWords({ words, refs }) {
+    for (let i = 0; i < words.length; i++) {
+      yield* refs.refs[i].textRef().opacity(1, POP_DURATION);
+      yield* waitFor(Math.max(0, words[i].e - words[i].s - POP_DURATION));
+    }
+  },
+};

package/src/caption-styles/registry.ts

@@ -0,0 +1,32 @@
+import type { CaptionStyleHandler } from "./types";
+
+const handlers = new Map<string, CaptionStyleHandler>();
+
+const DEFAULT_STYLE_ID = "word_by_word";
+
+/**
+ * Register a caption style handler.
+ */
+export function registerCaptionStyle(handler: CaptionStyleHandler): void {
+  handlers.set(handler.id, handler);
+}
+
+/**
+ * Get handler for a style ID.
+ */
+export function getCaptionStyleHandler(id: string): CaptionStyleHandler | undefined {
+  return handlers.get(id);
+}
+
+/**
+ * Get default handler when style is unknown or missing.
+ */
+export function getDefaultCaptionStyleHandler(): CaptionStyleHandler {
+  const handler = handlers.get(DEFAULT_STYLE_ID);
+  if (!handler) {
+    throw new Error(
+      `Caption style "${DEFAULT_STYLE_ID}" not registered. Ensure caption-styles are initialized.`
+    );
+  }
+  return handler;
+}

package/src/caption-styles/soft-box.handler.tsx

@@ -0,0 +1,40 @@
+import { Color, createRef, waitFor } from "@twick/core";
+import { Txt } from "@twick/2d";
+import { hexToRGB } from "../helpers/utils";
+import type { CaptionStyleHandler, RenderWordsParams, AnimateWordsParams } from "./types";
+
+export const softBoxHandler: CaptionStyleHandler = {
+  id: "soft_box",
+
+  renderWords({ containerRef, words, caption }) {
+    const captionProps = caption.props;
+    const refs: Array<{ textRef: ReturnType<typeof createRef<Txt>> }> = [];
+
+    for (const word of words) {
+      const textRef = createRef<Txt>();
+      containerRef().add(
+        <Txt ref={textRef} {...captionProps} text={word.t} opacity={0} />
+      );
+      refs.push({ textRef });
+    }
+
+    return { refs };
+  },
+
+  *animateWords({ words, refs }) {
+    for (let i = 0; i < words.length; i++) {
+      yield* refs.refs[i].textRef().opacity(1, 0);
+      yield* waitFor(Math.max(0, words[i].e - words[i].s));
+    }
+  },
+
+  preparePhraseContainer({ phraseRef, phraseProps }) {
+    const opacity = Math.min(phraseProps?.bgOpacity ?? 0.6, 0.7);
+    const bgColor = phraseProps.colors?.bgColor ?? "#333333";
+    const _color = new Color({
+      ...hexToRGB(bgColor),
+      a: opacity,
+    });
+    phraseRef().fill(_color);
+  },
+};

package/src/caption-styles/types.ts

@@ -0,0 +1,77 @@
+import type { Reference, ThreadGenerator } from "@twick/core";
+import type { Rect, Txt } from "@twick/2d";
+import type { Caption, CaptionProps } from "../helpers/types";
+
+/**
+ * Word timing from splitPhraseTiming.
+ */
+export interface WordTiming {
+  t: string;
+  s: number;
+  e: number;
+}
+
+/**
+ * Refs returned by renderWords for animation.
+ * - textRef: main text element (required).
+ * - bgRef: optional background rect (e.g. highlight_bg).
+ * - highlightRef: optional overlay Txt in highlight color (e.g. karaoke current word).
+ * - prefixRefs: optional refs per character-step for letter-by-letter reveal (e.g. typewriter).
+ */
+export interface WordRefs {
+  refs: Array<{
+    textRef: Reference<Txt>;
+    bgRef?: Reference<Rect>;
+    highlightRef?: Reference<Txt>;
+    prefixRefs?: Reference<Txt>[];
+  }>;
+}
+
+/**
+ * Parameters for renderWords.
+ */
+export interface RenderWordsParams {
+  containerRef: Reference<Rect>;
+  words: WordTiming[];
+  caption: Caption & { props: CaptionProps };
+}
+
+/**
+ * Parameters for animateWords.
+ */
+export interface AnimateWordsParams {
+  words: WordTiming[];
+  refs: WordRefs;
+  caption: Caption & { props: CaptionProps };
+}
+
+/**
+ * Parameters for preparePhraseContainer (optional hook for phrase-level styling).
+ */
+export interface PreparePhraseContainerParams {
+  phraseRef: Reference<Rect>;
+  phraseProps: CaptionProps;
+}
+
+/**
+ * Caption style handler contract.
+ * Each style implements its own rendering and animation logic.
+ */
+export interface CaptionStyleHandler {
+  readonly id: string;
+
+  /**
+   * Build word elements into container. Returns refs needed for animation.
+   */
+  renderWords(params: RenderWordsParams): WordRefs;
+
+  /**
+   * Generator: animate words over time.
+   */
+  animateWords(params: AnimateWordsParams): ThreadGenerator;
+
+  /**
+   * Optional: customize phrase container before words are rendered (e.g. fill background).
+   */
+  preparePhraseContainer?(params: PreparePhraseContainerParams): void;
+}

package/src/caption-styles/typewriter.handler.tsx

@@ -0,0 +1,33 @@
+import { createRef, waitFor } from "@twick/core";
+import { Txt } from "@twick/2d";
+import type { CaptionStyleHandler, RenderWordsParams, AnimateWordsParams } from "./types";
+
+/**
+ * Typewriter: words appear one by one (same pattern as word_by_word).
+ * Letter-by-letter would require a wrapper per word so prefixes overlay; follow highlight-bg structure if adding later.
+ */
+export const typewriterHandler: CaptionStyleHandler = {
+  id: "typewriter",
+
+  renderWords({ containerRef, words, caption }) {
+    const captionProps = caption.props;
+    const refs: Array<{ textRef: ReturnType<typeof createRef<Txt>> }> = [];
+
+    for (const word of words) {
+      const textRef = createRef<Txt>();
+      containerRef().add(
+        <Txt ref={textRef} {...captionProps} text={word.t} opacity={0} />
+      );
+      refs.push({ textRef });
+    }
+
+    return { refs };
+  },
+
+  *animateWords({ words, refs }) {
+    for (let i = 0; i < words.length; i++) {
+      yield* refs.refs[i].textRef().opacity(1, 0);
+      yield* waitFor(Math.max(0, words[i].e - words[i].s));
+    }
+  },
+};

package/src/caption-styles/word-by-word-with-bg.handler.tsx

@@ -0,0 +1,39 @@
+import { Color, createRef, waitFor } from "@twick/core";
+import { Txt } from "@twick/2d";
+import { hexToRGB } from "../helpers/utils";
+import type { CaptionStyleHandler, RenderWordsParams, AnimateWordsParams } from "./types";
+
+export const wordByWordWithBgHandler: CaptionStyleHandler = {
+  id: "word_by_word_with_bg",
+
+  renderWords({ containerRef, words, caption }) {
+    const captionProps = caption.props;
+    const refs: Array<{ textRef: ReturnType<typeof createRef<Txt>> }> = [];
+
+    for (const word of words) {
+      const textRef = createRef<Txt>();
+      containerRef().add(
+        <Txt ref={textRef} {...captionProps} text={word.t} opacity={0} />
+      );
+      refs.push({ textRef });
+    }
+
+    return { refs };
+  },
+
+  *animateWords({ words, refs }) {
+    for (let i = 0; i < words.length; i++) {
+      yield* refs.refs[i].textRef().opacity(1, 0);
+      yield* waitFor(Math.max(0, words[i].e - words[i].s));
+    }
+  },
+
+  preparePhraseContainer({ phraseRef, phraseProps }) {
+    const bgColor = phraseProps.colors?.bgColor ?? "#444444";
+    const _color = new Color({
+      ...hexToRGB(bgColor),
+      a: phraseProps?.bgOpacity ?? 1,
+    });
+    phraseRef().fill(_color);
+  },
+};

package/src/caption-styles/word-by-word.handler.tsx

@@ -0,0 +1,29 @@
+import { createRef, waitFor } from "@twick/core";
+import { Txt } from "@twick/2d";
+import type { CaptionStyleHandler, RenderWordsParams, AnimateWordsParams } from "./types";
+
+export const wordByWordHandler: CaptionStyleHandler = {
+  id: "word_by_word",
+
+  renderWords({ containerRef, words, caption }) {
+    const captionProps = caption.props;
+    const refs: Array<{ textRef: ReturnType<typeof createRef<Txt>> }> = [];
+
+    for (const word of words) {
+      const textRef = createRef<Txt>();
+      containerRef().add(
+        <Txt ref={textRef} {...captionProps} text={word.t} opacity={0} />
+      );
+      refs.push({ textRef });
+    }
+
+    return { refs };
+  },
+
+  *animateWords({ words, refs }) {
+    for (let i = 0; i < words.length; i++) {
+      yield* refs.refs[i].textRef().opacity(1, 0);
+      yield* waitFor(Math.max(0, words[i].e - words[i].s));
+    }
+  },
+};

package/src/components/track.tsx

@@ -5,7 +5,7 @@
 
 import { Layout, Rect, View2D, Audio, Img, Txt } from "@twick/2d";
 import { VisualizerTrack, WatermarkInput } from "../helpers/types";
-import { all, Color, createRef, ThreadGenerator, waitFor } from "@twick/core";
+import { all, createRef, ThreadGenerator, waitFor } from "@twick/core";
 import {
   CAPTION_STYLE,
   DEFAULT_CAPTION_COLORS,
@@ -14,7 +14,7 @@ import {
 import { logger } from "../helpers/log.utils";
 import elementController from "../controllers/element.controller";
 import watermarkController from "../controllers/watermark.controller";
-import { hexToRGB } from "../helpers/utils";
+import { getCaptionStyleHandler } from "../caption-styles";
 
 /**
  * Creates a video track with specified configuration
@@ -93,16 +93,18 @@ export function* makeCaptionTrack({
   view.add(<Layout size={"100%"} ref={captionTrackRef} />);
 
   const tProps = track?.props;
+  const defaultCapStyle = "highlight_bg";
 
   const applyToAll = tProps?.applyToAll ?? false;
 
   const trackDefaultProps =
-    (CAPTION_STYLE[tProps?.capStyle ?? ""] || {}).word || {};
+    (CAPTION_STYLE[tProps?.capStyle ?? defaultCapStyle] || CAPTION_STYLE[defaultCapStyle] || {}).word || {};
 
   for (const element of track.elements) {
     const eProps = element.props;
+    const resolvedCapStyle = eProps?.capStyle ?? tProps?.capStyle ?? defaultCapStyle;
     const rectStyle =
-      (CAPTION_STYLE[eProps?.capStyle ?? tProps?.capStyle ?? ""] || {}).rect ||
+      (CAPTION_STYLE[resolvedCapStyle] || CAPTION_STYLE[defaultCapStyle] || {}).rect ||
       {};
     // Cast alignItems/justifyContent as any to satisfy RectProps
     const mappedRectStyle = {
@@ -113,11 +115,16 @@ export function* makeCaptionTrack({
 
     const phraseColors = applyToAll ? tProps?.colors : eProps?.colors ?? tProps?.colors ?? DEFAULT_CAPTION_COLORS;
 
+    const resolvedFont = applyToAll ? tProps?.font : eProps?.font ?? tProps?.font ?? DEFAULT_CAPTION_FONT;
+    const defaults = trackDefaultProps as { fontFamily?: string; fontSize?: number; fontWeight?: number };
     const phraseProps = {
       ...trackDefaultProps,
       ...(tProps?.captionProps || {}),
       colors: phraseColors,
-      font: applyToAll ? tProps?.font : eProps?.font ?? tProps?.font ?? DEFAULT_CAPTION_FONT,
+      font: resolvedFont,
+      fontFamily: resolvedFont?.family ?? defaults?.fontFamily ?? DEFAULT_CAPTION_FONT.family,
+      fontSize: resolvedFont?.size ?? defaults?.fontSize ?? DEFAULT_CAPTION_FONT.size,
+      fontWeight: resolvedFont?.weight ?? defaults?.fontWeight ?? DEFAULT_CAPTION_FONT.weight,
       fill: phraseColors.text,
       bgColor: phraseColors.bgColor,
       bgOpacity: tProps?.bgOpacity ?? 1,
@@ -135,12 +142,22 @@ export function* makeCaptionTrack({
         layout
       />
     );
-    if (tProps?.capStyle === "word_by_word_with_bg") {
-      const _color = new Color({
-        ...hexToRGB(phraseProps.bgColor),
-        a: phraseProps?.bgOpacity ?? 1,
+    // Allow styles to tweak how phrase-level props are interpreted.
+    // For classic outline, use explicit outlineColor so it is independent
+    // from per-word highlight color.
+    const styledPhraseProps = {
+      ...phraseProps,
+      ...(resolvedCapStyle === "outline_only" && phraseColors?.outlineColor
+        ? { stroke: phraseColors.outlineColor }
+        : {}),
+    };
+
+    const styleHandler = getCaptionStyleHandler(resolvedCapStyle ?? "");
+    if (styleHandler?.preparePhraseContainer) {
+      styleHandler.preparePhraseContainer({
+        phraseRef,
+        phraseProps: styledPhraseProps,
       });
-      phraseRef().fill(_color);
     }
     yield* elementController.get("caption")?.create({
       containerRef: phraseRef,
@@ -148,7 +165,7 @@ export function* makeCaptionTrack({
         ...element,
         t: element.t ?? "",
         capStyle: eProps?.capStyle ?? tProps?.capStyle,
-        props: phraseProps,
+        props: styledPhraseProps,
       },
       view,
     });
@@ -204,13 +221,16 @@ export function* makeElementTrack({
   const sequence: ThreadGenerator[] = [];
   try {
     for (const element of track.elements) {
-      sequence.push(
-        elementController.get(element.type)?.create({
-          containerRef: elementTrackRef,
-          element,
-          view,
-        })
-      );
+      const handler = elementController.get(element.type);
+      if (handler) {
+        sequence.push(
+          handler.create({
+            containerRef: elementTrackRef,
+            element,
+            view,
+          })
+        );
+      }
     }
   } catch (error) {
     logger("Error creating element track", error);