@grfzhl/vue-hls-player 1.1.26 → 1.1.28

package/README.md

@@ -207,6 +207,14 @@ At the moment the following attribute are supported:
 ```
 
 ### Last release:
+v1.1.28
+  - Always render the subtitle overlay container regardless of fullscreen or transcript state.
+  - Clear subtitle overlay text when no text track is actively showing.
+v1.1.27
+  - Expose BasePlayer fullscreen control through wrapper components.
+  - Add support for forced fullscreen re-entry from parent integrations.
+  - Avoid fullscreen request errors when no user activation is available.
+  - Keep fullscreen state and emitted events in sync across native and document fullscreen modes.
 v1.1.26
   - Prevent HLS chunk preloading during player initialization.
   - Start HLS loading only after user interaction.

package/dist/VideoPlayer/BasePlayer.vue

@@ -63,7 +63,7 @@
           </media-fullscreen-button>
         </media-control-bar>
       </media-theme-sutro>
-      <div class="custom-subtitles" v-show="(isFullscreen) || (!showTranscriptBlock)">
+      <div class="custom-subtitles" v-show="isFullscreen">
         <div class="subtitle-text" ref="subtitlesContainer" style="display: none;"></div>
       </div>
       <slot name="after-media"></slot>
@@ -355,6 +355,8 @@ function emitPointerUpdate() {
 
 const videoElement = defineModel()
 
+defineExpose({ startFullscreen })
+
 onMounted(() => {
   if (video.value) {
     video.value.muted = mutedAttr.value
@@ -417,57 +419,79 @@ watch(
   }
 )
 
-async function startFullscreen() {
+function updateFullscreenButtonState(isActive) {
+  if (!buttonElement) return
+
+  buttonElement.setAttribute(
+    'aria-label',
+    isActive ? 'Exit fullscreen mode' : 'Enter fullscreen mode'
+  )
+
+  if (isActive) {
+    buttonElement.setAttribute('mediaIsFullscreen', '')
+  } else {
+    buttonElement.removeAttribute('mediaIsFullscreen')
+  }
+
+  const tooltip = buttonElement.shadowRoot?.querySelector('media-tooltip')
+  const enterTooltip = tooltip?.querySelector('slot[name="tooltip-enter"]')
+  const exitTooltip = tooltip?.querySelector('slot[name="tooltip-exit"]')
+
+  if (enterTooltip) {
+    enterTooltip.style.display = isActive ? 'none' : 'block'
+  }
+
+  if (exitTooltip) {
+    exitTooltip.style.display = isActive ? 'block' : 'none'
+  }
+}
+
+async function startFullscreen(forceEnter = false) {
   let vpVideoBlock = document.getElementById(props.fullScreenElement);
+  const hasDocumentFullscreen = !!document.fullscreenElement;
+  const hasNativeVideoFullscreen = !!video.value?.webkitDisplayingFullscreen;
+  const hasUserActivation =
+    typeof navigator === 'undefined' ||
+    !navigator.userActivation ||
+    navigator.userActivation.isActive;
   if(video.value) {
     currentTime = video.value.currentTime
   }
-  if (document.fullscreenElement) {
+  if (forceEnter && (hasDocumentFullscreen || hasNativeVideoFullscreen)) {
+    isFullscreen.value = true;
+    emit('video-fullscreen-change', true)
+    return;
+  }
+
+  // Browsers only allow fullscreen requests from a short-lived user interaction.
+  if (forceEnter && !hasUserActivation) {
+    return;
+  }
+
+  if (hasDocumentFullscreen || hasNativeVideoFullscreen) {
     if (screen.orientation && screen.orientation.unlock) {
       screen.orientation.unlock();
     }
-    await document.exitFullscreen();
+    if (document.fullscreenElement && typeof document.exitFullscreen === 'function') {
+      await document.exitFullscreen();
+    }
     if (/iPhone|iPad|AppleWebKit/i.test(navigator.userAgent)) {
-      document.webkitExitFullscreen();
-    } 
-    isFullscreen.value = false;
-    buttonElement.setAttribute('aria-label', "Enter fullscreen mode")
-    buttonElement.removeAttribute('mediaIsFullscreen');
-    const tooltip = buttonElement.shadowRoot?.querySelector('media-tooltip');
-    if (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"]');
-
-      if (enterTooltip && exitTooltip) {
-        enterTooltip.style.display = 'block';
-        exitTooltip.style.display = 'none';
-      } else {
-        console.warn("Tooltip-Slots nicht gefunden!");
+      if (typeof video.value?.webkitExitFullscreen === 'function') {
+        video.value.webkitExitFullscreen();
+      } else if (typeof video.value?.webkitExitFullScreen === 'function') {
+        video.value.webkitExitFullScreen();
+      } else if (typeof document.webkitExitFullscreen === 'function') {
+        document.webkitExitFullscreen();
       }
-    } else {
-      console.warn("Kein media-tooltip gefunden!");
     }
+    isFullscreen.value = false;
+    emit('video-fullscreen-change', false)
+    updateFullscreenButtonState(false)
   } else {
     isFullscreen.value = true;
+    emit('video-fullscreen-change', true)
     try {
-      buttonElement.setAttribute('aria-label', "Exit fullscreen mode")
-      buttonElement.setAttribute('mediaIsFullscreen', '');
-      const tooltip = buttonElement.shadowRoot?.querySelector('media-tooltip');
-      if (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"]');
-
-        if (enterTooltip && exitTooltip) {
-          enterTooltip.style.display = 'none';
-          exitTooltip.style.display = 'block';
-        } else {
-          console.warn("Tooltip-Slots nicht gefunden!");
-        }
-      } else {
-        console.warn("Kein media-tooltip gefunden!");
-      }
+      updateFullscreenButtonState(true)
 
       if (vpVideoBlock.requestFullscreen) {
         await vpVideoBlock.requestFullscreen();
@@ -480,6 +504,7 @@ async function startFullscreen() {
             vpVideoBlock.style.height = "auto";
           }, 100);
           isFullscreen.value = false;
+          emit('video-fullscreen-change', false)
           vpVideoBlock.removeEventListener("webkitendfullscreen")
         });
       } else if (vpVideoBlock.mozRequestFullScreen) {
@@ -491,14 +516,15 @@ async function startFullscreen() {
         try {
           await screen.orientation.lock("landscape");
         } catch (error) {
-          console.warn("Orientation lock failed", error);
+          // ignore unsupported mobile/browser orientation lock failures
         }
-      } else {
-        console.warn("Orientation lock not supported.");
       }
     } catch (error) {
-      console.error("Fullscreen could not be activated", error);
+      if (!forceEnter) {
+        console.error("Fullscreen could not be activated", error);
+      }
       isFullscreen.value = false;
+      emit('video-fullscreen-change', false)
     }
 
     video.value.currentTime = currentTime;
@@ -520,6 +546,7 @@ function onFullscreenChange(e) {
     autoHideIntroTitle.value = false;
   }
   isFullscreen.value = !!document.fullscreenElement;
+  emit('video-fullscreen-change', isFullscreen.value)
 };
 
 function onOrientationChange(e) { 
@@ -799,7 +826,15 @@ function prepareVideoPlayer(link, { previewOnly = false } = {}) {
   video.value.muted = props.isMuted;
   video.value.currentTime = props.progress;
   // Chrome-like: update menu whenever track mode changes
-  video.value.textTracks.addEventListener('change', updateLangMenuState);
+  video.value.textTracks.addEventListener('change', () => {
+    updateLangMenuState();
+    // Clear the subtitle overlay when no track is actively showing.
+    const anyShowing = Array.from(video.value.textTracks || []).some(t => t.mode === 'showing');
+    if (!anyShowing && subtitlesContainer.value) {
+      subtitlesContainer.value.style.display = 'none';
+      subtitlesContainer.value.textContent = '';
+    }
+  });
 }
 
 

package/dist/VideoPlayer/VDefaultVideoPlayer.vue

@@ -118,7 +118,7 @@ function onFullscreenChange(data) {
 function onLanguageChanged(data) {
   emit('language-changed', data);
 }
-function startFullscreen() {
-  childRef.value.startFullscreen();
+function startFullscreen(forceEnter = false) {
+  return childRef.value?.startFullscreen?.(forceEnter)
 }
 </script>

package/dist/VideoPlayer/index.vue

@@ -120,7 +120,7 @@ function onVideoFullScreenChange(data) {
 function onVideoEnd(data) {
   emit('video-ended', data);
 }
-function startFullscreen() {
-  childRef.value.startFullscreen();
+function startFullscreen(forceEnter = false) {
+  return childRef.value?.startFullscreen?.(forceEnter)
 }
 </script>

package/package.json

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