@grfzhl/vue-hls-player 1.0.20 → 1.1.1

package/README.md

@@ -73,6 +73,17 @@ For **nuxt 3**, try to wrap this component in ClientOnly, images for previewImag
 </ClientOnly>
 ```
 ### Props:
+**fullScreenElement**:
+1. value: 'hls-player-media-container', type: String
+
+If you need to provide additional UI in fullscreen mode
+you can input a parent wrapper of your player to show
+in fullscreen
+
+```
+fullScreenElement="demo"
+```
+
 **type**: 
 1. value: 'default', type: String
 
@@ -124,17 +135,11 @@ const fullScreenAction = (fullScreenElement) => {
 ```
 
 **@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()
-	}
-}
-```
+Removed in the 1.1.0 version.
+It caused too much problems with mobile devices.
+Now you can pass the desired element id to open
+fullscreen with prop: fullScreenElement
+
 **showTranscriptBlock**:
 1. value: true or false, type: Boolean
 

package/dist/VideoPlayer/BasePlayer.vue

@@ -22,6 +22,7 @@
         <video
           class="hls-player"
           slot="media"
+          :key="link"
           @pause="pause"
           @keyup="changeSpeed"
           @ended="onVideoEnd"
@@ -127,10 +128,14 @@ const props = defineProps({
   hideInitialPlayButton: {
     type: Boolean,
     default: false
+  },
+  fullScreenElement: {
+    type: String,
+    default: 'hls-player-media-container'
   }
 })
 
-const emit = defineEmits(['pause', 'video-ended', 'video-fullscreen-change', 'video-fullscreen-action'])
+const emit = defineEmits(['pause', 'video-ended', 'video-fullscreen-change'])
 const video = ref(null)
 const subtitlesContainer = ref(null)
 const currentSubtitleLang = ref(null)
@@ -142,7 +147,8 @@ const initialPlayButton = ref(false);
 const hideInitialPlayButton = ref(false)
 const link = toRef(props, 'link');
 const previewImageLink = toRef(props, 'previewImageLink');
-let hls = new Hls()
+let currentTime = 0
+let hls = null
 
 const videoElement = defineModel()
 
@@ -199,7 +205,7 @@ onMounted(() => {
             event.preventDefault();
             event.stopPropagation();
             event.stopImmediatePropagation();
-            enterFullscreen(event)
+            startFullscreen();
           }
           observer.disconnect();
         } else {
@@ -251,17 +257,61 @@ watch([props, videoElement], (a) => {
   }
 })
 
-watch(link, (v) => {
-  prepareVideoPlayer();
+watch(link, (newLink, oldLink) => {
+  if (newLink !== oldLink) {
+    console.log("prepare new src " + newLink)
+    prepareVideoPlayer();
+  }
 })
 
+async function startFullscreen() {
+  let vpVideoBlock = document.getElementById(props.fullScreenElement);
+  if(video.value) {
+    currentTime = video.value.currentTime
+  }
+  if (document.fullscreenElement) {
+    if (screen.orientation && screen.orientation.unlock) {
+      screen.orientation.unlock();
+    }
+    await document.exitFullscreen();
+    isFullscreen.value = false;
+  } else {
+    isFullscreen.value = true;
+    try {
+      if (vpVideoBlock.requestFullscreen) {
+        await vpVideoBlock.requestFullscreen();
+      } else if (vpVideoBlock.webkitRequestFullscreen) {
+        vpVideoBlock = document.querySelector('video');
+        await vpVideoBlock.webkitRequestFullscreen(); // Safari
+      } else if (vpVideoBlock.mozRequestFullScreen) {
+        await vpVideoBlock.mozRequestFullScreen(); // Firefox
+      } else if (vpVideoBlock.msRequestFullscreen) {
+        await vpVideoBlock.msRequestFullscreen(); // IE/Edge
+      }
+
+      if (screen.orientation && screen.orientation.lock) {
+        try {
+          await screen.orientation.lock("landscape");
+        } catch (error) {
+          console.warn("Orientation lock failed", error);
+        }
+      } else {
+        console.warn("Orientation lock not supported.");
+      }
+    } catch (error) {
+      console.error("Fullscreen could not be activated", error);
+      isFullscreen.value = false;
+    }
+    video.value.currentTime = currentTime;
+  }
+}
+
 function onSubtitleError(link) {
   console.error(`Error on loading subtitles: ${link}`);
 }
 
-function onFullscreenChange() {
-  isFullscreen.value = !!document.fullscreenElement
-  emit('video-fullscreen-change', document.fullscreenElement)
+function onFullscreenChange(e) {
+  e.preventDefault();
 
   // hide intro title after x seconds
   if(isFullscreen.value === true) {
@@ -271,6 +321,7 @@ function onFullscreenChange() {
   } else {
     autoHideIntroTitle.value = false;
   }
+  isFullscreen.value = !!document.fullscreenElement;
 };
 
 function onOrientationChange(e) { 
@@ -284,10 +335,17 @@ function onOrientationChange(e) {
   orientation.value = angle === 0 || angle === 180 
     ? "portrait" 
     : "landscape";
-}
 
-function enterFullscreen(event) {
-  emit('video-fullscreen-action', event)
+  let isPortrait = angle === 0 || angle === 180;
+  let isLandscape = angle === 90 || angle === -90;
+
+  if (isFullscreen.value && isPortrait) {
+    setTimeout(async () => {
+      if (!document.fullscreenElement) {
+        startFullscreen();
+      }
+    }, 700);
+  }
 }
 
 function updateCurrentTime() {
@@ -307,11 +365,15 @@ function seekVideo(time) {
 }
 
 function prepareVideoPlayer() {
-  let stream = props.link
-  hls.loadSource(stream)
-  hls.attachMedia(video.value)
-
   if (video.value) {
+    if (hls) {
+      hls.destroy();
+    }
+    hls = new Hls();
+    let stream = props.link
+    hls.loadSource(stream)
+    hls.attachMedia(video.value)
+
     hls.attachMedia(video.value)
     video.value.muted = props.isMuted
     video.value.currentTime = props.progress
@@ -375,6 +437,8 @@ function changeSpeed(e) {
     video.value.playbackRate = video.value.playbackRate - 0.25
   }
 }
+defineExpose({ startFullscreen }); 
+
 </script>
 <style>
   video::cue {

package/dist/VideoPlayer/SubtitleBlock.vue

@@ -207,11 +207,13 @@ function isTxtCueActive(txtCue) {
  * @param txtIndex 
  */
 function isWordActive(txtCue, word, wordIndex, txtIndex) {
+  console.log("check word active ", txtCue, word, wordIndex, txtIndex)
   if(!currentCue.value || !word || !txtCue) {
     return false
   }
   const startPos = txtCue.dialog[0].text.indexOf(currentCue.value)
   const endPos = startPos + currentCue.value.length
+  console.log("can word marked", startPos, endPos, wordIndex)
   if(wordIndex >= startPos && wordIndex < endPos) {
     return true;
   }

package/dist/VideoPlayer/VDefaultVideoPlayer.vue

@@ -14,8 +14,8 @@
     @pause="pause"
     @video-ended="onVideoEnd"
     @video-fullscreen-change="onFullscreenChange"
-    @video-fullscreen-action="oVideoFullscreenAction"
     v-model="videoElement"
+    ref="childRef"
   >
     <template v-slot:before-media><slot name="before-media"></slot></template>
     <template v-slot:after-media><slot name="after-media"></slot></template>
@@ -28,9 +28,10 @@
 import BasePlayer from './BasePlayer.vue'
 import { ref, toRef } from 'vue'
 
-const emit = defineEmits(['pause', 'video-ended', 'video-fullscreen-change', 'video-fullscreen-action'])
+const emit = defineEmits(['pause', 'video-ended', 'video-fullscreen-change'])
 
 const videoElement = ref(null);
+const childRef = ref(null)
 
 const props = defineProps({
   previewImageLink: {
@@ -72,12 +73,18 @@ const props = defineProps({
   hideInitialPlayButton: {
     type: Boolean,
     default: false
+  },
+  fullScreenElement: {
+    type: String,
+    default: 'hls-player-media-container'
   }
 })
 
 const link = toRef(props, 'link');
 const previewImageLink = toRef(props, 'previewImageLink');
 
+defineExpose({ startFullscreen }); 
+
 function pause(currentTime) {
   emit('pause', currentTime)
 }
@@ -91,7 +98,7 @@ function onFullscreenChange(data) {
   emit('video-fullscreen-change', data);
 }
 
-function oVideoFullscreenAction(data) {
-  emit('video-fullscreen-action', data)
+function startFullscreen() {
+  childRef.value.startFullscreen();
 }
 </script>

package/dist/VideoPlayer/index.vue

@@ -4,7 +4,6 @@
     @pause="pause"
     @video-fullscreen-change="onVideoFullScreenChange"
     @video-ended="onVideoEnd"
-    @video-fullscreen-action="oVideoFullscreenAction"
     :introTitle="introTitle"
     :previewImageLink="previewImageLink"
     :showTranscriptBlock="showTranscriptBlock"
@@ -14,6 +13,7 @@
     :isMuted="isMuted"
     :autoplay="autoplay"
     v-model="videoElement"
+    ref="childRef"
     :hideInitialPlayButton="hideInitialPlayButton"
   >
     <template v-slot:before-media><slot name="before-media"></slot></template>
@@ -37,6 +37,7 @@ import { ref, toRef } from 'vue'
 const emit = defineEmits(['pause', 'video-ended', 'video-fullscreen-change', 'video-fullscreen-action'])
 
 const videoElement = ref(null);
+const childRef = ref(null)
 
 const props = defineProps({
   previewImageLink: {
@@ -82,12 +83,18 @@ const props = defineProps({
   hideInitialPlayButton: {
     type: Boolean,
     default: false
+  },
+  fullScreenElement: {
+    type: String,
+    default: 'hls-player-media-container'
   }
 })
 
 const link = toRef(props, 'link');
 const previewImageLink = toRef(props, 'previewImageLink');
 
+defineExpose({ startFullscreen }); 
+
 function pause(currentTime) {
   emit('pause', currentTime)
 }
@@ -97,7 +104,7 @@ function onVideoFullScreenChange(data) {
 function onVideoEnd(data) {
   emit('video-ended', data);
 }
-function oVideoFullscreenAction(data) {
-  emit('video-fullscreen-action', data)
+function startFullscreen() {
+  childRef.value.startFullscreen();
 }
 </script>

package/package.json

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