@gannochenko/staticstripes 0.0.22 → 0.0.24

package/dist/html-project-parser.js

@@ -820,6 +820,7 @@ class HTMLProjectParser {
         let thumbOffset;
         let coverUrl;
         let videoUrl;
+        let locationId;
         const localTags = [];
         if ('children' in element && element.children) {
             for (const child of element.children) {
@@ -891,6 +892,21 @@ 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;
+                        }
                     }
                 }
             }
@@ -914,6 +930,7 @@ class HTMLProjectParser {
                 thumbOffset,
                 coverUrl,
                 videoUrl,
+                locationId,
             },
         };
     }
@@ -1300,16 +1317,28 @@ class HTMLProjectParser {
         // 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)
-        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']);
         // 10. Parse -overlay-end-z-index for overlayZIndexRight (temporary)
@@ -1322,9 +1351,13 @@ class HTMLProjectParser {
         const objectFitData = this.parseObjectFitProperty(styles['-object-fit']);
         // 14. Parse -chromakey
         const chromakeyData = this.parseChromakeyProperty(styles['-chromakey']);
+        // 14b. Parse -object-fit-ken-burns
+        const kenBurnsData = this.parseKenBurnsProperty(styles['-object-fit-ken-burns']);
         // 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 {
             id,
@@ -1350,6 +1383,17 @@ class HTMLProjectParser {
             chromakeyBlend: chromakeyData.chromakeyBlend,
             chromakeySimilarity: chromakeyData.chromakeySimilarity,
             chromakeyColor: chromakeyData.chromakeyColor,
+            objectFitKenBurns: kenBurnsData.objectFitKenBurns,
+            objectFitKenBurnsZoom: kenBurnsData.objectFitKenBurnsZoom,
+            objectFitKenBurnsEffectDuration: kenBurnsData.objectFitKenBurnsEffectDuration,
+            objectFitKenBurnsEasing: kenBurnsData.objectFitKenBurnsEasing,
+            objectFitKenBurnsFocalX: kenBurnsData.objectFitKenBurnsFocalX,
+            objectFitKenBurnsFocalY: kenBurnsData.objectFitKenBurnsFocalY,
+            objectFitKenBurnsPanStartX: kenBurnsData.objectFitKenBurnsPanStartX,
+            objectFitKenBurnsPanStartY: kenBurnsData.objectFitKenBurnsPanStartY,
+            objectFitKenBurnsPanEndX: kenBurnsData.objectFitKenBurnsPanEndX,
+            objectFitKenBurnsPanEndY: kenBurnsData.objectFitKenBurnsPanEndY,
+            sound,
             ...(visualFilter && { visualFilter }), // Add visualFilter if present
             ...(container && { container }), // Add container if present
             ...(app && { app }), // Add app if present
@@ -1370,6 +1414,21 @@ class HTMLProjectParser {
         // Validation will happen in the Stream.filter() method
         return trimmed || undefined;
     }
+    /**
+     * Parses -sound property
+     * Can be: "on" (default) or "off"
+     * When "off", replaces audio stream with silence
+     */
+    parseSoundProperty(sound) {
+        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
      */
@@ -1540,9 +1599,14 @@ 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 (0, expression_parser_1.parseValueLazy)(trimmed);
+        }
         // 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;
             }
@@ -1554,11 +1618,11 @@ class HTMLProjectParser {
             return Math.round((asset.duration * percentage) / 100);
         }
         // 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)
      */
     parseMilliseconds(value) {
         if (!value) {
@@ -1579,6 +1643,11 @@ class HTMLProjectParser {
                 return Math.round(seconds * 1000);
             }
         }
+        // Handle raw numbers (default to milliseconds)
+        const num = parseFloat(trimmed);
+        if (!isNaN(num)) {
+            return Math.round(num);
+        }
         return 0;
     }
     /**
@@ -1613,6 +1682,62 @@ class HTMLProjectParser {
         // Otherwise parse as time value
         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))
+     */
+    parseDataTiming(dataTiming) {
+        const result = {};
+        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;
+            if (value.startsWith('calc(')) {
+                // It's a calc() expression
+                parsedValue = (0, expression_parser_1.parseValueLazy)(value);
+            }
+            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;
+                    break;
+                case 'te':
+                    result.trimEnd = parsedValue;
+                    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)
      */
@@ -1674,6 +1799,10 @@ class HTMLProjectParser {
         if (type === 'cover') {
             return { ...defaults, objectFit: 'cover' };
         }
+        // Handle "ken-burns"
+        if (type === 'ken-burns') {
+            return { ...defaults, objectFit: 'ken-burns' };
+        }
         // Handle "contain" with sub-options
         if (type === 'contain') {
             const subType = parts[1];
@@ -1780,6 +1909,194 @@ class HTMLProjectParser {
             chromakeyColor: color,
         };
     }
+    /**
+     * Parses -object-fit-ken-burns property
+     * Format:
+     *   Zoom effects: "<effect> <focal-x> <focal-y> <zoom%> <duration> [easing]"
+     *   Pan effects: "<effect> <zoom-factor> [easing]"
+     * Examples:
+     *   - "zoom-in 50% 50% 30% 1000ms ease-in-out" - zoom 30% over 1s
+     *   - "zoom-out 30% 30% 50% 2000ms ease-out" - zoom out 50% over 2s
+     *   - "pan-left 1.3 linear" - pan with 1.3x zoom
+     * Effects: zoom-in, zoom-out (require focal points + zoom% + duration)
+     *          pan-left, pan-right, pan-top, pan-bottom (require zoom factor only)
+     * Zoom: for zoom effects: percentage (30 = 30%), for pan: factor (1.3)
+     * Duration: effect duration in milliseconds (zoom effects only)
+     * Easing: linear, ease-in, ease-out, ease-in-out (default: linear)
+     */
+    parseKenBurnsProperty(kenBurns) {
+        // Defaults
+        const defaults = {
+            objectFitKenBurns: 'zoom-in',
+            objectFitKenBurnsZoom: 30, // 30% zoom
+            objectFitKenBurnsEffectDuration: 0, // 0 = use fragment duration
+            objectFitKenBurnsEasing: 'linear',
+            objectFitKenBurnsFocalX: 50, // center (for zoom effects)
+            objectFitKenBurnsFocalY: 50, // center (for zoom effects)
+            objectFitKenBurnsPanStartX: 0, // left edge (for horizontal pan)
+            objectFitKenBurnsPanStartY: 0, // top edge (for vertical pan)
+            objectFitKenBurnsPanEndX: 100, // right edge (for horizontal pan)
+            objectFitKenBurnsPanEndY: 100, // bottom edge (for vertical pan)
+        };
+        if (!kenBurns) {
+            return defaults;
+        }
+        const trimmed = kenBurns.trim();
+        const parts = this.splitCssValue(trimmed);
+        if (parts.length === 0) {
+            return defaults;
+        }
+        // Parse effect (first part)
+        const effect = parts[0];
+        const validEffects = ['zoom-in', 'zoom-out', 'pan-left', 'pan-right', 'pan-top', 'pan-bottom'];
+        if (!validEffects.includes(effect)) {
+            return defaults;
+        }
+        let focalX = defaults.objectFitKenBurnsFocalX;
+        let focalY = defaults.objectFitKenBurnsFocalY;
+        let zoom = defaults.objectFitKenBurnsZoom;
+        let effectDuration = defaults.objectFitKenBurnsEffectDuration;
+        let easing = defaults.objectFitKenBurnsEasing;
+        let panStartX = defaults.objectFitKenBurnsPanStartX;
+        let panStartY = defaults.objectFitKenBurnsPanStartY;
+        let panEndX = defaults.objectFitKenBurnsPanEndX;
+        let panEndY = defaults.objectFitKenBurnsPanEndY;
+        const isZoomEffect = effect === 'zoom-in' || effect === 'zoom-out';
+        const isPanEffect = effect === 'pan-left' || effect === 'pan-right' || effect === 'pan-top' || effect === 'pan-bottom';
+        // Parse remaining parts based on effect type
+        let nextIndex = 1;
+        if (isZoomEffect) {
+            // Zoom effects: "<effect> <focal-x%> <focal-y%> <zoom%> <duration> [easing]"
+            // Parse focal points
+            if (parts.length >= 3 && parts[1].includes('%') && parts[2].includes('%')) {
+                const focalXStr = parts[1].split('%')[0];
+                const focalYStr = parts[2].split('%')[0];
+                const parsedX = parseFloat(focalXStr);
+                const parsedY = parseFloat(focalYStr);
+                if (!isNaN(parsedX) && !isNaN(parsedY)) {
+                    focalX = Math.max(0, Math.min(100, parsedX));
+                    focalY = Math.max(0, Math.min(100, parsedY));
+                    nextIndex = 3;
+                    // Check if parts[2] had a concatenated value after '%'
+                    const remainder = parts[2].split('%')[1];
+                    if (remainder && remainder.trim()) {
+                        parts.splice(3, 0, remainder.trim());
+                    }
+                }
+            }
+            // Parse zoom percentage (required)
+            if (parts.length > nextIndex && parts[nextIndex].includes('%')) {
+                const zoomStr = parts[nextIndex].split('%')[0];
+                const parsedZoom = parseFloat(zoomStr);
+                if (!isNaN(parsedZoom) && parsedZoom >= 0) {
+                    zoom = parsedZoom; // Store as percentage (e.g., 30 for 30%)
+                    nextIndex++;
+                    // Check for concatenated value after '%'
+                    const remainder = parts[nextIndex - 1].split('%')[1];
+                    if (remainder && remainder.trim()) {
+                        parts.splice(nextIndex, 0, remainder.trim());
+                    }
+                }
+            }
+            // Parse effect duration (required)
+            if (parts.length > nextIndex) {
+                const durationStr = parts[nextIndex];
+                // Simple inline parser for "1000ms" or "1s" format
+                const match = durationStr.match(/^(\d+(?:\.\d+)?)(ms|s)$/);
+                if (match) {
+                    const value = parseFloat(match[1]);
+                    const parsedDuration = match[2] === 's' ? value * 1000 : value;
+                    if (parsedDuration > 0) {
+                        effectDuration = parsedDuration;
+                        nextIndex++;
+                    }
+                }
+            }
+            // Parse easing (optional)
+            if (parts.length > nextIndex) {
+                const easingStr = parts[nextIndex];
+                if (['linear', 'ease-in', 'ease-out', 'ease-in-out'].includes(easingStr)) {
+                    easing = easingStr;
+                }
+            }
+        }
+        else if (isPanEffect) {
+            // Pan effects: "<effect> <zoom%> <start%> <end%> <duration> [easing]"
+            // Example: pan-left 50% 20% 80% 2000ms ease-in
+            // Parse zoom percentage (required)
+            if (parts.length > nextIndex && parts[nextIndex].includes('%')) {
+                const zoomStr = parts[nextIndex].split('%')[0];
+                const parsedZoom = parseFloat(zoomStr);
+                if (!isNaN(parsedZoom) && parsedZoom >= 0) {
+                    zoom = parsedZoom; // Store as percentage (e.g., 50 for 50%)
+                    nextIndex++;
+                }
+            }
+            // Parse start position percentage (required)
+            if (parts.length > nextIndex && parts[nextIndex].includes('%')) {
+                const startStr = parts[nextIndex].split('%')[0];
+                const parsedStart = parseFloat(startStr);
+                if (!isNaN(parsedStart) && parsedStart >= 0 && parsedStart <= 100) {
+                    // Store in appropriate variable based on pan direction
+                    if (effect === 'pan-left' || effect === 'pan-right') {
+                        panStartX = parsedStart;
+                    }
+                    else {
+                        panStartY = parsedStart;
+                    }
+                    nextIndex++;
+                }
+            }
+            // Parse end position percentage (required)
+            if (parts.length > nextIndex && parts[nextIndex].includes('%')) {
+                const endStr = parts[nextIndex].split('%')[0];
+                const parsedEnd = parseFloat(endStr);
+                if (!isNaN(parsedEnd) && parsedEnd >= 0 && parsedEnd <= 100) {
+                    // Store in appropriate variable based on pan direction
+                    if (effect === 'pan-left' || effect === 'pan-right') {
+                        panEndX = parsedEnd;
+                    }
+                    else {
+                        panEndY = parsedEnd;
+                    }
+                    nextIndex++;
+                }
+            }
+            // Parse effect duration (required)
+            if (parts.length > nextIndex) {
+                const durationStr = parts[nextIndex];
+                // Simple inline parser for "1000ms" or "1s" format
+                const match = durationStr.match(/^(\d+(?:\.\d+)?)(ms|s)$/);
+                if (match) {
+                    const value = parseFloat(match[1]);
+                    const parsedDuration = match[2] === 's' ? value * 1000 : value;
+                    if (parsedDuration > 0) {
+                        effectDuration = parsedDuration;
+                        nextIndex++;
+                    }
+                }
+            }
+            // Parse easing (optional)
+            if (parts.length > nextIndex) {
+                const easingStr = parts[nextIndex];
+                if (['linear', 'ease-in', 'ease-out', 'ease-in-out'].includes(easingStr)) {
+                    easing = easingStr;
+                }
+            }
+        }
+        return {
+            objectFitKenBurns: effect,
+            objectFitKenBurnsZoom: zoom,
+            objectFitKenBurnsEffectDuration: effectDuration,
+            objectFitKenBurnsEasing: easing,
+            objectFitKenBurnsFocalX: focalX,
+            objectFitKenBurnsFocalY: focalY,
+            objectFitKenBurnsPanStartX: panStartX,
+            objectFitKenBurnsPanStartY: panStartY,
+            objectFitKenBurnsPanEndX: panEndX,
+            objectFitKenBurnsPanEndY: panEndY,
+        };
+    }
 }
 exports.HTMLProjectParser = HTMLProjectParser;
 //# sourceMappingURL=html-project-parser.js.map