fix(hls): improve audio track selection and auto-detect "Original"

- Auto-select "Original" audio track by default in both native and Plyr HLS players
- Fix native HLS audio selector to use numeric indices instead of string matching
- Robustly detect "original" track by checking both `name` and `lang` attributes
- Fix audio track change handler to correctly switch between available tracks

2 files changed, 24 insertions, 16 deletions

diff --git a/youtube/static/js/plyr.hls.start.js b/youtube/static/js/plyr.hls.start.js
index 91e0221..bc8ec23 100644
--- a/youtube/static/js/plyr.hls.start.js
+++ b/youtube/static/js/plyr.hls.start.js
@@ -361,9 +361,11 @@
 
       if (hlsInstance && hlsInstance.audioTracks && hlsInstance.audioTracks.length > 0) {
         // Prefer "original" audio track
-        const originalIdx = hlsInstance.audioTracks.findIndex(t =>
-          (t.name || '').toLowerCase().includes('original')
-        );
+        const originalIdx = hlsInstance.audioTracks.findIndex(t => {
+          const name = (t.name || '').toLowerCase();
+          const lang = (t.lang || '').toLowerCase();
+          return name.includes('original') || lang === 'original';
+        });
         if (originalIdx !== -1) {
           hlsInstance.audioTrack = originalIdx;
           console.log('Selected original audio track:', hlsInstance.audioTracks[originalIdx].name);
diff --git a/youtube/static/js/watch.hls.js b/youtube/static/js/watch.hls.js
index cedfbf3..a924fdb 100644
--- a/youtube/static/js/watch.hls.js
+++ b/youtube/static/js/watch.hls.js
@@ -149,17 +149,11 @@ document.addEventListener('DOMContentLoaded', function() {
 
     if (audioTrackSelect) {
         audioTrackSelect.addEventListener('change', function() {
-            const trackId = this.value;
+            const trackIdx = parseInt(this.value);
 
-            if (hls && hls.audioTracks) {
-                const index = hls.audioTracks.findIndex(t =>
-                    t.lang === trackId || t.name === trackId
-                );
-
-                if (index !== -1) {
-                    hls.audioTrack = index;
-                    console.log('Audio track changed to:', index);
-                }
+            if (!isNaN(trackIdx) && hls && hls.audioTracks && trackIdx >= 0 && trackIdx < hls.audioTracks.length) {
+                hls.audioTrack = trackIdx;
+                console.log('Audio track changed to:', hls.audioTracks[trackIdx].name || trackIdx);
             }
         });
     }
@@ -171,13 +165,25 @@ document.addEventListener('DOMContentLoaded', function() {
             // Populate audio track select if needed
             if (audioTrackSelect && data.audioTracks.length > 0) {
                 audioTrackSelect.innerHTML = '<option value="">Select audio track</option>';
-                data.audioTracks.forEach(track => {
+                let originalIdx = -1;
+                data.audioTracks.forEach((track, idx) => {
+                    // Find "original" track
+                    if (originalIdx === -1 && (track.name || '').toLowerCase().includes('original')) {
+                        originalIdx = idx;
+                    }
                     const option = document.createElement('option');
-                    option.value = track.lang || track.name;
-                    option.textContent = track.name || track.lang || `Track ${track.id}`;
+                    option.value = String(idx);
+                    option.textContent = track.name || track.lang || `Track ${idx}`;
                     audioTrackSelect.appendChild(option);
                 });
                 audioTrackSelect.disabled = false;
+
+                // Auto-select "original" audio track
+                if (originalIdx !== -1) {
+                    hls.audioTrack = originalIdx;
+                    audioTrackSelect.value = String(originalIdx);
+                    console.log('Auto-selected original audio track:', data.audioTracks[originalIdx].name);
+                }
             }
         });
     }