Custom Emoji: Better quality for small emojis

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 {

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<OwnProps> = ({
   noVerified,
   noFake,
   withEmojiStatus,
+  emojiStatusSize,
   isSavedMessages,
   noLoopLimit,
   onEmojiStatusClick,
@@ -63,6 +65,7 @@ const FullNameTitle: FC<OwnProps> = ({
       {withEmojiStatus && emojiStatus && (
         <CustomEmoji
           documentId={emojiStatus.documentId}
+          size={emojiStatusSize}
           loopLimit={!noLoopLimit ? EMOJI_STATUS_LOOP_LIMIT : undefined}
           observeIntersectionForLoading={observeIntersection}
           onClick={onEmojiStatusClick}

src/components/common/PrivateChatInfo.tsx

@@ -31,6 +31,7 @@ type OwnProps = {
   withFullInfo?: boolean;
   withUpdatingStatus?: boolean;
   withVideoAvatar?: boolean;
+  emojiStatusSize?: number;
   noStatusOrTyping?: boolean;
   noRtl?: boolean;
 };
@@ -56,6 +57,7 @@ const PrivateChatInfo: FC<OwnProps & StateProps> = ({
   withFullInfo,
   withUpdatingStatus,
   withVideoAvatar,
+  emojiStatusSize,
   noStatusOrTyping,
   noRtl,
   user,
@@ -141,7 +143,12 @@ const PrivateChatInfo: FC<OwnProps & StateProps> = ({
         animationLevel={animationLevel}
       />
       <div className="info">
-        <FullNameTitle peer={user} withEmojiStatus isSavedMessages={isSavedMessages} />
+        <FullNameTitle
+          peer={user}
+          withEmojiStatus
+          emojiStatusSize={emojiStatusSize}
+          isSavedMessages={isSavedMessages}
+        />
         {(status || (!isSavedMessages && !noStatusOrTyping)) && renderStatusOrTyping()}
       </div>
     </div>

src/components/common/ProfileInfo.tsx

@@ -47,6 +47,8 @@ type StateProps =
   }
   & Pick<GlobalState, 'connectionState'>;
 
+const EMOJI_STATUS_SIZE = 24;
+
 const ProfileInfo: FC<OwnProps & StateProps> = ({
   forceShowSelf,
   canPlayVideo,
@@ -241,6 +243,7 @@ const ProfileInfo: FC<OwnProps & StateProps> = ({
           <FullNameTitle
             peer={(user || chat)!}
             withEmojiStatus
+            emojiStatusSize={EMOJI_STATUS_SIZE}
             isSavedMessages={isSavedMessages}
             onEmojiStatusClick={handleClickPremium}
             noLoopLimit

src/components/middle/MiddleHeader.tsx

@@ -65,6 +65,7 @@ import './MiddleHeader.scss';
 
 const ANIMATION_DURATION = 350;
 const BACK_BUTTON_INACTIVE_TIME = 450;
+const EMOJI_STATUS_SIZE = 22;
 
 type OwnProps = {
   chatId: string;
@@ -347,6 +348,7 @@ const MiddleHeader: FC<OwnProps & StateProps> = ({
               withMediaViewer
               withUpdatingStatus
               withVideoAvatar={isReady}
+              emojiStatusSize={EMOJI_STATUS_SIZE}
               noRtl
             />
           ) : (

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