vidply 1.0.24 → 1.0.26

package/src/core/Player.js

@@ -8,11 +8,7 @@ import {DOMUtils} from '../utils/DOMUtils.js';
 import {ControlBar} from '../controls/ControlBar.js';
 import {CaptionManager} from '../controls/CaptionManager.js';
 import {KeyboardManager} from '../controls/KeyboardManager.js';
-import {TranscriptManager} from '../controls/TranscriptManager.js';
 import {HTML5Renderer} from '../renderers/HTML5Renderer.js';
-import {YouTubeRenderer} from '../renderers/YouTubeRenderer.js';
-import {VimeoRenderer} from '../renderers/VimeoRenderer.js';
-import {HLSRenderer} from '../renderers/HLSRenderer.js';
 import {createPlayOverlay, createIconElement} from '../icons/Icons.js';
 import {i18n} from '../i18n/i18n.js';
 import {StorageManager} from '../utils/StorageManager.js';
@@ -293,6 +289,9 @@ export class Player extends EventEmitter {
                 this.options.language = 'en';
             }
 
+            // Ensure requested language is available (loads built-ins on demand)
+            await i18n.ensureLanguage(this.options.language);
+
             // Set language
             i18n.setLanguage(this.options.language);
 
@@ -318,9 +317,9 @@ export class Player extends EventEmitter {
                 this.captionManager = new CaptionManager(this);
             }
 
-            // Initialize transcript
-            if (this.options.transcript || this.options.transcriptButton) {
-                this.transcriptManager = new TranscriptManager(this);
+            // Initialize transcript lazily unless explicitly requested
+            if (this.options.transcript) {
+                await this.ensureTranscriptManager();
             }
             
             // Always set up metadata track handling (independent of transcript)
@@ -376,9 +375,46 @@ export class Player extends EventEmitter {
         }
     }
 
