feat: membership and verified comment badges

NUXT/components/Comments/authorCommentBadgeRenderer.vue

@@ -0,0 +1,32 @@
+<template>
+  <div
+    class="author-comment-badge-renderer"
+    v-if="metadata && iconTypeMap.hasOwnProperty(metadata.icon.iconType)"
+  >
+    <v-tooltip top>
+      <template v-slot:activator="{ on, attrs }">
+        <v-icon v-bind="attrs" v-on="on" small>{{
+          iconTypeMap[metadata.icon.iconType]
+        }}</v-icon>
+      </template>
+      <span>{{ metadata.iconTooltip }}</span>
+    </v-tooltip>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    metadata: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  data: () => ({
+    iconTypeMap: {
+      CHECK: "mdi-check-circle",
+      OFFICIAL_ARTIST_BADGE: "mdi-music-note",
+    },
+  }),
+};
+</script>

NUXT/components/Comments/commentThreadRenderer.vue

@@ -18,15 +18,35 @@
       />
     </a>
     <div class="comment-content">
-      <div class="comment-content--header">
+      <div class="comment-content--header subtitle-2">
-        <h3 class="author-name--wrapper">
+        <div class="author-badge-name pr-1">
-          <span class="font-weight-bold subtitle-2 pr-1 author-name" emoji>
+          <div class="author-name--wrapper">
-            {{ commentRenderer.authorText.simpleText }}
+            <span class="font-weight-bold author-name" v-emoji>
-          </span>
+              {{ commentRenderer.authorText.simpleText }}
-        </h3>
+            </span>
+          </div>
+          <template
+            v-for="(badge, index) in commentRenderer.authorCommentBadge"
+          >
+            <author-comment-badge-renderer
+              :metadata="badge"
+              :key="index"
+              class="ml-1"
+            />
+          </template>
+          <template
+            v-for="(badge, index) in commentRenderer.sponsorCommentBadge"
+          >
+            <sponsor-comment-badge-renderer
+              :metadata="badge"
+              :key="index"
+              class="ml-1"
+            />
+          </template>
+        </div>
         <span
           :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
-          class="background--text subtitle-2 comment-timestamp"
+          class="background--text comment-timestamp"
         >
           {{ commentRenderer.publishedTimeText.runs[0].text }}
         </span>
@@ -70,27 +90,39 @@
       display: flex;
       align-items: baseline;
 
-      .author-name--wrapper {
-        min-width: 0;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-      }
-
       .comment-timestamp {
         white-space: nowrap;
       }
     }
   }
 }
+
+.author-badge-name {
+  display: flex;
+  flex-direction: row;
+
+  .author-name--wrapper {
+    min-width: 0;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+}
 </style>
 
 <script>
 import collapsableText from "~/components/UtilRenderers/collapsableText.vue";
 import YtTextFormatter from "~/components/UtilRenderers/YtTextFormatter.vue";
+import AuthorCommentBadgeRenderer from "~/components/Comments/authorCommentBadgeRenderer.vue";
+import SponsorCommentBadgeRenderer from "~/components/Comments/sponsorCommentBadgeRenderer.vue";
 
 export default {
-  components: { collapsableText, YtTextFormatter },
+  components: {
+    collapsableText,
+    YtTextFormatter,
+    AuthorCommentBadgeRenderer,
+    SponsorCommentBadgeRenderer,
+  },
   props: ["comment"],
 
   data() {

NUXT/components/Comments/mainCommentRenderer.vue

@@ -10,7 +10,7 @@
         </template>
       </v-toolbar-title>
       <v-spacer></v-spacer>
-      <v-btn icon dark @click="$emit('changeState', false)">
+      <v-btn icon @click="$emit('changeState', false)">
         <v-icon>mdi-close</v-icon>
       </v-btn>
     </template>

NUXT/components/Comments/sponsorCommentBadgeRenderer.vue

@@ -0,0 +1,43 @@
+<template>
+  <div
+    class="author-comment-badge-renderer"
+    v-if="metadata && metadata.customBadge"
+  >
+    <v-tooltip top>
+      <template v-slot:activator="{ on, attrs }">
+        <img
+          v-bind="attrs"
+          v-on="on"
+          class="badge"
+          :src="metadata.customBadge.thumbnails[0].url"
+          :alt="metadata.tooltip"
+        />
+      </template>
+      <span>{{ metadata.tooltip }}</span>
+    </v-tooltip>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    metadata: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+};
+</script>
+
+<style scoped>
+.author-comment-badge-renderer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.badge {
+  display: inline-block;
+  width: 1.25em;
+  height: 1.25em;
+  vertical-align: -0.1em;
+}
+</style>

NUXT/components/UtilRenderers/YtTextFormatter.vue

@@ -19,7 +19,7 @@
           >{{ text.text }}</a
         >
       </template>
-      <template v-else-if="text.emoji">
+      <template v-else-if="text.emoji && text.emoji.isCustomEmoji">
         <img
           :src="
             text.emoji.image.thumbnails[text.emoji.image.thumbnails.length - 1]