feat(ui): Add quality selection UI for audio-only content

[nbcl]

Context

This is a draft pull request that is currently under development.

Description

I approached the issue by introducing the quality selection to the currently existing resolution button in the UI, conditionally, when audio-only content is being displayed.

tracks = tracks.filter((track, idx) => {
  // If audio-only content is being displayed
  if (this.player.isAudioOnly()) {
    // Keep the first one with the same audioBandwidth.
    otherIdx = tracks.findIndex(
        (t) => t.audioBandwidth == track.audioBandwidth);
  // If video content is being displayed
  } else {
    // Keep the first one with the same height.
    otherIdx = tracks.findIndex(
        (t) => t.height == track.height);
  }
  return otherIdx == idx;
});

Currently, this replaces the resolution menu with a quality menu when audio-only content is displayed, as shown in the following image:

Draft status

Currently, the following points must be decided before resolving the draft.

• Make sure the obtaining of the audio quality attribute is correct.
• Decide if a new button must be created to only handle audio quality or having the resolution button shift functionality depending on content is the correct design.

[joeyparrish]

Looks like you could set a local variable with the localization ID, instead of duplicating all the setAttribute and resolve calls in each branch.

[nbcl]

Of course, that works way better - Updated it on my last commit!

// Assign text attributes depending on content type.
const locId = this.player.isAudioOnly() ? LocIds.QUALITY : LocIds.RESOLUTION;