Quality change instantaneity

[fragtion]

When switching between different formats, I noticed that the player actually requests footage of an incorrect bitrate, before continuing with the correct bitrate. For example, video is playing on 720p, and I switch to 1080p, but there is also 480p, 360p, and 144p in the playlist. Instead of switching from 720p to 1080p, it first downloads some 144p footage! Also, the change is not instantaneous (playback buffer is not cleared)

Below is a (messy) patch aimed at correcting these behaviors. (Disclaimer: ChatGPT-assisted code. Seems to be mostly working, but probably room for further improvement. Sometimes quality still does not change instantly, I'm not sure why.. But it seems to be a significant improvement nonetheless)

Original code:

setQuality(quality) {
      const qualityList = this.player.qualityLevels();

      // Set quality on plugin
      this._currentQuality = quality;
      if (this.options.displayCurrentQuality) {
        this.setButtonInnerText(quality === 'auto' ? this.player.localize('Auto') : ${quality}p);
      }
      for (let i = 0; i < qualityList.length; ++i) {
        const {
          width,
          height
        } = qualityList[i];
        const pixels = width > height ? height : width;
        qualityList[i].enabled = pixels === quality || quality === 'auto';
      }
      this._qualityButton.unpressButton();
    }

Revised function:

    /**
     * Sets quality (based on media short side)
     *
     * @param {number} quality - A number representing HLS playlist.
     */
    setQuality(quality) {
      // Get the quality levels list from the player
      const qualityList = this.player.qualityLevels().levels_;
      // Set the current quality
      this._currentQuality = quality;
      // Update the UI button text for quality selection
      if (this.options.displayCurrentQuality) {
        this.setButtonInnerText(quality === 'auto' ? this.player.localize('Auto') : `${quality}p`);
      }
      let qualitySet = false;
      // First, disable all quality levels by default (but leave the one we're setting enabled)
      qualityList.forEach(level => {
        const { width, height } = level;
        const pixels = Math.min(width, height);
        if (quality === 'auto' || pixels === quality) {
          // Enable the selected quality
          level.enabled = true;
          qualitySet = true;
        } else {
          // Disable all other qualities
          level.enabled = false;
        }
      });
      if (qualitySet) {
        // Save the current time and volume
        const currentTime = this.player.currentTime();
        const volume = this.player.volume();
        const duration = this.player.duration();
        // Pause and briefly seek to the beginning (and reset volume temporarily)
        this.player.volume(0); // Mute temporarily
        this.player.pause();
        this.player.currentTime(0); // Seek to the start to trigger reloading the quality levels
        this.player.currentTime(duration); // Seek to the start to trigger reloading the quality levels
        // Try force re-buffer by resetting quality level
        setTimeout(() => {
          // Restore the current time and volume after the brief reset
          this.player.currentTime(currentTime); // Seek back to the original time
          this.player.volume(volume); // Restore volume to the previous level
          this.player.play(); // Resume playback
        }, 10); // Small delay to ensure the player gets time to react to seeking to position 0
      }