some incomplete channel stuff & more

NUXT/components/SectionRenderers/shelfRenderer.vue

@@ -13,12 +13,12 @@
         :render="render.content[Object.keys(render.content)[0]]"
       ></component
     ></v-list-item>
-    <div
+    <!-- <div
       v-if="render.separator && render.separator.hasBottomSeparator"
       class="separator-bottom background"
       :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
       :style="{ height: render.separator.height + 'px' }"
-    ></div>
+    ></div> -->
   </div>
 </template>
 

NUXT/components/UtilRenderers/baseVideoRenderer.vue

@@ -1,17 +1,10 @@
 <template>
   <v-card
-    class="entry videoRenderer background"
+    class="entry videoRenderer background mb-2"
     :to="`/watch?v=${vidId}`"
-    :class="
-      $store.state.tweaks.roundTweak > 0
-        ? $vuetify.theme.dark
-          ? 'lighten-1'
-          : 'darken-1'
-        : ''
-    "
     :style="{
-      borderRadius: `${roundTweak / 2}rem`,
-      margin: $store.state.tweaks.roundTweak > 0 ? '0.5rem 1rem' : '0',
+      borderRadius: `${roundTweak / 2.5}rem`,
+      margin: $store.state.tweaks.roundTweak > 0 ? '1rem' : '0',
     }"
     flat
   >
@@ -19,6 +12,9 @@
       <v-img
         :aspect-ratio="16 / 9"
         :src="$youtube.getThumbnail(vidId, 'max', thumbnails)"
+        :style="{
+          borderRadius: `${roundTweak / 2.5}rem`,
+        }"
       />
       <div
         v-if="thumbnailOverlayText && thumbnailOverlayStyle"

NUXT/components/topNavigation.vue

@@ -3,12 +3,12 @@
     scroll-off-screen
     style="height: 4rem !important; display: flex"
     class="rounded-0 pa-3 topNav background"
-    :style="
+  >
+    <!-- :style="
       $vuetify.theme.dark
         ? 'border-bottom: 1px solid var(--v-background-lighten1) !important;'
         : 'border-bottom: 1px solid var(--v-background-darken1) !important;'
-    "
-  >
+    " -->
     <h3 v-show="!search" class="my-auto ml-4" v-text="page" />
 
     <v-btn
@@ -38,7 +38,7 @@
     <v-spacer v-if="!search" />
 
     <v-btn
-      v-if="!search"
+      v-if="!search && $route.path.includes('/home')"
       v-show="page == 'Home'"
       icon
       tile

NUXT/layouts/default.vue

@@ -9,8 +9,33 @@
       @text-changed="textChanged"
       @scroll-to-top="$refs.pgscroll.scrollTop = 0"
     />
+    <v-tabs
+      v-if="$route.path.includes('/channel')"
+      mobile-breakpoint="0"
+      style="
+        position: fixed;
+        top: calc(4rem + env(safe-area-inset-top));
+        z-index: 696969;
+      "
+      background-color="background"
+      :color="$vuetify.theme.dark ? 'white' : 'black'"
+    >
+      <v-tab
+        v-for="tab in channelTabs"
+        :key="tab.name"
+        :to="tab.to"
+        :v-ripple="false"
+      >
+        {{ tab.name }}
+      </v-tab>
+    </v-tabs>
 
-    <div style="height: 100%; margin-top: 4rem; padding-bottom: 4rem">
+    <div
+      style="height: 100%; padding-bottom: 4rem"
+      :style="{
+        marginTop: $route.path.includes('/channel') ? '7rem' : '4rem',
+      }"
+    >
       <div v-show="!search">
         <!-- class="scrollcontainer" -->
         <!-- style="overflow: hidden; height: calc(100vh - 8rem)" -->
