Merge branch 'main' of https://github.com/Frontesque/VueTube into working

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/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/mods/tweaks.vue

@@ -2,11 +2,43 @@
   <div class="d-flex flex-column justify-end" style="min-height: 100%">
     <v-card
       flat
-      class="px-6 ma-4 mt-2 background"
+      class="mb-4 background"
+      style="
+        transition-duration: 0.3s;
+        transition-property: border-radius;
+        overflow: hidden;
+      "
+      :style="{
+        borderRadius: `${roundTweak / 2}rem`,
+        margin: $store.state.tweaks.roundTweak > 0 ? '0 1rem' : '0',
+      }"
+    >
+      <div
+        v-for="item in list"
+        :key="item"
+        @click="list.pop(item)"
+        class="pa-4 mb-1 background text-center rounded-sm"
+        :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
+      >
+        {{ item }}
+      </div>
+      <v-card-title
+        v-ripple
+        class="pa-4 background primary--text text--lighten-2 rounded-sm"
+        :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
+        @click="list.push('x')"
+      >
+        +++++++++++++++++++++++++++++
+      </v-card-title>
+    </v-card>
+    <v-card
+      flat
+      class="px-6 background"
       style="transition-duration: 0.3s; transition-property: border-radius"
       :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
       :style="{
         borderRadius: `${roundTweak / 2}rem`,
+        margin: $store.state.tweaks.roundTweak > 0 ? '0 1rem' : '0',
       }"
     >
       <h3 class="mt-5">Rounded Corners</h3>
