vidply 1.0.0

package/src/utils/DOMUtils.js

@@ -0,0 +1,154 @@
+/**
+ * DOM manipulation utilities
+ */
+
+export const DOMUtils = {
+  createElement(tag, options = {}) {
+    const element = document.createElement(tag);
+    
+    if (options.className) {
+      element.className = options.className;
+    }
+    
+    if (options.attributes) {
+      Object.entries(options.attributes).forEach(([key, value]) => {
+        element.setAttribute(key, value);
+      });
+    }
+    
+    if (options.innerHTML) {
+      element.innerHTML = options.innerHTML;
+    }
+    
+    if (options.textContent) {
+      element.textContent = options.textContent;
+    }
+    
+    if (options.style) {
+      Object.assign(element.style, options.style);
+    }
+    
+    if (options.children) {
+      options.children.forEach(child => {
+        if (child) element.appendChild(child);
+      });
+    }
+    
+    return element;
+  },
+
+  addClass(element, className) {
+    if (element && className) {
+      element.classList.add(className);
+    }
+  },
+
+  removeClass(element, className) {
+    if (element && className) {
+      element.classList.remove(className);
+    }
+  },
+
+  toggleClass(element, className) {
+    if (element && className) {
+      element.classList.toggle(className);
+    }
+  },
+
+  hasClass(element, className) {
+    return element && element.classList.contains(className);
+  },
+
+  show(element) {
+    if (element) {
+      element.style.display = '';
+    }
+  },
+
+  hide(element) {
+    if (element) {
+      element.style.display = 'none';
+    }
+  },
+
+  fadeIn(element, duration = 300) {
+    if (!element) return;
+    
+    element.style.opacity = '0';
+    element.style.display = '';
+    
+    let start = null;
+    const animate = (timestamp) => {
+      if (!start) start = timestamp;
+      const progress = timestamp - start;
+      const opacity = Math.min(progress / duration, 1);
+      
+      element.style.opacity = opacity;
+      
+      if (progress < duration) {
+        requestAnimationFrame(animate);
+      }
+    };
+    
+    requestAnimationFrame(animate);
+  },
+
+  fadeOut(element, duration = 300) {
+    if (!element) return;
+    
+    const startOpacity = parseFloat(getComputedStyle(element).opacity) || 1;
+    let start = null;
+    
+    const animate = (timestamp) => {
+      if (!start) start = timestamp;
+      const progress = timestamp - start;
+      const opacity = Math.max(startOpacity - (progress / duration), 0);
+      
+      element.style.opacity = opacity;
+      
+      if (progress < duration) {
+        requestAnimationFrame(animate);
+      } else {
+        element.style.display = 'none';
+      }
+    };
+    
+    requestAnimationFrame(animate);
+  },
+
+  offset(element) {
+    if (!element) return { top: 0, left: 0 };
+    
+    const rect = element.getBoundingClientRect();
+    return {
+      top: rect.top + window.pageYOffset,
+      left: rect.left + window.pageXOffset,
+      width: rect.width,
+      height: rect.height
+    };
+  },
+
+  escapeHTML(str) {
+    const div = document.createElement('div');
+    div.textContent = str;
+    return div.innerHTML;
+  },
+
+  sanitizeHTML(html) {
+    // Basic HTML sanitization - allow safe tags for VTT captions
+    // Since we control the HTML (from VTT parsing), we can safely allow these tags
+    const temp = document.createElement('div');
+    
+    // Strip out any potentially dangerous tags/attributes
+    // Allow: strong, em, u, span, b, i with class and data-voice attributes
+    const safeHtml = html
+      .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
+      .replace(/<iframe\b[^<]*(?:(?!<\/iframe>)<[^<]*)*<\/iframe>/gi, '')
+      .replace(/on\w+\s*=/gi, '') // Remove event handlers
+      .replace(/javascript:/gi, ''); // Remove javascript: protocol
+    
+    temp.innerHTML = safeHtml;
+    return temp.innerHTML;
+  }
+};
+

package/src/utils/EventEmitter.js

@@ -0,0 +1,53 @@
+/**
+ * Simple EventEmitter implementation
+ */
+
+export class EventEmitter {
+  constructor() {
+    this.events = {};
+  }
+
+  on(event, listener) {
+    if (!this.events[event]) {
+      this.events[event] = [];
+    }
+    this.events[event].push(listener);
+    return this;
+  }
+
+  once(event, listener) {
+    const onceListener = (...args) => {
+      listener(...args);
+      this.off(event, onceListener);
+    };
+    return this.on(event, onceListener);
+  }
+
+  off(event, listener) {
+    if (!this.events[event]) return this;
+    
+    if (!listener) {
+      delete this.events[event];
+    } else {
+      this.events[event] = this.events[event].filter(l => l !== listener);
+    }
+    
+    return this;
+  }
+
+  emit(event, ...args) {
+    if (!this.events[event]) return this;
+    
+    this.events[event].forEach(listener => {
+      listener(...args);
+    });
+    
+    return this;
+  }
+
+  removeAllListeners() {
+    this.events = {};
+    return this;
+  }
+}
+

package/src/utils/TimeUtils.js

@@ -0,0 +1,82 @@
+/**
+ * Time formatting and conversion utilities
+ */
+
+export const TimeUtils = {
+  /**
+   * Format seconds to time string (HH:MM:SS or MM:SS)
+   */
+  formatTime(seconds, alwaysShowHours = false) {
+    if (!isFinite(seconds) || seconds < 0) {
+      return alwaysShowHours ? '00:00:00' : '00:00';
+    }
+    
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    const secs = Math.floor(seconds % 60);
+    
+    const pad = (num) => String(num).padStart(2, '0');
+    
+    if (hours > 0 || alwaysShowHours) {
+      return `${pad(hours)}:${pad(minutes)}:${pad(secs)}`;
+    }
+    
+    return `${pad(minutes)}:${pad(secs)}`;
+  },
+
+  /**
+   * Parse time string to seconds
+   */
+  parseTime(timeString) {
+    const parts = timeString.split(':').map(p => parseInt(p, 10));
+    
+    if (parts.length === 3) {
+      // HH:MM:SS
+      return parts[0] * 3600 + parts[1] * 60 + parts[2];
+    } else if (parts.length === 2) {
+      // MM:SS
+      return parts[0] * 60 + parts[1];
+    } else if (parts.length === 1) {
+      // SS
+      return parts[0];
+    }
+    
+    return 0;
+  },
+
+  /**
+   * Format seconds to readable duration
+   */
+  formatDuration(seconds) {
+    if (!isFinite(seconds) || seconds < 0) {
+      return '0 seconds';
+    }
+    
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    const secs = Math.floor(seconds % 60);
+    
+    const parts = [];
+    
+    if (hours > 0) {
+      parts.push(`${hours} hour${hours !== 1 ? 's' : ''}`);
+    }
+    if (minutes > 0) {
+      parts.push(`${minutes} minute${minutes !== 1 ? 's' : ''}`);
+    }
+    if (secs > 0 || parts.length === 0) {
+      parts.push(`${secs} second${secs !== 1 ? 's' : ''}`);
+    }
+    
+    return parts.join(', ');
+  },
+
+  /**
+   * Format percentage
+   */
+  formatPercentage(value, total) {
+    if (total === 0) return 0;
+    return Math.round((value / total) * 100);
+  }
+};
+