@twick/visualizer 0.14.7 → 0.14.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twick/visualizer",
-  "version": "0.14.7",
+  "version": "0.14.8",
   "license": "SEE LICENSE IN LICENSE.md",
   "scripts": {
     "start": "twick editor --projectFile ./src/live.tsx",
@@ -13,14 +13,14 @@
   },
   "dependencies": {
     "@preact/signals": "^1.2.1",
-    "@twick/2d": "0.14.7",
-    "@twick/core": "0.14.7",
-    "@twick/renderer": "0.14.7",
-    "@twick/vite-plugin": "0.14.7",
+    "@twick/2d": "0.14.8",
+    "@twick/core": "0.14.8",
+    "@twick/renderer": "0.14.8",
+    "@twick/vite-plugin": "0.14.8",
     "date-fns": "^4.1.0",
     "preact": "^10.19.2",
     "crelt": "^1.0.6",
-    "@twick/media-utils": "0.14.7"
+    "@twick/media-utils": "0.14.8"
   },
   "devDependencies": {
     "@twick/cli": "0.14.0",
@@ -29,6 +29,6 @@
     "typedoc": "^0.25.8",
     "typedoc-plugin-markdown": "^3.17.1",
     "vite-plugin-dts": "^3.7.3",
-    "vite": "^5.4.20"
+    "vite": "^5.4.21"
   }
 }

package/package.json.bak

@@ -1,6 +1,6 @@
 {
   "name": "@twick/visualizer",
-  "version": "0.14.7",
+  "version": "0.14.8",
   "license": "SEE LICENSE IN LICENSE.md",
   "scripts": {
     "start": "twick editor --projectFile ./src/live.tsx",
@@ -13,14 +13,14 @@
   },
   "dependencies": {
     "@preact/signals": "^1.2.1",
-    "@twick/2d": "0.14.7",
-    "@twick/core": "0.14.7",
-    "@twick/renderer": "0.14.7",
-    "@twick/vite-plugin": "0.14.7",
+    "@twick/2d": "0.14.8",
+    "@twick/core": "0.14.8",
+    "@twick/renderer": "0.14.8",
+    "@twick/vite-plugin": "0.14.8",
     "date-fns": "^4.1.0",
     "preact": "^10.19.2",
     "crelt": "^1.0.6",
-    "@twick/media-utils": "0.14.7"
+    "@twick/media-utils": "0.14.8"
   },
   "devDependencies": {
     "@twick/cli": "0.14.0",
@@ -29,6 +29,6 @@
     "typedoc": "^0.25.8",
     "typedoc-plugin-markdown": "^3.17.1",
     "vite-plugin-dts": "^3.7.3",
-    "vite": "^5.4.20"
+    "vite": "^5.4.21"
   }
 }

package/src/components/track.tsx

