Accurate message reactions and popups

Author: strayfade

css/backdrop-blur.css

@@ -1,7 +1,7 @@
 .backdrop-blur {
     overflow: hidden;
     z-index: 9;
-    backdrop-filter: blur(0px) brightness(25%);
+    backdrop-filter: blur(25px) brightness(25%);
     opacity: 1;
     transition-duration: 0.25s;
     pointer-events: all;

css/message-reaction.css

@@ -1,34 +1,70 @@
 .message-reaction {
     position: absolute;
-    top: -21px;
+    top: -17.5px;
     border-radius: 30px;
+    border: 1px solid var(--background-0);
     padding: 5px;
-    font-size: 14px;
-    border: 4px solid var(--background-0);
+    font-size: 12px;
     aspect-ratio: 1/1;
     width: 18px;
     text-align: center;
     font-weight: bolder;
-    transform: scale(0%);
+    transform: scale(0);
     transition-duration: 0.5s;
     pointer-events: none;
+    padding-top: 6px;
+    height: 18px;
+    padding-bottom: 4px;
 }
 
 .message-reaction-visible {
     transform: scale(100%);
 }
 
-.message-reaction-sender-color {
+.message-reaction-sender-color,
+.message-reaction-sender-color * {
     background: var(--recipient);
     color: var(--foreground-0);
 }
-.message-reaction-recipient-color {
-    background: var(--accent);  
+.message-reaction-recipient-color,
+.message-reaction-recipient-color * {
+    background: var(--accent);
     color: white;
 }
 .message-reaction-sender {
-    left: -21px;
+    left: -17.5px;
 }
 .message-reaction-recipient {
-    right: -21px;
+    right: -17.5px;
 }
+
+.message-reaction-dot {
+    position: absolute;
+    border-radius: 30px;
+}
+
+
+.message-reaction-sender .message-reaction-dot-1 {
+    width: 35%;
+    height: 35%;
+    bottom: -1px;
+    left: -1px;
+}
+.message-reaction-sender .message-reaction-dot-2 {
+    width: calc(35% / 2);
+    height: calc(35% / 2);
+    bottom: -5px;
+    left: -5px;
+}
+.message-reaction-recipient .message-reaction-dot-1 {
+    width: 35%;
+    height: 35%;
+    bottom: -1px;
+    right: -1px;
+}
+.message-reaction-recipient .message-reaction-dot-2 {
+    width: calc(35% / 2);
+    height: calc(35% / 2);
+    bottom: -5px;
+    right: -5px;
+}

css/reaction-popup.css

@@ -6,7 +6,6 @@
     border-radius: 100px;
     display: flex;
     z-index: 10;
-    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
     opacity: 0;
     transition-duration: 0.5s;
     pointer-events: none;
@@ -27,7 +26,44 @@
     cursor: pointer;
     font-weight: bolder;
 }
-.reaction-popup span:hover, .reaction-popup .reaction-popup-selected {
+.reaction-popup span:hover,
+.reaction-popup .reaction-popup-selected {
     color: white;
     background-color: var(--accent);
 }
+
+.popup-orb-container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+}
+.popup-orb-container-inner {
+    position: relative;
+}
+.popup-orb {
+    border-radius: 100px;
+    position: absolute;
+    background-color: var(--recipient);
+}
+.popup-orb-1 {
+    height: 20px;
+    width: 20px;
+}
+.popup-orb-2 {
+    height: 10px;
+    width: 10px;
+}
+.message-orb-container-recipient .popup-orb-1 {
+    bottom: -10px;
+}
+.message-orb-container-sender .popup-orb-1 {
+    bottom: -10px;
+}
+.message-orb-container-recipient .popup-orb-2 {
+    bottom: -20px
+}
+.message-orb-container-sender .popup-orb-2 {  
+    bottom: -20px;
+}

scripts/iMessage.js

@@ -656,6 +656,31 @@ const CreateMessageBubble = (TypingIndicator = false, MessageJSON = {}, Message
                 CloneMessage.style.right = `${window.visualViewport.width - MessageArea.right - 12}px`
             else
                 CloneMessage.style.left = `${MessageArea.left - 12}px`
+            await new Promise(r => setTimeout(r, 100));
+            CloneMessage.classList.add("message-clone-visible")
+
+            const OrbContainer = document.createElement("div")
+            OrbContainer.className = "popup-orb-container"
+            OrbContainer.classList.add(Sender ? "message-orb-container-sender" : "message-orb-container-recipient")
+            ReactionPopup.appendChild(OrbContainer)
+            const Orb1 = document.createElement("div")
+            Orb1.className = "popup-orb popup-orb-1"
+            OrbContainer.appendChild(Orb1)
+            const Orb2 = document.createElement("div")
+            Orb2.className = "popup-orb popup-orb-2"
+            OrbContainer.appendChild(Orb2)
+            const GetX = () => {
+                let MessageBounds = CloneMessage.getBoundingClientRect();
+                return MessageBounds.right - MessageBounds.left
+            }
+            if (Sender) {
+                Orb1.style.right = `${GetX() - 4}px`
+                Orb2.style.right = `${GetX() + 13}px`
+            }
+            else {
+                Orb1.style.left = `${GetX() - 4}px`
+                Orb2.style.left = `${GetX() + 13}px`
+            }
 
             let CurrentReactions = JSON.parse(MessageContentItem.getAttribute("rawjson")).reactions
             for (let x = 0; x < CurrentReactions.length; x++) {
@@ -1182,7 +1207,14 @@ const ApplyReactions = async (json) => {
                 MessageReactionObject.className = "message-reaction"
                 MessageReactionObject.classList.add(json.sender == 1 ? "message-reaction-sender" : "message-reaction-recipient")
                 MessageReactionObject.classList.add(LastReaction.sender == 0 ? "message-reaction-sender-color" : "message-reaction-recipient-color")
-                MessageReactionObject.textContent = ((text) => {
+                let Dot1 = document.createElement("div")
+                Dot1.className = "message-reaction-dot message-reaction-dot-1"
+                MessageReactionObject.appendChild(Dot1)
+                let Dot2 = document.createElement("div")
+                Dot2.className = "message-reaction-dot message-reaction-dot-2"
+                MessageReactionObject.appendChild(Dot2)
+                let TextContainer = document.createElement("div")
+                TextContainer.textContent = ((text) => {
                     switch (text) {
                         case 2000:
                             return "􀊵";
@@ -1205,6 +1237,7 @@ const ApplyReactions = async (json) => {
                     }
                     return "..."
                 })(LastReaction.reactionType)
+                MessageReactionObject.appendChild(TextContainer)
                 if (json.action != "newReaction") {
                     MessageReactionObject.classList.add("message-reaction-visible")
                 }