@twick/visualizer 0.0.1

package/src/sample.ts

@@ -0,0 +1,450 @@
+export const sample = {
+    "input": {
+      "properties": {
+        "width": 720,
+        "height": 1280,
+        "video_format": "mp4",
+        "video_codec": "libx264",
+        "audio_codec": "aac",
+        "video_bitrate": "2500k",
+        "audio_bitrate": "128k",
+        "fps": 30
+      },
+      "backgroundMusic": "",
+      "backgroundMusicLevel": 1,
+      "bucket_name": "kifferai-assets",
+      "context": {
+        "scriptInput": {
+          "scriptStyle": "PRODUCT_DEMONSTRATION"
+        },
+        "requestId": "f5d5db7a-8911-4b28-9c3c-71d91c83ddda",
+        "campaignId": "campaign",
+        "productUrl": "",
+        "pageId": "page",
+        "userId": "b1436dea-50e1-7049-cf34-6e49702da72a",
+        "productName": "product",
+        "orgId": "a251d9971a55"
+      },
+      "basePath": "carlyn",
+      "timeline": [
+        {
+          "id": "t-scene",
+          "type": "scene",
+          "elements": [
+            {
+              "id": "e-244f8d5a3bbc",
+              "type": "video",
+              "s": 0,
+              "e": 4.74,
+              "objectFit": "cover",
+              "props": {
+                "time": 8.428,
+                "src": "https://static-assets.kifferai.com/developmen/a251d9971a55/c436f351-ee9c-49c2-a26f-e7a7733c77ff/video_1746786031627-96448ec8-6430-4d4b-bb89-ebdbfeade7fa-normalized-1747225095191.mp4",
+                "play": true,
+                "decoder": "web",
+                "volume": 1,
+                "playbackRate": 2.4
+              },
+              "frame": {
+                "size": [
+                  720,
+                  1280
+                ],
+                "layout": false,
+                "clip": "true"
+              }
+            },
+            {
+              "id": "e-ef2f208db319",
+              "type": "video",
+              "s": 4.74,
+              "e": 6.774,
+              "objectFit": "cover",
+              "props": {
+                "time": 0,
+                "src": "https://static-assets.kifferai.com/developmen/a251d9971a55/63e0e7c3-5939-41a2-95c7-4e47e8be1ebf/video_1746786032120-6e4ab84c-d0dd-401e-b5e8-13d49fd8fe67-normalized-1747225095053.mp4",
+                "play": true,
+                "decoder": "web",
+                "volume": 1,
+                "playbackRate": 2
+              },
+              "frame": {
+                "size": [
+                  720,
+                  1280
+                ],
+                "layout": false,
+                "clip": "true"
+              }
+            },
+            {
+              "id": "e-477f620c0ec7",
+              "type": "video",
+              "s": 6.774,
+              "e": 9.395,
+              "objectFit": "cover",
+              "props": {
+                "time": 18.222499999999997,
+                "src": "https://static-assets.kifferai.com/developmen/a251d9971a55/e66b4682-096d-46c5-b1b2-1e2e6a46fe8d/video_1746790653457-7e9e9a1d-9410-4bb3-bec1-7474fa88286c-normalized-1747225095442.mp4",
+                "play": true,
+                "decoder": "web",
+                "volume": 1,
+                "playbackRate": 2
+              },
+              "frame": {
+                "size": [
+                  2292.281711648068,
+                  1286.2247382025269
+                ],
+                "layout": false,
+                "clip": "true",
+                "rotation": 0,
+                "x": 269.48206359326264,
+                "y": 6.293648227413769
+              }
+            },
+            {
+              "id": "e-8e7713322971",
+              "type": "video",
+              "s": 9.395,
+              "e": 11.045625,
+              "objectFit": "cover",
+              "props": {
+                "time": 0,
+                "src": "https://static-assets.kifferai.com/developmen/a251d9971a55/785c23ac-46b9-412e-afa6-a2cb56359409/video_1746791788884-91cb1098-d5f0-4528-83ee-40396774362e-normalized-1747225092682.mp4",
+                "play": true,
+                "decoder": "web",
+                "volume": 1,
+                "playbackRate": 1.6
+              },
+              "frame": {
+                "size": [
+                  2308.2048543926235,
+                  1295.1593905203056
+                ],
+                "layout": false,
+                "clip": "true",
+                "rotation": 0,
+                "x": -13.276787982361498,
+                "y": 7.751279402190107
+              }
+            },
+            {
+              "id": "e-7531e6fa1e0d",
+              "type": "video",
+              "s": 11.046,
+              "e": 12.07,
+              "objectFit": "cover",
+              "props": {
+                "time": 7.721,
+                "src": "https://static-assets.kifferai.com/developmen/a251d9971a55/9e75d848-ee72-417c-a0ab-9b03cbe8a8e8/video_1746791788884-91cb1098-d5f0-4528-83ee-40396774362e-normalized-1747225094687.mp4",
+                "play": true,
+                "decoder": "web",
+                "volume": 1,
+                "playbackRate": 1.25
+              },
+              "frame": {
+                "size": [
+                  2311.1861840816873,
+                  1296.8322477347244
+                ],
+                "layout": false,
+                "clip": "true",
+                "rotation": 0,
+                "x": 449.37247349257666,
+                "y": 9.38850926628038
+              }
+            },
+            {
+              "id": "e-3b7b7272a680",
+              "type": "video",
+              "s": 12.07,
+              "e": 12.65,
+              "objectFit": "cover",
+              "props": {
+                "time": 15.761000000000001,
+                "src": "https://static-assets.kifferai.com/developmen/a251d9971a55/c8411732-b0c8-45a9-808d-e5adf6396cc0/video_1746791788884-91cb1098-d5f0-4528-83ee-40396774362e-normalized-1747225095328.mp4",
+                "play": true,
+                "decoder": "web"
+              },
+              "frame": {
+                "size": [
+                  2350.1907312156336,
+                  1318.718132515439
+                ],
+                "layout": false,
+                "clip": "true",
+                "rotation": 0,
+                "x": 172.4452216608522,
+                "y": 15.93068052161425
+              }
+            },
+            {
+              "id": "e-6121e86e1529",
+              "type": "video",
+              "s": 12.65,
+              "e": 12.97,
+              "objectFit": "cover",
+              "props": {
+                "time": 16.467,
+                "src": "https://static-assets.kifferai.com/developmen/a251d9971a55/ebdd6f60-5750-4228-a5cd-f321f60664c2/video_1746791788884-91cb1098-d5f0-4528-83ee-40396774362e-normalized-1747225093091.mp4",
+                "play": true,
+                "decoder": "web"
+              },
+              "frame": {
+                "size": [
+                  2250.6441550073,
+                  1262.861442531874
+                ],
+                "layout": false,
+                "clip": "true",
+                "rotation": 0,
+                "x": 349.31120819483976,
+                "y": 10.893313528412591
+              }
+            },
+            {
+              "id": "e-1b1fe6998ebd",
+              "type": "video",
+              "s": 12.97,
+              "e": 16.644000000000002,
+              "objectFit": "cover",
+              "props": {
+                "time": 23.286,
+                "src": "https://static-assets.kifferai.com/developmen/a251d9971a55/d0156321-eb31-4168-adc0-9c4ad1fd3963/video_1746791788884-91cb1098-d5f0-4528-83ee-40396774362e-normalized-1747225092630.mp4",
+                "play": true,
+                "decoder": "web"
+              },
+              "frame": {
+                "size": [
+                  2338.697802344495,
+                  1312.2693224266334
+                ],
+                "layout": false,
+                "clip": "true",
+                "rotation": 0,
+                "x": 105.53672564636827,
+                "y": 12.299877537072007
+              }
+            }
+          ],
+          "name": "scene"
+        },
+        {
+          "id": "t-83fa5f365f7f",
+          "type": "audio",
+          "name": "audio",
+          "elements": [
+            {
+              "id": "e-50848c2d8271",
+              "type": "audio",
+              "s": 0,
+              "e": 16.587755,
+              "props": {
+                "time": 0,
+                "src": "https://static-assets.kifferai.com/developmen/a251d9971a55/brand-music/Unstoppable-Reprise-909549aa-6807-482b-ab92-bce7e6834fe7.mp3",
+                "play": true
+              },
+              "frame": {
+                "size": [
+                  720,
+                  1280
+                ],
+                "layout": false,
+                "clip": "true"
+              }
+            }
+          ]
+        },
+        {
+          "id": "t-795891203a03",
+          "type": "element",
+          "name": "element",
+          "elements": [
+            {
+              "id": "e-6c32ca5f728e",
+              "type": "text",
+              "s": 0.009,
+              "e": 4.691000000000001,
+              "t": "GOD WILL BREAK YOU",
+              "props": {
+                "fill": "#ffd700",
+                "font": {
+                  "size": 48,
+                  "family": "Poppins"
+                },
+                "fontSize": 54,
+                "fontFamily": "Impact",
+                "stroke": "#000000",
+                "lineWidth": 0.25,
+                "fontWeight": "bold",
+                "fontStyle": "Italic",
+                "rotation": 0,
+                "x": -11.306514773940933,
+                "y": 103.95475034024639
+              }
+            },
+            {
+              "id": "e-39e2112fa735",
+              "type": "text",
+              "s": 4.824,
+              "e": 6.709,
+              "t": "BREAK YOU AGAIN",
+              "props": {
+                "fill": "#FFFFFF",
+                "font": {
+                  "size": 48,
+                  "family": "Poppins"
+                },
+                "fontSize": 54,
+                "fontFamily": "Impact",
+                "stroke": "#000000",
+                "lineWidth": 0.25,
+                "fontWeight": "bold",
+                "fontStyle": "normal",
+                "rotation": 0,
+                "x": 2.261302954788164,
+                "y": 128.8134949868271
+              }
+            },
+            {
+              "id": "e-384f59e94253",
+              "type": "text",
+              "s": 4.904,
+              "e": 6.7059999999999995,
+              "t": "AND THEN",
+              "props": {
+                "fill": "#fffd70",
+                "font": {
+                  "size": 48,
+                  "family": "Poppins"
+                },
+                "fontSize": 54,
+                "fontFamily": "Impact",
+                "stroke": "#000000",
+                "lineWidth": 0.25,
+                "fontWeight": "bold",
+                "fontStyle": "Italic",
+                "rotation": 0,
+                "x": 0,
+                "y": 201.12984304960742
+              }
+            },
+            {
+              "id": "e-180cab9f1871",
+              "type": "text",
+              "s": 6.891,
+              "e": 9.343,
+              "t": "BREAK YOU ONCE AGAIN",
+              "props": {
+                "fill": "#ffd700",
+                "font": {
+                  "size": 48,
+                  "family": "Poppins"
+                },
+                "fontSize": 54,
+                "fontFamily": "Impact",
+                "stroke": "#000000",
+                "lineWidth": 0.25,
+                "fontWeight": "bold",
+                "fontStyle": "Italic",
+                "rotation": 0,
+                "x": 4.522605909576328,
+                "y": 81.35589157062759
+              }
+            },
+            {
+              "id": "e-7eada9ab2394",
+              "type": "text",
+              "s": 9.521,
+              "e": 10.993,
+              "t": "BUT",
+              "props": {
+                "fill": "#ffd700",
+                "font": {
+                  "size": 48,
+                  "family": "Poppins"
+                },
+                "fontSize": 54,
+                "fontFamily": "Impact",
+                "stroke": "#000000",
+                "lineWidth": 0.25,
+                "fontWeight": "bold",
+                "fontStyle": "Italic"
+              }
+            },
+            {
+              "id": "e-03039d49039b",
+              "type": "text",
+              "s": 11.171,
+              "e": 12.831999999999999,
+              "t": "IN THE END",
+              "props": {
+                "fill": "#ffd700",
+                "font": {
+                  "size": 48,
+                  "family": "Poppins"
+                },
+                "fontSize": 54,
+                "fontFamily": "Impact",
+                "stroke": "#000000",
+                "lineWidth": 0.25,
+                "fontWeight": "bold",
+                "fontStyle": "Italic",
+                "rotation": 0,
+                "x": 2.2613029547882206,
+                "y": 108.4745220941702
+              }
+            },
+            {
+              "id": "e-91d44d6180f9",
+              "type": "text",
+              "s": 13.077,
+              "e": 16.543,
+              "t": "HE WILL MAKE YOU",
+              "props": {
+                "fill": "#FFFFFF",
+                "font": {
+                  "size": 48,
+                  "family": "Poppins"
+                },
+                "fontSize": 54,
+                "fontFamily": "Impact",
+                "stroke": "#000000",
+                "lineWidth": 0.25,
+                "fontWeight": "bold",
+                "fontStyle": "normal",
+                "rotation": 0,
+                "x": 0,
+                "y": 27.118630523542492
+              }
+            },
+            {
+              "id": "e-ebf12eac0207",
+              "type": "text",
+              "s": 13.811,
+              "e": 16.534,
+              "t": "UNSTOPPABLE",
+              "props": {
+                "fill": "#ffd700",
+                "font": {
+                  "size": 48,
+                  "family": "Poppins"
+                },
+                "rotation": 0,
+                "x": -6.783908864364491,
+                "y": 99.43497858632281,
+                "fontSize": 58,
+                "fontFamily": "Impact",
+                "stroke": "#000000",
+                "lineWidth": 0.25,
+                "fontWeight": "bold",
+                "fontStyle": "Italic"
+              }
+            }
+          ]
+        }
+      ]
+    },
+    "version": 1
+  }

