1 files changed, 90 insertions, 103 deletions

diff --git a/youtube/static/js/plyr.hls.start.js b/youtube/static/js/plyr.hls.start.js
index bc8ec23..69e24bd 100644
--- a/youtube/static/js/plyr.hls.start.js
+++ b/youtube/static/js/plyr.hls.start.js
@@ -150,7 +150,7 @@
    * Create custom quality control in Plyr controls
    */
   function addCustomQualityControl(player, qualityLabels) {
-    player.on('ready', () => {
+    function doAdd() {
       console.log('Adding custom quality control...');
 
       const controls = player.elements.container.querySelector('.plyr__controls');
@@ -238,14 +238,21 @@
       }
 
       console.log('Custom quality control added');
-    });
+    }
+
+    // Run immediately if Plyr is already ready, otherwise wait
+    if (player.ready) {
+      doAdd();
+    } else {
+      player.on('ready', doAdd);
+    }
   }
 
   /**
    * Create custom audio tracks control in Plyr controls
    */
   function addCustomAudioTracksControl(player, hlsInstance) {
-    player.on('ready', () => {
+    function doAdd() {
       console.log('Adding custom audio tracks control...');
 
       const controls = player.elements.container.querySelector('.plyr__controls');
@@ -397,137 +404,117 @@
       });
 
       console.log('Custom audio tracks control added');
-    });
+    }
+
+    // Run immediately if Plyr is already ready, otherwise wait
+    if (player.ready) {
+      doAdd();
+    } else {
+      player.on('ready', doAdd);
+    }
   }
 
   /**
-   * Initialize Plyr with HLS quality options
+   * Main initialization
    */
