@twick/render-server 0.15.20 → 0.15.22

package/src/renderer.ts

@@ -1,115 +0,0 @@
-import { renderVideo } from "@twick/renderer";
-
-// Simple in-process concurrency control for render jobs.
-// This helps avoid overloading a single server instance.
-let activeRenders = 0;
-const renderQueue: Array<() => void> = [];
-
-const getMaxConcurrentRenders = () => {
-  const fromEnv = process.env.TWICK_MAX_CONCURRENT_RENDERS;
-  const parsed = fromEnv ? parseInt(fromEnv, 10) : NaN;
-  return Number.isFinite(parsed) && parsed > 0 ? parsed : 2;
-};
-
-async function withRenderSlot<T>(fn: () => Promise<T>): Promise<T> {
-  const maxConcurrent = getMaxConcurrentRenders();
-
-  if (activeRenders >= maxConcurrent) {
-    await new Promise<void>((resolve) => {
-      renderQueue.push(resolve);
-    });
-  }
-
-  activeRenders++;
-  try {
-    return await fn();
-  } finally {
-    activeRenders--;
-    const next = renderQueue.shift();
-    if (next) {
-      next();
-    }
-  }
-}
-
-/**
- * Renders a Twick video with the provided variables and settings.
- * Processes project variables, merges settings with defaults, and
- * generates a video file using the Twick renderer.
- *
- * @param variables - Project variables containing input configuration
- * @param settings - Optional render settings to override defaults
- * @returns Promise resolving to the path of the rendered video file
- * 
- * @example
- * ```js
- * const videoPath = await renderTwickVideo(
- *   { input: { properties: { width: 1920, height: 1080 } } },
- *   { quality: "high", outFile: "my-video.mp4" }
- * );
- * // videoPath = "./output/my-video.mp4"
- * ```
- */
-const renderTwickVideo = async (variables: any, settings: any) => {
-  const start = Date.now();
-  try {
-    const { input } = variables;
-    const { properties } = input;
-
-    // Basic safety limits (can be overridden via env)
-    const maxWidth =
-      parseInt(process.env.TWICK_MAX_RENDER_WIDTH ?? "3840", 10) || 3840;
-    const maxHeight =
-      parseInt(process.env.TWICK_MAX_RENDER_HEIGHT ?? "2160", 10) || 2160;
-    const maxFps =
-      parseInt(process.env.TWICK_MAX_RENDER_FPS ?? "60", 10) || 60;
-
-    const width = Math.min(properties.width, maxWidth);
-    const height = Math.min(properties.height, maxHeight);
-    const fps = Math.min(properties.fps ?? 30, maxFps);
-
-    // Merge user settings with defaults
-    const mergedSettings = {
-      logProgress: true,
-      outDir: "./output",
-      outFile: properties.reqesutId ?? `video-${Date.now()}` + ".mp4",
-      quality: "medium",
-      projectSettings: {
-        exporter: {
-          name: "@twick/core/wasm",
-        },
-        size: {
-          x: width,
-          y: height,
-        },
-        fps,
-      },
-      ...settings, // Allow user settings to override defaults
-    };
-
-    const result = await withRenderSlot(async () => {
-      const file = await renderVideo({
-        projectFile: "@twick/visualizer/dist/project.js",
-        variables,
-        settings: mergedSettings,
-      });
-      return file;
-    });
-
-    const elapsedMs = Date.now() - start;
-    console.log(
-      `[RenderServer] Render completed in ${elapsedMs}ms (active=${activeRenders}) ->`,
-      result,
-    );
-    return result;
-  } catch (error) {
-    const elapsedMs = Date.now() - start;
-    console.error(
-      `[RenderServer] Render error after ${elapsedMs}ms (active=${activeRenders}):`,
-      error,
-    );
-    throw error;
-  }
-};
-
-export default renderTwickVideo;

package/src/server.ts

