@grfzhl/vue-hls-player 1.1.10 → 1.1.12

package/README.md

@@ -187,7 +187,36 @@ it makes the video muted
 
 it will set the native <video> autoplay property
 
+**options**
+1. value: object with settings, type Object
+
+It contains various options to customize
+the player.
+At the moment the following attribute are supported:
+```
+  ui: {
+    labels: {
+      play: 'Play',
+      pause: 'Pause',
+      fullscreen: 'Toggle fullscreen',
+      exitFullscreen: 'Toggle fullscreen',
+      mute: 'Mute',
+      unmute: 'Unmute',
+    }
+  }
+```
+
 ### Last release:
+v1.0.12
+- 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)
+
 v1.0.9 - v1.0.14
 - Fixes
 - Small styling improvements

package/dist/VideoPlayer/BasePlayer.vue

@@ -19,6 +19,7 @@
       </div>
       <slot name="before-media"></slot>
       <media-theme-sutro class="video-player-theme-container" :class="{'is-fullscreen': isFullscreen}">
+
         <video
           class="hls-player"
           slot="media"
@@ -49,6 +50,16 @@
             @error="onSubtitleError(subtitle.link)"
             :label="subtitle.label" :default="i === 0" />
         </video>
+        <media-control-bar>
+          <media-fullscreen-button>
+            <span slot="tooltip-enter" v-if="options?.ui?.labels?.fullscreen">
+              {{ options.ui.labels.fullscreen }}
+            </span>
+            <span slot="tooltip-exit" v-if="options?.ui?.labels?.exitFullscreen">
+              {{ options.ui.labels.exitFullscreen }}
+            </span>
+          </media-fullscreen-button>
+        </media-control-bar>
       </media-theme-sutro>
       <div class="custom-subtitles" v-show="(isFullscreen) || (!showTranscriptBlock)">
         <div class="subtitle-text" ref="subtitlesContainer" style="display: none;"></div>
@@ -60,7 +71,8 @@
   <SubtitleBlock
     ref="transcriptRef"
     :subtitle="currentSubtitle"
-    :cursor="videoCursor" 
+    :cursor="videoCursor"
+    :options="options"
     :showTranscriptBlock="showTranscriptBlock"
     @seek="seekVideo"
     @toggleTranscript="toggleTranscript">
@@ -104,6 +116,10 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
+  additionHeaders: {
+    type: Object,
+    default: {}
+  }
   /**
    * array of object, for
    * subtitles to append:
@@ -132,6 +148,10 @@ const props = defineProps({
   fullScreenElement: {
     type: String,
     default: 'hls-player-media-container'
+  },
+  options: {
+    type: Object,
+    default: {}
   }
 })
 
@@ -150,6 +170,7 @@ const previewImageLink = toRef(props, 'previewImageLink');
 const link = toRef(props, 'link');
 let currentTime = 0
 let hls = null
+let buttonElement = null
 
 const videoElement = defineModel()
 
@@ -217,9 +238,49 @@ async function startFullscreen() {
       document.webkitExitFullscreen();
     } 
     isFullscreen.value = false;
+    buttonElement.setAttribute('aria-label', "Enter fullscreen mode")
+    const tooltip = buttonElement.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"]');
+
+      if (enterTooltip && exitTooltip) {
+        enterTooltip.style.display = 'block';
+        exitTooltip.style.display = 'none';
+      } else {
+        console.warn("Tooltip-Slots nicht gefunden!");
+      }
+    } else {
+      console.warn("Kein media-tooltip gefunden!");
+    }
   } else {
     isFullscreen.value = true;
     try {
+      buttonElement.setAttribute('aria-label', "Exit fullscreen mode")
+
+      const tooltip = buttonElement.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"]');
+
+        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!");
+      }
+
       if (vpVideoBlock.requestFullscreen) {
         await vpVideoBlock.requestFullscreen();
       } else if (/iPhone|iPad|AppleWebKit/i.test(navigator.userAgent)) {
@@ -331,6 +392,21 @@ function prepareVideoPlayer(link) {
     hls.attachMedia(video.value)
     hls.recoverMediaError()
 
+    if(props.additionHeaders) {
+      /**
+       * inject additional headers
+       */
+      hls.config.fetchSetup = async (context, init) => {
+        init = init || {};
+        init.headers = new Headers(init.headers || {});
+        // set headers
+        for (const [key, value] of Object.entries(props.headers)) {
+          init.headers.set(key, value);
+        }
+        return new Request(context.url, init);
+      };
+    }
+
     video.value.muted = props.isMuted
     video.value.currentTime = props.progress
 
@@ -420,6 +496,7 @@ function initVideo() {
       const mediaTheme = document.querySelector('.video-player-theme-container');
       if (mediaTheme && mediaTheme.shadowRoot) {
         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) {

package/dist/VideoPlayer/VDefaultVideoPlayer.vue

@@ -8,6 +8,7 @@
     :autoplay="autoplay"
     :isControls="isControls"
     :onVideoEnd="onVideoEnd"
+    :additionHeaders="additionHeaders"
     :isFullscreen="isFullscreen"
     :showTranscriptBlock="showTranscriptBlock"
     :hideInitialPlayButton="hideInitialPlayButton"
@@ -77,6 +78,14 @@ const props = defineProps({
   fullScreenElement: {
     type: String,
     default: 'hls-player-media-container'
+  },
+  options: {
+    type: Object,
+    default: {}
+  },
+  additionHeaders: {
+    type: Object,
+    default: {}
   }
 })
 

package/dist/VideoPlayer/index.vue

@@ -4,6 +4,7 @@
     @pause="pause"
     @video-fullscreen-change="onVideoFullScreenChange"
     @video-ended="onVideoEnd"
+    :additionHeaders="additionHeaders"
     :introTitle="introTitle"
     :previewImageLink="previewImageLink"
     :showTranscriptBlock="showTranscriptBlock"
@@ -87,6 +88,14 @@ const props = defineProps({
   fullScreenElement: {
     type: String,
     default: 'hls-player-media-container'
+  },
+  options: {
+    type: Object,
+    default: {}
+  },
+  additionHeaders: {
+    type: Object,
+    default: {}
   }
 })
 

package/package.json

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