-  function initPlyrWithQuality(hlsInstance) {
-    const video = document.getElementById('js-video-player');
-
-    if (!hlsInstance || !hlsInstance.levels || hlsInstance.levels.length === 0) {
-      console.error('HLS not ready');
-      return;
-    }
+  async function start() {
+    console.log('Starting Plyr with HLS...');
 
-    if (!video) {
-      console.error('Video element not found');
+    if (typeof hls_manifest_url === 'undefined' || !hls_manifest_url) {
+      console.error('No HLS manifest URL available');
       return;
     }
 
-    console.log('HLS levels available:', hlsInstance.levels.length);
-
-    const sortedLevels = [...hlsInstance.levels].sort((a, b) => b.height - a.height);
-
-    const seenHeights = new Set();
-    const uniqueLevels = [];
-
-    sortedLevels.forEach((level) => {
-      if (!seenHeights.has(level.height)) {
-        seenHeights.add(level.height);
-        uniqueLevels.push(level);
-      }
-    });
-
-    const qualityLabels = ['auto'];
-    uniqueLevels.forEach((level) => {
-      const originalIndex = hlsInstance.levels.indexOf(level);
-      const label = level.height + 'p';
-      if (!window.hlsQualityMap[label]) {
-        qualityLabels.push(label);
-        window.hlsQualityMap[label] = originalIndex;
-      }
-    });
-
-    console.log('Quality labels:', qualityLabels);
-
-    const playerOptions = {
-      autoplay: autoplayActive,
-      disableContextMenu: false,
-      captions: {
-        active: captionsActive,
-        language: typeof data !== 'undefined' ? data.settings.subtitles_language : 'en',
-      },
-      controls: [
-        'play-large',
-        'play',
-        'progress',
-        'current-time',
-        'duration',
-        'mute',
-        'volume',
-        'captions',
-        'settings',
-        'pip',
-        'airplay',
-        'fullscreen',
-      ],
-      iconUrl: '/youtube.com/static/modules/plyr/plyr.svg',
-      blankVideo: '/youtube.com/static/modules/plyr/blank.webm',
-      debug: false,
-      storage: { enabled: false },
-      previewThumbnails: {
-        enabled: typeof storyboard_url !== 'undefined' && storyboard_url !== null,
-        src: typeof storyboard_url !== 'undefined' && storyboard_url !== null ? [storyboard_url] : [],
-      },
-      settings: ['captions', 'speed', 'loop'],
-      tooltips: {
-        controls: true,
-      },
-    };
-
-    console.log('Creating Plyr...');
-
-    try {
-      plyrInstance = new Plyr(video, playerOptions);
-      console.log('Plyr instance created');
-
+    // Initialize Plyr immediately so the player UI shows right away
+    // instead of a bare <video> element while the manifest loads.
+    const video = document.getElementById('js-video-player');
+    if (video) {
+      plyrInstance = new Plyr(video, {
+        autoplay: autoplayActive,
+        disableContextMenu: false,
+        captions: {
+          active: captionsActive,
+          language: typeof data !== 'undefined' ? data.settings.subtitles_language : 'en',
+        },
+        controls: [
+          'play-large',
+          'play',
+          'progress',
+          'current-time',
+          'duration',
+          'mute',
+          'volume',
+          'captions',
+          'settings',
+          'pip',
+          'airplay',
+          'fullscreen',
+        ],
+        iconUrl: '/youtube.com/static/modules/plyr/plyr.svg',
+        blankVideo: '/youtube.com/static/modules/plyr/blank.webm',
+        debug: false,
+        storage: { enabled: false },
+        previewThumbnails: {
+          enabled: typeof storyboard_url !== 'undefined' && storyboard_url !== null,
+          src: typeof storyboard_url !== 'undefined' && storyboard_url !== null ? [storyboard_url] : [],
+        },
+        settings: ['captions', 'speed', 'loop'],
+        tooltips: { controls: true },
+      });
       window.plyrInstance = plyrInstance;
 
-      addCustomQualityControl(plyrInstance, qualityLabels);
-      addCustomAudioTracksControl(plyrInstance, hlsInstance);
-
       if (plyrInstance.eventListeners) {
         plyrInstance.eventListeners.forEach(function(eventListener) {
-          if(eventListener.type === 'dblclick') {
-              eventListener.element.removeEventListener(eventListener.type, eventListener.callback, eventListener.options);
+          if (eventListener.type === 'dblclick') {
+            eventListener.element.removeEventListener(
+              eventListener.type, eventListener.callback, eventListener.options);
           }
         });
       }
 
       plyrInstance.started = false;
-      plyrInstance.once('playing', function(){this.started = true});
+      plyrInstance.once('playing', function(){ this.started = true; });
 
       if (typeof data !== 'undefined' && data.time_start != 0) {
         video.addEventListener('loadedmetadata', function() {
           video.currentTime = data.time_start;
         });
       }
+    }
 
-      console.log('Plyr init complete');
-    } catch (e) {
-      console.error('Failed to initialize Plyr:', e);
+    try {
+      const hlsInstance = await initHLS(hls_manifest_url);
+      // Manifest is ready — add quality and audio controls
+      addCustomQualityControl(plyrInstance, buildQualityLabels(hlsInstance));
+      addCustomAudioTracksControl(plyrInstance, hlsInstance);
+    } catch (error) {
+      console.error('Failed to initialize HLS:', error);
     }
   }
 
   /**
-   * Main initialization
+   * Build quality labels from HLS levels
    */
-  async function start() {
-    console.log('Starting Plyr with HLS...');
+  function buildQualityLabels(hlsInstance) {
+    const qualityLabels = ['auto'];
+    if (!hlsInstance || !hlsInstance.levels) return qualityLabels;
 
-    if (typeof hls_manifest_url === 'undefined' || !hls_manifest_url) {
-      console.error('No HLS manifest URL available');
-      return;
-    }
+    const sortedLevels = [...hlsInstance.levels].sort((a, b) => b.height - a.height);
+    const seenHeights = new Set();
 
-    try {
-      const hlsInstance = await initHLS(hls_manifest_url);
-      initPlyrWithQuality(hlsInstance);
-    } catch (error) {
-      console.error('Failed to initialize:', error);
-    }
+    sortedLevels.forEach((level) => {
+      if (!seenHeights.has(level.height)) {
+        seenHeights.add(level.height);
+        const originalIndex = hlsInstance.levels.indexOf(level);
+        const label = level.height + 'p';
+        if (!window.hlsQualityMap[label]) {
+          qualityLabels.push(label);
+          window.hlsQualityMap[label] = originalIndex;
+        }
+      }
+    });
+
+    return qualityLabels;
   }
 
   if (document.readyState === 'loading') {