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 ?? ''
    });
}