From 12f6e1bf6fdb7f2585fdbacfb71bd2a33206affe Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Sun, 29 May 2022 13:08:21 -0400
Subject: [PATCH 01/10] player bugs & improvements, cooler video card thumbnail
 rounding

---
 NUXT/components/Player/fullscreen.vue         |  2 +-
 NUXT/components/Player/index.vue              | 59 +++++++++++--------
 NUXT/components/Player/quality.vue            |  2 +-
 NUXT/components/Player/seekbar.vue            | 20 +++++--
 NUXT/components/Player/speed.vue              |  2 +-
 NUXT/components/Player/watchtime.vue          |  6 +-
 .../UtilRenderers/baseVideoRenderer.vue       | 28 +++++----
 NUXT/pages/watch.vue                          | 13 ++--
 8 files changed, 82 insertions(+), 50 deletions(-)

diff --git a/NUXT/components/Player/fullscreen.vue b/NUXT/components/Player/fullscreen.vue
index 310b4bb..ca315da 100644
--- a/NUXT/components/Player/fullscreen.vue
+++ b/NUXT/components/Player/fullscreen.vue
@@ -3,7 +3,7 @@
     fab
     text
     color="white"
-    style="position: absolute; bottom: 0.25rem; right: 0"
+    style="position: absolute; bottom: 0.25rem; right: 0.5rem"
     @click.stop="$emit('fullscreen')"
   >
     <v-icon>{{ fullscreen ? "mdi-fullscreen-exit" : "mdi-fullscreen" }}</v-icon>
diff --git a/NUXT/components/Player/index.vue b/NUXT/components/Player/index.vue
index 3558343..a9b1e2d 100644
--- a/NUXT/components/Player/index.vue
+++ b/NUXT/components/Player/index.vue
@@ -19,26 +19,32 @@
       ref="player"
       autoplay
       width="100%"
+      :height="isFullscreen ? '100%' : 'auto'"
       :src="vidSrc"
-      style="transition: filter 0.15s ease-in-out; max-height: 100vh"
-      :class="controls ? 'dim' : ''"
+      style="transition: filter 0.15s ease-in-out"
+      :class="controls || seeking ? 'dim' : ''"
       :style="contain ? 'object-fit: contain;' : 'object-fit: cover;'"
     />
-    <!-- TODO: controls || seeking, take seeking out of <seekbar> component -->
 
-    <v-btn
+    <div
+      v-if="isFullscreen && controls"
+      style="
+        position: absolute;
+        width: calc(100% - 13.5rem);
+        left: 3.5rem;
+        top: 0.5rem;
+      "
+    >
+      <h3>{{ video.title }}</h3>
+      <div style="color: #aaa">{{ video.channelName }}</div>
+    </div>
+
+    <!-- <v-btn
       v-if="controls"
       text
       tile
-      style="
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 50%;
-        height: 100%;
-        opacity: 0;
-      "
-      @dbclick.stop="$refs.player.currentTime -= $refs.player.duration / 10"
+      style="position: absolute; top: 0; left: 0; width: 50%; height: 100%"
+      @click.stop="$refs.player.currentTime -= $refs.player.duration / 10"
     >
       <v-icon>mdi-rewind</v-icon>
     </v-btn>
@@ -47,18 +53,11 @@
       v-if="controls"
       text
       tile
-      style="
-        position: absolute;
-        top: 0;
-        left: 50%;
-        width: 50%;
-        height: 100%;
-        opacity: 0;
-      "
-      @dbclick.stop="$refs.player.currentTime += $refs.player.duration / 10"
+      style="position: absolute; top: 0; left: 50%; width: 50%; height: 100%"
+      @click.stop="$refs.player.currentTime += $refs.player.duration / 10"
     >
       <v-icon>mdi-fast-forward</v-icon>
-    </v-btn>
+    </v-btn> -->
 
     <div
       style="transition: opacity 0.15s ease-in-out"
@@ -90,6 +89,8 @@
       :fullscreen="isFullscreen"
       :video="$refs.player"
       :sources="sources"
+      :controls="controls"
+      @seeking="seeking = !seeking"
     />
   </div>
 </template>
@@ -123,11 +124,16 @@ export default {
       type: Array,
       required: true,
     },
