@grfzhl/vue-hls-player 1.1.5 → 1.1.7

package/dist/VideoPlayer/BasePlayer.vue

@@ -180,7 +180,6 @@ const currentSubtitle = computed(() => {
         return subt.lang === "en"
       }
     })
-console.log("current", currentSubtitleLang)
     return current.length ? current[0] : null
   }
   return null
@@ -220,7 +219,7 @@ async function startFullscreen() {
     try {
       if (vpVideoBlock.requestFullscreen) {
         await vpVideoBlock.requestFullscreen();
-      } else if (vpVideoBlock.webkitRequestFullscreen) {
+      } else if (document.querySelector('video').webkitRequestFullscreen) {
         vpVideoBlock = document.querySelector('video');
         await vpVideoBlock.webkitRequestFullscreen(); // Safari
       } else if (vpVideoBlock.mozRequestFullScreen) {
@@ -228,7 +227,6 @@ async function startFullscreen() {
       } else if (vpVideoBlock.msRequestFullscreen) {
         await vpVideoBlock.msRequestFullscreen(); // IE/Edge
       }
-
       if (screen.orientation && screen.orientation.lock) {
         try {
           await screen.orientation.lock("landscape");
@@ -242,6 +240,7 @@ async function startFullscreen() {
       console.error("Fullscreen could not be activated", error);
       isFullscreen.value = false;
     }
+
     video.value.currentTime = currentTime;
   }
 }
@@ -252,7 +251,6 @@ function onSubtitleError(link) {
 
 function onFullscreenChange(e) {
   e.preventDefault();
-
   // hide intro title after x seconds
   if(isFullscreen.value === true) {
     setTimeout(() => {
@@ -279,7 +277,7 @@ function onOrientationChange(e) {
   let isPortrait = angle === 0 || angle === 180;
   let isLandscape = angle === 90 || angle === -90;
 
-  if (isFullscreen.value && isPortrait) {
+  if (document.fullscreenElement && isPortrait) {
     setTimeout(async () => {
       if (!document.fullscreenElement) {
         startFullscreen();
@@ -312,26 +310,15 @@ function seekVideo(time) {
 function prepareVideoPlayer(link) {
   let initiallyLoaded = true;
   if (video.value) {
-console.log("start hls gtest2 ", hls)
-    // video.value.src = link;
-    // video.value.load()
-
     if (hls) {
+      hls.detachMedia();
       hls.destroy();
       initiallyLoaded = false;
     }
-console.log("a")
     hls = new Hls();
-console.log("b")
     hls.loadSource(link)
-console.log("c", video.value)
-    // const shadowRoot = video.value?.shadowRoot;
-    // const videoElement = shadowRoot?.querySelector("video");
-    // const videoElement = document.querySelector("video.hls-player")[0]
-    // if(initiallyLoaded) {
-      hls.attachMedia(video.value)
-    // }
-console.log("attach to ", video.value)
+    hls.attachMedia(video.value)
+    hls.recoverMediaError()
 
     video.value.muted = props.isMuted
     video.value.currentTime = props.progress
@@ -373,10 +360,8 @@ console.log("attach to ", video.value)
         }
       });
     }
-    // if(!initiallyLoaded) {
-      setInterval(checkTrackModeChanges, 100);
-      initVideo();
-    // }
+    setInterval(checkTrackModeChanges, 100);
+    initVideo();
   }
 }
 

package/dist/VideoPlayer/SubtitleBlock.vue

@@ -111,7 +111,7 @@
 </style>
 
 <script setup>
-import { onMounted, watch, ref } from 'vue';
+import { onMounted, watch, ref, nextTick } from 'vue';
 
 const props = defineProps({
   subtitle: {
@@ -137,11 +137,11 @@ const subtitlesContainer = ref(null);
 const vttCues = ref([]);
 const txtCues = ref([]);
 const currentCue = ref(null);
+const videoCursor = ref(0);
 
 
 const loadCues = async () => {
   if (props.subtitle) {
-console.log("load subtittles", props.subtitle.link)
     const vttPath = props.subtitle.link;
     const txtPath = vttPath.replace(/\.vtt$/, '.txt');
     vttCues.value = await parseVTT(vttPath);
@@ -159,8 +159,9 @@ watch(
 );
 
 const onTimeUpdate = (video) => {
-  if (video) {
+  if (video && txtCues?.value?.length && vttCues?.value?.length) {
     const currentTime = video.currentTime;
+    videoCursor.value = currentTime;
     props.cursor = currentTime;
     highlightActiveCue(currentTime);
     checkCurrentCue(currentTime);
@@ -196,7 +197,7 @@ function seekTo(time) {
  * @param txtCue 
  */
 function isTxtCueActive(txtCue) {
-  return props.cursor >= txtCue.start && props.cursor <= txtCue.end;
+  return videoCursor.value >= txtCue.start && videoCursor.value <= txtCue.end;
 }
 
 /**
@@ -219,10 +220,11 @@ function isWordActive(txtCue, word, wordIndex, txtIndex, currentCue) {
   return false;
 }
 
-function checkCurrentCue(currentCursor) {
-  Array.from(vttCues.value).forEach((a, index) => {
-    if(currentCursor >= a.start && currentCursor <= a.end) {
+async function checkCurrentCue(currentCursor) {
+  Array.from(vttCues.value).forEach(async (a, index) => {
+    if(videoCursor.value >= a.start && videoCursor.value <= a.end) {
       currentCue.value = a.text
+      await nextTick()
     }
   });
 }
@@ -236,7 +238,7 @@ async function parseVTT(fileUrl) {
   const response = await fetch(fileUrl);
   const text = await response.text();
   const cues = [];
-  const lines = text.split('\n');
+  const lines = text.replace(/\r/g, '').split('\n');
   let cue = null;
 
   for (let i = 0; i < lines.length; i++) {

package/package.json

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