Prepare for own video.js

frontend/package.json

@@ -13,9 +13,10 @@
   },
   "dependencies": {
     "@dragongoose/streamlink": "^1.0.2",
-    "@videojs-player/vue": "^1.0.0",
     "oh-vue-icons": "^1.0.0-rc3",
     "video.js": "^8.0.4",
+    "videojs-contrib-quality-levels": "^3.0.0",
+    "videojs-hls-quality-selector": "^1.1.4",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6"
   },
@@ -24,6 +25,9 @@
     "@rushstack/eslint-patch": "^1.2.0",
     "@tailwindcss/typography": "^0.5.9",
     "@types/node": "^18.14.2",
+    "@types/videojs-contrib-quality-levels": "^2.0.1",
+    "@types/videojs-hls-quality-selector": "^1.1.0",
+    "@types/video.js": "^7.3.51",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vue/eslint-config-prettier": "^7.1.0",
     "@vue/eslint-config-typescript": "^11.0.2",

frontend/src/assets/qualitySelector.ts

@@ -0,0 +1,27 @@
+import type { VideoJsPlayer } from "video.js";
+import "videojs-contrib-quality-levels";
+import type { QualityLevelList } from "videojs-contrib-quality-levels";
+
+export const createQualitySelector = (player: VideoJsPlayer) => {
+    const qualityLevels: QualityLevelList = player.qualityLevels()
+    let currentIndex = 0
+
+    player.hlsQualitySelector()
+     var myButton = player.controlBar.addChild("button");
+     var myButtonDom = myButton.el();
+     myButtonDom.innerHTML = "Hello";
+
+     myButtonDom.addEventListener('click', () => {
+        
+     })
+
+     qualityLevels.on('change', function() {
+         console.log('Quality Level changed!');
+         console.log('New level:', qualityLevels[qualityLevels.selectedIndex]);
+         console.log(qualityLevels)
+
+         const qualityLabel = qualityLevels[qualityLevels.selectedIndex].height?.toString() + 'p'
+
+         myButtonDom.textContent = qualityLabel ?? ''
+    });
+}

frontend/src/components/VideoPlayer.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <video id="video-player" class="video-js vjs-defaultskin"></video>
+  </div>
+</template>
+<script lang="ts">
+// Importing video-js
+import videojs from 'video.js';
+import { createQualitySelector } from '../assets/qualitySelector'
+import "videojs-contrib-quality-levels";
+import "../assets/vjs-theme.css"
+
+export default {
+  name: 'VideoJsPlayer',
+  props: {
+    options: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  data() {
+    let player: any
+    return {
+      player
+    }
+  },
+  // initializing the video player
+  // when the component is being mounted
+  mounted() {
+    this.player = videojs('video-player', this.options, () => {
+      this.player.log('video player ready', this);
+
+      this.player.hlsQualitySelector({
+        displayCurrentQuality: true,
+      });
+
+      createQualitySelector(this.player)
+
+    });
+  },
+  // destroying the video player
+  // when the component is being destroyed
+  beforeDestroy() {
+    if (this.player) {
+      this.player.dispose();
+    }
+  }
+}
+</script><link rel="stylesheet" href="style.css">

frontend/src/views/UserView.vue

@@ -2,9 +2,7 @@
 import { ref, onMounted } from 'vue'
 import { useRoute } from "vue-router";
 import type { StreamerData } from '../../../server/types/scraping/Streamer'
-
+import VideoPlayer from '../components/VideoPlayer.vue'
-import { VideoPlayer } from '@videojs-player/vue'
-import 'video.js/dist/video-js.css'
 
 export default {
     async setup() {
@@ -42,7 +40,25 @@ export default {
         })
 
         return {
-            data
+            data,
+            videoOptions: {
+                autoplay: true,
+                controls: true,
+                sources: [
+                    {
+                        src:
+                        `http://localhost:7000/proxy/stream/${username}/hls.m3u8`,
+                        type: 'application/vnd.apple.mpegurl',
+                        label: 'tt'
+                    },
+                    {
+                        src:
+                        `http://localhost:7000/proxy/stream/${username}/hls.m3u8`,
+                        type: 'application/vnd.apple.mpegurl',
+                        label: 'dd'
+                    }],
+                fluid: true
+            }
         }
     },
     components: {
@@ -88,8 +104,8 @@ export default {
         <div class="flex flex-wrap bg-ctp-crust p-6 rounded-lg max-w-prose min-w-[65ch] text-white">
             <div v-if="data.isLive" class="w-full mx-auto rounded-lg mb-5">
                 <video-player
-                    :src="`http://localhost:7000/proxy/stream/${data.username}/hls.m3u8`"
+                    :options="videoOptions">
-                    poster="/your-path/poster.jpg" controls :loop="true" :volume="0.6" :autoplay="'muted'" :fluid="true" />
+                </video-player>
             </div>