@twick/visualizer 0.14.0 → 0.14.2

package/src/text-effects/erase.tsx

@@ -1,58 +1,58 @@
-import { waitFor } from "@twick/core";
-import { TextEffectParams } from "../helpers/types";
-
-/**
- * EraseEffect animates text disappearing letter by letter,
- * simulating an "erasing" or backspace effect.
- *
- * Behavior:
- * - Optionally waits for a delay before starting.
- * - Preserves the original element size.
- * - Animates removing one character at a time from the end.
- *
- * @param elementRef - Reference to the text element to animate.
- * @param duration - Total duration of the erasing animation.
- * @param delay - Optional delay before starting.
- * @param bufferTime - Time reserved at the end of animation (default: 0.1).
- */
-export const EraseEffect = {
-  name: "erase",
-
-  /**
-   * Generator function controlling the erase text effect.
-   */
-  *run({
-    elementRef,
-    duration,
-    delay,
-    bufferTime = 0.1,
-  }: TextEffectParams) {
-    // Get the full original text
-    const fullText = elementRef().text();
-
-    // Store the original size to avoid resizing during animation
-    const size = elementRef().size();
-
-    // Initialize element: clear text, set fixed size, align left
-    elementRef().setText("");
-    elementRef().size(size);
-    elementRef().textAlign("left");
-
-    // Wait for the optional initial delay
-    if (delay) {
-      yield* waitFor(delay);
-    }
-
-    // Compute the time interval between each character removal
-    let timeInterval = (duration - bufferTime) / fullText.length;
-
-    // Optionally wait a bit before starting erasing
-    yield* waitFor(timeInterval);
-
-    // Loop backwards through the text and erase one character at a time
-    for (let i = fullText.length; i >= 0; i--) {
-      yield* waitFor(timeInterval);
-      elementRef().setText(fullText.substring(0, i));
-    }
-  },
-};
+import { waitFor } from "@twick/core";
+import { TextEffectParams } from "../helpers/types";
+
+/**
+ * EraseEffect animates text disappearing letter by letter,
+ * simulating an "erasing" or backspace effect.
+ *
+ * Behavior:
+ * - Optionally waits for a delay before starting.
+ * - Preserves the original element size.
+ * - Animates removing one character at a time from the end.
+ *
+ * @param elementRef - Reference to the text element to animate.
+ * @param duration - Total duration of the erasing animation.
+ * @param delay - Optional delay before starting.
+ * @param bufferTime - Time reserved at the end of animation (default: 0.1).
+ */
+export const EraseEffect = {
+  name: "erase",
+
+  /**
+   * Generator function controlling the erase text effect.
+   */
+  *run({
+    elementRef,
+    duration,
+    delay,
+    bufferTime = 0.1,
+  }: TextEffectParams) {
+    // Get the full original text
+    const fullText = elementRef().text();
+
+    // Store the original size to avoid resizing during animation
+    const size = elementRef().size();
+
+    // Initialize element: clear text, set fixed size, align left
+    elementRef().setText("");
+    elementRef().size(size);
+    elementRef().textAlign("left");
+
+    // Wait for the optional initial delay
+    if (delay) {
+      yield* waitFor(delay);
+    }
+
+    // Compute the time interval between each character removal
+    let timeInterval = (duration - bufferTime) / fullText.length;
+
+    // Optionally wait a bit before starting erasing
+    yield* waitFor(timeInterval);
+
+    // Loop backwards through the text and erase one character at a time
+    for (let i = fullText.length; i >= 0; i--) {
+      yield* waitFor(timeInterval);
+      elementRef().setText(fullText.substring(0, i));
+    }
+  },
+};

package/src/text-effects/stream-word.tsx

