@grfzhl/vue-hls-player 1.1.17 → 1.1.18

package/README.md

@@ -207,6 +207,10 @@ At the moment the following attribute are supported:
 ```
 
 ### Last release:
+v1.1.18
+- Added new slot `between-video-and-transcript` to `BasePlayer.vue`, `VDefaultVideoPlayer.vue` and `index.vue`
+to allow injection of custom UI between video and transcript.
+- Introduced a continuous **Frame Pointer Loop** that emits a `pointer-update` event with the current playback time and calculated frame number (30 fps) for real-time frame tracking.
 v1.1.17
 - Keep query params for transcription when getting from .vtt file to .txt
 v1.1.16

package/dist/VideoPlayer/BasePlayer.vue

@@ -67,6 +67,7 @@
       <slot name="after-media"></slot>
     </div>
   </div>
+  <slot name="between-video-and-transcript"></slot> 
   <slot name="before-transcripts"></slot>
   <SubtitleBlock
     ref="transcriptRef"
@@ -155,7 +156,7 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['pause', 'video-ended', 'video-fullscreen-change'])
+const emit = defineEmits(['pause', 'video-ended', 'video-fullscreen-change', 'pointer-update'])
 const video = ref(null)
 const subtitlesContainer = ref(null)
 const currentSubtitleLang = ref(null)
@@ -172,6 +173,19 @@ let currentTime = 0
 let hls = null
 let buttonElement = null
 
+// --- Frame Pointer Loop ---
+let rafId = null
+const FPS = 30
+
+function emitPointerUpdate() {
+  if (video.value) {
+    const t = video.value.currentTime || 0
+    const frame = Math.floor(t * FPS)
+    emit('pointer-update', { currentTime: t, frame })
+  }
+  rafId = requestAnimationFrame(emitPointerUpdate)
+}
+
 const videoElement = defineModel()
 
 onMounted(() => {
@@ -185,6 +199,8 @@ onUnmounted(() => {
   document.removeEventListener('fullscreenchange', onFullscreenChange);
   document.removeEventListener('orientationchange', onOrientationChange);
   window.screen.orientation.removeEventListener("change", onOrientationChange);
+  // --- Stop pointer-update loop ---
+  if (rafId) cancelAnimationFrame(rafId)
 });
 
 const mutedAttr = computed(() => {
@@ -516,6 +532,10 @@ function initVideo() {
         console.error('Shadow Root not found!');
       }
     })
+    // --- Start pointer-update loop ---
+    if (!rafId) {
+      emitPointerUpdate()
+    }
     observer.observe(document.body, { childList: true, subtree: true });
   }
 }

package/dist/VideoPlayer/VDefaultVideoPlayer.vue

@@ -21,6 +21,7 @@
   >
     <template v-slot:before-media><slot name="before-media"></slot></template>
     <template v-slot:after-media><slot name="after-media"></slot></template>
+    <template v-slot:between-video-and-transcript><slot name="between-video-and-transcript"></slot></template>
     <template v-slot:before-transcripts><slot name="before-transcripts"></slot></template>
     <template v-slot:after-transcripts><slot name="after-transcripts"></slot></template>
   </BasePlayer>

package/dist/VideoPlayer/index.vue

@@ -20,6 +20,7 @@
   >
     <template v-slot:before-media><slot name="before-media"></slot></template>
     <template v-slot:after-media><slot name="after-media"></slot></template>
+    <template v-slot:between-video-and-transcript><slot name="between-video-and-transcript"></slot></template>
     <template v-slot:before-transcripts><slot name="before-transcripts"></slot></template>
     <template v-slot:after-transcripts><slot name="after-transcripts"></slot></template>
   </VDefaultVideoPlayer>

package/package.json

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