@grfzhl/vue-hls-player 1.1.3 → 1.1.4

package/dist/VideoPlayer/BasePlayer.vue

@@ -58,6 +58,7 @@
   </div>
   <slot name="before-transcripts"></slot>
   <SubtitleBlock
+    ref="transcriptRef"
     :subtitle="currentSubtitle"
     :cursor="videoCursor" 
     :showTranscriptBlock="showTranscriptBlock"
@@ -144,6 +145,7 @@ const orientation = ref(null)
 const autoHideIntroTitle = ref(false);
 const initialPlayButton = ref(false);
 const hideInitialPlayButton = ref(false)
+const transcriptRef = ref(null)
 const link = toRef(props, 'link');
 const previewImageLink = toRef(props, 'previewImageLink');
 let currentTime = 0
@@ -289,6 +291,11 @@ function updateCurrentTime() {
   if(!video.value.paused) {
     initialPlayButton.value = false;
   }
+
+  // update transcripts
+  if(transcriptRef && video) {
+    transcriptRef.value.onTimeUpdate(video.value)
+  }
 }
 
 function toggleTranscript() {

package/dist/VideoPlayer/SubtitleBlock.vue

@@ -143,7 +143,6 @@ const loadCues = async () => {
   if (props.subtitle) {
     const vttPath = props.subtitle.link;
     const txtPath = vttPath.replace(/\.vtt$/, '.txt');
-
     vttCues.value = await parseVTT(vttPath);
     txtCues.value = await parseTXT(txtPath);
   }
@@ -158,14 +157,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
@@ -223,7 +222,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 +320,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.4",
   "type": "module",
   "files": [
     "dist"