@grfzhl/vue-hls-player 1.1.1 → 1.1.3

package/dist/VideoPlayer/BasePlayer.vue

@@ -38,7 +38,6 @@
           :autoplay="autoplay && isMuted"
         >
           <source
-            :src="link"
             type="application/x-mpegURL"
           />
           <track 
@@ -154,69 +153,6 @@ const videoElement = defineModel()
 
 onMounted(() => {
   prepareVideoPlayer()
-  if (video.value) {
-
-    // pass video element as reference to model
-    if (!videoElement.value) {
-      videoElement.value = video.value;
-    }
-
-    video.value.addEventListener('timeupdate', updateCurrentTime);
-    document.addEventListener('fullscreenchange', onFullscreenChange);
-    document.addEventListener('orientationchange', onOrientationChange);
-    window.screen.orientation.addEventListener("change", onOrientationChange);
-
-    if(video.value.paused || video.value.currentTime === 0) {
-      initialPlayButton.value = true
-
-      if(props.hideInitialPlayButton) {
-        setTimeout(() => {
-          hideInitialPlayButton.value = true
-        }, 1200)
-      }
-    }
-    
-    /**
-     * detect initial display orientation
-     */
-    if (typeof window.orientation === "undefined") {
-      orientation.value = window.screen.orientation.angle === 0 || window.screen.orientation.angle === 180 
-        ? "portrait" 
-        : "landscape";
-    } else {
-      orientation.value = window.orientation === 0 || window.orientation === 180 
-        ? "portrait" 
-        : "landscape"; // for safari
-    }
-
-    /**
-     * overwrite player.style video fullscreen button
-     * to inject own fullscreen logic
-     */
-    const observer = new MutationObserver((mutationsList, observer) => {
-      const mediaTheme = document.querySelector('.video-player-theme-container');
-
-      if (mediaTheme && mediaTheme.shadowRoot) {
-        const fullscreenButton = mediaTheme.shadowRoot.querySelector('media-fullscreen-button');
-        const playbackRateButton = mediaTheme.shadowRoot.querySelector('media-playback-rate-menu');
-        playbackRateButton.setAttribute('rates', '0.25 0.5 0.75 1 1.5 2 3');
-        if (fullscreenButton) {
-          fullscreenButton.handleClick = async (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            event.stopImmediatePropagation();
-            startFullscreen();
-          }
-          observer.disconnect();
-        } else {
-          console.error('Button not found in Shadow DOM!');
-        }
-      } else {
-        console.error('Shadow Root not found!');
-      }
-    })
-    observer.observe(document.body, { childList: true, subtree: true });
-  }
 })
 
 onUpdated(() => {
@@ -374,7 +310,6 @@ function prepareVideoPlayer() {
     hls.loadSource(stream)
     hls.attachMedia(video.value)
 
-    hls.attachMedia(video.value)
     video.value.muted = props.isMuted
     video.value.currentTime = props.progress
 
@@ -416,6 +351,73 @@ function prepareVideoPlayer() {
       });
     }
     setInterval(checkTrackModeChanges, 100);
+    initVideo();
+  }
+}
+
+function initVideo() {
+  if (video.value) {
+
+    // pass video element as reference to model
+    if (!videoElement.value) {
+      videoElement.value = video.value;
+    }
+
+    video.value.addEventListener('timeupdate', updateCurrentTime);
+    document.addEventListener('fullscreenchange', onFullscreenChange);
+    document.addEventListener('orientationchange', onOrientationChange);
+    window.screen.orientation.addEventListener("change", onOrientationChange);
+
+    if(video.value.paused || video.value.currentTime === 0) {
+      initialPlayButton.value = true
+
+      if(props.hideInitialPlayButton) {
+        setTimeout(() => {
+          hideInitialPlayButton.value = true
+        }, 1200)
+      }
+    }
+
+    /**
+     * detect initial display orientation
+     */
+    if (typeof window.orientation === "undefined") {
+      orientation.value = window.screen.orientation.angle === 0 || window.screen.orientation.angle === 180 
+        ? "portrait" 
+        : "landscape";
+    } else {
+      orientation.value = window.orientation === 0 || window.orientation === 180 
+        ? "portrait" 
+        : "landscape"; // for safari
+    }
+
+    /**
+     * overwrite player.style video fullscreen button
+     * to inject own fullscreen logic
+     */
+    const observer = new MutationObserver((mutationsList, observer) => {
+      const mediaTheme = document.querySelector('.video-player-theme-container');
+
+      if (mediaTheme && mediaTheme.shadowRoot) {
+        const fullscreenButton = mediaTheme.shadowRoot.querySelector('media-fullscreen-button');
+        const playbackRateButton = mediaTheme.shadowRoot.querySelector('media-playback-rate-menu');
+        playbackRateButton.setAttribute('rates', '0.25 0.5 0.75 1 1.5 2 3');
+        if (fullscreenButton) {
+          fullscreenButton.handleClick = async (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            event.stopImmediatePropagation();
+            startFullscreen();
+          }
+          observer.disconnect();
+        } else {
+          console.error('Button not found in Shadow DOM!');
+        }
+      } else {
+        console.error('Shadow Root not found!');
+      }
+    })
+    observer.observe(document.body, { childList: true, subtree: true });
   }
 }
 

package/dist/VideoPlayer/SubtitleBlock.vue

@@ -161,6 +161,7 @@ watch(
 watch(
   () => props.cursor,
   (currentTime) => {
+console.log("cursor watch", currentTime)
     highlightActiveCue(currentTime);
     checkCurrentCue(currentTime)
   }
@@ -207,7 +208,7 @@ function isTxtCueActive(txtCue) {
  * @param txtIndex 
  */
 function isWordActive(txtCue, word, wordIndex, txtIndex) {
-  console.log("check word active ", txtCue, word, wordIndex, txtIndex)
+  console.log("check word active ", txtCue, word, wordIndex, currentCue.value)
   if(!currentCue.value || !word || !txtCue) {
     return false
   }
@@ -222,6 +223,7 @@ 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
     }

package/package.json

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