@grfzhl/vue-hls-player 1.0.8 → 1.0.11

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
+- Fix sizes in fullscreen mode for video
+- Hide transcript block completely when hidden
+
 v1.0.8
 - Add slots to inject own elements nearby video element
 - Add prop for autoplay video

package/dist/VideoPlayer/BasePlayer.vue

@@ -1,8 +1,13 @@
 <template>
   <div class="video-container">
-    <div class="media-container" id="hls-player-media-container">
+    <div class="media-container" id="hls-player-media-container" :class="{'is-fullscreen': isFullscreen}">
+      <div class="media-fullscreen-overlay" v-if="introTitle">
+        <div class="intro-title" :class="{ 'auto-hide': autoHideIntroTitle }">
+          <h2>{{ introTitle }}</h2>
+        </div>
+      </div>
       <slot name="before-media"></slot>
-      <media-theme-sutro class="video-player-theme-container">
+      <media-theme-sutro class="video-player-theme-container" :class="{'is-fullscreen': isFullscreen}">
         <video
           class="hls-player"
           slot="media"
@@ -58,6 +63,10 @@ import 'player.style/sutro';
 import SubtitleBlock from './SubtitleBlock.vue';
 
 const props = defineProps({
+  introTitle: {
+    type: String,
+    default: ''
+  },
   previewImageLink: {
     type: String,
     default: ''
@@ -111,6 +120,8 @@ const subtitlesContainer = ref(null)
 const currentSubtitleLang = ref(null)
 const videoCursor = ref(0)
 const isFullscreen = ref(false);
+const orientation = ref(null)
+const autoHideIntroTitle = ref(false);
 
 const videoElement = defineModel()
 
@@ -125,6 +136,21 @@ onMounted(() => {
 
     video.value.addEventListener('timeupdate', updateCurrentTime);
     document.addEventListener('fullscreenchange', onFullscreenChange);
+    document.addEventListener('orientationchange', onOrientationChange);
+    window.screen.orientation.addEventListener("change", onOrientationChange);
+    
+    /**
+     * 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
@@ -136,11 +162,11 @@ onMounted(() => {
     if (mediaTheme && mediaTheme.shadowRoot) {
       const fullscreenButton = mediaTheme.shadowRoot.querySelector('media-fullscreen-button');
       if (fullscreenButton) {
-        fullscreenButton.handleClick = (event) => {
+        fullscreenButton.handleClick = async (event) => {
           event.preventDefault();
           event.stopPropagation();
           event.stopImmediatePropagation();
-          emit('video-fullscreen-action', event)
+          enterFullscreen(event)
         }
         observer.disconnect();
       } else {
@@ -162,6 +188,8 @@ onUnmounted(() => {
   if (video.value) {
     video.value.removeEventListener('timeupdate', updateCurrentTime);
     document.removeEventListener('fullscreenchange', onFullscreenChange);
+    document.removeEventListener('orientationchange', onOrientationChange);
+    window.screen.orientation.addEventListener("change", onOrientationChange);
   }
 });
 
@@ -191,9 +219,35 @@ watch([props, videoElement], (a) => {
 })
 
 function onFullscreenChange() {
+  isFullscreen.value = !!document.fullscreenElement
   emit('video-fullscreen-change', document.fullscreenElement)
+
+  // hide intro title after x seconds
+  if(isFullscreen.value === true) {
+    setTimeout(() => {
+      autoHideIntroTitle.value = true;
+    }, 5000)
+  } else {
+    autoHideIntroTitle.value = false;
+  }
 };
 
+function onOrientationChange(e) { 
+  let angle;
+  if (e.target && e.target.screen && e.target.screen.orientation) {
+    angle = e.target.screen.orientation.angle;
+  } else if (typeof window.orientation !== "undefined") {
+    // extra sausage for safari
+    angle = window.orientation;
+  }
+  orientation.value = angle === 0 || angle === 180 
+    ? "portrait" 
+    : "landscape";
+}
+
+function enterFullscreen(event) {
+  emit('video-fullscreen-action', event)
+}
 
 function updateCurrentTime() {
   videoCursor.value = video.value.currentTime;
@@ -307,9 +361,47 @@ function changeSpeed(e) {
 
   .video-player-theme-container, .hls-player {
     width: 100%;
+    height: 100%;
   }
 
   .video-container {
     position: relative;
+    line-height: 0;
+  }
+  .media-fullscreen-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    z-index: 9999999;
+    padding: 2rem 5rem;
+  }
+  .is-fullscreen .media-fullscreen-overlay {
+    display: block!important;
+  }
+  .intro-title h2 {
+    font-size: 23px;
+    color: white;
+    opacity: 1;
+  }
+  .fullscreen-video .media-container {
+  }
+  .video-player-theme-container.is-fullscreen {
+    width: 100vw;
+    height: 100vh;
+    object-fit: cover;
+  }
+  .video-player-theme-container.is-fullscreen .hls-player {
+    width: 100vw;
+    height: 100vh;
+    object-fit: cover;
+   }
+
+  .auto-hide {
+    opacity: 0;
+    -webkit-transition: opacity 1.5s ease-in-out;
+    -moz-transition: opacity 1.5s ease-in-out;
+    transition: opacity 1.5s ease-in-out;
   }
 </style>

package/dist/VideoPlayer/SubtitleBlock.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="transcript-container" ref="subtitlesContainer">
+  <div class="transcript-container" ref="subtitlesContainer" v-if="showTranscriptBlock">
     <div class="transcript-toggle">
       <button data-headlessui-state="open" @click="toggleTranscript()">
         <div class="icon">

package/dist/VideoPlayer/VDefaultVideoPlayer.vue

@@ -1,5 +1,6 @@
 <template>
   <BasePlayer
+    :introTitle="introTitle"
     :previewImageLink="previewImageLink"
     :link="link"
     :progress="progress"
@@ -26,7 +27,7 @@
 import BasePlayer from './BasePlayer.vue'
 import { ref } from 'vue'
 
-const emit = defineEmits(['pause', 'video-ended', 'video-fullscreen-change'])
+const emit = defineEmits(['pause', 'video-ended', 'video-fullscreen-change', 'video-fullscreen-action'])
 
 const videoElement = ref(null);
 
@@ -59,6 +60,10 @@ defineProps({
     type: Boolean,
     default: false
   },
+  introTitle: {
+    type: String,
+    default: ''
+  },
   showTranscriptBlock: {
     type: Boolean,
     default: true

package/dist/VideoPlayer/index.vue

@@ -5,6 +5,7 @@
     @video-fullscreen-change="onVideoFullScreenChange"
     @video-ended="onVideoEnd"
     @video-fullscreen-action="oVideoFullscreenAction"
+    :introTitle="introTitle"
     :previewImageLink="previewImageLink"
     :showTranscriptBlock="showTranscriptBlock"
     :isFullscreen="isFullscreen"
@@ -69,6 +70,10 @@ defineProps({
     type: Boolean,
     default: false
   },
+  introTitle: {
+    type: String,
+    default: ''
+  },
   showTranscriptBlock: {
     type: Boolean,
     default: true

package/package.json

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