@grfzhl/vue-hls-player 1.0.12 → 1.0.14

package/README.md

@@ -183,6 +183,10 @@ it makes the video muted
 it will set the native <video> autoplay property
 
 ### Last release:
+v1.0.9 - v1.0.14
+- Fixes
+- Small styling improvements
+
 v1.0.9
 - Fix sizes in fullscreen mode for video
 - Hide transcript block completely when hidden

package/dist/VideoPlayer/BasePlayer.vue

@@ -7,7 +7,7 @@
         </div>
       </div>
       <div class="media-overlay" v-if="initialPlayButton">
-        <div class="initial-play">
+        <div class="initial-play" :class="{'hide-playbutton': hideInitialPlayButton}">
           <media-play-button mediapaused="" class="media-button" aria-label="play" tabindex="0" role="button" @click="video.play()">
             <svg slot="icon" viewBox="0 0 32 32">
               <g>
@@ -122,6 +122,10 @@ const props = defineProps({
   isFullscreen: {
     type: Boolean,
     default: false
+  },
+  hideInitialPlayButton: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -134,6 +138,7 @@ const isFullscreen = ref(false);
 const orientation = ref(null)
 const autoHideIntroTitle = ref(false);
 const initialPlayButton = ref(false);
+const hideInitialPlayButton = ref(false)
 
 const videoElement = defineModel()
 
@@ -153,6 +158,12 @@ onMounted(() => {
 
     if(video.value.paused || video.value.currentTime === 0) {
       initialPlayButton.value = true
+
+      if(props.hideInitialPlayButton) {
+        setTimeout(() => {
+          hideInitialPlayButton.value = true
+        }, 1200)
+      }
     }
     
     /**
@@ -173,24 +184,24 @@ onMounted(() => {
      * 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');
-      if (fullscreenButton) {
-        fullscreenButton.handleClick = async (event) => {
-          event.preventDefault();
-          event.stopPropagation();
-          event.stopImmediatePropagation();
-          enterFullscreen(event)
+      const mediaTheme = document.querySelector('.video-player-theme-container');
+
+      if (mediaTheme && mediaTheme.shadowRoot) {
+        const fullscreenButton = mediaTheme.shadowRoot.querySelector('media-fullscreen-button');
+        if (fullscreenButton) {
+          fullscreenButton.handleClick = async (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            event.stopImmediatePropagation();
+            enterFullscreen(event)
+          }
+          observer.disconnect();
+        } else {
+          console.error('Button not found in Shadow DOM!');
         }
-        observer.disconnect();
       } else {
-        console.error('Button not found in Shadow DOM!');
+        console.error('Shadow Root not found!');
       }
-    } else {
-      console.error('Shadow Root not found!');
-    }
     })
     observer.observe(document.body, { childList: true, subtree: true });
   }
@@ -370,6 +381,7 @@ function changeSpeed(e) {
     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: 14px;
@@ -383,10 +395,15 @@ function changeSpeed(e) {
     height: 100%;
   }
 
+  .video-player-theme-container video {
+    object-fit: cover;
+  }
+
   .video-container {
     position: relative;
     line-height: 0;
   }
+  
   .media-overlay {
     position: absolute;
     height: calc(100% - 50px);
@@ -394,6 +411,9 @@ function changeSpeed(e) {
     width: 100%;
     z-index: 99;
     background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(0,0,0,0) 100%);
+    -webkit-transition: 1.5s ease-in-out;
+    -moz-transition: 1.5s ease-in-out;
+    transition: 1.5s ease-in-out;
   }
   .media-overlay .initial-play {
     display: flex;
@@ -401,10 +421,20 @@ function changeSpeed(e) {
     align-content: center;
     align-items: center;
     height: 100%;
+    -webkit-transition: 0.6s ease-in-out;
+    -moz-transition: 0.6s ease-in-out;
+    transition: 0.6s ease-in-out;
+  }
+  .media-overlay .initial-play.hide-playbutton {
+    opacity: 0;
+  }
+  .vp-vpvideo-block:hover .media-overlay .initial-play.hide-playbutton {
+    opacity: 1;
   }
   .media-overlay .initial-play media-play-button {
     width: 80px;
     height: 80px;
+    margin-top: 50px;
     border-radius: 10px;
   }
   .media-overlay .initial-play media-play-button svg {

package/dist/VideoPlayer/SubtitleBlock.vue

@@ -3,13 +3,13 @@
     <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>
+          <svg v-if="!toggleTranscriptBlock" 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="toggleTranscriptBlock" 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">
+    <ul v-if="txtCues.length && toggleTranscriptBlock" class="subtitles">
       <li
         v-for="(txtCue, index) in txtCues"
         :key="index"
@@ -56,6 +56,7 @@
   border: 1px solid var(--outline-gray-1);
   padding: 10px;
   font-family: Arial, sans-serif;
+  margin-top: 20px;
 }
 
 .subtitles {
@@ -75,6 +76,10 @@
   padding-top: 4px;
 }
 
+.subtitles li .content {
+  max-width: 800px;
+}
+
 .subtitles li .content .meta {
   display: flex;
   padding-bottom: 4px;
@@ -120,6 +125,10 @@ const props = defineProps({
   showTranscriptBlock: {
     type: Boolean,
     default: true
+  },
+  toggleTranscriptBlock: {
+    type: Boolean,
+    default: true
   }
 });
 
@@ -173,7 +182,7 @@ function highlightActiveCue(currentTime) {
 }
 
 function toggleTranscript() {
-  emit('toggleTranscript', null)
+  props.toggleTranscriptBlock = !props.toggleTranscriptBlock
 }
 
 function seekTo(time) {

package/dist/VideoPlayer/VDefaultVideoPlayer.vue

@@ -10,6 +10,7 @@
     :onVideoEnd="onVideoEnd"
     :isFullscreen="isFullscreen"
     :showTranscriptBlock="showTranscriptBlock"
+    :hideInitialPlayButton="hideInitialPlayButton"
     @pause="pause"
     @video-ended="onVideoEnd"
     @video-fullscreen-change="onFullscreenChange"
@@ -67,6 +68,10 @@ defineProps({
   showTranscriptBlock: {
     type: Boolean,
     default: true
+  },
+  hideInitialPlayButton: {
+    type: Boolean,
+    default: false
   }
 })
 

package/dist/VideoPlayer/index.vue

@@ -14,6 +14,7 @@
     :isMuted="isMuted"
     :autoplay="autoplay"
     v-model="videoElement"
+    :hideInitialPlayButton="hideInitialPlayButton"
   >
     <template v-slot:before-media><slot name="before-media"></slot></template>
     <template v-slot:after-media><slot name="after-media"></slot></template>
@@ -77,6 +78,10 @@ defineProps({
   showTranscriptBlock: {
     type: Boolean,
     default: true
+  },
+  hideInitialPlayButton: {
+    type: Boolean,
+    default: false
   }
 })
 

package/package.json

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