@grfzhl/vue-hls-player 1.0.19 → 1.1.0

package/README.md

@@ -73,6 +73,17 @@ For **nuxt 3**, try to wrap this component in ClientOnly, images for previewImag
 </ClientOnly>
 ```
 ### Props:
+**fullScreenElement**:
+1. value: 'hls-player-media-container', type: String
+
+If you need to provide additional UI in fullscreen mode
+you can input a parent wrapper of your player to show
+in fullscreen
+
+```
+fullScreenElement="demo"
+```
+
 **type**: 
 1. value: 'default', type: String
 
@@ -124,17 +135,11 @@ const fullScreenAction = (fullScreenElement) => {
 ```
 
 **@video-fullscreen-action**:
-1. Event, handling the fullscreen action of the player
-@video-fullscreen-action="fullScreenAction"
-```
-const fullScreenAction = (data) => {
-	if(isFullscreen.value) {
-		document.exitFullscreen();
-	} else {
-		document.getElementById("video-container").requestFullscreen()
-	}
-}
-```
+Removed in the 1.1.0 version.
+It caused too much problems with mobile devices.
+Now you can pass the desired element id to open
+fullscreen with prop: fullScreenElement
+
 **showTranscriptBlock**:
 1. value: true or false, type: Boolean
 

package/dist/VideoPlayer/BasePlayer.vue

@@ -22,6 +22,7 @@
         <video
           class="hls-player"
           slot="media"
+          :key="link"
           @pause="pause"
           @keyup="changeSpeed"
           @ended="onVideoEnd"
@@ -46,6 +47,7 @@
             :src="subtitle.link"
             kind="subtitles"
             :srclang="subtitle.lang"
+            @error="onSubtitleError(subtitle.link)"
             :label="subtitle.label" :default="i === 0" />
         </video>
       </media-theme-sutro>
@@ -126,10 +128,14 @@ const props = defineProps({
   hideInitialPlayButton: {
     type: Boolean,
     default: false
+  },
+  fullScreenElement: {
+    type: String,
+    default: 'hls-player-media-container'
   }
 })
 
-const emit = defineEmits(['pause', 'video-ended', 'video-fullscreen-change', 'video-fullscreen-action'])
+const emit = defineEmits(['pause', 'video-ended', 'video-fullscreen-change'])
 const video = ref(null)
 const subtitlesContainer = ref(null)
 const currentSubtitleLang = ref(null)
@@ -141,6 +147,8 @@ const initialPlayButton = ref(false);
 const hideInitialPlayButton = ref(false)
 const link = toRef(props, 'link');
 const previewImageLink = toRef(props, 'previewImageLink');
+let currentTime = 0
+let hls = new Hls()
 
 const videoElement = defineModel()
 
