@grfzhl/vue-hls-player 1.0.4 → 1.0.6

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.5
+1. Load transcriptions additionally to subtitles
+2. Add styled transcription block for better readability
+3. Improve interaction and dynamic params
+
 v1.0.4
 1. Make subtitles dynamic
 2. Add new switch to disable the subtitle block

package/dist/VideoPlayer/BasePlayer.vue

@@ -1,11 +1,13 @@
 <template>
   <div class="video-container">
-    <media-theme-sutro>
+    <media-theme-sutro class="video-player-theme-container">
       <video
+        class="hls-player"
         slot="media"
         @pause="pause"
-        @ended="pause"
         @keyup="changeSpeed"
+        @ended="onVideoEnd"
+        @seek="seekVideo"
         ref="video"
         :poster="previewImageLink"
         :controls="false"
@@ -27,9 +29,17 @@
           :label="subtitle.label" :default="i === 0" />
       </video>
     </media-theme-sutro>
-    <div ref="subtitlesContainer" class="custom-subtitles"></div>
+    <div class="custom-subtitles" v-show="!showTranscriptBlock">
+      <div class="subtitle-text" ref="subtitlesContainer" style="display: none;"></div>
+    </div>
   </div>
-  <SubtitleBlock v-if="showSubtitleBlock" :subtitle="currentSubtitle" :cursor="videoCursor"></SubtitleBlock>
+  <SubtitleBlock
+    :subtitle="currentSubtitle"
+    :cursor="videoCursor" 
+    :showTranscriptBlock="showTranscriptBlock"
+    @seek="seekVideo"
+    @toggleTranscript="toggleTranscript">
+  </SubtitleBlock>
 </template>
 
 <script setup>
