@gannochenko/staticstripes 0.0.18 → 0.0.20

package/src/app-renderer.ts

@@ -0,0 +1,229 @@
+import puppeteer, { Browser } from 'puppeteer';
+import { writeFile, mkdir } from 'fs/promises';
+import { resolve, isAbsolute } from 'path';
+import { existsSync } from 'fs';
+import { createHash } from 'crypto';
+import { App } from './type';
+
+const RENDER_TIMEOUT_MS = 5000;
+
+export interface RenderAppOptions {
+  app: App;
+  width: number;
+  height: number;
+  projectDir: string;
+  outputName: string;
+  title: string;
+  date?: string;
+  tags: string[];
+  browser?: Browser; // optional shared browser instance
+}
+
+export interface AppRenderResult {
+  app: App;
+  screenshotPath: string;
+}
+
+function generateAppCacheKey(
+  src: string,
+  parameters: Record<string, string>,
+  title: string,
+  date: string | undefined,
+  tags: string[],
+  outputName: string,
+): string {
+  const hash = createHash('sha256');
+  hash.update(src);
+  hash.update(JSON.stringify(parameters));
+  hash.update(title);
+  hash.update(date ?? '');
+  hash.update(tags.join(','));
+  hash.update(outputName);
+  return hash.digest('hex').substring(0, 16);
+}
+
+/**
+ * Renders a React (or any SPA) app to a PNG screenshot using Puppeteer.
+ * The app must dispatch a "sts-render-complete" custom event on document
+ * when it is fully rendered. If the event is not received within
+ * RENDER_TIMEOUT_MS, an error is thrown.
+ */
+export async function renderApp(options: RenderAppOptions): Promise<AppRenderResult> {
+  const { app, width, height, projectDir, outputName, title, date, tags, browser: sharedBrowser } = options;
+
+  // Create cache directory
+  const cacheDir = resolve(projectDir, 'cache', 'apps');
+  if (!existsSync(cacheDir)) {
+    await mkdir(cacheDir, { recursive: true });
+  }
+
+  // Generate cache key from all inputs that affect output
+  const cacheKey = generateAppCacheKey(
+    app.src,
+    app.parameters,
+    title,
+    date,
+    tags,
+    outputName,
+  );
+  const screenshotPath = resolve(cacheDir, `${cacheKey}.png`);
+
+  // Return cached result if available
+  if (existsSync(screenshotPath)) {
+    console.log(
+      `Using cached app "${app.id}" (hash: ${cacheKey}) from ${screenshotPath}`,
+    );
+    return { app, screenshotPath };
+  }
+
+  // Resolve index.html
+  const appDir = isAbsolute(app.src)
+    ? app.src
+    : resolve(projectDir, app.src);
+  const indexPath = resolve(appDir, 'index.html');
+
+  if (!existsSync(indexPath)) {
+    throw new Error(`App "${app.id}": index.html not found at ${indexPath}`);
+  }
+
+  // Build URL with query parameters.
+  // Metadata (title, date, tags) is always injected; extra parameters from
+  // data-parameters are merged in afterwards and can override metadata keys.
+  const searchParams = new URLSearchParams({ rendering: '' });
+  searchParams.set('title', title);
+  if (date) searchParams.set('date', date);
+  if (tags.length > 0) searchParams.set('tags', tags.join(','));
+  for (const [key, value] of Object.entries(app.parameters)) {
+    searchParams.set(key, value);
+  }
+
+  const url = `file://${indexPath}?${searchParams.toString()}`;
+
+  console.log(`\nRendering app "${app.id}" from ${url}`);
+
+  const ownBrowser = sharedBrowser
+    ? null
+    : await puppeteer.launch({
+        headless: true,
+        args: ['--no-sandbox', '--disable-setuid-sandbox'],
+      });
+  const browser = sharedBrowser ?? ownBrowser!;
+
+  const page = await browser.newPage();
+
+  try {
+    await page.setViewport({ width, height });
+
+    page.on('console', (msg) =>
+      console.log(`[app:${app.id}] console.${msg.type()}: ${msg.text()}`),
+    );
+    page.on('pageerror', (err) =>
+      console.error(`[app:${app.id}] page error: ${String(err)}`),
+    );
+    page.on('requestfailed', (req) =>
+      console.error(`[app:${app.id}] request failed: ${req.url()} — ${req.failure()?.errorText}`),
+    );
+
+    // Initialise the flag before navigation. The app sets it to true directly
+    // via window.__stsRenderComplete = true inside its useEffect, so no event
+    // listener is needed on this side.
+    await page.evaluateOnNewDocument(
+      `window.__stsRenderComplete = false;`,
+    );
+
+    await page.goto(url, { waitUntil: 'networkidle0' });
+
+    // Wait for the app to signal it is done rendering
+    await page
+      .waitForFunction('window.__stsRenderComplete === true', {
+        timeout: RENDER_TIMEOUT_MS,
+      })
+      .catch(() => {
+        throw new Error(
+          `App "${app.id}" did not set window.__stsRenderComplete within ${RENDER_TIMEOUT_MS}ms`,
+        );
+      });
+
+    // Screenshot with transparent background
+    const screenshot = await page.screenshot({
+      type: 'png',
+      omitBackground: true,
+      clip: { x: 0, y: 0, width, height },
+    });
+
+    await writeFile(screenshotPath, screenshot);
+
+    console.log(
+      `Rendered app "${app.id}" (hash: ${cacheKey}) to ${screenshotPath}`,
+    );
+
+    return { app, screenshotPath };
+  } finally {
+    await page.close();
+    if (ownBrowser) await ownBrowser.close();
+  }
+}
+
+/**
+ * Renders multiple apps in sequence, reusing a single browser instance.
+ */
+export async function renderApps(
+  apps: App[],
+  width: number,
+  height: number,
+  projectDir: string,
+  outputName: string,
+  title: string,
+  date: string | undefined,
+  tags: string[],
+  activeCacheKeys?: Set<string>,
+): Promise<AppRenderResult[]> {
+  const results: AppRenderResult[] = [];
+
+  // Launch once and reuse across all apps.
+  // --allow-file-access-from-files is required so Chromium allows
+  // <script type="module"> and <link> tags to load sibling files
+  // when the page itself is served via file://.
+  const browser = await puppeteer.launch({
+    headless: true,
+    args: [
+      '--no-sandbox',
+      '--disable-setuid-sandbox',
+      '--allow-file-access-from-files',
+    ],
+  });
+
+  try {
+    for (const app of apps) {
+      const cacheKey = generateAppCacheKey(
+        app.src,
+        app.parameters,
+        title,
+        date,
+        tags,
+        outputName,
+      );
+
+      if (activeCacheKeys) {
+        activeCacheKeys.add(cacheKey);
+      }
+
+      const result = await renderApp({
+        app,
+        width,
+        height,
+        projectDir,
+        outputName,
+        title,
+        date,
+        tags,
+        browser,
+      });
+      results.push(result);
+    }
+  } finally {
+    await browser.close();
+  }
+
+  return results;
+}

