Create quality selector

src/assets/qualitySelector.ts

@@ -1,22 +1,69 @@
+// @ts-nocheck
+
+import videojs from 'video.js'
 import 'videojs-contrib-quality-levels'
-import type { QualityLevelList } from 'videojs-contrib-quality-levels'
+import type { QualityLevelList, QualityLevel } from 'videojs-contrib-quality-levels'
 
 export const createQualitySelector = (player: any) => {
   const qualityLevels: QualityLevelList = player.qualityLevels()
+  const MenuButton = videojs.getComponent('MenuButton');
+  const MenuItem = videojs.getComponent('MenuItem');
+  let formatedQualities: {name: string, index: number, id:string}[];
 
-  const myButton = player.controlBar.addChild('button')
-  const myButtonDom = myButton.el()
-  myButtonDom.innerHTML = 'Hello'
+  const setQuality = (id: string) => {
+    const found = formatedQualities.find(i => i.id === id)
+    for(let quality of qualityLevels.levels_) {
+      if(quality.id !== id) {
+        quality.enabled = false
+      } else {
+        quality.enabled = true
+      }
+    }
 
-  myButtonDom.addEventListener('click', () => {})
+    qualityLevels.selectedIndex_ = found?.index
+    qualityLevels.trigger({ type: 'change', selectedIndex: found?.index})
+  }
+
+  class CustomMenuButton extends MenuButton {
+    options_: any
+    player: any
+    createItems() {
+      const player = this.player()
+
+      return this.options_.items.map((item : {name: string}) => {
+        const qualitySelectorButton = new MenuItem(player, { label: item.name })
+        qualitySelectorButton.handleClick = (data) => {
+          const qualityClicked = data.currentTarget.innerText
+          const id = formatedQualities.find(i => i.name === qualityClicked)?.id
+
+          if(id) {
+            setQuality(id)
+          }
+        }
+
+        return qualitySelectorButton
+      })
+    }
+  }
+  videojs.registerComponent('CustomMenuButton', CustomMenuButton);
+
+  qualityLevels.on('addqualitylevel', () => {
+    formatedQualities = qualityLevels.levels_.map((quality: QualityLevel) => {
+      return {
+        name: quality.height?.toString() + 'p',
+        index: quality.id[0],
+        id: quality.id
+      }
+    })
+
+
+    player.controlBar.addChild('CustomMenuButton', {
+      title: 'Qualities',
+      items: formatedQualities
+    });
+  })
 
   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 ?? ''
   })
 }

src/components/VideoPlayer.vue

@@ -7,6 +7,7 @@
 // Importing video-js
 import videojs from 'video.js'
 import qualityLevels from 'videojs-contrib-quality-levels'
+import { createQualitySelector } from '@/assets/qualitySelector'
 
 videojs.registerPlugin('qualityLevels', qualityLevels)
 
@@ -29,7 +30,9 @@ export default {
   // initializing the video player
   // when the component is being mounted
   mounted() {
-    this.player = videojs('video-player', this.options, () => {})
+    this.player = videojs('video-player', this.options, () => {
+      createQualitySelector(this.player)
+    })
   }
 }
 </script>