@twick/visualizer 0.15.26 → 0.15.28

package/package.json

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

package/src/components/track.tsx

@@ -101,8 +101,10 @@ export function* makeCaptionTrack({
     // wordsMs belongs to caption timing only – keep it out of visual style merging.
     const { wordsMs, ...elementPropsWithoutWords } = eProps as any;
 
-    const resolvedCapStyle =
-      (elementPropsWithoutWords as any)?.capStyle ?? tProps?.capStyle ?? defaultCapStyle;
+    const useTrackDefaults = (elementPropsWithoutWords as any)?.useTrackDefaults ?? true;
+    const resolvedCapStyle = useTrackDefaults
+      ? (tProps?.capStyle ?? defaultCapStyle)
+      : ((elementPropsWithoutWords as any)?.capStyle ?? tProps?.capStyle ?? defaultCapStyle);
 
     const styleConfig = CAPTION_STYLE[resolvedCapStyle] || CAPTION_STYLE[defaultCapStyle] || {};
     const trackDefaultProps = (styleConfig as any).word || {};
@@ -116,12 +118,12 @@ export function* makeCaptionTrack({
     };
 
     // Resolve colors with priority: element.props.colors > track.props.colors > defaults.
-    const elementColors = (elementPropsWithoutWords as any)?.colors;
+    const elementColors = useTrackDefaults ? undefined : (elementPropsWithoutWords as any)?.colors;
     const trackColors = tProps?.colors;
     const phraseColors = elementColors ?? trackColors ?? DEFAULT_CAPTION_COLORS;
 
     // Resolve font with priority: element.props.font > track.props.font > defaults.
-    const elementFont = (elementPropsWithoutWords as any)?.font;
+    const elementFont = useTrackDefaults ? undefined : (elementPropsWithoutWords as any)?.font;
     const trackFont = tProps?.font;
     const resolvedFont = elementFont ?? trackFont ?? DEFAULT_CAPTION_FONT;
 
@@ -129,7 +131,7 @@ export function* makeCaptionTrack({
     const basePhraseStyle = {
       ...trackDefaultProps,
       ...tProps,
-      ...elementPropsWithoutWords,
+      ...(useTrackDefaults ? {} : elementPropsWithoutWords),
     };
 
     const bgOpacityFromBase = (basePhraseStyle as any)?.bgOpacity;
@@ -183,7 +185,7 @@ export function* makeCaptionTrack({
       caption: {
         ...element,
         t: element.t ?? "",
-        capStyle: eProps?.capStyle ?? tProps?.capStyle,
+        capStyle: useTrackDefaults ? tProps?.capStyle : (eProps?.capStyle ?? tProps?.capStyle),
         props: captionPropsForElement,
       },
       view,

package/src/controllers/element.controller.ts

@@ -8,6 +8,7 @@ import { LineElement } from "../elements/line.element";
 import { SceneElement } from "../elements/scene.element";
 import { TextElement } from "../elements/text.element";
 import { VideoElement } from "../elements/video.element";
+import { EmojiElement } from "../elements/emoji.element";
 import { Element } from "../helpers/types";
 
 export class ElementController {
@@ -32,6 +33,7 @@ export class ElementController {
     elementController.register(SceneElement);
     elementController.register(ImageElement);
     elementController.register(TextElement);
+    elementController.register(EmojiElement);
     elementController.register(AudioElement);
     elementController.register(CircleElement);
     elementController.register(RectElement);

package/src/elements/emoji.element.tsx

@@ -0,0 +1,45 @@
+import { ElementParams } from "../helpers/types";
+import { all, createRef, waitFor } from "@twick/core";
+import { Img, Rect } from "@twick/2d";
+import { addAnimation, fitElement } from "../helpers/element.utils";
+
+export const EmojiElement = {
+  name: "emoji",
+
+  *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,
+      });
+
+      yield* all(
+        addAnimation({
+          elementRef: frameElementRef,
+          containerRef: frameContainerRef,
+          element: element,
+          view,
+        }),
+        waitFor(Math.max(0, element.e - element.s))
+      );
+      yield frameElementRef().remove();
+      yield frameContainerRef().remove();
+    }
+  },
+};

package/src/helpers/constants.ts

@@ -247,6 +247,7 @@ export const ELEMENT_TYPES = {
   RECT: "rect",
   CIRCLE: "circle",
   ICON: "icon",
+  EMOJI: "emoji",
 };
 
 export const OBJECT_FIT = {
@@ -256,24 +257,7 @@ export const OBJECT_FIT = {
   NONE: "none",
 };
 
-export const COLOR_FILTERS = {
-  SATURATED: "saturated",
-  BRIGHT: "bright",
-  VIBRANT: "vibrant",
-  RETRO: "retro",
-  BLACK_WHITE: "blackWhite",
-  SEPIA: "sepia",
-  COOL: "cool",
-  WARM: "warm",
-  CINEMATIC: "cinematic",
-  SOFT_GLOW: "softGlow",
-  MOODY: "moody",
-  DREAMY: "dreamy",
-  INVERTED: "inverted",
-  VINTAGE: "vintage",
-  DRAMATIC: "dramatic",
-  FADED: "faded",
-};
+export { COLOR_FILTERS } from "@twick/media-utils";
 
 export const EVENT_TYPES = {
   PLAYER_UPDATE: "twick:playerUpdate",

package/src/helpers/filters.ts

@@ -65,6 +65,10 @@ export const applyColorFilter = (ref: Reference<any>, filterType: string) => {
         ref().filters.contrast(1.25);
         ref().filters.brightness(1.05);
         break;
+      case COLOR_FILTERS.SEPIA:
+        ref().filters.sepia(1);
+        ref().filters.contrast(1.08);
+        break;
       case COLOR_FILTERS.COOL:
         ref().filters.hue(15);
         ref().filters.brightness(1.1);

package/src/index.ts

@@ -179,6 +179,8 @@
 // Types
 export * from './helpers/types';
 
+export { COLOR_FILTERS } from './helpers/constants';
+
 // Components
 export * from './visualizer';