speed & quality cleanup, quality no-reset switcher

NUXT/components/Player/index.vue

@@ -232,8 +232,17 @@
         <v-icon>mdi-cards-outline</v-icon>
       </v-btn>
       <!-- // TODO: merge the bottom 2 into 1 reusable component -->
-      <quality v-if="$refs.player" :video="$refs.player" :sources="sources" />
-      <speed v-if="$refs.player" :video="$refs.player" />
+      <quality
+        v-if="$refs.player"
+        :sources="sources"
+        :current-source="$refs.player"
+        @quality="qualityHandler($event)"
+      />
+      <speed
+        v-if="$refs.player"
+        :current-speed="$refs.player.playbackRate"
+        @speed="$refs.player.playbackRate = $event"
+      />
       <fullscreen
         :fullscreen="isFullscreen"
         @fullscreen="(controls = $refs.player.paused), handleFullscreenChange()"
@@ -391,6 +400,12 @@ export default {
     if (this.isFullscreen) this.exitFullscreen();
   },
   methods: {
+    qualityHandler(q) {
+      console.log(q);
+      let time = this.$refs.player.currentTime;
+      this.$refs.player.src = q;
+      this.$refs.player.currentTime = time;
+    },
     handleFullscreenChange() {
       if (document?.fullscreenElement === this.$refs.vidcontainer) {
         this.exitFullscreen();

NUXT/components/Player/quality.vue

@@ -2,6 +2,7 @@
   <div>
     <v-bottom-sheet
       v-model="sheet"
+      style="z-index: 999"
       :attach="$parent.$refs.vidcontainer"
       scrollable
     >
@@ -15,7 +16,7 @@
           v-bind="attrs"
           v-on="on"
         >
-          {{ sources.find((src) => src.url == video.src).qualityLabel }}
+          {{ sources.find((src) => src.url == currentSource.src).qualityLabel }}
         </v-btn>
       </template>
       <v-card class="background">
@@ -37,23 +38,26 @@
           </v-btn>
         </v-subheader>
         <v-divider />
-        <v-card-text style="max-height: 50vh" class="pa-0">
+        <v-card-text
+          style="max-height: 50vh"
+          class="pa-0 d-flex flex-column-reverse"
+        >
           <v-list-item
             v-for="src in sources"
             :key="src"
-            @click="(sheet = false), (video.src = src.url)"
+            @click="(sheet = false), $emit('quality', src.url)"
           >
             <v-list-item-avatar>
               <v-icon
                 :color="
-                  video.src === src.url
+                  currentSource.src === src.url
                     ? 'primary'
                     : $vuetify.theme.dark
                     ? 'background lighten-2'
                     : 'background darken-2'
                 "
                 v-text="
-                  video.src === src.url
+                  currentSource.src === src.url
                     ? 'mdi-radiobox-marked'
                     : 'mdi-radiobox-blank'
                 "
@@ -71,7 +75,17 @@
 
 <script>
 export default {
-  props: ["video", "sources"],
+  props: {
+    currentSource: {
+      type: String,
+      required: true,
+    },
+    sources: {
+      type: Array,
+      required: true,
+    },
+  },
+  emits: ["quality"],
   data: () => ({
     sheet: false,
   }),

NUXT/components/Player/speed.vue

@@ -2,6 +2,7 @@
   <div>
     <v-bottom-sheet
       v-model="sheet"
+      style="z-index: 999"
       :attach="$parent.$refs.vidcontainer"
       scrollable
     >
@@ -15,7 +16,7 @@
           v-bind="attrs"
           v-on="on"
         >
-          {{ video.playbackRate }}X
+          {{ currentSpeed }}X
         </v-btn>
       </template>
       <v-card class="background">
@@ -41,21 +42,19 @@
           <v-list-item
             v-for="sped in speeds"
             :key="sped"
-            @click="(sheet = false), (video.playbackRate = sped)"
+            @click="(sheet = false), $emit('speed', sped)"
           >
             <!-- // TODO: save playbackRate to localStorage and manage via store/video/index.js -->
             <v-list-item-avatar>
               <v-icon
                 :color="
-                  video.playbackRate === sped
+                  currentSpeed === sped
                     ? 'primary'
                     : $vuetify.theme.dark
                     ? 'background lighten-2'
                     : 'background darken-2'
                 "
-                v-text="
-                  video.playbackRate === sped ? 'mdi-check' : 'mdi-speedometer'
-                "
+                v-text="currentSpeed === sped ? 'mdi-check' : 'mdi-speedometer'"
               ></v-icon>
             </v-list-item-avatar>
             <v-list-item-title>{{ sped }}X</v-list-item-title>
@@ -68,7 +67,13 @@
 
 <script>
 export default {
-  props: ["video"],
+  props: {
+    currentSpeed: {
+      type: Number,
+      required: true,
+    },
+  },
+  emits: ["speed"],
   data: () => ({
     sheet: false,
     speeds: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 3, 4, 8, 16],