@gannochenko/staticstripes 0.0.1

package/src/index.ts

@@ -0,0 +1,9 @@
+// This file is kept for backward compatibility
+// For CLI usage, use the 'staticstripes' command instead
+// Example: npx staticstripes generate -p ./examples/demo
+
+export { HTMLParser } from './html-parser.js';
+export { HTMLProjectParser } from './html-project-parser.js';
+export { Project } from './project.js';
+export { makeFFmpegCommand, runFFMpeg } from './ffmpeg.js';
+export { getAssetDuration } from './ffprobe.js';

package/src/label-generator.ts

@@ -0,0 +1,74 @@
+/**
+ * LabelGenerator - Generates unique labels for FFmpeg filter graph streams
+ * Maintains a ledger of used labels to ensure uniqueness
+ */
+export class LabelGenerator {
+  private usedLabels: Set<string> = new Set();
+
+  /**
+   * Generates a unique random label
+   * Format: [a-z][0-999]
+   * If collision occurs, regenerates until unique
+   */
+  generate(): string {
+    let label: string;
+    let attempts = 0;
+    const maxAttempts = 10000; // Safety limit
+
+    do {
+      label = this.generateRandom();
+      attempts++;
+
+      if (attempts >= maxAttempts) {
+        // Fallback: use timestamp-based label to guarantee uniqueness
+        label = `t${Date.now()}${Math.random().toString(36).substring(2, 5)}`;
+        break;
+      }
+    } while (this.usedLabels.has(label));
+
+    this.usedLabels.add(label);
+    return label;
+  }
+
+  /**
+   * Generates a random label (may not be unique)
+   */
+  private generateRandom(): string {
+    const letter = String.fromCharCode(97 + Math.floor(Math.random() * 26)); // a-z
+    const num = Math.floor(Math.random() * 1000);
+    return `${letter}${num}`;
+  }
+
+  /**
+   * Marks a label as used (for external labels like '0:v', 'outv')
+   */
+  markUsed(label: string): void {
+    this.usedLabels.add(label);
+  }
+
+  /**
+   * Checks if a label is already used
+   */
+  isUsed(label: string): boolean {
+    return this.usedLabels.has(label);
+  }
+
+  /**
+   * Clears all used labels (for testing or reset)
+   */
+  clear(): void {
+    this.usedLabels.clear();
+  }
+
+  /**
+   * Returns the count of used labels
+   */
+  getUsedCount(): number {
+    return this.usedLabels.size;
+  }
+}
+
+const gen = new LabelGenerator();
+
+// fucking singleton
+export const getLabel = () => gen.generate();

package/src/project.ts

