feat(Emoji): make emoji's bigger and better (#649)

assets/styles/base.less

@@ -278,11 +278,35 @@ strong {
   animation-timing-function: linear; 
 }
 
+.bounce {
+  animation-name: bounce;
+  animation-duration: 2000ms;
+  animation-iteration-count: infinite;
+}
+
 @keyframes spin {
   from {
       transform:rotate(0deg);
   }
   to {
       transform:rotate(360deg);
   }
+}
+
+
+@keyframes bounce {
+	0% {
+    font-size: 10pt;
+	}
+	50% {
+    font-size: 56pt;
+	}
+
+	70% {
+    font-size: 37pt;
+	}
+
+	100% {
+    font-size: 42pt;
+	}
 }

components/ui/Chat/Embeds/EmbeddedLinkContent/EmbeddedLinkContent.less

@@ -1,9 +1,6 @@
 @import '../VideoPlayer/VideoPlayer.less';
 
 
-.iframe-video-container {
-    padding-bottom: 5px;
-}
 .iframe-video {
   max-width: 540px;
   min-width: 200px;

components/views/chat/message/Message.html

@@ -29,7 +29,7 @@
       :editMessage="editMessage"
       :message="message"
     />
-    <VueMarkdown v-if="!messageEdit && message.type === 'text'" :source="message.payload" class="markdown" />
+    <VueMarkdown v-if="!messageEdit && message.type === 'text'" :source="wrapEmoji(message.payload)" :class="`markdown ${containsOnlyEmoji(message.payload) ? 'bigmoji' : ''}`" />
     <UiChatImage v-else-if="message.type === 'image'" :source="message.payload.url" alt="" />
     <!-- Only for video types we can't embed directly without doing something sketchy, like sending it to a server somewhere to extract the HTML5 video-->
     <UiChatEmbedsEmbeddedLinkContent

components/views/chat/message/Message.less

@@ -42,6 +42,8 @@
     }
   }
   .markdown {
+    display: inline-flex;
+    align-items: center;
     strong {
       color: @bright-text;
     }
@@ -62,4 +64,14 @@
     width: 192px;
     height: 192px;
   }
+  .emoji {
+    font-size: 15pt;
+  }
+  .bigmoji {
+    .emoji {
+      font-size: 36pt;
+      animation-name: bounce;
+      animation-duration: 500ms;
+    }
+  }
 }

components/views/chat/message/Message.vue

@@ -96,6 +96,24 @@ export default Vue.extend({
     },
   },
   methods: {
+    /**
+     * @method wrapEmoji
+     * @description Wraps emojis in spans with the emoji class
+     * @param str String to wrap emojis within
+     */
+    wrapEmoji(str: string): string {
+      return str
+        .replace(this.$Config.regex.emojiWrapper, emoji => `<span class="emoji">${emoji}</span>`)
+    },
+    /**
+     * @method containsOnlyEmoji
+     * @description Check wether or not a string only contains an emoji
+     * @param str String to check against
+     */
+    containsOnlyEmoji(str: string): boolean {
+      return str
+        .match(this.$Config.regex.isEmoji) === null
+    },
     testFunc() {
       this.$Logger.log('Message Context', 'Test func')
     },

config.ts

@@ -98,5 +98,9 @@ export const Config = {
     image: '^.*.(apng|avif|gif|jpg|jpeg|jfif|pjpeg|pjp|png|svg|webp)$',
     // Regex to check if string is only blank space
     blankSpace: '^[\\s| ]+$',
+    // Regex to check if string contains only emoji's. Note: doesn't yet support emoji modifiers
+    isEmoji: /\w*[{Emoji_Presentation}\u200d]+/gu,
+    // Regex to wrap emoji's in spans. Note: Doesn't yet support emoji modifiers
+    emojiWrapper: /[\p{Emoji_Presentation}\u200d]+/gu,
   },
 }