Custom Emoji: Fix emoji centering (#5746)

Co-authored-by: zubiden <19638254+zubiden@users.noreply.github.com>

src/components/common/CustomEmoji.module.scss

@@ -3,9 +3,9 @@
   align-items: center;
   justify-content: center;
   vertical-align: text-bottom;
+  position: relative;
   width: var(--custom-emoji-size);
   height: var(--custom-emoji-size);
-  position: relative;
   flex: 0 0 var(--custom-emoji-size);
 
   :global(.rlottie-canvas) {

src/components/common/StickerSetCard.scss

@@ -1,11 +1,11 @@
 .StickerSetCard {
   .StickerButton,
   .Button {
-    width: 3rem;
+    width: 2.5rem;
-    height: 3rem;
+    height: 2.5rem;
     margin: 0 0.5rem 0 0;
     padding: 0;
-    flex: 0 0 3rem;
+    flex: 0 0 2.5rem;
   }
 
   .install-button {

src/components/middle/composer/StickerSetCover.module.scss

@@ -1,8 +1,9 @@
 .root {
-  --custom-emoji-size: 2rem;
+  --_size: 2rem;
+  --custom-emoji-size: var(--_size);
 
-  width: 1.875rem;
+  width: var(--_size);
-  height: 1.875rem;
+  height: var(--_size);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -18,4 +19,5 @@
 .image {
   width: 100%;
   height: 100%;
+  object-fit: contain;
 }

src/components/middle/composer/StickerSetCover.tsx

@@ -59,15 +59,15 @@ const StickerSetCover: FC<OwnProps> = ({
   const isIntersecting = useIsIntersecting(containerRef, observeIntersection);
   const shouldPlay = isIntersecting && !noPlay;
 
-  const hasOnlyStaticThumb = hasStaticThumb && !hasVideoThumb && !hasAnimatedThumb && !thumbCustomEmojiId;
+  const shouldFallbackToSticker = !hasThumbnail
+    || (hasVideoThumb && !IS_WEBM_SUPPORTED && !hasAnimatedThumb && !hasStaticThumb);
+  const firstStickerHash = shouldFallbackToSticker && stickerSet.stickers?.[0]
+    && getStickerMediaHash(stickerSet.stickers[0], 'preview');
+  const firstStickerMediaData = useMedia(firstStickerHash, !isIntersecting);
 
-  const shouldFallbackToStatic = hasOnlyStaticThumb || (hasVideoThumb && !IS_WEBM_SUPPORTED && !hasAnimatedThumb);
+  const mediaHash = ((hasThumbnail && !firstStickerHash) || hasAnimatedThumb) && `stickerSet${stickerSet.id}`;
-  const staticHash = shouldFallbackToStatic && getStickerMediaHash(stickerSet.stickers![0], 'preview');
-  const staticMediaData = useMedia(staticHash, !isIntersecting);
-
-  const mediaHash = ((hasThumbnail && !shouldFallbackToStatic) || hasAnimatedThumb) && `stickerSet${stickerSet.id}`;
   const mediaData = useMedia(mediaHash, !isIntersecting);
-  const isReady = thumbCustomEmojiId || mediaData || staticMediaData;
+  const isReady = thumbCustomEmojiId || mediaData || firstStickerMediaData;
   const transitionClassNames = useMediaTransitionDeprecated(isReady);
 
   const coords = useCoordsInSharedCanvas(containerRef, sharedCanvasRef);
@@ -81,7 +81,11 @@ const StickerSetCover: FC<OwnProps> = ({
   }, [isIntersecting, loadStickers, stickerSet]);
 
   return (
-    <div ref={containerRef} className={buildClassName(styles.root, 'sticker-set-cover')}>
+    <div
+      ref={containerRef}
+      className={buildClassName(styles.root, 'sticker-set-cover')}
+      style={`--_size: ${size}px`}
+    >
       {isReady ? (
         thumbCustomEmojiId ? (
           <CustomEmoji
@@ -101,7 +105,7 @@ const StickerSetCover: FC<OwnProps> = ({
             sharedCanvasCoords={coords}
             forceAlways={forcePlayback}
           />
-        ) : (hasVideoThumb && !shouldFallbackToStatic) ? (
+        ) : (hasVideoThumb && !shouldFallbackToSticker) ? (
           <OptimizedVideo
             className={buildClassName(styles.video, transitionClassNames)}
             src={mediaData}
@@ -113,7 +117,7 @@ const StickerSetCover: FC<OwnProps> = ({
           />
         ) : (
           <img
-            src={mediaData || staticMediaData}
+            src={mediaData || firstStickerMediaData}
             style={colorFilter}
             className={buildClassName(styles.image, transitionClassNames)}
             alt=""

src/config.ts

@@ -202,7 +202,7 @@ export const STICKER_SIZE_AUTH_MOBILE = 120;
 export const STICKER_SIZE_PICKER = 72;
 export const EMOJI_SIZE_PICKER = 36;
 export const COMPOSER_EMOJI_SIZE_PICKER = 32;
-export const STICKER_SIZE_GENERAL_SETTINGS = 48;
+export const STICKER_SIZE_GENERAL_SETTINGS = 40;
 export const STICKER_SIZE_PICKER_HEADER = 32;
 export const STICKER_PICKER_MAX_SHARED_COVERS = 20;
 export const STICKER_SIZE_SEARCH = 72;

src/util/svgController.ts

@@ -41,7 +41,9 @@ export function addSvgDefinition(element: React.JSX.Element, id?: string) {
 export function removeSvgDefinition(id: string) {
   const element = DEFINITION_MAP.get(id);
   if (element) {
-    element.remove();
+    requestMutation(() => {
+      element.remove();
+    });
     DEFINITION_MAP.delete(id);
   }
 }