@@ -0,0 +1,180 @@
+import { Asset, Output, SequenceDefinition } from './type';
+import { Label } from './ffmpeg';
+import { AssetManager } from './asset-manager';
+import { Sequence } from './sequence';
+import { FilterBuffer } from './stream';
+import { ExpressionContext, FragmentData } from './expression-parser';
+import { renderContainers } from './container-renderer';
+import { dirname } from 'path';
+
+export class Project {
+  private assetManager: AssetManager;
+  private expressionContext: ExpressionContext;
+
+  constructor(
+    private sequencesDefinitions: SequenceDefinition[],
+    assets: Asset[],
+    private outputs: Map<string, Output>,
+    private cssText: string,
+    private projectPath: string,
+  ) {
+    this.assetManager = new AssetManager(assets);
+    this.expressionContext = {
+      fragments: new Map<string, FragmentData>(),
+    };
+  }
+
+  public async build(outputName: string): Promise<FilterBuffer> {
+    const output = this.getOutput(outputName);
+    if (!output) {
+      throw new Error(`Output "${outputName}" not found`);
+    }
+
+    let buf = new FilterBuffer();
+    let mainSequence: Sequence | null = null;
+
+    this.sequencesDefinitions.forEach((sequenceDefinition) => {
+      const seq = new Sequence(
+        buf,
+        sequenceDefinition,
+        output,
+        this.getAssetManager(),
+        this.expressionContext,
+      );
+      if (seq.isEmpty()) {
+        return;
+      }
+
+      seq.build();
+
+      if (!mainSequence) {
+        mainSequence = seq;
+      } else {
+        mainSequence.overlayWith(seq);
+      }
+    });
+
+    if (mainSequence) {
+      const sequence: Sequence = mainSequence;
+      sequence.getVideoStream().endTo({
+        tag: 'outv',
+        isAudio: false,
+      });
+      sequence.getAudioStream().endTo({
+        tag: 'outa',
+        isAudio: true,
+      });
+    }
+
+    return buf;
+  }
+
+  public printStats() {
+    console.log('\n=== Project stats ===\n');
+    console.log('== Assets ==\n');
+    this.assetManager.getAssetIndexMap().forEach((_index, assetName) => {
+      const asset = this.assetManager.getAssetByName(assetName)!;
+
+      console.log(
+        `Asset "${asset.name}" (${asset.type}) dimensions: w=${asset.width}, h=${asset.height}, rotation: ${asset.rotation}°, duration: ${asset.duration}, hasVideo: ${asset.hasVideo}, hasAudio: ${asset.hasAudio}`,
+      );
+    });
+  }
+
+  public getAssetManager(): AssetManager {
+    return this.assetManager;
+  }
+
+  public getOutput(outputName: string): Output | undefined {
+    return this.outputs.get(outputName);
+  }
+
+  public getOutputs(): Map<string, Output> {
+    return this.outputs;
+  }
+
+  public getCssText(): string {
+    return this.cssText;
+  }
+
+  public getSequenceDefinitions(): SequenceDefinition[] {
+    return this.sequencesDefinitions;
+  }
+
+  // Delegation methods for convenience
+  public getAssetIndexMap(): Map<string, number> {
+    return this.assetManager.getAssetIndexMap();
+  }
+
+  public getAssetByName(name: string): Asset | undefined {
+    return this.assetManager.getAssetByName(name);
+  }
+
+  public getVideoInputLabelByAssetName(name: string): Label {
+    return this.assetManager.getVideoInputLabelByAssetName(name);
+  }
+
+  public getAudioInputLabelByAssetName(name: string): Label {
+    return this.assetManager.getAudioInputLabelByAssetName(name);
+  }
+
+  /**
+   * Renders all containers and creates virtual assets for them
+   */
+  public async renderContainers(outputName: string): Promise<void> {
+    const output = this.getOutput(outputName);
+    if (!output) {
+      throw new Error(`Output "${outputName}" not found`);
+    }
+
+    // Collect all fragments with containers
+    const fragmentsWithContainers = this.sequencesDefinitions.flatMap((seq) =>
+      seq.fragments.filter((frag) => frag.container),
+    );
+
+    if (fragmentsWithContainers.length === 0) {
+      return;
+    }
+
+    console.log('\n=== Rendering Containers ===\n');
+
+    const containers = fragmentsWithContainers.map((frag) => frag.container!);
+    const projectDir = dirname(this.projectPath);
+
+    const results = await renderContainers(
+      containers,
+      this.cssText,
+      output.resolution.width,
+      output.resolution.height,
+      projectDir,
+    );
+
+    // Create virtual assets and update fragment assetNames
+    for (const result of results) {
+      const virtualAssetName = result.container.id;
+
+      // Create virtual asset
+      const virtualAsset: Asset = {
+        name: virtualAssetName,
+        path: result.screenshotPath,
+        type: 'image',
+        duration: 0,
+        width: output.resolution.width,
+        height: output.resolution.height,
+        rotation: 0,
+        hasVideo: true,
+        hasAudio: false,
+      };
+
+      this.assetManager.addVirtualAsset(virtualAsset);
+
+      // Update fragment assetName
+      const fragment = fragmentsWithContainers.find(
+        (frag) => frag.container?.id === result.container.id,
+      );
+      if (fragment) {
+        fragment.assetName = virtualAssetName;
+      }
+    }
+  }
+}

package/src/sample-sequences.ts

