@grfzhl/vue-hls-player 1.1.13 → 1.1.16

package/README.md

@@ -207,10 +207,14 @@ At the moment the following attribute are supported:
 ```
 
 ### Last release:
-v1.0.13
-- update the hls.js package
+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.
+v1.1.13 - v1.0.15
+- Update the hls.js package
+- Fixes
 
-v1.0.12
+v1.1.12
 - added component property to make it easier adding headers (like Authorization header into every hls request)
 
 v1.0.14 - v1.1.11

package/dist/VideoPlayer/BasePlayer.vue

@@ -239,8 +239,8 @@ async function startFullscreen() {
     } 
     isFullscreen.value = false;
     buttonElement.setAttribute('aria-label', "Enter fullscreen mode")
-    const tooltip = buttonElement.querySelector('media-tooltip');
-
+    buttonElement.removeAttribute('mediaIsFullscreen');
+    const tooltip = buttonElement.shadowRoot?.querySelector('media-tooltip');
     if (tooltip) {
       console.log("Tooltip gefunden:", tooltip);
 
@@ -261,9 +261,8 @@ async function startFullscreen() {
     isFullscreen.value = true;
     try {
       buttonElement.setAttribute('aria-label', "Exit fullscreen mode")
-
-      const tooltip = buttonElement.querySelector('media-tooltip');
-
+      buttonElement.setAttribute('mediaIsFullscreen', '');
+      const tooltip = buttonElement.shadowRoot?.querySelector('media-tooltip');
       if (tooltip) {
         console.log("Tooltip gefunden:", tooltip);
 
@@ -387,25 +386,28 @@ function prepareVideoPlayer(link) {
       hls.destroy();
       initiallyLoaded = false;
     }
-    hls = new Hls();
-    hls.loadSource(link)
-    hls.attachMedia(video.value)
-    hls.recoverMediaError()
-
-    if(props.additionHeaders) {
-      /**
-       * inject additional headers
-       */
-      hls.config.fetchSetup = async (context, init) => {
+    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.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);
+        }
+      }
+    });
+    hls.loadSource(link)
+    hls.attachMedia(video.value)
+    hls.recoverMediaError()
 
     video.value.muted = props.isMuted
     video.value.currentTime = props.progress

package/dist/VideoPlayer/VDefaultVideoPlayer.vue

@@ -1,5 +1,6 @@
 <template>
   <BasePlayer
+    :options="options"
     :introTitle="introTitle"
     :previewImageLink="previewImageLink"
     :link="link"

package/dist/VideoPlayer/index.vue

@@ -16,6 +16,7 @@
     v-model="videoElement"
     ref="childRef"
     :hideInitialPlayButton="hideInitialPlayButton"
+    :options = options
   >
     <template v-slot:before-media><slot name="before-media"></slot></template>
     <template v-slot:after-media><slot name="after-media"></slot></template>

package/package.json

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