channel global state setup

NUXT/pages/channel/_id.vue

@@ -2,14 +2,14 @@
   <div class="d-flex flex-column align-center">
     <v-img
       height="120"
-      :src="banner"
+      :src="$store.state.channel.banner"
       class="background"
       :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
     ></v-img>
     <v-avatar size="60" class="mt-2 primary">
-      <img :src="avatar" />
+      <img :src="$store.state.channel.avatar" />
     </v-avatar>
-    <h2 class="mt-2">{{ title }}</h2>
+    <h2 class="mt-2">{{ $store.state.channel.title }}</h2>
     <v-btn
       :aria-label="subscribeAlt"
       class="mt-2"
@@ -17,67 +17,31 @@
       color="primary"
       style="height: 1rem"
     >
-      {{ subscribe }}
+      {{ $store.state.channel.subscribe }}
     </v-btn>
     <div style="font-size: 0.75rem" class="mt-2">
-      {{ subscribers }} &middot; {{ videos }}
+      {{ $store.state.channel.subscribers }} &middot;
+      {{ $store.state.channel.videos }}
     </div>
-    <div
+    <v-card
-      style="font-size: 0.75rem"
+      flat
-      class="background--text text-center px-4"
+      to="/channel/about?text=AboutDescription"
+      style="
+        font-size: 0.75rem;
+        height: 2rem;
+        text-oveflow: ellipsis;
+        overflow: hidden;
+      "
+      class="background background--text text-center px-4"
       :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
     >
-      {{ descriptionPreview }}
+      {{ $store.state.channel.descriptionPreview }}
       <v-icon
         class="background--text"
         :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
       >
         mdi-chevron-right
       </v-icon>
-    </div>
+    </v-card>
   </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.videos =
-          channel.header.channelMobileHeaderRenderer.channelHeader.elementRenderer.newElement.type.componentType.model.channelHeaderModel.channelProfile.metadata.videosCountText;
-      });
-  },
-};
-</script>

NUXT/pages/channel/about.vue

@@ -1,3 +1,11 @@
 <template>
-  <div></div>
+  <div>
+    <b>Description</b>
+    <p>{{ $store.state.channel.descriptionPreview }}</p>
+    <br />
+    <br />
+    <b>Links</b>
+    <br />
+    <b>More Info</b>
+  </div>
 </template>

NUXT/pages/watch.vue

@@ -133,7 +133,7 @@
                 : 'background darken-1'
               : ''
           "
-          :to="video.channelUrl"
+          to="/channel"
           :style="{
             borderRadius: $store.state.tweaks.roundWatch
               ? `${$store.state.tweaks.roundTweak / 2}rem`
@@ -144,6 +144,7 @@
                 ? '1rem'
                 : '0',
           }"
+          @click="$store.dispatch('channel/fetchChannel', video.channelUrl)"
         >
           <div id="details">
             <div class="avatar-link mr-3">

NUXT/store/channel/index.js

@@ -0,0 +1,46 @@
+export const state = () => ({
+  avatar: null,
+  banner: null,
+  title: null,
+  subscribe: null,
+  subscribeAlt: null,
+  descriptionPreview: null,
+  subscribers: null,
+  videos: null,
+});
+export const actions = {
+  fetchChannel({ state }, channelUrl) {
+    // console.log(
+    //   "%c getChannel ",
+    //   "color: black; font-weight: bold; background: #f00; padding: .5rem .25rem; border-radius: .25rem;"
+    // );
+    // console.log(
+    //   `%c${id}`,
+    //   "color: black; font-weight: bold; background: #0f0; padding: .5rem .25rem; border-radius: .25rem;"
+    // );
+    this.$youtube
+      .getChannel(`https://youtube.com/${channelUrl}`)
+      .then((channel) => {
+        // console.log(channel);
+        state.banner =
+          channel.header.channelMobileHeaderRenderer.channelHeader.elementRenderer.newElement.type.componentType.model.channelHeaderModel.channelBanner.image.sources[0].url;
+        state.avatar =
+          channel.header.channelMobileHeaderRenderer.channelHeader.elementRenderer.newElement.type.componentType.model.channelHeaderModel.channelProfile.avatarData.avatar.image.sources[0].url;
+        state.title =
+          channel.header.channelMobileHeaderRenderer.channelHeader.elementRenderer.newElement.type.componentType.model.channelHeaderModel.channelProfile.title;
+        state.subscribe =
+          channel.header.channelMobileHeaderRenderer.channelHeader.elementRenderer.newElement.type.componentType.model.channelHeaderModel.channelProfile.subscribeButton.subscribeButtonContent.buttonText;
+        state.subscribeAlt =
+          channel.header.channelMobileHeaderRenderer.channelHeader.elementRenderer.newElement.type.componentType.model.channelHeaderModel.channelProfile.subscribeButton.subscribeButtonContent.accessibilityText;
+        state.descriptionPreview =
+          channel.header.channelMobileHeaderRenderer.channelHeader.elementRenderer.newElement.type.componentType.model.channelHeaderModel.channelProfile.descriptionPreview.description;
+        state.subscribers =
+          channel.header.channelMobileHeaderRenderer.channelHeader.elementRenderer.newElement.type.componentType.model.channelHeaderModel.channelProfile.metadata.subscriberCountText;
+        state.videos =
+          channel.header.channelMobileHeaderRenderer.channelHeader.elementRenderer.newElement.type.componentType.model.channelHeaderModel.channelProfile.metadata.videosCountText;
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  },
+};

android/.idea/deploymentTargetDropDown.xml

@@ -12,6 +12,6 @@
         </deviceKey>
       </Target>
     </targetSelectedWithDropDown>
-    <timeTargetWasSelectedWithDropDown value="2022-05-13T01:27:37.098564Z" />
+    <timeTargetWasSelectedWithDropDown value="2022-05-14T02:50:17.689302Z" />
   </component>
 </project>