video quality selector beta

NUXT/components/Player/quality.vue

@@ -9,18 +9,16 @@
         <v-btn
           fab
           text
-          disabled
           style="position: absolute; bottom: 0.25rem; right: 4rem"
           v-bind="attrs"
           v-on="on"
         >
-          HD
+          {{ sources.find((src) => src.url == video.src).qualityLabel }}
         </v-btn>
       </template>
       <v-card class="background">
         <v-subheader>Playback Speed</v-subheader>
-        <v-card-text style="height: 50vh" class="ma-0 pa-0">
-          <v-list>
+        <v-card-text style="max-height: 50vh" class="pa-0">
           <v-list-item
             v-for="src in sources"
             :key="src"
@@ -42,9 +40,10 @@
                 "
               ></v-icon>
             </v-list-item-avatar>
-              <v-list-item-title>{{ sped }}X</v-list-item-title>
+            <v-list-item-title>
+              {{ src.qualityLabel }} ({{ src.quality }})
+            </v-list-item-title>
           </v-list-item>
-          </v-list>
         </v-card-text>
       </v-card>
     </v-bottom-sheet>
@@ -57,11 +56,5 @@ export default {
   data: () => ({
     sheet: false,
   }),
-  mounted() {
-    console.log(
-      "sourcessourcessourcessourcessourcessourcessources",
-      this.sources
-    );
-  },
 };
 </script>

NUXT/components/Player/speed.vue

@@ -52,7 +52,7 @@ export default {
   props: ["video"],
   data: () => ({
     sheet: false,
-    speeds: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 3, 4, 5, 10],
+    speeds: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 3, 4, 8, 16],
   }),
 };
 </script>