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

Animated Emoji: Fix flickering "like" emoji

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-01-21 17:29:27 +01:00
parent dbb05d8a04
commit fbda8e8094
3 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/common/AnimatedEmoji.scss
View File

@ -5,9 +5,9 @@
position: absolute;
width: 100%;
height: 100%;
}
&.like-sticker-thumb {
transform: scale(0.8);
}
&.like-sticker-thumb img {
transform: scale(0.8);
}
}

7
src/components/common/AnimatedEmoji.tsx
View File

@ -5,11 +5,12 @@ import React, {
import { ApiMediaFormat, ApiSticker } from '../../api/types';
import { ActiveEmojiInteraction } from '../../global/types';
import { LIKE_STICKER_ID } from './helpers/mediaDimensions';
import buildClassName from '../../util/buildClassName';
import { ObserveFn, useIsIntersecting } from '../../hooks/useIntersectionObserver';
import useMedia from '../../hooks/useMedia';
import useMediaTransition from '../../hooks/useMediaTransition';
import useAnimatedEmoji from './hooks/useAnimatedEmoji';
import { LIKE_STICKER_ID } from './helpers/mediaDimensions';
import AnimatedSticker from './AnimatedSticker';
@ -73,13 +74,13 @@ const AnimatedEmoji: FC<OwnProps> = ({
return (
<div
ref={ref}
className="AnimatedEmoji media-inner"
className={buildClassName('AnimatedEmoji media-inner', sticker.id === LIKE_STICKER_ID && 'like-sticker-thumb')}
// @ts-ignore teact feature
style={style}
onClick={handleClick}
>
{!isAnimationLoaded && thumbDataUri && (
<img src={thumbDataUri} className={sticker.id === LIKE_STICKER_ID ? 'like-sticker-thumb' : undefined} alt="" />
<img src={thumbDataUri} alt="" />
)}
{!isAnimationLoaded && previewBlobUrl && (
<img src={previewBlobUrl} className={transitionClassNames} alt="" />

2
src/components/common/helpers/mediaDimensions.ts
View File

@ -12,7 +12,7 @@ export const REM = parseInt(getComputedStyle(document.documentElement).fontSize,
export const ROUND_VIDEO_DIMENSIONS_PX = 240;
export const GIF_MIN_WIDTH = 300;
export const AVATAR_FULL_DIMENSIONS = { width: 640, height: 640 };
export const LIKE_STICKER_ID = '1258816259753933';
export const LIKE_STICKER_ID = '4986041492570112461';
const DEFAULT_MEDIA_DIMENSIONS: ApiDimensions = { width: 100, height: 100 };
const MOBILE_SCREEN_NO_AVATARS_MESSAGE_EXTRA_WIDTH_REM = 4.5;