feat(wip): comment replies

NUXT/components/Comments/commentThreadRenderer.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="comment-thread" v-if="commentRenderer">
+  <div
+    class="comment-thread"
+    v-if="commentRenderer"
+    @click="$emit('showReplies', comment)"
+  >
     <a
       :href="
         this.$rendererUtils.getNavigationEndpoints(

NUXT/components/Comments/mainCommentRenderer.vue

@@ -22,6 +22,7 @@
           :is="Object.keys(comment)[0]"
           :comment="comment[Object.keys(comment)[0]]"
           @intersect="paginate"
+          @showReplies="openReply"
         ></component>
       </v-list-item>
       <v-divider
@@ -29,6 +30,7 @@
         :key="index"
       ></v-divider>
     </template>
+
     <div class="loading" v-if="loading">
       <v-sheet
         color="background"
@@ -38,6 +40,15 @@
         <v-skeleton-loader type="list-item-avatar-three-line" />
       </v-sheet>
     </div>
+
+    <template v-slot:reveal>
+      <main-comment-reply-renderer
+        v-if="showReply && replyData"
+        v-model="showReply"
+        :parentComment="replyData.parent"
+        :defaultContinuation="replyData.replyContinuation"
+      ></main-comment-reply-renderer>
+    </template>
   </dialog-base>
 </template>
 
@@ -46,6 +57,7 @@ import dialogBase from "~/components/dialogBase.vue";
 import commentsHeaderRenderer from "~/components/Comments/commentsHeaderRenderer.vue";
 import commentThreadRenderer from "~/components/Comments/commentThreadRenderer.vue";
 import continuationItemRenderer from "~/components/observer.vue";
+import mainCommentReplyRenderer from "~/components/Comments/mainCommentReplyRenderer.vue";
 
 export default {
   props: ["defaultContinuation", "commentData", "showComments"],
@@ -60,12 +72,15 @@ export default {
     commentsHeaderRenderer,
     commentThreadRenderer,
     continuationItemRenderer,
+    mainCommentReplyRenderer,
   },
 
   data: () => ({
     loading: true,
     comments: [],
     continuation: null,
+    showReply: false,
+    replyData: {},
   }),
 
   mounted() {
@@ -124,6 +139,11 @@ export default {
 
       return newContinuation;
     },
+
+    openReply(event) {
+      this.showReply = true;
+      this.replyData = { parent: event, replyContinuation: null };
+    },
   },
 };
 </script>

NUXT/components/Comments/mainCommentReplyRenderer.vue

@@ -0,0 +1,46 @@
+<template>
+  <dialog-base>
+    <template v-slot:header>
+      <v-btn icon @click="$emit('changeState', false)">
+        <v-icon>mdi-arrow-back</v-icon>
+      </v-btn>
+      <v-toolbar-title>
+        <strong>Replies</strong>
+      </v-toolbar-title>
+      <v-spacer></v-spacer>
+      <v-btn icon @click="$emit('closeComments')">
+        <v-icon>mdi-close</v-icon>
+      </v-btn>
+    </template>
+    <template>
+      <comment-thread-renderer :comment="parentComment" />
+      <v-divider></v-divider>
+      <template v-for="index in 10">
+        <comment-thread-renderer :comment="parentComment" v-bind:key="index" />
+      </template>
+    </template>
+  </dialog-base>
+</template>
+
+<script>
+import dialogBase from "~/components/dialogBase.vue";
+import commentsHeaderRenderer from "~/components/Comments/commentsHeaderRenderer.vue";
+import commentThreadRenderer from "~/components/Comments/commentThreadRenderer.vue";
+import continuationItemRenderer from "~/components/observer.vue";
+
+export default {
+  props: ["defaultContinuation", "parentComment", "showReplies"],
+
+  model: {
+    prop: "showReplies",
+    event: "changeState",
+  },
+
+  components: {
+    dialogBase,
+    commentsHeaderRenderer,
+    commentThreadRenderer,
+    continuationItemRenderer,
+  },
+};
+</script>

NUXT/components/dialogBase.vue

@@ -9,6 +9,9 @@
     <div class="dialog-body background">
       <slot></slot>
     </div>
+    <expand-x-transition>
+      <slot name="reveal"></slot>
+    </expand-x-transition>
   </v-card>
 </template>
 

NUXT/plugins/innertube.js

@@ -76,7 +76,7 @@ class Innertube {
 
   //--- API Calls ---//
 
-  async browseAsync(action_type, args) {
+  async browseAsync(action_type, args = {}) {
     let data = { context: this.context };
 
     switch (action_type) {
@@ -92,7 +92,7 @@ class Innertube {
         }
       default:
     }
-    data.browseId = { ...data, args };
+    data = { ...data, ...args };
 
     console.log(data);
 
@@ -305,11 +305,9 @@ class Innertube {
       response.data.output?.playabilityStatus?.status == ("ERROR" || undefined)
     )
       throw new Error(
-        `Could not get information for video: ${
-          response.status_code ||
-          response.data.output?.playabilityStatus?.status
-        } - ${
-          response.message || response.data.output?.playabilityStatus?.reason
+        `Could not get information for video: ${response.status_code ||
+        response.data.output?.playabilityStatus?.status
+        } - ${response.message || response.data.output?.playabilityStatus?.reason
         }`
       );
     const responseInfo = response.data.output;