@@ -0,0 +1,225 @@
+import { ExpressionContext, parseExpression } from './expression-parser';
+import { Project } from './project';
+import { Sequence } from './sequence';
+import { FilterBuffer } from './stream';
+
+export const getSampleSequences = (
+  project: Project,
+  buf: FilterBuffer,
+  expressionContext: ExpressionContext,
+  outputName: string,
+) => {
+  const output = project.getOutput(outputName);
+  if (!output) {
+    throw new Error(`Output "${outputName}" not found`);
+  }
+
+  const seq1 = new Sequence(
+    buf,
+    {
+      fragments: [
+        {
+          id: 'f_01',
+          enabled: true,
+          assetName: 'intro_image',
+          duration: 4000, // asset duration is 0
+          trimLeft: 0,
+          overlayLeft: 0,
+          overlayZIndex: 1,
+          transitionIn: '',
+          transitionInDuration: 0,
+          transitionOut: 'fade',
+          transitionOutDuration: 500,
+          objectFit: 'cover',
+          objectFitContain: 'ambient',
+          objectFitContainAmbientBlurStrength: 25,
+          objectFitContainAmbientBrightness: -0.1,
+          objectFitContainAmbientSaturation: 0.7,
+          objectFitContainPillarboxColor: '#000000',
+          chromakey: false,
+          chromakeyBlend: 0.1,
+          chromakeySimilarity: 0.1,
+          chromakeyColor: '#000000',
+        },
+        {
+          id: 'f_02',
+          enabled: true,
+          assetName: 'clip_01',
+          duration: 11330 - 3000, // asset duration is 11330
+          trimLeft: 3000,
+          overlayLeft: 0,
+          overlayZIndex: 1,
+          transitionIn: 'fade',
+          transitionInDuration: 1000,
+          transitionOut: '',
+          transitionOutDuration: 0,
+          objectFit: 'contain',
+          objectFitContain: 'ambient',
+          objectFitContainAmbientBlurStrength: 25,
+          objectFitContainAmbientBrightness: -0.1,
+          objectFitContainAmbientSaturation: 0.7,
+          objectFitContainPillarboxColor: '#000000',
+          chromakey: false,
+          chromakeyBlend: 0.1,
+          chromakeySimilarity: 0.1,
+          chromakeyColor: '#000000',
+        },
+        {
+          id: 'f_03',
+          enabled: true,
+          assetName: 'glitch',
+          duration: 500, // asset duration is 10000
+          trimLeft: 0,
+          overlayLeft: -250,
+          overlayZIndex: 1,
+          transitionIn: '',
+          transitionInDuration: 0,
+          transitionOut: '',
+          transitionOutDuration: 0,
+          objectFit: 'cover',
+          objectFitContain: 'pillarbox',
+          objectFitContainAmbientBlurStrength: 25,
+          objectFitContainAmbientBrightness: -0.1,
+          objectFitContainAmbientSaturation: 0.7,
+          objectFitContainPillarboxColor: '#000000',
+          chromakey: true,
+          chromakeyBlend: 0.1,
+          chromakeySimilarity: 0.1,
+          chromakeyColor: '#000000',
+        },
+        {
+          id: 'f_04',
+          enabled: true,
+          assetName: 'clip_02',
+          duration: 3000, // asset duration is 90245
+          trimLeft: 0,
+          overlayLeft: -250,
+          overlayZIndex: -1,
+          transitionIn: '',
+          transitionInDuration: 0,
+          transitionOut: 'fade',
+          transitionOutDuration: 1000,
+          objectFit: 'contain',
+          objectFitContain: 'ambient',
+          objectFitContainAmbientBlurStrength: 25,
+          objectFitContainAmbientBrightness: -0.1,
+          objectFitContainAmbientSaturation: 0.7,
+          objectFitContainPillarboxColor: '#000000',
+          chromakey: false,
+          chromakeyBlend: 0.1,
+          chromakeySimilarity: 0.1,
+          chromakeyColor: '#000000',
+        },
+        {
+          id: 'ending_screen',
+          enabled: true,
+          assetName: 'intro_image',
+          duration: 4000, // asset duration is 0
+          trimLeft: 0,
+          overlayLeft: 0,
+          overlayZIndex: 1,
+          transitionIn: '',
+          transitionInDuration: 0,
+          transitionOut: 'fade',
+          transitionOutDuration: 500,
+          objectFit: 'cover',
+          objectFitContain: 'ambient',
+          objectFitContainAmbientBlurStrength: 25,
+          objectFitContainAmbientBrightness: -0.1,
+          objectFitContainAmbientSaturation: 0.7,
+          objectFitContainPillarboxColor: '#000000',
+          chromakey: false,
+          chromakeyBlend: 0.1,
+          chromakeySimilarity: 0.1,
+          chromakeyColor: '#000000',
+        },
+      ],
+    },
+    output,
+    project.getAssetManager(),
+    expressionContext,
+  );
+  seq1.build();
+
+  const seq2 = new Sequence(
+    buf,
+    {
+      fragments: [
+        {
+          id: 'f_06',
+          enabled: true,
+          assetName: 'guitar_music',
+          duration: 4000, // asset duration is 224653
+          trimLeft: 0,
+          overlayLeft: 0,
+          overlayZIndex: 1,
+          transitionIn: '',
+          transitionInDuration: 0,
+          transitionOut: 'fade',
+          transitionOutDuration: 500,
+          objectFit: 'cover',
+          objectFitContain: 'ambient',
+          objectFitContainAmbientBlurStrength: 25,
+          objectFitContainAmbientBrightness: -0.1,
+          objectFitContainAmbientSaturation: 0.7,
+          objectFitContainPillarboxColor: '#000000',
+          chromakey: false,
+          chromakeyBlend: 0.1,
+          chromakeySimilarity: 0.1,
+          chromakeyColor: '#000000',
+        },
+      ],
+    },
+    output,
+    project.getAssetManager(),
+    expressionContext,
+  );
+  seq2.build();
+
+  const seq3 = new Sequence(
+    buf,
+    {
+      fragments: [
+        {
+          id: 'end_music',
+          enabled: true,
+          assetName: 'guitar_music',
+          duration: 4000, // asset duration is 224653
+          trimLeft: 0,
+          overlayLeft: parseExpression('calc(#ending_screen.time.start)'),
+          overlayZIndex: 1,
+          transitionIn: '',
+          transitionInDuration: 0,
+          transitionOut: 'fade',
+          transitionOutDuration: 500,
+          objectFit: 'cover',
+          objectFitContain: 'ambient',
+          objectFitContainAmbientBlurStrength: 25,
+          objectFitContainAmbientBrightness: -0.1,
+          objectFitContainAmbientSaturation: 0.7,
+          objectFitContainPillarboxColor: '#000000',
+          chromakey: false,
+          chromakeyBlend: 0.1,
+          chromakeySimilarity: 0.1,
+          chromakeyColor: '#000000',
+        },
+      ],
+    },
+    output,
+    project.getAssetManager(),
+    expressionContext,
+  );
+  seq3.build();
+
+  seq1.overlayWith(seq2);
+  seq1.overlayWith(seq3);
+
+  seq1.getVideoStream().endTo({
+    tag: 'outv',
+    isAudio: false,
+  });
+  seq1.getAudioStream().endTo({
+    tag: 'outa',
+    isAudio: true,
+  });
+};