@@ -1,202 +0,0 @@
-import express from "express";
-import cors from "cors";
-import path from "path";
-import { fileURLToPath } from "url";
-import renderTwickVideo from "./renderer";
-
-const PORT = process.env.PORT || 5000;
-const BASE_PATH = `http://localhost:${PORT}`;
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-// Rate limiting configuration (all configurable via env)
-const RATE_LIMIT_WINDOW_MS =
-  parseInt(process.env.RATE_LIMIT_WINDOW_MS ?? "900000", 10) || 15 * 60 * 1000; // default 15 min (ms)
-const RATE_LIMIT_MAX_REQUESTS =
-  parseInt(process.env.RATE_LIMIT_MAX_REQUESTS ?? "100", 10) || 100; // max requests per window
-const RATE_LIMIT_CLEANUP_INTERVAL_MS =
-  parseInt(process.env.RATE_LIMIT_CLEANUP_INTERVAL_MS ?? "60000", 10) || 60 * 1000; // default 1 min (ms)
-
-// In-memory store for rate limiting
-interface RateLimitEntry {
-  count: number;
-  resetTime: number;
-}
-
-const rateLimitStore = new Map<string, RateLimitEntry>();
-
-// Cleanup expired entries periodically
-setInterval(() => {
-  const now = Date.now();
-  for (const [key, entry] of rateLimitStore.entries()) {
-    if (now > entry.resetTime) {
-      rateLimitStore.delete(key);
-    }
-  }
-}, RATE_LIMIT_CLEANUP_INTERVAL_MS);
-
-/**
- * Rate limiting middleware for API endpoints.
- * Tracks request counts per IP address and enforces rate limits
- * to prevent abuse of the render server.
- *
- * @param req - Express request object
- * @param res - Express response object
- * @param next - Express next function
- * 
- * @example
- * ```js
- * app.use('/api', rateLimitMiddleware);
- * // Applies rate limiting to all /api routes
- * ```
- */
-const rateLimitMiddleware = (req: express.Request, res: express.Response, next: express.NextFunction) => {
-  const clientIP = req.ip || req.connection.remoteAddress || 'unknown';
-  const now = Date.now();
-  
-  // Get or create rate limit entry for this IP
-  let entry = rateLimitStore.get(clientIP);
-  
-  if (!entry || now > entry.resetTime) {
-    // New window or expired entry
-    entry = {
-      count: 1,
-      resetTime: now + RATE_LIMIT_WINDOW_MS
-    };
-    rateLimitStore.set(clientIP, entry);
-  } else {
-    // Increment count in current window
-    entry.count++;
-    
-    if (entry.count > RATE_LIMIT_MAX_REQUESTS) {
-      // Rate limit exceeded
-      const retryAfter = Math.ceil((entry.resetTime - now) / 1000);
-      res.set('Retry-After', retryAfter.toString());
-      res.set('X-RateLimit-Limit', RATE_LIMIT_MAX_REQUESTS.toString());
-      res.set('X-RateLimit-Remaining', '0');
-      res.set('X-RateLimit-Reset', new Date(entry.resetTime).toISOString());
-      
-      return res.status(429).json({
-        success: false,
-        error: 'Too many requests',
-        message: `Rate limit exceeded. Try again in ${retryAfter} seconds.`,
-        retryAfter
-      });
-    }
-  }
-  
-  // Add rate limit headers
-  res.set('X-RateLimit-Limit', RATE_LIMIT_MAX_REQUESTS.toString());
-  res.set('X-RateLimit-Remaining', (RATE_LIMIT_MAX_REQUESTS - entry.count).toString());
-  res.set('X-RateLimit-Reset', new Date(entry.resetTime).toISOString());
-  
-  next();
-};
-
-const nodeApp: import("express").Express = express();
-
-nodeApp.use(cors());
-nodeApp.use(express.json());
-
-// Serve static files from output directory
-nodeApp.use("/output", express.static(path.join(__dirname, "../output")));
-
-/**
- * POST endpoint for video rendering requests.
- * Accepts project variables and settings, renders the video,
- * and returns a download URL for the completed video.
- *
- * @param req - Express request object containing variables and settings
- * @param res - Express response object
- * 
- * @example
- * ```js
- * POST /api/render-video
- * Body: { variables: {...}, settings: {...} }
- * Response: { success: true, downloadUrl: "..." }
- * ```
- */
-nodeApp.post("/api/render-video", async (req, res) => {
-  const { variables, settings } = req.body;
-
-  try {
-    const outputPath = await renderTwickVideo(variables, settings);
-    res.json({
-      success: true,
-      downloadUrl: `${BASE_PATH}/download/${path.basename(outputPath)}`,
-    });
-  } catch (error) {
-    console.error("Render error:", error);
-    res.status(500).json({
-      success: false,
-      error: error instanceof Error ? error.message : "Unknown error",
-    });
-  }
-});
-
-/**
- * GET endpoint for downloading rendered videos.
- * Serves video files with rate limiting and security checks
- * to prevent path traversal attacks.
- *
- * @param req - Express request object with filename parameter
- * @param res - Express response object
- * 
- * @example
- * ```js
- * GET /download/video-123.mp4
- * // Downloads the specified video file
- * ```
- */
-nodeApp.get("/download/:filename", rateLimitMiddleware, (req, res) => {
-  const outputDir = path.resolve(__dirname, "../output");
-  const requestedPath = path.resolve(outputDir, req.params.filename);
-  if (!requestedPath.startsWith(outputDir + path.sep)) {
-    // Attempted path traversal or access outside output directory
-    res.status(403).json({
-      success: false,
-      error: "Forbidden",
-    });
-    return;
-  }
-  res.download(requestedPath, (err) => {
-    if (err) {
-      res.status(404).json({
-        success: false,
-        error: "File not found",
-      });
-    }
-  });
-});
-
-/**
- * Health check endpoint for monitoring server status.
- * Returns server status and current timestamp for health monitoring.
- *
- * @param req - Express request object
- * @param res - Express response object
- * 
- * @example
- * ```js
- * GET /health
- * Response: { status: "ok", timestamp: "2024-01-01T00:00:00.000Z" }
- * ```
- */
-nodeApp.get("/health", (req, res) => {
-  res.json({
-    status: "ok",
-    timestamp: new Date().toISOString(),
-  });
-});
-
-// Export the app for programmatic usage
-export default nodeApp;
-
-// Start the server
-nodeApp.listen(PORT, () => {
-  console.log(`Render server running on port ${PORT}`);
-  console.log(`Health check: ${BASE_PATH}/health`);
-  console.log(`API endpoint: ${BASE_PATH}/api/render-video`);
-  console.log(`Download endpoint rate limited: ${RATE_LIMIT_MAX_REQUESTS} requests per ${RATE_LIMIT_WINDOW_MS / 60000} minutes`);
-});

