From af9d8695f407bfa8cde2affd8032170a7d81c56d Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Thu, 19 Sep 2024 20:43:40 +0200
Subject: [PATCH] [Perf] `useVideoCleanup`: Remove event listeners

---
 src/components/mediaViewer/VideoPlayer.tsx |  3 ++-
 src/components/ui/OptimizedVideo.tsx       |  3 ++-
 src/hooks/useVideoCleanup.ts               | 23 ++++++++++++++++------
 src/lib/teact/dom-events.ts                |  2 +-
 4 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/components/mediaViewer/VideoPlayer.tsx b/src/components/mediaViewer/VideoPlayer.tsx
index 1e96817ae..0cd630dea 100644
--- a/src/components/mediaViewer/VideoPlayer.tsx
+++ b/src/components/mediaViewer/VideoPlayer.tsx
@@ -181,7 +181,8 @@ const VideoPlayer: FC<OwnProps> = ({
     }
   });
 
-  useVideoCleanup(videoRef, []);
+  useVideoCleanup(videoRef, bufferingHandlers);
+
   const [, setCurrentTime] = useCurrentTimeSignal();
   const [, setIsVideoWaiting] = useVideoWaitingSignal();
 
diff --git a/src/components/ui/OptimizedVideo.tsx b/src/components/ui/OptimizedVideo.tsx
index cb912bf91..81ade24bf 100644
--- a/src/components/ui/OptimizedVideo.tsx
+++ b/src/components/ui/OptimizedVideo.tsx
@@ -36,7 +36,6 @@ function OptimizedVideo({
   }
 
   const { handlePlaying: handlePlayingForAutoPause } = useVideoAutoPause(ref, canPlay, isPriority);
-  useVideoCleanup(ref, []);
 
   const isReadyRef = useRef(false);
   const handleReady = useLastCallback(() => {
@@ -77,6 +76,8 @@ function OptimizedVideo({
     return mergedHandlers;
   }, [otherBufferingHandlers, restProps]);
 
+  useVideoCleanup(ref, mergedOtherBufferingHandlers);
+
   return (
     // eslint-disable-next-line react/jsx-props-no-spreading
     <video ref={ref} autoPlay {...restProps} {...mergedOtherBufferingHandlers} onPlaying={handlePlaying}>
diff --git a/src/hooks/useVideoCleanup.ts b/src/hooks/useVideoCleanup.ts
index dce93de67..94d477f35 100644
--- a/src/hooks/useVideoCleanup.ts
+++ b/src/hooks/useVideoCleanup.ts
@@ -1,20 +1,31 @@
 import type { RefObject } from 'react';
-import { onFullyIdle, useEffect } from '../lib/teact/teact';
+import { resolveEventType } from '../lib/teact/dom-events';
+import { onFullyIdle, useLayoutEffect } from '../lib/teact/teact';
 
 import unloadVideo from '../util/browser/unloadVideo';
+import { useStateRef } from './useStateRef';
 
-// Fix for memory leak when unmounting video element
-export default function useVideoCleanup(videoRef: RefObject<HTMLVideoElement>, dependencies: any[]) {
-  useEffect(() => {
+// Fix memory leak when unmounting video element
+export default function useVideoCleanup(videoRef: RefObject<HTMLVideoElement>, handlers?: Record<string, AnyFunction>) {
+  const handlersRef = useStateRef(handlers);
+
+  useLayoutEffect(() => {
     const videoEl = videoRef.current;
     if (!videoEl) return undefined;
 
     return () => {
+      // eslint-disable-next-line react-hooks-static-deps/exhaustive-deps
+      const handlers2 = handlersRef.current;
+      if (handlers2) {
+        Object.entries(handlers2).forEach(([key, value]) => {
+          videoEl.removeEventListener(resolveEventType(key, videoEl), value, false);
+        });
+      }
+
       // It may be slow (specifically on iOS), so we postpone it after unmounting
       onFullyIdle(() => {
         unloadVideo(videoEl);
       });
     };
-    // eslint-disable-next-line react-hooks-static-deps/exhaustive-deps
-  }, dependencies);
+  }, [handlersRef, videoRef]);
 }
diff --git a/src/lib/teact/dom-events.ts b/src/lib/teact/dom-events.ts
index 605b7f49d..8d8e41ef4 100644
--- a/src/lib/teact/dom-events.ts
+++ b/src/lib/teact/dom-events.ts
@@ -27,7 +27,7 @@ export function removeEventListener(element: Element, propName: string, handler:
   }
 }
 
-function resolveEventType(propName: string, element: Element) {
+export function resolveEventType(propName: string, element: Element) {
   const eventType = propName
     .replace(/^on/, '')
     .replace(/Capture$/, '').toLowerCase();