package/src/visualizer.tsx

@@ -0,0 +1,78 @@
+/**
+ * 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 "@revideo/2d";
+import { all, useScene } from "@revideo/core";
+
+import { DEFAULT_BACKGROUND_COLOR, TIMELINE_TYPES } from "./helpers/constants";
+import { VideoInput } from "./helpers/types";
+import { logger } from "./helpers/log.utils";
+import {
+  makeAudioTimeline,
+  makeCaptionTimeline,
+  makeElementTimeline,
+  makeSceneTimeline,
+  makeVideoTimeline,
+} from "./components/timeline";
+
+/**
+ * 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");
+    
+    // Add background rectangle with specified or default color
+    yield view.add(
+      <Rect
+        fill={input.backgroundColor ?? DEFAULT_BACKGROUND_COLOR}
+        size={"100%"}
+      />
+    );
+
+    // Process timeline elements if present
+    if (input.timeline) {
+      const movie = [];
+      let index = 1;
+
+      // Iterate through each timeline element and create appropriate visualization
+      for (const timeline of input.timeline) {
+        switch (timeline.type) {
+          case TIMELINE_TYPES.VIDEO:
+            movie.push(makeVideoTimeline({ view, timeline }));
+            break;
+          case TIMELINE_TYPES.AUDIO:
+            movie.push(makeAudioTimeline({ view, timeline }));
+            break;
+          case TIMELINE_TYPES.CAPTION:
+            movie.push(
+              makeCaptionTimeline({
+                view,
+                timeline,
+              })
+            );
+            break;
+          case TIMELINE_TYPES.SCENE:
+            movie.push(makeSceneTimeline({ view, timeline }));
+            break;
+          case TIMELINE_TYPES.ELEMENT:
+            movie.push(makeElementTimeline({ view, timeline }));
+            break;
+        }
+        index++;
+      }
+      
+      // Execute all timeline animations in parallel
+      yield* all(...movie);
+    }
+  }
+});

package/tsconfig.json

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

package/typedoc.json

@@ -0,0 +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
+} 

package/vite.config.ts

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