refactor(qualitySelection): Updated video quality selection list.

1. Sorted from top to bottom, from best to worst quality.
2. Changed bps to Mbps
3. Auto selection high quality video and audio

NUXT/components/Player/index.vue

@@ -420,10 +420,16 @@ export default {
     this.vid = this.$refs.player;
 
     // TODO: this.$store.state.player.quality, check if exists and select the closest one
-    if (this.$store.state.player.preload) this.prebuffer(this.sources[5].url);
+
+    if (this.$store.state.player.preload) this.prebuffer(this.sources[0].url);
     else {
-      this.audSrc = this.sources[this.sources.length - 1].url;
-      this.vidSrc = this.sources[5].url;
+      this.prebuffer(this.sources[0].url);
+      this.sources.forEach((source) => {
+        if (source.mimeType.indexOf("audio") > -1) {
+          this.audSrc = source.url;
+          this.vidSrc = this.sources[0].url;
+        }
+      });
     }
 
     this.$youtube.getSponsorBlock(this.video.id, (data) => {
@@ -463,9 +469,9 @@ export default {
       //   // There is not enough data to keep playing from this point
       // }
       if (this.vid.readyState >= 3) {
-        this.$refs.audio.play();
         this.bufferingDetected = false;
         this.$refs.audio.currentTime = this.vid.currentTime;
+        this.$refs.audio.play();
 
         if (!this.isMusic) {
           this.$refs.audio.playbackRate = this.$store.state.player.speed;

NUXT/components/Player/quality.vue

@@ -7,7 +7,14 @@
       scrollable
     >
       <template #activator="{ on, attrs }">
-        <v-btn fab text small color="white" v-bind="attrs" v-on="on">
+        <v-btn
+          fab
+          text
+          small
+          color="white"
+          v-bind="attrs"
+          v-on="on"
+        >
           {{
             sources.find((src) => src.url == currentSource.src).qualityLabel
               ? sources.find((src) => src.url == currentSource.src).qualityLabel
@@ -29,7 +36,7 @@
         </v-subheader>
         <v-divider />
         <v-card-text
-          style="max-height: 50vh"
+          style="max-height: 50vh; flex-direction: column !important"
           class="pa-0 d-flex flex-column-reverse"
         >
           <v-list-item
@@ -58,7 +65,7 @@
               <v-list-item-title>
                 {{ src.qualityLabel ? src.qualityLabel : "" }} ({{
                   src.quality
-                }}) {{ src.bitrate }}bps
+                }}) {{ (src.bitrate / 1000000).toFixed(2) }}Mbps
               </v-list-item-title>
               <v-list-item-subtitle>
                 {{ src.mimeType }} {{ src.averageBitrate }}
@@ -72,12 +79,10 @@
 </template>
 
 <script>
+
 export default {
   props: {
-    currentSource: {
-      type: String,
-      required: true,
-    },
+    currentSource: {},
     sources: {
       type: Array,
       required: true,