vidply 1.0.27 → 1.0.29

package/src/features/PlaylistManager.js

@@ -969,7 +969,7 @@ export class PlaylistManager {
         id: `${this.uniqueId}-keyboard-instructions`
       }
     });
-    instructions.textContent = 'Playlist navigation: Use Up and Down arrow keys to move between tracks. Press Page Up or Page Down to skip 5 tracks. Press Home to go to first track, End to go to last track. Press Enter or Space to play the selected track.';
+    instructions.textContent = i18n.t('playlist.keyboardInstructions');
     this.playlistPanel.appendChild(instructions);
     
     // Create list (proper ul element)
@@ -1180,10 +1180,10 @@ export class PlaylistManager {
           newIndex = index + 1;
         } else {
           // At the end, announce boundary
-          announcement = `End of playlist. ${buttons.length} of ${buttons.length}.`;
+          announcement = i18n.t('playlist.endOfPlaylist', { current: buttons.length, total: buttons.length });
         }
         break;
-        
+
       case 'ArrowUp':
         e.preventDefault();
         e.stopPropagation();
@@ -1192,47 +1192,47 @@ export class PlaylistManager {
           newIndex = index - 1;
         } else {
           // At the beginning, announce boundary
-          announcement = 'Beginning of playlist. 1 of ' + buttons.length + '.';
+          announcement = i18n.t('playlist.beginningOfPlaylist', { total: buttons.length });
         }
         break;
-        
+
       case 'PageDown':
         e.preventDefault();
         e.stopPropagation();
         // Move 5 items down (or to end)
         newIndex = Math.min(index + 5, buttons.length - 1);
         if (newIndex === buttons.length - 1 && index !== newIndex) {
-          announcement = `Jumped to last track. ${newIndex + 1} of ${buttons.length}.`;
+          announcement = i18n.t('playlist.jumpedToLastTrack', { current: newIndex + 1, total: buttons.length });
         }
         break;
-        
+
       case 'PageUp':
         e.preventDefault();
         e.stopPropagation();
         // Move 5 items up (or to beginning)
         newIndex = Math.max(index - 5, 0);
         if (newIndex === 0 && index !== newIndex) {
-          announcement = `Jumped to first track. 1 of ${buttons.length}.`;
+          announcement = i18n.t('playlist.jumpedToFirstTrack', { total: buttons.length });
         }
         break;
-        
+
       case 'Home':
         e.preventDefault();
         e.stopPropagation();
         // Move to first item
         newIndex = 0;
         if (index !== 0) {
-          announcement = `First track. 1 of ${buttons.length}.`;
+          announcement = i18n.t('playlist.firstTrack', { total: buttons.length });
         }
         break;
-        
+
       case 'End':
         e.preventDefault();
         e.stopPropagation();
         // Move to last item
         newIndex = buttons.length - 1;
         if (index !== buttons.length - 1) {
-          announcement = `Last track. ${buttons.length} of ${buttons.length}.`;
+          announcement = i18n.t('playlist.lastTrack', { current: buttons.length, total: buttons.length });
         }
         break;
     }

package/src/i18n/languages/de.js

@@ -102,6 +102,7 @@ export const de = {
     },
     transcript: {
         title: 'Transkript',
+        ariaLabel: 'Video-Transkript',
         close: 'Transkript schließen',
         loading: 'Transkript wird geladen...',
         noTranscript: 'Kein Transkript für dieses Video verfügbar.',
@@ -168,7 +169,14 @@ export const de = {
         currentlyPlaying: 'Wird gerade abgespielt',
         notPlaying: 'Nicht aktiv',
         pressEnterPlay: 'Eingabetaste zum Abspielen',
-        pressEnterRestart: 'Eingabetaste zum Neustart'
+        pressEnterRestart: 'Eingabetaste zum Neustart',
+        keyboardInstructions: 'Wiedergabelisten-Navigation: Verwenden Sie die Pfeiltasten nach oben und unten, um zwischen Titeln zu wechseln. Drücken Sie Bild auf oder Bild ab, um 5 Titel zu überspringen. Drücken Sie Pos1, um zum ersten Titel zu springen, Ende für den letzten Titel. Drücken Sie die Eingabetaste oder Leertaste, um den ausgewählten Titel abzuspielen.',
+        endOfPlaylist: 'Ende der Wiedergabeliste. {current} von {total}.',
+        beginningOfPlaylist: 'Anfang der Wiedergabeliste. 1 von {total}.',
+        jumpedToLastTrack: 'Zum letzten Titel gesprungen. {current} von {total}.',
+        jumpedToFirstTrack: 'Zum ersten Titel gesprungen. 1 von {total}.',
+        firstTrack: 'Erster Titel. 1 von {total}.',
+        lastTrack: 'Letzter Titel. {current} von {total}.'
     }
 };
 

package/src/i18n/languages/en.js

