alpha player > beta player😎

NUXT/components/Comments/commentThreadRenderer.vue

@@ -5,13 +5,18 @@
     class="comment-thread px-3"
     @click="$emit('showReplies', comment)"
   >
-    <a
-      :href="
-        this.$rendererUtils.getNavigationEndpoints(
-          commentRenderer.authorEndpoint
+    <v-btn
+      fab
+      text
+      to="/channel"
+      class="avatar-link mr-4"
+      style="height: 3rem; width: 3rem"
+      @click.prevent="
+        $store.dispatch(
+          'channel/fetchChannel',
+          $rendererUtils.getNavigationEndpoints(commentRenderer.authorEndpoint)
         )
       "
-      class="avatar-link pr-2"
     >
       <v-img
         class="avatar-thumbnail"
@@ -21,21 +26,25 @@
           ].url
         "
       />
-    </a>
+    </v-btn>
     <div class="comment-content">
-      <div class="comment-content--header subtitle-2 mb-2">
+      <div
+        class="comment-content--header background--text"
+        :class="$vuetify.theme.dark ? 'text--lighten-5' : 'text--darken-4'"
+        style="font-size: 0.8rem !important"
+      >
         <div
-          class="author-badge-name mr-1"
+          class="author-badge-name mr-2"
           :class="
             commentRenderer.authorIsChannelOwner
               ? $vuetify.theme.dark
-                ? 'owner background lighten-2'
-                : 'owner background darken-2'
+                ? 'owner primary--text background lighten-2'
+                : 'owner primary--text background darken-2'
               : ''
           "
         >
           <div class="author-name--wrapper">
-            <span class="font-weight-bold author-name mr-1" v-emoji>
+            <span class="author-name mr-1" v-emoji>
               {{ commentRenderer.authorText.simpleText }}
             </span>
           </div>
@@ -50,23 +59,24 @@
             <sponsor-comment-badge-renderer :metadata="badge" :key="index" />
           </template>
         </div>
-        <span
-          :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
-          class="background--text comment-timestamp ml-2"
-        >
+        &middot;
+        <span class="comment-timestamp ml-2">
           {{ commentRenderer.publishedTimeText.runs[0].text }}
         </span>
       </div>
       <collapsable-text
         :lines="3"
-        :expandText="
+        :expand-text="
           commentRenderer.expandButton.buttonRenderer.text.runs[0].text
         "
-        :collapseText="
+        :collapse-text="
           commentRenderer.collapseButton.buttonRenderer.text.runs[0].text
         "
       >
-        <yt-text-formatter :textRuns="commentRenderer.contentText.runs">
+        <yt-text-formatter
+          style="font-size: 0.9rem"
+          :text-runs="commentRenderer.contentText.runs"
+        >
         </yt-text-formatter>
       </collapsable-text>
       <div class="toolbar mt-2">
@@ -75,17 +85,17 @@
             <v-icon small>mdi-thumb-up-outline</v-icon>
             <span
               v-if="commentRenderer.voteCount"
-              v-text="commentRenderer.voteCount.simpleText"
               class="like-count caption"
+              v-text="commentRenderer.voteCount.simpleText"
             ></span>
             <v-icon class="ml-2" small>mdi-thumb-down-outline</v-icon>
           </div>
         </v-btn-toggle>
-        <div class="toolbar--item ml-2" v-if="commentRenderer.replyCount">
+        <div class="toolbar--item ml-6" v-if="commentRenderer.replyCount">
           <v-icon small>mdi-comment-outline</v-icon>
           <span
-            v-text="commentRenderer.replyCount"
             class="like-count caption"
+            v-text="commentRenderer.replyCount"
           ></span>
         </div>
       </div>