@@ -42,6 +74,9 @@
 
 <script>
 export default {
+  data: () => ({
+    list: ["x", "x"],
+  }),
   computed: {
     roundTweak: {
       get() {

NUXT/pages/watch.vue

@@ -1,16 +1,21 @@
 <template>
   <div class="background" id="watch-body">
     <div id="player-container">
-      <!--   Stock Player   -->
-      <videoPlayer
-        :vid-src="vidSrc"
-        ref="player"
-        v-if="useBetaPlayer !== 'true'"
-      />
-
+      <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'" />
+      <!--   Stock Player   -->
+      <videoPlayer
+        id="player"
+        ref="player"
+        v-touch="{ down: () => $router.push('/home') }"
+        class="background"
+        :vid-src="vidSrc"
+      />
     </div>
+
     <div
       v-bind:class="{
         'overflow-y-auto': !showComments,
@@ -18,175 +23,174 @@
       }"
       id="content-container"
     >
-      <v-card v-if="loaded" class="ml-2 mr-2 background" flat>
-        <v-card-title
-          class="mt-2"
-          style="
-            padding-top: 0;
-            padding-bottom: 0;
-            font-size: 0.95rem;
-            line-height: 1rem;
-          "
-          v-text="video.title"
-          v-emoji
-        />
-        <v-card-text>
+      <v-card v-if="loaded" class="ml-2 mr-2 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="pa-0"
+            style="font-size: 0.95rem; line-height: 1.15rem"
+            v-text="video.title"
+            v-emoji
+          />
+          <v-card-text
+            style="font-size: 0.75rem"
+            class="background--text pa-0"
+            :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+          >
           <div style="margin-bottom: 1rem">
             <template
               v-for="text in video.metadata.contents.find(
                 (content) => content.slimVideoInformationRenderer
               ).slimVideoInformationRenderer.collapsedSubtitle.runs"
-              >{{ text.text }}</template
-            >
-          </div>
-
-          <!--   Scrolling Div For Interactions   --->
-          <div style="display: flex; margin-bottom: 1em">
-            <v-list-item
-              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"
-                elevation="0"
-                :disabled="item.disabled"
-                @click="callMethodByName(item.actionName)"
-              >
-                <v-icon v-text="item.icon" />
-                <div
-                  class="mt-2"
-                  style="font-size: 0.66rem"
-                  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>
-        <!-- <v-bottom-sheet
-      v-model="showMore"
-      color="background"
-      style="z-index: 9999999"
-    >
-      <v-sheet style="padding: 12px">
-        <v-btn block @click="showMore = !showMore"
-          ><v-icon>mdi-chevron-down</v-icon></v-btn
-        ><br />
-
-        <slim-video-description-renderer
-          class="scroll-y"
-          :render="video.renderedData.description"
-        />
-      </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">
-          {{ response.renderedData.description }}
+              >{{ text.text }}
+            </template>
+          </v-card-text>
+        </div>
+        <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"
+          text
+          fab
+          class="vertical-button ma-1"
+          elevation="0"
+          style="width: 4.2rem !important; height: 4.2rem !important"
+          :disabled="item.disabled"
+          @click="callMethodByName(item.actionName)"
+        >
+          <v-icon v-text="item.icon" />
+          <div
+            class="mt-2"
+            style="font-size: 0.66rem"
+            v-text="item.value || item.name"
+          />
+        </v-btn>
+        <!--   End Scrolling Div For Interactions   --->
+        <!-- <hr /> -->
+      </div>
+      <!-- <v-bottom-sheet
+          v-model="showMore"
+          color="background"
+          style="z-index: 9999999"
+        >
+          <v-sheet style="padding: 12px">
+            <v-btn block @click="showMore = !showMore"
+              ><v-icon>mdi-chevron-down</v-icon></v-btn
+            ><br />
+
+            <slim-video-description-renderer
+              class="scroll-y"
+              :render="video.renderedData.description"
+            />
+          </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">
+              {{ response.renderedData.description }}
+            </div>
+          </v-sheet>
+        </v-bottom-sheet> -->
+    </v-card>
+    <v-divider />
+
+    <!--   Channel Bar   -->
+    <div class="channel-container" v-if="loaded">
+      <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" />
+          </div>
+          <div class="channel-byline" v-emoji>
+            <div class="channel-name" v-text="video.channelName" />
+            <div
+              class="caption background--text"
+              :class="
+                $vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'
+              "
+              v-text="video.channelSubs"
+            />
+          </div>
+        </div>
+        <div
+          class="channel-buttons"
+          style="color: rgb(204, 0, 0); text-transform: uppercase"
+        >
+          subscribe
         </div>
-      </v-sheet>
-    </v-bottom-sheet> -->
       </v-card>
       <v-divider />
-
-      <!--   Channel Bar   -->
-      <div class="channel-container" v-if="loaded">
-        <v-card class="channel-section background" :to="video.channelUrl">
-          <div id="details">
-            <div class="avatar-link mr-3">
-              <v-img class="avatar-thumbnail" :src="video.channelImg" />
-            </div>
-            <div class="channel-byline" v-emoji>
-              <div class="channel-name" v-text="video.channelName" />
-              <div
-                class="caption background--text"
-                :class="
-                  $vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'
-                "
-                v-text="video.channelSubs"
-              />
-            </div>
-          </div>
-          <div
-            class="channel-buttons"
-            style="color: rgb(204, 0, 0); text-transform: uppercase"
-          >
-            subscribe
-          </div>
-        </v-card>
-        <v-divider />
-      </div>
-
-      <!-- Description -->
-      <div class="description-container" v-if="showMore">
-        <div class="scroll-y ma-4">
-          <slim-video-description-renderer
-            :render="video.renderedData.description"
-          />
-        </div>
-        <v-divider />
-      </div>
-
-      <!-- Comments -->
-      <div class="comment-container" v-if="loaded && video.commentData">
-        <v-btn
-          class="background comment-renderer text-none"
-          @click="showComments = !showComments"
-          block
-          large
-        >
-          <v-text class="comment-count keep-spaces">
-            <template v-for="text in video.commentData.headerText.runs">
-              <template v-if="text.bold">
-                <strong :key="text.text">{{ text.text }}</strong>
-              </template>
-              <template v-else>{{ text.text }}</template>
-            </template>
-          </v-text>
-          <v-icon>mdi-unfold-more-horizontal</v-icon>
-        </v-btn>
-        <v-divider />
-      </div>
-
-      <swipeable-bottom-sheet
-        v-model="showComments"
-        hide-overlay
-        persistent
-        no-click-animation
-        attach="#content-container"
-        v-if="loaded && video.commentData"
-      >
-        <mainCommentRenderer
-          :continuation="video.commentContinuation"
-          :commentData="video.commentData"
-          v-model="showComments"
-        ></mainCommentRenderer>
-      </swipeable-bottom-sheet>
-
-      <!-- <swipeable-bottom-sheet
-        :v-model="showComments"
-        style="z-index: 9999999"
-      ></swipeable-bottom-sheet> -->
-
-      <!-- Related Videos -->
-      <div class="loaders" v-if="!loaded">
-        <v-skeleton-loader
-          type="list-item-two-line, actions, divider, list-item-avatar, divider, list-item-three-line"
-        />
-        <vid-load-renderer :count="5" />
-      </div>
-      <item-section-renderer v-else :render="recommends" />
     </div>
+
+    <!-- Description -->
+    <div v-if="showMore">
+      <div class="scroll-y ma-4">
+        <slim-video-description-renderer
+          :render="video.renderedData.description"
+        />
+      </div>
+      <v-divider />
+    </div>
+
+    <!-- Comments -->
+    <div
+      v-if="loaded && video.commentData"
+      @click="showComments = !showComments"
+    >
+      <v-card flat class="background comment-renderer">
+        <v-text class="comment-count keep-spaces">
+          <template v-for="text in video.commentData.headerText.runs">
+            <template v-if="text.bold">
+              <strong :key="text.text">{{ text.text }}</strong>
+            </template>
+            <template v-else>{{ text.text }}</template>
+          </template>
+        </v-text>
+        <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>
+
+    <swipeable-bottom-sheet
+      v-model="showComments"
+      hide-overlay
+      persistent
+      no-click-animation
+      attach="#content-container"
+      v-if="loaded && video.commentData"
+    >
+      <mainCommentRenderer
+        :continuation="video.commentContinuation"
+        :commentData="video.commentData"
+        v-model="showComments"
+      ></mainCommentRenderer>
+    </swipeable-bottom-sheet>
+
+    <!-- <swipeable-bottom-sheet
+      :v-model="showComments"
+      style="z-index: 9999999"
+    ></swipeable-bottom-sheet> -->
+
+    <!-- Related Videos -->
+    <div class="loaders" v-if="!loaded">
+      <v-skeleton-loader
+        type="list-item-two-line, actions, divider, list-item-avatar, divider, list-item-three-line"
+      />
+      <vid-load-renderer :count="5" />
+    </div>
+    <item-section-renderer v-else :render="recommends" />
   </div>
 </template>
 
@@ -211,7 +215,12 @@ export default {
     SwipeableBottomSheet,
     mainCommentRenderer,
   },
-
+  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();
   },
@@ -329,7 +338,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
@@ -393,6 +401,7 @@ export default {
 <style>
 #watch-body {
   height: 100%;
+  max-height: 100vh;
   overflow: hidden;
   display: flex;
   flex-direction: column;