@grfzhl/vue-hls-player 1.0.3 → 1.0.4

package/README.md

@@ -120,6 +120,11 @@ it can show and hide the video control panel
 subtitles to add as tracks to the video
 
 ### Last release:
+v1.0.4
+1. Make subtitles dynamic
+2. Add new switch to disable the subtitle block
+3. Fix some minor issues
+
 v1.0.3
 1. Removed controls in favour of themable overlay by `player.style`.
 2. Updated hls library

package/dist/VideoPlayer/BasePlayer.vue

@@ -29,11 +29,11 @@
     </media-theme-sutro>
     <div ref="subtitlesContainer" class="custom-subtitles"></div>
   </div>
-  <SubtitleBlock :vttFile="subtitles[0]" :cursor="videoCursor"></SubtitleBlock>
+  <SubtitleBlock v-if="showSubtitleBlock" :subtitle="currentSubtitle" :cursor="videoCursor"></SubtitleBlock>
 </template>
 
 <script setup>
-import { onMounted, onUpdated, ref, onUnmounted } from 'vue'
+import { onMounted, onUpdated, ref, onUnmounted, computed } from 'vue'
 import Hls from 'hls.js'
 import 'player.style/sutro';
 import SubtitleBlock from './SubtitleBlock.vue';
@@ -67,12 +67,21 @@ const props = defineProps({
   subtitles: {
     type: Array,
     default: []
+  },
+  /**
+   * true, if showing separate
+   * block with transcripts
+   */
+  showSubtitleBlock: {
+    type: Boolean,
+    default: true
   }
 })
 
 const emit = defineEmits(['pause', 'test'])
 const video = ref(null)
 const subtitlesContainer = ref(null)
+const currentSubtitleLang = ref(null)
 const videoCursor = ref(0)
 
 onMounted(() => {
@@ -91,6 +100,17 @@ onUnmounted(() => {
   }
 });
 
+const currentSubtitle = computed(() => {
+  if(props.subtitles) {
+    const current = props.subtitles.filter((subt) => {
+      return subt.lang === currentSubtitleLang.value
+    })
+console.log("found current", current)
+    return current.length ? current[0] : null
+  }
+  return null
+})
+
 function updateCurrentTime() {
   videoCursor.value = video.value.currentTime;
 }
@@ -111,6 +131,7 @@ function prepareVideoPlayer() {
       Array.from(textTracks).forEach((track, index) => {
         track.addEventListener("cuechange", () => {
           const activeCues = track.activeCues;
+          currentSubtitleLang.value = track.language
           if (activeCues && activeCues.length > 0) {
             subtitlesContainer.value.textContent = activeCues[0].text
             subtitlesContainer.value.style.display = "block";
@@ -119,9 +140,9 @@ function prepareVideoPlayer() {
           }
         });
         if (track.mode !== previousModes[index]) {
-          console.log(`Track mode changed: ${track.mode}`);
           if (track.mode === "showing") {
             const activeCues = track.activeCues;
+            currentSubtitleLang.value = track.language
             if (activeCues && activeCues.length > 0) {
               subtitlesContainer.value.style.display = "block";
               subtitlesContainer.value.textContent = activeCues[0].text

package/dist/VideoPlayer/SubtitleBlock.vue

@@ -20,9 +20,9 @@
 import { onMounted, onUpdated, ref } from 'vue'
 
 const props = defineProps({
-  vttFile: {
-    type: String,
-    default: ''
+  subtitle: {
+    type: Object,
+    default: null
   },
   cursor: {
     type: Number,
@@ -35,11 +35,15 @@ const subtitlesContainer = ref(null)
 const cues = ref([])
 
 onMounted(async () => {
-  cues.value = await parseVTT(props.vttFile.link)
-  console.log(cues.value)
+  if(props.subtitle) {
+    cues.value = await parseVTT(props.subtitle.link)
+  }
 })
 
 onUpdated(async () => {
+  if(props.subtitle) {
+    cues.value = await parseVTT(props.subtitle.link)
+  }
   // auto scroll text
   if(subtitlesContainer) {
     const activeSubtitle = subtitlesContainer?.value?.querySelectorAll('li.current-highlight')[0];

package/dist/VideoPlayer/index.vue

@@ -6,7 +6,6 @@
     :link="link"
     :progress="progress"
     :isMuted="isMuted"
-    :isControls="isControls"
   />
 
   <VPreviewVideoPlayer

package/package.json

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