package/src/cli/commands/generate.ts

@@ -158,8 +158,9 @@ export function registerGenerateCommand(
             mkdirSync(outputDir, { recursive: true });
           }
 
-          // Render containers for this output (accumulate cache keys)
+          // Render containers and apps for this output (accumulate cache keys)
           await project.renderContainers(outputName, activeCacheKeys);
+          await project.renderApps(outputName, activeCacheKeys);
 
           // Print project statistics
           project.printStats();

package/src/duration-trim.test.ts

@@ -0,0 +1,276 @@
+import { describe, it, expect } from 'vitest';
+import { HTMLParser } from './html-parser';
+
+describe('Duration and Trim Properties - CSS Parsing and Logic', () => {
+  // Helper to extract computed CSS styles for a fragment
+  const parseFragmentStyles = (html: string) => {
+    const fullHtml = html.includes('<title>') ? html : `<title>Test</title>${html}`;
+    const htmlParser = new HTMLParser();
+    const parsed = htmlParser.parse(fullHtml);
+
+    // Find the fragment element
+    const findFragment = (node: any): any => {
+      if (node.type === 'tag' && node.name === 'fragment') return node;
+      if (node.children) {
+        for (const child of node.children) {
+          const result = findFragment(child);
+          if (result) return result;
+        }
+      }
+      return null;
+    };
+
+    const fragment = findFragment(parsed.ast);
+    if (!fragment) {
+      throw new Error('No fragment found in HTML');
+    }
+
+    return parsed.css.get(fragment) || {};
+  };
+
+  // Helper to parse time value from CSS
+  const parseTime = (value: string | undefined): number => {
+    if (!value) return 0;
+    const trimmed = value.trim();
+
+    if (trimmed.endsWith('ms')) {
+      const ms = parseFloat(trimmed);
+      return isNaN(ms) ? 0 : Math.round(ms);
+    }
+
+    if (trimmed.endsWith('s')) {
+      const seconds = parseFloat(trimmed);
+      return isNaN(seconds) ? 0 : Math.round(seconds * 1000);
+    }
+
+    return 0;
+  };
+
+  // Helper to test duration calculation (replicates parseDurationProperty logic)
+  const calculateDuration = (
+    trimStart: number,
+    trimEnd: number,
+    durationValue: string | undefined,
+    assetDuration: number,
+  ): number => {
+    if (!durationValue || durationValue.trim() === 'auto') {
+      return Math.max(0, assetDuration - trimStart - trimEnd);
+    }
+
+    // Handle percentage
+    if (durationValue.endsWith('%')) {
+      const percentage = parseFloat(durationValue);
+      return Math.round((assetDuration * percentage) / 100);
+    }
+
+    // Parse explicit time value
+    return parseTime(durationValue);
+  };
+
+  describe('CSS Property Parsing', () => {
+    it('should parse -duration property', () => {
+      const html = `
+        <project><sequence><fragment class="test" /></sequence></project>
+        <style>.test { -duration: 5000ms; }</style>
+      `;
+      const styles = parseFragmentStyles(html);
+      expect(styles['-duration']).toBe('5000ms');
+    });
+
+    it('should parse -trim-start property', () => {
+      const html = `
+        <project><sequence><fragment class="test" /></sequence></project>
+        <style>.test { -trim-start: 2000ms; }</style>
+      `;
+      const styles = parseFragmentStyles(html);
+      expect(styles['-trim-start']).toBe('2000ms');
+    });
+
+    it('should parse -trim-end property', () => {
+      const html = `
+        <project><sequence><fragment class="test" /></sequence></project>
+        <style>.test { -trim-end: 3000ms; }</style>
+      `;
+      const styles = parseFragmentStyles(html);
+      expect(styles['-trim-end']).toBe('3000ms');
+    });
+
+    it('should parse all three properties together', () => {
+      const html = `
+        <project><sequence><fragment class="test" /></sequence></project>
+        <style>.test { -trim-start: 2s; -trim-end: 3s; -duration: auto; }</style>
+      `;
+      const styles = parseFragmentStyles(html);
+      expect(styles['-trim-start']).toBe('2s');
+      expect(styles['-trim-end']).toBe('3s');
+      expect(styles['-duration']).toBe('auto');
+    });
+
+    it('should allow inline styles to override class styles', () => {
+      const html = `
+        <project><sequence>
+          <fragment class="test" style="-duration: 2000ms; -trim-start: 500ms;" />
+        </sequence></project>
+        <style>.test { -duration: 5000ms; -trim-start: 3000ms; }</style>
+      `;
+      const styles = parseFragmentStyles(html);
+      expect(styles['-duration']).toBe('2000ms'); // Inline overrides
+      expect(styles['-trim-start']).toBe('500ms'); // Inline overrides
+    });
+  });
+
+  describe('Duration Calculation - No Trim', () => {
+    it('should use explicit duration', () => {
+      const result = calculateDuration(0, 0, '5000ms', 10000);
+      expect(result).toBe(5000);
+    });
+
+    it('should use auto duration (full asset)', () => {
+      const result = calculateDuration(0, 0, 'auto', 10000);
+      expect(result).toBe(10000);
+    });
+
+    it('should handle percentage duration', () => {
+      const result = calculateDuration(0, 0, '50%', 10000);
+      expect(result).toBe(5000);
+    });
+
+    it('should handle undefined duration (auto)', () => {
+      const result = calculateDuration(0, 0, undefined, 8000);
+      expect(result).toBe(8000);
+    });
+  });
+
+  describe('Duration Calculation - With trim-start Only', () => {
+    it('should use explicit duration with trim-start', () => {
+      const result = calculateDuration(2000, 0, '3000ms', 10000);
+      expect(result).toBe(3000);
+      // FFmpeg: start=2000, end=5000 (2000+3000)
+    });
+
+    it('should calculate auto duration with trim-start', () => {
+      const result = calculateDuration(2000, 0, 'auto', 10000);
+      expect(result).toBe(8000); // 10000 - 2000
+    });
+
+    it('should handle undefined duration with trim-start', () => {
+      const result = calculateDuration(3000, 0, undefined, 10000);
+      expect(result).toBe(7000); // 10000 - 3000
+    });
+  });
+
+  describe('Duration Calculation - With trim-end Only', () => {
+    it('should use explicit duration (trim-end ignored)', () => {
+      const result = calculateDuration(0, 3000, '5000ms', 10000);
+      expect(result).toBe(5000); // Explicit, trim-end doesn't apply
+    });
+
+    it('should calculate auto duration with trim-end', () => {
+      const result = calculateDuration(0, 3000, 'auto', 10000);
+      expect(result).toBe(7000); // 10000 - 3000
+    });
+
+    it('should handle undefined duration with trim-end', () => {
+      const result = calculateDuration(0, 4000, undefined, 10000);
+      expect(result).toBe(6000); // 10000 - 4000
+    });
+  });
+
+  describe('Duration Calculation - With Both Trims', () => {
+    it('should use explicit duration (both trims ignored)', () => {
+      const result = calculateDuration(2000, 3000, '4000ms', 10000);
+      expect(result).toBe(4000);
+      // FFmpeg: start=2000, end=6000 (2000+4000)
+    });
+
+    it('should calculate auto duration with both trims', () => {
+      const result = calculateDuration(2000, 3000, 'auto', 10000);
+      expect(result).toBe(5000); // 10000 - 2000 - 3000
+      // FFmpeg: start=2000, end=7000 (2000+5000)
+      // Shows content from 2s to 7s
+    });
+
+    it('should handle undefined duration with both trims', () => {
+      const result = calculateDuration(1000, 2000, undefined, 8000);
+      expect(result).toBe(5000); // 8000 - 1000 - 2000
+    });
+
+    it('should handle trims exceeding asset duration', () => {
+      const result = calculateDuration(6000, 5000, 'auto', 10000);
+      expect(result).toBe(0); // Math.max(0, 10000 - 6000 - 5000)
+    });
+
+    it('should handle very large trim-start', () => {
+      const result = calculateDuration(15000, 0, 'auto', 10000);
+      expect(result).toBe(0); // Math.max(0, 10000 - 15000)
+    });
+  });
+
+  describe('Time Parsing', () => {
+    it('should parse milliseconds', () => {
+      expect(parseTime('5000ms')).toBe(5000);
+      expect(parseTime('1500ms')).toBe(1500);
+      expect(parseTime('0ms')).toBe(0);
+    });
+
+    it('should parse seconds', () => {
+      expect(parseTime('5s')).toBe(5000);
+      expect(parseTime('1.5s')).toBe(1500);
+      expect(parseTime('0s')).toBe(0);
+    });
+
+    it('should handle undefined', () => {
+      expect(parseTime(undefined)).toBe(0);
+    });
+
+    it('should handle whitespace', () => {
+      expect(parseTime('  5000ms  ')).toBe(5000);
+      expect(parseTime('  2s  ')).toBe(2000);
+    });
+  });
+
+  describe('Real-World Scenarios', () => {
+    it('should handle typical trim scenario: skip intro and outro', () => {
+      // 60-second GoPro clip, skip 5s intro and 3s outro
+      const result = calculateDuration(5000, 3000, 'auto', 60000);
+      expect(result).toBe(52000); // 60s - 5s - 3s = 52s
+      // Shows content from 5s to 57s
+    });
+
+    it('should handle user-specified exact duration with trim', () => {
+      // 5-minute interview, start at 10s, use 30s
+      const result = calculateDuration(10000, 0, '30000ms', 300000);
+      expect(result).toBe(30000);
+      // Shows content from 10s to 40s
+    });
+
+    it('should handle percentage with trims', () => {
+      // Use middle 50% of a 10s clip
+      const result = calculateDuration(0, 0, '50%', 10000);
+      expect(result).toBe(5000);
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle zero duration', () => {
+      const result = calculateDuration(0, 0, '0ms', 10000);
+      expect(result).toBe(0);
+    });
+
+    it('should handle zero trim values', () => {
+      const result = calculateDuration(0, 0, 'auto', 10000);
+      expect(result).toBe(10000);
+    });
+
+    it('should handle 100% percentage', () => {
+      const result = calculateDuration(0, 0, '100%', 10000);
+      expect(result).toBe(10000);
+    });
+
+    it('should handle negative percentage', () => {
+      const result = calculateDuration(0, 0, '-10%', 10000);
+      // parseFloat('-10%') = -10, so Math.round((10000 * -10) / 100) = -1000
+      expect(result).toBe(-1000);
+    });
+  });
+});

