From 660c332c61601cbbdf1b1e47adc69b2477bc8291 Mon Sep 17 00:00:00 2001
From: Dan Niles <56271899+dan-niles@users.noreply.github.com>
Date: Tue, 18 Jun 2024 10:07:44 +0530
Subject: [PATCH] Setup video.js and add video player page

---
 CHANGELOG                                     |   2 +
 zimui/cypress/e2e/video_player_page.cy.ts     |  25 +++
 .../channel/videos/timelapse-9Tgo.json        |  19 ++
 zimui/package.json                            |   4 +-
 zimui/src/App.vue                             |   6 +
 zimui/src/assets/vjs-youtube.css              |  49 +++++
 zimui/src/components/video/VideoPlayer.vue    |  38 ++++
 .../video/player/VideoChannelInfo.vue         |  40 ++++
 .../video/player/VideoDescription.vue         |  19 ++
 .../video/player/VideoTitleInfo.vue           |  23 ++
 zimui/src/plugins/webp-hero.ts                |  11 +
 zimui/src/types/Channel.ts                    |   2 +
 zimui/src/views/VideoPlayerView.vue           |  71 ++++++-
 zimui/yarn.lock                               | 200 ++++++++++++++++++
 14 files changed, 504 insertions(+), 5 deletions(-)
 create mode 100644 zimui/cypress/e2e/video_player_page.cy.ts
 create mode 100644 zimui/cypress/fixtures/channel/videos/timelapse-9Tgo.json
 create mode 100644 zimui/src/assets/vjs-youtube.css
 create mode 100644 zimui/src/components/video/VideoPlayer.vue
 create mode 100644 zimui/src/components/video/player/VideoChannelInfo.vue
 create mode 100644 zimui/src/components/video/player/VideoDescription.vue
 create mode 100644 zimui/src/components/video/player/VideoTitleInfo.vue
 create mode 100644 zimui/src/plugins/webp-hero.ts