@@ -72,22 +82,29 @@ const props = defineProps({
    * true, if showing separate
    * block with transcripts
    */
-  showSubtitleBlock: {
+  showTranscriptBlock: {
     type: Boolean,
     default: true
+  },
+  isFullscreen: {
+    type: Boolean,
+    default: false
   }
 })
 
-const emit = defineEmits(['pause', 'test'])
+const emit = defineEmits(['pause', 'video-ended', 'video-fullscreen-change'])
 const video = ref(null)
 const subtitlesContainer = ref(null)
 const currentSubtitleLang = ref(null)
 const videoCursor = ref(0)
+const isFullscreen = ref(false);
 
 onMounted(() => {
   prepareVideoPlayer()
   if (video.value) {
+    checkFullscreen();
     video.value.addEventListener('timeupdate', updateCurrentTime);
+    document.addEventListener('fullscreenchange', onFullscreenChange);
   }
 })
 
@@ -97,6 +114,7 @@ onUpdated(() => {
 onUnmounted(() => {
   if (video.value) {
     video.value.removeEventListener('timeupdate', updateCurrentTime);
+    document.removeEventListener('fullscreenchange', onFullscreenChange);
   }
 });
 
@@ -105,16 +123,34 @@ const currentSubtitle = computed(() => {
     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 checkFullscreen() {
+  isFullscreen.value = !!document.fullscreenElement;
+};
+
+function onFullscreenChange() {
+  checkFullscreen();
+  emit('video-fullscreen-change', document.fullscreenElement)
+};
+
+
 function updateCurrentTime() {
   videoCursor.value = video.value.currentTime;
 }
 
+function toggleTranscript() {
+  props.showTranscriptBlock = !props.showTranscriptBlock
+}
+
+function seekVideo(time) {
+  video.value.currentTime = time;
+  video.play()
+}
+
 function prepareVideoPlayer() {
   let hls = new Hls()
   let stream = props.link
@@ -162,10 +198,15 @@ function prepareVideoPlayer() {
 
 function pause() {
   const currentTime = video?.value?.currentTime || 0
-
   emit('pause', currentTime)
 }
 
+function onVideoEnd() {
+  const currentTime = video?.value?.currentTime || 0
+  pause()
+  emit('video-ended', { currentTime: currentTime, video });
+}
+
 function changeSpeed(e) {
   if (e.key === 'w' && video && video.value) {
     video.value.playbackRate = video.value.playbackRate + 0.25
@@ -186,17 +227,26 @@ function changeSpeed(e) {
     position: absolute;
     left: 50%;
     width: auto;
-    max-width: 90%;
+    max-width: 95%;
     text-align: center;
     background: rgba(0, 0, 0, 0.7);
+    border-radius: 6px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+    transform: translate(-50%) translateY(calc(-100% - 60px));
+  }
+  .custom-subtitles .subtitle-text {
     color: white;
-    font-size: 16px;
+    font-size: 14px;
     font-family: Arial, sans-serif;
     line-height: 1.5;
-    padding: 10px 20px;
-    border-radius: 10px;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
-    margin-top: -120px;
-    transform: translateX(-50%) translateY(-100%);
+    padding: 8px 10px;
+  }
+
+  .video-player-theme-container, .hls-player {
+    width: 100%;
+  }
+
+  .video-container {
+    position: relative;
   }
 </style>

package/dist/VideoPlayer/SubtitleBlock.vue

@@ -1,77 +1,291 @@
 <template>
-  <div class="transcript-container"
-    ref="subtitlesContainer">
-    <ul v-if="cues.length" class="subtitles">
-      <li v-for="cue of cues" :class="{'current-highlight': cursor >= cue.start && cursor <= cue.end}">
-        <span class="seconds">{{ secondsToTime(cue.start) }} - {{ secondsToTime(cue.end) }}</span>
-        <span class="text">{{ cue.text }}</span>
+  <div class="transcript-container" ref="subtitlesContainer">
+    <div class="transcript-toggle">
+      <button data-headlessui-state="open" @click="toggleTranscript()">
+        <div class="icon">
+          <svg v-if="!showTranscriptBlock" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right-icon duration-200 h-4 w-4 text-gray-900 stroke-1"><path d="m9 18 6-6-6-6"></path></svg>
+          <svg v-if="showTranscriptBlock" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right-icon rotate-90 transform duration-200 h-4 w-4 text-gray-900 stroke-1"><path d="m9 18 6-6-6-6"></path></svg>
+        </div>
+        Transcript
+      </button>
+    </div>
+    <ul v-if="txtCues.length && showTranscriptBlock" class="subtitles">
+      <li
+        v-for="(txtCue, index) in txtCues"
+        :key="index"
+        :class="{ 'current-highlight': isTxtCueActive(txtCue) }"
+        @click="seekTo(txtCue.start)"
+      >
+        <div class="play-icon">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-play lucide transform duration-200 h-4 w-4 text-gray-900 stroke-1"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="m9 8 6 4-6 4Z"/></svg>
+        </div>
+        <div class="content">
+          <span class="meta">
+            <span class="seconds">{{ secondsToTime(txtCue.start) }} - {{ secondsToTime(txtCue.end) }}</span>
+            <span class="narrator">{{ txtCue.dialog[0].speaker }}</span>
+          </span>
+          <span class="text">
+            <span
+              v-for="(word, wordIndex) in txtCue.dialog[0].text.split('')"
+              :key="wordIndex"
+              :class="{ 'active-word': isWordActive(txtCue, word, wordIndex, index) && isTxtCueActive(txtCue) }"
+            >
+              {{ word }}
+            </span>
+          </span>
+        </div>
       </li>
     </ul>
   </div>
 </template>
 
 <style lang="css" scoped>
-  .subtitles li.current-highlight {
-    font-weight: bold;
-  }
+.transcript-toggle {
+  font-weight: bold;
+}
+.transcript-toggle button {
+  display: flex;
+}
+.transcript-toggle button .icon {
+  padding: 3px;
+}
+.transcript-container {
+  max-height: 400px;
+  overflow-y: scroll;
+  border-radius: 8px;
+  border: 1px solid var(--outline-gray-1);
+  padding: 10px;
+  font-family: Arial, sans-serif;
+}
+
+.subtitles {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.subtitles li {
+  padding: 5px;
+  cursor: pointer;
+  display: flex;
+}
+
+.subtitles li .play-icon {
+  min-width: 24px;
+  padding-top: 4px;
+}
+
+.subtitles li .content .meta {
+  display: flex;
+  padding-bottom: 4px;
+}
+.subtitles li .content .meta .seconds {
+  font-weight: 500;
+}
+
+.subtitles li .content .meta .narrator {
+  padding-left: 10px;
+  font-weight: 500;
+}
+
+.subtitles li.current-highlight {
+}
+
+.subtitles li .active-word {
+  background-color: var(--outline-gray-1);
+}
+
+.subtitles li .seconds {
+  display: block;
+}
+
+.subtitles li .text .narrator {
+  display: block;
+  color: #333;
+}
 </style>
 
 <script setup>
-import { onMounted, onUpdated, ref } from 'vue'
+import { onMounted, watch, ref } from 'vue';
 
 const props = defineProps({
   subtitle: {
     type: Object,
-    default: null
+    default: null,
   },
   cursor: {
     type: Number,
-    default: 0
+    default: 0,
   },
-})
+  showTranscriptBlock: {
+    type: Boolean,
+    default: true
+  }
+});
 
-const emit = defineEmits(['pause', 'test'])
-const subtitlesContainer = ref(null)
-const cues = ref([])
+const emit = defineEmits(['seek', 'toggleTranscript']);
+const subtitlesContainer = ref(null);
+const vttCues = ref([]);
+const txtCues = ref([]);
+const currentCue = ref(null);
 
-onMounted(async () => {
-  if(props.subtitle) {
-    cues.value = await parseVTT(props.subtitle.link)
+
+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);
+  }
+};
+
+onMounted(loadCues);
+
+watch(
+  () => props.subtitle,
+  async (newSubtitle) => {
+    if (newSubtitle) await loadCues();
   }
-})
+);
 
-onUpdated(async () => {
-  if(props.subtitle) {
-    cues.value = await parseVTT(props.subtitle.link)
+watch(
+  () => props.cursor,
+  (currentTime) => {
+    highlightActiveCue(currentTime);
+    checkCurrentCue(currentTime)
   }
-  // auto scroll text
-  if(subtitlesContainer) {
-    const activeSubtitle = subtitlesContainer?.value?.querySelectorAll('li.current-highlight')[0];
+);
+
+/**
+ * highlgiht the current transcript part
+ * and keep it scrolled up
+ * @param currentTime 
+ */
+function highlightActiveCue(currentTime) {
+  if (subtitlesContainer.value) {
+    const activeSubtitle = subtitlesContainer.value.querySelectorAll('li.current-highlight')[0];
     if (activeSubtitle) {
-      subtitlesContainer.value.scrollTop = activeSubtitle.offsetTop - subtitlesContainer.value.offsetTop;
+      subtitlesContainer.value.scrollTop =
+        activeSubtitle.offsetTop - subtitlesContainer.value.offsetTop;
     }
   }
-})
+}
 
+function toggleTranscript() {
+  emit('toggleTranscript', null)
+}
 
+function seekTo(time) {
+  emit('seek', time);
+}
+
+/**
+ * returns true, if the given txt
+ * is currently played
+ * @param txtCue 
+ */
+function isTxtCueActive(txtCue) {
+  return props.cursor >= txtCue.start && props.cursor <= txtCue.end;
+}
+
+/**
+ * true if the word part can be highlighed
+ * as currently active
+ * @param txtCue 
+ * @param word 
+ * @param wordIndex 
+ * @param txtIndex 
+ */
+function isWordActive(txtCue, word, wordIndex, txtIndex) {
+  if(!currentCue.value || !word || !txtCue) {
+    return false
+  }
+  const startPos = txtCue.dialog[0].text.indexOf(currentCue.value)
+  const endPos = startPos + currentCue.value.length
+  if(wordIndex >= startPos && wordIndex < endPos) {
+    return true;
+  }
+  return false;
+}
+
+function checkCurrentCue(currentCursor) {
+  Array.from(vttCues.value).forEach((a, index) => {
+    if(currentCursor >= a.start && currentCursor <= a.end) {
+      currentCue.value = a.text
+    }
+  });
+}
+
+/**
+ * get subtitles from the
+ * vtt files
+ * @param fileUrl
+ */
 async function parseVTT(fileUrl) {
   const response = await fetch(fileUrl);
   const text = await response.text();
   const cues = [];
-  const lines = text.split("\n");
+  const lines = text.split('\n');
   let cue = null;
 
   for (let i = 0; i < lines.length; i++) {
     const line = lines[i].trim();
     if (!line) continue;
 
-    if (line.includes("-->")) {
-      const [start, end] = line.split(" --> ");
-      cue = { start: timeToSeconds(start), end: timeToSeconds(end), text: "" };
+    if (line.includes('-->')) {
+      const [start, end] = line.split(' --> ');
+      cue = { start: timeToSeconds(start), end: timeToSeconds(end), text: '' };
     } else if (cue) {
-      cue.text += line + " ";
+      cue.text += line + ' ';
+    }
+
+    if (cue && (!lines[i + 1] || lines[i + 1].includes('-->'))) {
+      cues.push(cue);
+      cue = null;
+    }
+  }
+  return cues;
+}
+
+/**
+ * get the raw transcriptions
+ * from the txt files
+ * @param fileUrl 
+ */
+async function parseTXT(fileUrl) {
+  const response = await fetch(fileUrl);
+  const text = await response.text();
+  const cues = [];
+  const lines = text.split('\n');
+  let cue = null;
+  let dialog = null;
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i].trim();
+    if (!line) continue;
+
+    /**
+     * extract every transcript part by time
+     */
+    if (line.match(/^\d{2}:\d{2}:\d{2}:\d{2} - \d{2}:\d{2}:\d{2}:\d{2}/)) {
+      const [start, end] = line.split(' - ');
+      cue = {
+        start: timeToSeconds(start),
+        end: timeToSeconds(end),
+        dialog: []
+      };
+      dialog = {
+        text: '',
+        speaker: ''
+      }
+    } else if (cue && dialog.text == '' && dialog.speaker == '') {
+      dialog.speaker = line;
+    } else if (cue && dialog.speaker !== '') {
+      dialog.text += line + ' ';
     }
-    if (cue && (!lines[i + 1] || lines[i + 1].includes("-->"))) {
+
+    if (cue && (!lines[i + 1] || lines[i + 1].match(/^\d{2}:\d{2}:\d{2}:\d{2} - \d{2}:\d{2}:\d{2}:\d{2}/))) {
+      cue.dialog.push(dialog);
       cues.push(cue);
       cue = null;
     }
@@ -79,8 +293,9 @@ async function parseVTT(fileUrl) {
   return cues;
 }
 
+// Hilfsfunktionen
 function timeToSeconds(timestamp) {
-  const [hours, minutes, seconds] = timestamp.split(":").map(parseFloat);
+  const [hours, minutes, seconds] = timestamp.split(':').map(parseFloat);
   return hours * 3600 + minutes * 60 + seconds;
 }
 
@@ -91,7 +306,4 @@ function secondsToTime(seconds) {
   const pad = (num) => String(num).padStart(2, '0');
   return `${pad(hours)}:${pad(minutes)}:${pad(secs)}`;
 }
-</script>
-
-
-
+</script>

package/dist/VideoPlayer/VDefaultVideoPlayer.vue

@@ -5,14 +5,19 @@
     :progress="progress"
     :isMuted="isMuted"
     :isControls="isControls"
+    :onVideoEnd="onVideoEnd"
+    :isFullscreen="isFullscreen"
+    :showTranscriptBlock="showTranscriptBlock"
     @pause="pause"
+    @video-ended="onVideoEnd"
+    @video-fullscreen-change="onFullscreenChange"
   />
 </template>
 
 <script setup>
 import BasePlayer from './BasePlayer.vue'
 
-const emit = defineEmits(['pause'])
+const emit = defineEmits(['pause', 'video-ended', 'video-fullscreen-change'])
 
 defineProps({
   previewImageLink: {
@@ -35,9 +40,26 @@ defineProps({
     type: Boolean,
     default: true
   },
+  isFullscreen: {
+    type: Boolean,
+    default: false
+  },
+  showTranscriptBlock: {
+    type: Boolean,
+    default: true
+  }
 })
 
 function pause(currentTime) {
   emit('pause', currentTime)
 }
+
+function onVideoEnd(data) {
+  pause()
+  emit('video-ended', data);
+}
+
+function onFullscreenChange(data) {
+  emit('video-fullscreen-change', data);
+}
 </script>

package/dist/VideoPlayer/index.vue

@@ -2,7 +2,11 @@
   <VDefaultVideoPlayer
     v-if="type === 'default'"
     @pause="pause"
+    @video-fullscreen-change="onVideoFullScreenChange"
+    @video-ended="onVideoEnd"
     :previewImageLink="previewImageLink"
+    :showTranscriptBlock="showTranscriptBlock"
+    :isFullscreen="isFullscreen"
     :link="link"
     :progress="progress"
     :isMuted="isMuted"
@@ -19,7 +23,7 @@
 import VDefaultVideoPlayer from './VDefaultVideoPlayer.vue'
 import VPreviewVideoPlayer from './VPreviewVideoPlayer.vue'
 
-const emit = defineEmits(['pause'])
+const emit = defineEmits(['pause', 'video-ended', 'video-fullscreen-change'])
 
 defineProps({
   previewImageLink: {
@@ -46,9 +50,23 @@ defineProps({
     type: Boolean,
     default: true
   },
+  isFullscreen: {
+    type: Boolean,
+    default: false
+  },
+  showTranscriptBlock: {
+    type: Boolean,
+    default: true
+  }
 })
 
 function pause(currentTime) {
   emit('pause', currentTime)
 }
+function onVideoFullScreenChange(data) {
+  emit('video-fullscreen-change', data)
+}
+function onVideoEnd(data) {
+  emit('video-ended', data);
+}
 </script>

package/package.json

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