package/src/test-render.ts

@@ -1,228 +0,0 @@
-/**
- * Test file for rendering a video with an example project
- * 
- * This script demonstrates how to use the renderTwickVideo function
- * to create a video from a Twick project configuration.
- * 
- * Run with: tsx src/test-render.ts
- */
-
-import { renderTwickVideo } from "./index.js";
-import { fileURLToPath } from "url";
-import { dirname, join } from "path";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-/**
- * Example project configuration
- * This creates a simple video with:
- * - A colored background rectangle
- * - Animated text elements
- * - Audio track
- */
-const exampleProject = {
-  input: {
-    properties: {
-      width: 1920,
-      height: 1080,
-      fps: 30,
-    },
-    tracks: [
-      {
-        id: "t-background",
-        type: "element",
-        name: "background",
-        elements: [
-          {
-            id: "e-bg-1",
-            trackId: "t-background",
-            type: "rect",
-            s: 0,
-            e: 10,
-            props: {
-              width: 1920,
-              height: 1080,
-              fill: "#1a1a2e",
-            },
-          },
-        ],
-      },
-      {
-        id: "t-text",
-        type: "element",
-        name: "text",
-        elements: [
-          {
-            id: "e-text-1",
-            trackId: "t-text",
-            type: "text",
-            s: 1,
-            e: 4,
-            t: "Welcome to Twick!",
-            props: {
-              fill: "#ffffff",
-              fontSize: 72,
-              fontFamily: "Arial",
-              fontWeight: "bold",
-              x: 0,
-              y: -200,
-            },
-            animation: {
-              name: "fade",
-              animate: "enter",
-              duration: 1,
-            },
-            textEffect: {
-              name: "typewriter",
-              duration: 2,
-            },
-          },
-          {
-            id: "e-text-2",
-            trackId: "t-text",
-            type: "text",
-            s: 4,
-            e: 7,
-            t: "Create Amazing Videos",
-            props: {
-              fill: "#4ecdc4",
-              fontSize: 64,
-              fontFamily: "Arial",
-              fontWeight: "bold",
-              x: 0,
-              y: 0,
-            },
-            animation: {
-              name: "rise",
-              animate: "enter",
-              duration: 1,
-            },
-          },
-          {
-            id: "e-text-3",
-            trackId: "t-text",
-            type: "text",
-            s: 7,
-            e: 10,
-            t: "Programmatically!",
-            props: {
-              fill: "#ffd700",
-              fontSize: 80,
-              fontFamily: "Arial",
-              fontWeight: "bold",
-              x: 0,
-              y: 200,
-            },
-            animation: {
-              name: "fade",
-              animate: "enter",
-              duration: 1,
-            },
-          },
-        ],
-      },
-      {
-        id: "t-shapes",
-        type: "element",
-        name: "shapes",
-        elements: [
-          {
-            id: "e-circle-1",
-            trackId: "t-shapes",
-            type: "circle",
-            s: 2,
-            e: 8,
-            props: {
-              width: 200,
-              height: 200,
-              fill: "#ff6b6b",
-              x: -400,
-              y: 0,
-            },
-            animation: {
-              name: "fade",
-              animate: "enter",
-              duration: 1,
-            },
-          },
-          {
-            id: "e-rect-1",
-            trackId: "t-shapes",
-            type: "rect",
-            s: 5,
-            e: 10,
-            props: {
-              width: 300,
-              height: 150,
-              fill: "#4ecdc4",
-              x: 400,
-              y: 0,
-            },
-            animation: {
-              name: "rise",
-              animate: "enter",
-              duration: 1,
-            },
-          },
-        ],
-      },
-    ],
-    version: 1,
-  },
-};
-
-/**
- * Render settings
- */
-const renderSettings = {
-  outFile: `test-video-${Date.now()}.mp4`,
-  outDir: join(__dirname, "../output"),
-  quality: "medium",
-  logProgress: true,
-};
-
-/**
- * Main test function
- */
-async function testVideoRender() {
-  console.log("🎬 Starting video render test...\n");
-  console.log("📋 Project Configuration:");
-  console.log(`   Resolution: ${exampleProject.input.properties.width}x${exampleProject.input.properties.height}`);
-  console.log(`   FPS: ${exampleProject.input.properties.fps}`);
-  console.log(`   Tracks: ${exampleProject.input.tracks.length}`);
-  console.log(`   Total Elements: ${exampleProject.input.tracks.reduce((sum, track) => sum + track.elements.length, 0)}\n`);
-
-  try {
-    console.log("🔄 Rendering video...");
-    const startTime = Date.now();
-
-    const outputPath = await renderTwickVideo(exampleProject, renderSettings);
-
-    const endTime = Date.now();
-    const duration = ((endTime - startTime) / 1000).toFixed(2);
-
-    console.log("\n✅ Video rendered successfully!");
-    console.log(`📁 Output file: ${outputPath}`);
-    console.log(`⏱️  Render time: ${duration}s`);
-    console.log(`\n🎉 Test completed successfully!`);
-
-    return outputPath;
-  } catch (error) {
-    console.error("\n❌ Render failed:");
-    console.error(error);
-    if (error instanceof Error) {
-      console.error(`   Error: ${error.message}`);
-      if (error.stack) {
-        console.error(`   Stack: ${error.stack}`);
-      }
-    }
-    process.exit(1);
-  }
-}
-
-// Run the test
-testVideoRender().catch((error) => {
-  console.error("Fatal error:", error);
-  process.exit(1);
-});

