diff --git a/src/components/common/AnimatedSticker.tsx b/src/components/common/AnimatedSticker.tsx index 62577bee7..64df49049 100644 --- a/src/components/common/AnimatedSticker.tsx +++ b/src/components/common/AnimatedSticker.tsx @@ -42,7 +42,6 @@ let RLottie: RLottieClass; // Time for the main interface to completely load const LOTTIE_LOAD_DELAY = 3000; - const ID_STORE = {}; async function ensureLottie() { diff --git a/src/components/common/CustomEmoji.tsx b/src/components/common/CustomEmoji.tsx index 8fd873dfd..968c422b2 100644 --- a/src/components/common/CustomEmoji.tsx +++ b/src/components/common/CustomEmoji.tsx @@ -28,6 +28,7 @@ type OwnProps = { className?: string; loopLimit?: number; style?: string; + withSharedAnimation?: boolean; withGridFix?: boolean; shouldPreloadPreview?: boolean; forceOnHeavyAnimation?: boolean; @@ -48,6 +49,7 @@ const CustomEmoji: FC = ({ withGridFix, shouldPreloadPreview, forceOnHeavyAnimation, + withSharedAnimation, observeIntersection, observeIntersectionForPlaying, onClick, @@ -138,6 +140,7 @@ const CustomEmoji: FC = ({ observeIntersection={observeIntersection} forceOnHeavyAnimation={forceOnHeavyAnimation} observeIntersectionForPlaying={observeIntersectionForPlaying} + withSharedAnimation={withSharedAnimation} onVideoEnded={handleVideoEnded} onAnimatedStickerLoop={handleStickerLoop} /> diff --git a/src/components/common/StickerButton.tsx b/src/components/common/StickerButton.tsx index 3392d0a41..cc93c412f 100644 --- a/src/components/common/StickerButton.tsx +++ b/src/components/common/StickerButton.tsx @@ -230,6 +230,7 @@ const StickerButton = {isLocked && (
= ({ containerRef, @@ -63,6 +67,7 @@ const StickerView: FC = ({ observeIntersectionForPlaying, noLoad, noPlay, + withSharedAnimation, cacheBuster, onVideoEnded, onAnimatedStickerLoop, @@ -101,7 +106,10 @@ const StickerView: FC = ({ // Preload preview for Message Input and local message useMedia(previewMediaHash, !shouldLoad || !shouldPreloadPreview, undefined, cacheBuster); - const idKey = [id, size, customColor?.join(',')].filter(Boolean).join('_'); + const [randomIdPrefix] = useState(generateIdFor(ID_STORE, true)); + const idKey = [ + (withSharedAnimation ? SHARED_PREFIX : randomIdPrefix), id, size, customColor?.join(','), + ].filter(Boolean).join('_'); return ( <> @@ -124,6 +132,7 @@ const StickerView: FC = ({ isLowPriority={!selectIsAlwaysHighPriorityEmoji(getGlobal(), stickerSetInfo)} onLoad={markPlayerReady} onLoop={onAnimatedStickerLoop} + onEnded={onAnimatedStickerLoop} /> ) : isVideo ? ( ); } @@ -436,9 +437,10 @@ function processEntity( return ( ); default: diff --git a/src/components/middle/composer/CustomEmojiButton.tsx b/src/components/middle/composer/CustomEmojiButton.tsx index 614e903ab..5e31311de 100644 --- a/src/components/middle/composer/CustomEmojiButton.tsx +++ b/src/components/middle/composer/CustomEmojiButton.tsx @@ -38,7 +38,7 @@ const CustomEmojiButton: FC = ({ onMouseDown={handleClick} title={emoji.emoji} > - +
); }; diff --git a/src/components/middle/message/AnimatedCustomEmoji.tsx b/src/components/middle/message/AnimatedCustomEmoji.tsx index 4905f54e2..85a0136fa 100644 --- a/src/components/middle/message/AnimatedCustomEmoji.tsx +++ b/src/components/middle/message/AnimatedCustomEmoji.tsx @@ -62,12 +62,13 @@ const AnimatedCustomEmoji: FC = ({ ); }; diff --git a/src/components/middle/message/Sticker.tsx b/src/components/middle/message/Sticker.tsx index 065fc2e36..9d853025d 100644 --- a/src/components/middle/message/Sticker.tsx +++ b/src/components/middle/message/Sticker.tsx @@ -125,6 +125,7 @@ const Sticker: FC = ({ shouldLoop={shouldLoop} noLoad={!canLoad} noPlay={!canPlay} + withSharedAnimation cacheBuster={lastSyncTime} /> {hasEffect && canLoad && isPlayingEffect && ( diff --git a/src/lib/rlottie/RLottie.ts b/src/lib/rlottie/RLottie.ts index f0ac20ad7..382d356ee 100644 --- a/src/lib/rlottie/RLottie.ts +++ b/src/lib/rlottie/RLottie.ts @@ -132,11 +132,6 @@ class RLottie { play(forceRestart = false, container?: HTMLDivElement) { if (container) { this.containers.get(container)!.isPaused = false; - - const areAllContainersPlaying = Array.from(this.containers.values()).every(({ isPaused }) => !isPaused); - if (!areAllContainersPlaying) { - return; - } } if (this.isEnded && forceRestart) {