@grfzhl/vue-hls-player 1.1.22 → 1.1.24

package/README.md

@@ -207,71 +207,79 @@ At the moment the following attribute are supported:
 ```
 
 ### Last release:
+v1.1.24
+  - Add user-initiated language-changed emit.
+  - Fix unwanted language re-sync on player init.
+  - Improve audio/subtitle switch stability.
+v1.1.23
+  - Fix missing property for subtitles in vue definition
+  - Clean up code
+  - Set mutation observer to body and the video element itself - whatever loads first
 v1.1.22
-- Only show language selection if subtitles or audio options are > 1
+  - Only show language selection if subtitles or audio options are > 1
 v1.1.21
-- Added more tolerant processing for .txt transcripts to allow empty lines as narrators
+  - Added more tolerant processing for .txt transcripts to allow empty lines as narrators
 v1.1.20
-- Stability and UI style improvements for Language switch
+  - Stability and UI style improvements for Language switch
 v1.1.19
-- Switcher supports both single and multi-language HLS sources
-- Automatically syncs subtitle language with selected audio track
-- Works with videos that include or omit subtitles
-- Includes native cuechange event handling for subtitle updates
-- Removed the default media-captions (CC) button from the player
+  - Switcher supports both single and multi-language HLS sources
+  - Automatically syncs subtitle language with selected audio track
+  - Works with videos that include or omit subtitles
+  - Includes native cuechange event handling for subtitle updates
+  - Removed the default media-captions (CC) button from the player
 v1.1.18
-- Added new slot `between-video-and-transcript` to `BasePlayer.vue`, `VDefaultVideoPlayer.vue` and `index.vue`
+  - Added new slot `between-video-and-transcript` to `BasePlayer.vue`, `VDefaultVideoPlayer.vue` and `index.vue`
 to allow injection of custom UI between video and transcript.
-- Introduced a continuous **Frame Pointer Loop** that emits a `pointer-update` event with the current playback time and calculated frame number (30 fps) for real-time frame tracking.
+  - Introduced a continuous **Frame Pointer Loop** that emits a `pointer-update` event with the current playback time and calculated frame number (30 fps) for real-time frame tracking.
 v1.1.17
-- Keep query params for transcription when getting from .vtt file to .txt
+  - Keep query params for transcription when getting from .vtt file to .txt
 v1.1.16
-- Add the options prop to both index.vue and VpDefaultVideoPlayer.vue to pass fullscreen label settings to the BasePlayer component.
-- Update fullscreen toggle logic: adjust aria-label, add or remove mediaIsFullscreen attribute, and safely access media-tooltip via shadowRoot to ensure proper icon and tooltip state handling.
+  - Add the options prop to both index.vue and VpDefaultVideoPlayer.vue to pass fullscreen label settings to the BasePlayer component.
+  - Update fullscreen toggle logic: adjust aria-label, add or remove mediaIsFullscreen attribute, and safely access media-tooltip via shadowRoot to ensure proper icon and tooltip state handling.
 v1.1.13 - v1.1.15
-- Update the hls.js package
-- Fixes
+  - Update the hls.js package
+  - Fixes
 
 v1.1.12
-- added component property to make it easier adding headers (like Authorization header into every hls request)
+  - added component property to make it easier adding headers (like Authorization header into every hls request)
 
 v1.0.14 - v1.1.11
-- Fixes
-- iOS specific improvements
-- New Options to customize the component
-- Fix problem with not updating transcript highlighting
-- Extending overloaded functions for fullscreen mode (WIP)
+  - Fixes
+  - iOS specific improvements
+  - New Options to customize the component
+  - Fix problem with not updating transcript highlighting
+  - Extending overloaded functions for fullscreen mode (WIP)
 
 v1.0.9 - v1.0.14
-- Fixes
-- Small styling improvements
+  - Fixes
+  - Small styling improvements
 
 v1.0.9
-- Fix sizes in fullscreen mode for video
-- Hide transcript block completely when hidden
+  - Fix sizes in fullscreen mode for video
+  - Hide transcript block completely when hidden
 
 v1.0.8
-- Add slots to inject own elements nearby video element
-- Add prop for autoplay video
+  - Add slots to inject own elements nearby video element
+  - Add prop for autoplay video
 
 v1.0.7
-- Add function to handle own logic for fullscreen
+  - Add function to handle own logic for fullscreen
 
 v1.0.6
-- Small fixes
-- Remove debug log
+  - Small fixes
+  - Remove debug log
 
 v1.0.5
-- Load transcriptions additionally to subtitles
-- Add styled transcription block for better readability
-- Improve interaction and dynamic params
+  - Load transcriptions additionally to subtitles
+  - Add styled transcription block for better readability
+  - Improve interaction and dynamic params
 
 v1.0.4
-- Make subtitles dynamic
-- Add new switch to disable the subtitle block
-- Fix some minor issues
+  - Make subtitles dynamic
+  - Add new switch to disable the subtitle block
+  - Fix some minor issues
 
 v1.0.3
-- Removed controls in favour of themable overlay by `player.style`.
-- Updated hls library
-- Added styled caption overlays. Added separate container to show all captions.
+  - Removed controls in favour of themable overlay by `player.style`.
+  - Updated hls library
+  - Added styled caption overlays. Added separate container to show all captions.

package/dist/VideoPlayer/BasePlayer.vue

@@ -71,7 +71,7 @@
   <slot name="between-video-and-transcript"></slot> 
   <slot name="before-transcripts"></slot>
   <SubtitleBlock
-    :key="currentLang"
+    :key="`${currentLang}-${currentSubtitleLang}`"
     ref="transcriptRef"
     :subtitle="currentSubtitle"
     :cursor="videoCursor"
@@ -167,7 +167,7 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['pause', 'video-ended', 'video-fullscreen-change', 'pointer-update'])
+const emit = defineEmits(['pause', 'video-ended', 'video-fullscreen-change', 'pointer-update', 'language-changed'])
 const video = ref(null)
 const subtitlesContainer = ref(null)
 const currentSubtitleLang = ref(null)
@@ -179,12 +179,37 @@ const initialPlayButton = ref(false);
 const hideInitialPlayButton = ref(false);
 const transcriptRef = ref(null);
 const previewImageLink = toRef(props, 'previewImageLink');
+const subtitles = toRef(props, 'subtitles');
 const link = toRef(props, 'link');
 let currentTime = 0
 let hls = null
 let buttonElement = null
 // --- lang switcher ---
 const currentLang = ref(props.defaultLang || 'en')
+const isUserInitiatedLangChange = ref(false)
+
+let initialLoad = true;
+
+watch(
+  () => props.defaultLang,
+  (newLang, oldLang) => {
+    if (initialLoad) {
+      initialLoad = false;
+      return;
+    }
+    
+    if (newLang && newLang !== oldLang && newLang !== currentLang.value) {
+      const hasSub = props.subtitles?.find(s => s.lang === newLang);
+      if (hasSub) {
+        currentSubtitleLang.value = newLang;
+        Array.from(video.value?.textTracks || []).forEach(track => {
+          const tLang = (track.language || track.srclang || '').toLowerCase();
+          track.mode = tLang === newLang.toLowerCase() ? 'showing' : 'disabled';
+        });
+      }
+    }
+  }
+)
 // --- Remember and restore last subtitle language ---
 async function selectLang(lang) {
   if (!video.value || !hls) return;
@@ -224,14 +249,19 @@ async function selectLang(lang) {
       // Matching subtitles for matchLang
       Array.from(video.value?.textTracks || []).forEach(track => {
         const tLang = (track.language || track.srclang || '').toLowerCase();
-        console.log('[LangSwitch] Track', tLang, 'current mode:', track.mode);
         track.mode = tLang === matchLang ? 'showing' : 'disabled';
-        console.log('[LangSwitch] Track', tLang, '→ new mode:', track.mode);
       });
 
       currentSubtitleLang.value = lang;
-      console.log('[LangSwitch] currentSubtitleLang set to', currentSubtitleLang.value);
+      // Emit ONLY if user initiated the change
+      setTimeout(() => {
+        if (isUserInitiatedLangChange.value) {
+          emit('language-changed', lang);
+          isUserInitiatedLangChange.value = false; // Reset flag
+        }
+      }, 100);
     });
+    // Attach HLS
     await hls.loadSource(newSource.file_url);
     video.value.muted = true;
   } catch (err) {
@@ -254,7 +284,6 @@ function updateLangMenuState() {
     const langElement = li.querySelector('span[data-lang]')
     const liLang = langElement?.dataset?.lang;
     // const liLang = li.textContent.trim().toLowerCase();
-  console.log("-- audio li lang", currentLang.value, liLang)
     li.classList.toggle('active', liLang === currentLang.value.toLowerCase());
   });
 
@@ -272,26 +301,6 @@ function updateLangMenuState() {
 
 watch(currentSubtitleLang, () => updateLangMenuState());
 
-/* function selectLang(lang) {
-  currentLang.value = lang;
-  showLangMenu.value = false;
-
-  const newSource = props.multiLangSources.find(s => s.lang === lang);
-  if (newSource) {
-    hls.stopLoad();
-    hls.detachMedia();
-    hls.loadSource(newSource.file_url);
-    hls.attachMedia(video.value);
-    hls.startLoad();
-  }
-
-  // Subtitle sync
-  const textTracks = video.value.textTracks;
-  for (const track of textTracks) {
-    track.mode = track.language === lang ? 'showing' : 'disabled';
-  }
-} */
-
 // --- Frame Pointer Loop ---
 let rafId = null
 const FPS = 30
@@ -344,18 +353,20 @@ const mutedAttr = computed(() => {
   return (props.autoplay || props.isMuted);
 })
 
+
 const currentSubtitle = computed(() => {
-  if(props.subtitles) {
-    const current = props.subtitles.filter((subt) => {
-      if(currentSubtitleLang.value) {
-        return subt.lang === currentSubtitleLang.value
-      } else {
-        return subt.lang === "en"
-      }
-    })
-    return current.length ? current[0] : null
+  if (!props.subtitles?.length) return null;
+  
+  if (currentSubtitleLang.value) {
+    const match = props.subtitles.find(s => s.lang === currentSubtitleLang.value);
+    if (match) return match;
   }
-  return null
+  
+  // Fallback 
+  const defaultMatch = props.subtitles.find(s => s.lang === props.defaultLang);
+  if (defaultMatch) return defaultMatch;
+  
+  return props.subtitles[0];
 })
 
 watch(() => props.autoplay, (a) => {
@@ -537,7 +548,6 @@ function prepareVideoPlayer(link) {
 
   // Preparing video player with link: ${link}
   hls = new Hls(hlsConfig);
-
   // Attach HLS
   hls.loadSource(link);
   hls.attachMedia(video.value);
@@ -580,14 +590,16 @@ function prepareVideoPlayer(link) {
   // Initialize subtitles
   if (props.subtitles?.length > 0) {
     const defaultSub = props.subtitles.find(s => s.lang === props.defaultLang);
-    currentSubtitleLang.value = defaultSub ? defaultSub.lang : props.subtitles[0].lang;
+    currentSubtitleLang.value = defaultSub ? props.defaultLang : props.subtitles[0].lang;
     Array.from(video.value?.textTracks || []).forEach(track => {
       const tLang = (track.language || track.srclang || '').toLowerCase();
-      console.log('[SubtitleInit] Track found:', tLang, '->', tLang === currentSubtitleLang.value.toLowerCase() ? 'showing' : 'disabled');
-      track.mode = tLang === currentSubtitleLang.value.toLowerCase() ? 'showing' : 'disabled';
+      const shouldShow = tLang === currentSubtitleLang.value.toLowerCase();
+      track.mode = shouldShow ? 'showing' : 'disabled';
+      // console.log('[SubtitleInit] Track found:', tLang, '->', shouldShow ? 'showing' : 'disabled');
     });
   }
 
+  selectLang(props.defaultLang);
   // HLS attached to <video>
   hls.recoverMediaError();
 
@@ -639,284 +651,284 @@ function initVideo() {
      * overwrite player.style video fullscreen button
      * to inject own fullscreen logic
      */
-    const observer = new MutationObserver((mutationsList, observer) => {
-      const mediaTheme = document.querySelector('.video-player-theme-container');
-      if (mediaTheme && mediaTheme.shadowRoot) {
-        // controllbar
-        const controlBar = mediaTheme.shadowRoot.querySelector('media-control-bar');
-        const fullscreenButton = mediaTheme.shadowRoot.querySelector('media-fullscreen-button');
-        buttonElement = fullscreenButton
-        const playbackRateButton = mediaTheme.shadowRoot.querySelector('media-playback-rate-menu');
-        playbackRateButton.setAttribute('rates', '0.25 0.5 0.75 1 1.5 2 3');
-        if (fullscreenButton) {
-          fullscreenButton.handleClick = async (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            event.stopImmediatePropagation();
-            startFullscreen();
-          }
-          // --- Remove default CC button ---
-          const ccButton = mediaTheme.shadowRoot.querySelector('media-captions-button');
-          if (ccButton) {
-            ccButton.remove();
-          }
-
-          // --- Amazon Prime Style Language Switcher ---
-          if (controlBar && !controlBar.querySelector('.lang-switcher')
-            && (props.multiLangSources.length > 1 || props.subtitles.length > 1)) {
-            const langDiv = document.createElement('div');
-            langDiv.className = 'lang-switcher';
-            langDiv.innerHTML = `
-              <style>
-                .lang-switcher {
-                  position: relative;
-                  display: flex;
-                  align-items: center;
-                  justify-content: center;
-                  margin-left: var(--media-control-spacing, 6px);
-                }
-
-                .lang-switcher button {
-                  all: unset;
-                  display: flex;
-                  align-items: center;
-                  justify-content: center;
-                  cursor: pointer;
-                  height: var(--media-button-height, 32px);
-                  border-radius: 25%;
-                  min-width: var(--media-button-height, 32px);
-                  padding: var(--media-button-padding, 0 5px);
-                  background: transparent;
-                  transition: background 0.15s ease, transform 0.1s ease;
-                }
-
-                .lang-switcher button svg {
-                  width: var(--media-icon-size, 24px);
-                  height: var(--media-icon-size, 24px);
-                  color: var(--media-icon-color, white);
-                  stroke: currentColor;
-                  opacity: var(--media-icon-opacity, 0.9);
-                  pointer-events: none;
-                  transition: opacity 0.15s ease;
-                }
-
-                .lang-switcher button:hover svg {
-                  transform: scale(1.1);
-                }
-
-                .lang-switcher button:hover {
-                  opacity: var(--media-icon-opacity-hover, 1);
-                  background: var(--media-control-hover-background, rgba(50 50 70 / .7));
-                  transition: backdrop-filter 0.3s, -webkit-backdrop-filter 0.3s;
-                  box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 5px;
-                  backdrop-filter: blur(10px) invert(15%) brightness(80%) opacity(1);
-                  padding: 5px;
-                  color: var(--media-text-color, var(--media-primary-color, rgb(238 238 238)));
-                }
-
-                .lang-btn[title]:hover::after {
-                  content: attr(title);
-                  position: fixed;
-                  bottom: 122%;
-                  right: -100%;
-                  white-space: nowrap;
-                  background: var(--media-tooltip-background, rgba(0,0,0,0.2));
-                  color: var(--media-tooltip-color, #fff);
-                  border-radius: 4px;
-                  padding: 4px 15px;
-                  font-size: var(--media-font-size, 12px);
-                  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
-                  line-height: calc(1.2 * var(--base));
-                }
-
-                .lang-menu {
-                  position: absolute;
-                  bottom: calc(var(--media-button-height, 32px) * 1.7);
-                  right: -48px;
-                  background: var(--media-control-bar-background, rgba(20,20,20,0.4));
-                  backdrop-filter: blur(12px);
-                  border-radius: 12px;
-                  box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 5px;
-                  padding: 10px;
-                  min-width: 240px;
-                  display: none;
-                  animation: fadeUp 0.15s ease-out;
-                  color: var(--media-text-color, #fff);
-                  font-family: var(--media-font-family, system-ui, sans-serif);
-                  font-size: var(--media-font-size, 13px);
-                  z-index: 9999;
-                }
-
-                @keyframes fadeUp {
-                  from { opacity: 0; transform: translateY(8px); }
-                  to { opacity: 1; transform: translateY(0); }
-                }
-
-                .lang-columns {
-                  display: flex;
-                  justify-content: space-between;
-                  gap: 1rem;
-                }
-
-                .lang-col {
-                  flex: 1;
-                  display: flex;
-                  flex-direction: column;
-                  margin: 0;
-                  padding: 0;
-                }
-
-                .lang-col .title {
-                  line-height: calc(1.2 * var(--base));
-                  font-weight: 600;
-                  font-size: calc(var(--media-font-size, 13px) - 1px);
-                  margin-bottom: 4px;
-                  border-bottom: 1px solid rgba(255,255,255,0.1);
-                  padding-bottom: 2px;
-                }
-
-                .lang-col ul {
-                  list-style: none;
-                  margin: 0;
-                  padding: 0;
-                }
-
-                .lang-col li {
-                  display: flex;
-                  align-items: center;
-                  justify-content: space-between;
-                  cursor: pointer;
-                  border-radius: 4px;
-                  padding: 2px 12px;
-                  transition: background 0.15s ease, color 0.15s ease;
-                }
-                
-                .lang-col li span {
-                  line-height: calc(1.2 * var(--base));
-                }
-
-                .lang-col li:hover {
-                  background: var(--media-control-hover-background, rgba(255,255,255,0.15));
-                }
-
-                .lang-col li.active {
-                  font-weight: 500;
-                  color: var(--media-accent-color, #fff);
-                }
-
-                .lang-col li .icon {
-                  opacity: 0;
-                  transition: opacity 0.15s ease, transform 0.15s ease;
-                  transform: translateX(2px);
-                }
-
-                .lang-col li.active .icon {
-                  opacity: 1;
-                  transform: translateX(0);
-                }
-              </style>
-
-              <button title="Audio & Subtitles" class="lang-btn">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" fill="none" stroke="currentColor" stroke-width="1.5"
-                    stroke-linecap="round" stroke-linejoin="round">
-                  <path d="m5 8 6 6"/>
-                  <path d="m4 14 6-6 2-3"/>
-                  <path d="M2 5h12"/>
-                  <path d="M7 2h1"/>
-                  <path d="m22 22-5-10-5 10"/>
-                  <path d="M14 18h6"/>
-                </svg>
-              </button>
-
-              <div class="lang-menu">
-                <div class="lang-columns">
-                  <ul class="lang-col audio-col"><li class="title">Audio</li></ul>
-                  <ul class="lang-col sub-col"><li class="title">Subtitles</li></ul>
-                </div>
-              </div>
-            `;
-
-            const menu = langDiv.querySelector('.lang-menu');
-            const audioCol = menu.querySelector('.audio-col');
-            const subCol = menu.querySelector('.sub-col');
-            const button = langDiv.querySelector('button');
-            menu.addEventListener('click', e => e.stopPropagation());
-            // Chrome Media Player style check icon
-            const renderIcon = () => `
-              <svg aria-hidden="true" viewBox="0 1 24 24" width="16" height="16" part="checked-indicator indicator">
-                <path fill="currentColor" d="m10 15.17 9.193-9.191 1.414 1.414-10.606 10.606-6.364-6.364 1.414-1.414 4.95 4.95Z"></path>
-              </svg>
-            `;
-
-            // Audio options
-            props.multiLangSources.forEach(src => {
-              const li = document.createElement('li');
-              li.innerHTML = `
-                <span data-lang="${ src.lang }">${src.label || src.lang.toUpperCase()}</span>
-                <span class="icon">${renderIcon()}</span>
-              `;
-              if (src.lang === currentLang.value) li.classList.add('active');
-              li.addEventListener('click', () => {
-                audioCol.querySelectorAll('li').forEach(el => el.classList.remove('active'));
-                li.classList.add('active');
-                selectLang(src.lang);
-                menu.style.display = 'none';
-              });
-              audioCol.appendChild(li);
-            });
-
-            props.subtitles.forEach(sub => {
-              const li = document.createElement('li');
-              li.innerHTML = `
-                <span data-lang="${ sub.lang }">${sub.label || sub.lang.toUpperCase()}</span>
-                <span class="icon">${renderIcon()}</span>
-              `;
-
-              if (sub.lang === currentSubtitleLang.value) li.classList.add('active');
-              li.addEventListener('click', () => {
-                Array.from(video.value?.textTracks || []).forEach(track => {
-                  const tLang = (track.language || track.srclang || '').toLowerCase();
-                  track.mode = tLang === sub.lang.toLowerCase() ? 'showing' : 'disabled';
-                });
-                subCol.querySelectorAll('li').forEach(el => el.classList.remove('active'));
-                li.classList.add('active');
-                menu.style.display = 'none';
-                currentSubtitleLang.value = sub.lang;
-              });
-              subCol.appendChild(li);
-            });
+    const observer = new MutationObserver(mutationObserver)
+    // --- Start pointer-update loop ---
+    if (!rafId) {
+      emitPointerUpdate()
+    }    
+    observer.observe(document.querySelector('.video-player-theme-container'), { childList: true, subtree: true });
+    observer.observe(document.body, { childList: true, subtree: true });
+  }
+}
 
-            button.addEventListener('click', e => {
-              e.stopPropagation();
-              const isOpen = menu.style.display === 'block';
-              menu.style.display = isOpen ? 'none' : 'block';
-              updateLangMenuState();
-            });
-            document.addEventListener('click', e => {
-              if (!menu.contains(e.target) && !button.contains(e.target)) {
-                menu.style.display = 'none';
-                button.setAttribute('aria-expanded', 'false');
-                updateLangMenuState();
-              }
+const mutationObserver = (mutationsList, observer) => {
+  const mediaTheme = document.querySelector('.video-player-theme-container');
+  if (mediaTheme && mediaTheme.shadowRoot) {
+    // controllbar
+    const controlBar = mediaTheme.shadowRoot.querySelector('media-control-bar');
+    const fullscreenButton = mediaTheme.shadowRoot.querySelector('media-fullscreen-button');
+    buttonElement = fullscreenButton
+    const playbackRateButton = mediaTheme.shadowRoot.querySelector('media-playback-rate-menu');
+    playbackRateButton.setAttribute('rates', '0.25 0.5 0.75 1 1.5 2 3');
+    if (fullscreenButton) {
+      fullscreenButton.handleClick = async (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+        startFullscreen();
+      }
+      // --- Remove default CC button ---
+      const ccButton = mediaTheme.shadowRoot.querySelector('media-captions-button');
+      if (ccButton) {
+        ccButton.remove();
+      }
+      // --- Amazon Prime Style Language Switcher ---
+      if (controlBar && !controlBar.querySelector('.lang-switcher')
+        && (props.multiLangSources.length > 1 || props.subtitles.length > 1)) {
+        const langDiv = document.createElement('div');
+        langDiv.className = 'lang-switcher';
+        langDiv.innerHTML = `
+          <style>
+            .lang-switcher {
+              position: relative;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              margin-left: var(--media-control-spacing, 6px);
+            }
+
+            .lang-switcher button {
+              all: unset;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              cursor: pointer;
+              height: var(--media-button-height, 32px);
+              border-radius: 25%;
+              min-width: var(--media-button-height, 32px);
+              padding: var(--media-button-padding, 0 5px);
+              background: transparent;
+              transition: background 0.15s ease, transform 0.1s ease;
+            }
+
+            .lang-switcher button svg {
+              width: var(--media-icon-size, 24px);
+              height: var(--media-icon-size, 24px);
+              color: var(--media-icon-color, white);
+              stroke: currentColor;
+              opacity: var(--media-icon-opacity, 0.9);
+              pointer-events: none;
+              transition: opacity 0.15s ease;
+            }
+
+            .lang-switcher button:hover svg {
+              transform: scale(1.1);
+            }
+
+            .lang-switcher button:hover {
+              opacity: var(--media-icon-opacity-hover, 1);
+              background: var(--media-control-hover-background, rgba(50 50 70 / .7));
+              transition: backdrop-filter 0.3s, -webkit-backdrop-filter 0.3s;
+              box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 5px;
+              backdrop-filter: blur(10px) invert(15%) brightness(80%) opacity(1);
+              padding: 5px;
+              color: var(--media-text-color, var(--media-primary-color, rgb(238 238 238)));
+            }
+
+            .lang-btn[title]:hover::after {
+              content: attr(title);
+              position: fixed;
+              bottom: 122%;
+              right: -100%;
+              white-space: nowrap;
+              background: var(--media-tooltip-background, rgba(0,0,0,0.2));
+              color: var(--media-tooltip-color, #fff);
+              border-radius: 4px;
+              padding: 4px 15px;
+              font-size: var(--media-font-size, 12px);
+              box-shadow: 0 2px 8px rgba(0,0,0,0.4);
+              line-height: calc(1.2 * var(--base));
+            }
+
+            .lang-menu {
+              position: absolute;
+              bottom: calc(var(--media-button-height, 32px) * 1.7);
+              right: -48px;
+              background: var(--media-control-bar-background, rgba(20,20,20,0.4));
+              backdrop-filter: blur(12px);
+              border-radius: 12px;
+              box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 5px;
+              padding: 10px;
+              min-width: 240px;
+              display: none;
+              animation: fadeUp 0.15s ease-out;
+              color: var(--media-text-color, #fff);
+              font-family: var(--media-font-family, system-ui, sans-serif);
+              font-size: var(--media-font-size, 13px);
+              z-index: 9999;
+            }
+
+            @keyframes fadeUp {
+              from { opacity: 0; transform: translateY(8px); }
+              to { opacity: 1; transform: translateY(0); }
+            }
+
+            .lang-columns {
+              display: flex;
+              justify-content: space-between;
+              gap: 1rem;
+            }
+
+            .lang-col {
+              flex: 1;
+              display: flex;
+              flex-direction: column;
+              margin: 0;
+              padding: 0;
+            }
+
+            .lang-col .title {
+              line-height: calc(1.2 * var(--base));
+              font-weight: 600;
+              font-size: calc(var(--media-font-size, 13px) - 1px);
+              margin-bottom: 4px;
+              border-bottom: 1px solid rgba(255,255,255,0.1);
+              padding-bottom: 2px;
+            }
+
+            .lang-col ul {
+              list-style: none;
+              margin: 0;
+              padding: 0;
+            }
+
+            .lang-col li {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              cursor: pointer;
+              border-radius: 4px;
+              padding: 2px 12px;
+              transition: background 0.15s ease, color 0.15s ease;
+            }
+            
+            .lang-col li span {
+              line-height: calc(1.2 * var(--base));
+            }
+
+            .lang-col li:hover {
+              background: var(--media-control-hover-background, rgba(255,255,255,0.15));
+            }
+
+            .lang-col li.active {
+              font-weight: 500;
+              color: var(--media-accent-color, #fff);
+            }
+
+            .lang-col li .icon {
+              opacity: 0;
+              transition: opacity 0.15s ease, transform 0.15s ease;
+              transform: translateX(2px);
+            }
+
+            .lang-col li.active .icon {
+              opacity: 1;
+              transform: translateX(0);
+            }
+          </style>
+
+          <button title="Audio & Subtitles" class="lang-btn">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" fill="none" stroke="currentColor" stroke-width="1.5"
+                stroke-linecap="round" stroke-linejoin="round">
+              <path d="m5 8 6 6"/>
+              <path d="m4 14 6-6 2-3"/>
+              <path d="M2 5h12"/>
+              <path d="M7 2h1"/>
+              <path d="m22 22-5-10-5 10"/>
+              <path d="M14 18h6"/>
+            </svg>
+          </button>
+
+          <div class="lang-menu">
+            <div class="lang-columns">
+              <ul class="lang-col audio-col"><li class="title">Audio</li></ul>
+              <ul class="lang-col sub-col"><li class="title">Subtitles</li></ul>
+            </div>
+          </div>
+        `;
+        const menu = langDiv.querySelector('.lang-menu');
+        const audioCol = menu.querySelector('.audio-col');
+        const subCol = menu.querySelector('.sub-col');
+        const button = langDiv.querySelector('button');
+        menu.addEventListener('click', e => e.stopPropagation());
+        // Chrome Media Player style check icon
+        const renderIcon = () => `
+          <svg aria-hidden="true" viewBox="0 1 24 24" width="16" height="16" part="checked-indicator indicator">
+            <path fill="currentColor" d="m10 15.17 9.193-9.191 1.414 1.414-10.606 10.606-6.364-6.364 1.414-1.414 4.95 4.95Z"></path>
+          </svg>
+        `;
+
+        // Audio options
+        props.multiLangSources.forEach(src => {
+          const li = document.createElement('li');
+          li.innerHTML = `
+            <span data-lang="${ src.lang }">${src.label || src.lang.toUpperCase()}</span>
+            <span class="icon">${renderIcon()}</span>
+          `;
+          if (src.lang === currentLang.value) li.classList.add('active');
+          li.addEventListener('click', () => {
+            audioCol.querySelectorAll('li').forEach(el => el.classList.remove('active'));
+            li.classList.add('active');
+            isUserInitiatedLangChange.value = true;
+            selectLang(src.lang);
+            menu.style.display = 'none';
+          });
+          audioCol.appendChild(li);
+        });
+        props.subtitles.forEach(sub => {
+          const li = document.createElement('li');
+          li.innerHTML = `
+            <span data-lang="${ sub.lang }">${sub.label || sub.lang.toUpperCase()}</span>
+            <span class="icon">${renderIcon()}</span>
+          `;
+
+          if (sub.lang === currentSubtitleLang.value) li.classList.add('active');
+          li.addEventListener('click', () => {
+            Array.from(video.value?.textTracks || []).forEach(track => {
+              const tLang = (track.language || track.srclang || '').toLowerCase();
+              track.mode = tLang === sub.lang.toLowerCase() ? 'showing' : 'disabled';
             });
+            subCol.querySelectorAll('li').forEach(el => el.classList.remove('active'));
+            li.classList.add('active');
+            menu.style.display = 'none';
+            currentSubtitleLang.value = sub.lang;
+          });
+          subCol.appendChild(li);
+        });
 
-            controlBar.insertBefore(langDiv, fullscreenButton);
+        button.addEventListener('click', e => {
+          e.stopPropagation();
+          const isOpen = menu.style.display === 'block';
+          menu.style.display = isOpen ? 'none' : 'block';
+          updateLangMenuState();
+        });
+        document.addEventListener('click', e => {
+          if (!menu.contains(e.target) && !button.contains(e.target)) {
+            menu.style.display = 'none';
+            button.setAttribute('aria-expanded', 'false');
+            updateLangMenuState();
           }
+        });
 
-          observer.disconnect();
-        } else {
-          console.error('Button not found in Shadow DOM!');
-        }
-      } else {
-        console.error('Shadow Root not found!');
+        controlBar.insertBefore(langDiv, fullscreenButton);
       }
-    })
-    
-    // --- Start pointer-update loop ---
-    if (!rafId) {
-      emitPointerUpdate()
+
+      observer.disconnect();
+    } else {
+      console.error('Button not found in Shadow DOM!');
     }
-    observer.observe(document.body, { childList: true, subtree: true });
+  } else {
+    console.error('Shadow Root not found!');
   }
 }
 
@@ -938,16 +950,6 @@ function changeSpeed(e) {
     video.value.playbackRate = video.value.playbackRate - 0.25
   }
 }
-defineExpose({ startFullscreen, getHls: () => hls, getVideo: () => video.value,
-  changeSource: (newLink) => {
-    if (!newLink) return;
-    hls.stopLoad();
-    hls.detachMedia();
-    hls.loadSource(newLink);
-    hls.attachMedia(video.value);
-    hls.startLoad();
-  }
- }); 
 
 </script>
 <style>

package/dist/VideoPlayer/VDefaultVideoPlayer.vue

@@ -9,6 +9,7 @@
     :autoplay="autoplay"
     :isControls="isControls"
     :onVideoEnd="onVideoEnd"
+    :subtitles="subtitles"
     :additionHeaders="additionHeaders"
     :isFullscreen="isFullscreen"
     :showTranscriptBlock="showTranscriptBlock"
@@ -16,6 +17,7 @@
     @pause="pause"
     @video-ended="onVideoEnd"
     @video-fullscreen-change="onFullscreenChange"
+    @language-changed="onLanguageChanged"
     v-model="videoElement"
     ref="childRef"
   >
@@ -31,7 +33,7 @@
 import BasePlayer from './BasePlayer.vue'
 import { ref, toRef } from 'vue'
 
-const emit = defineEmits(['pause', 'video-ended', 'video-fullscreen-change'])
+const emit = defineEmits(['pause', 'video-ended', 'video-fullscreen-change', 'language-changed'])
 
 const videoElement = ref(null);
 const childRef = ref(null)
@@ -88,6 +90,10 @@ const props = defineProps({
   additionHeaders: {
     type: Object,
     default: {}
+  },
+  subtitles: {
+    type: Array,
+    default: []
   }
 })
 
@@ -109,6 +115,9 @@ function onFullscreenChange(data) {
   emit('video-fullscreen-change', data);
 }
 
+function onLanguageChanged(data) {
+  emit('language-changed', data);
+}
 function startFullscreen() {
   childRef.value.startFullscreen();
 }

package/dist/VideoPlayer/index.vue

@@ -11,6 +11,7 @@
     :isFullscreen="isFullscreen"
     :link="link"
     :progress="progress"
+    :subtitles="subtitles"
     :isMuted="isMuted"
     :autoplay="autoplay"
     v-model="videoElement"
@@ -98,6 +99,10 @@ const props = defineProps({
   additionHeaders: {
     type: Object,
     default: {}
+  },
+  subtitles: {
+    type: Array,
+    default: []
   }
 })
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@grfzhl/vue-hls-player",
   "private": false,
-  "version": "1.1.22",
+  "version": "1.1.24",
   "type": "module",
   "files": [
     "dist"