+    /**
+     * Ensure the transcript manager is available, creating it on demand.
+     * This keeps initial load fast when transcripts are not needed.
+     */
+    async ensureTranscriptManager() {
+        if (this.transcriptManager) {
+            return this.transcriptManager;
+        }
+
+        if (!this.options.transcript && !this.options.transcriptButton) {
+            return null;
+        }
+
+        const module = await import('../controls/TranscriptManager.js');
+        const Manager = module.TranscriptManager || module.default;
+
+        if (!Manager) {
+            return null;
+        }
+
+        this.transcriptManager = new Manager(this);
+        return this.transcriptManager;
+    }
+
+    /**
+     * Toggle transcript visibility, lazily creating the manager if necessary.
+     */
+    async toggleTranscript() {
+        const manager = await this.ensureTranscriptManager();
+        if (!manager) return;
+
+        manager.toggleTranscript();
+        if (this.controlBar) {
+            this.controlBar.updateTranscriptButton();
+        }
+    }
+
     /**
      * Detect language from HTML lang attribute
-     * @returns {string|null} Language code if available in translations, null otherwise
+     * @returns {string|null} Language code if available in translations or as built-in, null otherwise
      */
     detectHtmlLanguage() {
         // Try to get lang from html element
@@ -391,11 +427,16 @@ export class Player extends EventEmitter {
         // Normalize the language code (e.g., "en-US" -> "en", "de-DE" -> "de")
         const normalizedLang = htmlLang.toLowerCase().split('-')[0];
 
-        // Check if this language is available in our translations (including dynamically loaded ones)
+        // Check if this language is available in our translations (already loaded)
         if (i18n.translations[normalizedLang]) {
             return normalizedLang;
         }
 
+        // Check if this language is available as a built-in that can be loaded on demand
+        if (i18n.builtInLanguageLoaders && i18n.builtInLanguageLoaders[normalizedLang]) {
+            return normalizedLang;
+        }
+
         // Language not available, will fallback to English
         this.log(`Language "${htmlLang}" not available, using English as fallback`);
         return null; // Return null instead of 'en' to let the default language handling work
@@ -674,21 +715,22 @@ export class Player extends EventEmitter {
             this.originalSrc = src;
         }
 
-        // Detect media type
-        let renderer;
+        // Detect media type and lazily load heavy renderers
+        let rendererClass = HTML5Renderer;
 
         if (src.includes('youtube.com') || src.includes('youtu.be')) {
-            renderer = YouTubeRenderer;
+            const module = await import('../renderers/YouTubeRenderer.js');
+            rendererClass = module.YouTubeRenderer || module.default;
         } else if (src.includes('vimeo.com')) {
-            renderer = VimeoRenderer;
+            const module = await import('../renderers/VimeoRenderer.js');
+            rendererClass = module.VimeoRenderer || module.default;
         } else if (src.includes('.m3u8')) {
-            renderer = HLSRenderer;
-        } else {
-            renderer = HTML5Renderer;
+            const module = await import('../renderers/HLSRenderer.js');
+            rendererClass = module.HLSRenderer || module.default;
         }
 
-        this.log(`Using ${renderer.name} renderer`);
-        this.renderer = new renderer(this);
+        this.log(`Using ${rendererClass?.name || 'HTML5Renderer'} renderer`);
+        this.renderer = new rendererClass(this);
         await this.renderer.init();
         
         // Invalidate cache after renderer initialization (tracks may have changed)
@@ -970,11 +1012,13 @@ export class Player extends EventEmitter {
             if (this.transcriptManager) {
                 const wasTranscriptVisible = this.transcriptManager.isVisible;
                 this.transcriptManager.destroy();
-                this.transcriptManager = new TranscriptManager(this);
+                this.transcriptManager = null;
+
+                await this.ensureTranscriptManager();
                 
                 // Only restore transcript visibility if new track has captions
                 if (wasTranscriptVisible && this.controlBar && this.controlBar.hasCaptionTracks()) {
-                    this.transcriptManager.showTranscript();
+                    this.transcriptManager?.showTranscript();
                 }
             }
             

package/src/features/PlaylistManager.js

@@ -15,6 +15,7 @@ export class PlaylistManager {
   constructor(player, options = {}) {
     this.player = player;
     this.tracks = [];
+    this.initialTracks = Array.isArray(options.tracks) ? options.tracks : [];
     this.currentIndex = -1;
     
     // Generate unique instance ID for this playlist
@@ -53,9 +54,9 @@ export class PlaylistManager {
     // Update controls to add playlist buttons
     this.updatePlayerControls();
     
-    // Load tracks if provided in options
-    if (options.tracks && Array.isArray(options.tracks)) {
-      this.loadPlaylist(options.tracks);
+    // Load tracks if provided in options (after UI is ready)
+    if (this.initialTracks.length > 0) {
+      this.loadPlaylist(this.initialTracks);
     }
   }
   
@@ -81,7 +82,7 @@ export class PlaylistManager {
     }
     
     // Check for data-playlist attribute on player container (only if tracks weren't provided in options)
-    if (this.tracks.length === 0) {
+    if (this.tracks.length === 0 && this.initialTracks.length === 0) {
       this.loadPlaylistFromAttribute();
     }
   }

package/src/i18n/i18n.js

@@ -2,13 +2,14 @@
  * Internationalization system
  */
 
-import { loadBuiltInTranslations } from './translations.js';
+import { getBaseTranslations, getBuiltInLanguageLoaders, loadBuiltInTranslation } from './translations.js';
 
 class I18n {
   constructor() {
     this.currentLanguage = 'en';
-    this.translations = loadBuiltInTranslations();
+    this.translations = getBaseTranslations();
     this.loadingPromises = new Map(); // Cache for loading promises
+    this.builtInLanguageLoaders = getBuiltInLanguageLoaders();
   }
 
   setLanguage(lang) {
@@ -24,6 +25,47 @@ class I18n {
     return this.currentLanguage;
   }
 
+  /**
+   * Ensure a language is available, loading built-ins on demand.
+   * @param {string} lang Language code
+   * @returns {Promise<string|null>} Normalized language code if available
+   */
+  async ensureLanguage(lang) {
+    const normalizedLang = (lang || '').toLowerCase();
+    if (!normalizedLang) return this.currentLanguage;
+
+    if (this.translations[normalizedLang]) {
+      return normalizedLang;
+    }
+
+    if (this.loadingPromises.has(normalizedLang)) {
+      await this.loadingPromises.get(normalizedLang);
+      return this.translations[normalizedLang] ? normalizedLang : null;
+    }
+
+    if (!this.builtInLanguageLoaders[normalizedLang]) {
+      return null;
+    }
+
+    const loadPromise = (async () => {
+      try {
+        const loaded = await loadBuiltInTranslation(normalizedLang);
+        if (loaded) {
+          this.translations[normalizedLang] = loaded;
+        }
+      } catch (error) {
+        console.warn(`Language "${normalizedLang}" failed to load:`, error);
+      } finally {
+        this.loadingPromises.delete(normalizedLang);
+      }
+    })();
+
+    this.loadingPromises.set(normalizedLang, loadPromise);
+    await loadPromise;
+
+    return this.translations[normalizedLang] ? normalizedLang : null;
+  }
+
   t(key, replacements = {}) {
     const keys = key.split('.');
     let value = this.translations[this.currentLanguage];
@@ -84,20 +126,22 @@ class I18n {
         const contentType = response.headers.get('content-type') || '';
         let translations;
 
+        const buffer = await response.arrayBuffer();
+        const utf8Text = new TextDecoder('utf-8').decode(buffer);
+
         if (contentType.includes('application/json') || url.endsWith('.json')) {
-          translations = await response.json();
+          translations = JSON.parse(utf8Text);
         } else if (contentType.includes('text/yaml') || contentType.includes('application/x-yaml') || url.endsWith('.yaml') || url.endsWith('.yml')) {
           // For YAML, we'll need to parse it
           // Note: This requires a YAML parser library in production
           // For now, we'll try to parse as JSON first, then show a warning
-          const text = await response.text();
           try {
             // Try JSON first (in case server sends JSON with YAML content-type)
-            translations = JSON.parse(text);
+            translations = JSON.parse(utf8Text);
           } catch (e) {
             // If JSON parsing fails, try to use a YAML parser if available
             if (typeof window !== 'undefined' && window.jsyaml) {
-              translations = window.jsyaml.load(text);
+              translations = window.jsyaml.load(utf8Text);
             } else {
               console.warn('YAML parsing requires js-yaml library. Please include it or use JSON format.');
               throw new Error('YAML parsing not available. Please use JSON format or include js-yaml library.');
@@ -105,7 +149,7 @@ class I18n {
           }
         } else {
           // Try to parse as JSON by default
-          translations = await response.json();
+          translations = JSON.parse(utf8Text);
         }
 
         this.addTranslation(langCode, translations);

package/src/i18n/translations.js

@@ -1,31 +1,48 @@
 /**
  * Translation strings for VidPly
- * This file loads all built-in language files
+ * Lazily loads built-in language files to keep the base bundle small.
  */
 
 import { en } from './languages/en.js';
-import { de } from './languages/de.js';
-import { es } from './languages/es.js';
-import { fr } from './languages/fr.js';
-import { ja } from './languages/ja.js';
+
+const builtInLanguageLoaders = {
+  de: () => import('./languages/de.js'),
+  es: () => import('./languages/es.js'),
+  fr: () => import('./languages/fr.js'),
+  ja: () => import('./languages/ja.js')
+};
+
+/**
+ * Returns the base translations that are always available in the bundle.
+ * Currently this is English-only to minimize bundle size.
+ */
+export function getBaseTranslations() {
+  return { en };
+}
 
 /**
- * Load all built-in translations
- * @returns {Object} Object containing all built-in language translations
+ * Expose built-in language loaders so they can be loaded on demand.
  */
-export function loadBuiltInTranslations() {
-  return {
-    en,
-    de,
-    es,
-    fr,
-    ja
-  };
+export function getBuiltInLanguageLoaders() {
+  return builtInLanguageLoaders;
+}
+
+/**
+ * Load a single built-in language asynchronously.
+ * @param {string} lang Language code to load
+ * @returns {Promise<Object|null>} Loaded translation object or null if unavailable
+ */
+export async function loadBuiltInTranslation(lang) {
+  const loader = builtInLanguageLoaders[lang];
+  if (!loader) return null;
+
+  const module = await loader();
+  return module[lang] || module.default || null;
 }
 
 /**
- * Legacy export for backwards compatibility
- * @deprecated Use loadBuiltInTranslations() instead
+ * Legacy export for backwards compatibility (keeps API surface stable)
+ * Note: Only English is included by default; other languages are loaded on demand.
  */
-export const translations = loadBuiltInTranslations();
+export const translations = getBaseTranslations();
 

package/src/icons/Icons.js

@@ -47,26 +47,12 @@ const iconPaths = {
 
     check: `<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>`,
 
-    arrowUp: `<path d="M7 14l5-5 5 5z"/>`,
-
-    arrowDown: `<path d="M7 10l5 5 5-5z"/>`,
-
-    arrowLeft: `<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>`,
-
-    arrowRight: `<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>`,
-
     loading: `<path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/>`,
 
     error: `<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>`,
 
-    download: `<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>`,
-
-    link: `<path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/>`,
-
     playlist: `<path d="M15 6H3v2h12V6zm0 4H3v2h12v-2zM3 16h8v-2H3v2zM17 6v8.18c-.31-.11-.65-.18-1-.18-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3V8h3V6h-5z"/>`,
 
-    language: `<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"/>`,
-
     hd: `<path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-8 12H9.5v-2h-2v2H6V9h1.5v2.5h2V9H11v6zm7-1c0 .55-.45 1-1 1h-.75v1.5h-1.5V15H14c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v4zm-3.5-.5h2v-3h-2v3z"/>`,
 
     transcript: `<path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>`,
@@ -81,18 +67,14 @@ const iconPaths = {
 
     signLanguageOn: `<g transform="scale(1.5)"><path d="M16 11.3c-.1-.9-4.8 1.3-5.4 1.1-2.6-1 5.8-1.3 5.1-2.9s-5.1 1.5-6 1.4C6.5 9.4 16.5 9.1 13.5 8c-1.9-.6-8.8 2.9-6.8.4.7-.6.7-1.9-.7-1.7-9.7 7.2-.7 12.2 8.8 7 0-1.3-3.5.4-4.1.4-2.6 0 5.6-2 5.4-3ZM3.9 7.8c3.2-4.2 3.7 1.2 6 .1s.2-.2.2-.3c.7-2.7 2.5-7.5-1.5-1.3-1.6 0 1.1-4 1-4.6C8.9-1 7.3 4.4 7.2 4.9c-1.6.7-.9-1.4-.7-1.5 3-6-.6-3.1-.9.4-2.5 1.8 0-2.8 0-3.5C2.8-.9 4 9.4 1.1 4.9S.1 4.6 0 5c-.4 2.7 2.6 7.2 3.9 2.8Z"/></g>`,
 
-    speaker: `<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/>`,
-
     music: `<path d="M12 3v9.28c-.47-.17-.97-.28-1.5-.28C8.01 12 6 14.01 6 16.5S8.01 21 10.5 21c2.31 0 4.2-1.75 4.45-4H15V6h4V3h-7zm-1.5 16c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>`,
 
     moreVertical: `<path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>`,
 
-    moreHorizontal: `<path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>`,
-    
     move: `<path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"/>`,
-    
+
     resize: `<path d="M21.71 11.29l-9-9c-.39-.39-1.02-.39-1.41 0l-9 9c-.39.39-.39 1.02 0 1.41l9 9c.39.39 1.02.39 1.41 0l9-9c.39-.38.39-1.01 0-1.41zM14 14.5V12h-4v2.5L7 11l3-3.5V10h4V7.5l3 3.5-3 3.5z"/>`,
-    
+
     clock: `<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/><path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>`
 };
 

package/src/renderers/HLSRenderer.js

@@ -309,6 +309,13 @@ export class HLSRenderer {
     return [];
   }
 
+  getCurrentQuality() {
+    if (this.hls) {
+      return this.hls.currentLevel;
+    }
+    return -1;
+  }
+
   destroy() {
     if (this.hls) {
       this.hls.destroy();