diff --git a/src/components/common/CustomEmoji.module.scss b/src/components/common/CustomEmoji.module.scss index 48aeb85b2..9de6f2a0e 100644 --- a/src/components/common/CustomEmoji.module.scss +++ b/src/components/common/CustomEmoji.module.scss @@ -30,11 +30,6 @@ border-radius: 0 !important; user-select: none !important; - - :global(canvas) { - width: 100% !important; - height: 100% !important; - } } .highlightCatch { diff --git a/src/components/common/FullNameTitle.tsx b/src/components/common/FullNameTitle.tsx index 9438d729d..833a8bca3 100644 --- a/src/components/common/FullNameTitle.tsx +++ b/src/components/common/FullNameTitle.tsx @@ -24,6 +24,7 @@ type OwnProps = { noVerified?: boolean; noFake?: boolean; withEmojiStatus?: boolean; + emojiStatusSize?: number; isSavedMessages?: boolean; noLoopLimit?: boolean; onEmojiStatusClick?: NoneToVoidFunction; @@ -36,6 +37,7 @@ const FullNameTitle: FC = ({ noVerified, noFake, withEmojiStatus, + emojiStatusSize, isSavedMessages, noLoopLimit, onEmojiStatusClick, @@ -63,6 +65,7 @@ const FullNameTitle: FC = ({ {withEmojiStatus && emojiStatus && ( = ({ withFullInfo, withUpdatingStatus, withVideoAvatar, + emojiStatusSize, noStatusOrTyping, noRtl, user, @@ -141,7 +143,12 @@ const PrivateChatInfo: FC = ({ animationLevel={animationLevel} />
- + {(status || (!isSavedMessages && !noStatusOrTyping)) && renderStatusOrTyping()}
diff --git a/src/components/common/ProfileInfo.tsx b/src/components/common/ProfileInfo.tsx index 87e36ec56..165280b19 100644 --- a/src/components/common/ProfileInfo.tsx +++ b/src/components/common/ProfileInfo.tsx @@ -47,6 +47,8 @@ type StateProps = } & Pick; +const EMOJI_STATUS_SIZE = 24; + const ProfileInfo: FC = ({ forceShowSelf, canPlayVideo, @@ -241,6 +243,7 @@ const ProfileInfo: FC = ({ = ({ withMediaViewer withUpdatingStatus withVideoAvatar={isReady} + emojiStatusSize={EMOJI_STATUS_SIZE} noRtl /> ) : ( diff --git a/src/lib/rlottie/RLottie.ts b/src/lib/rlottie/RLottie.ts index ea6859779..9e1d1661c 100644 --- a/src/lib/rlottie/RLottie.ts +++ b/src/lib/rlottie/RLottie.ts @@ -26,6 +26,7 @@ type Frame = const MAX_WORKERS = 4; const HIGH_PRIORITY_QUALITY = IS_SINGLE_COLUMN_LAYOUT ? 0.75 : 1; const LOW_PRIORITY_QUALITY = IS_ANDROID ? 0.5 : 0.75; +const LOW_PRIORITY_QUALITY_SIZE_THRESHOLD = 24; const HIGH_PRIORITY_CACHE_MODULO = IS_SAFARI ? 2 : 4; const LOW_PRIORITY_CACHE_MODULO = 0; @@ -209,8 +210,7 @@ class RLottie { } = containerInfo; if (!canvas.dataset.isJustCleaned || canvas.dataset.isJustCleaned === 'false') { - const { isLowPriority, quality = isLowPriority ? LOW_PRIORITY_QUALITY : HIGH_PRIORITY_QUALITY } = this.params; - const sizeFactor = Math.max(DPR * quality, 1); + const sizeFactor = this.calcSizeFactor(); ensureCanvasSize(canvas, sizeFactor); ctx.clearRect(0, 0, canvas.width, canvas.height); canvas.dataset.isJustCleaned = 'true'; @@ -239,10 +239,9 @@ class RLottie { onLoad?: NoneToVoidFunction, coords?: Params['coords'], ) { - const { isLowPriority, quality = isLowPriority ? LOW_PRIORITY_QUALITY : HIGH_PRIORITY_QUALITY } = this.params; + const sizeFactor = this.calcSizeFactor(); + let imgSize: number; - // Reduced quality only looks acceptable on high DPR screens - const sizeFactor = Math.max(DPR * quality, 1); if (container instanceof HTMLDivElement) { if (!(container.parentNode instanceof HTMLElement)) { @@ -313,6 +312,20 @@ class RLottie { } } + private calcSizeFactor() { + const { + isLowPriority, + size, + // Reduced quality only looks acceptable on big enough images + quality = isLowPriority && (!size || size > LOW_PRIORITY_QUALITY_SIZE_THRESHOLD) + ? LOW_PRIORITY_QUALITY + : HIGH_PRIORITY_QUALITY, + } = this.params; + + // Reduced quality only looks acceptable on high DPR screens + return Math.max(DPR * quality, 1); + } + private destroy() { this.isDestroyed = true; this.pause();