vueseq 0.1.0 → 0.2.0

package/src/renderer/render.js

@@ -1,6 +1,6 @@
 /**
  * Frame Renderer
- * 
+ *
  * The core rendering loop that captures each frame using Playwright.
  * For each frame:
  *   1. Seek GSAP globalTimeline to the exact time
@@ -12,96 +12,166 @@ import { chromium } from 'playwright'
 import { createVideoServer } from '../bundler/vite.js'
 import { mkdir } from 'fs/promises'
 import { join } from 'path'
+import { getOptimalChromiumConfig } from './gpu.js'
+
+// GPU configuration is now handled by the gpu.js module
+// which auto-detects the best backend for the current system
+
+/**
+ * Get the timeline duration from a Vue component
+ * @param {Object} options
+ * @param {string} options.input - Absolute path to the Video.vue component
+ * @param {number} [options.width=1920] - Video width in pixels
+ * @param {number} [options.height=1080] - Video height in pixels
+ * @returns {Promise<number|null>} Duration in seconds, or null if not detectable
+ */
+export async function getTimelineDuration(options) {
+  const { input, width = 1920, height = 1080 } = options
+
+  const { url, cleanup } = await createVideoServer({ input, width, height })
+
+  // Get optimal GPU configuration for this system
+  const gpuConfig = await getOptimalChromiumConfig()
+
+  const launchOptions = {
+    headless: gpuConfig.headless,
+    args: gpuConfig.args,
+  }
+  if (gpuConfig.channel) {
+    launchOptions.channel = gpuConfig.channel
+  }
+  const browser = await chromium.launch(launchOptions)
+  const context = await browser.newContext({
+    viewport: { width, height },
+    deviceScaleFactor: 1,
+  })
+  const page = await context.newPage()
+
+  try {
+    await page.goto(url, { waitUntil: 'networkidle' })
+    await page.waitForFunction(() => window.__VUESEQ_READY__ === true, {
+      timeout: 30000,
+    })
+    // Give Vue/GSAP a moment to set up timelines
+    await page.waitForTimeout(100)
+
+    const duration = await page.evaluate(() =>
+      window.__VUESEQ_GET_DURATION__?.(),
+    )
+    return duration
+  } finally {
+    await browser.close()
+    await cleanup()
+  }
+}
 
 /**
  * Render frames from a Vue component
  * @param {Object} options
  * @param {string} options.input - Absolute path to the Video.vue component
  * @param {number} [options.fps=30] - Frames per second
- * @param {number} options.duration - Duration in seconds
+ * @param {number} [options.duration] - Duration in seconds (auto-detected if not provided)
  * @param {number} [options.width=1920] - Video width in pixels
  * @param {number} [options.height=1080] - Video height in pixels
  * @param {function} [options.onProgress] - Progress callback
  * @returns {Promise<{framesDir: string, totalFrames: number, cleanup: () => Promise<void>}>}
  */
 export async function renderFrames(options) {
-    const {
-        input,
-        fps = 30,
-        duration,
-        width = 1920,
-        height = 1080,
-        onProgress
-    } = options
-
+  let {
+    input,
+    fps = 30,
+    duration,
+    width = 1920,
+    height = 1080,
+    onProgress,
+  } = options
+
+  // Auto-detect duration if not provided
+  if (!duration) {
+    duration = await getTimelineDuration({ input, width, height })
     if (!duration || duration <= 0) {
-        throw new Error('Duration must be a positive number (in seconds)')
+      throw new Error(
+        'Could not auto-detect duration. Specify -d/--duration manually.',
+      )
     }
-
-    const totalFrames = Math.ceil(duration * fps)
-
-    // Start Vite server
-    const { url, tempDir, cleanup } = await createVideoServer({ input, width, height })
-
-    const framesDir = join(tempDir, 'frames')
-    await mkdir(framesDir, { recursive: true })
-
-    // Launch headless browser
-    const browser = await chromium.launch({
-        headless: true
-    })
-
-    const context = await browser.newContext({
-        viewport: { width, height },
-        deviceScaleFactor: 1
+  }
+
+  const totalFrames = Math.ceil(duration * fps)
+
+  // Start Vite server
+  const { url, tempDir, cleanup } = await createVideoServer({
+    input,
+    width,
+    height,
+  })
+
+  const framesDir = join(tempDir, 'frames')
+  await mkdir(framesDir, { recursive: true })
+
+  // Launch headless browser with optimal GPU config
+  const gpuConfig = await getOptimalChromiumConfig()
+  const launchOptions2 = {
+    headless: gpuConfig.headless,
+    args: gpuConfig.args,
+  }
+  if (gpuConfig.channel) {
+    launchOptions2.channel = gpuConfig.channel
+  }
+  const browser = await chromium.launch(launchOptions2)
+
+  const context = await browser.newContext({
+    viewport: { width, height },
+    deviceScaleFactor: 1,
+  })
+
+  const page = await context.newPage()
+
+  try {
+    // Load the page
+    await page.goto(url, { waitUntil: 'networkidle' })
+
+    // Wait for VueSeq bridge to be ready
+    await page.waitForFunction(() => window.__VUESEQ_READY__ === true, {
+      timeout: 30000,
     })
 
-    const page = await context.newPage()
-
-    try {
-        // Load the page
-        await page.goto(url, { waitUntil: 'networkidle' })
-
-        // Wait for VueSeq bridge to be ready
-        await page.waitForFunction(
-            () => window.__VUESEQ_READY__ === true,
-            { timeout: 30000 }
-        )
-
-        // Give Vue a moment to mount and GSAP to set up timelines
-        await page.waitForTimeout(100)
-
-        // Render each frame
-        for (let frame = 0; frame < totalFrames; frame++) {
-            const timeInSeconds = frame / fps
-
-            // Seek GSAP to exact time and wait for paint
-            await page.evaluate(async (t) => {
-                window.__VUESEQ_SEEK__(t)
-                // Wait for next animation frame to ensure DOM is painted
-                await new Promise(resolve => requestAnimationFrame(resolve))
-            }, timeInSeconds)
-
-            // Take screenshot
-            const framePath = join(framesDir, `frame-${String(frame).padStart(5, '0')}.png`)
-            await page.screenshot({
-                path: framePath,
-                type: 'png'
-            })
-
-            // Progress callback
-            if (onProgress) {
-                onProgress({
-                    frame,
-                    total: totalFrames,
-                    timeInSeconds,
-                    percent: Math.round((frame + 1) / totalFrames * 100)
-                })
-            }
-        }
-    } finally {
-        await browser.close()
+    // Give Vue a moment to mount and GSAP to set up timelines
+    await page.waitForTimeout(100)
+
+    // Render each frame
+    for (let frame = 0; frame < totalFrames; frame++) {
+      const timeInSeconds = frame / fps
+
+      // Seek GSAP to exact time and wait for paint
+      await page.evaluate(async (t) => {
+        window.__VUESEQ_SEEK__(t)
+        // Wait for next animation frame to ensure DOM is painted
+        await new Promise((resolve) => requestAnimationFrame(resolve))
+      }, timeInSeconds)
+
+      // Take screenshot
+      const framePath = join(
+        framesDir,
+        `frame-${String(frame).padStart(5, '0')}.png`,
+      )
+      await page.screenshot({
+        path: framePath,
+        type: 'png',
+      })
+
+      // Progress callback
+      if (onProgress) {
+        onProgress({
+          frame,
+          total: totalFrames,
+          timeInSeconds,
+          percent: Math.round(((frame + 1) / totalFrames) * 100),
+        })
+      }
     }
+  } finally {
+    await browser.close()
+  }
 
-    return { framesDir, totalFrames, cleanup }
+  return { framesDir, totalFrames, cleanup }
 }

package/src/runtime/gsap-bridge.js

@@ -35,7 +35,17 @@ window.__VUESEQ_SET_CONFIG__ = (config) => {
   window.__VUESEQ_CONFIG__ = config
 }
 
-// 6. Mark as ready after a microtask to ensure Vue is mounted
+// 6. Expose timeline duration for auto-detection
+window.__VUESEQ_GET_DURATION__ = () => {
+  const duration = gsap.globalTimeline.duration()
+  // Return null for infinite timelines (repeat: -1)
+  if (duration === Infinity || duration > 3600) {
+    return null
+  }
+  return duration
+}
+
+// 7. Mark as ready after a microtask to ensure Vue is mounted
 queueMicrotask(() => {
   window.__VUESEQ_READY__ = true
 })