ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reaction: Fix effect playback (#5152)

Browse Source
This commit is contained in:
zubiden 2024-11-09 15:40:13 +04:00 committed by Alexander Zinchuk
parent e678824a10
commit 5c9c5f0cd8
1 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/common/reactions/ReactionAnimatedEmoji.tsx
View File

@ -10,7 +10,7 @@ import type {
} from '../../../api/types'; } from '../../../api/types';
import type { ObserveFn } from '../../../hooks/useIntersectionObserver'; import type { ObserveFn } from '../../../hooks/useIntersectionObserver';
import { isSameReaction } from '../../../global/helpers'; import { getStickerHashById, isSameReaction } from '../../../global/helpers';
import { selectPerformanceSettingsValue, selectTabState } from '../../../global/selectors'; import { selectPerformanceSettingsValue, selectTabState } from '../../../global/selectors';
import buildClassName from '../../../util/buildClassName'; import buildClassName from '../../../util/buildClassName';
import { roundToNearestEven } from '../../../util/math'; import { roundToNearestEven } from '../../../util/math';
@ -112,11 +112,11 @@ const ReactionAnimatedEmoji = ({
const isIntersecting = useIsIntersecting(ref, observeIntersection); const isIntersecting = useIsIntersecting(ref, observeIntersection);
const mediaHashCenterIcon = centerIconId && `sticker${centerIconId}`; const mediaHashCenterIcon = centerIconId && getStickerHashById(centerIconId);
const mediaHashEffect = effectId && `sticker${effectId}`; const mediaHashEffect = effectId && getStickerHashById(effectId);
const mediaDataCenterIcon = useMedia(mediaHashCenterIcon, !centerIconId); const mediaDataCenterIcon = useMedia(mediaHashCenterIcon);
const mediaDataEffect = useMedia(mediaHashEffect, !effectId); const mediaDataEffect = useMedia(mediaHashEffect);
const activeReaction = useMemo(() => ( const activeReaction = useMemo(() => (
activeReactions?.find((active) => isSameReaction(active, reaction)) activeReactions?.find((active) => isSameReaction(active, reaction))
@ -173,6 +173,7 @@ const ReactionAnimatedEmoji = ({
noVideoOnMobile noVideoOnMobile
loopLimit={loopLimit} loopLimit={loopLimit}
observeIntersectionForPlaying={observeIntersection} observeIntersectionForPlaying={observeIntersection}
forceAlways
/> />
)} )}
{shouldRenderCenter && !isCustom && ( {shouldRenderCenter && !isCustom && (
@ -185,6 +186,7 @@ const ReactionAnimatedEmoji = ({
noLoop={!shouldLoop} noLoop={!shouldLoop}
onLoad={markAnimationLoaded} onLoad={markAnimationLoaded}
onEnded={unmarkAnimationLoaded} onEnded={unmarkAnimationLoaded}
forceAlways
/> />
)} )}
{shouldRenderEffect && ( {shouldRenderEffect && (
@ -197,6 +199,7 @@ const ReactionAnimatedEmoji = ({
play={isIntersecting} play={isIntersecting}
noLoop noLoop
onEnded={handleEnded} onEnded={handleEnded}
forceAlways
/> />
{isCustom && !assignedEffectId && isIntersecting && ( {isCustom && !assignedEffectId && isIntersecting && (
<CustomEmojiEffect <CustomEmojiEffect