From fc9bd68a16db8d807904ad2dde31a48cc470b049 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Tue, 18 Oct 2022 14:32:05 +0200
Subject: [PATCH] Custom Emoji: Various fixes

---
 src/components/common/CustomEmoji.tsx  | 8 +++++++-
 src/components/middle/MiddleHeader.tsx | 2 ++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/common/CustomEmoji.tsx b/src/components/common/CustomEmoji.tsx
index 07d7e3d1c..d9a1ae00e 100644
--- a/src/components/common/CustomEmoji.tsx
+++ b/src/components/common/CustomEmoji.tsx
@@ -18,6 +18,7 @@ import useEnsureCustomEmoji from '../../hooks/useEnsureCustomEmoji';
 import { useIsIntersecting } from '../../hooks/useIntersectionObserver';
 import useThumbnail from '../../hooks/useThumbnail';
 import useCustomEmoji from './hooks/useCustomEmoji';
+import safePlay from '../../util/safePlay';
 
 import AnimatedSticker from './AnimatedSticker';
 import OptimizedVideo from '../ui/OptimizedVideo';
@@ -85,12 +86,17 @@ const CustomEmoji: FC<OwnProps> = ({
     if (loopCountRef.current >= loopLimit) {
       setShouldLoop(false);
       e.currentTarget.currentTime = 0;
+    } else {
+      // Loop manually
+      safePlay(e.currentTarget);
     }
   }, [loopLimit]);
 
   const handleStickerLoop = useCallback(() => {
     if (!loopLimit) return;
+
     loopCountRef.current += 1;
+
     // Sticker plays 1 more time after disabling loop
     if (loopCountRef.current >= loopLimit - 1) {
       setShouldLoop(false);
@@ -117,7 +123,7 @@ const CustomEmoji: FC<OwnProps> = ({
     if (customEmoji.isVideo) {
       return (
         <OptimizedVideo
-          canPlay={isIntersecting}
+          canPlay={isIntersecting && shouldLoop}
           className={styles.media}
           src={mediaData}
           playsInline
diff --git a/src/components/middle/MiddleHeader.tsx b/src/components/middle/MiddleHeader.tsx
index b6cc514b6..98b53f46e 100644
--- a/src/components/middle/MiddleHeader.tsx
+++ b/src/components/middle/MiddleHeader.tsx
@@ -332,6 +332,7 @@ const MiddleHeader: FC<OwnProps & StateProps> = ({
         <div className="chat-info-wrapper" onClick={handleHeaderClick}>
           {isUserId(chatId) ? (
             <PrivateChatInfo
+              key={chatId}
               userId={chatId}
               typingStatus={typingStatus}
               status={connectionStatusText}
@@ -344,6 +345,7 @@ const MiddleHeader: FC<OwnProps & StateProps> = ({
             />
           ) : (
             <GroupChatInfo
+              key={chatId}
               chatId={chatId}
               typingStatus={typingStatus}
               status={connectionStatusText}