video speed selector

NUXT/components/Player/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <!-- TODO: down: () => minimize, -->
+  <!-- // TODO: down: () => minimize, -->
   <div
     ref="vidcontainer"
     v-touch="{
@@ -32,7 +32,7 @@
         position: absolute;
         width: calc(100% - 13.5rem);
         left: 3.5rem;
-        top: 0.5rem;
+        top: 1rem;
       "
     >
       <h3>{{ video.title }}</h3>
@@ -75,8 +75,8 @@
       />
 
       <watchtime v-if="$refs.player" :video="$refs.player" />
-      <quality />
-      <speed />
+      <quality v-if="$refs.player" :video="$refs.player" :sources="sources" />
+      <speed v-if="$refs.player" :video="$refs.player" />
       <fullscreen
         :fullscreen="isFullscreen"
         @fullscreen="(controls = $refs.player.paused), handleFullscreenChange()"

NUXT/components/Player/quality.vue

@@ -1,10 +1,67 @@
 <template>
-  <v-btn
-    fab
-    text
-    disabled
-    style="position: absolute; bottom: 0.25rem; right: 4rem"
-  >
-    HD
-  </v-btn>
+  <div>
+    <v-bottom-sheet
+      v-model="sheet"
+      :attach="$parent.$refs.vidcontainer"
+      scrollable
+    >
+      <template #activator="{ on, attrs }">
+        <v-btn
+          fab
+          text
+          disabled
+          style="position: absolute; bottom: 0.25rem; right: 4rem"
+          v-bind="attrs"
+          v-on="on"
+        >
+          HD
+        </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-list-item
+              v-for="src in sources"
+              :key="src"
+              @click="(sheet = false), (video.src = src.url)"
+            >
+              <v-list-item-avatar>
+                <v-icon
+                  :color="
+                    video.src === src.url
+                      ? 'primary'
+                      : $vuetify.theme.dark
+                      ? 'background lighten-2'
+                      : 'background darken-2'
+                  "
+                  v-text="
+                    video.src === src.url
+                      ? 'mdi-checkbox-outline'
+                      : 'mdi-checkbox-blank-outline'
+                  "
+                ></v-icon>
+              </v-list-item-avatar>
+              <v-list-item-title>{{ sped }}X</v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-card-text>
+      </v-card>
+    </v-bottom-sheet>
+  </div>
 </template>
+
+<script>
+export default {
+  props: ["video", "sources"],
+  data: () => ({
+    sheet: false,
+  }),
+  mounted() {
+    console.log(
+      "sourcessourcessourcessourcessourcessourcessources",
+      this.sources
+    );
+  },
+};
+</script>

NUXT/components/Player/seekbar.vue

@@ -11,14 +11,15 @@
       query
       active
       style="width: 100%"
-      class="background"
-      :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
+      :class="
+        $vuetify.theme.dark ? 'transparent-lighten-1' : 'transparent-darken-1'
+      "
       background-opacity="0.5"
       background-color="primary"
       :buffer-value="buffered"
       :value="percent"
       color="primary"
-      height="2"
+      height="3"
       :style="
         fullscreen
           ? 'width: calc(100% - 3rem); left: 1.5rem; position: absolute; bottom: 3.75rem;'
@@ -33,7 +34,7 @@
       dense
       track-color="transparent"
       :class="!controls && !fullscreen && !scrubbing ? 'invisible' : ''"
-      style="position: absolute; z-index: 69420"
+      style="position: absolute; z-index: 2"
       :style="
         fullscreen
           ? 'width: calc(100% - 3rem); left: 1.5rem; bottom: 3.75rem;'

NUXT/components/Player/speed.vue

@@ -1,10 +1,58 @@
 <template>
-  <v-btn
-    fab
-    text
-    disabled
-    style="position: absolute; bottom: 0.25rem; right: 7.5rem"
-  >
-    1X
-  </v-btn>
+  <div>
+    <v-bottom-sheet
+      v-model="sheet"
+      :attach="$parent.$refs.vidcontainer"
+      scrollable
+    >
+      <template #activator="{ on, attrs }">
+        <v-btn
+          fab
+          text
+          style="position: absolute; bottom: 0.25rem; right: 7.5rem"
+          v-bind="attrs"
+          v-on="on"
+        >
+          {{ video.playbackRate }}X
+        </v-btn>
+      </template>
+      <v-card class="background">
+        <v-subheader>Playback Speed</v-subheader>
+        <v-card-text style="height: 50vh" class="pa-0">
+          <v-list-item
+            v-for="sped in speeds"
+            :key="sped"
+            @click="(sheet = false), (video.playbackRate = sped)"
+          >
+            <!-- // TODO: save playbackRate to localStorage and manage via store/video/index.js -->
+            <v-list-item-avatar>
+              <v-icon
+                :color="
+                  video.playbackRate === sped
+                    ? 'primary'
+                    : $vuetify.theme.dark
+                    ? 'background lighten-2'
+                    : 'background darken-2'
+                "
+                v-text="
+                  video.playbackRate === sped ? 'mdi-check' : 'mdi-speedometer'
+                "
+              ></v-icon>
+            </v-list-item-avatar>
+            <v-list-item-title>{{ sped }}X</v-list-item-title>
+          </v-list-item>
+        </v-card-text>
+      </v-card>
+    </v-bottom-sheet>
+  </div>
 </template>
+
+<script>
+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],
+  }),
+};
+</script>

NUXT/layouts/default.vue

@@ -248,6 +248,12 @@ export default {
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
 }
+.transparent-lighten-1 {
+  background: #ffffff22;
+}
+.transparent-darken-1 {
+  background: #00000022;
+}
 .debug {
   outline: 1px solid red;
 }

NUXT/pages/watch.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="background" id="watch-body">
     <div id="player-container">
-      <!-- TODO: move component to default.vue -->
-      <!-- TODO: pass sources through vuex instead of props -->
+      <!-- // TODO: move component to default.vue -->
+      <!-- // TODO: pass sources through vuex instead of props -->
       <player
         v-if="sources.length > 0 && video.title && video.channelName"
         ref="player"