[Perf] Profile: Do not play video when Right Column is closed

src/components/common/ProfileInfo.tsx

@@ -31,6 +31,7 @@ import './ProfileInfo.scss';
 type OwnProps = {
   userId: string;
   forceShowSelf?: boolean;
+  canPlayVideo: boolean;
 };
 
 type StateProps =
@@ -48,6 +49,7 @@ type StateProps =
 
 const ProfileInfo: FC<OwnProps & StateProps> = ({
   forceShowSelf,
+  canPlayVideo,
   user,
   userStatus,
   chat,
@@ -184,7 +186,7 @@ const ProfileInfo: FC<OwnProps & StateProps> = ({
         photo={photo}
         isSavedMessages={isSavedMessages}
         isFirstPhoto={isFirst}
-        notActive={!isActive}
+        canPlayVideo={Boolean(isActive && canPlayVideo)}
         onClick={handleProfilePhotoClick}
       />
     );

src/components/common/ProfilePhoto.tsx

@@ -15,10 +15,12 @@ import {
 } from '../../global/helpers';
 import renderText from './helpers/renderText';
 import buildClassName from '../../util/buildClassName';
-import safePlay from '../../util/safePlay';
 import { getFirstLetters } from '../../util/textFormat';
 import useMedia from '../../hooks/useMedia';
 import useLang from '../../hooks/useLang';
+import useVideoAutoPause from '../middle/message/hooks/useVideoAutoPause';
+import useVideoCleanup from '../../hooks/useVideoCleanup';
+import safePlay from '../../util/safePlay';
 
 import Spinner from '../ui/Spinner';
 
@@ -31,7 +33,7 @@ type OwnProps = {
   isSavedMessages?: boolean;
   photo?: ApiPhoto;
   lastSyncTime?: number;
-  notActive?: boolean;
+  canPlayVideo: boolean;
   onClick: NoneToVoidFunction;
 };
 
@@ -41,12 +43,13 @@ const ProfilePhoto: FC<OwnProps> = ({
   photo,
   isFirstPhoto,
   isSavedMessages,
-  notActive,
+  canPlayVideo,
   lastSyncTime,
   onClick,
 }) => {
   // eslint-disable-next-line no-null/no-null
   const videoRef = useRef<HTMLVideoElement>(null);
+
   const lang = useLang();
   const isDeleted = user && isDeletedUser(user);
   const isRepliesChat = chat && isChatWithRepliesBot(chat.id);
@@ -77,13 +80,16 @@ const ProfilePhoto: FC<OwnProps> = ({
 
   useEffect(() => {
     if (!videoRef.current) return;
-    if (notActive) {
+    if (!canPlayVideo) {
       videoRef.current.pause();
       videoRef.current.currentTime = 0;
     } else {
       safePlay(videoRef.current);
     }
-  }, [notActive]);
+  }, [canPlayVideo]);
+
+  const { handlePlaying } = useVideoAutoPause(videoRef, canPlayVideo);
+  useVideoCleanup(videoRef, []);
 
   const photoHash = getMediaHash('big', 'photo');
   const photoBlobUrl = useMedia(photoHash, false, ApiMediaFormat.BlobUrl, lastSyncTime);
@@ -108,9 +114,10 @@ const ProfilePhoto: FC<OwnProps> = ({
           className="avatar-media"
           muted
           disablePictureInPicture
-          autoPlay={!notActive}
+          autoPlay={canPlayVideo}
           loop
           playsInline
+          onPlaying={handlePlaying}
         />
       );
     } else {

src/components/left/settings/SettingsMain.tsx

@@ -68,6 +68,7 @@ const SettingsMain: FC<OwnProps & StateProps> = ({
         {currentUser && (
           <ProfileInfo
             userId={currentUser.id}
+            canPlayVideo={Boolean(isActive)}
             forceShowSelf
           />
         )}

src/components/right/Profile.tsx

@@ -11,15 +11,11 @@ import type {
   ApiUser,
   ApiUserStatus,
 } from '../../api/types';
-import {
+import { MAIN_THREAD_ID } from '../../api/types';
-  MAIN_THREAD_ID,
-} from '../../api/types';
 import type {
   ISettings, ProfileState, ProfileTabType, SharedMediaType,
 } from '../../types';
-import {
+import { NewChatMembersProgress, MediaViewerOrigin, AudioOrigin } from '../../types';
-  NewChatMembersProgress, MediaViewerOrigin, AudioOrigin,
-} from '../../types';
 
 import {
   MEMBERS_SLICE,
@@ -48,6 +44,7 @@ import useProfileState from './hooks/useProfileState';
 import useTransitionFixes from './hooks/useTransitionFixes';
 import useAsyncRendering from './hooks/useAsyncRendering';
 import useLang from '../../hooks/useLang';
+import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
 
 import Transition from '../ui/Transition';
 import InfiniteScroll from '../ui/InfiniteScroll';
@@ -67,7 +64,6 @@ import DeleteMemberModal from './DeleteMemberModal';
 import GroupChatInfo from '../common/GroupChatInfo';
 
 import './Profile.scss';
-import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
 
 type OwnProps = {
   chatId: string;
@@ -455,7 +451,7 @@ const Profile: FC<OwnProps & StateProps> = ({
       onLoadMore={getMore}
       onScroll={handleScroll}
     >
-      {!noProfileInfo && renderProfileInfo(chatId, resolvedUserId)}
+      {!noProfileInfo && renderProfileInfo(chatId, resolvedUserId, isRightColumnShown && canRenderContent)}
       {!isRestricted && (
         <div
           className="shared-media"
@@ -496,10 +492,10 @@ const Profile: FC<OwnProps & StateProps> = ({
   );
 };
 
-function renderProfileInfo(chatId: string, resolvedUserId?: string) {
+function renderProfileInfo(chatId: string, resolvedUserId: string | undefined, isReady: boolean) {
   return (
     <div className="profile-info">
-      <ProfileInfo userId={resolvedUserId || chatId} />
+      <ProfileInfo userId={resolvedUserId || chatId} canPlayVideo={isReady} />
       <ChatExtra chatOrUserId={resolvedUserId || chatId} />
     </div>
   );