@@ -1,60 +1,60 @@
-import { waitFor } from "@twick/core";
-import { TextEffectParams } from "../helpers/types";
-
-/**
- * StreamWordEffect animates text appearing word by word,
- * creating a smooth "typing" or "streaming" effect.
- *
- * Behavior:
- * - Optionally waits for a delay before starting.
- * - Clears the text initially and preserves the original size.
- * - Reveals one word at a time with a consistent interval.
- *
- * @param elementRef - Reference to the text element to animate.
- * @param duration - Total duration of the animation.
- * @param delay - Optional delay before starting.
- * @param bufferTime - Time reserved at the end of animation (default: 0.1).
- */
-export const StreamWordEffect = {
-  name: "stream-word",
-
-  /**
-   * Generator function controlling the word streaming effect.
-   */
-  *run({
-    elementRef,
-    duration,
-    delay,
-    bufferTime = 0.1,
-  }: TextEffectParams) {
-    // Retrieve the full text content
-    const fullText = elementRef().text();
-
-    // Store the element's size to avoid resizing during animation
-    const size = elementRef().size();
-
-    // Split the text into words
-    const words = fullText.split(" ");
-
-    // Clear the text and set fixed size
-    elementRef().setText("");
-    elementRef().size(size);
-
-    // Wait for optional delay before starting
-    if (delay) {
-      yield* waitFor(delay);
-    }
-
-    // Align text to the left
-    elementRef().textAlign("left");
-
-    // Calculate the interval between words
-    let timeInterval =(duration - bufferTime) / words.length;
-
-    // Reveal each word one at a time
-    for (let i = 0; i < words.length; i++) {
-      yield* waitFor(timeInterval);
-      elementRef().setText(words.slice(0, i + 1).join(" "));
-    }
-  },
-};
+import { waitFor } from "@twick/core";
+import { TextEffectParams } from "../helpers/types";
+
+/**
+ * StreamWordEffect animates text appearing word by word,
+ * creating a smooth "typing" or "streaming" effect.
+ *
+ * Behavior:
+ * - Optionally waits for a delay before starting.
+ * - Clears the text initially and preserves the original size.
+ * - Reveals one word at a time with a consistent interval.
+ *
+ * @param elementRef - Reference to the text element to animate.
+ * @param duration - Total duration of the animation.
+ * @param delay - Optional delay before starting.
+ * @param bufferTime - Time reserved at the end of animation (default: 0.1).
+ */
+export const StreamWordEffect = {
+  name: "stream-word",
+
+  /**
+   * Generator function controlling the word streaming effect.
+   */
+  *run({
+    elementRef,
+    duration,
+    delay,
+    bufferTime = 0.1,
+  }: TextEffectParams) {
+    // Retrieve the full text content
+    const fullText = elementRef().text();
+
+    // Store the element's size to avoid resizing during animation
+    const size = elementRef().size();
+
+    // Split the text into words
+    const words = fullText.split(" ");
+
+    // Clear the text and set fixed size
+    elementRef().setText("");
+    elementRef().size(size);
+
+    // Wait for optional delay before starting
+    if (delay) {
+      yield* waitFor(delay);
+    }
+
+    // Align text to the left
+    elementRef().textAlign("left");
+
+    // Calculate the interval between words
+    let timeInterval =(duration - bufferTime) / words.length;
+
+    // Reveal each word one at a time
+    for (let i = 0; i < words.length; i++) {
+      yield* waitFor(timeInterval);
+      elementRef().setText(words.slice(0, i + 1).join(" "));
+    }
+  },
+};

package/src/text-effects/typewriter.tsx

