diff --git a/src/components/common/CustomEmoji.module.scss b/src/components/common/CustomEmoji.module.scss index 5c6c7c6de..9f79e3f37 100644 --- a/src/components/common/CustomEmoji.module.scss +++ b/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) { diff --git a/src/components/common/StickerSetCard.scss b/src/components/common/StickerSetCard.scss index 495f526d7..853c12fee 100644 --- a/src/components/common/StickerSetCard.scss +++ b/src/components/common/StickerSetCard.scss @@ -1,11 +1,11 @@ .StickerSetCard { .StickerButton, .Button { - width: 3rem; - height: 3rem; + width: 2.5rem; + height: 2.5rem; margin: 0 0.5rem 0 0; padding: 0; - flex: 0 0 3rem; + flex: 0 0 2.5rem; } .install-button { diff --git a/src/components/middle/composer/StickerSetCover.module.scss b/src/components/middle/composer/StickerSetCover.module.scss index 3f777db0b..b0e183d8c 100644 --- a/src/components/middle/composer/StickerSetCover.module.scss +++ b/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; - height: 1.875rem; + width: var(--_size); + height: var(--_size); display: flex; align-items: center; justify-content: center; @@ -18,4 +19,5 @@ .image { width: 100%; height: 100%; + object-fit: contain; } diff --git a/src/components/middle/composer/StickerSetCover.tsx b/src/components/middle/composer/StickerSetCover.tsx index 1274a861f..b361b6014 100644 --- a/src/components/middle/composer/StickerSetCover.tsx +++ b/src/components/middle/composer/StickerSetCover.tsx @@ -59,15 +59,15 @@ const StickerSetCover: FC = ({ 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 staticHash = shouldFallbackToStatic && getStickerMediaHash(stickerSet.stickers![0], 'preview'); - const staticMediaData = useMedia(staticHash, !isIntersecting); - - const mediaHash = ((hasThumbnail && !shouldFallbackToStatic) || hasAnimatedThumb) && `stickerSet${stickerSet.id}`; + const mediaHash = ((hasThumbnail && !firstStickerHash) || 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 = ({ }, [isIntersecting, loadStickers, stickerSet]); return ( -
+
{isReady ? ( thumbCustomEmojiId ? ( = ({ sharedCanvasCoords={coords} forceAlways={forcePlayback} /> - ) : (hasVideoThumb && !shouldFallbackToStatic) ? ( + ) : (hasVideoThumb && !shouldFallbackToSticker) ? ( = ({ /> ) : ( { + element.remove(); + }); DEFINITION_MAP.delete(id); } }