@@ -67,6 +92,14 @@ export default {
   data: () => ({
     search: false,
     response: [],
+    channelTabs: [
+      { name: "Home", to: "/channel" },
+      { name: "Videos", to: "/channel/videos" },
+      { name: "Playlists", to: "/channel/playlists" },
+      { name: "Community", to: "/channel/community" },
+      { name: "Channels", to: "/channel/channels" },
+      { name: "About", to: "/channel/about" },
+    ],
   }),
 
   computed: {
@@ -187,6 +220,12 @@ export default {
 *:focus::before {
   opacity: 0 !important;
 }
+.v-slide-group__prev {
+  display: none !important;
+}
+.v-slide-group__next {
+  display: none !important;
+}
 
 .glassy {
   backdrop-filter: blur(20px);

NUXT/pages/channel/_id.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="d-flex flex-column align-center">
+    <v-img
+      height="120"
+      :src="banner"
+      class="background"
+      :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
+    ></v-img>
+    <v-avatar size="60" class="mt-2 primary">
+      <img :src="avatar" />
+    </v-avatar>
+    <h2 class="mt-2">{{ title }}</h2>
+    <v-btn
+      :aria-label="subscribeAlt"
+      class="mt-2"
+      text
+      color="primary"
+      style="height: 1rem"
+    >
+      {{ subscribe }}
+    </v-btn>
+    <div class="mt-2">{{ subscribers }} &middot; {{ videos }}</div>
+    <div
+      style="font-size: 0.75rem"
+      class="background--text text-center px-4"
+      :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+    >
+      {{ descriptionPreview }}
+      <v-icon>mdi-arrow-right</v-icon>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    channel: null,
+    avatar: null,
+    banner: null,
+    title: null,
+    subscribe: null,
+    subscribeAlt: null,
+    descriptionPreview: null,
+    subscribers: null,
+    videos: null,
+  }),
+  mounted() {
+    console.log(
+      "%c getChannel ",
+      "color: black; font-weight: bold; background: #f00; padding: .5rem .25rem; border-radius: .25rem;"
+    );
+    this.$youtube
+      .getChannel(`https://youtube.com/channel/${this.$route.params.id}`)
+      .then((channel) => {
+        this.channel = channel;
+        console.log(channel);
+        this.banner =
+          channel.header.channelMobileHeaderRenderer.channelHeader.elementRenderer.newElement.type.componentType.model.channelHeaderModel.channelBanner.image.sources[0].url;
+        this.avatar =
+          channel.header.channelMobileHeaderRenderer.channelHeader.elementRenderer.newElement.type.componentType.model.channelHeaderModel.channelProfile.avatarData.avatar.image.sources[0].url;
+        this.title =
+          channel.header.channelMobileHeaderRenderer.channelHeader.elementRenderer.newElement.type.componentType.model.channelHeaderModel.channelProfile.title;
+        this.subscribe =
+          channel.header.channelMobileHeaderRenderer.channelHeader.elementRenderer.newElement.type.componentType.model.channelHeaderModel.channelProfile.subscribeButton.subscribeButtonContent.buttonText;
+        this.subscribeAlt =
+          channel.header.channelMobileHeaderRenderer.channelHeader.elementRenderer.newElement.type.componentType.model.channelHeaderModel.channelProfile.subscribeButton.subscribeButtonContent.accessibilityText;
+        this.descriptionPreview =
+          channel.header.channelMobileHeaderRenderer.channelHeader.elementRenderer.newElement.type.componentType.model.channelHeaderModel.channelProfile.descriptionPreview.description;
+        this.subscribers =
+          channel.header.channelMobileHeaderRenderer.channelHeader.elementRenderer.newElement.type.componentType.model.channelHeaderModel.channelProfile.metadata.subscriberCountText;
+        this.subscribers =
+          channel.header.channelMobileHeaderRenderer.channelHeader.elementRenderer.newElement.type.componentType.model.channelHeaderModel.channelProfile.metadata.videosCountText;
+      });
+  },
+};
+</script>

NUXT/pages/channel/_notice_.vue

@@ -1,7 +0,0 @@
-<template>
-    <center>
-        <img src="/channel_notice.svg" style="width: 80%; margin: 2em;" />
-        <h1>Channel Pages are still being worked on</h1><br><br>
-        <v-btn to="/home">Return Home</v-btn>
-    </center>
-</template>

NUXT/pages/channel/about.vue

@@ -0,0 +1,3 @@
+<template>
+  <div></div>
+</template>

NUXT/pages/channel/channels.vue

@@ -0,0 +1,3 @@
+<template>
+  <div></div>
+</template>

NUXT/pages/channel/community.vue

@@ -0,0 +1,3 @@
+<template>
+  <div></div>
+</template>

NUXT/pages/channel/playlists.vue

@@ -0,0 +1,3 @@
+<template>
+  <div></div>
+</template>

NUXT/pages/channel/videos.vue

@@ -0,0 +1,3 @@
+<template>
+  <div></div>
+</template>

NUXT/pages/index.vue

@@ -55,11 +55,10 @@ export default {
     );
 
     await theming;
-    this.progressMsg = "Communicating with the API";
     await this.$youtube.getAPI();
-    this.progressMsg = "Launching startup tasks";
+    this.progressMsg = "Launching";
     await this.$vuetube.launchBackHandling();
-    this.progressMsg = "Navigating to the home page";
+    this.progressMsg = "Navigating";
 
     this.$router.replace(`/${localStorage.getItem("startPage") || "home"}`); // Prevent user from navigating back to the splash screen
   },

NUXT/pages/settings.vue

@@ -17,18 +17,6 @@
   </div>
 </template>
 
-<style scoped>
-.entry {
-  width: 100%;
-  font-size: 1.2em;
-  justify-content: left !important;
-  padding: 1.5em 0.5em 1.5em 0.5em !important;
-}
-.icon {
-  margin-right: 0.5em;
-}
-</style>
-
 <script>
 export default {
   data() {
@@ -50,7 +38,12 @@ export default {
           to: "/mods/tweaks",
         },
         { name: "Startup Options", icon: "mdi-restart", to: "/mods/startup" },
-        { name: "Plugins", icon: "mdi-puzzle", to: "", to: "/mods/plugins", disabled: true },
+        {
+          name: "Plugins",
+          icon: "mdi-puzzle",
+          to: "/mods/plugins",
+          disabled: true,
+        },
         {
           name: "Updates",
           icon: "mdi-cloud-download-outline",
@@ -71,3 +64,15 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.entry {
+  width: 100%;
+  font-size: 1.2em;
+  justify-content: left !important;
+  padding: 1.5em 0.5em 1.5em 0.5em !important;
+}
+.icon {
+  margin-right: 0.5em;
+}
+</style>

NUXT/pages/watch.vue

@@ -48,7 +48,7 @@
                 $vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'
               "
             >
-              <div style="margin-bottom: 1rem">
+              <div>
                 <template
                   v-for="text in video.metadata.contents.find(
                     (content) => content.slimVideoInformationRenderer
@@ -131,10 +131,7 @@
               />
             </div>
           </div>
-          <div
-            class="channel-buttons"
-            style="color: rgb(204, 0, 0); text-transform: uppercase"
-          >
+          <div class="primary--text" style="text-transform: uppercase">
             subscribe
           </div>
         </v-card>