package/test.js

@@ -1,163 +0,0 @@
-// Simple test script for the render server
-import fetch from 'node-fetch';
-
-const API_URL = 'http://localhost:3001';
-
-const sample = {
-    "input": {
-      "properties": {
-        "width": 720,
-        "height": 1280
-      },
-      "tracks": [
-        {
-          "id": "t-track-1",
-          "type": "element",
-          "elements": [
-            {
-              "id": "e-244f8d5a3baa",
-              "trackId": "t-track-1",
-              "type": "rect",
-              "s": 0,
-              "e": 5,
-              "props": {
-                "width": 720,
-                "height": 1280,
-                "fill": "#fff000"
-              }
-            }
-          ],
-          "name": "element"
-        },
-        {
-          "id": "t-track-2",
-          "type": "element",
-          "elements": [
-            {
-              "id": "e-244f8d5a3bba",
-              "trackId": "t-track-2",
-              "type": "text",
-              "s": 0,
-              "e": 1,
-              "props": {
-                "text": "Hello Guys!",
-                "fontSize": 100,
-                "fill": "#FF0000"
-              }
-            },
-            {
-              "id": "e-244f8d5a3bbb",
-              "trackId": "t-track-2",
-              "type": "text",
-              "s": 1,
-              "e": 4,
-              "props": {
-                "text": "Welcome to the world of Twick!",
-                "fontSize": 100,
-                "fill": "#FF0000",
-                "maxWidth": 500,
-                "textAlign": "center",
-                "textWrap": true
-              }
-            },
-            {
-              "id": "e-244f8d5a3bbc",
-              "trackId": "t-track-2",
-              "type": "text",
-              "s": 4,
-              "e": 5,
-              "props": {
-                "text": "Thank You !",
-                "fontSize": 100,
-                "fill": "#FF0000"
-              }
-            }
-          ],
-          "name": "element"
-        },
-        {
-          "id": "t-track-3",
-          "type": "element",
-          "elements": [
-            {
-              "id": "e-244f8d5aabaa",
-              "trackId": "t-track-3",
-              "type": "audio",
-              "s": 0,
-              "e": 5,
-              "props": {
-                "src": "https://cdn.pixabay.com/audio/2024/09/15/audio_e00d39651a.mp3",
-                "play": true,
-                "volume": 1
-              }
-            }
-          ],
-          "name": "audio"
-        }
-      ],
-      "version": 1
-    }
-  }
-
-
-async function testHealth() {
-  try {
-    const response = await fetch(`${API_URL}/health`);
-    const result = await response.json();
-    console.log('Health check passed:', result);
-    return true;
-  } catch (error) {
-    console.error('Health check failed:', error.message);
-    return false;
-  }
-}
-
-async function testRender() {
-  try {
-    console.log('🔄 Testing video render...');
-    
-    const response = await fetch(`${API_URL}/api/render-video`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
-        variables: sample,
-        settings: {
-          outFile: `test-${Date.now()}.mp4`,          
-        }
-      })
-    });
-
-    const result = await response.json();
-    
-    if (result.success) {
-      console.log('Render test passed!');
-      console.log('📁 Output:', result.downloadUrl);
-      return true;
-    } else {
-      console.error('Render test failed:', result.error);
-      return false;
-    }
-  } catch (error) {
-    console.error('Render test failed:', error.message);
-    return false;
-  }
-}
-
-async function runTests() {
-  console.log('🧪 Running render server tests...\n');
-  
-  const healthPassed = await testHealth();
-  console.log('');
-  
-  if (healthPassed) {
-    await testRender();
-  } else {
-    console.log('Skipping render test due to health check failure');
-  }
-  
-  console.log('\n🏁 Tests completed');
-}
-
-runTests().catch(console.error);