watch page improvements

NUXT/components/bottomNavigation.vue

@@ -3,6 +3,11 @@
     v-model="tabSelection"
     shift
     class="bottomNav py-4 transparent"
+    :style="
+      $vuetify.theme.dark
+        ? 'border-top: 1px solid var(--v-background-lighten1) !important;'
+        : 'border-top: 1px solid var(--v-background-darken1) !important;'
+    "
   >
     <v-btn
       v-for="(item, i) in tabs"

NUXT/components/gridRenderers/gridVideoRenderer.vue

@@ -4,14 +4,7 @@
     :to="`/watch?v=${video.videoId}`"
     flat
   >
-    <div
-      style="position: relative; overflow: hidden !important"
-      class="thumbnail-container"
-      :style="{
-        borderRadius: `${$store.state.tweaks.roundTweak / 2}rem`,
-        margin: $store.state.tweaks.roundTweak > 0 ? '0 .5rem' : '0',
-      }"
-    >
+    <div style="position: relative" class="thumbnail-container">
       <v-img
         v-if="video.thumbnail"
         :aspect-ratio="16 / 9"

NUXT/components/videoPlayer.vue

@@ -1,21 +1,46 @@
 <template>
   <div>
     <video
+      ref="player"
       controls
       autoplay
       :src="vidSrc"
       width="100%"
+      style="max-height: 50vh; display: block"
       @webkitfullscreenchange="handleFullscreenChange"
-      ref="player"
-      style="max-height: 50vh"
     />
