RLottie: Follow-up fixes for sync playing

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() {

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<OwnProps> = ({
   withGridFix,
   shouldPreloadPreview,
   forceOnHeavyAnimation,
+  withSharedAnimation,
   observeIntersection,
   observeIntersectionForPlaying,
   onClick,
@@ -138,6 +140,7 @@ const CustomEmoji: FC<OwnProps> = ({
           observeIntersection={observeIntersection}
           forceOnHeavyAnimation={forceOnHeavyAnimation}
           observeIntersectionForPlaying={observeIntersectionForPlaying}
+          withSharedAnimation={withSharedAnimation}
           onVideoEnded={handleVideoEnded}
           onAnimatedStickerLoop={handleStickerLoop}
         />

src/components/common/StickerButton.tsx

@@ -230,6 +230,7 @@ const StickerButton = <T extends number | ApiSticker | ApiBotInlineMediaResult |
         shouldPreloadPreview
         noLoad={!shouldLoad}
         noPlay={!shouldPlay}
+        withSharedAnimation
       />
       {isLocked && (
         <div

src/components/common/StickerView.tsx

@@ -8,6 +8,7 @@ import type { ApiSticker } from '../../api/types';
 import { IS_WEBM_SUPPORTED } from '../../util/environment';
 import * as mediaLoader from '../../util/mediaLoader';
 import buildClassName from '../../util/buildClassName';
+import generateIdFor from '../../util/generateIdFor';
 import { getStickerPreviewHash } from '../../global/helpers';
 import { selectIsAlwaysHighPriorityEmoji } from '../../global/selectors';
 
@@ -39,12 +40,15 @@ type OwnProps = {
   observeIntersectionForPlaying?: ObserveFn;
   noLoad?: boolean;
   noPlay?: boolean;
+  withSharedAnimation?: boolean;
   cacheBuster?: number;
   onVideoEnded?: AnyToVoidFunction;
   onAnimatedStickerLoop?: AnyToVoidFunction;
 };
 
+const SHARED_PREFIX = 'shared';
 const STICKER_SIZE = 24;
+const ID_STORE = {};
 
 const StickerView: FC<OwnProps> = ({
   containerRef,
@@ -63,6 +67,7 @@ const StickerView: FC<OwnProps> = ({
   observeIntersectionForPlaying,
   noLoad,
   noPlay,
+  withSharedAnimation,
   cacheBuster,
   onVideoEnded,
   onAnimatedStickerLoop,
@@ -101,7 +106,10 @@ const StickerView: FC<OwnProps> = ({
   // 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<OwnProps> = ({
           isLowPriority={!selectIsAlwaysHighPriorityEmoji(getGlobal(), stickerSetInfo)}
           onLoad={markPlayerReady}
           onLoop={onAnimatedStickerLoop}
+          onEnded={onAnimatedStickerLoop}
         />
       ) : isVideo ? (
         <OptimizedVideo

src/components/common/helpers/renderTextWithEntities.tsx

@@ -323,9 +323,10 @@ function processEntity(
       return (
         <CustomEmoji
           documentId={entity.documentId}
-          observeIntersection={observeIntersection}
-          withGridFix={!emojiSize}
           size={emojiSize}
+          withSharedAnimation
+          withGridFix={!emojiSize}
+          observeIntersection={observeIntersection}
         />
       );
     }
@@ -436,9 +437,10 @@ function processEntity(
       return (
         <CustomEmoji
           documentId={entity.documentId}
-          observeIntersection={observeIntersection}
-          withGridFix={!emojiSize}
           size={emojiSize}
+          withSharedAnimation
+          withGridFix={!emojiSize}
+          observeIntersection={observeIntersection}
         />
       );
     default:

src/components/middle/composer/CustomEmojiButton.tsx

@@ -38,7 +38,7 @@ const CustomEmojiButton: FC<OwnProps> = ({
       onMouseDown={handleClick}
       title={emoji.emoji}
     >
-      <CustomEmoji documentId={emoji.id} size={CUSTOM_EMOJI_SIZE} shouldPreloadPreview />
+      <CustomEmoji documentId={emoji.id} size={CUSTOM_EMOJI_SIZE} withSharedAnimation shouldPreloadPreview />
     </div>
   );
 };

src/components/middle/message/AnimatedCustomEmoji.tsx

@@ -62,12 +62,13 @@ const AnimatedCustomEmoji: FC<OwnProps & StateProps> = ({
     <CustomEmoji
       ref={ref}
       documentId={customEmojiId}
+      className={buildClassName('AnimatedEmoji media-inner', sticker?.id === LIKE_STICKER_ID && 'like-sticker-thumb')}
+      style={style}
       size={size}
+      withSharedAnimation
       forceOnHeavyAnimation
       observeIntersection={observeIntersection}
-      className={buildClassName('AnimatedEmoji media-inner', sticker?.id === LIKE_STICKER_ID && 'like-sticker-thumb')}
       onClick={handleClick}
-      style={style}
     />
   );
 };

src/components/middle/message/Sticker.tsx

@@ -125,6 +125,7 @@ const Sticker: FC<OwnProps> = ({
         shouldLoop={shouldLoop}
         noLoad={!canLoad}
         noPlay={!canPlay}
+        withSharedAnimation
         cacheBuster={lastSyncTime}
       />
       {hasEffect && canLoad && isPlayingEffect && (

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) {