@grfzhl/vue-hls-player 1.1.18 → 1.1.20

package/README.md

@@ -207,6 +207,14 @@ At the moment the following attribute are supported:
 ```
 
 ### Last release:
+v1.1.20
+- 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
 v1.1.18
 - 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.

package/dist/VideoPlayer/BasePlayer.vue

@@ -44,6 +44,7 @@
           <track 
             v-if="subtitles.length"
             v-for="(subtitle, i) in subtitles"
+            :key="subtitle.lang + '-' + currentLang"
             :src="subtitle.link"
             kind="subtitles"
             :srclang="subtitle.lang"
@@ -70,6 +71,7 @@
   <slot name="between-video-and-transcript"></slot> 
   <slot name="before-transcripts"></slot>
   <SubtitleBlock
+    :key="currentLang"
     ref="transcriptRef"
     :subtitle="currentSubtitle"
     :cursor="videoCursor"
@@ -87,6 +89,7 @@ import { onMounted, onUpdated, ref, onUnmounted, computed, watch, toRef } from '
 import Hls from 'hls.js'
 import 'player.style/sutro';
 import SubtitleBlock from './SubtitleBlock.vue';
+// import 'media-chrome';
 
 const props = defineProps({
   introTitle: {
@@ -153,6 +156,14 @@ const props = defineProps({
   options: {
     type: Object,
     default: {}
+  },
+  multiLangSources: {
+  type: Array,
+  default: () => []
+  },
+  defaultLang: {
+    type: String,
+    default: 'en'
   }
 })
 
@@ -172,10 +183,135 @@ const link = toRef(props, 'link');
 let currentTime = 0
 let hls = null
 let buttonElement = null
+// --- lang switcher ---
+const currentLang = ref(props.defaultLang || 'en')
+// --- Remember and restore last subtitle language ---
+async function selectLang(lang) {
+  if (!video.value || !hls) return;
+  if (lang === currentLang.value) return;
+
+  const newSource = props.multiLangSources?.find(s => s.lang === lang);
+  if (!newSource?.file_url) {
+    //Missing HLS source for ${lang}
+    return;
+  }
+
+  // Remember playback state
+  const wasPaused = video.value.paused;
+  const time = video.value.currentTime;
+  const wasMuted = video.value.muted;
+  const rate = video.value.playbackRate;
+
+  currentLang.value = lang;
+  // Switching to ${lang}...
+
+  try {
+    hls.stopLoad();
+    hls = new Hls(hlsConfig);
+    hls.attachMedia(video.value);
+
+    hls.once(Hls.Events.MANIFEST_PARSED, () => {
+      // Manifest loaded for ${lang}
+
+      // Restore playback
+      video.value.currentTime = Math.max(0, time - 0.1);
+      video.value.playbackRate = rate;
+      if (!wasPaused) video.value.play();
+      setTimeout(() => (video.value.muted = wasMuted), 400);
+
+      // Match subtitle language with audio
+      const matchLang = lang.toLowerCase();
+      // 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);
+    });
+    await hls.loadSource(newSource.file_url);
+    video.value.muted = true;
+  } catch (err) {
+    console.error("[LangSwitch] Reload failed:", err);
+  }
+}
+
+function updateLangMenuState() {
+  const mediaTheme = document.querySelector('.video-player-theme-container');
+  const controlBar = mediaTheme?.shadowRoot?.querySelector('media-control-bar');
+  const langSwitcher = controlBar?.querySelector('.lang-switcher');
+  const menu = langSwitcher?.querySelector('.lang-menu');
+  if (!menu || !video.value) return;
+
+  const audioCol = menu.querySelector('.audio-col');
+  const subCol = menu.querySelector('.sub-col');
+  
+  // --- Audio ---
+  audioCol?.querySelectorAll('li').forEach(li => {
+    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());
+  });
+
+  // --- Subtitles ---
+  const activeTrack = Array.from(video.value?.textTracks || []).find(t => t.mode === 'showing');
+  const activeSubLang = activeTrack
+    ? (activeTrack.language || activeTrack.srclang || '').toLowerCase()
+    : 'aus';
+  subCol?.querySelectorAll('li').forEach(li => {
+    const subElement = li.querySelector('span[data-lang]')
+    const liLang = subElement?.dataset?.lang;
+    li.classList.toggle('active', liLang === activeSubLang);
+  });
+}
+
+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
+const hlsConfig = {
+  fetchSetup: async (context, init) => {
+    init = init || {};
+    init.headers = new Headers(init.headers || {});
+    for (const [key, value] of Object.entries(props.additionHeaders)) {
+      init.headers.set(key, value);
+    }
+    return new Request(context.url, init);
+  },
+  xhrSetup: async (xhr, url) => {
+    const additionHeaders = props.additionHeaders || {};
+    for (const [key, value] of Object.entries(additionHeaders)) {
+      const val = typeof value === 'function' ? await value(url) : value;
+      if (val != null) xhr.setRequestHeader(key, val);
+    }
+  }
+};
 
 function emitPointerUpdate() {
   if (video.value) {
@@ -222,7 +358,7 @@ const currentSubtitle = computed(() => {
   return null
 })
 
-watch([props, videoElement], (a) => {
+watch(() => props.autoplay, (a) => {
   if(a[0].autoplay && a[1] && a[1].paused) {
     // autoplay is only possible when muted
     a[1].muted = true
@@ -258,8 +394,6 @@ async function startFullscreen() {
     buttonElement.removeAttribute('mediaIsFullscreen');
     const tooltip = buttonElement.shadowRoot?.querySelector('media-tooltip');
     if (tooltip) {
-      console.log("Tooltip gefunden:", tooltip);
-
       // Slots für Tooltip-Enter und Tooltip-Exit finden
       const enterTooltip = tooltip.querySelector('slot[name="tooltip-enter"]');
       const exitTooltip = tooltip.querySelector('slot[name="tooltip-exit"]');
@@ -280,8 +414,6 @@ async function startFullscreen() {
       buttonElement.setAttribute('mediaIsFullscreen', '');
       const tooltip = buttonElement.shadowRoot?.querySelector('media-tooltip');
       if (tooltip) {
-        console.log("Tooltip gefunden:", tooltip);
-
         // Slots für Tooltip-Enter und Tooltip-Exit finden
         const enterTooltip = tooltip.querySelector('slot[name="tooltip-enter"]');
         const exitTooltip = tooltip.querySelector('slot[name="tooltip-exit"]');
@@ -395,81 +527,78 @@ function seekVideo(time) {
 }
 
 function prepareVideoPlayer(link) {
-  let initiallyLoaded = true;
-  if (video.value) {
-    if (hls) {
-      hls.detachMedia();
-      hls.destroy();
-      initiallyLoaded = false;
-    }
-    hls = new Hls({
-      fetchSetup: async (context, init) => {
-        init = init || {};
-        init.headers = new Headers(init.headers || {});
-        // set headers
-        for (const [key, value] of Object.entries(props.additionHeaders)) {
-          init.headers.set(key, value);
-        }
-        return new Request(context.url, init);
-      },
-      xhrSetup: async (xhr, url) => {
-        const additionHeaders = props.additionHeaders || {};
-        for (const [key, value] of Object.entries(additionHeaders)) {
-          const val = typeof value === 'function' ? await value(url) : value;
-          // set headers
-          if (val != null) xhr.setRequestHeader(key, val);
+  if (!video.value) return;
+
+  // Reset previous HLS instance
+  if (hls) {
+    hls.detachMedia();
+    hls.destroy();
+  }
+
+  // Preparing video player with link: ${link}
+  hls = new Hls(hlsConfig);
+
+  // Attach HLS
+  hls.loadSource(link);
+  hls.attachMedia(video.value);
+  video.value.textTracks.addEventListener('change', () => {
+    Array.from(video.value?.textTracks || []).forEach(track => {
+      console.log('[TrackChange] Track', track.language || track.srclang, '→', track.mode);
+    });
+  });
+  // Native subtitle handling – without polling
+  Array.from(video.value?.textTracks || []).forEach(track => {
+    track.addEventListener("cuechange", e => {
+      const cues = e.target.activeCues;
+      if (subtitlesContainer.value) {
+        if (cues && cues.length > 0) {
+          subtitlesContainer.value.style.display = "block";
+          subtitlesContainer.value.textContent = cues[0].text;
+        } else {
+          subtitlesContainer.value.style.display = "none";
         }
       }
     });
-    hls.loadSource(link)
-    hls.attachMedia(video.value)
-    hls.recoverMediaError()
-
-    video.value.muted = props.isMuted
-    video.value.currentTime = props.progress
-
-    const textTracks = video.value.textTracks;
-    let previousModes = Array.from(textTracks).map((track) => track.mode);
-    function checkTrackModeChanges() {
-      Array.from(textTracks).forEach((track, index) => {
-        track.addEventListener("cuechange", () => {
-          const activeCues = track.activeCues;
-          currentSubtitleLang.value = track.language
-          if(subtitlesContainer.value) {
-            if (activeCues && activeCues.length > 0) {
-              subtitlesContainer.value.textContent = activeCues[0].text
-              subtitlesContainer.value.style.display = "block";
-            } else {
-              subtitlesContainer.value.style.display = "none";
-            }
-          }
-        });
-        if (track.mode !== previousModes[index]) {
-          if (track.mode === "showing") {
-            const activeCues = track.activeCues;
-            currentSubtitleLang.value = track.language
-            if(subtitlesContainer.value) {
-              if (activeCues && activeCues.length > 0) {
-                subtitlesContainer.value.style.display = "block";
-                subtitlesContainer.value.textContent = activeCues[0].text
-              } else {
-                subtitlesContainer.value.style.display = "none";
-              }
-            }
-          } else {
-            if(subtitlesContainer.value) {
-              subtitlesContainer.value.style.display = "none";
-            }
-          }
-          previousModes[index] = track.mode;
+  });
+
+  // Automatically attach new tracks (after language switch)
+  video.value.textTracks.onaddtrack = (e) => {
+    const track = e.track;
+    track.addEventListener("cuechange", evt => {
+      const cues = evt.target.activeCues;
+      if (subtitlesContainer.value) {
+        if (cues && cues.length > 0) {
+          subtitlesContainer.value.style.display = "block";
+          subtitlesContainer.value.textContent = cues[0].text;
+        } else {
+          subtitlesContainer.value.style.display = "none";
         }
-      });
-    }
-    setInterval(checkTrackModeChanges, 100);
-    initVideo();
+      }
+    });
+  };
+
+  // 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;
+    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';
+    });
   }
+
+  // HLS attached to <video>
+  hls.recoverMediaError();
+
+  video.value.muted = props.isMuted;
+  video.value.currentTime = props.progress;
+  // Chrome-like: update menu whenever track mode changes
+  video.value.textTracks.addEventListener('change', updateLangMenuState);
+  initVideo(); // Init controls etc.
 }
 
+
 function initVideo() {
   if (video.value) {
 
@@ -513,6 +642,8 @@ function initVideo() {
     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');
@@ -524,6 +655,253 @@ function initVideo() {
             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')) {
+            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);
+            });
+
+            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();
+              }
+            });
+
+            controlBar.insertBefore(langDiv, fullscreenButton);
+          }
+
           observer.disconnect();
         } else {
           console.error('Button not found in Shadow DOM!');
@@ -532,6 +910,7 @@ function initVideo() {
         console.error('Shadow Root not found!');
       }
     })
+    
     // --- Start pointer-update loop ---
     if (!rafId) {
       emitPointerUpdate()
@@ -558,7 +937,16 @@ function changeSpeed(e) {
     video.value.playbackRate = video.value.playbackRate - 0.25
   }
 }
-defineExpose({ startFullscreen }); 
+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/SubtitleBlock.vue

@@ -78,6 +78,8 @@
 
 .subtitles li .content {
   max-width: 800px;
+  display: flex;
+  flex-direction: column;
 }
 
 .subtitles li .content .meta {

package/package.json

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