@gannochenko/staticstripes 0.0.22 → 0.0.23

package/src/cli/instagram/instagram-upload-strategy.ts

@@ -35,7 +35,7 @@ export class InstagramUploadStrategy implements UploadStrategy {
       );
     }
 
-    const { caption, shareToFeed, thumbOffset, coverUrl, videoUrl } =
+    const { caption, shareToFeed, thumbOffset, coverUrl, videoUrl, locationId } =
       upload.instagram;
 
     // Load credentials from local .auth/<upload-name>.json or global ~/.staticstripes/auth/<upload-name>.json
@@ -120,6 +120,15 @@ export class InstagramUploadStrategy implements UploadStrategy {
     }
     console.log('');
 
+    // Resolve location ID if search query is provided
+    let resolvedLocationId = locationId;
+    if (locationId && locationId.startsWith('search:')) {
+      const searchQuery = locationId.substring(7); // Remove "search:" prefix
+      console.log(`📍 Searching for location: ${searchQuery}...`);
+      resolvedLocationId = await this.searchLocation(credentials, searchQuery);
+      console.log(`✅ Found location ID: ${resolvedLocationId}\n`);
+    }
+
     // Step 1: Create media container
     console.log('📦 Step 1: Creating media container...');
     const containerId = await this.createMediaContainer(
@@ -129,6 +138,7 @@ export class InstagramUploadStrategy implements UploadStrategy {
       shareToFeed,
       thumbOffset,
       coverUrl,
+      resolvedLocationId,
     );
 
     console.log(`✅ Container created: ${containerId}`);
@@ -150,6 +160,51 @@ export class InstagramUploadStrategy implements UploadStrategy {
     console.log(`📺 View at: ${permalink}\n`);
   }
 
+  /**
+   * Searches for a location by city and country name
+   * Returns the location ID from Instagram's location database
+   */
+  private async searchLocation(
+    credentials: InstagramCredentials,
+    searchQuery: string,
+  ): Promise<string> {
+    const params = new URLSearchParams({
+      q: searchQuery,
+      fields: 'id,name',
+      access_token: credentials.accessToken,
+    });
+
+    const url = `${this.GRAPH_API_BASE}/${this.API_VERSION}/${credentials.igUserId}/locations?${params.toString()}`;
+
+    try {
+      const data = await makeRequest<{
+        data?: Array<{ id: string; name: string }>;
+      }>({
+        url,
+        method: 'GET',
+      });
+
+      if (!data.data || data.data.length === 0) {
+        throw new Error(
+          `No locations found for "${searchQuery}"\n\n` +
+            `Tip: Try different variations of the city/country name\n` +
+            `Example: "Paris, France" or "New York, USA"`,
+        );
+      }
+
+      // Return the first (most relevant) result
+      const location = data.data[0];
+      console.log(`   Found: ${location.name} (ID: ${location.id})`);
+      return location.id;
+    } catch (error) {
+      throw new Error(
+        `❌ Error: Failed to search for location "${searchQuery}"\n` +
+          `${error instanceof Error ? error.message : String(error)}\n\n` +
+          `Note: Location search requires a valid access token and may not be available in all regions.`,
+      );
+    }
+  }
+
   /**
    * Creates a media container for the Reel
    */
@@ -160,6 +215,7 @@ export class InstagramUploadStrategy implements UploadStrategy {
     shareToFeed: boolean,
     thumbOffset?: number,
     coverUrl?: string,
+    locationId?: string,
   ): Promise<string> {
     const params = new URLSearchParams({
       media_type: 'REELS',
@@ -180,6 +236,10 @@ export class InstagramUploadStrategy implements UploadStrategy {
       params.append('cover_url', coverUrl);
     }
 
+    if (locationId) {
+      params.append('location_id', locationId);
+    }
+
     const url = `${this.GRAPH_API_BASE}/${this.API_VERSION}/${credentials.igUserId}/media`;
 
     try {

package/src/cli.ts

@@ -8,6 +8,7 @@ import { registerBootstrapCommand } from './cli/commands/bootstrap.js';
 import { registerAddAssetsCommand } from './cli/commands/add-assets.js';
 import { registerUploadCommand } from './cli/commands/upload.js';
 import { registerAuthCommand } from './cli/commands/auth.js';
+import { registerFiltersCommand } from './cli/commands/filters.js';
 
 // Read version from package.json
 // In built code, this file is at dist/cli.js, package.json is at ../package.json
@@ -65,5 +66,6 @@ registerBootstrapCommand(program, handleError);
 registerAddAssetsCommand(program, handleError);
 registerUploadCommand(program, handleError);
 registerAuthCommand(program, handleError);
+registerFiltersCommand(program);
 
 program.parse(process.argv);

package/src/html-project-parser.ts

@@ -1033,6 +1033,7 @@ export class HTMLProjectParser {
     let thumbOffset: number | undefined;
     let coverUrl: string | undefined;
     let videoUrl: string | undefined;
+    let locationId: string | undefined;
     const localTags: string[] = [];
 
     if ('children' in element && element.children) {
@@ -1106,6 +1107,21 @@ export class HTMLProjectParser {
               }
               break;
             }
+            case 'location': {
+              const id = childAttrs.get('id');
+              const city = childAttrs.get('city');
+              const country = childAttrs.get('country');
+
+              if (id) {
+                // Explicit location ID provided
+                locationId = id;
+              } else if (city && country) {
+                // Store search query for later resolution
+                // Format: "search:City, Country"
+                locationId = `search:${city}, ${country}`;
+              }
+              break;
+            }
           }
         }
       }
@@ -1131,6 +1147,7 @@ export class HTMLProjectParser {
         thumbOffset,
         coverUrl,
         videoUrl,
+        locationId,
       },
     };
   }
@@ -1615,26 +1632,44 @@ export class HTMLProjectParser {
     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)
-    const overlayLeft = this.parseOffsetStart(styles['-offset-start']);
-
-    // 8. Parse -offset-end for overlayRight (temporary, will be normalized)
-    const overlayRight = this.parseOffsetEnd(styles['-offset-end']);
+    // 4b. Parse data-timing attribute (short syntax) - takes precedence over CSS
+    const dataTiming = this.parseDataTiming(attrs.get('data-timing'));
+
+    // 5. Parse trimLeft from data-timing or -trim-start property
+    const trimLeft =
+      dataTiming.trimStart !== undefined
+        ? dataTiming.trimStart
+        : this.parseTrimStart(styles['-trim-start']);
+
+    // 5b. Parse trimRight from data-timing or -trim-end property
+    const trimRight =
+      dataTiming.trimEnd !== undefined
+        ? dataTiming.trimEnd
+        : this.parseTrimEnd(styles['-trim-end']);
+
+    // 6. Parse duration from data-timing or -duration property
+    const duration =
+      dataTiming.duration !== undefined
+        ? dataTiming.duration
+        : this.parseDurationProperty(
+            styles['-duration'],
+            assetName,
+            assets,
+            trimLeft,
+            trimRight,
+          );
+
+    // 7. Parse overlayLeft from data-timing or -offset-start property
+    const overlayLeft =
+      dataTiming.offsetStart !== undefined
+        ? dataTiming.offsetStart
+        : this.parseOffsetStart(styles['-offset-start']);
+
+    // 8. Parse overlayRight from data-timing or -offset-end property
+    const overlayRight =
+      dataTiming.offsetEnd !== undefined
+        ? dataTiming.offsetEnd
+        : this.parseOffsetEnd(styles['-offset-end']);
 
     // 9. Parse -overlay-start-z-index for overlayZIndex
     const overlayZIndex = this.parseZIndex(styles['-overlay-start-z-index']);
@@ -1661,7 +1696,10 @@ export class HTMLProjectParser {
     // 15. Parse filter (for visual filters)
     const visualFilter = this.parseVisualFilterProperty(styles['filter']);
 
-    // 16. Extract timecode label from data-timecode attribute
+    // 16. Parse sound property (on/off)
+    const sound = this.parseSoundProperty(styles['-sound']);
+
+    // 17. Extract timecode label from data-timecode attribute
     const timecodeLabel = attrs.get('data-timecode') || undefined;
 
     return {
@@ -1692,6 +1730,7 @@ export class HTMLProjectParser {
       chromakeyBlend: chromakeyData.chromakeyBlend,
       chromakeySimilarity: chromakeyData.chromakeySimilarity,
       chromakeyColor: chromakeyData.chromakeyColor,
+      sound,
       ...(visualFilter && { visualFilter }), // Add visualFilter if present
       ...(container && { container }), // Add container if present
       ...(app && { app }), // Add app if present
@@ -1718,6 +1757,25 @@ export class HTMLProjectParser {
     return trimmed || undefined;
   }
 
+  /**
+   * Parses -sound property
+   * Can be: "on" (default) or "off"
+   * When "off", replaces audio stream with silence
+   */
+  private parseSoundProperty(sound: string | undefined): 'on' | 'off' {
+    if (!sound) {
+      return 'on'; // Default: use audio
+    }
+
+    const trimmed = sound.trim().toLowerCase();
+
+    if (trimmed === 'off') {
+      return 'off';
+    }
+
+    return 'on'; // Default for any other value
+  }
+
   /**
    * Extracts the first <container> child from a fragment element
    */
@@ -1919,7 +1977,7 @@ export class HTMLProjectParser {
     assets: Map<string, Asset>,
     trimLeft: number,
     trimRight: number,
-  ): number {
+  ): number | CompiledExpression {
     if (!duration || duration.trim() === 'auto') {
       // Auto: use asset duration minus trim-start and trim-end
       const asset = assets.get(assetName);
@@ -1929,9 +1987,16 @@ export class HTMLProjectParser {
       return Math.max(0, asset.duration - trimLeft - trimRight);
     }
 
+    const trimmed = duration.trim();
+
+    // Check if it's a calc() expression
+    if (trimmed.startsWith('calc(')) {
+      return parseValueLazy(trimmed) as CompiledExpression;
+    }
+
     // Handle percentage (e.g., "100%", "50%")
-    if (duration.endsWith('%')) {
-      const percentage = parseFloat(duration);
+    if (trimmed.endsWith('%')) {
+      const percentage = parseFloat(trimmed);
       if (isNaN(percentage)) {
         return 0;
       }
@@ -1946,12 +2011,12 @@ export class HTMLProjectParser {
     }
 
     // Handle time value (e.g., "5000ms", "5s")
-    return this.parseMilliseconds(duration);
+    return this.parseMilliseconds(trimmed);
   }
 
   /**
    * Parses time value into milliseconds
-   * Supports: "5s", "5000ms", "1.5s", etc.
+   * Supports: "5s", "5000ms", "1.5s", or raw numbers (defaults to milliseconds)
    */
   private parseMilliseconds(value: string | undefined): number {
     if (!value) {
@@ -1976,6 +2041,12 @@ export class HTMLProjectParser {
       }
     }
 
+    // Handle raw numbers (default to milliseconds)
+    const num = parseFloat(trimmed);
+    if (!isNaN(num)) {
+      return Math.round(num);
+    }
+
     return 0;
   }
 
@@ -2023,6 +2094,81 @@ export class HTMLProjectParser {
     return this.parseMilliseconds(trimmed);
   }
 
+  /**
+   * Parses data-timing attribute with short syntax
+   * Format: "ts=3000,te=5000,d=2000,os=1000,oe=7000"
+   * Where:
+   *   ts = -trim-start
+   *   te = -trim-end
+   *   d  = -duration
+   *   os = -offset-start
+   *   oe = -offset-end
+   * Values default to milliseconds if no unit specified
+   * Supports calc() expressions: ts=calc(url(#id.time.start))
+   */
+  private parseDataTiming(dataTiming: string | undefined): {
+    trimStart?: number;
+    trimEnd?: number;
+    duration?: number | CompiledExpression;
+    offsetStart?: number | CompiledExpression;
+    offsetEnd?: number | CompiledExpression;
+  } {
+    const result: {
+      trimStart?: number;
+      trimEnd?: number;
+      duration?: number | CompiledExpression;
+      offsetStart?: number | CompiledExpression;
+      offsetEnd?: number | CompiledExpression;
+    } = {};
+
+    if (!dataTiming) {
+      return result;
+    }
+
+    // Split by comma and parse each key-value pair
+    const pairs = dataTiming.split(',').map((pair) => pair.trim());
+
+    for (const pair of pairs) {
+      const [key, value] = pair.split('=').map((s) => s.trim());
+      if (!key || !value) {
+        continue;
+      }
+
+      // Parse value - check if it's a calc() expression or a simple value
+      let parsedValue: number | CompiledExpression;
+
+      if (value.startsWith('calc(')) {
+        // It's a calc() expression
+        parsedValue = parseValueLazy(value) as CompiledExpression;
+      } else {
+        // It's a simple time value - parse with parseMilliseconds
+        // which handles units like 's' and 'ms', defaulting to ms
+        parsedValue = this.parseMilliseconds(value);
+      }
+
+      // Map short names to result properties
+      switch (key) {
+        case 'ts':
+          result.trimStart = parsedValue as number;
+          break;
+        case 'te':
+          result.trimEnd = parsedValue as number;
+          break;
+        case 'd':
+          result.duration = parsedValue;
+          break;
+        case 'os':
+          result.offsetStart = parsedValue;
+          break;
+        case 'oe':
+          result.offsetEnd = parsedValue;
+          break;
+      }
+    }
+
+    return result;
+  }
+
   /**
    * Parses z-index values (-overlay-start-z-index, -overlay-end-z-index)
    */

package/src/project.ts

@@ -5,6 +5,7 @@ import {
   FFmpegOption,
   Upload,
   AIProvider,
+  SequenceDebugInfo,
 } from './type';
 import { Label } from './ffmpeg';
 import { AssetManager } from './asset-manager';
@@ -13,11 +14,13 @@ import { FilterBuffer } from './stream';
 import { ExpressionContext, FragmentData } from './expression-parser';
 import { renderContainers } from './container-renderer';
 import { renderApps } from './app-renderer';
+import { buildAppsIfNeeded } from './app-builder';
 import { dirname } from 'path';
 
 export class Project {
   private assetManager: AssetManager;
   private expressionContext: ExpressionContext;
+  private sequencesDebugInfo: SequenceDebugInfo[] = [];
 
   constructor(
     private sequencesDefinitions: SequenceDefinition[],
@@ -46,6 +49,8 @@ export class Project {
 
     let buf = new FilterBuffer();
     let mainSequence: Sequence | null = null;
+    this.sequencesDebugInfo = []; // Reset debug info
+    let sequenceIndex = 0;
 
     this.sequencesDefinitions.forEach((sequenceDefinition) => {
       const seq = new Sequence(
@@ -61,6 +66,14 @@ export class Project {
 
       seq.build();
 
+      // Collect debug info
+      this.sequencesDebugInfo.push({
+        sequenceIndex,
+        totalDuration: seq.getTotalDuration(),
+        fragments: seq.getDebugInfo(),
+      });
+      sequenceIndex++;
+
       if (!mainSequence) {
         mainSequence = seq;
       } else {
@@ -95,6 +108,47 @@ export class Project {
     });
   }
 
+  public printDebugInfo() {
+    console.log('\n=== Debug: Sequences & Fragments Timeline ===\n');
+
+    if (this.sequencesDebugInfo.length === 0) {
+      console.log('No sequences built yet.\n');
+      return;
+    }
+
+    this.sequencesDebugInfo.forEach((seqInfo) => {
+      console.log(`\n📹 Sequence ${seqInfo.sequenceIndex}`);
+      console.log(`   Total Duration: ${Math.round(seqInfo.totalDuration)}ms`);
+      console.log(`   Fragments: ${seqInfo.fragments.length}\n`);
+
+      seqInfo.fragments.forEach((frag, index) => {
+        const status = frag.enabled ? '✓' : '✗';
+
+        // Show ID if it's meaningful (not auto-generated fragment_xxx)
+        const isAutoGeneratedId = frag.id.startsWith('fragment_');
+        const idDisplay = isAutoGeneratedId ? '' : ` id="${frag.id}"`;
+
+        console.log(`   ${status} [${index + 1}]${idDisplay}`);
+        console.log(`      Asset:      ${frag.assetName}`);
+        console.log(`      Start:      ${Math.round(frag.startTime)}ms`);
+        console.log(`      End:        ${Math.round(frag.endTime)}ms`);
+        console.log(`      Duration:   ${Math.round(frag.duration)}ms`);
+
+        // Only show non-zero values
+        if (Math.round(frag.trimLeft) > 0) {
+          console.log(`      Trim Left:  ${Math.round(frag.trimLeft)}ms`);
+        }
+        if (Math.round(frag.overlayLeft) > 0) {
+          console.log(`      Overlay:    ${Math.round(frag.overlayLeft)}ms`);
+        }
+
+        console.log('');
+      });
+    });
+
+    console.log('===========================================\n');
+  }
+
   public getAssetManager(): AssetManager {
     return this.assetManager;
   }
@@ -222,10 +276,12 @@ export class Project {
    * 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.
+   * @param forceAppBuild - If true, rebuilds apps even if output exists
    */
   public async renderApps(
     outputName: string,
     activeCacheKeys?: Set<string>,
+    forceAppBuild: boolean = false,
   ): Promise<void> {
     const output = this.getOutput(outputName);
     if (!output) {
@@ -245,6 +301,12 @@ export class Project {
     const apps = fragmentsWithApps.map((frag) => frag.app!);
     const projectDir = dirname(this.projectPath);
 
+    // Build apps if needed (checks for dst/dist directories with package.json)
+    // Deduplicate app sources to avoid building the same app multiple times
+    const appSources = apps.map((app) => app.src);
+    const uniqueAppSources = [...new Set(appSources)];
+    await buildAppsIfNeeded(uniqueAppSources, projectDir, forceAppBuild);
+
     const results = await renderApps(
       apps,
       output.resolution.width,

package/src/sample-sequences.ts

@@ -38,6 +38,7 @@ export const getSampleSequences = (
           objectFitContainPillarboxColor: '#000000',
           chromakey: false,
           chromakeyBlend: 0.1,
+          sound: 'on' as const,
           chromakeySimilarity: 0.1,
           chromakeyColor: '#000000',
         },
@@ -61,6 +62,7 @@ export const getSampleSequences = (
           objectFitContainPillarboxColor: '#000000',
           chromakey: false,
           chromakeyBlend: 0.1,
+          sound: 'on' as const,
           chromakeySimilarity: 0.1,
           chromakeyColor: '#000000',
         },
@@ -86,6 +88,7 @@ export const getSampleSequences = (
           chromakeyBlend: 0.1,
           chromakeySimilarity: 0.1,
           chromakeyColor: '#000000',
+          sound: 'on' as const,
         },
         {
           id: 'f_04',
@@ -107,6 +110,7 @@ export const getSampleSequences = (
           objectFitContainPillarboxColor: '#000000',
           chromakey: false,
           chromakeyBlend: 0.1,
+          sound: 'on' as const,
           chromakeySimilarity: 0.1,
           chromakeyColor: '#000000',
         },
@@ -130,6 +134,7 @@ export const getSampleSequences = (
           objectFitContainPillarboxColor: '#000000',
           chromakey: false,
           chromakeyBlend: 0.1,
+          sound: 'on' as const,
           chromakeySimilarity: 0.1,
           chromakeyColor: '#000000',
         },
@@ -165,6 +170,7 @@ export const getSampleSequences = (
           objectFitContainPillarboxColor: '#000000',
           chromakey: false,
           chromakeyBlend: 0.1,
+          sound: 'on' as const,
           chromakeySimilarity: 0.1,
           chromakeyColor: '#000000',
         },
@@ -200,6 +206,7 @@ export const getSampleSequences = (
           objectFitContainPillarboxColor: '#000000',
           chromakey: false,
           chromakeyBlend: 0.1,
+          sound: 'on' as const,
           chromakeySimilarity: 0.1,
           chromakeyColor: '#000000',
         },