From d9a74063c2c704f0f219ae1a07280da43bb62d86 Mon Sep 17 00:00:00 2001
From: Matt Wisniewski <retropronghorn@gmail.com>
Date: Wed, 15 Dec 2021 19:32:15 -0500
Subject: [PATCH] feat(Emoji): make emoji's bigger and better (#649)

---
 assets/styles/base.less                       | 24 +++++++++++++++++++
 .../EmbeddedLinkContent.less                  |  3 ---
 components/views/chat/message/Message.html    |  2 +-
 components/views/chat/message/Message.less    | 12 ++++++++++
 components/views/chat/message/Message.vue     | 18 ++++++++++++++
 config.ts                                     |  4 ++++
 startup.js                                    |  8 -------
 7 files changed, 59 insertions(+), 12 deletions(-)
 delete mode 100644 startup.js

diff --git a/assets/styles/base.less b/assets/styles/base.less
index 7735eba182..6cb7662642 100644
--- a/assets/styles/base.less
+++ b/assets/styles/base.less
@@ -278,6 +278,12 @@ strong {
   animation-timing-function: linear; 
 }
 
+.bounce {
+  animation-name: bounce;
+  animation-duration: 2000ms;
+  animation-iteration-count: infinite;
+}
+
 @keyframes spin {
   from {
       transform:rotate(0deg);
@@ -285,4 +291,22 @@ strong {
   to {
       transform:rotate(360deg);
   }
+}
+
+
+@keyframes bounce {
+	0% {
+    font-size: 10pt;
+	}
+	50% {
+    font-size: 56pt;
+	}
+
+	70% {
+    font-size: 37pt;
+	}
+
+	100% {
+    font-size: 42pt;
+	}
 }
\ No newline at end of file
diff --git a/components/ui/Chat/Embeds/EmbeddedLinkContent/EmbeddedLinkContent.less b/components/ui/Chat/Embeds/EmbeddedLinkContent/EmbeddedLinkContent.less
index f3836728e8..461c9a6c7f 100644
--- a/components/ui/Chat/Embeds/EmbeddedLinkContent/EmbeddedLinkContent.less
+++ b/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;
diff --git a/components/views/chat/message/Message.html b/components/views/chat/message/Message.html
index ce235f3765..964275dee2 100644
--- a/components/views/chat/message/Message.html
+++ b/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
diff --git a/components/views/chat/message/Message.less b/components/views/chat/message/Message.less
index d3afb66e00..fc1b327a64 100644
--- a/components/views/chat/message/Message.less
+++ b/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;
+    }
+  }
 }
diff --git a/components/views/chat/message/Message.vue b/components/views/chat/message/Message.vue
index 09ac1b781b..9055f2e7a8 100644
--- a/components/views/chat/message/Message.vue
+++ b/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')
     },
diff --git a/config.ts b/config.ts
index 8753e4d2dd..567cd8585c 100644
--- a/config.ts
+++ b/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|&nbsp;]+$',
+    // 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,
   },
 }
diff --git a/startup.js b/startup.js
deleted file mode 100644
index 2f678b6bd8..0000000000
--- a/startup.js
+++ /dev/null
@@ -1,8 +0,0 @@
-const chalk = require('chalk')
-console.log(' ')
-console.log(chalk.bold(chalk.blue('Satellite.im - One')))
-console.log(
-  chalk.yellow(
-    'Pre-release Software, deploying your own instance of this software for production is not recommended.',
-  ),
-)