@grfzhl/vue-hls-player 1.1.3 → 1.1.5

package/dist/VideoPlayer/BasePlayer.vue

@@ -58,6 +58,7 @@
   </div>
   <slot name="before-transcripts"></slot>
   <SubtitleBlock
+    ref="transcriptRef"
     :subtitle="currentSubtitle"
     :cursor="videoCursor" 
     :showTranscriptBlock="showTranscriptBlock"
@@ -143,20 +144,17 @@ const isFullscreen = ref(false);
 const orientation = ref(null)
 const autoHideIntroTitle = ref(false);
 const initialPlayButton = ref(false);
-const hideInitialPlayButton = ref(false)
-const link = toRef(props, 'link');
+const hideInitialPlayButton = ref(false);
+const transcriptRef = ref(null);
 const previewImageLink = toRef(props, 'previewImageLink');
+const link = toRef(props, 'link');
 let currentTime = 0
 let hls = null
 
 const videoElement = defineModel()
 
 onMounted(() => {
-  prepareVideoPlayer()
-})
-
-onUpdated(() => {
-
+  prepareVideoPlayer(props.link)
 })
 
 onUnmounted(() => {
@@ -176,8 +174,13 @@ const mutedAttr = computed(() => {
 const currentSubtitle = computed(() => {
   if(props.subtitles) {
     const current = props.subtitles.filter((subt) => {
-      return subt.lang === currentSubtitleLang.value
+      if(currentSubtitleLang.value) {
+        return subt.lang === currentSubtitleLang.value
+      } else {
+        return subt.lang === "en"
+      }
     })
+console.log("current", currentSubtitleLang)
     return current.length ? current[0] : null
   }
   return null
@@ -193,10 +196,11 @@ watch([props, videoElement], (a) => {
   }
 })
 
-watch(link, (newLink, oldLink) => {
+watch(
+  () => props.link,
+  (newLink, oldLink) => {
   if (newLink !== oldLink) {
-    console.log("prepare new src " + newLink)
-    prepareVideoPlayer();
+    prepareVideoPlayer(newLink);
   }
 })
 
@@ -289,6 +293,11 @@ function updateCurrentTime() {
   if(!video.value.paused) {
     initialPlayButton.value = false;
   }
+
+  // update transcripts
+  if(transcriptRef && video) {
+    transcriptRef.value.onTimeUpdate(video.value)
+  }
 }
 
 function toggleTranscript() {
@@ -300,15 +309,29 @@ function seekVideo(time) {
   video.value.play()
 }
 
-function prepareVideoPlayer() {
+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.destroy();
+      initiallyLoaded = false;
     }
+console.log("a")
     hls = new Hls();
-    let stream = props.link
-    hls.loadSource(stream)
-    hls.attachMedia(video.value)
+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)
 
     video.value.muted = props.isMuted
     video.value.currentTime = props.progress
@@ -350,8 +373,10 @@ function prepareVideoPlayer() {
         }
       });
     }
-    setInterval(checkTrackModeChanges, 100);
-    initVideo();
+    // if(!initiallyLoaded) {
+      setInterval(checkTrackModeChanges, 100);
+      initVideo();
+    // }
   }
 }
 

package/dist/VideoPlayer/SubtitleBlock.vue

@@ -28,7 +28,7 @@
             <span
               v-for="(word, wordIndex) in txtCue.dialog[0].text.split('')"
               :key="wordIndex"
-              :class="{ 'active-word': isWordActive(txtCue, word, wordIndex, index) && isTxtCueActive(txtCue) }"
+              :class="{ 'active-word': isWordActive(txtCue, word, wordIndex, index, currentCue) && isTxtCueActive(txtCue) }"
             >
               {{ word }}
             </span>
@@ -141,9 +141,9 @@ const currentCue = ref(null);
 
 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);
     txtCues.value = await parseTXT(txtPath);
   }
@@ -158,14 +158,14 @@ watch(
   }
 );
 
-watch(
-  () => props.cursor,
-  (currentTime) => {
-console.log("cursor watch", currentTime)
+const onTimeUpdate = (video) => {
+  if (video) {
+    const currentTime = video.currentTime;
+    props.cursor = currentTime;
     highlightActiveCue(currentTime);
-    checkCurrentCue(currentTime)
+    checkCurrentCue(currentTime);
   }
-);
+};
 
 /**
  * highlgiht the current transcript part
@@ -207,14 +207,12 @@ function isTxtCueActive(txtCue) {
  * @param wordIndex 
  * @param txtIndex 
  */
-function isWordActive(txtCue, word, wordIndex, txtIndex) {
-  console.log("check word active ", txtCue, word, wordIndex, currentCue.value)
-  if(!currentCue.value || !word || !txtCue) {
+function isWordActive(txtCue, word, wordIndex, txtIndex, currentCue) {
+  if(!currentCue || !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)
+  const startPos = txtCue.dialog[0].text.indexOf(currentCue)
+  const endPos = startPos + currentCue.length
   if(wordIndex >= startPos && wordIndex < endPos) {
     return true;
   }
@@ -223,7 +221,6 @@ function isWordActive(txtCue, word, wordIndex, txtIndex) {
 
 function checkCurrentCue(currentCursor) {
   Array.from(vttCues.value).forEach((a, index) => {
-    console.log("current cue", a)
     if(currentCursor >= a.start && currentCursor <= a.end) {
       currentCue.value = a.text
     }
@@ -322,4 +319,6 @@ function secondsToTime(seconds) {
   const pad = (num) => String(num).padStart(2, '0');
   return `${pad(hours)}:${pad(minutes)}:${pad(secs)}`;
 }
+
+defineExpose({ onTimeUpdate }); 
 </script>

package/package.json

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