channel fetch from search

NUXT/components/CompactRenderers/compactChannelRenderer.vue

@@ -1,5 +1,10 @@
 <template>
-  <v-card class="entry gridVideoRenderer background" to="/channel" flat>
+  <v-card
+    flat
+    to="/channel"
+    class="entry gridVideoRenderer background"
+    @click="$store.dispatch('channel/fetchChannel', video.channelId)"
+  >
     <div id="details">
       <a
         :href="
@@ -35,6 +40,21 @@
   </v-card>
 </template>
 
+<script>
+export default {
+  props: ["video"],
+  methods: {
+    parseBottom(video) {
+      const bottomText = [
+        video.subscriberCountText?.runs[0].text,
+        video.videoCountText?.runs.map((run) => run.text).join(" "),
+      ];
+      return bottomText.join(" · ");
+    },
+  },
+};
+</script>
+
 <style scoped>
 .entry {
   width: 100%; /* Prevent Loading Weirdness */
@@ -72,19 +92,3 @@
   }
 }
 </style>
-
-<script>
-export default {
-  props: ["video"],
-
-  methods: {
-    parseBottom(video) {
-      const bottomText = [
-        video.subscriberCountText?.runs[0].text,
-        video.videoCountText?.runs.map((run) => run.text).join(" "),
-      ];
-      return bottomText.join(" · ");
-    },
-  },
-};
-</script>

NUXT/store/channel/index.js

@@ -10,16 +10,21 @@ export const state = () => ({
 });
 export const actions = {
   fetchChannel({ state }, channelUrl) {
-    // console.log(
+    console.log(
-    //   "%c getChannel ",
+      "%c getChannel ",
-    //   "color: black; font-weight: bold; background: #f00; padding: .5rem .25rem; border-radius: .25rem;"
+      "color: black; font-weight: bold; background: #f00; padding: .5rem .25rem; border-radius: .25rem;"
-    // );
+    );
-    // console.log(
+    console.log(
-    //   `%c${id}`,
+      `%c${channelUrl}`,
-    //   "color: black; font-weight: bold; background: #0f0; padding: .5rem .25rem; border-radius: .25rem;"
+      "color: black; font-weight: bold; background: #0f0; padding: .5rem .25rem; border-radius: .25rem;"
-    // );
+    );
+    // substring removes /channel/ from the url if called from watch page, but keeps string intact if called from search page
     this.$youtube
-      .getChannel(`https://youtube.com/${channelUrl}`)
+      .getChannel(
+        `https://youtube.com/channel/${channelUrl.substring(
+          channelUrl.indexOf("/")
+        )}`
+      )
       .then((channel) => {
         // console.log(channel);
         state.banner =