@gannochenko/staticstripes 0.0.18 → 0.0.20

package/src/html-project-parser.ts

@@ -7,6 +7,7 @@ import {
   SequenceDefinition,
   Fragment,
   Container,
+  App,
   FFmpegOption,
   Upload,
   AIProvider,
@@ -120,6 +121,7 @@ export class HTMLProjectParser {
       aiProviders,
       title,
       date,
+      globalTags,
       cssText,
       this.projectPath,
     );
@@ -1609,18 +1611,23 @@ export class HTMLProjectParser {
     // 3. Check enabled flag from display property
     const enabled = this.parseEnabled(styles['display']);
 
-    // 4. Extract container if present (first one only)
+    // 4. Extract container or app if present (first one only, mutually exclusive)
     const container = this.extractFragmentContainer(element);
+    const app = container ? undefined : this.extractFragmentApp(element);
 
     // 5. Parse trimLeft from -trim-start property
     const trimLeft = this.parseTrimStart(styles['-trim-start']);
 
+    // 5b. Parse trimRight from -trim-end property
+    const trimRight = this.parseTrimEnd(styles['-trim-end']);
+
     // 6. Parse duration from -duration property
     const duration = this.parseDurationProperty(
       styles['-duration'],
       assetName,
       assets,
       trimLeft,
+      trimRight,
     );
 
     // 7. Parse -offset-start for overlayLeft (can be number or expression)
@@ -1687,6 +1694,7 @@ export class HTMLProjectParser {
       chromakeyColor: chromakeyData.chromakeyColor,
       ...(visualFilter && { visualFilter }), // Add visualFilter if present
       ...(container && { container }), // Add container if present
+      ...(app && { app }), // Add app if present
       ...(timecodeLabel && { timecodeLabel }), // Add timecode label if present
     };
   }
@@ -1741,6 +1749,49 @@ export class HTMLProjectParser {
     return undefined;
   }
 
+  /**
+   * Extracts the first <app> child from a fragment element.
+   * The src attribute points to the app's dst directory (relative to project).
+   * The data-parameters attribute is parsed as JSON and merged into query params.
+   */
+  private extractFragmentApp(element: Element): App | undefined {
+    if (!('children' in element) || !element.children) {
+      return undefined;
+    }
+
+    for (const child of element.children) {
+      if (child.type === 'tag' && child.name === 'app') {
+        const appElement = child as Element;
+
+        const id =
+          appElement.attribs?.id ||
+          `app_${Math.random().toString(36).substring(2, 11)}`;
+
+        const src = appElement.attribs?.src ?? '';
+
+        let parameters: Record<string, string> = {};
+        const dataParameters = appElement.attribs?.['data-parameters'];
+        if (dataParameters) {
+          try {
+            const parsed = JSON.parse(dataParameters);
+            // Convert all values to strings for query parameters
+            for (const [key, value] of Object.entries(parsed)) {
+              parameters[key] = String(value);
+            }
+          } catch {
+            console.warn(
+              `Warning: invalid JSON in data-parameters for app "${id}": ${dataParameters}`,
+            );
+          }
+        }
+
+        return { id, src, parameters };
+      }
+    }
+
+    return undefined;
+  }
+
   /**
    * Serializes an element's children to HTML string
    */
@@ -1844,6 +1895,20 @@ export class HTMLProjectParser {
     return Math.max(0, value);
   }
 
+  /**
+   * Parses -trim-end property into trimRight
+   * Cannot be negative
+   */
+  private parseTrimEnd(trimEnd: string | undefined): number {
+    if (!trimEnd) {
+      return 0;
+    }
+
+    const value = this.parseMilliseconds(trimEnd);
+    // Ensure non-negative as per spec
+    return Math.max(0, value);
+  }
+
   /**
    * Parses the -duration CSS property
    * Can be: "auto", percentage (e.g. "100%", "50%"), or time value (e.g. "5000ms", "5s")
@@ -1853,14 +1918,15 @@ export class HTMLProjectParser {
     assetName: string,
     assets: Map<string, Asset>,
     trimLeft: number,
+    trimRight: number,
   ): number {
     if (!duration || duration.trim() === 'auto') {
-      // Auto: use asset duration minus trim-start
+      // Auto: use asset duration minus trim-start and trim-end
       const asset = assets.get(assetName);
       if (!asset) {
         return 0;
       }
-      return Math.max(0, asset.duration - trimLeft);
+      return Math.max(0, asset.duration - trimLeft - trimRight);
     }
 
     // Handle percentage (e.g., "100%", "50%")

package/src/project.ts

@@ -12,6 +12,7 @@ import { Sequence } from './sequence';
 import { FilterBuffer } from './stream';
 import { ExpressionContext, FragmentData } from './expression-parser';
 import { renderContainers } from './container-renderer';
+import { renderApps } from './app-renderer';
 import { dirname } from 'path';
 
 export class Project {
@@ -27,6 +28,7 @@ export class Project {
     private aiProviders: Map<string, AIProvider>,
     private title: string,
     private date: string | undefined,
+    private tags: string[],
     private cssText: string,
     private projectPath: string,
   ) {
@@ -146,6 +148,10 @@ export class Project {
     return this.date;
   }
 
+  public getTags(): string[] {
+    return this.tags;
+  }
+
   public getCssText(): string {
     return this.cssText;
   }
@@ -212,6 +218,72 @@ export class Project {
     return this.assetManager.getAudioInputLabelByAssetName(name);
   }
 
+  /**
+   * Renders all apps and creates virtual assets for them.
+   * Apps must dispatch "sts-render-complete" on document when ready,
+   * or rendering will fail after a 5-second timeout.
+   */
+  public async renderApps(
+    outputName: string,
+    activeCacheKeys?: Set<string>,
+  ): Promise<void> {
+    const output = this.getOutput(outputName);
+    if (!output) {
+      throw new Error(`Output "${outputName}" not found`);
+    }
+
+    const fragmentsWithApps = this.sequencesDefinitions.flatMap((seq) =>
+      seq.fragments.filter((frag) => frag.app),
+    );
+
+    if (fragmentsWithApps.length === 0) {
+      return;
+    }
+
+    console.log('\n=== Rendering Apps ===\n');
+
+    const apps = fragmentsWithApps.map((frag) => frag.app!);
+    const projectDir = dirname(this.projectPath);
+
+    const results = await renderApps(
+      apps,
+      output.resolution.width,
+      output.resolution.height,
+      projectDir,
+      outputName,
+      this.title,
+      this.date,
+      this.tags,
+      activeCacheKeys,
+    );
+
+    // Create virtual assets and update fragment assetNames
+    for (const result of results) {
+      const virtualAssetName = result.app.id;
+
+      const virtualAsset = {
+        name: virtualAssetName,
+        path: result.screenshotPath,
+        type: 'image' as const,
+        duration: 0,
+        width: output.resolution.width,
+        height: output.resolution.height,
+        rotation: 0,
+        hasVideo: true,
+        hasAudio: false,
+      };
+
+      this.assetManager.addVirtualAsset(virtualAsset);
+
+      const fragment = fragmentsWithApps.find(
+        (frag) => frag.app?.id === result.app.id,
+      );
+      if (fragment) {
+        fragment.assetName = virtualAssetName;
+      }
+    }
+  }
+
   /**
    * Renders all containers and creates virtual assets for them
    */

package/src/type.ts

@@ -13,6 +13,12 @@ export type Container = {
   htmlContent: string;
 };
 
+export type App = {
+  id: string;
+  src: string; // path to the app's dst directory (relative to project)
+  parameters: Record<string, string>; // extra params from data-parameters
+};
+
 export type ParsedHtml = {
   ast: Document;
   css: Map<Element, CSSProperties>;
@@ -42,7 +48,7 @@ export type Fragment = {
   enabled: boolean;
   assetName: string;
   duration: number; // calculated, in seconds (can come from CSS or from the asset's duration)
-  trimLeft: number; // in seconds
+  trimLeft: number; // in seconds (skip first N seconds of asset via -trim-start)
   overlayLeft: number | CompiledExpression; // amount of seconds to overlay with the previous fragment (normalized from margin-left + prev margin-right)
   overlayZIndex: number;
   transitionIn: string; // how to transition into the fragment
@@ -61,6 +67,7 @@ export type Fragment = {
   chromakeyColor: string;
   visualFilter?: string; // Optional visual filter (e.g., 'instagram-nashville')
   container?: Container; // Optional container attached to this fragment
+  app?: App; // Optional app attached to this fragment
   timecodeLabel?: string; // Optional label for timecode (from data-timecode attribute)
 };