feat: comment bar

NUXT/pages/watch.vue

@@ -118,22 +118,32 @@
     </v-card>
     <v-divider />
 
-    <!-- Comments -->
-    <!-- <v-card flat class="background comment-button" v-if="loaded">
-      <v-text
-        >{{ video.commentData.title }} •
-        {{ video.commentData.commentsCount }}</v-text
-      >
-    </v-card>
-    <v-divider /> -->
-
     <!-- Description -->
     <div v-if="showMore" class="scroll-y ml-4 mr-4">
       <slim-video-description-renderer
         :render="video.renderedData.description"
       />
+      <v-divider />
     </div>
 
+    <!-- Comments -->
+    <v-card
+      flat
+      class="background comment-renderer"
+      v-if="loaded && video.commentData"
+    >
+      <v-text class="comment-count keep-spaces">
+        <template v-for="text in video.commentData.headerText.runs">
+          <template v-if="text.bold">
+            <strong :key="text.text">{{ text.text }}</strong>
+          </template>
+          <template v-else>{{ text.text }}</template>
+        </template>
+      </v-text>
+      <v-icon>mdi-unfold-more-horizontal</v-icon>
+    </v-card>
+    <v-divider />
+
     <!-- Related Videos -->
     <div class="loaders" v-if="!loaded">
       <v-skeleton-loader
@@ -330,13 +340,14 @@ export default {
 }
 
 .channel-section,
-.comment-button {
+.comment-renderer {
   display: flex;
   align-items: center;
   padding: 12px;
 }
 
-.channel-section #details {
+.channel-section #details,
+.comment-renderer .comment-count {
   flex-grow: 1;
   display: flex;
   align-items: center;
@@ -358,4 +369,8 @@ export default {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.keep-spaces {
+  white-space: pre-wrap;
+}
 </style>

NUXT/plugins/innertube.js

@@ -285,7 +285,7 @@ class Innertube {
     ).slimVideoMetadataSectionRenderer;
 
     const recommendations = columnUI?.contents.find(
-      (contents) => contents?.itemSectionRenderer?.targetId == "watch-next-feed"
+      (content) => content?.itemSectionRenderer?.targetId == "watch-next-feed"
     ).itemSectionRenderer;
 
     const ownerData = vidMetadata.contents.find(
@@ -338,15 +338,14 @@ class Innertube {
             .token,
       },
       engagementPanels: responseNext.engagementPanels,
-      commentData: columnUI.contents.find(
-        (content) =>
-          content.itemSectionRenderer?.contents.commentsEntryPointHeaderRenderer
-      )?.itemSectionRenderer.contents.commentsEntryPointHeaderRenderer,
+      commentData: columnUI.contents
+        .find((content) => content.itemSectionRenderer?.contents)
+        ?.itemSectionRenderer.contents.find(
+          (content) => content.commentsEntryPointHeaderRenderer
+        )?.commentsEntryPointHeaderRenderer,
       playbackTracking: responseInfo.playbackTracking,
     };
 
-    console.log(vidData);
-
     return vidData;
   }