+    video: {
+      type: Object,
+      required: true,
+    },
   },
   data() {
     return {
       isFullscreen: false,
       controls: false,
+      seeking: false,
       contain: true,
       vidSrc: "",
     };
@@ -135,9 +141,11 @@ export default {
   mounted() {
     console.log("sources", this.sources);
     this.vidSrc = this.sources[this.sources.length - 1].url;
+    // TODO: detect orientation change and enter fullscreen
+    // TODO: detect video loading state and send this.loading to play button :loading = loading
   },
   beforeDestroy() {
-    this.exitFullscreen();
+    if (this.isFullscreen) this.exitFullscreen();
   },
   methods: {
     handleFullscreenChange() {
@@ -184,4 +192,7 @@ export default {
 .dim {
   filter: brightness(50%);
 }
+.invisible {
+  opacity: 0;
+}
 </style>
diff --git a/NUXT/components/Player/quality.vue b/NUXT/components/Player/quality.vue
index c16e4ff..52e72d2 100644
--- a/NUXT/components/Player/quality.vue
+++ b/NUXT/components/Player/quality.vue
@@ -3,7 +3,7 @@
     fab
     text
     disabled
-    style="position: absolute; bottom: 0.25rem; right: 3.5rem"
+    style="position: absolute; bottom: 0.25rem; right: 4rem"
   >
     HD
   </v-btn>
diff --git a/NUXT/components/Player/seekbar.vue b/NUXT/components/Player/seekbar.vue
index 4a80308..7c90dd9 100644
--- a/NUXT/components/Player/seekbar.vue
+++ b/NUXT/components/Player/seekbar.vue
@@ -11,29 +11,39 @@
       query
       active
       style="width: 100%"
+      class="background"
+      :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
       background-opacity="0.5"
       background-color="primary"
       :buffer-value="buffered"
       :value="percent"
       color="primary"
       height="2"
+      :style="
+        fullscreen
+          ? 'width: calc(100% - 3rem); left: 1.5rem; position: absolute; bottom: 3.75rem;'
+          : 'width: 100%'
+      "
     />
     <!-- Scrubber -->
     <v-slider
+      id="scrubber"
       hide-details
       height="2"
       dense
+      track-color="transparent"
+      :class="!controls && !fullscreen && !scrubbing ? 'invisible' : ''"
       style="position: absolute; z-index: 69420"
       :style="
         fullscreen
-          ? 'width: calc(100% - 2rem); left: 1rem; bottom: 4rem;'
-          : 'width: 100%; left: 0; bottom: 0;'
+          ? 'width: calc(100% - 3rem); left: 1.5rem; bottom: 3.75rem;'
+          : 'width: calc(100% - 0.8rem); left: 0.4rem; bottom: 0;'
       "
       :thumb-size="0"
       :max="duration"
       :value="progress"
-      @start="scrubbing = true"
-      @end="scrubbing = false"
+      @start="(scrubbing = true), $emit('seeking')"
+      @end="(scrubbing = false), $emit('seeking')"
       @change="scrub($event)"
       @input="scrubbing ? seek($event) : null"
     >
@@ -62,7 +72,7 @@
 
 <script>
 export default {
-  props: ["sources", "video", "fullscreen"],
+  props: ["sources", "video", "controls", "fullscreen"],
 
   data() {
     return {
diff --git a/NUXT/components/Player/speed.vue b/NUXT/components/Player/speed.vue
index 01323e8..89c07cf 100644
--- a/NUXT/components/Player/speed.vue
+++ b/NUXT/components/Player/speed.vue
@@ -3,7 +3,7 @@
     fab
     text
     disabled
-    style="position: absolute; bottom: 0.25rem; right: 7rem"
+    style="position: absolute; bottom: 0.25rem; right: 7.5rem"
   >
     1X
   </v-btn>
diff --git a/NUXT/components/Player/watchtime.vue b/NUXT/components/Player/watchtime.vue
index ad37f81..7cc4ca2 100644
--- a/NUXT/components/Player/watchtime.vue
+++ b/NUXT/components/Player/watchtime.vue
@@ -2,14 +2,14 @@
   <div
     style="
       color: #fff;
-      left: 1.25rem;
-      bottom: 1.25rem;
+      left: 1.5rem;
+      bottom: 1.5rem;
       font-size: 0.75rem;
       position: absolute;
     "
   >
     {{ watched }}
-    <span style="color: #999"> / {{ duration }} </span>
+    <span style="color: #aaa"> / {{ duration }} </span>
   </div>
 </template>
 
diff --git a/NUXT/components/UtilRenderers/baseVideoRenderer.vue b/NUXT/components/UtilRenderers/baseVideoRenderer.vue
index 095ac94..4fb3977 100644
--- a/NUXT/components/UtilRenderers/baseVideoRenderer.vue
+++ b/NUXT/components/UtilRenderers/baseVideoRenderer.vue
@@ -1,14 +1,7 @@
 <template>
   <v-card
-    class="entry videoRenderer background"
+    class="entry videoRenderer background overflow-hidden"
     :to="`/watch?v=${vidId}`"
-    :class="
-      roundThumb && roundTweak > 0
-        ? $vuetify.theme.dark
-          ? 'lighten-1'
-          : 'darken-1'
-        : ''
-    "
     :style="{
       borderRadius: roundThumb ? `${roundTweak / 2}rem` : '0',
       margin:
@@ -21,7 +14,7 @@
         :aspect-ratio="16 / 9"
         :src="$youtube.getThumbnail(vidId, 'max', thumbnails)"
         :style="{
-          borderRadius: roundThumb ? `${roundTweak / 4}rem` : '0',
+          borderRadius: roundThumb ? `${roundTweak / 12}rem` : '0',
         }"
       />
       <div
@@ -32,13 +25,26 @@
         v-text="thumbnailOverlayText"
       />
     </div>
-    <div id="details">
+    <div
+      id="details"
+      class="background mt-1"
+      :class="
+        roundThumb && roundTweak > 0
+          ? $vuetify.theme.dark
+            ? 'lighten-1'
+            : 'darken-1'
+          : ''
+      "
+      :style="{
+        borderRadius: roundThumb ? `${roundTweak / 12}rem` : '0',
+      }"
+    >
       <a
+        class="avatar-link pl-2 pt-2"
         @click.prevent="
           $store.dispatch('channel/fetchChannel', channelUrl),
             $router.push('/channel')
         "
-        class="avatar-link pl-2 pt-2"
       >
         <v-img class="avatar-thumbnail" :src="channelIcon" />
       </a>
diff --git a/NUXT/pages/watch.vue b/NUXT/pages/watch.vue
index 938b665..c636031 100644
--- a/NUXT/pages/watch.vue
+++ b/NUXT/pages/watch.vue
@@ -3,7 +3,12 @@
     <div id="player-container">
       <!-- TODO: move component to default.vue -->
       <!-- TODO: pass sources through vuex instead of props -->
-      <player v-if="sources.length > 0" ref="player" :sources="sources" />
+      <player
+        v-if="sources.length > 0 && video.title && video.channelName"
+        ref="player"
+        :video="video"
+        :sources="sources"
+      />
     </div>
 
     <div
@@ -214,17 +219,17 @@
       />
 
       <swipeable-bottom-sheet
+        v-if="loaded && video.commentData"
         v-model="showComments"
         hide-overlay
         persistent
         no-click-animation
         attach="#content-container"
-        v-if="loaded && video.commentData"
       >
         <mainCommentRenderer
-          :defaultContinuation="video.commentContinuation"
-          :commentData="video.commentData"
           v-model="showComments"
+          :comment-data="video.commentData"
+          :default-continuation="video.commentContinuation"
         ></mainCommentRenderer>
       </swipeable-bottom-sheet>
 

From 05cf9a7292a647e886111baf77cb0f70752dd16b Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Sun, 29 May 2022 14:13:09 -0400
Subject: [PATCH 02/10] video speed selector

---
 NUXT/components/Player/index.vue   |  8 ++--
 NUXT/components/Player/quality.vue | 73 ++++++++++++++++++++++++++----
 NUXT/components/Player/seekbar.vue |  9 ++--
 NUXT/components/Player/speed.vue   | 64 ++++++++++++++++++++++----
 NUXT/layouts/default.vue           |  6 +++
 NUXT/pages/watch.vue               |  4 +-
 6 files changed, 138 insertions(+), 26 deletions(-)

diff --git a/NUXT/components/Player/index.vue b/NUXT/components/Player/index.vue
index a9b1e2d..b3d4a49 100644
--- a/NUXT/components/Player/index.vue
+++ b/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()"
diff --git a/NUXT/components/Player/quality.vue b/NUXT/components/Player/quality.vue
index 52e72d2..bf7b2fd 100644
--- a/NUXT/components/Player/quality.vue
+++ b/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>
diff --git a/NUXT/components/Player/seekbar.vue b/NUXT/components/Player/seekbar.vue
index 7c90dd9..fc72249 100644
--- a/NUXT/components/Player/seekbar.vue
+++ b/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;'
diff --git a/NUXT/components/Player/speed.vue b/NUXT/components/Player/speed.vue
index 89c07cf..d7b372c 100644
--- a/NUXT/components/Player/speed.vue
+++ b/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>
diff --git a/NUXT/layouts/default.vue b/NUXT/layouts/default.vue
index 4a8918b..ed6f57e 100644
--- a/NUXT/layouts/default.vue
+++ b/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;
 }
diff --git a/NUXT/pages/watch.vue b/NUXT/pages/watch.vue
index c636031..5439874 100644
--- a/NUXT/pages/watch.vue
+++ b/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"

From 8bbbca2bef8a314ea5adbc61baa6752cfa08295c Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Sun, 29 May 2022 14:42:39 -0400
Subject: [PATCH 03/10] video quality selector beta

---
 NUXT/components/Player/quality.vue | 61 +++++++++++++-----------------
 NUXT/components/Player/speed.vue   |  2 +-
 2 files changed, 28 insertions(+), 35 deletions(-)

diff --git a/NUXT/components/Player/quality.vue b/NUXT/components/Player/quality.vue
index bf7b2fd..a3d731c 100644
--- a/NUXT/components/Player/quality.vue
+++ b/NUXT/components/Player/quality.vue
@@ -9,42 +9,41 @@
         <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-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 style="max-height: 50vh" class="pa-0">
+          <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>
+              {{ src.qualityLabel }} ({{ src.quality }})
+            </v-list-item-title>
+          </v-list-item>
         </v-card-text>
       </v-card>
     </v-bottom-sheet>
@@ -57,11 +56,5 @@ export default {
   data: () => ({
     sheet: false,
   }),
-  mounted() {
-    console.log(
-      "sourcessourcessourcessourcessourcessourcessources",
-      this.sources
-    );
-  },
 };
 </script>
diff --git a/NUXT/components/Player/speed.vue b/NUXT/components/Player/speed.vue
index d7b372c..d598993 100644
--- a/NUXT/components/Player/speed.vue
+++ b/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>

From af82135813d1093d4fd4368b661d919c4a65c30f Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Sun, 29 May 2022 14:49:31 -0400
Subject: [PATCH 04/10] quality selector label fix

---
 NUXT/components/Player/quality.vue | 2 +-
 NUXT/pages/watch.vue               | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/NUXT/components/Player/quality.vue b/NUXT/components/Player/quality.vue
index a3d731c..6244897 100644
--- a/NUXT/components/Player/quality.vue
+++ b/NUXT/components/Player/quality.vue
@@ -17,7 +17,7 @@
         </v-btn>
       </template>
       <v-card class="background">
-        <v-subheader>Playback Speed</v-subheader>
+        <v-subheader>Quality for current video</v-subheader>
         <v-card-text style="max-height: 50vh" class="pa-0">
           <v-list-item
             v-for="src in sources"
diff --git a/NUXT/pages/watch.vue b/NUXT/pages/watch.vue
index 5439874..b123c79 100644
--- a/NUXT/pages/watch.vue
+++ b/NUXT/pages/watch.vue
@@ -321,6 +321,7 @@ export default {
       this.loaded = false;
 
       this.$youtube.getVid(this.$route.query.v).then((result) => {
+        // TODO: add other resolutions as well
         this.sources = result.availableResolutions;
         console.log("Video info data", result);
         this.video = result;

From 9d426ff9cf6a1b903c6459144d14f4aec8cfd6c4 Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Sun, 29 May 2022 15:08:58 -0400
Subject: [PATCH 05/10] progressbar color fix

---
 NUXT/components/Player/seekbar.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/NUXT/components/Player/seekbar.vue b/NUXT/components/Player/seekbar.vue
index fc72249..0937c0e 100644
--- a/NUXT/components/Player/seekbar.vue
+++ b/NUXT/components/Player/seekbar.vue
@@ -10,10 +10,7 @@
     <v-progress-linear
       query
       active
-      style="width: 100%"
-      :class="
-        $vuetify.theme.dark ? 'transparent-lighten-1' : 'transparent-darken-1'
-      "
+      style="width: 100%; background: #ffffff22"
       background-opacity="0.5"
       background-color="primary"
       :buffer-value="buffered"

From a5ef3b33cd59214c1cc7f27ecc4b689ab2f08a52 Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Sun, 29 May 2022 18:14:00 -0400
Subject: [PATCH 06/10] scaling tweaxes

---
 .../Comments/commentThreadRenderer.vue           |  6 +++---
 NUXT/components/Player/captions.vue              |  8 +++++++-
 NUXT/components/Player/close.vue                 |  3 ++-
 NUXT/components/Player/fullscreen.vue            |  3 ++-
 NUXT/components/Player/index.vue                 | 16 +++++++---------
 NUXT/components/Player/loop.vue                  |  8 +++++++-
 NUXT/components/Player/minimize.vue              |  8 +++++++-
 NUXT/components/Player/quality.vue               |  3 ++-
 NUXT/components/Player/seekbar.vue               |  4 ++--
 NUXT/components/Player/speed.vue                 |  3 ++-
 NUXT/components/Player/watchtime.vue             |  4 ++--
 11 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/NUXT/components/Comments/commentThreadRenderer.vue b/NUXT/components/Comments/commentThreadRenderer.vue
index 8079cf0..c8f68b4 100644
--- a/NUXT/components/Comments/commentThreadRenderer.vue
+++ b/NUXT/components/Comments/commentThreadRenderer.vue
@@ -10,7 +10,7 @@
       text
       to="/channel"
       class="avatar-link mr-4"
-      style="height: 3rem; width: 3rem"
+      style="height: 35px; width: 35px"
       @click.prevent="
         $store.dispatch(
           'channel/fetchChannel',
@@ -117,8 +117,8 @@
 
   .avatar-thumbnail {
     border-radius: 50%;
-    width: 48px;
-    height: 48px;
+    width: 35px;
+    height: 35px;
   }
 
   .comment-content {
diff --git a/NUXT/components/Player/captions.vue b/NUXT/components/Player/captions.vue
index a570f5b..c01ae1d 100644
--- a/NUXT/components/Player/captions.vue
+++ b/NUXT/components/Player/captions.vue
@@ -1,5 +1,11 @@
 <template>
-  <v-btn disabled fab text style="position: absolute; top: 0; right: 3.5rem">
+  <v-btn
+    fab
+    text
+    small
+    disabled
+    style="position: absolute; top: 0.25rem; right: 3rem"
+  >
     <v-icon>mdi-closed-caption-outline</v-icon>
   </v-btn>
 </template>
diff --git a/NUXT/components/Player/close.vue b/NUXT/components/Player/close.vue
index cc671f2..3f53584 100644
--- a/NUXT/components/Player/close.vue
+++ b/NUXT/components/Player/close.vue
@@ -3,7 +3,8 @@
   <v-btn
     fab
     text
-    style="position: absolute; top: 0; right: 0"
+    small
+    style="position: absolute; top: 0.25rem; right: 0.25rem"
     to="/home"
     color="white"
   >
diff --git a/NUXT/components/Player/fullscreen.vue b/NUXT/components/Player/fullscreen.vue
index ca315da..c4cfdb5 100644
--- a/NUXT/components/Player/fullscreen.vue
+++ b/NUXT/components/Player/fullscreen.vue
@@ -2,8 +2,9 @@
   <v-btn
     fab
     text
+    small
     color="white"
-    style="position: absolute; bottom: 0.25rem; right: 0.5rem"
+    style="position: absolute; bottom: 0.25rem; right: 0.25rem"
     @click.stop="$emit('fullscreen')"
   >
     <v-icon>{{ fullscreen ? "mdi-fullscreen-exit" : "mdi-fullscreen" }}</v-icon>
diff --git a/NUXT/components/Player/index.vue b/NUXT/components/Player/index.vue
index b3d4a49..5985b0e 100644
--- a/NUXT/components/Player/index.vue
+++ b/NUXT/components/Player/index.vue
@@ -30,31 +30,29 @@
       v-if="isFullscreen && controls"
       style="
         position: absolute;
-        width: calc(100% - 13.5rem);
-        left: 3.5rem;
-        top: 1rem;
+        width: calc(100% - 12rem);
+        left: 3rem;
+        top: 0.5rem;
       "
     >
-      <h3>{{ video.title }}</h3>
-      <div style="color: #aaa">{{ video.channelName }}</div>
+      <h4>{{ video.title }}</h4>
+      <div style="color: #aaa; font-size: 0.75rem">{{ video.channelName }}</div>
     </div>
 
     <!-- <v-btn
-      v-if="controls"
       text
       tile
       style="position: absolute; top: 0; left: 0; width: 50%; height: 100%"
-      @click.stop="$refs.player.currentTime -= $refs.player.duration / 10"
+      @dblclick.stop="$refs.player.currentTime -= $refs.player.duration / 10"
     >
       <v-icon>mdi-rewind</v-icon>
     </v-btn>
 
     <v-btn
-      v-if="controls"
       text
       tile
       style="position: absolute; top: 0; left: 50%; width: 50%; height: 100%"
-      @click.stop="$refs.player.currentTime += $refs.player.duration / 10"
+      @dblclick.stop="$refs.player.currentTime += $refs.player.duration / 10"
     >
       <v-icon>mdi-fast-forward</v-icon>
     </v-btn> -->
diff --git a/NUXT/components/Player/loop.vue b/NUXT/components/Player/loop.vue
index 930c489..dbf3cf9 100644
--- a/NUXT/components/Player/loop.vue
+++ b/NUXT/components/Player/loop.vue
@@ -1,5 +1,11 @@
 <template>
-  <v-btn fab text disabled style="position: absolute; top: 0; right: 7rem">
+  <v-btn
+    fab
+    text
+    small
+    disabled
+    style="position: absolute; top: 0.25rem; right: 6rem"
+  >
     <v-icon>mdi-sync</v-icon>
   </v-btn>
 </template>
diff --git a/NUXT/components/Player/minimize.vue b/NUXT/components/Player/minimize.vue
index 15334ac..a09e89f 100644
--- a/NUXT/components/Player/minimize.vue
+++ b/NUXT/components/Player/minimize.vue
@@ -1,5 +1,11 @@
 <template>
-  <v-btn fab text disabled style="position: absolute; top: 0; left: 0">
+  <v-btn
+    fab
+    text
+    small
+    disabled
+    style="position: absolute; top: 0.25rem; left: 0.25rem"
+  >
     <v-icon>mdi-chevron-down</v-icon>
   </v-btn>
 </template>
diff --git a/NUXT/components/Player/quality.vue b/NUXT/components/Player/quality.vue
index 6244897..5d2d665 100644
--- a/NUXT/components/Player/quality.vue
+++ b/NUXT/components/Player/quality.vue
@@ -9,7 +9,8 @@
         <v-btn
           fab
           text
-          style="position: absolute; bottom: 0.25rem; right: 4rem"
+          small
+          style="position: absolute; bottom: 0.25rem; right: 3rem"
           v-bind="attrs"
           v-on="on"
         >
diff --git a/NUXT/components/Player/seekbar.vue b/NUXT/components/Player/seekbar.vue
index 0937c0e..15cdb86 100644
--- a/NUXT/components/Player/seekbar.vue
+++ b/NUXT/components/Player/seekbar.vue
@@ -19,7 +19,7 @@
       height="3"
       :style="
         fullscreen
-          ? 'width: calc(100% - 3rem); left: 1.5rem; position: absolute; bottom: 3.75rem;'
+          ? 'width: calc(100% - 2rem); left: 1rem; position: absolute; bottom: 3rem;'
           : 'width: 100%'
       "
     />
@@ -34,7 +34,7 @@
       style="position: absolute; z-index: 2"
       :style="
         fullscreen
-          ? 'width: calc(100% - 3rem); left: 1.5rem; bottom: 3.75rem;'
+          ? 'width: calc(100% - 2rem); left: 1rem; bottom: 3rem;'
           : 'width: calc(100% - 0.8rem); left: 0.4rem; bottom: 0;'
       "
       :thumb-size="0"
diff --git a/NUXT/components/Player/speed.vue b/NUXT/components/Player/speed.vue
index d598993..e43fb08 100644
--- a/NUXT/components/Player/speed.vue
+++ b/NUXT/components/Player/speed.vue
@@ -9,7 +9,8 @@
         <v-btn
           fab
           text
-          style="position: absolute; bottom: 0.25rem; right: 7.5rem"
+          small
+          style="position: absolute; bottom: 0.25rem; right: 6rem"
           v-bind="attrs"
           v-on="on"
         >
diff --git a/NUXT/components/Player/watchtime.vue b/NUXT/components/Player/watchtime.vue
index 7cc4ca2..496810b 100644
--- a/NUXT/components/Player/watchtime.vue
+++ b/NUXT/components/Player/watchtime.vue
@@ -2,8 +2,8 @@
   <div
     style="
       color: #fff;
-      left: 1.5rem;
-      bottom: 1.5rem;
+      left: 1rem;
+      bottom: 1rem;
       font-size: 0.75rem;
       position: absolute;
     "

From 5ec17950c6e5ed1acea200385100360ab7171c68 Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Sun, 29 May 2022 19:41:42 -0400
Subject: [PATCH 07/10] bunch of player stuff

---
 NUXT/components/Player/index.vue     | 80 ++++++++++++++++++++++++++--
 NUXT/components/Player/playpause.vue | 11 ++--
 NUXT/components/Player/quality.vue   |  7 ++-
 NUXT/components/Player/speed.vue     |  7 ++-
 NUXT/pages/watch.vue                 | 11 ++--
 5 files changed, 98 insertions(+), 18 deletions(-)

diff --git a/NUXT/components/Player/index.vue b/NUXT/components/Player/index.vue
index 5985b0e..2e5f6b3 100644
--- a/NUXT/components/Player/index.vue
+++ b/NUXT/components/Player/index.vue
@@ -39,10 +39,18 @@
       <div style="color: #aaa; font-size: 0.75rem">{{ video.channelName }}</div>
     </div>
 
-    <!-- <v-btn
+    <!-- // TODO: merge the bottom 2 into 1 reusable component -->
+    <v-btn
       text
       tile
-      style="position: absolute; top: 0; left: 0; width: 50%; height: 100%"
+      style="
+        opacity: 0;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 50%;
+        height: 100%;
+      "
       @dblclick.stop="$refs.player.currentTime -= $refs.player.duration / 10"
     >
       <v-icon>mdi-rewind</v-icon>
@@ -51,11 +59,18 @@
     <v-btn
       text
       tile
-      style="position: absolute; top: 0; left: 50%; width: 50%; height: 100%"
+      style="
+        opacity: 0;
+        position: absolute;
+        top: 0;
+        left: 50%;
+        width: 50%;
+        height: 100%;
+      "
       @dblclick.stop="$refs.player.currentTime += $refs.player.duration / 10"
     >
       <v-icon>mdi-fast-forward</v-icon>
-    </v-btn> -->
+    </v-btn>
 
     <div
       style="transition: opacity 0.15s ease-in-out"
@@ -66,13 +81,70 @@
       <captions />
       <close />
 
+      <v-btn
+        fab
+        text
+        small
+        style="
+          position: absolute;
+          top: calc(50% - 1.25rem);
+          left: calc(50% - 9.5rem);
+        "
+        color="white"
+        @click.stop="$refs.player.currentTime -= 5"
+      >
+        <v-icon size="1rem">mdi-rewind-5</v-icon>
+      </v-btn>
+      <v-btn
+        fab
+        text
+        style="
+          position: absolute;
+          top: calc(50% - 1.75rem);
+          left: calc(50% - 6rem);
+        "
+        color="white"
+        disabled
+        @click.stop=""
+      >
+        <v-icon size="2rem">mdi-skip-previous</v-icon>
+      </v-btn>
       <playpause
         v-if="$refs.player"
         :video="$refs.player"
         @close="controls = false"
       />
+      <v-btn
+        fab
+        text
+        style="
+          position: absolute;
+          top: calc(50% - 1.75rem);
+          left: calc(50% + 3rem);
+        "
+        color="white"
+        disabled
+        @click.stop=""
+      >
+        <v-icon size="2rem">mdi-skip-next</v-icon>
+      </v-btn>
+      <v-btn
+        fab
+        text
+        small
+        style="
+          position: absolute;
+          top: calc(50% - 1.25rem);
+          left: calc(50% + 7rem);
+        "
+        color="white"
+        @click.stop="$refs.player.currentTime += 5"
+      >
+        <v-icon size="1rem">mdi-fast-forward-5</v-icon>
+      </v-btn>
 
       <watchtime v-if="$refs.player" :video="$refs.player" />
+      <!-- // 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" />
       <fullscreen
diff --git a/NUXT/components/Player/playpause.vue b/NUXT/components/Player/playpause.vue
index d6b804b..d804fca 100644
--- a/NUXT/components/Player/playpause.vue
+++ b/NUXT/components/Player/playpause.vue
@@ -2,20 +2,15 @@
   <v-btn
     fab
     text
-    style="
-      width: 5rem;
-      height: 5rem;
-      position: absolute;
-      top: calc(50% - 2.5rem);
-      left: calc(50% - 2.5rem);
-    "
+    large
+    style="position: absolute; top: calc(50% - 2rem); left: calc(50% - 2rem)"
     color="white"
     @click.stop="
       (paused = !video.paused),
         video.paused ? (video.play(), $emit('close')) : video.pause()
     "
   >
-    <v-icon size="5rem">
+    <v-icon size="3.5rem">
       {{ paused ? "mdi-play" : "mdi-pause" }}
     </v-icon>
   </v-btn>
diff --git a/NUXT/components/Player/quality.vue b/NUXT/components/Player/quality.vue
index 5d2d665..483500b 100644
--- a/NUXT/components/Player/quality.vue
+++ b/NUXT/components/Player/quality.vue
@@ -17,7 +17,12 @@
           {{ sources.find((src) => src.url == video.src).qualityLabel }}
         </v-btn>
       </template>
-      <v-card class="background">
+      <v-card
+        v-touch="{
+          down: () => (sheet = false),
+        }"
+        class="background"
+      >
         <v-subheader>Quality for current video</v-subheader>
         <v-card-text style="max-height: 50vh" class="pa-0">
           <v-list-item
diff --git a/NUXT/components/Player/speed.vue b/NUXT/components/Player/speed.vue
index e43fb08..55bd4ae 100644
--- a/NUXT/components/Player/speed.vue
+++ b/NUXT/components/Player/speed.vue
@@ -17,7 +17,12 @@
           {{ video.playbackRate }}X
         </v-btn>
       </template>
-      <v-card class="background">
+      <v-card
+        v-touch="{
+          down: () => (sheet = false),
+        }"
+        class="background"
+      >
         <v-subheader>Playback Speed</v-subheader>
         <v-card-text style="height: 50vh" class="pa-0">
           <v-list-item
diff --git a/NUXT/pages/watch.vue b/NUXT/pages/watch.vue
index b123c79..5e1531e 100644
--- a/NUXT/pages/watch.vue
+++ b/NUXT/pages/watch.vue
@@ -51,22 +51,25 @@
           <v-icon class="ml-4" v-if="showMore">mdi-chevron-up</v-icon>
           <v-icon class="ml-4" v-else>mdi-chevron-down</v-icon>
         </div>
-        <div class="d-flex pl-6">
+        <div class="d-flex pl-4">
           <v-btn
             v-for="(item, index) in interactions"
             :key="index"
             text
             fab
-            no-caps
             class="vertical-button mx-1"
             elevation="0"
-            style="width: 4.2rem !important; height: 4.2rem !important"
+            style="
+              width: 4.2rem !important;
+              height: 4.2rem !important;
+              text-decoration: none !important;
+            "
             :disabled="item.disabled"
             @click="callMethodByName(item.actionName)"
           >
             <v-icon v-text="item.icon" />
             <div
-              class="mt-2"
+              class="mt-1"
               style="font-size: 0.66rem"
               v-text="item.value || item.name"
             />

From f75a27c8b10479378df21de41f8612d0dfffaa0f Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Sun, 29 May 2022 19:50:00 -0400
Subject: [PATCH 08/10] better watch page button text

---
 NUXT/components/Player/index.vue | 6 +++---
 NUXT/pages/watch.vue             | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/NUXT/components/Player/index.vue b/NUXT/components/Player/index.vue
index 2e5f6b3..248beeb 100644
--- a/NUXT/components/Player/index.vue
+++ b/NUXT/components/Player/index.vue
@@ -88,7 +88,7 @@
         style="
           position: absolute;
           top: calc(50% - 1.25rem);
-          left: calc(50% - 9.5rem);
+          left: calc(50% - 10rem);
         "
         color="white"
         @click.stop="$refs.player.currentTime -= 5"
@@ -101,7 +101,7 @@
         style="
           position: absolute;
           top: calc(50% - 1.75rem);
-          left: calc(50% - 6rem);
+          left: calc(50% - 6.5rem);
         "
         color="white"
         disabled
@@ -260,7 +260,7 @@ export default {
 
 <style>
 .dim {
-  filter: brightness(50%);
+  filter: brightness(42%);
 }
 .invisible {
   opacity: 0;
diff --git a/NUXT/pages/watch.vue b/NUXT/pages/watch.vue
index 5e1531e..6be50c5 100644
--- a/NUXT/pages/watch.vue
+++ b/NUXT/pages/watch.vue
@@ -62,7 +62,7 @@
             style="
               width: 4.2rem !important;
               height: 4.2rem !important;
-              text-decoration: none !important;
+              text-transform: none !important;
             "
             :disabled="item.disabled"
             @click="callMethodByName(item.actionName)"
@@ -70,7 +70,7 @@
             <v-icon v-text="item.icon" />
             <div
               class="mt-1"
-              style="font-size: 0.66rem"
+              style="font-size: 0.6rem"
               v-text="item.value || item.name"
             />
           </v-btn>

From 6fae707e59becdb0b603ccebbfabac4a8dfd1b95 Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Sun, 29 May 2022 19:57:06 -0400
Subject: [PATCH 09/10] 10s not 10%

---
 NUXT/components/Player/index.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/NUXT/components/Player/index.vue b/NUXT/components/Player/index.vue
index 248beeb..8c438db 100644
--- a/NUXT/components/Player/index.vue
+++ b/NUXT/components/Player/index.vue
@@ -51,7 +51,7 @@
         width: 50%;
         height: 100%;
       "
-      @dblclick.stop="$refs.player.currentTime -= $refs.player.duration / 10"
+      @dblclick.stop="$refs.player.currentTime -= 10"
     >
       <v-icon>mdi-rewind</v-icon>
     </v-btn>
@@ -67,7 +67,7 @@
         width: 50%;
         height: 100%;
       "
-      @dblclick.stop="$refs.player.currentTime += $refs.player.duration / 10"
+      @dblclick.stop="$refs.player.currentTime += 10"
     >
       <v-icon>mdi-fast-forward</v-icon>
     </v-btn>

From ae61842c031d8959063646478e16540a2498599e Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Sun, 29 May 2022 21:44:51 -0400
Subject: [PATCH 10/10] radiobox not checkbox

---
 NUXT/components/Player/quality.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/NUXT/components/Player/quality.vue b/NUXT/components/Player/quality.vue
index 483500b..be49765 100644
--- a/NUXT/components/Player/quality.vue
+++ b/NUXT/components/Player/quality.vue
@@ -41,8 +41,8 @@
                 "
                 v-text="
                   video.src === src.url
-                    ? 'mdi-checkbox-outline'
-                    : 'mdi-checkbox-blank-outline'
+                    ? 'mdi-radiobox-marked'
+                    : 'mdi-radiobox-blank'
                 "
               ></v-icon>
             </v-list-item-avatar>