@gannochenko/staticstripes 0.0.23 → 0.0.24

package/src/sample-sequences.ts

@@ -36,6 +36,16 @@ export const getSampleSequences = (
           objectFitContainAmbientBrightness: -0.1,
           objectFitContainAmbientSaturation: 0.7,
           objectFitContainPillarboxColor: '#000000',
+          objectFitKenBurns: 'zoom-in' as const,
+          objectFitKenBurnsZoom: 30,
+          objectFitKenBurnsEffectDuration: 0,
+          objectFitKenBurnsEasing: 'linear' as const,
+          objectFitKenBurnsFocalX: 50,
+          objectFitKenBurnsFocalY: 50,
+          objectFitKenBurnsPanStartX: 0,
+          objectFitKenBurnsPanStartY: 0,
+          objectFitKenBurnsPanEndX: 100,
+          objectFitKenBurnsPanEndY: 100,
           chromakey: false,
           chromakeyBlend: 0.1,
           sound: 'on' as const,
@@ -60,6 +70,16 @@ export const getSampleSequences = (
           objectFitContainAmbientBrightness: -0.1,
           objectFitContainAmbientSaturation: 0.7,
           objectFitContainPillarboxColor: '#000000',
+          objectFitKenBurns: 'zoom-in' as const,
+          objectFitKenBurnsZoom: 30,
+          objectFitKenBurnsEffectDuration: 0,
+          objectFitKenBurnsEasing: 'linear' as const,
+          objectFitKenBurnsFocalX: 50,
+          objectFitKenBurnsFocalY: 50,
+          objectFitKenBurnsPanStartX: 0,
+          objectFitKenBurnsPanStartY: 0,
+          objectFitKenBurnsPanEndX: 100,
+          objectFitKenBurnsPanEndY: 100,
           chromakey: false,
           chromakeyBlend: 0.1,
           sound: 'on' as const,
@@ -84,6 +104,16 @@ export const getSampleSequences = (
           objectFitContainAmbientBrightness: -0.1,
           objectFitContainAmbientSaturation: 0.7,
           objectFitContainPillarboxColor: '#000000',
+          objectFitKenBurns: 'zoom-in' as const,
+          objectFitKenBurnsZoom: 30,
+          objectFitKenBurnsEffectDuration: 0,
+          objectFitKenBurnsEasing: 'linear' as const,
+          objectFitKenBurnsFocalX: 50,
+          objectFitKenBurnsFocalY: 50,
+          objectFitKenBurnsPanStartX: 0,
+          objectFitKenBurnsPanStartY: 0,
+          objectFitKenBurnsPanEndX: 100,
+          objectFitKenBurnsPanEndY: 100,
           chromakey: true,
           chromakeyBlend: 0.1,
           chromakeySimilarity: 0.1,
@@ -108,6 +138,16 @@ export const getSampleSequences = (
           objectFitContainAmbientBrightness: -0.1,
           objectFitContainAmbientSaturation: 0.7,
           objectFitContainPillarboxColor: '#000000',
+          objectFitKenBurns: 'zoom-in' as const,
+          objectFitKenBurnsZoom: 30,
+          objectFitKenBurnsEffectDuration: 0,
+          objectFitKenBurnsEasing: 'linear' as const,
+          objectFitKenBurnsFocalX: 50,
+          objectFitKenBurnsFocalY: 50,
+          objectFitKenBurnsPanStartX: 0,
+          objectFitKenBurnsPanStartY: 0,
+          objectFitKenBurnsPanEndX: 100,
+          objectFitKenBurnsPanEndY: 100,
           chromakey: false,
           chromakeyBlend: 0.1,
           sound: 'on' as const,
@@ -132,6 +172,16 @@ export const getSampleSequences = (
           objectFitContainAmbientBrightness: -0.1,
           objectFitContainAmbientSaturation: 0.7,
           objectFitContainPillarboxColor: '#000000',
+          objectFitKenBurns: 'zoom-in' as const,
+          objectFitKenBurnsZoom: 30,
+          objectFitKenBurnsEffectDuration: 0,
+          objectFitKenBurnsEasing: 'linear' as const,
+          objectFitKenBurnsFocalX: 50,
+          objectFitKenBurnsFocalY: 50,
+          objectFitKenBurnsPanStartX: 0,
+          objectFitKenBurnsPanStartY: 0,
+          objectFitKenBurnsPanEndX: 100,
+          objectFitKenBurnsPanEndY: 100,
           chromakey: false,
           chromakeyBlend: 0.1,
           sound: 'on' as const,
@@ -168,6 +218,16 @@ export const getSampleSequences = (
           objectFitContainAmbientBrightness: -0.1,
           objectFitContainAmbientSaturation: 0.7,
           objectFitContainPillarboxColor: '#000000',
+          objectFitKenBurns: 'zoom-in' as const,
+          objectFitKenBurnsZoom: 30,
+          objectFitKenBurnsEffectDuration: 0,
+          objectFitKenBurnsEasing: 'linear' as const,
+          objectFitKenBurnsFocalX: 50,
+          objectFitKenBurnsFocalY: 50,
+          objectFitKenBurnsPanStartX: 0,
+          objectFitKenBurnsPanStartY: 0,
+          objectFitKenBurnsPanEndX: 100,
+          objectFitKenBurnsPanEndY: 100,
           chromakey: false,
           chromakeyBlend: 0.1,
           sound: 'on' as const,
@@ -204,6 +264,16 @@ export const getSampleSequences = (
           objectFitContainAmbientBrightness: -0.1,
           objectFitContainAmbientSaturation: 0.7,
           objectFitContainPillarboxColor: '#000000',
+          objectFitKenBurns: 'zoom-in' as const,
+          objectFitKenBurnsZoom: 30,
+          objectFitKenBurnsEffectDuration: 0,
+          objectFitKenBurnsEasing: 'linear' as const,
+          objectFitKenBurnsFocalX: 50,
+          objectFitKenBurnsFocalY: 50,
+          objectFitKenBurnsPanStartX: 0,
+          objectFitKenBurnsPanStartY: 0,
+          objectFitKenBurnsPanEndX: 100,
+          objectFitKenBurnsPanEndY: 100,
           chromakey: false,
           chromakeyBlend: 0.1,
           sound: 'on' as const,
@@ -218,6 +288,229 @@ export const getSampleSequences = (
   );
   seq3.build();
 
+  // Ken Burns effect test sequence - using intro_image for all effect types
+  const seq4 = new Sequence(
+    buf,
+    {
+      fragments: [
+        // zoom-in effect with custom focal point
+        {
+          id: 'kb_zoom_in',
+          enabled: true,
+          assetName: 'intro_image',
+          duration: 3000,
+          trimLeft: 0,
+          overlayLeft: 0,
+          overlayZIndex: 1,
+          transitionIn: '',
+          transitionInDuration: 0,
+          transitionOut: '',
+          transitionOutDuration: 0,
+          objectFit: 'ken-burns',
+          objectFitContain: 'ambient',
+          objectFitContainAmbientBlurStrength: 25,
+          objectFitContainAmbientBrightness: -0.1,
+          objectFitContainAmbientSaturation: 0.7,
+          objectFitContainPillarboxColor: '#000000',
+          objectFitKenBurns: 'zoom-in' as const,
+          objectFitKenBurnsZoom: 50,
+          objectFitKenBurnsEffectDuration: 1000,
+          objectFitKenBurnsEasing: 'ease-in-out' as const,
+          objectFitKenBurnsFocalX: 30,
+          objectFitKenBurnsFocalY: 40,
+          objectFitKenBurnsPanStartX: 0,
+          objectFitKenBurnsPanStartY: 0,
+          objectFitKenBurnsPanEndX: 100,
+          objectFitKenBurnsPanEndY: 100,
+          chromakey: false,
+          chromakeyBlend: 0.1,
+          sound: 'on' as const,
+          chromakeySimilarity: 0.1,
+          chromakeyColor: '#000000',
+        },
+        // zoom-out effect with center focal point
+        {
+          id: 'kb_zoom_out',
+          enabled: true,
+          assetName: 'intro_image',
+          duration: 3000,
+          trimLeft: 0,
+          overlayLeft: 0,
+          overlayZIndex: 1,
+          transitionIn: '',
+          transitionInDuration: 0,
+          transitionOut: '',
+          transitionOutDuration: 0,
+          objectFit: 'ken-burns',
+          objectFitContain: 'ambient',
+          objectFitContainAmbientBlurStrength: 25,
+          objectFitContainAmbientBrightness: -0.1,
+          objectFitContainAmbientSaturation: 0.7,
+          objectFitContainPillarboxColor: '#000000',
+          objectFitKenBurns: 'zoom-out' as const,
+          objectFitKenBurnsZoom: 40,
+          objectFitKenBurnsEffectDuration: 2000,
+          objectFitKenBurnsEasing: 'ease-in' as const,
+          objectFitKenBurnsFocalX: 50,
+          objectFitKenBurnsFocalY: 50,
+          objectFitKenBurnsPanStartX: 0,
+          objectFitKenBurnsPanStartY: 0,
+          objectFitKenBurnsPanEndX: 100,
+          objectFitKenBurnsPanEndY: 100,
+          chromakey: false,
+          chromakeyBlend: 0.1,
+          sound: 'on' as const,
+          chromakeySimilarity: 0.1,
+          chromakeyColor: '#000000',
+        },
+        // pan-left effect
+        {
+          id: 'kb_pan_left',
+          enabled: true,
+          assetName: 'intro_image',
+          duration: 3000,
+          trimLeft: 0,
+          overlayLeft: 0,
+          overlayZIndex: 1,
+          transitionIn: '',
+          transitionInDuration: 0,
+          transitionOut: '',
+          transitionOutDuration: 0,
+          objectFit: 'ken-burns',
+          objectFitContain: 'ambient',
+          objectFitContainAmbientBlurStrength: 25,
+          objectFitContainAmbientBrightness: -0.1,
+          objectFitContainAmbientSaturation: 0.7,
+          objectFitContainPillarboxColor: '#000000',
+          objectFitKenBurns: 'pan-left' as const,
+          objectFitKenBurnsZoom: 30,
+          objectFitKenBurnsEffectDuration: 1500,
+          objectFitKenBurnsEasing: 'linear' as const,
+          objectFitKenBurnsFocalX: 50,
+          objectFitKenBurnsFocalY: 50,
+          objectFitKenBurnsPanStartX: 0,
+          objectFitKenBurnsPanStartY: 0,
+          objectFitKenBurnsPanEndX: 100,
+          objectFitKenBurnsPanEndY: 100,
+          chromakey: false,
+          chromakeyBlend: 0.1,
+          sound: 'on' as const,
+          chromakeySimilarity: 0.1,
+          chromakeyColor: '#000000',
+        },
+        // pan-right effect
+        {
+          id: 'kb_pan_right',
+          enabled: true,
+          assetName: 'intro_image',
+          duration: 3000,
+          trimLeft: 0,
+          overlayLeft: 0,
+          overlayZIndex: 1,
+          transitionIn: '',
+          transitionInDuration: 0,
+          transitionOut: '',
+          transitionOutDuration: 0,
+          objectFit: 'ken-burns',
+          objectFitContain: 'ambient',
+          objectFitContainAmbientBlurStrength: 25,
+          objectFitContainAmbientBrightness: -0.1,
+          objectFitContainAmbientSaturation: 0.7,
+          objectFitContainPillarboxColor: '#000000',
+          objectFitKenBurns: 'pan-right' as const,
+          objectFitKenBurnsZoom: 50,
+          objectFitKenBurnsEffectDuration: 1500,
+          objectFitKenBurnsEasing: 'ease-out' as const,
+          objectFitKenBurnsFocalX: 50,
+          objectFitKenBurnsFocalY: 50,
+          objectFitKenBurnsPanStartX: 0,
+          objectFitKenBurnsPanStartY: 0,
+          objectFitKenBurnsPanEndX: 100,
+          objectFitKenBurnsPanEndY: 100,
+          chromakey: false,
+          chromakeyBlend: 0.1,
+          sound: 'on' as const,
+          chromakeySimilarity: 0.1,
+          chromakeyColor: '#000000',
+        },
+        // pan-top effect
+        {
+          id: 'kb_pan_top',
+          enabled: true,
+          assetName: 'intro_image',
+          duration: 3000,
+          trimLeft: 0,
+          overlayLeft: 0,
+          overlayZIndex: 1,
+          transitionIn: '',
+          transitionInDuration: 0,
+          transitionOut: '',
+          transitionOutDuration: 0,
+          objectFit: 'ken-burns',
+          objectFitContain: 'ambient',
+          objectFitContainAmbientBlurStrength: 25,
+          objectFitContainAmbientBrightness: -0.1,
+          objectFitContainAmbientSaturation: 0.7,
+          objectFitContainPillarboxColor: '#000000',
+          objectFitKenBurns: 'pan-top' as const,
+          objectFitKenBurnsZoom: 30,
+          objectFitKenBurnsEffectDuration: 1500,
+          objectFitKenBurnsEasing: 'ease-in' as const,
+          objectFitKenBurnsFocalX: 50,
+          objectFitKenBurnsFocalY: 50,
+          objectFitKenBurnsPanStartX: 0,
+          objectFitKenBurnsPanStartY: 0,
+          objectFitKenBurnsPanEndX: 100,
+          objectFitKenBurnsPanEndY: 100,
+          chromakey: false,
+          chromakeyBlend: 0.1,
+          sound: 'on' as const,
+          chromakeySimilarity: 0.1,
+          chromakeyColor: '#000000',
+        },
+        // pan-bottom effect
+        {
+          id: 'kb_pan_bottom',
+          enabled: true,
+          assetName: 'intro_image',
+          duration: 3000,
+          trimLeft: 0,
+          overlayLeft: 0,
+          overlayZIndex: 1,
+          transitionIn: '',
+          transitionInDuration: 0,
+          transitionOut: '',
+          transitionOutDuration: 0,
+          objectFit: 'ken-burns',
+          objectFitContain: 'ambient',
+          objectFitContainAmbientBlurStrength: 25,
+          objectFitContainAmbientBrightness: -0.1,
+          objectFitContainAmbientSaturation: 0.7,
+          objectFitContainPillarboxColor: '#000000',
+          objectFitKenBurns: 'pan-bottom' as const,
+          objectFitKenBurnsZoom: 40,
+          objectFitKenBurnsEffectDuration: 1500,
+          objectFitKenBurnsEasing: 'ease-in-out' as const,
+          objectFitKenBurnsFocalX: 50,
+          objectFitKenBurnsFocalY: 50,
+          objectFitKenBurnsPanStartX: 0,
+          objectFitKenBurnsPanStartY: 0,
+          objectFitKenBurnsPanEndX: 100,
+          objectFitKenBurnsPanEndY: 100,
+          chromakey: false,
+          chromakeyBlend: 0.1,
+          sound: 'on' as const,
+          chromakeySimilarity: 0.1,
+          chromakeyColor: '#000000',
+        },
+      ],
+    },
+    output,
+    project.getAssetManager(),
+    expressionContext,
+  );
+  seq4.build();
+
   seq1.overlayWith(seq2);
   seq1.overlayWith(seq3);
 

package/src/sequence.ts

@@ -122,6 +122,12 @@ export class Sequence {
         }
       }
 
+      // Convert deprecated JPEG pixel format (yuvj420p) to standard yuv420p early
+      // This prevents swscaler warnings from appearing in all subsequent filters
+      if (asset.hasVideo && asset.type === 'image') {
+        currentVideoStream.convertPixelFormat('yuv420p');
+      }
+
       // Apply visual filter early for static images (before padding/cloning)
       // This is more efficient as ffmpeg processes the filter once, then clones the filtered frame
       if (
@@ -135,9 +141,11 @@ export class Sequence {
       if (
         asset.duration === 0 &&
         calculatedDuration > 0 &&
-        asset.type === 'image'
+        asset.type === 'image' &&
+        fragment.objectFit !== 'ken-burns'
       ) {
         // special case for images - extend static image to desired duration
+        // Skip tpad for Ken Burns - zoompan will generate the frames
         currentVideoStream.tPad({
           start: calculatedDuration,
           startMode: 'clone',
@@ -150,7 +158,25 @@ export class Sequence {
         currentVideoStream.fps(this.output.fps);
 
         // fitting the video stream into the output frame
-        if (fragment.objectFit === 'cover') {
+        if (fragment.objectFit === 'ken-burns') {
+          // Ken Burns effect (zoom/pan)
+          currentVideoStream.kenBurns({
+            effect: fragment.objectFitKenBurns,
+            zoom: fragment.objectFitKenBurnsZoom,
+            effectDuration: fragment.objectFitKenBurnsEffectDuration,
+            fragmentDuration: calculatedDuration,
+            easing: fragment.objectFitKenBurnsEasing,
+            width: this.output.resolution.width,
+            height: this.output.resolution.height,
+            fps: this.output.fps,
+            focalX: fragment.objectFitKenBurnsFocalX,
+            focalY: fragment.objectFitKenBurnsFocalY,
+            panStartX: fragment.objectFitKenBurnsPanStartX,
+            panStartY: fragment.objectFitKenBurnsPanStartY,
+            panEndX: fragment.objectFitKenBurnsPanEndX,
+            panEndY: fragment.objectFitKenBurnsPanEndY,
+          });
+        } else if (fragment.objectFit === 'cover') {
           currentVideoStream.fitOutputCover(this.output.resolution);
         } else {
           const options: ObjectFitContainOptions = {};

package/src/stream.ts

@@ -4,6 +4,7 @@ import {
   Millisecond,
   makeNull,
   makeFps,
+  makeFormat,
   makeTranspose,
   makeTrim,
   makeTPad,
@@ -17,6 +18,7 @@ import {
   makeOverlay,
   makeEq,
   makeChromakey,
+  makeKenBurns,
   makeConcat,
   makeFade,
   makeAmix,
@@ -311,6 +313,45 @@ export class Stream {
     return this;
   }
 
+  public kenBurns(parameters: {
+    effect: 'zoom-in' | 'zoom-out' | 'pan-left' | 'pan-right' | 'pan-top' | 'pan-bottom';
+    zoom: number;
+    effectDuration: number;
+    fragmentDuration: number;
+    easing: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';
+    width: number;
+    height: number;
+    fps: number;
+    focalX?: number;
+    focalY?: number;
+    panStartX?: number;
+    panStartY?: number;
+    panEndX?: number;
+    panEndY?: number;
+  }): Stream {
+    // Apply Ken Burns effect
+    const kenBurnsRes = makeKenBurns([this.looseEnd], {
+      effect: parameters.effect,
+      zoom: parameters.zoom,
+      effectDuration: parameters.effectDuration,
+      fragmentDuration: parameters.fragmentDuration,
+      easing: parameters.easing,
+      width: parameters.width,
+      height: parameters.height,
+      fps: parameters.fps,
+      focalX: parameters.focalX,
+      focalY: parameters.focalY,
+      panStartX: parameters.panStartX,
+      panStartY: parameters.panStartY,
+      panEndX: parameters.panEndX,
+      panEndY: parameters.panEndY,
+    });
+    this.looseEnd = kenBurnsRes.outputs[0];
+    this.buf.append(kenBurnsRes);
+
+    return this;
+  }
+
   public fps(value: number): Stream {
     const res = makeFps([this.looseEnd], value);
     this.looseEnd = res.outputs[0];
@@ -320,6 +361,15 @@ export class Stream {
     return this;
   }
 
+  public convertPixelFormat(format: string): Stream {
+    const res = makeFormat([this.looseEnd], format);
+    this.looseEnd = res.outputs[0];
+
+    this.buf.append(res);
+
+    return this;
+  }
+
   public blur(strength: number): Stream {
     const res = makeGblur([this.looseEnd], {
       sigma: strength,

package/src/type.ts

@@ -55,12 +55,22 @@ export type Fragment = {
   transitionInDuration: number; // how long the transition in lasts
   transitionOut: string; // how to transition out of the fragment
   transitionOutDuration: number; // how long the transition out lasts
-  objectFit: 'cover' | 'contain';
+  objectFit: 'cover' | 'contain' | 'ken-burns';
   objectFitContain: 'ambient' | 'pillarbox';
   objectFitContainAmbientBlurStrength: number;
   objectFitContainAmbientBrightness: number;
   objectFitContainAmbientSaturation: number;
   objectFitContainPillarboxColor: string;
+  objectFitKenBurns: 'zoom-in' | 'zoom-out' | 'pan-left' | 'pan-right' | 'pan-top' | 'pan-bottom';
+  objectFitKenBurnsZoom: number; // zoom percentage (e.g., 30 = 30% zoom, applies to all effects)
+  objectFitKenBurnsEffectDuration: number; // duration of the ken burns effect in milliseconds
+  objectFitKenBurnsEasing: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';
+  objectFitKenBurnsFocalX: number; // focal point X in percent (0-100, for zoom effects)
+  objectFitKenBurnsFocalY: number; // focal point Y in percent (0-100, for zoom effects)
+  objectFitKenBurnsPanStartX: number; // pan start position X in percent (0-100, for horizontal pan effects)
+  objectFitKenBurnsPanStartY: number; // pan start position Y in percent (0-100, for vertical pan effects)
+  objectFitKenBurnsPanEndX: number; // pan end position X in percent (0-100, for horizontal pan effects)
+  objectFitKenBurnsPanEndY: number; // pan end position Y in percent (0-100, for vertical pan effects)
   chromakey: boolean;
   chromakeyBlend: number;
   chromakeySimilarity: number;