ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions 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; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
}
&.like-sticker-thumb { &.like-sticker-thumb img {
transform: scale(0.8); 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 { ApiMediaFormat, ApiSticker } from '../../api/types';
import { ActiveEmojiInteraction } from '../../global/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 { ObserveFn, useIsIntersecting } from '../../hooks/useIntersectionObserver';
import useMedia from '../../hooks/useMedia'; import useMedia from '../../hooks/useMedia';
import useMediaTransition from '../../hooks/useMediaTransition'; import useMediaTransition from '../../hooks/useMediaTransition';
import useAnimatedEmoji from './hooks/useAnimatedEmoji'; import useAnimatedEmoji from './hooks/useAnimatedEmoji';
import { LIKE_STICKER_ID } from './helpers/mediaDimensions';
import AnimatedSticker from './AnimatedSticker'; import AnimatedSticker from './AnimatedSticker';
@ -73,13 +74,13 @@ const AnimatedEmoji: FC<OwnProps> = ({
return ( return (
<div <div
ref={ref} ref={ref}
className="AnimatedEmoji media-inner" className={buildClassName('AnimatedEmoji media-inner', sticker.id === LIKE_STICKER_ID && 'like-sticker-thumb')}
// @ts-ignore teact feature // @ts-ignore teact feature
style={style} style={style}
onClick={handleClick} onClick={handleClick}
> >
{!isAnimationLoaded && thumbDataUri && ( {!isAnimationLoaded && thumbDataUri && (
<img src={thumbDataUri} className={sticker.id === LIKE_STICKER_ID ? 'like-sticker-thumb' : undefined} alt="" /> <img src={thumbDataUri} alt="" />
)} )}
{!isAnimationLoaded && previewBlobUrl && ( {!isAnimationLoaded && previewBlobUrl && (
<img src={previewBlobUrl} className={transitionClassNames} alt="" /> <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 ROUND_VIDEO_DIMENSIONS_PX = 240;
export const GIF_MIN_WIDTH = 300; export const GIF_MIN_WIDTH = 300;
export const AVATAR_FULL_DIMENSIONS = { width: 640, height: 640 }; 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 DEFAULT_MEDIA_DIMENSIONS: ApiDimensions = { width: 100, height: 100 };
const MOBILE_SCREEN_NO_AVATARS_MESSAGE_EXTRA_WIDTH_REM = 4.5; const MOBILE_SCREEN_NO_AVATARS_MESSAGE_EXTRA_WIDTH_REM = 4.5;