+    <v-progress-linear
+      active
+      background-color="primary"
+      background-opacity="0.5"
+      :buffer-value="buffered"
+      color="primary"
+      height="3"
+      query
+      :value="percentage"
+    />
+    <!-- <v-slider v-model="value" step="0"></v-slider> -->
   </div>
 </template>
 
 <script>
 export default {
   props: ["vidSrc"],
-
+  data() {
+    return {
+      percentage: 0,
+      buffered: 0,
+    };
+  },
+  mounted() {
+    let vid = this.$refs.player;
+    vid.ontimeupdate = () => {
+      this.percentage = (vid.currentTime / vid.duration) * 100;
+    };
+    vid.addEventListener("progress", () => {
+      this.buffered = (vid.buffered.end(0) / vid.duration) * 100;
+    });
+  },
   methods: {
     handleFullscreenChange() {
       if (document.fullscreenElement === this.$refs.player) {

NUXT/layouts/default.vue

@@ -193,14 +193,15 @@ export default {
 }
 
 .scroll-y {
-  overflow-y: scroll !important; /* has to be scroll, not auto */
+  overflow-y: scroll !important;
+  /* has to be scroll, not auto */
   overflow-x: hidden !important;
   -webkit-overflow-scrolling: touch !important;
 }
 html,
 body {
   background: var(--v-background-base);
-  overflow: hidden;
+  /* overflow-x: hidden; */
 }
 
 p,

NUXT/pages/home.vue

@@ -34,9 +34,9 @@ export default {
     },
   },
 
-  data: {
+  data: () => ({
     loading: false,
-  },
+  }),
 
   methods: {
     paginate() {

NUXT/pages/index.vue

@@ -60,7 +60,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style>
 .container {
   display: block;
   position: absolute;
@@ -104,4 +104,26 @@ export default {
     animation: fadein 0.5s ease 1 forwards;
   }
 }
+
+/* page transition */
+.slide-up-enter-active,
+.slide-up-leave-active,
+.slide-down-enter-active,
+.slide-down-leave-active {
+  transition-duration: 0.1s;
+  transition-property: opacity, transform;
+  /* overflow: hidden; */
+}
+
+.slide-up-enter,
+.slide-down-leave-active {
+  opacity: 0;
+  transform: translateY(3rem);
+}
+
+.slide-up-leave-active,
+.slide-down-enter {
+  opacity: 0;
+  transform: translateY(-1rem);
+}
 </style>

NUXT/pages/watch.vue

@@ -1,51 +1,59 @@
 <template>
-  <div class="background" id="watch-body">
-    <div class="player-container">
-      <!--   Stock Player   -->
-      <videoPlayer
-        :vid-src="vidSrc"
-        ref="player"
-        v-if="useBetaPlayer !== 'true'"
-      />
-
+  <div class="background">
+    <v-btn text style="position: fixed; z-index: 69420" to="home">
+      <v-icon>mdi-chevron-down</v-icon>
+    </v-btn>
     <!--   VueTube Player V1   -->
     <vuetubePlayer :sources="sources" v-if="useBetaPlayer === 'true'" />
-    </div>
-    <div class="content-container overflow-y-auto">
-      <v-card v-if="loaded" class="ml-2 mr-2 background" flat>
+    <!--   Stock Player   -->
+    <videoPlayer
+      id="player"
+      ref="player"
+      v-touch="{ down: () => $router.push('/home') }"
+      style="position: sticky; top: 0; z-index: 42069"
+      class="background"
+      :vid-src="vidSrc"
+    />
+
+    <!---->
+    <v-card v-if="loaded" class="background rounded-0" flat>
+      <div
+        v-ripple
+        class="d-flex justify-space-between align-start px-3 pt-3"
+        @click="showMore = !showMore"
+      >
+        <div class="d-flex flex-column">
           <v-card-title
-          class="mt-2"
-          style="
-            padding-top: 0;
-            padding-bottom: 0;
-            font-size: 0.95rem;
-            line-height: 1rem;
-          "
+            class="pa-0"
+            style="font-size: 0.95rem; line-height: 1.15rem"
             v-text="video.title"
             v-emoji
           />
-        <v-card-text>
-          <div style="margin-bottom: 1rem">
+          <v-card-text
+            style="font-size: 0.75rem"
+            class="background--text pa-0"
+            :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+          >
             <template
               v-for="text in video.metadata.contents.find(
                 (content) => content.slimVideoInformationRenderer
               ).slimVideoInformationRenderer.collapsedSubtitle.runs"
-              >{{ text.text }}</template
-            >
+              >{{ text.text }}
+            </template>
+          </v-card-text>
         </div>
-
-          <!--   Scrolling Div For Interactions   --->
-          <div style="display: flex; margin-bottom: 1em">
-            <v-list-item
+        <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">
+        <v-btn
           v-for="(item, index) in interactions"
           :key="index"
-              style="padding: 0; flex: 0 0 20%"
-            >
-              <v-btn
           text
-                class="vertical-button"
-                style="padding: 0; margin: 0"
+          fab
+          class="vertical-button ma-1"
           elevation="0"
+          style="width: 4.2rem !important; height: 4.2rem !important"
           :disabled="item.disabled"
           @click="callMethodByName(item.actionName)"
         >
@@ -56,17 +64,9 @@
             v-text="item.value || item.name"
           />
         </v-btn>
-            </v-list-item>
-
-            <v-spacer />
-            <v-btn text @click="showMore = !showMore">
-              <v-icon v-if="showMore">mdi-chevron-up</v-icon>
-              <v-icon v-else>mdi-chevron-down</v-icon>
-            </v-btn>
-          </div>
         <!--   End Scrolling Div For Interactions   --->
         <!-- <hr /> -->
-        </v-card-text>
+      </div>
       <!-- <v-bottom-sheet
           v-model="showMore"
           color="background"
@@ -83,6 +83,7 @@
             />
           </v-sheet>
         </v-bottom-sheet> -->
+
       <!-- <v-bottom-sheet v-model="share" color="background" style="z-index: 9999999">
           <v-sheet style="padding: 1em">
             <div class="scroll-y">
@@ -95,7 +96,10 @@
 
     <!--   Channel Bar   -->
     <div class="channel-container" v-if="loaded">
-        <v-card class="channel-section background" :to="video.channelUrl">
+      <v-card
+        class="channel-section background px-3 rounded-0"
+        :to="video.channelUrl"
+      >
         <div id="details">
           <div class="avatar-link mr-3">
             <v-img class="avatar-thumbnail" :src="video.channelImg" />
@@ -122,7 +126,7 @@
     </div>
 
     <!-- Description -->
-      <div class="description-container" v-if="showMore">
+    <div v-if="showMore">
       <div class="scroll-y ma-4">
         <slim-video-description-renderer
           :render="video.renderedData.description"
@@ -133,7 +137,6 @@
 
     <!-- Comments -->
     <div
-        class="comment-container"
       v-if="loaded && video.commentData"
       @click="showComments = !showComments"
     >
@@ -146,27 +149,15 @@
             <template v-else>{{ text.text }}</template>
           </template>
         </v-text>
-          <v-icon>mdi-unfold-more-horizontal</v-icon>
+        <v-icon v-if="showComments">mdi-unfold-less-horizontal</v-icon>
+        <v-icon v-else>mdi-unfold-more-horizontal</v-icon>
       </v-card>
       <v-divider />
     </div>
 
-      <v-dialog
-        v-model="showComments"
-        fullscreen
-        hide-overlay
-        transition="dialog-bottom-transition"
-      >
-        <v-card>
-          <v-toolbar dark color="background">
-            <v-btn icon dark @click="showComments = false">
-              <v-icon>mdi-close</v-icon>
-            </v-btn>
-            <v-toolbar-title class="font-weight-bold">Comments</v-toolbar-title>
-          </v-toolbar>
+    <v-card v-if="showComments">
       <v-subheader>Hello World</v-subheader>
     </v-card>
-      </v-dialog>
 
     <!-- Related Videos -->
     <div class="loaders" v-if="!loaded">
@@ -177,7 +168,6 @@
     </div>
     <item-section-renderer v-else :render="recommends" />
   </div>
-  </div>
 </template>
 
 <script>
@@ -197,7 +187,12 @@ export default {
     vuetubePlayer,
     ItemSectionRenderer,
   },
-
+  layout: "empty",
+  // transition(to) { // TODO: fix layout switching
+  //   return to.name == "watch"
+  //     ? { name: "slide-up", mode: "" }
+  //     : { name: "slide-down", mode: "" };
+  // },
   data: function () {
     return this.initializeState();
   },
@@ -313,7 +308,6 @@ export default {
           fmt: 243,
           rtn: Math.floor(Date.now() / 1000) - this.startTime,
           rt: Math.floor(Date.now() / 1000) - this.startTime,
-          fmt: 243,
           muted: 0,
         },
         this.playbackTracking.videostatsPlaybackUrl.baseUrl
@@ -375,17 +369,6 @@ export default {
 </script>
 
 <style>
-#watch-body {
-  height: 100%;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.content-container {
-  height: 100%;
-}
-
 .vertical-button span.v-btn__content {
   flex-direction: column;
   justify-content: space-around;