From bed10cabf47d0e81bba4c2857986d910001acbb8 Mon Sep 17 00:00:00 2001
From: ArabCoders <admin@arabcoders.org>
Date: Sat, 16 Dec 2023 17:58:48 +0300
Subject: [PATCH] Added plyr as video player.

---
 frontend/package-lock.json               | 33 ++++++++++++
 frontend/package.json                    |  1 +
 frontend/src/App.vue                     |  2 +-
 frontend/src/components/Video-Player.vue | 67 +++++++++++++-----------
 4 files changed, 71 insertions(+), 32 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index c6017ee9..4a512d30 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -16,6 +16,7 @@
         "core-js": "^3.8.3",
         "hls.js": "^1.4.12",
         "moment": "^2.29.4",
+        "plyr": "^3.7.8",
         "socket.io-client": "^4.7.2",
         "vue": "^3.3.9",
         "vue-toastification": "^2.0.0-rc.5"
@@ -4967,6 +4968,11 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
+    "node_modules/custom-event-polyfill": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz",
+      "integrity": "sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w=="
+    },
     "node_modules/debounce": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
@@ -7512,6 +7518,11 @@
         "json5": "lib/cli.js"
       }
     },
+    "node_modules/loadjs": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/loadjs/-/loadjs-4.2.0.tgz",
+      "integrity": "sha512-AgQGZisAlTPbTEzrHPb6q+NYBMD+DP9uvGSIjSUM5uG+0jG15cb8axWpxuOIqrmQjn6scaaH8JwloiP27b2KXA=="
+    },
     "node_modules/locate-path": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -8746,6 +8757,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/plyr": {
+      "version": "3.7.8",
+      "resolved": "https://registry.npmjs.org/plyr/-/plyr-3.7.8.tgz",
+      "integrity": "sha512-yG/EHDobwbB/uP+4Bm6eUpJ93f8xxHjjk2dYcD1Oqpe1EcuQl5tzzw9Oq+uVAzd2lkM11qZfydSiyIpiB8pgdA==",
+      "dependencies": {
+        "core-js": "^3.26.1",
+        "custom-event-polyfill": "^1.0.7",
+        "loadjs": "^4.2.0",
+        "rangetouch": "^2.0.1",
+        "url-polyfill": "^1.1.12"
+      }
+    },
     "node_modules/portfinder": {
       "version": "1.0.32",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz",
@@ -9501,6 +9524,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/rangetouch": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/rangetouch/-/rangetouch-2.0.1.tgz",
+      "integrity": "sha512-sln+pNSc8NGaHoLzwNBssFSf/rSYkqeBXzX1AtJlkJiUaVSJSbRAWJk+4omsXkN+EJalzkZhWQ3th1m0FpR5xA=="
+    },
     "node_modules/raw-body": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
@@ -10907,6 +10935,11 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/url-polyfill": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/url-polyfill/-/url-polyfill-1.1.12.tgz",
+      "integrity": "sha512-mYFmBHCapZjtcNHW0MDq9967t+z4Dmg5CJ0KqysK3+ZbyoNOWQHksGCTWwDhxGXllkWlOc10Xfko6v4a3ucM6A=="
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 17e16ccd..abec2065 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,6 +17,7 @@
     "core-js": "^3.8.3",
     "hls.js": "^1.4.12",
     "moment": "^2.29.4",
+    "plyr": "^3.7.8",
     "socket.io-client": "^4.7.2",
     "vue": "^3.3.9",
     "vue-toastification": "^2.0.0-rc.5"
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 7099a3f9..4b9aa7b0 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -8,7 +8,7 @@
 
   <div class="modal is-active" v-if="video_link">
     <div class="modal-background"></div>
-    <div class="modal-content">
+    <div class="modal-content" style="width:auto;">
       <VideoPlayer type="default" :link="video_link" :isMuted="false" autoplay="true" :isControls="true"
         class="is-fullwidth" />
     </div>
diff --git a/frontend/src/components/Video-Player.vue b/frontend/src/components/Video-Player.vue
index 92ca4b3d..30194ff1 100644
--- a/frontend/src/components/Video-Player.vue
+++ b/frontend/src/components/Video-Player.vue
@@ -1,13 +1,14 @@
 <template>
-  <video @pause="pause" @ended="pause" @keyup="changeSpeed" ref="video" :poster="previewImageLink" :controls="isControls"
-    :title="title">
+  <video ref="video" :poster="previewImageLink" :controls="isControls" :title="title">
     <source :src="link" type="application/x-mpegURL" />
   </video>
 </template>
 
 <script setup>
-import { onMounted, onUpdated, ref, defineProps, defineEmits } from 'vue'
+import { onMounted, onUpdated, ref, defineProps, onUnmounted } from 'vue'
 import Hls from 'hls.js'
+import Plyr from 'plyr'
+import 'plyr/dist/plyr.css'
 
 const props = defineProps({
   previewImageLink: {
@@ -18,26 +19,19 @@ const props = defineProps({
     type: String,
     default: ''
   },
-  progress: {
-    type: Number,
-    default: 0
-  },
   title: {
     type: String,
     default: ''
   },
-  isMuted: {
-    type: Boolean,
-    default: false
-  },
   isControls: {
     type: Boolean,
     default: true
   },
 })
 
-const emit = defineEmits(['pause', 'test'])
 const video = ref(null)
+const player = ref(null)
+const hls = ref(null)
 
 onMounted(() => {
   prepareVideoPlayer()
@@ -47,35 +41,46 @@ onUpdated(() => {
   prepareVideoPlayer()
 })
 
+onUnmounted(() => {
+  player.value.destroy()
+  hls.value.destroy()
+})
+
 const prepareVideoPlayer = () => {
-  let hls = new Hls({
+  player.value = new Plyr(video.value, {
+    clickToPlay: true,
+    keyboard: { focused: true, global: true },
+    controls: [
+      'play-large', 'play', 'progress', 'current-time', 'duration', 'mute', 'volume', 'pip', 'airplay', 'fullscreen'
+    ],
+    fullscreen: {
+      enabled: true,
+      fallback: true,
+      iosNative: true,
+    },
+    storage: {
+      enabled: true,
+      key: 'plyr_volume'
+    },
+    mediaMetadata: {
+      title: props.title.value
+    }
+  });
+
+  hls.value = new Hls({
     debug: false,
     enableWorker: true,
     lowLatencyMode: true,
     backBufferLength: 90,
   });
 
-  hls.loadSource(props.link)
+  hls.value.loadSource(props.link)
 
   if (video.value) {
-    hls.attachMedia(video.value)
-    video.value.muted = props.isMuted
-    video.value.currentTime = props.progress
-  }
-}
-
-const pause = () => {
-  const currentTime = video?.value?.currentTime || 0
-
-  emit('pause', currentTime)
-}
-
-const changeSpeed = (e) => {
-  if (e.key === 'w' && video.value) {
-    video.value.playbackRate = video.value.playbackRate + 0.25
-  } else if (e.key === 's' && video.value) {
-    video.value.playbackRate = video.value.playbackRate - 0.25
+    hls.value.attachMedia(video.value)
   }
 }
 
 </script>
+
+<style></style>