@@ -1,59 +1,59 @@
-import { waitFor } from "@twick/core";
-import { TextEffectParams } from "../helpers/types";
-
-/**
- * TypewriterEffect animates text appearing one character at a time,
- * mimicking the behavior of a classic typewriter.
- *
- * Behavior:
- * - Optionally waits for a delay before starting.
- * - Clears the text initially and preserves the element's original size.
- * - Reveals one character at a time at a consistent interval.
- *
- * @param elementRef - Reference to the text element to animate.
- * @param duration - Total duration of the animation.
- * @param delay - Optional delay before starting.
- * @param bufferTime - Time reserved at the end of animation (default: 0.1).
- */
-export const TypewriterEffect = {
-  name: "typewriter",
-
-  /**
-   * Generator function controlling the character-by-character typing animation.
-   */
-  *run({
-    elementRef,
-    duration,
-    delay,
-    bufferTime = 0.1,
-  }: TextEffectParams) {
-    // Retrieve the full text content
-    const fullText = elementRef().text();
-
-    // Store the element's size to prevent resizing during animation
-    const size = elementRef().size();
-
-    // Clear the text and set fixed size
-    elementRef().setText("");
-    elementRef().size(size);
-
-    // Align text to the left for consistent typing effect
-    elementRef().textAlign("left");
-
-    // Wait for an optional initial delay
-    if (delay) {
-      yield* waitFor(delay);
-    }
-
-    let timeInterval =(duration - bufferTime) / fullText.length;
-
-    // Wait briefly before starting typing
-    yield* waitFor(timeInterval);
-
-    // Reveal each character one by one
-    for (let i = 0; i < fullText.length; i++) {
-      yield* waitFor(timeInterval);
-      elementRef().setText(fullText.substring(0, i + 1));
-    }
-  },
-};
+import { waitFor } from "@twick/core";
+import { TextEffectParams } from "../helpers/types";
+
+/**
+ * TypewriterEffect animates text appearing one character at a time,
+ * mimicking the behavior of a classic typewriter.
+ *
+ * Behavior:
+ * - Optionally waits for a delay before starting.
+ * - Clears the text initially and preserves the element's original size.
+ * - Reveals one character at a time at a consistent interval.
+ *
+ * @param elementRef - Reference to the text element to animate.
+ * @param duration - Total duration of the animation.
+ * @param delay - Optional delay before starting.
+ * @param bufferTime - Time reserved at the end of animation (default: 0.1).
+ */
+export const TypewriterEffect = {
+  name: "typewriter",
+
+  /**
+   * Generator function controlling the character-by-character typing animation.
+   */
+  *run({
+    elementRef,
+    duration,
+    delay,
+    bufferTime = 0.1,
+  }: TextEffectParams) {
+    // Retrieve the full text content
+    const fullText = elementRef().text();
+
+    // Store the element's size to prevent resizing during animation
+    const size = elementRef().size();
+
+    // Clear the text and set fixed size
+    elementRef().setText("");
+    elementRef().size(size);
+
+    // Align text to the left for consistent typing effect
+    elementRef().textAlign("left");
+
+    // Wait for an optional initial delay
+    if (delay) {
+      yield* waitFor(delay);
+    }
+
+    let timeInterval =(duration - bufferTime) / fullText.length;
+
+    // Wait briefly before starting typing
+    yield* waitFor(timeInterval);
+
+    // Reveal each character one by one
+    for (let i = 0; i < fullText.length; i++) {
+      yield* waitFor(timeInterval);
+      elementRef().setText(fullText.substring(0, i + 1));
+    }
+  },
+};

package/src/visualizer.tsx

