From adbc331eb43fdc16f2325756131dfb709b16b831 Mon Sep 17 00:00:00 2001
From: DouglasKosvoski <douglas.contactpro@gmail.com>
Date: Tue, 16 Jul 2024 18:15:22 -0300
Subject: [PATCH 1/2] feat: disable copy when there are no text

---
 .../MessageActions/MessageActions.vue         | 238 ------------------
 1 file changed, 238 deletions(-)
 delete mode 100644 src/lib/Room/RoomMessage/MessageActions/MessageActions.vue

diff --git a/src/lib/Room/RoomMessage/MessageActions/MessageActions.vue b/src/lib/Room/RoomMessage/MessageActions/MessageActions.vue
deleted file mode 100644
index 0ed95261..00000000
--- a/src/lib/Room/RoomMessage/MessageActions/MessageActions.vue
+++ /dev/null
@@ -1,238 +0,0 @@
-<template>
-  <div class="vac-message-actions-wrapper" :style="{ display: message.deleted ? 'none' : '' }">
-    <div
-      class="vac-options-container"
-      :style="{
-        display: hoverAudioProgress || !messageHover ? 'none' : 'initial',
-        width:
-          filteredMessageActions.length && showReactionEmojis ? '70px' : '45px'
-      }"
-    >
-      <transition-group name="vac-slide-left" tag="span">
-        <div
-          v-if="isMessageActions || isMessageReactions"
-          key="1"
-          class="vac-blur-container"
-          :class="{
-            'vac-options-me': message.senderId === currentUserId
-          }"
-        />
-
-        <div
-          v-if="isMessageActions"
-          ref="actionIcon"
-          key="2"
-          class="vac-svg-button vac-message-options"
-          @click="openOptions"
-        >
-          <slot :name="'dropdown-icon_' + message._id">
-            <svg-icon name="dropdown" param="message" />
-          </slot>
-        </div>
-
-        <div v-if="isMessageReactions" key="3" v-click-outside="closeEmoji">
-          <slot
-            name="emoji-picker"
-            v-bind="{ emojiOpened }"
-            :add-emoji="sendMessageReaction"
-          >
-            <emoji-picker-container
-              class="vac-message-emojis"
-              :style="{ right: isMessageActions ? '30px' : '5px' }"
-              :emoji-opened="emojiOpened"
-              :emoji-reaction="true"
-              :position-right="message.senderId === currentUserId"
-              :message-id="message._id"
-              :emoji-data-source="emojiDataSource"
-              @add-emoji="sendMessageReaction"
-              @open-emoji="openEmoji"
-            >
-              <template v-for="(idx, name) in $slots" #[name]="data">
-                <slot :name="name" v-bind="data" />
-              </template>
-            </emoji-picker-container>
-          </slot>
-        </div>
-      </transition-group>
-    </div>
-
-    <transition
-      v-if="filteredMessageActions.length"
-      :name="
-        message.senderId === currentUserId
-          ? 'vac-slide-left'
-          : 'vac-slide-right'
-      "
-    >
-      <div
-        v-if="optionsOpened"
-        ref="menuOptions"
-        v-click-outside="closeOptions"
-        class="vac-menu-options"
-        :class="{
-          'vac-menu-left': message.senderId !== currentUserId
-        }"
-        :style="{ top: `${menuOptionsTop}px` }"
-      >
-        <div class="vac-menu-list">
-          <div v-for="action in filteredMessageActions" :key="action.name">
-            <div class="vac-menu-item" :class="{ 'vac-action-disabled': action?.disableIfContentIsNull && message.content === '' }" @click="messageActionHandler(action)">
-              {{ action.title }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<script>
-import vClickOutside from '../../../../utils/on-click-outside'
-
-import SvgIcon from '../../../../components/SvgIcon/SvgIcon'
-import EmojiPickerContainer from '../../../../components/EmojiPickerContainer/EmojiPickerContainer'
-import { findParentBySelector } from '../../../../utils/element-selector'
-
-export default {
-  name: 'MessageActions',
-  components: { SvgIcon, EmojiPickerContainer },
-
-  directives: {
-    clickOutside: vClickOutside
-  },
-
-  props: {
-    currentUserId: { type: [String, Number], required: true },
-    message: { type: Object, required: true },
-    messageActions: { type: Array, required: true },
-    showReactionEmojis: { type: Boolean, required: true },
-    messageHover: { type: Boolean, required: true },
-    hoverMessageId: { type: [String, Number], default: null },
-    hoverAudioProgress: { type: Boolean, required: true },
-    emojiDataSource: { type: String, default: undefined }
-  },
-
-  emits: [
-    'update-emoji-opened',
-    'update-options-opened',
-    'update-message-hover',
-    'message-action-handler',
-    'send-message-reaction'
-  ],
-
-  data() {
-    return {
-      menuOptionsTop: 0,
-      optionsOpened: false,
-      optionsClosing: false,
-      emojiOpened: false
-    }
-  },
-
-  computed: {
-    isMessageActions() {
-      return (
-        this.filteredMessageActions.length &&
-        this.messageHover &&
-        !this.message.deleted &&
-        !this.message.disableActions &&
-        !this.hoverAudioProgress
-      )
-    },
-    isMessageReactions() {
-      return (
-        this.showReactionEmojis &&
-        this.messageHover &&
-        !this.message.deleted &&
-        !this.message.disableReactions &&
-        !this.hoverAudioProgress
-      )
-    },
-    filteredMessageActions() {
-      const actionsFilteredByUser = this.message.senderId === this.currentUserId
-        ? this.messageActions
-        : this.messageActions.filter(message => !message.onlyMe)
-
-      const messageType = this.getMessageType()
-
-      return actionsFilteredByUser.filter(action => !action?.type || action.type === messageType)
-    }
-  },
-
-  watch: {
-    emojiOpened(val) {
-      this.$emit('update-emoji-opened', val)
-      if (val) this.optionsOpened = false
-    },
-    optionsOpened(val) {
-      this.$emit('update-options-opened', val)
-    }
-  },
-
-  methods: {
-    openOptions() {
-      if (this.optionsClosing) return
-
-      this.optionsOpened = !this.optionsOpened
-      if (!this.optionsOpened) return
-
-      setTimeout(() => {
-        const roomFooterRef = findParentBySelector(this.$el, '#room-footer')
-
-        if (
-          !roomFooterRef ||
-          !this.$refs.menuOptions ||
-          !this.$refs.actionIcon
-        ) {
-          return
-        }
-
-        const menuOptionsTop =
-          this.$refs.menuOptions.getBoundingClientRect().height
-
-        const actionIconTop = this.$refs.actionIcon.getBoundingClientRect().top
-        const roomFooterTop = roomFooterRef.getBoundingClientRect().top
-
-        const optionsTopPosition =
-          roomFooterTop - actionIconTop > menuOptionsTop + 50
-
-        if (optionsTopPosition) this.menuOptionsTop = 30
-        else this.menuOptionsTop = -menuOptionsTop
-      })
-    },
-    closeOptions() {
-      this.optionsOpened = false
-      this.optionsClosing = true
-      this.updateMessageHover()
-      setTimeout(() => (this.optionsClosing = false), 100)
-    },
-    openEmoji() {
-      this.emojiOpened = !this.emojiOpened
-    },
-    closeEmoji() {
-      this.emojiOpened = false
-      this.updateMessageHover()
-    },
-    updateMessageHover() {
-      if (this.hoverMessageId !== this.message._id) {
-        this.$emit('update-message-hover', false)
-      }
-    },
-    messageActionHandler(action) {
-      this.closeOptions()
-      this.$emit('message-action-handler', action)
-    },
-    sendMessageReaction(emoji, reaction) {
-      this.$emit('send-message-reaction', { emoji, reaction })
-      this.closeEmoji()
-    },
-    getMessageType() {
-      if (this.message.files?.length === 0) {
-        return null
-      }
-
-      return 'file'
-    }
-  }
-}
-</script>

From 5bba3c719965d1b8c85acac0d7d5ba11a098126f Mon Sep 17 00:00:00 2001
From: DouglasKosvoski <douglas.contactpro@gmail.com>
Date: Fri, 9 Aug 2024 14:17:24 -0300
Subject: [PATCH 2/2] feat: increase font size for emojis only message

---
 src/components/FormatMessage/FormatMessage.scss |  5 +++++
 src/components/FormatMessage/FormatMessage.vue  |  8 ++++++++
 src/utils/emoji/index.js                        | 14 ++++++++++++++
 3 files changed, 27 insertions(+)
 create mode 100644 src/utils/emoji/index.js

diff --git a/src/components/FormatMessage/FormatMessage.scss b/src/components/FormatMessage/FormatMessage.scss
index 1889ca6d..4dcfa3bf 100644
--- a/src/components/FormatMessage/FormatMessage.scss
+++ b/src/components/FormatMessage/FormatMessage.scss
@@ -3,6 +3,11 @@
     display: inline;
   }
 
