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

Sticker View: Fix playing animation when not in viewport

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-11-10 18:27:56 +04:00
parent 47a6cf312c
commit fe95ac554f
9 changed files with 31 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/common/CustomEmoji.tsx
View File

@ -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}

2
src/components/common/FullNameTitle.tsx
View File

@ -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}
/>
)}

13
src/components/common/StickerView.tsx
View File

@ -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 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);

6
src/components/common/helpers/renderMessageText.ts
View File

@ -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,
);
}

15
src/components/common/helpers/renderTextWithEntities.tsx
View File

@ -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:

2
src/components/middle/message/AnimatedCustomEmoji.tsx
View File

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

3
src/components/middle/message/Message.tsx
View File

@ -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}
/>
)}

2
src/components/middle/message/helpers/copyOptions.ts
View File

@ -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)!);
}

2
src/global/helpers/renderMessageSummaryHtml.ts
View File

@ -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);