Sticker View: Fix playing animation when not in viewport

src/components/common/CustomEmoji.tsx

@@ -34,7 +34,7 @@ type OwnProps = {
   withGridFix?: boolean;
   shouldPreloadPreview?: boolean;
   forceOnHeavyAnimation?: boolean;
-  observeIntersection?: ObserveFn;
+  observeIntersectionForLoading?: ObserveFn;
   observeIntersectionForPlaying?: ObserveFn;
   onClick?: NoneToVoidFunction;
 };
@@ -52,7 +52,7 @@ const CustomEmoji: FC<OwnProps> = ({
   shouldPreloadPreview,
   forceOnHeavyAnimation,
   withSharedAnimation,
-  observeIntersection,
+  observeIntersectionForLoading,
   observeIntersectionForPlaying,
   onClick,
 }) => {
@@ -143,8 +143,8 @@ const CustomEmoji: FC<OwnProps> = ({
           shouldLoop={shouldLoop}
           loopLimit={loopLimit}
           shouldPreloadPreview={shouldPreloadPreview}
-          observeIntersection={observeIntersection}
           forceOnHeavyAnimation={forceOnHeavyAnimation}
+          observeIntersectionForLoading={observeIntersectionForLoading}
           observeIntersectionForPlaying={observeIntersectionForPlaying}
           withSharedAnimation={withSharedAnimation}
           onVideoEnded={handleVideoEnded}

src/components/common/FullNameTitle.tsx

@@ -64,7 +64,7 @@ const FullNameTitle: FC<OwnProps> = ({
         <CustomEmoji
           documentId={emojiStatus.documentId}
           loopLimit={!noLoopLimit ? EMOJI_STATUS_LOOP_LIMIT : undefined}
-          observeIntersection={observeIntersection}
+          observeIntersectionForLoading={observeIntersection}
           onClick={onEmojiStatusClick}
         />
       )}

src/components/common/StickerView.tsx

@@ -36,7 +36,7 @@ type OwnProps = {
   shouldLoop?: boolean;
   shouldPreloadPreview?: boolean;
   forceOnHeavyAnimation?: boolean;
-  observeIntersection?: ObserveFn;
+  observeIntersectionForLoading?: ObserveFn;
   observeIntersectionForPlaying?: ObserveFn;
   noLoad?: boolean;
   noPlay?: boolean;
@@ -63,7 +63,7 @@ const StickerView: FC<OwnProps> = ({
   shouldLoop = false,
   shouldPreloadPreview,
   forceOnHeavyAnimation,
-  observeIntersection,
+  observeIntersectionForLoading,
   observeIntersectionForPlaying,
   noLoad,
   noPlay,
@@ -80,9 +80,12 @@ const StickerView: FC<OwnProps> = ({
   const isStatic = !isLottie && !isVideo;
   const previewMediaHash = getStickerPreviewHash(sticker.id);
 
-  const isIntersectingForLoad = useIsIntersecting(containerRef, observeIntersection);
+  const isIntersectingForLoading = useIsIntersecting(containerRef, observeIntersectionForLoading);
-  const shouldLoad = isIntersectingForLoad && !noLoad;
+  const shouldLoad = isIntersectingForLoading && !noLoad;
-  const isIntersectingForPlaying = useIsIntersecting(containerRef, observeIntersectionForPlaying);
+  const isIntersectingForPlaying = (
+    useIsIntersecting(containerRef, observeIntersectionForPlaying)
+    && isIntersectingForLoading
+  );
   const shouldPlay = isIntersectingForPlaying && !noPlay;
 
   const thumbDataUri = useThumbnail(sticker);

src/components/common/helpers/renderMessageText.ts

@@ -22,7 +22,8 @@ export function renderMessageText(
   isSimple?: boolean,
   truncateLength?: number,
   isProtected?: boolean,
-  observeIntersection?: ObserveFn,
+  observeIntersectionForLoading?: ObserveFn,
+  observeIntersectionForPlaying?: ObserveFn,
   shouldRenderAsHtml?: boolean,
 ) {
   const { text, entities } = message.content.text || {};
@@ -41,7 +42,8 @@ export function renderMessageText(
     message.id,
     isSimple,
     isProtected,
-    observeIntersection,
+    observeIntersectionForLoading,
+    observeIntersectionForPlaying,
   );
 }
 

src/components/common/helpers/renderTextWithEntities.tsx

@@ -36,7 +36,8 @@ export function renderTextWithEntities(
   messageId?: number,
   isSimple?: boolean,
   isProtected?: boolean,
-  observeIntersection?: ObserveFn,
+  observeIntersectionForLoading?: ObserveFn,
+  observeIntersectionForPlaying?: ObserveFn,
 ) {
   if (!entities || !entities.length) {
     return renderMessagePart(text, highlight, emojiSize, shouldRenderAsHtml, isSimple);
@@ -119,7 +120,8 @@ export function renderTextWithEntities(
         messageId,
         isSimple,
         isProtected,
-        observeIntersection,
+        observeIntersectionForLoading,
+        observeIntersectionForPlaying,
         emojiSize,
       );
 
@@ -297,7 +299,8 @@ function processEntity(
   messageId?: number,
   isSimple?: boolean,
   isProtected?: boolean,
-  observeIntersection?: ObserveFn,
+  observeIntersectionForLoading?: ObserveFn,
+  observeIntersectionForPlaying?: ObserveFn,
   emojiSize?: number,
 ) {
   const entityText = typeof entityContent === 'string' && entityContent;
@@ -326,7 +329,8 @@ function processEntity(
           size={emojiSize}
           withSharedAnimation
           withGridFix={!emojiSize}
-          observeIntersection={observeIntersection}
+          observeIntersectionForLoading={observeIntersectionForLoading}
+          observeIntersectionForPlaying={observeIntersectionForPlaying}
         />
       );
     }
@@ -446,7 +450,8 @@ function processEntity(
           size={emojiSize}
           withSharedAnimation
           withGridFix={!emojiSize}
-          observeIntersection={observeIntersection}
+          observeIntersectionForLoading={observeIntersectionForLoading}
+          observeIntersectionForPlaying={observeIntersectionForPlaying}
         />
       );
     default:

src/components/middle/message/AnimatedCustomEmoji.tsx

@@ -67,7 +67,7 @@ const AnimatedCustomEmoji: FC<OwnProps & StateProps> = ({
       size={size}
       withSharedAnimation
       forceOnHeavyAnimation
-      observeIntersection={observeIntersection}
+      observeIntersectionForLoading={observeIntersection}
       onClick={handleClick}
     />
   );

src/components/middle/message/Message.tsx

@@ -530,6 +530,7 @@ const Message: FC<OwnProps & StateProps> = ({
     undefined,
     undefined,
     isProtected,
+    observeIntersectionForMedia,
     observeIntersectionForAnimatedStickers,
   );
 
@@ -959,7 +960,7 @@ const Message: FC<OwnProps & StateProps> = ({
               <CustomEmoji
                 documentId={senderEmojiStatus.documentId}
                 loopLimit={EMOJI_STATUS_LOOP_LIMIT}
-                observeIntersection={observeIntersectionForMedia}
+                observeIntersectionForLoading={observeIntersectionForMedia}
                 observeIntersectionForPlaying={observeIntersectionForAnimatedStickers}
               />
             )}

src/components/middle/message/helpers/copyOptions.ts

@@ -74,7 +74,7 @@ export function getMessageCopyOptions(
           document.execCommand('copy');
         } else {
           const clipboardText = renderMessageText(
-            message, undefined, undefined, undefined, undefined, undefined, undefined, true,
+            message, undefined, undefined, undefined, undefined, undefined, undefined, undefined, true,
           );
           if (clipboardText) copyHtmlToClipboard(clipboardText.join(''), getMessageTextWithSpoilers(message)!);
         }

src/global/helpers/renderMessageSummaryHtml.ts

@@ -10,7 +10,7 @@ export function renderMessageSummaryHtml(
   const emoji = getMessageSummaryEmoji(message);
   const emojiWithSpace = emoji ? `${emoji} ` : '';
   const text = renderMessageText(
-    message, undefined, undefined, undefined, undefined, undefined, undefined, true,
+    message, undefined, undefined, undefined, undefined, undefined, undefined, undefined, true,
   )?.join('');
   const description = getMessageSummaryDescription(lang, message, text, true, true);