danog/telegram-tt
1
0
Fork 0
mirror of https://github.com/danog/telegram-tt.git synced 2024-11-26 20:34:44 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-04-01 20:43:00 +02:00
parent 6ec5524fca
commit eacda58152
10 changed files with 44 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
package-lock.json generated
View File

@ -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",
"resolved": "git+ssh://git@github.com/korenskoy/emoji-data-ios.git#162c821573e065f240202854292786e4e6774a7c",
"version": "0.4.0",
"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",
"from": "emoji-data-ios@github:korenskoy/emoji-data-ios#162c821"
"version": "git+ssh://git@github.com/korenskoy/emoji-data-ios.git#54443d1938ec1c157e74d2a95e9103dcb3f5c6dd",
"from": "emoji-data-ios@git+https://github.com/korenskoy/emoji-data-ios#54443d1938ec1c157e74d2a95e9103dcb3f5c6dd"
},
"emoji-regex": {
"version": "9.2.2",

4
package.json
View File

@ -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",

2
src/components/left/main/Chat.scss
View File

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

2
src/components/left/main/Chat.tsx
View File

@ -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>

2
src/components/left/search/ChatMessage.scss
View File

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

8
src/components/left/search/ChatMessage.tsx
View File

@ -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>

1
src/components/middle/message/_message-content.scss
View File

@ -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);

4
src/lib/twemojiRegex.js
View File

File diff suppressed because one or more lines are too long

9
src/styles/index.scss
View File

@ -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);

18
src/util/environment.ts
View File

@ -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;
}