@gannochenko/staticstripes 0.0.11 → 0.0.12

package/src/html-project-parser.ts

@@ -8,6 +8,7 @@ import {
   Fragment,
   Container,
   FFmpegOption,
+  Upload,
 } from './type';
 import { execFile } from 'child_process';
 import { promisify } from 'util';
@@ -18,6 +19,19 @@ import { parseValueLazy, CompiledExpression } from './expression-parser';
 
 const execFileAsync = promisify(execFile);
 
+/**
+ * Helper to get attributes as a Map from htmlparser2 element
+ */
+function getAttrs(element: Element): Map<string, string> {
+  const map = new Map<string, string>();
+  if (element.attribs) {
+    for (const [name, value] of Object.entries(element.attribs)) {
+      map.set(name, value);
+    }
+  }
+  return map;
+}
+
 export class HTMLProjectParser {
   private projectDir: string;
 
@@ -36,6 +50,8 @@ export class HTMLProjectParser {
 
     const outputs = this.processOutputs();
     const ffmpegOptions = this.processFfmpegOptions();
+    const uploads = this.processUploads();
+    const title = this.processTitle();
     const sequences = this.processSequences(assets);
     const cssText = this.html.cssText;
 
@@ -44,6 +60,8 @@ export class HTMLProjectParser {
       assets,
       outputs,
       ffmpegOptions,
+      uploads,
+      title,
       cssText,
       this.projectPath,
     );
@@ -96,17 +114,17 @@ export class HTMLProjectParser {
     const results: Element[] = [];
 
     const traverse = (node: ASTNode) => {
-      if ('tagName' in node) {
+      if (node.type === 'tag') {
         const element = node as Element;
 
         // Check if element is an <asset> tag
-        if (element.tagName === 'asset') {
+        if (element.name === 'asset') {
           results.push(element);
         }
       }
 
-      if ('childNodes' in node && node.childNodes) {
-        for (const child of node.childNodes) {
+      if ('children' in node && node.children) {
+        for (const child of node.children) {
           traverse(child);
         }
       }
@@ -122,7 +140,7 @@ export class HTMLProjectParser {
   private async extractAssetFromElement(
     element: Element,
   ): Promise<Asset | null> {
-    const attrs = new Map(element.attrs.map((attr) => [attr.name, attr.value]));
+    const attrs = getAttrs(element);
 
     // Extract name (required)
     const name = attrs.get('data-name') || attrs.get('id');
@@ -152,7 +170,7 @@ export class HTMLProjectParser {
       type = explicitType;
     } else {
       // Infer from tag name or file extension
-      type = this.inferAssetType(element.tagName, relativePath);
+      type = this.inferAssetType(element.name, relativePath);
     }
 
     // Get duration using ffprobe (in ms) - only for audio/video
@@ -404,9 +422,7 @@ export class HTMLProjectParser {
 
     // Process each output element
     for (const element of outputElements) {
-      const attrs = new Map(
-        element.attrs.map((attr) => [attr.name, attr.value]),
-      );
+      const attrs = getAttrs(element);
 
       // Extract name
       const name = attrs.get('name') || 'output';
@@ -447,17 +463,17 @@ export class HTMLProjectParser {
     const results: Element[] = [];
 
     const traverse = (node: ASTNode) => {
-      if ('tagName' in node) {
+      if (node.type === 'tag') {
         const element = node as Element;
 
         // Check if element is an <output> tag
-        if (element.tagName === 'output') {
+        if (element.name === 'output') {
           results.push(element);
         }
       }
 
-      if ('childNodes' in node && node.childNodes) {
-        for (const child of node.childNodes) {
+      if ('children' in node && node.children) {
+        for (const child of node.children) {
           traverse(child);
         }
       }
@@ -477,14 +493,12 @@ export class HTMLProjectParser {
     // Process each <ffmpeg> element (should typically be only one)
     for (const ffmpegElement of ffmpegElements) {
       // Find all <option> child elements
-      if ('childNodes' in ffmpegElement && ffmpegElement.childNodes) {
-        for (const child of ffmpegElement.childNodes) {
-          if ('tagName' in child) {
+      if ('children' in ffmpegElement && ffmpegElement.children) {
+        for (const child of ffmpegElement.children) {
+          if (child.type === 'tag') {
             const childElement = child as Element;
-            if (childElement.tagName === 'option') {
-              const attrs = new Map(
-                childElement.attrs.map((attr) => [attr.name, attr.value]),
-              );
+            if (childElement.name === 'option') {
+              const attrs = getAttrs(childElement);
 
               const name = attrs.get('name');
               if (!name) {
@@ -493,10 +507,10 @@ export class HTMLProjectParser {
 
               // Get the text content (the FFmpeg arguments)
               let args = '';
-              if ('childNodes' in childElement && childElement.childNodes) {
-                for (const textNode of childElement.childNodes) {
-                  if ('value' in textNode) {
-                    args += textNode.value;
+              if ('children' in childElement && childElement.children) {
+                for (const textNode of childElement.children) {
+                  if (textNode.type === 'text' && 'data' in textNode) {
+                    args += textNode.data;
                   }
                 }
               }
@@ -526,17 +540,338 @@ export class HTMLProjectParser {
     const results: Element[] = [];
 
     const traverse = (node: ASTNode) => {
-      if ('tagName' in node) {
+      if (node.type === 'tag') {
         const element = node as Element;
 
         // Check if element is an <ffmpeg> tag
-        if (element.tagName === 'ffmpeg') {
+        if (element.name === 'ffmpeg') {
           results.push(element);
         }
       }
 
-      if ('childNodes' in node && node.childNodes) {
-        for (const child of node.childNodes) {
+      if ('children' in node && node.children) {
+        for (const child of node.children) {
+          traverse(child);
+        }
+      }
+    };
+
+    traverse(this.html.ast);
+    return results;
+  }
+
+  /**
+   * Processes all uploads (YouTube, S3, etc.) from the parsed HTML
+   */
+  private processUploads(): Map<string, Upload> {
+    const uploadsElements = this.findUploadsElements();
+    const uploads = new Map<string, Upload>();
+
+    for (const uploadsElement of uploadsElements) {
+      if ('children' in uploadsElement && uploadsElement.children) {
+        for (const child of uploadsElement.children) {
+          if (child.type === 'tag') {
+            const childElement = child as Element;
+            let upload: Upload | null = null;
+
+            if (childElement.name === 'youtube') {
+              upload = this.parseYouTubeElement(childElement);
+            } else if (childElement.name === 's3') {
+              upload = this.parseS3Element(childElement);
+            }
+
+            if (upload) {
+              uploads.set(upload.name, upload);
+            }
+          }
+        }
+      }
+    }
+
+    return uploads;
+  }
+
+  /**
+   * Parses a single <youtube> element
+   */
+  private parseYouTubeElement(element: Element): Upload | null {
+    const attrs = getAttrs(element);
+
+    const name = attrs.get('name');
+    const outputName = attrs.get('data-output-name');
+
+    if (!name || !outputName) {
+      console.warn('YouTube upload missing name or data-output-name attribute');
+      return null;
+    }
+
+    const videoId = attrs.get('id') || undefined;
+
+    // Parse child elements
+    let uploadTitle: string | undefined;
+    let privacy: 'public' | 'unlisted' | 'private' = 'private';
+    let madeForKids = false;
+    const tags: string[] = [];
+    let category = 'entertainment';
+    let language = 'en';
+    let description = '';
+    let thumbnailTimecode: number | undefined;
+
+    if ('children' in element && element.children) {
+      for (const child of element.children) {
+        if (child.type === 'tag') {
+          const childElement = child as Element;
+
+          switch (childElement.name) {
+            case 'title': {
+              // Get text content
+              if ('children' in childElement && childElement.children) {
+                for (const textNode of childElement.children) {
+                  if (textNode.type === 'text' && 'data' in textNode) {
+                    uploadTitle = (uploadTitle || '') + textNode.data;
+                  }
+                }
+              }
+              uploadTitle = uploadTitle?.trim();
+              break;
+            }
+            case 'public':
+              privacy = 'public';
+              break;
+            case 'unlisted':
+              privacy = 'unlisted';
+              break;
+            case 'private':
+              privacy = 'private';
+              break;
+            case 'made-for-kids':
+              madeForKids = true;
+              break;
+            case 'tag': {
+              const tagAttrs = getAttrs(childElement);
+              const tagName = tagAttrs.get('name');
+              if (tagName) {
+                tags.push(tagName);
+              }
+              break;
+            }
+            case 'category': {
+              const catAttrs = getAttrs(childElement);
+              const catName = catAttrs.get('name');
+              if (catName) {
+                category = catName;
+              }
+              break;
+            }
+            case 'language': {
+              const langAttrs = getAttrs(childElement);
+              const langName = langAttrs.get('name');
+              if (langName) {
+                language = langName;
+              }
+              break;
+            }
+            case 'pre': {
+              // Get text content
+              if ('children' in childElement && childElement.children) {
+                for (const textNode of childElement.children) {
+                  if (textNode.type === 'text' && 'data' in textNode) {
+                    description += textNode.data;
+                  }
+                }
+              }
+              break;
+            }
+            case 'thumbnail': {
+              const thumbAttrs = getAttrs(childElement);
+              const timecode = thumbAttrs.get('data-timecode');
+              if (timecode) {
+                // Parse timecode (e.g., "1000ms" or "1s")
+                const match = timecode.match(/^(\d+(?:\.\d+)?)(ms|s)$/);
+                if (match) {
+                  const value = parseFloat(match[1]);
+                  const unit = match[2];
+                  thumbnailTimecode = unit === 's' ? value * 1000 : value;
+                }
+              }
+              break;
+            }
+          }
+        }
+      }
+    }
+
+    return {
+      name,
+      tag: element.name, // e.g., "youtube", "s3", etc.
+      outputName,
+      title: uploadTitle,
+      videoId,
+      privacy,
+      madeForKids,
+      tags,
+      category,
+      language,
+      description: description.trim(),
+      thumbnailTimecode,
+    };
+  }
+
+  /**
+   * Parses a single <s3> element
+   */
+  private parseS3Element(element: Element): Upload | null {
+    const attrs = getAttrs(element);
+
+    const name = attrs.get('name');
+    const outputName = attrs.get('data-output-name');
+
+    if (!name || !outputName) {
+      console.warn('S3 upload missing name or data-output-name attribute');
+      return null;
+    }
+
+    // Parse S3-specific child elements
+    let endpoint: string | undefined;
+    let region = '';
+    let bucket = '';
+    let path = '';
+    let acl: string | undefined;
+
+    if ('children' in element && element.children) {
+      for (const child of element.children) {
+        if (child.type === 'tag') {
+          const childElement = child as Element;
+          const childAttrs = getAttrs(childElement);
+
+          switch (childElement.name) {
+            case 'endpoint': {
+              endpoint = childAttrs.get('name');
+              break;
+            }
+            case 'region': {
+              region = childAttrs.get('name') || '';
+              break;
+            }
+            case 'bucket': {
+              bucket = childAttrs.get('name') || '';
+              break;
+            }
+            case 'path': {
+              path = childAttrs.get('name') || '';
+              break;
+            }
+            case 'acl': {
+              acl = childAttrs.get('name');
+              break;
+            }
+          }
+        }
+      }
+    }
+
+    // Validate required fields
+    if (!region || !bucket || !path) {
+      console.warn(`S3 upload "${name}" missing required fields (region, bucket, or path)`);
+      return null;
+    }
+
+    return {
+      name,
+      tag: element.name, // "s3"
+      outputName,
+      privacy: 'private', // Default values for S3 (not used but required by Upload type)
+      madeForKids: false,
+      tags: [],
+      category: '',
+      language: '',
+      description: '',
+      s3: {
+        endpoint,
+        region,
+        bucket,
+        path,
+        acl,
+      },
+    };
+  }
+
+  /**
+   * Processes the title from the parsed HTML
+   */
+  private processTitle(): string {
+    const titleElements = this.findTitleElements();
+
+    if (titleElements.length === 0) {
+      return 'Untitled Project';
+    }
+
+    // Get text content from first title element
+    const titleElement = titleElements[0];
+    let title = '';
+
+    if ('children' in titleElement && titleElement.children) {
+      for (const textNode of titleElement.children) {
+        if (textNode.type === 'text' && 'data' in textNode) {
+          title += textNode.data;
+        }
+      }
+    }
+
+    return title.trim() || 'Untitled Project';
+  }
+
+  /**
+   * Finds all title elements in the HTML (top-level only, not inside uploads)
+   */
+  private findTitleElements(): Element[] {
+    const results: Element[] = [];
+
+    const traverse = (node: ASTNode, insideUploads: boolean = false) => {
+      if (node.type === 'tag') {
+        const element = node as Element;
+
+        // Find top-level <title> tags (not inside <youtube> elements in <uploads>)
+        if (element.name === 'title' && !insideUploads) {
+          results.push(element);
+        }
+
+        // Mark that we're inside an uploads section
+        const isUploadsSection = element.name === 'uploads';
+
+        if ('children' in node && node.children) {
+          for (const child of node.children) {
+            traverse(child, insideUploads || isUploadsSection);
+          }
+        }
+      } else if ('children' in node && node.children) {
+        for (const child of node.children) {
+          traverse(child, insideUploads);
+        }
+      }
+    };
+
+    traverse(this.html.ast);
+    return results;
+  }
+
+  /**
+   * Finds all uploads elements in the HTML
+   */
+  private findUploadsElements(): Element[] {
+    const results: Element[] = [];
+
+    const traverse = (node: ASTNode) => {
+      if (node.type === 'tag') {
+        const element = node as Element;
+
+        if (element.name === 'uploads') {
+          results.push(element);
+        }
+      }
+
+      if ('children' in node && node.children) {
+        for (const child of node.children) {
           traverse(child);
         }
       }
@@ -641,11 +976,11 @@ export class HTMLProjectParser {
 
     // Get direct sequence children only
     const sequences: Element[] = [];
-    if ('childNodes' in projectElement && projectElement.childNodes) {
-      for (const child of projectElement.childNodes) {
-        if ('tagName' in child) {
+    if ('children' in projectElement && projectElement.children) {
+      for (const child of projectElement.children) {
+        if (child.type === 'tag') {
           const element = child as Element;
-          if (element.tagName === 'sequence') {
+          if (element.name === 'sequence') {
             sequences.push(element);
           }
         }
@@ -660,15 +995,15 @@ export class HTMLProjectParser {
    */
   private findProjectElement(): Element | null {
     const traverse = (node: ASTNode): Element | null => {
-      if ('tagName' in node) {
+      if (node.type === 'tag') {
         const element = node as Element;
-        if (element.tagName === 'project') {
+        if (element.name === 'project') {
           return element;
         }
       }
 
-      if ('childNodes' in node && node.childNodes) {
-        for (const child of node.childNodes) {
+      if ('children' in node && node.children) {
+        for (const child of node.children) {
           const result = traverse(child);
           if (result) return result;
         }
@@ -688,23 +1023,23 @@ export class HTMLProjectParser {
     const fragments: Element[] = [];
 
     const traverse = (node: ASTNode) => {
-      if ('tagName' in node) {
+      if (node.type === 'tag') {
         const element = node as Element;
-        if (element.tagName === 'fragment') {
+        if (element.name === 'fragment') {
           fragments.push(element);
         }
       }
 
-      if ('childNodes' in node && node.childNodes) {
-        for (const child of node.childNodes) {
+      if ('children' in node && node.children) {
+        for (const child of node.children) {
           traverse(child);
         }
       }
     };
 
     // Start traversing from the sequence element's children
-    if ('childNodes' in sequenceElement && sequenceElement.childNodes) {
-      for (const child of sequenceElement.childNodes) {
+    if ('children' in sequenceElement && sequenceElement.children) {
+      for (const child of sequenceElement.children) {
         traverse(child);
       }
     }
@@ -725,7 +1060,7 @@ export class HTMLProjectParser {
         overlayZIndexRight: number;
       })
     | null {
-    const attrs = new Map(element.attrs.map((attr) => [attr.name, attr.value]));
+    const attrs = getAttrs(element);
     const styles = this.html.css.get(element) || {};
 
     // 1. Extract fragment ID from id attribute or generate one
@@ -784,6 +1119,9 @@ export class HTMLProjectParser {
     // 15. Parse filter (for visual filters)
     const visualFilter = this.parseVisualFilterProperty(styles['filter']);
 
+    // 16. Extract timecode label from data-timecode attribute
+    const timecodeLabel = attrs.get('data-timecode') || undefined;
+
     return {
       id,
       enabled,
@@ -814,6 +1152,7 @@ export class HTMLProjectParser {
       chromakeyColor: chromakeyData.chromakeyColor,
       ...(visualFilter && { visualFilter }), // Add visualFilter if present
       ...(container && { container }), // Add container if present
+      ...(timecodeLabel && { timecodeLabel }), // Add timecode label if present
     };
   }
 
@@ -841,20 +1180,17 @@ export class HTMLProjectParser {
    */
   private extractFragmentContainer(element: Element): Container | undefined {
     // Find first container child
-    if (!('childNodes' in element) || !element.childNodes) {
+    if (!('children' in element) || !element.children) {
       return undefined;
     }
 
-    for (const child of element.childNodes) {
-      if ('tagName' in child && child.tagName === 'container') {
+    for (const child of element.children) {
+      if (child.type === 'tag' && child.name === 'container') {
         const containerElement = child as Element;
 
         // Get id attribute
-        const idAttr = containerElement.attrs.find(
-          (attr) => attr.name === 'id',
-        );
         const id =
-          idAttr?.value ||
+          containerElement.attribs?.id ||
           `container_${Math.random().toString(36).substring(2, 11)}`;
 
         // Get innerHTML (serialize all children)
@@ -877,37 +1213,39 @@ export class HTMLProjectParser {
     let html = '';
 
     const traverse = (node: ASTNode) => {
-      if ('nodeName' in node && node.nodeName === '#text') {
+      if (node.type === 'text') {
         // Text node
-        if ('value' in node && typeof node.value === 'string') {
-          html += node.value;
+        if ('data' in node && typeof node.data === 'string') {
+          html += node.data;
         }
-      } else if ('tagName' in node) {
+      } else if (node.type === 'tag') {
         // Element node
         const el = node as Element;
-        html += `<${el.tagName}`;
+        html += `<${el.name}`;
 
         // Add attributes
-        for (const attr of el.attrs) {
-          html += ` ${attr.name}="${attr.value}"`;
+        if (el.attribs) {
+          for (const [name, value] of Object.entries(el.attribs)) {
+            html += ` ${name}="${value}"`;
+          }
         }
 
         html += '>';
 
         // Process children
-        if ('childNodes' in el && el.childNodes) {
-          for (const child of el.childNodes) {
+        if ('children' in el && el.children) {
+          for (const child of el.children) {
             traverse(child);
           }
         }
 
-        html += `</${el.tagName}>`;
+        html += `</${el.name}>`;
       }
     };
 
     // Serialize all children
-    if ('childNodes' in element && element.childNodes) {
-      for (const child of element.childNodes) {
+    if ('children' in element && element.children) {
+      for (const child of element.children) {
         traverse(child);
       }
     }