feat: twemoji complete

NUXT/components/CompactRenderers/compactChannelRenderer.vue

@@ -19,7 +19,7 @@
           "
         />
       </a>
-      <v-card-text class="video-info pt-2">
+      <v-card-text class="video-info pt-2" v-emoji>
         <div
           v-for="title in video.title.runs"
           :key="title.text"

NUXT/components/CompactRenderers/compactVideoRenderer.vue

@@ -42,7 +42,7 @@
           :src="video.channelThumbnail.thumbnails[0].url"
         />
       </a>
-      <v-card-text class="video-info pt-2">
+      <v-card-text class="video-info pt-2" v-emoji>
         <div
           v-for="title in video.title.runs"
           :key="title.text"

NUXT/components/UtilRenderers/slimVideoDescriptionRenderer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="description" v-if="render.descriptionBodyText" ref="description">
+  <div class="description" v-if="render.descriptionBodyText">
     <template v-for="(text, index) in render.descriptionBodyText.runs">
       <template v-if="$rendererUtils.checkInternal(text)">
         <a
@@ -32,7 +32,6 @@
 
 <script>
 import { Browser } from "@capacitor/browser";
-import { parseEmoji } from "~/plugins/utils";
 export default {
   props: ["render"],
 
@@ -44,10 +43,5 @@ export default {
       await this.$router.push(url);
     },
   },
-
-  mounted() {
-    const twemojiParse = parseEmoji(this.$refs.description);
-    if (twemojiParse) this.$refs.description = twemojiParse;
-  },
 };
 </script>

NUXT/components/gridRenderers/gridVideoRenderer.vue

@@ -44,7 +44,7 @@
           :src="video.channelThumbnail.thumbnails[0].url"
         />
       </a>
-      <v-card-text class="video-info pt-2">
+      <v-card-text class="video-info pt-2" v-emoji>
         <div
           v-for="title in video.title.runs"
           :key="title.text"

NUXT/components/gridRenderers/videoWithContextRenderer.vue

@@ -47,7 +47,7 @@
           "
         />
       </a>
-      <v-card-text class="video-info pt-2">
+      <v-card-text class="video-info pt-2" v-emoji>
         <div
           v-for="title in video.headline.runs"
           :key="title.text"

NUXT/layouts/default.vue

@@ -33,6 +33,7 @@
               v-for="(item, index) in response"
               :key="index"
               class="px-0"
+              v-emoji
             >
               <v-btn
                 text

NUXT/pages/watch.vue

@@ -25,6 +25,7 @@
             line-height: 1rem;
           "
           v-text="video.title"
+          v-emoji
         />
         <v-card-text>
           <div style="margin-bottom: 1rem">
@@ -102,7 +103,7 @@
             <div class="avatar-link mr-3">
               <v-img class="avatar-thumbnail" :src="video.channelImg" />
             </div>
-            <div class="channel-byline">
+            <div class="channel-byline" v-emoji>
               <div class="channel-name" v-text="video.channelName" />
               <div
                 class="caption background--text"

NUXT/plugins/constants.js

@@ -12,7 +12,7 @@ const url = {
 const ytApiVal = {
   VERSION: "16.25",
   CLIENTNAME: "ANDROID",
-  VERSION_WEB: "2.20220331.06.00",
+  VERSION_WEB: "2.20220411.09.00",
   CLIENT_WEB: 2,
 };
 

NUXT/plugins/utils.js

@@ -17,10 +17,10 @@ function hexToRgb(hex) {
   var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
   return result
     ? {
-      r: parseInt(result[1], 16),
-      g: parseInt(result[2], 16),
-      b: parseInt(result[3], 16),
-    }
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16),
+      }
     : null;
 }
 
@@ -44,14 +44,18 @@ function getMutationByKey(key, mutations) {
 
 function setHttp(link) {
   if (link.search(/^http[s]?\:\/\//) == -1) {
-    link = 'http://' + link;
+    link = "http://" + link;
   }
   return link;
 }
 
 // Replace inputted html with tweemoji
 function parseEmoji(body) {
-  if (twemoji) return twemoji.parse(body)
+  if (twemoji)
+    return twemoji.parse(body, {
+      folder: "svg",
+      ext: ".svg",
+    });
 }
 
 function linkParser(url) {
@@ -67,7 +71,7 @@ function linkParser(url) {
         result.searchParams.set("v", slug.pathname.split("/")[1]);
       }
     } finally {
-      return result instanceof URL ? result : false
+      return result instanceof URL ? result : false;
     }
   }
 }
@@ -81,4 +85,5 @@ module.exports = {
   getMutationByKey,
   linkParser,
   delay,
+  parseEmoji,
 };

NUXT/plugins/vuetube.js

@@ -3,8 +3,16 @@ import { Http } from "@capacitor-community/http";
 import { StatusBar, Style } from "@capacitor/status-bar";
 import { NavigationBar } from "@hugotomazi/capacitor-navigation-bar";
 import constants from "./constants";
-import { hexToRgb, rgbToHex } from "./utils";
+import { hexToRgb, rgbToHex, parseEmoji } from "./utils";
 import { Haptics, ImpactStyle } from "@capacitor/haptics";
+import Vue from "vue";
+
+Vue.directive("emoji", {
+  inserted: function (el) {
+    const twemojiParse = parseEmoji(el.innerHTML);
+    if (twemojiParse) el.innerHTML = twemojiParse;
+  },
+});
 
 const module = {
   //---   Get GitHub Commits   ---//