@@ -106,7 +116,6 @@
   padding: 10px 0;
 
   .avatar-thumbnail {
-    margin-right: 0.5rem;
     border-radius: 50%;
     width: 48px;
     height: 48px;
@@ -152,6 +161,7 @@
 .owner {
   border-radius: 1em;
   padding: 0 0.3em 0 0.6em;
+  font-weight: bold;
 }
 
 .toolbar--button::v-deep.v-btn--active .v-btn__content {

NUXT/components/Player/controls.vue

@@ -1,95 +1,116 @@
 <template>
   <div class="controls" @click="toggleControls()">
-    <div class="controlsWrap" ref="controlsWrap">
-
-      <div  class="centerVideoControls">
-        <v-btn @click="togglePlaying()" text style="height: 5em; width: 5em;">
-          <v-icon size="5em" v-text="playing ? 'mdi-pause' : 'mdi-play' " ref="pausePlayIndicator" />
+    <div ref="controlsWrap" class="controlsWrap">
+      <div class="centerVideoControls">
+        <v-btn
+          text
+          style="height: 5em; width: 5em"
+          color="white"
+          @click="togglePlaying()"
+        >
+          <v-icon
+            ref="pausePlayIndicator"
+            size="5rem"
+            v-text="playing ? 'mdi-pause' : 'mdi-play'"
+          />
         </v-btn>
       </div>
 
-      <div class="bottomVideoControls">
-        {{ watched }} <span style="color: #999;">/ {{ $vuetube.humanTime(video.duration) }}</span>
+      <div class="bottomVideoControls white--text">
+        <div class="pl-4">
+          {{ watched }}
+          <span style="color: #999">
+            / {{ $vuetube.humanTime(video.duration) }}
+          </span>
+        </div>
+        <!-- <v-slider
+          id="slider"
+          v-model="video.currentTime"
+          :max="video.duration"
+          style="margin-bottom: -2rem !important"
+        /> -->
       </div>
-
     </div>
-
   </div>
 </template>
 
-<style scoped>
-  .centerVideoControls {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  .bottomVideoControls {
-    position: absolute;
-    width: 100%;
-    bottom: 0;
-  }
-
-  .pausePlay {
-    min-height: 5em;
-    min-width: 5em;
-  }
-
-  .controls {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-  }
-
-  .controlsWrap {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.5);
-  }
-</style>
-
 <script>
-  export default {
-    props: ["video"],
+export default {
+  props: ["video"],
 
-    data() {
-      return {
-        playing: true,
-        controls: true,
+  data() {
+    return {
+      playing: true,
+      controls: true,
 
-        watched: 0,
+      watched: 0,
+    };
+  },
+
+  mounted() {
+    console.log("videovideovideo");
+    console.log(this.video);
+    this.video.ontimeupdate = () => {
+      console.log(this.video.currentTime);
+      this.watched = this.$vuetube.humanTime(this.video.currentTime);
+    };
+  },
+
+  methods: {
+    togglePlaying() {
+      if (this.video.paused) {
+        this.video.play();
+        this.playing = true;
+      } else {
+        this.video.pause();
+        this.playing = false;
       }
+      this.toggleControls(); // Prevent Screen From Closing
     },
 
-    mounted() {
-      this.video.ontimeupdate = () => {
-        console.log(this.video.currentTime)
-        this.watched = this.$vuetube.humanTime(this.video.currentTime);
-      };
+    toggleControls() {
+      const setControls = this.controls ? "none" : "block";
+      this.$refs.controlsWrap.style.display = setControls;
+      this.controls = !this.controls;
     },
-
-    methods: {
-      togglePlaying() {
-        if (this.video.paused) {
-          this.video.play()
-          this.playing = true;
-        } else {
-          this.video.pause()
-          this.playing = false;
-        };
-        this.toggleControls(); // Prevent Screen From Closing
-      },
-
-      toggleControls() {
-        const setControls = this.controls ? 'none' : 'block';
-        this.$refs.controlsWrap.style.display = setControls;
-        this.controls = !this.controls;
-      }
-
-    }
-  }
-
+  },
+};
 </script>
+
+<style scoped>
+#slider * {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+.centerVideoControls {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.bottomVideoControls {
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+}
+
+.pausePlay {
+  min-height: 5em;
+  min-width: 5em;
+}
+
+.controls {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+}
+
+.controlsWrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+}
+</style>

NUXT/components/Player/index.vue

@@ -1,16 +1,20 @@
 <template>
-  <div style="position: relative;">
+  <div style="position: relative">
     <video
       ref="player"
       autoplay
       :src="vidSrc"
       width="100%"
-      style="max-height: 50vh; display: block"
+      style="max-height: 50vh; display: block; overflow: hidden !important"
+      :style="{
+        borderRadius: $store.state.tweaks.roundWatch
+          ? `${$store.state.tweaks.roundTweak / 4}rem`
+          : '0',
+      }"
       @webkitfullscreenchange="handleFullscreenChange"
     />
 
-
-    <seekbar :video=$refs.player v-if="$refs.player" />
+    <seekbar :video="$refs.player" v-if="$refs.player" />
     <controls v-if="$refs.player" :video="$refs.player" />
 
     <!-- <v-slider v-model="value" step="0"></v-slider> -->
@@ -18,22 +22,22 @@
 </template>
 
 <script>
-import seekbar from '~/components/Player/seekbar.vue';
-import controls from '~/components/Player/controls.vue';
+import seekbar from "~/components/Player/seekbar.vue";
+import controls from "~/components/Player/controls.vue";
 
 export default {
-  props: ["sources"],
   components: {
     seekbar,
-    controls
+    controls,
   },
+  props: ["sources"],
   data() {
     return {
       vidSrc: "",
     };
   },
   mounted() {
-    this.vidSrc = this.sources[this.sources.length-1].url;
+    this.vidSrc = this.sources[this.sources.length - 1].url;
   },
   methods: {
     handleFullscreenChange() {

NUXT/components/Player/legacy.vue

@@ -1,21 +1,175 @@
 <template>
-  <div>
+  <div class="pb-2" style="position: relative">
     <video
       ref="player"
-      controls
       autoplay
-      :src="vidSrc"
+      controls
       width="100%"
-      style="max-height: 50vh; display: block"
+      :src="vidSrc"
+      style="outline: 1px solid red"
+      :style="{
+        borderRadius: $store.state.tweaks.roundWatch
+          ? `${$store.state.tweaks.roundTweak}rem`
+          : '0',
+      }"
       @webkitfullscreenchange="handleFullscreenChange"
     />
-    <!-- <v-slider v-model="value" step="0"></v-slider> -->
+
+    <!-- <div
+      v-if="$refs.player"
+      class="background overflow-hidden"
+      :style="{
+        borderRadius: $store.state.tweaks.roundWatch
+          ? `${$store.state.tweaks.roundTweak}rem !important`
+          : '0',
+      }"
+      style="width: 100%; position: relative; height: 100%"
+    > -->
+
+    <!-- <v-btn
+      text
+      tile
+      class="debug"
+      style="position: absolute; top: 0; left: 0; width: 50%; height: 100%"
+    >
+      <v-icon>mdi-rewind</v-icon>
+    </v-btn>
+
+    <v-btn
+      text
+      tile
+      class="debug"
+      style="position: absolute; top: 0; left: 50%; width: 50%; height: 100%"
+    >
+      <v-icon>mdi-fast-forward</v-icon>
+    </v-btn>
+
+    <v-btn
+      text
+      class="debug"
+      style="position: absolute; top: 1rem; left: 1rem; border-radius: 2rem"
+      to="home"
+      disabled
+    >
+      <v-icon>mdi-chevron-down</v-icon>
+    </v-btn>
+
+    <v-btn
+      text
+      class="debug"
+      style="position: absolute; top: 1rem; right: 1rem; border-radius: 2rem"
+      to="home"
+    >
+      <v-icon>mdi-close</v-icon>
+    </v-btn>
+
+    <v-btn
+      v-if="$refs.player"
+      fab
+      text
+      style="
+        height: 5rem;
+        width: 5rem;
+        position: absolute;
+        top: calc(50% - 2.5rem);
+        left: calc(50% - 2.5rem);
+      "
+      class="debug"
+      color="white"
+      @click="$refs.player.paused ? $refs.player.play() : $refs.player.pause()"
+    >
+      <v-icon
+        ref="pausePlayIndicator"
+        size="5rem"
+        v-text="$refs.player.paused ? 'mdi-play' : 'mdi-pause'"
+      />
+    </v-btn>
+
+    <div
+      v-if="$vuetify"
+      class="debug px-4 rounded-xl"
+      style="position: absolute; bottom: 2rem; left: 1rem"
+    >
+      {{ watched }}
+      <span style="color: #999"> / {{ total }} </span>
+    </div>
+
+    <v-btn
+      text
+      class="debug"
+      style="
+        position: absolute;
+        bottom: 2rem;
+        right: 1rem;
+        border-radius: 0 2rem 2rem 0;
+      "
+    >
+      HD
+    </v-btn>
+    <v-btn
+      text
+      class="debug"
+      style="
+        position: absolute;
+        bottom: 2rem;
+        right: 5rem;
+        border-radius: 2rem 0 0 2rem;
+      "
+    >
+      1X
+    </v-btn>
+-->
+    <v-progress-linear
+      active
+      style="position: absolute; bottom: 0.75rem; left: 0; width: 100%"
+      background-color="primary"
+      background-opacity="0.5"
+      :buffer-value="buffered"
+      color="primary"
+      height="3"
+      query
+      :value="percent"
+    />
+    <!-- </div> -->
+    <!-- <v-slider
+      style="position: absolute; bottom: -1rem; left: 0; width: 100%"
+      :value="progress"
+      :max="duration"
+    /> -->
   </div>
 </template>
 
 <script>
 export default {
   props: ["vidSrc"],
+  data() {
+    return {
+      percent: 0,
+      progress: 0,
+      buffered: 0,
+      duration: 0,
+      watched: 0,
+      total: 0,
+    };
+  },
+  mounted() {
+    let vid = this.$refs.player;
+    vid.addEventListener("loadeddata", (e) => {
+      //Video should now be loaded but we can add a second check
+      if (vid.readyState >= 3) {
+        vid.ontimeupdate = () => {
+          this.duration = vid.duration;
+          this.progress = vid.currentTime;
+          this.percent = (vid.currentTime / vid.duration) * 100;
+          this.watched = this.$vuetube.humanTime(vid.currentTime);
+          this.total = this.$vuetube.humanTime(vid.duration);
+        };
+        vid.addEventListener("progress", () => {
+          this.buffered = (vid.buffered.end(0) / vid.duration) * 100;
+        });
+      }
+    });
+  },
   methods: {
     handleFullscreenChange() {
       if (document.fullscreenElement === this.$refs.player) {
@@ -26,10 +180,6 @@ export default {
         this.$vuetube.navigationBar.show();
       }
     },
-
-    getPlayer() {
-      return this.$refs.player;
-    },
   },
 };
 </script>

NUXT/components/Player/seekbar.vue

@@ -1,23 +1,16 @@
 <template>
-  <div>
-
-
-    <v-progress-linear
-      active
-      background-color="primary"
-      background-opacity="0.5"
-      :buffer-value="buffered"
-      color="primary"
-      height="3"
-      query
-      :value="percentage"
-    />
-
-
-  </div>
+  <v-progress-linear
+    active
+    background-color="primary"
+    background-opacity="0.5"
+    :buffer-value="buffered"
+    color="primary"
+    height="3"
+    query
+    :value="percentage"
+  />
 </template>
 
-
 <script>
 export default {
   props: ["video"],
@@ -25,8 +18,8 @@ export default {
   data() {
     return {
       percentage: 0,
-      buffered: 0
-    }
+      buffered: 0,
+    };
   },
 
   mounted() {
@@ -36,7 +29,6 @@ export default {
     this.video.addEventListener("progress", () => {
       this.buffered = (this.video.buffered.end(0) / this.video.duration) * 100;
     });
-  }
-
-}
+  },
+};
 </script>

NUXT/components/UtilRenderers/baseVideoRenderer.vue

@@ -53,8 +53,8 @@
         </span>
 
         <div
-          class="background--text text--lighten-5 caption"
-          :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+          class="background--text caption"
+          :class="$vuetify.theme.dark ? 'text--lighten-5' : 'text--darken-4'"
           v-text="bottomText"
         />
       </v-card-text>

NUXT/components/playlistCard.vue

@@ -2,6 +2,7 @@
   <v-card
     v-ripple
     class="background d-flex flex-row overflow-hidden mb-4 mx-4"
+    style="height: 6rem !important"
     :class="
       $store.state.tweaks.roundThumb && $store.state.tweaks.roundTweak > 0
         ? $vuetify.theme.dark
@@ -21,7 +22,7 @@
       src="/dev.svg"
       class="background"
       style="position: relative; max-width: 8rem !important"
-      :class="$vuetify.theme.dark ? 'lighten-2' : 'darken-2'"
+      :class="$vuetify.theme.dark ? 'lighten-3' : 'darken-3'"
       :style="{
         borderRadius: $store.state.tweaks.roundThumb
           ? `${$store.state.tweaks.roundTweak / 4}rem`
@@ -43,11 +44,11 @@
         <v-icon>mdi-playlist-play</v-icon>
       </div>
     </v-img>
-    <div class="pa-4" v-emoji>
+    <div class="pa-4" v-emoji style="font-size: 0.75rem !important">
       <b>Work in Progress</b>
 
       <div
-        class="background--text caption"
+        class="background--text caption mt-2"
         :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
       >
         Bottom Text <br />
@@ -60,17 +61,19 @@
         text
         tile
         elevation="0"
-        style="width: 50px !important; height: 50px !important"
+        class="flex-grow-1"
+        style="width: 2rem !important"
       >
-        <v-icon>mdi-share-outline</v-icon>
+        <v-icon>mdi-playlist-plus</v-icon>
       </v-btn>
       <v-btn
         text
         tile
         elevation="0"
-        style="width: 50px !important; height: 50px !important"
+        class="flex-grow-1"
+        style="width: 2rem !important"
       >
-        <v-icon>mdi-plus-box-multiple-outline</v-icon>
+        <v-icon>mdi-share-outline</v-icon>
       </v-btn>
     </div>
   </v-card>

NUXT/components/topNavigation.vue

@@ -23,13 +23,13 @@
       solo
       dense
       flat
+      autofocus
       label="Search"
       style="margin-top: 7px"
       :background-color="
         $vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'
       "
       @input="$emit('text-changed', text)"
-      @
       @keyup.enter="$emit('search-btn', text)"
     />
 

NUXT/layouts/default.vue

@@ -237,6 +237,9 @@ export default {
 .v-input__slot {
   margin: 0 !important;
 }
+.v-slider {
+  margin: 0 !important;
+}
 
 .border-primary {
   border: 2px solid var(--v-primary-base) !important;
@@ -245,6 +248,9 @@ export default {
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
 }
+.debug {
+  outline: 1px solid red;
+}
 
 .v-card--reveal {
   bottom: 0;

NUXT/pages/library.vue

@@ -1,6 +1,11 @@
 <template>
   <div>
-    <h4 class="ml-7 mb-2">Local Playlists</h4>
+    <h4
+      class="ml-7 mb-2 background--text"
+      :class="$vuetify.theme.dark ? 'text--lighten-3' : 'text--darken-3'"
+    >
+      Local Playlists
+    </h4>
     <playlist-card />
   </div>
 </template>

NUXT/pages/settings.vue

@@ -25,20 +25,42 @@
         {{ item.name }}
       </v-btn>
     </v-list-item>
-
-    <!--   Dev Mode Open   -->
-    <v-btn text class="entry" @click="dev()" v-if="!devmode" />
-
-    <v-btn
-      text
-      class="entry text-left text-capitalize"
-      style="margin: 0 0.75em 0 0.75em"
-      to="/mods/developer"
-      v-if="devmode"
+    <v-list-item
+      :style="{
+        padding:
+          $store.state.tweaks.roundTweak > 0
+            ? '0 1rem !important'
+            : '0rem !important',
+      }"
     >
-      <v-icon size="30px" class="icon">mdi-database-edit</v-icon>
-      {{ devmodebuttonname }}
-    </v-btn>
+      <!--   Dev Mode Open   -->
+      <v-btn
+        v-if="!devmode"
+        text
+        class="entry"
+        :style="{
+          borderRadius: `${$store.state.tweaks.roundTweak / 2}rem`,
+          paddingLeft:
+            $store.state.tweaks.roundTweak > 0 ? '' : '1.5rem !important',
+        }"
+        @click="dev()"
+      />
+
+      <v-btn
+        v-if="devmode"
+        text
+        class="entry text-left text-capitalize"
+        to="/mods/developer"
+        :style="{
+          borderRadius: `${$store.state.tweaks.roundTweak / 2}rem`,
+          paddingLeft:
+            $store.state.tweaks.roundTweak > 0 ? '' : '1.5rem !important',
+        }"
+      >
+        <v-icon size="30px" class="icon">mdi-database-edit</v-icon>
+        {{ devmodebuttonname }}
+      </v-btn>
+    </v-list-item>
     <!--   End Dev Mode   -->
   </div>
 </template>

NUXT/pages/watch.vue

@@ -1,13 +1,10 @@
 <template>
   <div class="background" id="watch-body">
     <div id="player-container">
-      <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' && sources.length > 0"
+        :sources="sources"
       />
 
       <!--   Stock Player   -->
@@ -16,14 +13,7 @@
         id="player"
         ref="player"
         v-touch="{ down: () => $router.push('/home') }"
-        class="background"
         :vid-src="vidSrc"
-        style="overflow: hidden !important"
-        :style="{
-          borderRadius: $store.state.tweaks.roundWatch
-            ? `${$store.state.tweaks.roundTweak / 4}rem`
-            : '0',
-        }"
       />
     </div>
 
@@ -67,7 +57,7 @@
           <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-4">
+        <div class="d-flex pl-2">
           <v-btn
             v-for="(item, index) in interactions"
             :key="index"
@@ -453,11 +443,22 @@ export default {
           },
           {
             name: "Save",
-            // icon: "mdi-playlist-plus",
             icon: "mdi-plus-box-multiple-outline",
             actionName: "enqueue",
             disabled: true,
           },
+          {
+            name: "Quality",
+            icon: "mdi-high-definition",
+            actionName: "quality",
+            disabled: false,
+          },
+          {
+            name: "Speed",
+            icon: "mdi-speedometer",
+            actionName: "speed",
+            disabled: false,
+          },
         ],
         showMore: false,
         showComments: false,

NUXT/plugins/vuetube.js

@@ -149,7 +149,7 @@ const module = {
     }
     while (returntext.startsWith(":00")) { returntext = returntext.substring(3); } // Remove Prepending 0s (eg. 00:00:00:01:00)
     if (returntext.startsWith(":0")) { returntext = returntext.substring(2); } else { returntext = returntext.substring(1); } // Prevent Time Starting With 0 (eg. 01:00)
-    console.log("Human Time:", returntext);
+    // console.log("Human Time:", returntext);
     return returntext;
   },
   //---   End Convert Time To Human Readable String   ---//

NUXT/store/channel/index.js

@@ -23,7 +23,9 @@ export const actions = {
     state.loading = true;
     console.log(channelUrl);
     const channelRequest =
-      channelUrl.includes("/c/") || channelUrl.includes("/channel/")
+      channelUrl.includes("/c/") ||
+      channelUrl.includes("/user/") ||
+      channelUrl.includes("/channel/")
         ? `https://youtube.com/${channelUrl}`
         : `https://youtube.com/channel/${channelUrl}`;
     this.$youtube