@@ -197,7 +205,7 @@ onMounted(() => {
             event.preventDefault();
             event.stopPropagation();
             event.stopImmediatePropagation();
-            enterFullscreen(event)
+            startFullscreen();
           }
           observer.disconnect();
         } else {
@@ -218,10 +226,10 @@ onUpdated(() => {
 onUnmounted(() => {
   if (video.value) {
     video.value.removeEventListener('timeupdate', updateCurrentTime);
-    document.removeEventListener('fullscreenchange', onFullscreenChange);
-    document.removeEventListener('orientationchange', onOrientationChange);
-    window.screen.orientation.addEventListener("change", onOrientationChange);
   }
+  document.removeEventListener('fullscreenchange', onFullscreenChange);
+  document.removeEventListener('orientationchange', onOrientationChange);
+  window.screen.orientation.removeEventListener("change", onOrientationChange);
 });
 
 const mutedAttr = computed(() => {
@@ -240,18 +248,69 @@ const currentSubtitle = computed(() => {
 })
 
 watch([props, videoElement], (a) => {
-  if(a[0].autoplay && a[1]) {
+  if(a[0].autoplay && a[1] && a[1].paused) {
     // autoplay is only possible when muted
     a[1].muted = true
     setTimeout(() => {
-      a[1].play();
+      a[1].play().catch(err => console.warn("Autoplay-Error:", err));
     }, 200)
   }
 })
 
-function onFullscreenChange() {
-  isFullscreen.value = !!document.fullscreenElement
-  emit('video-fullscreen-change', document.fullscreenElement)
+watch(link, (newLink, oldLink) => {
+  if (newLink !== oldLink) {
+    prepareVideoPlayer();
+  }
+})
+
+async function startFullscreen() {
+  let vpVideoBlock = document.getElementById(props.fullScreenElement);
+  if(video.value) {
+    currentTime = video.value.currentTime
+  }
+  if (document.fullscreenElement) {
+    if (screen.orientation && screen.orientation.unlock) {
+      screen.orientation.unlock();
+    }
+    await document.exitFullscreen();
+    isFullscreen.value = false;
+  } else {
+    isFullscreen.value = true;
+    try {
+      if (vpVideoBlock.requestFullscreen) {
+        await vpVideoBlock.requestFullscreen();
+      } else if (vpVideoBlock.webkitRequestFullscreen) {
+        vpVideoBlock = document.querySelector('video');
+        await vpVideoBlock.webkitRequestFullscreen(); // Safari
+      } else if (vpVideoBlock.mozRequestFullScreen) {
+        await vpVideoBlock.mozRequestFullScreen(); // Firefox
+      } else if (vpVideoBlock.msRequestFullscreen) {
+        await vpVideoBlock.msRequestFullscreen(); // IE/Edge
+      }
+
+      if (screen.orientation && screen.orientation.lock) {
+        try {
+          await screen.orientation.lock("landscape");
+        } catch (error) {
+          console.warn("Orientation lock failed", error);
+        }
+      } else {
+        console.warn("Orientation lock not supported.");
+      }
+    } catch (error) {
+      console.error("Fullscreen could not be activated", error);
+      isFullscreen.value = false;
+    }
+    video.value.currentTime = currentTime;
+  }
+}
+
+function onSubtitleError(link) {
+  console.error(`Error on loading subtitles: ${link}`);
+}
+
+function onFullscreenChange(e) {
+  e.preventDefault();
 
   // hide intro title after x seconds
   if(isFullscreen.value === true) {
@@ -261,6 +320,7 @@ function onFullscreenChange() {
   } else {
     autoHideIntroTitle.value = false;
   }
+  isFullscreen.value = !!document.fullscreenElement;
 };
 
 function onOrientationChange(e) { 
@@ -274,10 +334,17 @@ function onOrientationChange(e) {
   orientation.value = angle === 0 || angle === 180 
     ? "portrait" 
     : "landscape";
-}
 
-function enterFullscreen(event) {
-  emit('video-fullscreen-action', event)
+  let isPortrait = angle === 0 || angle === 180;
+  let isLandscape = angle === 90 || angle === -90;
+
+  if (isFullscreen.value && isPortrait) {
+    setTimeout(async () => {
+      if (!document.fullscreenElement) {
+        startFullscreen();
+      }
+    }, 700);
+  }
 }
 
 function updateCurrentTime() {
@@ -297,9 +364,9 @@ function seekVideo(time) {
 }
 
 function prepareVideoPlayer() {
-  let hls = new Hls()
   let stream = props.link
   hls.loadSource(stream)
+  hls.attachMedia(video.value)
 
   if (video.value) {
     hls.attachMedia(video.value)
@@ -365,6 +432,8 @@ function changeSpeed(e) {
     video.value.playbackRate = video.value.playbackRate - 0.25
   }
 }
+defineExpose({ startFullscreen }); 
+
 </script>
 <style>
   video::cue {

package/dist/VideoPlayer/VDefaultVideoPlayer.vue

@@ -14,8 +14,8 @@
     @pause="pause"
     @video-ended="onVideoEnd"
     @video-fullscreen-change="onFullscreenChange"
-    @video-fullscreen-action="oVideoFullscreenAction"
     v-model="videoElement"
+    ref="childRef"
   >
     <template v-slot:before-media><slot name="before-media"></slot></template>
     <template v-slot:after-media><slot name="after-media"></slot></template>
@@ -28,9 +28,10 @@
 import BasePlayer from './BasePlayer.vue'
 import { ref, toRef } from 'vue'
 
-const emit = defineEmits(['pause', 'video-ended', 'video-fullscreen-change', 'video-fullscreen-action'])
+const emit = defineEmits(['pause', 'video-ended', 'video-fullscreen-change'])
 
 const videoElement = ref(null);
+const childRef = ref(null)
 
 const props = defineProps({
   previewImageLink: {
@@ -72,12 +73,18 @@ const props = defineProps({
   hideInitialPlayButton: {
     type: Boolean,
     default: false
+  },
+  fullScreenElement: {
+    type: String,
+    default: 'hls-player-media-container'
   }
 })
 
 const link = toRef(props, 'link');
 const previewImageLink = toRef(props, 'previewImageLink');
 
+defineExpose({ startFullscreen }); 
+
 function pause(currentTime) {
   emit('pause', currentTime)
 }
@@ -91,7 +98,7 @@ function onFullscreenChange(data) {
   emit('video-fullscreen-change', data);
 }
 
-function oVideoFullscreenAction(data) {
-  emit('video-fullscreen-action', data)
+function startFullscreen() {
+  childRef.value.startFullscreen();
 }
 </script>

package/dist/VideoPlayer/index.vue

@@ -4,7 +4,6 @@
     @pause="pause"
     @video-fullscreen-change="onVideoFullScreenChange"
     @video-ended="onVideoEnd"
-    @video-fullscreen-action="oVideoFullscreenAction"
     :introTitle="introTitle"
     :previewImageLink="previewImageLink"
     :showTranscriptBlock="showTranscriptBlock"
@@ -14,6 +13,7 @@
     :isMuted="isMuted"
     :autoplay="autoplay"
     v-model="videoElement"
+    ref="childRef"
     :hideInitialPlayButton="hideInitialPlayButton"
   >
     <template v-slot:before-media><slot name="before-media"></slot></template>
@@ -37,6 +37,7 @@ import { ref, toRef } from 'vue'
 const emit = defineEmits(['pause', 'video-ended', 'video-fullscreen-change', 'video-fullscreen-action'])
 
 const videoElement = ref(null);
+const childRef = ref(null)
 
 const props = defineProps({
   previewImageLink: {
@@ -82,12 +83,18 @@ const props = defineProps({
   hideInitialPlayButton: {
     type: Boolean,
     default: false
+  },
+  fullScreenElement: {
+    type: String,
+    default: 'hls-player-media-container'
   }
 })
 
 const link = toRef(props, 'link');
 const previewImageLink = toRef(props, 'previewImageLink');
 
+defineExpose({ startFullscreen }); 
+
 function pause(currentTime) {
   emit('pause', currentTime)
 }
@@ -97,7 +104,7 @@ function onVideoFullScreenChange(data) {
 function onVideoEnd(data) {
   emit('video-ended', data);
 }
-function oVideoFullscreenAction(data) {
-  emit('video-fullscreen-action', data)
+function startFullscreen() {
+  childRef.value.startFullscreen();
 }
 </script>

package/package.json

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