@@ -1,78 +1,98 @@
-/**
- * Main visualizer component that renders the scene with video, audio, captions and other elements
- * based on the provided input configuration.
- */
-
-import "./global.css";
-import { Rect, makeScene2D, View2D } from "@twick/2d";
-import { all, useScene } from "@twick/core";
-
-import { DEFAULT_BACKGROUND_COLOR, TRACK_TYPES } from "./helpers/constants";
-import { VideoInput } from "./helpers/types";
-import { logger } from "./helpers/log.utils";
-import {
-  makeAudioTrack,
-  makeCaptionTrack,
-  makeElementTrack,
-  makeSceneTrack,
-  makeVideoTrack,
-} from "./components/track";
-
-/**
- * Creates and configures the main scene for video visualization
- * @param {string} name - Name of the scene
- * @param {Function} generator - Generator function that handles scene setup and animation
- * @returns {Scene2D} Configured scene object
- */
-export const scene = makeScene2D("scene", function* (view: View2D) {
-  // Get input configuration from scene variables
-  const input = useScene().variables.get("input", null)() as VideoInput | null;
-  
-  if (input) {
-    logger("Scene updated", input);
-    
-    // Add background rectangle with specified or default color
-    yield view.add(
-      <Rect
-        fill={input.backgroundColor ?? DEFAULT_BACKGROUND_COLOR}
-        size={"100%"}
-      />
-    );
-
-    // Process track elements if present
-    if (input.tracks) {
-      const movie = [];
-      let index = 1;
-
-      // Iterate through each track element and create appropriate visualization
-      for (const track of input.tracks) {
-        switch (track.type) {
-          case TRACK_TYPES.VIDEO:
-            movie.push(makeVideoTrack({ view, track }));
-            break;
-          case TRACK_TYPES.AUDIO:
-            movie.push(makeAudioTrack({ view, track }));
-            break;
-          case TRACK_TYPES.CAPTION:
-            movie.push(
-              makeCaptionTrack({
-                view,
-                track,
-              })
-            );
-            break;
-          case TRACK_TYPES.SCENE:
-            movie.push(makeSceneTrack({ view, track }));
-            break;
-          case TRACK_TYPES.ELEMENT:
-            movie.push(makeElementTrack({ view, track }));
-            break;
-        }
-        index++;
-      }
-      
-      // Execute all track animations in parallel
-      yield* all(...movie);
-    }
-  }
-});
+/**
+ * Main visualizer component that renders the scene with video, audio, captions and other elements
+ * based on the provided input configuration.
+ */
+
+import "./global.css";
+import { Rect, makeScene2D, View2D } from "@twick/2d";
+import { all, useScene } from "@twick/core";
+
+import {
+  DEFAULT_BACKGROUND_COLOR,
+  EVENT_TYPES,
+  TRACK_TYPES,
+} from "./helpers/constants";
+import { VideoInput } from "./helpers/types";
+import { logger } from "./helpers/log.utils";
+import {
+  makeAudioTrack,
+  makeCaptionTrack,
+  makeElementTrack,
+  makeSceneTrack,
+  makeVideoTrack,
+} from "./components/track";
+import { dispatchWindowEvent } from "./helpers/event.utils";
+
+/**
+ * Creates and configures the main scene for video visualization
+ * @param {string} name - Name of the scene
+ * @param {Function} generator - Generator function that handles scene setup and animation
+ * @returns {Scene2D} Configured scene object
+ */
+export const scene = makeScene2D("scene", function* (view: View2D) {
+  // Get input configuration from scene variables
+  const input = useScene().variables.get("input", null)() as VideoInput | null;
+  const playerId = useScene().variables.get("playerId", null)() as
+    | string
+    | null;
+  if (input) {
+    logger("Scene updated", { playerId, input });
+    // Add background rectangle with specified or default color
+    yield view.add(
+      <Rect
+        fill={input.backgroundColor ?? DEFAULT_BACKGROUND_COLOR}
+        size={"100%"}
+      />
+    );
+
+    // Process track elements if present
+    if (input.tracks) {
+      const movie = [];
+      let index = 1;
+
+      // Iterate through each track element and create appropriate visualization
+      for (const track of input.tracks) {
+        switch (track.type) {
+          case TRACK_TYPES.VIDEO:
+            movie.push(makeVideoTrack({ view, track }));
+            break;
+          case TRACK_TYPES.AUDIO:
+            movie.push(makeAudioTrack({ view, track }));
+            break;
+          case TRACK_TYPES.CAPTION:
+            movie.push(
+              makeCaptionTrack({
+                view,
+                track,
+              })
+            );
+            break;
+          case TRACK_TYPES.SCENE:
+            movie.push(makeSceneTrack({ view, track }));
+            break;
+          case TRACK_TYPES.ELEMENT:
+            movie.push(makeElementTrack({ view, track }));
+            break;
+        }
+        index++;
+      }
+      // Execute all track animations in parallel
+      yield* all(...movie);
+      dispatchWindowEvent(EVENT_TYPES.PLAYER_UPDATE, {
+        detail: {
+          status: "ready",
+          playerId: playerId,
+          message: "All elements created",
+        },
+      });
+    } else {
+      dispatchWindowEvent(EVENT_TYPES.PLAYER_UPDATE, {
+        detail: {
+          status: "ready",
+          playerId: playerId,
+          message: "No elements to create",
+        },
+      });
+    }
+  }
+});

