vidply 1.0.28 → 1.0.30

package/src/renderers/HTML5Renderer.js

@@ -32,6 +32,13 @@ export class HTML5Renderer {
     this.media.addEventListener('loadedmetadata', () => {
       this.player.state.duration = this.media.duration;
       this.player.emit('loadedmetadata');
+      
+      // Auto-generate poster if none exists (for HTML5 video only)
+      if (this.media.tagName === 'VIDEO') {
+        this.player.autoGeneratePoster().catch(error => {
+          this.player.log('Failed to auto-generate poster:', error, 'warn');
+        });
+      }
     });
 
     this.media.addEventListener('play', () => {

package/src/styles/vidply.css

@@ -793,11 +793,30 @@
     color: var(--vidply-white);
     display: none;
     font-size: 0.75rem;
-    padding: 0.25rem 0.5rem;
+    padding: 0;
     pointer-events: none;
     position: absolute;
     transform: translateX(-50%);
     white-space: nowrap;
+    overflow: hidden;
+}
+
+.vidply-progress-preview {
+    background-size: cover;
+    background-position: center;
+    border-radius: 0.25rem 0.25rem 0 0;
+    display: none;
+    height: 5rem;
+    width: 8.888888889rem; /* 160px at 18px base */
+    min-width: 8.888888889rem;
+}
+
+.vidply-progress-tooltip-time {
+    background: var(--vidply-black-90);
+    border-radius: 0 0 0.25rem 0.25rem;
+    padding: 0.25rem 0.5rem;
+    text-align: center;
+    width: 100%;
 }
 
 /* Button Container */

package/src/utils/DOMUtils.js

@@ -1,8 +1,15 @@
 /**
  * DOM manipulation utilities
+ * Optimized for performance with CSS transitions
  */
 
 export const DOMUtils = {
+  /**
+   * Create an element with options
+   * @param {string} tag - HTML tag name
+   * @param {Object} options - Element options
+   * @returns {HTMLElement}
+   */
   createElement(tag, options = {}) {
     const element = document.createElement(tag);
     
@@ -11,9 +18,9 @@ export const DOMUtils = {
     }
     
     if (options.attributes) {
-      Object.entries(options.attributes).forEach(([key, value]) => {
+      for (const [key, value] of Object.entries(options.attributes)) {
         element.setAttribute(key, value);
-      });
+      }
     }
     
     if (options.innerHTML) {
@@ -29,193 +36,225 @@ export const DOMUtils = {
     }
     
     if (options.children) {
-      options.children.forEach(child => {
+      for (const child of options.children) {
         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 (remove display:none)
+   * @param {HTMLElement} element
+   */
   show(element) {
-    if (element) {
-      element.style.display = '';
-    }
+    element?.style && (element.style.display = '');
   },
 
+  /**
+   * Hide element
+   * @param {HTMLElement} element
+   */
   hide(element) {
-    if (element) {
-      element.style.display = 'none';
-    }
+    element?.style && (element.style.display = 'none');
   },
 
-  fadeIn(element, duration = 300) {
+  /**
+   * Fade in element using CSS transitions (GPU accelerated)
+   * @param {HTMLElement} element
+   * @param {number} duration - Duration in ms
+   * @param {Function} [onComplete] - Callback when complete
+   */
+  fadeIn(element, duration = 300, onComplete) {
     if (!element) return;
     
+    // Set up initial state
     element.style.opacity = '0';
     element.style.display = '';
+    element.style.transition = `opacity ${duration}ms ease`;
     
-    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);
-      }
-    };
+    // Force reflow to ensure transition works
+    element.offsetHeight;
+    
+    // Trigger transition
+    element.style.opacity = '1';
     
-    requestAnimationFrame(animate);
+    // Cleanup after transition
+    if (onComplete) {
+      const cleanup = () => {
+        element.removeEventListener('transitionend', cleanup);
+        onComplete();
+      };
+      element.addEventListener('transitionend', cleanup, { once: true });
+      // Fallback timeout in case transitionend doesn't fire
+      setTimeout(cleanup, duration + 50);
+    }
   },
 
-  fadeOut(element, duration = 300) {
+  /**
+   * Fade out element using CSS transitions (GPU accelerated)
+   * @param {HTMLElement} element
+   * @param {number} duration - Duration in ms
+   * @param {Function} [onComplete] - Callback when complete
+   */
+  fadeOut(element, duration = 300, onComplete) {
     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';
-      }
+    element.style.transition = `opacity ${duration}ms ease`;
+    element.style.opacity = '0';
+    
+    const cleanup = () => {
+      element.removeEventListener('transitionend', cleanup);
+      element.style.display = 'none';
+      if (onComplete) onComplete();
     };
     
-    requestAnimationFrame(animate);
+    element.addEventListener('transitionend', cleanup, { once: true });
+    // Fallback timeout in case transitionend doesn't fire
+    setTimeout(cleanup, duration + 50);
   },
 
+  /**
+   * Get element's offset position and dimensions
+   * @param {HTMLElement} element
+   * @returns {Object} { top, left, width, height }
+   */
   offset(element) {
-    if (!element) return { top: 0, left: 0 };
+    if (!element) return { top: 0, left: 0, width: 0, height: 0 };
     
     const rect = element.getBoundingClientRect();
     return {
-      top: rect.top + window.pageYOffset,
-      left: rect.left + window.pageXOffset,
+      top: rect.top + window.scrollY,
+      left: rect.left + window.scrollX,
       width: rect.width,
       height: rect.height
     };
   },
 
+  /**
+   * Escape HTML special characters
+   * @param {string} str - String to escape
+   * @returns {string} Escaped string
+   */
   escapeHTML(str) {
-    const div = document.createElement('div');
-    div.textContent = str;
-    return div.innerHTML;
+    const escapeMap = {
+      '&': '&amp;',
+      '<': '&lt;',
+      '>': '&gt;',
+      '"': '&quot;',
+      "'": '&#x27;'
+    };
+    return str.replace(/[&<>"']/g, char => escapeMap[char]);
   },
 
+  /**
+   * Basic HTML sanitization for VTT captions
+   * Allows safe formatting tags, removes dangerous content
+   * @param {string} html - HTML string to sanitize
+   * @returns {string} Sanitized HTML
+   */
   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
+    // Remove dangerous content
     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
+      .replace(/on\w+\s*=/gi, '') // Event handlers
+      .replace(/javascript:/gi, ''); // javascript: protocol
     
+    // Use DOM parser for final sanitization
+    const temp = document.createElement('div');
     temp.innerHTML = safeHtml;
     return temp.innerHTML;
   },
 
   /**
-   * Create a tooltip element that is aria-hidden (not read by screen readers)
+   * Create a tooltip element (aria-hidden)
    * @param {string} text - Tooltip text
-   * @param {string} classPrefix - Class prefix for styling
-   * @returns {HTMLElement} Tooltip element
+   * @param {string} classPrefix - Class prefix
+   * @returns {HTMLElement}
    */
   createTooltip(text, classPrefix = 'vidply') {
-    const tooltip = this.createElement('span', {
+    return this.createElement('span', {
       className: `${classPrefix}-tooltip`,
       textContent: text,
-      attributes: {
-        'aria-hidden': 'true'
-      }
+      attributes: { 'aria-hidden': 'true' }
     });
-    return tooltip;
   },
 
   /**
-   * Attach a tooltip to an element
-   * @param {HTMLElement} element - Element to attach tooltip to
+   * Attach a tooltip to an element with hover/focus behavior
+   * @param {HTMLElement} element - Target element
    * @param {string} text - Tooltip text
-   * @param {string} classPrefix - Class prefix for styling
+   * @param {string} classPrefix - Class prefix
    */
   attachTooltip(element, text, classPrefix = 'vidply') {
     if (!element || !text) return;
     
-    // Remove existing tooltip if any
-    const existingTooltip = element.querySelector(`.${classPrefix}-tooltip`);
-    if (existingTooltip) {
-      existingTooltip.remove();
-    }
+    // Remove existing tooltip
+    element.querySelector(`.${classPrefix}-tooltip`)?.remove();
     
     const tooltip = this.createTooltip(text, classPrefix);
     element.appendChild(tooltip);
     
-    // Show tooltip on hover/focus
-    const showTooltip = () => {
-      tooltip.classList.add(`${classPrefix}-tooltip-visible`);
-    };
-    
-    const hideTooltip = () => {
-      tooltip.classList.remove(`${classPrefix}-tooltip-visible`);
-    };
+    const visibleClass = `${classPrefix}-tooltip-visible`;
+    const show = () => tooltip.classList.add(visibleClass);
+    const hide = () => tooltip.classList.remove(visibleClass);
     
-    element.addEventListener('mouseenter', showTooltip);
-    element.addEventListener('mouseleave', hideTooltip);
-    element.addEventListener('focus', showTooltip);
-    element.addEventListener('blur', hideTooltip);
+    element.addEventListener('mouseenter', show);
+    element.addEventListener('mouseleave', hide);
+    element.addEventListener('focus', show);
+    element.addEventListener('blur', hide);
   },
 
   /**
-   * Create visible button text that is hidden by CSS but visible when CSS is disabled
+   * Create button text element (visible when CSS disabled)
    * @param {string} text - Button text
-   * @param {string} classPrefix - Class prefix for styling
-   * @returns {HTMLElement} Button text element
+   * @param {string} classPrefix - Class prefix
+   * @returns {HTMLElement}
    */
   createButtonText(text, classPrefix = 'vidply') {
-    const buttonText = this.createElement('span', {
+    return this.createElement('span', {
       className: `${classPrefix}-button-text`,
       textContent: text,
-      attributes: {
-        'aria-hidden': 'true'
-      }
+      attributes: { 'aria-hidden': 'true' }
     });
-    return buttonText;
+  },
+
+  /**
+   * Add class to element (null-safe)
+   * @param {HTMLElement} element
+   * @param {string} className
+   */
+  addClass(element, className) {
+    element?.classList?.add(className);
+  },
+
+  /**
+   * Remove class from element (null-safe)
+   * @param {HTMLElement} element
+   * @param {string} className
+   */
+  removeClass(element, className) {
+    element?.classList?.remove(className);
+  },
+
+  /**
+   * Toggle class on element (null-safe)
+   * @param {HTMLElement} element
+   * @param {string} className
+   */
+  toggleClass(element, className) {
+    element?.classList?.toggle(className);
+  },
+
+  /**
+   * Check if element has class (null-safe)
+   * @param {HTMLElement} element
+   * @param {string} className
+   * @returns {boolean}
+   */
+  hasClass(element, className) {
+    return element?.classList?.contains(className) ?? false;
   }
 };
-