diff --git a/CHANGELOG b/CHANGELOG
index 19d32065..d7f4a259 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -17,6 +17,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Remove old UI files and methods: template files (home.html, article.html) and `make_html_files` method in scraper.py
 - Remove `--locale` arg, broken locale folder, files used for translation; translation will be restored with #222
 - Create "Videos" and "Playlists" tabs for homepage in new Vue.js UI (#213, #214)
+- Create video player page in new Vue.js UI (#215)
+- Add support for variable playback speed in video player (#174)
 
 ## [2.3.0] - 2024-05-22
 
diff --git a/zimui/cypress/e2e/video_player_page.cy.ts b/zimui/cypress/e2e/video_player_page.cy.ts
new file mode 100644
index 00000000..93085a83
--- /dev/null
+++ b/zimui/cypress/e2e/video_player_page.cy.ts
@@ -0,0 +1,25 @@
+describe('video player page', () => {
+  beforeEach(() => {
+    cy.intercept('GET', '/channel.json', { fixture: 'channel/channel.json' }).as('getChannel')
+    cy.intercept('GET', '/playlists/uploads_from_openzim_testing-917Q.json', {
+      fixture: 'channel/playlists/uploads_from_openzim_testing-917Q.json'
+    }).as('getUploads')
+    cy.visit('/')
+    cy.wait('@getChannel')
+    cy.wait('@getUploads')
+  })
+
+  it('loads the video and related information', () => {
+    cy.intercept('GET', '/videos/timelapse-9Tgo.json', {
+      fixture: 'channel//videos/timelapse-9Tgo.json'
+    }).as('getVideo')
+    cy.contains('.v-card-title ', 'Timelapse').click()
+    cy.wait('@getVideo')
+
+    cy.url().should('include', '/watch')
+    cy.contains('.video-title', 'Timelapse')
+    cy.contains('.video-date', 'Published on Jun 4, 2024')
+    cy.contains('.video-channel', 'openZIM_testing')
+    cy.contains('.video-description', 'This is a short video of a timelapse.')
+  })
+})
diff --git a/zimui/cypress/fixtures/channel/videos/timelapse-9Tgo.json b/zimui/cypress/fixtures/channel/videos/timelapse-9Tgo.json
new file mode 100644
index 00000000..f210513f
--- /dev/null
+++ b/zimui/cypress/fixtures/channel/videos/timelapse-9Tgo.json
@@ -0,0 +1,19 @@
+{
+  "id": "9TgosbGRsTk",
+  "title": "Timelapse",
+  "description": "This is a short video of a timelapse.",
+  "author": {
+    "channelId": "UC8elThf5TGMpQfQc_VE917Q",
+    "channelTitle": "openZIM_testing",
+    "channelDescription": "",
+    "channelJoinedDate": "2024-06-04T13:30:16.232286Z",
+    "profilePath": "channels/UC8elThf5TGMpQfQc_VE917Q/profile.jpg",
+    "bannerPath": "channels/UC8elThf5TGMpQfQc_VE917Q/banner.jpg"
+  },
+  "publicationDate": "2024-06-04T14:57:45Z",
+  "videoPath": "videos/9TgosbGRsTk/video.webm",
+  "thumbnailPath": "videos/9TgosbGRsTk/video.webp",
+  "subtitlePath": null,
+  "subtitleList": [],
+  "duration": "PT11S"
+}
diff --git a/zimui/package.json b/zimui/package.json
index 3df29f35..160b5c48 100644
--- a/zimui/package.json
+++ b/zimui/package.json
@@ -18,10 +18,12 @@
     "axios": "^1.7.2",
     "dayjs": "^1.11.11",
     "pinia": "^2.1.7",
+    "video.js": "^8.12.0",
     "vite-plugin-vuetify": "^2.0.3",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0",
-    "vuetify": "^3.6.7"
+    "vuetify": "^3.6.7",
+    "webp-hero": "^0.0.2"
   },
   "devDependencies": {
     "@mdi/font": "^7.4.47",
diff --git a/zimui/src/App.vue b/zimui/src/App.vue
index 1cce9374..aa9b6181 100644
--- a/zimui/src/App.vue
+++ b/zimui/src/App.vue
@@ -1,10 +1,16 @@
 <script setup lang="ts">
+import { onMounted } from 'vue'
 import { RouterView } from 'vue-router'
 import { useMainStore } from '@/stores/main'
+import { triggerWebpPolyfill } from './plugins/webp-hero'
 
 import ErrorDisplay from '@/components/common/ErrorDisplay.vue'
 
 const main = useMainStore()
+
+onMounted(() => {
+  triggerWebpPolyfill()
+})
 </script>
 
 <template>
diff --git a/zimui/src/assets/vjs-youtube.css b/zimui/src/assets/vjs-youtube.css
new file mode 100644
index 00000000..e06ed790
--- /dev/null
+++ b/zimui/src/assets/vjs-youtube.css
@@ -0,0 +1,49 @@
+.vjs-youtube,
+.vjs-youtube video {
+  border-radius: 8px;
+}
+
+.vjs-youtube .vjs-control-bar {
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+
+.vjs-youtube .vjs-poster img {
+  border-radius: 8px;
+}
+
+.vjs-youtube .vjs-big-play-button {
+  background-color: rgba(0, 0, 0, 0.7);
+  border-radius: 1rem;
+  border: none;
+}
+
+.vjs-youtube .vjs-big-play-button:hover,
+.vjs-youtube .vjs-big-play-button:focus,
+.vjs-youtube:hover .vjs-big-play-button {
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+.vjs-youtube .vjs-control-bar,
+.vjs-youtube .vjs-menu-button-popup .vjs-menu .vjs-menu-content,
+.vjs-youtube .vjs-modal-dialog.vjs-text-track-settings {
+  background-color: rgba(0, 0, 0, 0.7);
+}
+
+.vjs-youtube .vjs-progress-holder {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.vjs-youtube .vjs-load-progress div {
+  background-color: rgb(0, 0, 0, 0.3);
+}
+
+.vjs-youtube .vjs-modal-dialog-content select {
+  color: rgb(190, 190, 190);
+}
+
+.vjs-youtube .vjs-track-settings-controls button {
+  padding-right: 5px;
+  padding-left: 5px;
+  border-radius: 8px;
+}
diff --git a/zimui/src/components/video/VideoPlayer.vue b/zimui/src/components/video/VideoPlayer.vue
new file mode 100644
index 00000000..9c1938d5
--- /dev/null
+++ b/zimui/src/components/video/VideoPlayer.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import videojs from 'video.js'
+import type Player from 'video.js/dist/types/player'
+
+import 'video.js/dist/video-js.css'
+import '@/assets/vjs-youtube.css'
+
+const props = defineProps({
+  options: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const videoPlayer = ref<HTMLVideoElement>()
+const player = ref<Player>()
+
+// Initialize video.js when the component is mounted
+onMounted(() => {
+  if (videoPlayer.value) {
+    player.value = videojs(videoPlayer.value, props.options)
+  }
+})
+
+// Destroy video.js when the component is unmounted
+onBeforeUnmount(() => {
+  if (player.value) {
+    player.value.dispose()
+  }
+})
+</script>
+
+<template>
+  <div>
+    <video ref="videoPlayer" class="video-js vjs-youtube"></video>
+  </div>
+</template>
diff --git a/zimui/src/components/video/player/VideoChannelInfo.vue b/zimui/src/components/video/player/VideoChannelInfo.vue
new file mode 100644
index 00000000..c4d75435
--- /dev/null
+++ b/zimui/src/components/video/player/VideoChannelInfo.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import AboutDialogButton from '@/components/channel/AboutDialogButton.vue'
+
+const props = defineProps({
+  profilePath: {
+    type: String,
+    required: true
+  },
+  channelTitle: {
+    type: String,
+    required: true
+  },
+  channelDescription: {
+    type: String,
+    required: true
+  },
+  joinedDate: {
+    type: String,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <v-row>
+    <v-col cols="6" class="d-flex align-center py-2">
+      <v-avatar size="50" class="border-thin">
+        <v-img :src="props.profilePath" />
+      </v-avatar>
+      <span class="video-channel ml-2 font-weight-medium">{{ props.channelTitle }}</span>
+    </v-col>
+    <v-col cols="6" class="d-flex justify-end align-center">
+      <about-dialog-button
+        :title="props.channelTitle"
+        :description="props.channelDescription"
+        :joined-date="props.joinedDate"
+      />
+    </v-col>
+  </v-row>
+</template>
diff --git a/zimui/src/components/video/player/VideoDescription.vue b/zimui/src/components/video/player/VideoDescription.vue
new file mode 100644
index 00000000..6b344178
--- /dev/null
+++ b/zimui/src/components/video/player/VideoDescription.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const props = defineProps({
+  description: {
+    type: String,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <v-row>
+    <v-col>
+      <v-card class="border-thin py-2" rounded="lg" flat>
+        <v-card-title class="text-subtitle-1 font-weight-medium">Description</v-card-title>
+        <v-card-text class="video-description">{{ props.description }}</v-card-text>
+      </v-card>
+    </v-col>
+  </v-row>
+</template>
diff --git a/zimui/src/components/video/player/VideoTitleInfo.vue b/zimui/src/components/video/player/VideoTitleInfo.vue
new file mode 100644
index 00000000..b360daa8
--- /dev/null
+++ b/zimui/src/components/video/player/VideoTitleInfo.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { formatDate } from '@/utils/format-utils'
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+  publicationDate: {
+    type: String,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <v-row>
+    <v-col class="d-flex flex-column py-2">
+      <h2 class="video-title">{{ props.title }}</h2>
+      <p class="video-date text-caption">Published on {{ formatDate(props.publicationDate) }}</p>
+    </v-col>
+  </v-row>
+</template>
diff --git a/zimui/src/plugins/webp-hero.ts b/zimui/src/plugins/webp-hero.ts
new file mode 100644
index 00000000..19239f48
--- /dev/null
+++ b/zimui/src/plugins/webp-hero.ts
@@ -0,0 +1,11 @@
+import { WebpMachine, detectWebpSupport } from 'webp-hero'
+import 'webp-hero/dist-cjs/polyfills.js'
+
+export const triggerWebpPolyfill = () => {
+  detectWebpSupport().then((support_webp) => {
+    if (!support_webp) {
+      const webpMachine = new WebpMachine()
+      webpMachine.polyfillDocument()
+    }
+  })
+}
diff --git a/zimui/src/types/Channel.ts b/zimui/src/types/Channel.ts
index 87b531c3..c040f730 100644
--- a/zimui/src/types/Channel.ts
+++ b/zimui/src/types/Channel.ts
@@ -14,6 +14,8 @@ export interface Channel {
 export interface Author {
   channelId: string
   channelTitle: string
+  channelDescription: string
+  channelJoinedDate: string
   profilePath?: string
   bannerPath?: string
 }
diff --git a/zimui/src/views/VideoPlayerView.vue b/zimui/src/views/VideoPlayerView.vue
index 1348d36a..6c2b7fbf 100644
--- a/zimui/src/views/VideoPlayerView.vue
+++ b/zimui/src/views/VideoPlayerView.vue
@@ -1,10 +1,15 @@
 <script setup lang="ts">
-import { ref, type Ref, onMounted } from 'vue'
+import { ref, type Ref, onMounted, computed } from 'vue'
 import { useMainStore } from '@/stores/main'
 import { useRoute } from 'vue-router'
 
 import type { Video } from '@/types/Videos'
 
+import VideoPlayer from '@/components/video/VideoPlayer.vue'
+import VideoTitleInfo from '@/components/video/player/VideoTitleInfo.vue'
+import VideoChannelInfo from '@/components/video/player/VideoChannelInfo.vue'
+import VideoDescription from '@/components/video/player/VideoDescription.vue'
+
 const main = useMainStore()
 const route = useRoute()
 const slug: string = route.params.slug as string
@@ -28,12 +33,70 @@ const fetchData = async function () {
 onMounted(() => {
   fetchData()
 })
+
+const videoURL = computed<string>(() => {
+  return video.value?.videoPath || ''
+})
+
+const videoPoster = computed<string>(() => {
+  return video.value?.thumbnailPath || ''
+})
+
+const subtitles = computed(() => {
+  return video.value?.subtitleList.map((subtitle) => {
+    return {
+      kind: 'subtitles',
+      src: `${video.value?.subtitlePath}/video.${subtitle.code}.vtt`,
+      srclang: subtitle.code,
+      label: subtitle.name
+    }
+  })
+})
+
+const videoOptions = ref({
+  controls: true,
+  autoplay: false,
+  preload: true,
+  fluid: true,
+  responsive: true,
+  enableSmoothSeeking: true,
+  controlBar: { pictureInPictureToggle: false },
+  playbackRates: [0.25, 0.5, 1, 1.5, 2],
+  techOrder: ['html5'],
+  poster: videoPoster,
+  sources: [
+    {
+      src: videoURL
+    }
+  ],
+  tracks: subtitles
+})
 </script>
 
 <template>
   <v-container v-if="video">
-    <h1>Video Player Page</h1>
-    <h2>Slug: {{ slug }}</h2>
-    <p>Title: {{ video.title }}</p>
+    <!-- Video Player -->
+    <v-row>
+      <v-spacer />
+      <v-col cols="12" md="8">
+        <video-player :options="videoOptions" />
+      </v-col>
+      <v-spacer />
+    </v-row>
+    <!-- Video Details -->
+    <v-row>
+      <v-spacer />
+      <v-col cols="12" md="8">
+        <video-title-info :title="video.title" :publication-date="video.publicationDate" />
+        <video-channel-info
+          :profile-path="video.author.profilePath || ''"
+          :channel-title="video.author.channelTitle || ''"
+          :channel-description="video.author.channelDescription || ''"
+          :joined-date="video.author.channelJoinedDate || ''"
+        />
+        <video-description :description="video.description" />
+      </v-col>
+      <v-spacer />
+    </v-row>
   </v-container>
 </template>
diff --git a/zimui/yarn.lock b/zimui/yarn.lock
index 4bc1c6a3..40ce72bb 100644
--- a/zimui/yarn.lock
+++ b/zimui/yarn.lock
@@ -7,6 +7,13 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.6.tgz#5e030f440c3c6c78d195528c3b688b101a365328"
   integrity sha512-eNZXdfU35nJC2h24RznROuOpO94h6x8sg9ju0tT9biNtLZ2vuP8SduLqqV+/8+cebSLV9SJEAN5Z3zQbJG/M+Q==
 
+"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.7.tgz#f4f0d5530e8dbdf59b3451b9b3e594b6ba082e12"
+  integrity sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@colors/colors@1.5.0":
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
@@ -504,6 +511,47 @@
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
   integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
 
+"@videojs/http-streaming@3.12.1":
+  version "3.12.1"
+  resolved "https://registry.yarnpkg.com/@videojs/http-streaming/-/http-streaming-3.12.1.tgz#0d924879bc395e66e1d112698e0f54920ffae1d7"
+  integrity sha512-rpB5AMt0QZ9bMXzwiWhynF2NLNnm5g2DZjPOFX6OoFqqXhbe2ngY2nqm9lLRhRVe22YeysQCmAlvBNwGuWFI8Q==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    "@videojs/vhs-utils" "4.0.0"
+    aes-decrypter "4.0.1"
+    global "^4.4.0"
+    m3u8-parser "^7.1.0"
+    mpd-parser "^1.3.0"
+    mux.js "7.0.3"
+    video.js "^7 || ^8"
+
+"@videojs/vhs-utils@4.0.0", "@videojs/vhs-utils@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@videojs/vhs-utils/-/vhs-utils-4.0.0.tgz#4d4dbf5d61a9fbd2da114b84ec747c3a483bc60d"
+  integrity sha512-xJp7Yd4jMLwje2vHCUmi8MOUU76nxiwII3z4Eg3Ucb+6rrkFVGosrXlMgGnaLjq724j3wzNElRZ71D/CKrTtxg==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    global "^4.4.0"
+    url-toolkit "^2.2.1"
+
+"@videojs/vhs-utils@^3.0.5":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz#665ba70d78258ba1ab977364e2fe9f4d4799c46c"
+  integrity sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    global "^4.4.0"
+    url-toolkit "^2.2.1"
+
+"@videojs/xhr@2.6.0":
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/@videojs/xhr/-/xhr-2.6.0.tgz#cd897e0ad54faf497961bcce3fa16dc15a26bb80"
+  integrity sha512-7J361GiN1tXpm+gd0xz2QWr3xNWBE+rytvo8J3KuggFaLg+U37gZQ2BuPLcnkfGffy2e+ozY70RHC8jt7zjA6Q==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    global "~4.4.0"
+    is-function "^1.0.1"
+
 "@vitejs/plugin-vue@^5.0.4":
   version "5.0.4"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-5.0.4.tgz#508d6a0f2440f86945835d903fcc0d95d1bb8a37"
@@ -709,6 +757,11 @@
   dependencies:
     upath "^2.0.1"
 
+"@xmldom/xmldom@^0.8.3":
+  version "0.8.10"
+  resolved "https://registry.yarnpkg.com/@xmldom/xmldom/-/xmldom-0.8.10.tgz#a1337ca426aa61cef9fe15b5b28e340a72f6fa99"
+  integrity sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==
+
 abbrev@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-2.0.0.tgz#cf59829b8b4f03f89dda2771cb7f3653828c89bf"
@@ -729,6 +782,16 @@ acorn@^8.11.3, acorn@^8.9.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.11.3.tgz#71e0b14e13a4ec160724b38fb7b0f233b1b81d7a"
   integrity sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==
 
+aes-decrypter@4.0.1, aes-decrypter@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/aes-decrypter/-/aes-decrypter-4.0.1.tgz#c1a81d0bde0e96fed0674488d2a31a6d7ab9b7a7"
+  integrity sha512-H1nh/P9VZXUf17AA5NQfJML88CFjVBDuGkp5zDHa7oEhYN9TTpNLJknRY1ie0iSKWlDf6JRnJKaZVDSQdPy6Cg==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    "@videojs/vhs-utils" "^3.0.5"
+    global "^4.4.0"
+    pkcs7 "^1.0.4"
+
 agent-base@^7.0.2, agent-base@^7.1.0:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-7.1.1.tgz#bdbded7dfb096b751a2a087eeeb9664725b2e317"
@@ -1266,6 +1329,11 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+dom-walk@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84"
+  integrity sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==
+
 eastasianwidth@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
@@ -1802,6 +1870,14 @@ global-dirs@^3.0.0:
   dependencies:
     ini "2.0.0"
 
+global@4.4.0, global@^4.3.1, global@^4.4.0, global@~4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406"
+  integrity sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==
+  dependencies:
+    min-document "^2.19.0"
+    process "^0.11.10"
+
 globals@^13.19.0, globals@^13.24.0:
   version "13.24.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-13.24.0.tgz#8432a19d78ce0c1e833949c36adb345400bb1171"
@@ -1949,6 +2025,11 @@ indent-string@^4.0.0:
   resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
   integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
 
+individual@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/individual/-/individual-2.0.0.tgz#833b097dad23294e76117a98fb38e0d9ad61bb97"
+  integrity sha512-pWt8hBCqJsUWI/HtcfWod7+N9SgAqyPEaF7JQjwzjn5vGrpg6aQ5qeAFQ7dx//UH4J1O+7xqew+gCeeFt6xN/g==
+
 inflight@^1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
@@ -1989,6 +2070,11 @@ is-fullwidth-code-point@^3.0.0:
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
   integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
 
+is-function@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.2.tgz#4f097f30abf6efadac9833b17ca5dc03f8144e08"
+  integrity sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==
+
 is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
@@ -2167,6 +2253,11 @@ jsprim@^2.0.2:
     json-schema "0.4.0"
     verror "1.10.0"
 
+keycode@2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.2.0.tgz#3d0af56dc7b8b8e5cba8d0a97f107204eec22b04"
+  integrity sha512-ps3I9jAdNtRpJrbBvQjpzyFbss/skHqzS+eu4RxKLaEAtFqkjZaB6TZMSivPbLxf4K7VI4SjR0P5mRCX5+Q25A==
+
 keyv@^4.5.3:
   version "4.5.4"
   resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93"
@@ -2261,6 +2352,15 @@ lru-cache@^10.2.0:
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.2.2.tgz#48206bc114c1252940c41b25b41af5b545aca878"
   integrity sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==
 
+m3u8-parser@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/m3u8-parser/-/m3u8-parser-7.1.0.tgz#fa92ee22fc798150397c297152c879fe09f066c6"
+  integrity sha512-7N+pk79EH4oLKPEYdgRXgAsKDyA/VCo0qCHlUwacttQA0WqsjZQYmNfywMvjlY9MpEBVZEt0jKFd73Kv15EBYQ==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    "@videojs/vhs-utils" "^3.0.5"
+    global "^4.4.0"
+
 magic-string@^0.30.10, magic-string@^0.30.5:
   version "0.30.10"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.10.tgz#123d9c41a0cb5640c892b041d4cfb3bd0aa4b39e"
@@ -2313,6 +2413,13 @@ mimic-fn@^4.0.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-4.0.0.tgz#60a90550d5cb0b239cca65d893b1a53b29871ecc"
   integrity sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==
 
+min-document@^2.19.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
+  integrity sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==
+  dependencies:
+    dom-walk "^0.1.0"
+
 minimatch@9.0.1:
   version "9.0.1"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.1.tgz#8a555f541cf976c622daf078bb28f29fb927c253"
@@ -2354,6 +2461,16 @@ mlly@^1.4.2, mlly@^1.7.0:
     pkg-types "^1.1.0"
     ufo "^1.5.3"
 
+mpd-parser@^1.2.2, mpd-parser@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/mpd-parser/-/mpd-parser-1.3.0.tgz#38c20f4d73542b4ed554158bc1f0fa571dc61388"
+  integrity sha512-WgeIwxAqkmb9uTn4ClicXpEQYCEduDqRKfmUdp4X8vmghKfBNXZLYpREn9eqrDx/Tf5LhzRcJLSpi4ohfV742Q==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    "@videojs/vhs-utils" "^4.0.0"
+    "@xmldom/xmldom" "^0.8.3"
+    global "^4.4.0"
+
 ms@2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
@@ -2369,6 +2486,14 @@ muggle-string@^0.4.0:
   resolved "https://registry.yarnpkg.com/muggle-string/-/muggle-string-0.4.1.tgz#3b366bd43b32f809dc20659534dd30e7c8a0d328"
   integrity sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==
 
+mux.js@7.0.3, mux.js@^7.0.1:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/mux.js/-/mux.js-7.0.3.tgz#18fbbc607faeeaa8c897e0410d2067be2bdc7e1e"
+  integrity sha512-gzlzJVEGFYPtl2vvEiJneSWAWD4nfYRHD5XgxmB2gWvXraMPOYk+sxfvexmNfjQUFpmk6hwLR5C6iSFmuwCHdQ==
+  dependencies:
+    "@babel/runtime" "^7.11.2"
+    global "^4.4.0"
+
 nanoid@^3.3.7:
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
@@ -2601,6 +2726,13 @@ pinia@^2.1.7:
     "@vue/devtools-api" "^6.5.0"
     vue-demi ">=0.14.5"
 
+pkcs7@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/pkcs7/-/pkcs7-1.0.4.tgz#6090b9e71160dabf69209d719cbafa538b00a1cb"
+  integrity sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+
 pkg-types@^1.0.3, pkg-types@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/pkg-types/-/pkg-types-1.1.1.tgz#07b626880749beb607b0c817af63aac1845a73f2"
@@ -2726,6 +2858,11 @@ read-package-json-fast@^3.0.2:
     json-parse-even-better-errors "^3.0.0"
     npm-normalize-package-bin "^3.0.0"
 
+regenerator-runtime@^0.14.0:
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
+  integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
+
 request-progress@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/request-progress/-/request-progress-3.0.0.tgz#4ca754081c7fec63f505e4faa825aa06cd669dbe"
@@ -2810,6 +2947,13 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
+rust-result@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/rust-result/-/rust-result-1.0.0.tgz#34c75b2e6dc39fe5875e5bdec85b5e0f91536f72"
+  integrity sha512-6cJzSBU+J/RJCF063onnQf0cDUOHs9uZI1oroSGnHOph+CQTIJ5Pp2hK5kEQq1+7yE/EEWfulSNXAQ2jikPthA==
+  dependencies:
+    individual "^2.0.0"
+
 rxjs@^7.5.1:
   version "7.8.1"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.1.tgz#6f6f3d99ea8044291efd92e7c7fcf562c4057543"
@@ -2822,6 +2966,13 @@ safe-buffer@^5.0.1, safe-buffer@^5.1.2:
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
 
+safe-json-parse@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/safe-json-parse/-/safe-json-parse-4.0.0.tgz#7c0f578cfccd12d33a71c0e05413e2eca171eaac"
+  integrity sha512-RjZPPHugjK0TOzFrLZ8inw44s9bKox99/0AZW9o/BEQVrJfhI+fIHMErnPyRa89/yRXUUr93q+tiN6zhoVV4wQ==
+  dependencies:
+    rust-result "^1.0.0"
+
 "safer-buffer@>= 2.1.2 < 3.0.0", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
@@ -3201,6 +3352,11 @@ url-parse@^1.5.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
+url-toolkit@^2.2.1:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/url-toolkit/-/url-toolkit-2.2.5.tgz#58406b18e12c58803e14624df5e374f638b0f607"
+  integrity sha512-mtN6xk+Nac+oyJ/PrI7tzfmomRVNFIWKUbG8jdYFt52hxbiReFAXIjYskvu64/dvuW71IcB7lV8l0HvZMac6Jg==
+
 util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
@@ -3220,6 +3376,45 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
+"video.js@^7 || ^8", video.js@^8.12.0:
+  version "8.12.0"
+  resolved "https://registry.yarnpkg.com/video.js/-/video.js-8.12.0.tgz#f85295f55afbef8b29d885e23777d3a64651f536"
+  integrity sha512-bLjfg3y09CAed1xZ4FujdTW7G9kgL0CJHaBnDKwBUgYuutijCutYPP5yQGCdN6VOi76uEuOpINwmTJSJia6zww==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    "@videojs/http-streaming" "3.12.1"
+    "@videojs/vhs-utils" "^4.0.0"
+    "@videojs/xhr" "2.6.0"
+    aes-decrypter "^4.0.1"
+    global "4.4.0"
+    keycode "2.2.0"
+    m3u8-parser "^7.1.0"
+    mpd-parser "^1.2.2"
+    mux.js "^7.0.1"
+    safe-json-parse "4.0.0"
+    videojs-contrib-quality-levels "4.1.0"
+    videojs-font "4.1.0"
+    videojs-vtt.js "0.15.5"
+
+videojs-contrib-quality-levels@4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/videojs-contrib-quality-levels/-/videojs-contrib-quality-levels-4.1.0.tgz#44c2d2167114a5c8418548b10a25cb409d6cba51"
+  integrity sha512-TfrXJJg1Bv4t6TOCMEVMwF/CoS8iENYsWNKip8zfhB5kTcegiFYezEA0eHAJPU64ZC8NQbxQgOwAsYU8VXbOWA==
+  dependencies:
+    global "^4.4.0"
+
+videojs-font@4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/videojs-font/-/videojs-font-4.1.0.tgz#3ae1dbaac60b4f0f1c4e6f7ff9662a89df176015"
+  integrity sha512-X1LuPfLZPisPLrANIAKCknZbZu5obVM/ylfd1CN+SsCmPZQ3UMDPcvLTpPBJxcBuTpHQq2MO1QCFt7p8spnZ/w==
+
+videojs-vtt.js@0.15.5:
+  version "0.15.5"
+  resolved "https://registry.yarnpkg.com/videojs-vtt.js/-/videojs-vtt.js-0.15.5.tgz#567776eaf2a7a928d88b148a8b401ade2406f2ca"
+  integrity sha512-yZbBxvA7QMYn15Lr/ZfhhLPrNpI/RmCSCqgIff57GC2gIrV5YfyzLfLyZMj0NnZSAz8syB4N0nHXpZg9MyrMOQ==
+  dependencies:
+    global "^4.3.1"
+
 vite-node@1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/vite-node/-/vite-node-1.6.0.tgz#2c7e61129bfecc759478fa592754fd9704aaba7f"
@@ -3352,6 +3547,11 @@ webidl-conversions@^7.0.0:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz#256b4e1882be7debbf01d05f0aa2039778ea080a"
   integrity sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==
 
+webp-hero@^0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/webp-hero/-/webp-hero-0.0.2.tgz#7adf20435ecfca73c764a3ad532a4304f15db52d"
+  integrity sha512-XDN8k2DZerXAawblkGKbcRXAz3WjY6Id5fTmrsOvblzFg5jELfoDCOxRDHD3zIGJo3OPEjLRsVS6Kzl36HxjqA==
+
 whatwg-encoding@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz#d0f4ef769905d426e1688f3e34381a99b60b76e5"