package/tsconfig.json

@@ -1,11 +1,11 @@
-{
-  "extends": "@twick/2d/tsconfig.project.json",
-  "include": ["src"],
-  "compilerOptions": {
-    "noEmit": false,
-    "outDir": "dist",
-    "module": "CommonJS",
-    "skipLibCheck": true,
-    "jsx": "react-jsx"
-  }
-}
+{
+  "extends": "@twick/2d/tsconfig.project.json",
+  "include": ["src"],
+  "compilerOptions": {
+    "noEmit": false,
+    "outDir": "dist",
+    "module": "CommonJS",
+    "skipLibCheck": true,
+    "jsx": "react-jsx"
+  }
+}

package/typedoc.json

@@ -1,15 +1,15 @@
-{
-  "$schema": "https://typedoc.org/schema.json",
-  "entryPoints": ["./src/index.ts"],
-  "out": "docs",
-  "name": "@twick/visualizer",
-  "excludePrivate": true,
-  "excludeProtected": true,
-  "excludeExternals": true,
-  "theme": "default",
-  "readme": "README.md",
-  "plugin": ["typedoc-plugin-markdown"],
-  "categorizeByGroup": true,
-  "categoryOrder": ["Core", "Utils", "*"],
-  "hideBreadcrumbs": true
+{
+  "$schema": "https://typedoc.org/schema.json",
+  "entryPoints": ["./src/index.ts"],
+  "out": "docs",
+  "name": "@twick/visualizer",
+  "excludePrivate": true,
+  "excludeProtected": true,
+  "excludeExternals": true,
+  "theme": "default",
+  "readme": "README.md",
+  "plugin": ["typedoc-plugin-markdown"],
+  "categorizeByGroup": true,
+  "categoryOrder": ["Core", "Utils", "*"],
+  "hideBreadcrumbs": true
 } 

package/vite.config.ts

@@ -1,15 +1,15 @@
-import { defineConfig } from "vite";
-import motionCanvas from '@twick/vite-plugin';
-
-export default defineConfig({
-  plugins: [motionCanvas()],
-  build: {
-    rollupOptions: {
-      output: {
-        entryFileNames: '[name].js',
-        chunkFileNames: '[name].js',
-        assetFileNames: '[name].[ext]'
-      }
-    }
-  }
-});
+import { defineConfig } from "vite";
+import motionCanvas from '@twick/vite-plugin';
+
+export default defineConfig({
+  plugins: [motionCanvas()],
+  build: {
+    rollupOptions: {
+      output: {
+        entryFileNames: '[name].js',
+        chunkFileNames: '[name].js',
+        assetFileNames: '[name].[ext]'
+      }
+    }
+  }
+});

package/.turbo/turbo-build.log

@@ -1,19 +0,0 @@
-
-> @twick/visualizer@0.14.0 build C:\GitHub\twick\packages\visualizer
-> tsc && vite build
-
-The CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
-vite v5.4.19 building for production...
-transforming...
-✓ 1551 modules transformed.
-rendering chunks...
-computing gzip size...
-dist/mp4.wasm      41.99 kB
-dist/project.css    1.35 kB │ gzip:   0.40 kB
-dist/project.js   863.89 kB │ gzip: 250.81 kB
-
-✓ built in 37.73s
-(!) Some chunks are larger than 500 kB after minification. Consider:
-- Using dynamic import() to code-split the application
-- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
-- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

package/.turbo/turbo-docs.log

@@ -1,7 +0,0 @@
-
-> @twick/visualizer@0.14.0 docs C:\GitHub\twick\packages\visualizer
-> typedoc --out docs src/index.ts
-
-[info] Loaded plugin typedoc-plugin-markdown
-[warning] You are running with an unsupported TypeScript version! If TypeDoc crashes, this is why. TypeDoc supports 4.6, 4.7, 4.8, 4.9, 5.0, 5.1, 5.2, 5.3, 5.4
-[info] Documentation generated at ./docs