diff --git a/src/components/common/CustomEmoji.tsx b/src/components/common/CustomEmoji.tsx index ac2c61796..f9147106b 100644 --- a/src/components/common/CustomEmoji.tsx +++ b/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 = ({ shouldPreloadPreview, forceOnHeavyAnimation, withSharedAnimation, - observeIntersection, + observeIntersectionForLoading, observeIntersectionForPlaying, onClick, }) => { @@ -143,8 +143,8 @@ const CustomEmoji: FC = ({ shouldLoop={shouldLoop} loopLimit={loopLimit} shouldPreloadPreview={shouldPreloadPreview} - observeIntersection={observeIntersection} forceOnHeavyAnimation={forceOnHeavyAnimation} + observeIntersectionForLoading={observeIntersectionForLoading} observeIntersectionForPlaying={observeIntersectionForPlaying} withSharedAnimation={withSharedAnimation} onVideoEnded={handleVideoEnded} diff --git a/src/components/common/FullNameTitle.tsx b/src/components/common/FullNameTitle.tsx index f563e3dc6..9438d729d 100644 --- a/src/components/common/FullNameTitle.tsx +++ b/src/components/common/FullNameTitle.tsx @@ -64,7 +64,7 @@ const FullNameTitle: FC = ({ )} diff --git a/src/components/common/StickerView.tsx b/src/components/common/StickerView.tsx index 8f5017bfb..969c3e558 100644 --- a/src/components/common/StickerView.tsx +++ b/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 = ({ shouldLoop = false, shouldPreloadPreview, forceOnHeavyAnimation, - observeIntersection, + observeIntersectionForLoading, observeIntersectionForPlaying, noLoad, noPlay, @@ -80,9 +80,12 @@ const StickerView: FC = ({ const isStatic = !isLottie && !isVideo; const previewMediaHash = getStickerPreviewHash(sticker.id); - const isIntersectingForLoad = useIsIntersecting(containerRef, observeIntersection); - const shouldLoad = isIntersectingForLoad && !noLoad; - const isIntersectingForPlaying = useIsIntersecting(containerRef, observeIntersectionForPlaying); + const isIntersectingForLoading = useIsIntersecting(containerRef, observeIntersectionForLoading); + const shouldLoad = isIntersectingForLoading && !noLoad; + const isIntersectingForPlaying = ( + useIsIntersecting(containerRef, observeIntersectionForPlaying) + && isIntersectingForLoading + ); const shouldPlay = isIntersectingForPlaying && !noPlay; const thumbDataUri = useThumbnail(sticker); diff --git a/src/components/common/helpers/renderMessageText.ts b/src/components/common/helpers/renderMessageText.ts index c0c59d9e0..2ffe0c407 100644 --- a/src/components/common/helpers/renderMessageText.ts +++ b/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, ); } diff --git a/src/components/common/helpers/renderTextWithEntities.tsx b/src/components/common/helpers/renderTextWithEntities.tsx index 82eb601d0..823a099ad 100644 --- a/src/components/common/helpers/renderTextWithEntities.tsx +++ b/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: diff --git a/src/components/middle/message/AnimatedCustomEmoji.tsx b/src/components/middle/message/AnimatedCustomEmoji.tsx index 85a0136fa..e4280fafc 100644 --- a/src/components/middle/message/AnimatedCustomEmoji.tsx +++ b/src/components/middle/message/AnimatedCustomEmoji.tsx @@ -67,7 +67,7 @@ const AnimatedCustomEmoji: FC = ({ size={size} withSharedAnimation forceOnHeavyAnimation - observeIntersection={observeIntersection} + observeIntersectionForLoading={observeIntersection} onClick={handleClick} /> ); diff --git a/src/components/middle/message/Message.tsx b/src/components/middle/message/Message.tsx index 373dc9791..277e31d8c 100644 --- a/src/components/middle/message/Message.tsx +++ b/src/components/middle/message/Message.tsx @@ -530,6 +530,7 @@ const Message: FC = ({ undefined, undefined, isProtected, + observeIntersectionForMedia, observeIntersectionForAnimatedStickers, ); @@ -959,7 +960,7 @@ const Message: FC = ({ )} diff --git a/src/components/middle/message/helpers/copyOptions.ts b/src/components/middle/message/helpers/copyOptions.ts index e6bf6a5ae..bd4ff44ab 100644 --- a/src/components/middle/message/helpers/copyOptions.ts +++ b/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)!); } diff --git a/src/global/helpers/renderMessageSummaryHtml.ts b/src/global/helpers/renderMessageSummaryHtml.ts index d27dc9f4c..fae4c3069 100644 --- a/src/global/helpers/renderMessageSummaryHtml.ts +++ b/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);