package/src/html-parser.ts

@@ -136,13 +136,20 @@ export class HTMLParser {
         const element = currentNode as Element;
         const computedStyles: CSSProperties = {};
 
-        // Apply matching rules
+        // Apply matching rules (CSS classes)
         for (const rule of styleRules) {
           if (this.matchesSelector(element, rule.selector)) {
             Object.assign(computedStyles, rule.properties);
           }
         }
 
+        // Apply inline style attribute (highest priority)
+        const inlineStyle = element.attribs?.style;
+        if (inlineStyle) {
+          const inlineProperties = this.parseInlineStyle(inlineStyle);
+          Object.assign(computedStyles, inlineProperties);
+        }
+
         elementsMap.set(element, computedStyles);
       }
 
@@ -155,6 +162,35 @@ export class HTMLParser {
 
     traverse(node);
   }
+
+  /**
+   * Parses inline style attribute into CSS properties
+   * Example: "color: red; font-size: 16px;" => { color: "red", "font-size": "16px" }
+   */
+  private parseInlineStyle(styleText: string): CSSProperties {
+    const properties: CSSProperties = {};
+
+    try {
+      // Wrap in a dummy rule for CSS parsing
+      const css = `.dummy { ${styleText} }`;
+      const ast = csstree.parse(css);
+
+      csstree.walk(ast, {
+        visit: 'Declaration',
+        enter: (node) => {
+          const decl = node as csstree.Declaration;
+          const property = decl.property;
+          const value = csstree.generate(decl.value);
+          properties[property] = value;
+        },
+      });
+    } catch (error) {
+      // If parsing fails, log and continue without inline styles
+      console.warn(`Failed to parse inline style: "${styleText}"`, error);
+    }
+
+    return properties;
+  }
 }
 
 /**