@grfzhl/vue-hls-player 1.0.5 → 1.0.7

package/README.md

@@ -39,24 +39,26 @@ npm i vue-hls-player
 </script>
 
 <template>
-  <VideoPlayer
-      type="default"
-      @pause="processPause"
-      previewImageLink="poster.webp"
-      link="videoLink.m3u8"
-      :progress="30"
-      :isMuted="false"
-      :isControls="true"
-			:subtitles="subtitles"
-      class="customClassName"
-  />
-
-  <VideoPlayer
-      type="preview"
-      previewImageLink="poster.webp"
-      link="videoLink.m3u8"
-      class="customClassName"
-  />
+  <div id="video-container">
+    <VideoPlayer
+        type="default"
+        @pause="processPause"
+        previewImageLink="poster.webp"
+        link="videoLink.m3u8"
+        :progress="30"
+        :isMuted="false"
+        :isControls="true"
+        :subtitles="subtitles"
+        class="customClassName"
+    />
+
+    <VideoPlayer
+        type="preview"
+        previewImageLink="poster.webp"
+        link="videoLink.m3u8"
+        class="customClassName"
+    />
+  </div>
 </template>
 ```
 For **nuxt 3**, try to wrap this component in ClientOnly, images for previewImageLink need to store in public folder
@@ -97,6 +99,49 @@ function processPause(progress: number) {
   console.log(progress)
 }
 ```
+
+**@video-ended**:
+1. Event, called if the video has ended
+@video-ended="videoEnded"
+```
+const videoEnded = (data) => {
+  console.log("video ended at time: ", data.currentTime)
+  console.log("video element ", data.video)
+}
+```
+
+**@video-fullscreen-change**:
+1. Event, event dispatcher for detecting fullscreen change
+@video-fullscreen-change="fullscreenChange"
+```
+const fullScreenAction = (fullScreenElement) => {
+	if(fullScreenElement === null) {
+		console.log("fullscreen is off")
+	} else {
+		console.log("fullscreen is on")
+	}
+}
+```
+
+**@video-fullscreen-action**:
+1. Event, handling the fullscreen action of the player
+@video-fullscreen-action="fullScreenAction"
+```
+const fullScreenAction = (data) => {
+	if(isFullscreen.value) {
+		document.exitFullscreen();
+	} else {
+		document.getElementById("video-container").requestFullscreen()
+	}
+}
+```
+**showTranscriptBlock**:
+1. value: true or false, type: Boolean
+
+pass true, if you want to show the transcript block.
+To make transcripts work, your need to provide `.txt` files
+in the same path and base-filename like the passed `subtitles` prop.
+
 **previewImageLink**: 
 1. value: 'poster.webp', type: String
 
@@ -118,19 +163,34 @@ it can show and hide the video control panel
 1. value: array of object, for subtitles to append: object has link, lang
 
 subtitles to add as tracks to the video
+example: 
+```
+[{
+  link: `https://url-to-your/subtitles.vtt`,
+  label: 'English',
+  lang: 'en'
+}]
+```
 
 ### Last release:
+v1.0.7
+- Add function to handle own logic for fullscreen
+
+v1.0.6
+- Small fixes
+- Remove debug log
+
 v1.0.5
-1. Load transcriptions additionally to subtitles
-2. Add styled transcription block for better readability
-3. 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
-1. Make subtitles dynamic
-2. Add new switch to disable the subtitle block
-3. Fix some minor issues
+- Make subtitles dynamic
+- Add new switch to disable the subtitle block
+- Fix some minor issues
 
 v1.0.3
-1. Removed controls in favour of themable overlay by `player.style`.
-2. Updated hls library
-3. 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

@@ -12,7 +12,6 @@
         :poster="previewImageLink"
         :controls="false"
         :title="title"
-        :isFullscreen="isFullscreen"
         controlslist="nodownload"
         playsinline
         crossorigin
@@ -93,7 +92,7 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['pause', 'video-ended', 'video-fullscreen-change'])
+const emit = defineEmits(['pause', 'video-ended', 'video-fullscreen-change', 'video-fullscreen-action'])
 const video = ref(null)
 const subtitlesContainer = ref(null)
 const currentSubtitleLang = ref(null)
@@ -101,12 +100,37 @@ const videoCursor = ref(0)
 const isFullscreen = ref(false);
 
 onMounted(() => {
-console.log("mounted current - - changed")
   prepareVideoPlayer()
   if (video.value) {
     checkFullscreen();
     video.value.addEventListener('timeupdate', updateCurrentTime);
     document.addEventListener('fullscreenchange', onFullscreenChange);
+
+    /**
+     * 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) {
+      const fullscreenButton = mediaTheme.shadowRoot.querySelector('media-fullscreen-button');
+      if (fullscreenButton) {
+        fullscreenButton.handleClick = (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          event.stopImmediatePropagation();
+          emit('video-fullscreen-action', event)
+        }
+        observer.disconnect();
+      } else {
+        console.error('Button not found in Shadow DOM!');
+      }
+    } else {
+      console.error('Shadow Root not found!');
+    }
+    })
+    observer.observe(document.body, { childList: true, subtree: true });
   }
 })
 
@@ -131,12 +155,12 @@ const currentSubtitle = computed(() => {
 })
 
 function checkFullscreen() {
-  isFullscreen.value = document.fullscreenElement === video.value;
+  isFullscreen.value = !!document.fullscreenElement;
 };
 
 function onFullscreenChange() {
   checkFullscreen();
-  emit('video-fullscreen-change', isFullscreen)
+  emit('video-fullscreen-change', document.fullscreenElement)
 };
 
 

package/dist/VideoPlayer/VDefaultVideoPlayer.vue

@@ -11,6 +11,7 @@
     @pause="pause"
     @video-ended="onVideoEnd"
     @video-fullscreen-change="onFullscreenChange"
+    @video-fullscreen-action="oVideoFullscreenAction"
   />
 </template>
 
@@ -62,4 +63,8 @@ function onVideoEnd(data) {
 function onFullscreenChange(data) {
   emit('video-fullscreen-change', data);
 }
+
+function oVideoFullscreenAction(data) {
+  emit('video-fullscreen-action', data)
+}
 </script>

package/dist/VideoPlayer/index.vue

@@ -4,6 +4,7 @@
     @pause="pause"
     @video-fullscreen-change="onVideoFullScreenChange"
     @video-ended="onVideoEnd"
+    @video-fullscreen-action="oVideoFullscreenAction"
     :previewImageLink="previewImageLink"
     :showTranscriptBlock="showTranscriptBlock"
     :isFullscreen="isFullscreen"
@@ -23,7 +24,7 @@
 import VDefaultVideoPlayer from './VDefaultVideoPlayer.vue'
 import VPreviewVideoPlayer from './VPreviewVideoPlayer.vue'
 
-const emit = defineEmits(['pause', 'video-ended', 'video-fullscreen-change'])
+const emit = defineEmits(['pause', 'video-ended', 'video-fullscreen-change', 'video-fullscreen-action'])
 
 defineProps({
   previewImageLink: {
@@ -59,7 +60,6 @@ defineProps({
     default: true
   }
 })
-console.log("abc <<<<<<<<<<<<<")
 
 function pause(currentTime) {
   emit('pause', currentTime)
@@ -70,4 +70,7 @@ function onVideoFullScreenChange(data) {
 function onVideoEnd(data) {
   emit('video-ended', data);
 }
+function oVideoFullscreenAction(data) {
+  emit('video-fullscreen-action', data)
+}
 </script>

package/package.json

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