feat: comments rendering urls and membership emojis

NUXT/components/Comments/commentThreadRenderer.vue

@@ -32,9 +32,8 @@
         </span>
       </div>
       <collapsable-text :lines="4">
-        <template v-for="text in commentRenderer.contentText.runs">{{
-          text.text
-        }}</template>
+        <yt-text-formatter :textRuns="commentRenderer.contentText.runs">
+        </yt-text-formatter>
       </collapsable-text>
     </div>
   </div>
@@ -88,8 +87,10 @@
 
 <script>
 import collapsableText from "~/components/UtilRenderers/collapsableText.vue";
+import YtTextFormatter from "~/components/UtilRenderers/YtTextFormatter.vue";
+
 export default {
-  components: { collapsableText },
+  components: { collapsableText, YtTextFormatter },
   props: ["comment"],
 
   data() {

NUXT/components/UtilRenderers/YtTextFormatter.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="yt-text-formatter" v-emoji>
+    <template v-for="(text, index) in textRuns">
+      <template v-if="$rendererUtils.checkInternal(text)">
+        <a
+          @click="openInternal($rendererUtils.getNavigationEndpoints(text))"
+          :key="index"
+          >{{ text.text }}</a
+        >
+      </template>
+      <template
+        v-else-if="
+          text.navigationEndpoint && text.navigationEndpoint.urlEndpoint
+        "
+      >
+        <a
+          @click="openExternal($rendererUtils.getNavigationEndpoints(text))"
+          :key="index"
+          >{{ text.text }}</a
+        >
+      </template>
+      <template v-else-if="text.emoji">
+        <img
+          :src="
+            text.emoji.image.thumbnails[text.emoji.image.thumbnails.length - 1]
+              .url
+          "
+          :alt="text.text"
+          :key="index"
+          class="emoji"
+          draggable="false"
+        />
+      </template>
+      <template v-else> {{ text.text }} </template>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    textRuns: {
+      type: Array,
+      default: () => [],
+    },
+  },
+};
+</script>

NUXT/components/UtilRenderers/slimVideoDescriptionRenderer.vue

@@ -1,26 +1,7 @@
 <template>
   <div class="description" v-if="render.descriptionBodyText">
-    <template v-for="(text, index) in render.descriptionBodyText.runs">
-      <template v-if="$rendererUtils.checkInternal(text)">
-        <a
-          @click="openInternal($rendererUtils.getNavigationEndpoints(text))"
-          :key="index"
-          >{{ text.text }}</a
-        >
-      </template>
-      <template
-        v-else-if="
-          text.navigationEndpoint && text.navigationEndpoint.urlEndpoint
-        "
-      >
-        <a
-          @click="openExternal($rendererUtils.getNavigationEndpoints(text))"
-          :key="index"
-          >{{ text.text }}</a
-        >
-      </template>
-      <template v-else> {{ text.text }} </template>
-    </template>
+    <yt-text-formatter :textRuns="render.descriptionBodyText.runs">
+    </yt-text-formatter>
   </div>
 </template>
 
@@ -32,9 +13,15 @@
 
 <script>
 import { Browser } from "@capacitor/browser";
+import YtTextFormatter from "~/components/UtilRenderers/YtTextFormatter.vue";
+
 export default {
   props: ["render"],
 
+  components: {
+    YtTextFormatter,
+  },
+
   methods: {
     async openExternal(url) {
       await Browser.open({ url: url });