Switch to Emoji 14, fall back to images on all older systems (#1773)

package-lock.json

@@ -13,7 +13,7 @@
         "async-mutex": "^0.3.2",
         "big-integer": "github:painor/BigInteger.js",
         "croppie": "^2.6.5",
-        "emoji-data-ios": "github:korenskoy/emoji-data-ios#162c821",
+        "emoji-data-ios": "git+https://github.com/korenskoy/emoji-data-ios#54443d1938ec1c157e74d2a95e9103dcb3f5c6dd",
         "events": "^3.3.0",
         "idb-keyval": "^6.1.0",
         "opus-recorder": "github:Ajaxy/opus-recorder",
@@ -5789,8 +5789,8 @@
       }
     },
     "node_modules/emoji-data-ios": {
-      "version": "0.3.0",
+      "version": "0.4.0",
-      "resolved": "git+ssh://git@github.com/korenskoy/emoji-data-ios.git#162c821573e065f240202854292786e4e6774a7c",
+      "resolved": "git+ssh://git@github.com/korenskoy/emoji-data-ios.git#54443d1938ec1c157e74d2a95e9103dcb3f5c6dd",
       "license": "MIT"
     },
     "node_modules/emoji-regex": {
@@ -19842,8 +19842,8 @@
       "dev": true
     },
     "emoji-data-ios": {
-      "version": "git+ssh://git@github.com/korenskoy/emoji-data-ios.git#162c821573e065f240202854292786e4e6774a7c",
+      "version": "git+ssh://git@github.com/korenskoy/emoji-data-ios.git#54443d1938ec1c157e74d2a95e9103dcb3f5c6dd",
-      "from": "emoji-data-ios@github:korenskoy/emoji-data-ios#162c821"
+      "from": "emoji-data-ios@git+https://github.com/korenskoy/emoji-data-ios#54443d1938ec1c157e74d2a95e9103dcb3f5c6dd"
     },
     "emoji-regex": {
       "version": "9.2.2",

package.json

@@ -20,7 +20,7 @@
   },
   "engines": {
     "node": "^16.13",
-    "npm": "^8.1"
+    "npm": "^8.5.2"
   },
   "husky": {
     "hooks": {
@@ -103,7 +103,7 @@
     "async-mutex": "^0.3.2",
     "big-integer": "github:painor/BigInteger.js",
     "croppie": "^2.6.5",
-    "emoji-data-ios": "github:korenskoy/emoji-data-ios#162c821",
+    "emoji-data-ios": "git+https://github.com/korenskoy/emoji-data-ios#54443d1938ec1c157e74d2a95e9103dcb3f5c6dd",
     "events": "^3.3.0",
     "idb-keyval": "^6.1.0",
     "opus-recorder": "github:Ajaxy/opus-recorder",

src/components/left/main/Chat.scss

@@ -148,7 +148,7 @@
         margin-inline-end: 0.25rem;
       }
 
-      img {
+      .media-preview--image {
         width: 1.25rem;
         height: 1.25rem;
         object-fit: cover;

src/components/left/main/Chat.tsx

@@ -339,7 +339,7 @@ function renderSummary(lang: LangFn, message: ApiMessage, blobUrl?: string, isRo
 
   return (
     <span className="media-preview">
-      <img src={blobUrl} alt="" className={isRoundVideo ? 'round' : undefined} />
+      <img src={blobUrl} alt="" className={buildClassName('media-preview--image', isRoundVideo && 'round')} />
       {getMessageVideo(message) && <i className="icon-play" />}
       {renderMessageSummary(lang, message, true)}
     </span>

src/components/left/search/ChatMessage.scss

@@ -53,7 +53,7 @@
         }
       }
 
-      img {
+      .media-preview--image {
         width: 1.25rem;
         height: 1.25rem;
         object-fit: cover;

src/components/left/search/ChatMessage.tsx

@@ -17,12 +17,14 @@ import {
   getMessageRoundVideo,
 } from '../../../global/helpers';
 import { selectChat, selectUser } from '../../../global/selectors';
+import buildClassName from '../../../util/buildClassName';
 import renderText from '../../common/helpers/renderText';
-import useMedia from '../../../hooks/useMedia';
 import { formatPastTimeShort } from '../../../util/dateFormat';
+import { renderMessageSummary } from '../../common/helpers/renderMessageText';
+
+import useMedia from '../../../hooks/useMedia';
 import useLang, { LangFn } from '../../../hooks/useLang';
 import useSelectWithEnter from '../../../hooks/useSelectWithEnter';
-import { renderMessageSummary } from '../../common/helpers/renderMessageText';
 
 import Avatar from '../../common/Avatar';
 import VerifiedIcon from '../../common/VerifiedIcon';
@@ -115,7 +117,7 @@ function renderSummary(
 
   return (
     <span className="media-preview">
-      <img src={blobUrl} alt="" className={isRoundVideo ? 'round' : undefined} />
+      <img src={blobUrl} alt="" className={buildClassName('media-preview--image', isRoundVideo && 'round')} />
       {getMessageVideo(message) && <i className="icon-play" />}
       {renderMessageSummary(lang, message, true, searchQuery)}
     </span>

src/components/middle/message/_message-content.scss

@@ -646,6 +646,7 @@
     .text-content {
       margin-bottom: 0;
       text-shadow: 1px 1px 0 white, -1px -1px 0 white, -1px 1px 0 white, 1px -1px 0 white;
+      word-break: normal;
       img.emoji {
         filter: drop-shadow(1px 1px 0 white) drop-shadow(-1px 1px 0 white) drop-shadow(1px -1px 0 white)
           drop-shadow(-1px -1px 0 white);

src/styles/index.scss

@@ -251,6 +251,15 @@ div[role="button"] {
   z-index: -1;
 }
 
+.emoji-test-element {
+  opacity: 0;
+  display: inline;
+  white-space: nowrap;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
 @keyframes grow-icon {
   0% {
     transform: scale(0.5);

src/util/environment.ts

@@ -60,7 +60,7 @@ export const IS_VOICE_RECORDING_SUPPORTED = Boolean(
   ),
 );
 export const IS_SMOOTH_SCROLL_SUPPORTED = 'scrollBehavior' in document.documentElement.style;
-export const IS_EMOJI_SUPPORTED = PLATFORM_ENV && (IS_MAC_OS || IS_IOS);
+export const IS_EMOJI_SUPPORTED = PLATFORM_ENV && (IS_MAC_OS || IS_IOS) && isLastEmojiVersionSupported();
 export const IS_SERVICE_WORKER_SUPPORTED = 'serviceWorker' in navigator;
 // TODO Consider failed service worker
 export const IS_PROGRESSIVE_SUPPORTED = IS_SERVICE_WORKER_SUPPORTED;
@@ -94,3 +94,19 @@ export const IS_SCROLL_PATCH_NEEDED = !IS_MAC_OS && !IS_IOS && !IS_ANDROID;
 
 // Smaller area reduces scroll jumps caused by `patchChromiumScroll`
 export const MESSAGE_LIST_SENSITIVE_AREA = IS_SCROLL_PATCH_NEEDED ? 300 : 750;
+
+function isLastEmojiVersionSupported() {
+  const ALLOWABLE_CALCULATION_ERROR_SIZE = 5;
+  const inlineEl = document.createElement('span');
+  inlineEl.classList.add('emoji-test-element');
+  document.body.appendChild(inlineEl);
+
+  inlineEl.innerText = '🫱🏻'; // Emoji from 14.0 version
+  const newEmojiWidth = inlineEl.offsetWidth;
+  inlineEl.innerText = '❤️'; // Emoji from 1.0 version
+  const legacyEmojiWidth = inlineEl.offsetWidth;
+
+  document.body.removeChild(inlineEl);
+
+  return Math.abs(newEmojiWidth - legacyEmojiWidth) < ALLOWABLE_CALCULATION_ERROR_SIZE;
+}