@@ -93,6 +93,8 @@ export function* makeCaptionTrack({
 
   const tProps = track?.props;
 
+  const applyToAll = tProps?.applyToAll ?? false;
+
   const trackDefaultProps =
     (CAPTION_STYLE[tProps?.capStyle ?? ""] || {}).word || {};
 
@@ -107,40 +109,17 @@ export function* makeCaptionTrack({
       justifyContent: rectStyle.justifyContent as any,
       alignItems: rectStyle.alignItems as any,
     };
+
+    const phraseColors = applyToAll ? tProps?.colors : eProps?.colors ?? tProps?.colors ?? DEFAULT_CAPTION_COLORS;
+
     const phraseProps = {
       ...trackDefaultProps,
-      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 || {}),
+      colors: phraseColors,
+      font: applyToAll ? tProps?.font : eProps?.font ?? tProps?.font ?? DEFAULT_CAPTION_FONT,
+      fill: phraseColors.text,
+      bgColor: phraseColors.bgColor,
+      bgOpacity: tProps?.bgOpacity ?? 1,
     };
 
     yield* waitFor(element?.s - prevTime);
@@ -150,13 +129,16 @@ export function* makeCaptionTrack({
         ref={phraseRef}
         key={element.id}
         {...mappedRectStyle}
-        x={eProps?.x ?? tProps?.x}
-        y={eProps?.y ?? tProps?.y}
+        x={applyToAll ? tProps?.x : eProps?.x ?? tProps?.x}
+        y={applyToAll ? tProps?.y : eProps?.y ?? tProps?.y}
         layout
       />
     );
     if (tProps?.capStyle === "word_by_word_with_bg") {
-      const _color = new Color({...hexToRGB(phraseProps.bgColor), a: phraseProps?.bgOpacity ?? 1});
+      const _color = new Color({
+        ...hexToRGB(phraseProps.bgColor),
+        a: phraseProps?.bgOpacity ?? 1,
+      });
       phraseRef().fill(_color);
     }
     yield* elementController.get("caption")?.create({
@@ -231,7 +213,7 @@ export function* makeElementTrack({
   } catch (error) {
     logger("Error creating element track", error);
   }
-  
+
   yield* all(...sequence);
   yield elementTrackRef().remove();
 }

package/src/elements/caption.element.tsx

@@ -116,7 +116,7 @@ export const CaptionElement = {
       if (caption.capStyle == "highlight_bg") {
         const bgContainerRef = createRef();
         const childTextRef = createRef();
-        const _color = new Color({...hexToRGB(captionProps.colors.background), a: captionProps?.bgOpacity ?? 1});
+        const _color = new Color({...hexToRGB(captionProps.colors.bgColor), a: captionProps?.bgOpacity ?? 1});
         containerRef().add(
           <Rect
             ref={bgContainerRef}

package/src/helpers/constants.ts

@@ -15,7 +15,7 @@ export const DEFAULT_BACKGROUND_COLOR = "#000000";
  */
 export const DEFAULT_POSITION = {
   x: 0,
-  y: 0
+  y: 0,
 };
 
 /**
@@ -29,7 +29,7 @@ export const DEFAULT_TIMING_FUNCTION = "easeInOut";
 export const FRAME_SHAPE = {
   RECTANGLE: "rectangle",
   CIRCLE: "circle",
-  LINE: "line"
+  LINE: "line",
 } as const;
 
 /**
@@ -40,104 +40,104 @@ export const TRACK_TYPES = {
   AUDIO: "audio",
   CAPTION: "caption",
   SCENE: "scene",
-  ELEMENT: "element"
+  ELEMENT: "element",
 } as const;
 
 export const CAPTION_STYLE: Record<string, CaptionStyle> = {
-    highlight_bg: {
-      rect: {
-        alignItems: "center",
-        gap: 2,
-      },
-      word: {
-        lineWidth: 0.35,
-        stroke: "#000000",
-        fontWeight: 700,
-        shadowOffset: [-3, 3],
-        shadowColor: "#000000",
-        fill: "#ffffff",
-        fontFamily: "Bangers",
-        bgColor: "#000000",
-        bgOffsetWidth: 30,
-        bgOffsetHeight: 8,
-        fontSize: 54,
-      },
+  highlight_bg: {
+    rect: {
+      alignItems: "center",
+      gap: 2,
     },
-    word_by_word: {
-      rect: {
-        alignItems: "center",
-        justifyContent: "center",
-        gap: 12,
-      },
-      word: {
-        lineWidth: 0.35,
-        stroke: "#000000",
-        fontWeight: 700,
-        strokeFirst: true,
-        shadowOffset: [-2, 2],
-        shadowColor: "#000000",
-        shadowBlur: 5,
-        fontFamily: "Bangers",
-        fill: "#FFFFFF",
-        bgOffsetWidth: 20,
-        bgOffsetHeight: 10,
-        fontSize: 54,
-      },
+    word: {
+      lineWidth: 0.35,
+      stroke: "#000000",
+      fontWeight: 700,
+      shadowOffset: [-3, 3],
+      shadowColor: "#000000",
+      fill: "#ffffff",
+      fontFamily: "Bangers",
+      bgColor: "#444444",
+      bgOffsetWidth: 30,
+      bgOffsetHeight: 8,
+      fontSize: 50,
     },
-    word_by_word_with_bg: {
-      rect: {
-        alignItems: "center",
-        gap: 12,
-        padding: [10, 20],
-        radius: 10,
-      },
-      word: {
-        lineWidth: 0.35,
-        stroke: "#000000",
-        fontWeight: 700,
-        strokeFirst: true,
-        shadowOffset: [-2, 2],
-        shadowColor: "#000000",
-        shadowBlur: 5,
-        fontFamily: "Bangers",
-        fill: "#FFFFFF",
-        bgOffsetWidth: 20,
-        bgOffsetHeight: 10,
-        fontSize: 54,
-      },
+  },
+  word_by_word: {
+    rect: {
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 8,
     },
-  };
+    word: {
+      lineWidth: 0.35,
+      stroke: "#000000",
+      fontWeight: 700,
+      strokeFirst: true,
+      shadowOffset: [-2, 2],
+      shadowColor: "#000000",
+      shadowBlur: 5,
+      fontFamily: "Bangers",
+      fill: "#FFFFFF",
+      bgOffsetWidth: 20,
+      bgOffsetHeight: 10,
+      fontSize: 50,
+    },
+  },
+  word_by_word_with_bg: {
+    rect: {
+      alignItems: "center",
+      gap: 8,
+      padding: [10, 20],
+      radius: 10,
+    },
+    word: {
+      lineWidth: 0.35,
+      stroke: "#000000",
+      fontWeight: 700,
+      strokeFirst: true,
+      shadowOffset: [-2, 2],
+      shadowColor: "#000000",
+      shadowBlur: 5,
+      fontFamily: "Bangers",
+      fill: "#FFFFFF",
+      bgOffsetWidth: 20,
+      bgOffsetHeight: 10,
+      fontSize: 50,
+    },
+  },
+};
 
-  export const DEFAULT_CAPTION_COLORS = {
-    text: "#000000",
-    background: "#FFFFFF",
-  };
+export const DEFAULT_CAPTION_COLORS = {
+  text: "#000000",
+  bgColor: "#444444",
+};
 
-  export const DEFAULT_CAPTION_FONT = {
-    family: "Poppins",
-    size: 48,
-    weight: 400,
-  };
+export const DEFAULT_CAPTION_FONT = {
+  family: "Poppins",
+  size: 48,
+  weight: 400,
+};
 
-  export const TRANSPARENT_COLOR = "#FFFFFF00";
+export const TRANSPARENT_COLOR = "#FFFFFF00";
 
-  export const ELEMENT_TYPES = {
-    VIDEO: "video",
-    IMAGE: "image",
-    AUDIO: "audio",
-    TEXT: "text",
-    CAPTION: "caption",
-    RECT: "rect",
-    CIRCLE: "circle",
-    ICON: "icon",
-  };
+export const ELEMENT_TYPES = {
+  VIDEO: "video",
+  IMAGE: "image",
+  AUDIO: "audio",
+  TEXT: "text",
+  CAPTION: "caption",
+  RECT: "rect",
+  CIRCLE: "circle",
+  ICON: "icon",
+};
 
 export const OBJECT_FIT = {
   CONTAIN: "contain",
   COVER: "cover",
   FILL: "fill",
   NONE: "none",
-}
+};
 
 export const COLOR_FILTERS = {
   SATURATED: "saturated",
@@ -156,8 +156,8 @@ export const COLOR_FILTERS = {
   VINTAGE: "vintage",
   DRAMATIC: "dramatic",
   FADED: "faded",
-}
+};
 
 export const EVENT_TYPES = {
   PLAYER_UPDATE: "twick:playerUpdate",
-}
+};

package/src/helpers/types.ts

@@ -151,7 +151,7 @@ export type CaptionProps = {
  */
 export type CaptionColors = {
   text?: string;
-  background?: string;
+  bgColor?: string;
   highlight?: string;
 };
 
@@ -214,6 +214,7 @@ export type VisualizerTrack = {
       weight?: number;
       style?: string;
     };
+    applyToAll?: boolean;
     captionProps?: CaptionProps;
   };
 };

package/src/visualizer.tsx

@@ -120,7 +120,7 @@ export const scene = makeScene2D("scene", function* (view: View2D) {
     | string
     | null;
   if (input) {
-    logger("Scene updated", { playerId, input });
+    console.log("Scene updated", { playerId, input });
     // Add background rectangle with specified or default color
     yield view.add(
       <Rect