vidply 1.0.4 → 1.0.6

package/src/utils/DOMUtils.js

@@ -1,154 +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;
-  }
-};
-
+/**
+ * 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

@@ -1,53 +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;
-  }
-}
-
+/**
+ * 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

@@ -1,82 +1,87 @@
-/**
- * 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);
-  }
-};
-
+/**
+ * Time formatting and conversion utilities
+ */
+
+import {i18n} from '../i18n/i18n.js';
+
+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 i18n.t('time.seconds', { count: 0 });
+    }
+    
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    const secs = Math.floor(seconds % 60);
+    
+    const parts = [];
+    
+    if (hours > 0) {
+      const key = hours === 1 ? 'time.hour' : 'time.hours';
+      parts.push(i18n.t(key, { count: hours }));
+    }
+    if (minutes > 0) {
+      const key = minutes === 1 ? 'time.minute' : 'time.minutes';
+      parts.push(i18n.t(key, { count: minutes }));
+    }
+    if (secs > 0 || parts.length === 0) {
+      const key = secs === 1 ? 'time.second' : 'time.seconds';
+      parts.push(i18n.t(key, { count: secs }));
+    }
+    
+    return parts.join(', ');
+  },
+
+  /**
+   * Format percentage
+   */
+  formatPercentage(value, total) {
+    if (total === 0) return 0;
+    return Math.round((value / total) * 100);
+  }
+};
+