package/src/sample-streams.ts

@@ -0,0 +1,142 @@
+import { Project } from './project';
+import {
+  ChromakeyBlend,
+  ChromakeySimilarity,
+  FilterBuffer,
+  makeStream,
+} from './stream';
+
+// @ts-expect-error unused
+const addSampleStreams = (project: Project, buf: FilterBuffer) => {
+  const glitchStream = makeStream(
+    project.getAssetManager().getVideoInputLabelByAssetName('glitch'),
+    buf,
+  )
+    .trim(0, 2)
+    .fitOutputContain({ width: 1920, height: 1080 })
+    .fps(30)
+    .chromakey({
+      blend: ChromakeyBlend.Smooth,
+      similarity: ChromakeySimilarity.Strict,
+      color: '#000000',
+    });
+
+  const clip02VideoStream = makeStream(
+    project.getAssetManager().getVideoInputLabelByAssetName('clip_02'),
+    buf,
+  )
+    .trim(0, 5)
+    .fitOutputContain(
+      {
+        width: 1920,
+        height: 1080,
+      },
+      {
+        ambient: {
+          blurStrength: 25,
+          brightness: -0.1,
+          saturation: 0.7,
+        },
+      },
+    )
+    .fps(30);
+
+  const introImageStream = makeStream(
+    project.getAssetManager().getVideoInputLabelByAssetName('intro_image'),
+    buf,
+  )
+    .fps(30)
+    .fitOutputCover({ width: 1920, height: 1080 })
+    .tPad({
+      start: 3,
+      startMode: 'clone',
+    });
+
+  makeStream(
+    project.getAssetManager().getVideoInputLabelByAssetName('clip_01'),
+    buf,
+  )
+    .trim(0, 5) // length = 5
+    .fitOutputContain(
+      {
+        width: 1920,
+        height: 1080,
+      },
+      {
+        ambient: {
+          blurStrength: 25,
+          brightness: -0.1,
+          saturation: 0.7,
+        },
+        // pillarbox: {
+        //   color: '#ff0000',
+        // },
+      },
+    )
+    .fps(30)
+    .fade({
+      fades: [
+        {
+          type: 'in',
+          startTime: 0,
+          duration: 1,
+        },
+      ],
+    })
+    .overlayStream(glitchStream, {
+      // length = 5
+      offset: {
+        streamDuration: 5, // value from trim()
+        otherStreamDuration: 2, // value from trim() of glitch
+        otherStreamOffsetLeft: 4, // start of the glitch
+      },
+    })
+    .overlayStream(clip02VideoStream, {
+      // length = 11 ?
+      flipLayers: true,
+      offset: {
+        streamDuration: 5, // value from trim()
+        otherStreamDuration: 6, // 5 seconds of clip01, 1 second of glitch
+        otherStreamOffsetLeft: 5, // start of the of clip01stream
+      },
+    })
+    .fade({
+      fades: [
+        {
+          type: 'out',
+          startTime: 9,
+          duration: 1,
+        },
+      ],
+    })
+    .concatStream(introImageStream)
+    .endTo({
+      tag: 'outv',
+      isAudio: false,
+    });
+
+  const clip02AudioStream = makeStream(
+    project.getAssetManager().getAudioInputLabelByAssetName('clip_02'),
+    buf,
+  ).trim(0, 5);
+
+  makeStream(
+    project.getAssetManager().getAudioInputLabelByAssetName('clip_01'),
+    buf,
+  )
+    .trim(0, 5)
+    .fade({
+      fades: [
+        {
+          type: 'in',
+          startTime: 0,
+          duration: 1,
+        },
+      ],
+    })
+    .concatStream(clip02AudioStream)
+    .endTo({
+      tag: 'outa',
+      isAudio: true,
+    });
+};