@open-motion/renderer 0.0.1-alpha.0

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+import { VideoConfig } from '@open-motion/core';
+export interface RenderOptions {
+    url: string;
+    config: VideoConfig;
+    outputDir: string;
+    compositionId?: string;
+    inputProps?: any;
+    concurrency?: number;
+}
+export declare const getCompositions: (url: string) => Promise<any>;
+export declare const renderFrames: ({ url, config, outputDir, compositionId, inputProps, concurrency }: RenderOptions) => Promise<{
+    audioAssets: any[];
+}>;

package/dist/index.js

@@ -0,0 +1,75 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderFrames = exports.getCompositions = void 0;
+const playwright_1 = require("playwright");
+const core_1 = require("@open-motion/core");
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const getCompositions = async (url) => {
+    const browser = await playwright_1.chromium.launch();
+    const page = await browser.newPage();
+    await page.goto(url);
+    await page.waitForLoadState('networkidle');
+    // Wait a bit for React to mount and compositions to register
+    await page.waitForFunction(() => window.__OPEN_MOTION_COMPOSITIONS__ !== undefined, { timeout: 5000 }).catch(() => { });
+    const compositions = await page.evaluate(() => {
+        return window.__OPEN_MOTION_COMPOSITIONS__ || [];
+    });
+    await browser.close();
+    return compositions;
+};
+exports.getCompositions = getCompositions;
+const renderFrames = async ({ url, config, outputDir, compositionId, inputProps = {}, concurrency = 1 }) => {
+    if (!fs_1.default.existsSync(outputDir)) {
+        fs_1.default.mkdirSync(outputDir, { recursive: true });
+    }
+    const framesPerWorker = Math.ceil(config.durationInFrames / concurrency);
+    const audioAssets = [];
+    const renderBatch = async (startFrame, endFrame, workerId) => {
+        const browser = await playwright_1.chromium.launch({
+            args: ['--disable-dev-shm-usage', '--disable-setuid-sandbox', '--no-sandbox']
+        });
+        const page = await browser.newPage({
+            viewport: { width: config.width, height: config.height }
+        });
+        console.log(`Worker ${workerId}: Rendering frames ${startFrame} to ${endFrame}...`);
+        for (let i = startFrame; i <= endFrame && i < config.durationInFrames; i++) {
+            if (i === startFrame) {
+                await page.goto(url);
+            }
+            await page.evaluate(({ frame, fps, hijackScript, compositionId, inputProps }) => {
+                window.__OPEN_MOTION_FRAME__ = frame;
+                window.__OPEN_MOTION_COMPOSITION_ID__ = compositionId;
+                window.__OPEN_MOTION_INPUT_PROPS__ = inputProps;
+                eval(hijackScript);
+            }, {
+                frame: i,
+                fps: config.fps,
+                hijackScript: (0, core_1.getTimeHijackScript)(i, config.fps),
+                compositionId,
+                inputProps
+            });
+            await page.waitForFunction(() => !(window.__OPEN_MOTION_DELAY_RENDER_COUNT__ > 0), { timeout: 30000 });
+            await page.waitForLoadState('networkidle');
+            // Extract audio assets from the first frame or each frame
+            if (workerId === 0 && i === 0) {
+                const assets = await page.evaluate(() => window.__OPEN_MOTION_AUDIO_ASSETS__ || []);
+                audioAssets.push(...assets);
+            }
+            const screenshotPath = path_1.default.join(outputDir, `frame-${i.toString().padStart(5, '0')}.png`);
+            await page.screenshot({ path: screenshotPath, type: 'png' });
+        }
+        await browser.close();
+    };
+    const workers = [];
+    for (let i = 0; i < concurrency; i++) {
+        workers.push(renderBatch(i * framesPerWorker, (i + 1) * framesPerWorker - 1, i));
+    }
+    await Promise.all(workers);
+    console.log('Frame rendering complete.');
+    return { audioAssets };
+};
+exports.renderFrames = renderFrames;

package/dist/test-e2e.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test-e2e.js

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const playwright_1 = require("playwright");
+const child_process_1 = require("child_process");
+const path_1 = __importDefault(require("path"));
+const TEST_PORT = 3005;
+const APP_URL = `http://localhost:${TEST_PORT}`;
+async function runTest() {
+    console.log('🚀 Starting E2E Tests...');
+    // 1. Start dev server
+    const devServer = (0, child_process_1.spawn)('pnpm', ['dev', '--port', TEST_PORT.toString()], {
+        cwd: path_1.default.resolve(__dirname, '../../../examples/hello-world'),
+        shell: false
+    });
+    devServer.stdout.on('data', (data) => console.log(`[DevServer]: ${data}`));
+    // Wait for dev server to be ready
+    await new Promise(resolve => setTimeout(resolve, 5000));
+    const browser = await playwright_1.chromium.launch();
+    const page = await browser.newPage();
+    try {
+        // Scene 1: Basic Rendering & Hooks
+        console.log('Checking Scene 1: Hooks & Rendering...');
+        await page.goto(APP_URL);
+        await page.waitForSelector('h1');
+        const title = await page.innerText('h1');
+        if (title !== 'OpenMotion Player Preview')
+            throw new Error('Player Title mismatch');
+        console.log('✅ Scene 1 Passed');
+        // Scene 2: Input Props Injection
+        console.log('Checking Scene 2: Input Props...');
+        // We'll test this via CLI later, but check if default props work in Player
+        const welcomeText = await page.innerText('span');
+        if (!welcomeText.includes('Claude Preview'))
+            throw new Error('Input Props not reflected');
+        console.log('✅ Scene 2 Passed');
+        // Scene 3: delayRender
+        console.log('Checking Scene 3: delayRender...');
+        // Check if __OPEN_MOTION_DELAY_RENDER_COUNT__ exists and becomes 0
+        const delayCount = await page.evaluate(() => window.__OPEN_MOTION_DELAY_RENDER_COUNT__);
+        console.log(`Initial delay count: ${delayCount}`);
+        await page.waitForFunction(() => window.__OPEN_MOTION_DELAY_RENDER_COUNT__ === 0, { timeout: 10000 });
+        console.log('✅ Scene 3 Passed');
+    }
+    catch (err) {
+        console.error('❌ Test Failed:', err);
+        process.exit(1);
+    }
+    finally {
+        await browser.close();
+        devServer.kill();
+    }
+    console.log('🎉 All E2E Tests Passed!');
+    process.exit(0);
+}
+runTest();

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@open-motion/renderer",
+  "version": "0.0.1-alpha.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/open-motion/open-motion.git",
+    "directory": "packages/renderer"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "playwright": "^1.40.0",
+    "@open-motion/core": "0.0.1-alpha.0"
+  },
+  "scripts": {
+    "build": "tsc"
+  }
+}