+  .vac-emoji-message {
+    font-size: 3rem;
+    letter-spacing: 4px;
+  }
+
   .vac-icon-deleted {
     height: 14px;
     width: 14px;
diff --git a/src/components/FormatMessage/FormatMessage.vue b/src/components/FormatMessage/FormatMessage.vue
index 312dd642..3625a82f 100644
--- a/src/components/FormatMessage/FormatMessage.vue
+++ b/src/components/FormatMessage/FormatMessage.vue
@@ -7,6 +7,7 @@
       <div
         v-if="message.markdown"
         class="markdown"
+        :class="{ 'vac-emoji-message': containsOnlyEmojis(message) }"
         @click="openTag"
         v-html="message.value"
       />
@@ -69,6 +70,7 @@ import SvgIcon from '../SvgIcon/SvgIcon'
 
 import markdown from '../../utils/markdown'
 import { IMAGE_TYPES } from '../../utils/constants'
+import { containsOnlyEmojis } from '../../utils/emoji'
 
 export default {
   name: 'FormatMessage',
@@ -126,6 +128,12 @@ export default {
   },
 
   methods: {
+    containsOnlyEmojis(message) {
+      const div = document.createElement('div')
+      div.innerHTML = message.value
+      const text = div.textContent || div.innerText || ''
+      return text.length && containsOnlyEmojis(text)
+    },
     checkType(message, type) {
       return message.types && message.types.indexOf(type) !== -1
     },
diff --git a/src/utils/emoji/index.js b/src/utils/emoji/index.js
new file mode 100644
index 00000000..94a4ef69
--- /dev/null
+++ b/src/utils/emoji/index.js
@@ -0,0 +1,14 @@
+export const emojiRegex = /\p{Extended_Pictographic}/ug
+
+export const hasEmoji = text => {
+  return emojiRegex.test(text.toString())
+}
+
+export const extractEmojis = text => {
+  return text.toString().match(emojiRegex)?.join('') || ''
+}
+
+export const containsOnlyEmojis = text => {
+  const emojisOnly = extractEmojis(text)
+  return emojisOnly.length === text.toString().length && hasEmoji(emojisOnly)
+}