@grfzhl/vue-hls-player 1.0.9 → 1.0.12

package/dist/VideoPlayer/BasePlayer.vue

@@ -1,6 +1,22 @@
 <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>
+      <div class="media-overlay" v-if="initialPlayButton">
+        <div class="initial-play">
+          <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>
+                <path id="icon-play" d="M20.7131 14.6976C21.7208 15.2735 21.7208 16.7265 20.7131 17.3024L12.7442 21.856C11.7442 22.4274 10.5 21.7054 10.5 20.5536L10.5 11.4464C10.5 10.2946 11.7442 9.57257 12.7442 10.144L20.7131 14.6976Z"></path>
+              </g>
+            </svg>
+          </media-play-button>
+        </div>
+      </div>
       <slot name="before-media"></slot>
       <media-theme-sutro class="video-player-theme-container" :class="{'is-fullscreen': isFullscreen}">
         <video
@@ -58,6 +74,10 @@ import 'player.style/sutro';
 import SubtitleBlock from './SubtitleBlock.vue';
 
 const props = defineProps({
+  introTitle: {
+    type: String,
+    default: ''
+  },
   previewImageLink: {
     type: String,
     default: ''
@@ -111,6 +131,9 @@ 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 initialPlayButton = ref(false);
 
 const videoElement = defineModel()
 
@@ -125,6 +148,25 @@ onMounted(() => {
 
     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
+    }
+    
+    /**
+     * 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 +178,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 +204,8 @@ onUnmounted(() => {
   if (video.value) {
     video.value.removeEventListener('timeupdate', updateCurrentTime);
     document.removeEventListener('fullscreenchange', onFullscreenChange);
+    document.removeEventListener('orientationchange', onOrientationChange);
+    window.screen.orientation.addEventListener("change", onOrientationChange);
   }
 });
 
@@ -193,11 +237,39 @@ 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;
+  if(!video.value.paused) {
+    initialPlayButton.value = false;
+  }
 }
 
 function toggleTranscript() {
@@ -315,7 +387,49 @@ function changeSpeed(e) {
     position: relative;
     line-height: 0;
   }
-
+  .media-overlay {
+    position: absolute;
+    height: calc(100% - 50px);
+    top: 0;
+    width: 100%;
+    z-index: 99;
+    background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(0,0,0,0) 100%);
+  }
+  .media-overlay .initial-play {
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+    height: 100%;
+  }
+  .media-overlay .initial-play media-play-button {
+    width: 80px;
+    height: 80px;
+    border-radius: 10px;
+  }
+  .media-overlay .initial-play media-play-button svg {
+    width: 100%;
+    height: 100%;
+  }
+  .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;
@@ -326,4 +440,11 @@ function changeSpeed(e) {
     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/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.9",
+  "version": "1.0.12",
   "type": "module",
   "files": [
     "dist"