@@ -102,6 +102,7 @@ export const en = {
   },
   transcript: {
     title: 'Transcript',
+    ariaLabel: 'Video Transcript',
     close: 'Close transcript',
     loading: 'Loading transcript...',
     noTranscript: 'No transcript available for this video.',
@@ -168,7 +169,14 @@ export const en = {
     currentlyPlaying: 'Currently playing',
     notPlaying: 'Not playing',
     pressEnterPlay: 'Press Enter to play',
-    pressEnterRestart: 'Press Enter to restart'
+    pressEnterRestart: 'Press Enter to restart',
+    keyboardInstructions: 'Playlist navigation: Use Up and Down arrow keys to move between tracks. Press Page Up or Page Down to skip 5 tracks. Press Home to go to first track, End to go to last track. Press Enter or Space to play the selected track.',
+    endOfPlaylist: 'End of playlist. {current} of {total}.',
+    beginningOfPlaylist: 'Beginning of playlist. 1 of {total}.',
+    jumpedToLastTrack: 'Jumped to last track. {current} of {total}.',
+    jumpedToFirstTrack: 'Jumped to first track. 1 of {total}.',
+    firstTrack: 'First track. 1 of {total}.',
+    lastTrack: 'Last track. {current} of {total}.'
   }
 };
 

package/src/i18n/languages/es.js

@@ -102,6 +102,7 @@ export const es = {
   },
   transcript: {
     title: 'Transcripción',
+    ariaLabel: 'Transcripción de video',
     close: 'Cerrar transcripción',
     loading: 'Cargando transcripción...',
     noTranscript: 'No hay transcripción disponible para este video.',
@@ -168,7 +169,14 @@ export const es = {
     currentlyPlaying: 'Reproduciendo actualmente',
     notPlaying: 'Sin reproducir',
     pressEnterPlay: 'Pulsa Enter para reproducir',
-    pressEnterRestart: 'Pulsa Enter para reiniciar'
+    pressEnterRestart: 'Pulsa Enter para reiniciar',
+    keyboardInstructions: 'Navegación de lista de reproducción: Use las teclas de flecha arriba y abajo para moverse entre pistas. Pulse Retroceder página o Avanzar página para saltar 5 pistas. Pulse Inicio para ir a la primera pista, Fin para la última pista. Pulse Intro o Espacio para reproducir la pista seleccionada.',
+    endOfPlaylist: 'Fin de la lista de reproducción. {current} de {total}.',
+    beginningOfPlaylist: 'Inicio de la lista de reproducción. 1 de {total}.',
+    jumpedToLastTrack: 'Saltó a la última pista. {current} de {total}.',
+    jumpedToFirstTrack: 'Saltó a la primera pista. 1 de {total}.',
+    firstTrack: 'Primera pista. 1 de {total}.',
+    lastTrack: 'Última pista. {current} de {total}.'
   }
 };
 

package/src/i18n/languages/fr.js

@@ -102,6 +102,7 @@ export const fr = {
   },
   transcript: {
     title: 'Transcription',
+    ariaLabel: 'Transcription vidéo',
     close: 'Fermer la transcription',
     loading: 'Chargement de la transcription...',
     noTranscript: 'Aucune transcription disponible pour cette vidéo.',
@@ -168,7 +169,14 @@ export const fr = {
     currentlyPlaying: 'En cours de lecture',
     notPlaying: 'Non en lecture',
     pressEnterPlay: 'Appuyez sur Entrée pour lire',
-    pressEnterRestart: 'Appuyez sur Entrée pour recommencer'
+    pressEnterRestart: 'Appuyez sur Entrée pour recommencer',
+    keyboardInstructions: 'Navigation de la liste de lecture : Utilisez les touches fléchées haut et bas pour naviguer entre les pistes. Appuyez sur Page précédente ou Page suivante pour sauter 5 pistes. Appuyez sur Début pour aller à la première piste, Fin pour la dernière piste. Appuyez sur Entrée ou Espace pour lire la piste sélectionnée.',
+    endOfPlaylist: 'Fin de la liste de lecture. {current} sur {total}.',
+    beginningOfPlaylist: 'Début de la liste de lecture. 1 sur {total}.',
+    jumpedToLastTrack: 'Sauté à la dernière piste. {current} sur {total}.',
+    jumpedToFirstTrack: 'Sauté à la première piste. 1 sur {total}.',
+    firstTrack: 'Première piste. 1 sur {total}.',
+    lastTrack: 'Dernière piste. {current} sur {total}.'
   }
 };
 

package/src/i18n/languages/ja.js

@@ -102,6 +102,7 @@ export const ja = {
   },
   transcript: {
     title: '文字起こし',
+    ariaLabel: 'ビデオ文字起こし',
     close: '文字起こしを閉じる',
     loading: '文字起こしを読み込み中...',
     noTranscript: 'このビデオの文字起こしはありません。',
@@ -168,7 +169,14 @@ export const ja = {
     currentlyPlaying: '再生中',
     notPlaying: '停止中',
     pressEnterPlay: 'Enterキーで再生',
-    pressEnterRestart: 'Enterキーで最初から再生'
+    pressEnterRestart: 'Enterキーで最初から再生',
+    keyboardInstructions: 'プレイリストナビゲーション：上下の矢印キーでトラック間を移動します。Page UpまたはPage Downで5トラックをスキップします。Homeで最初のトラックへ、Endで最後のトラックへ移動します。EnterまたはSpaceで選択したトラックを再生します。',
+    endOfPlaylist: 'プレイリストの終わりです。{current}/{total}。',
+    beginningOfPlaylist: 'プレイリストの始めです。1/{total}。',
+    jumpedToLastTrack: '最後のトラックにジャンプしました。{current}/{total}。',
+    jumpedToFirstTrack: '最初のトラックにジャンプしました。1/{total}。',
+    firstTrack: '最初のトラックです。1/{total}。',
+    lastTrack: '最後のトラックです。{current}/{total}。'
   }
 };
 

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;
   }
 };
-