feat(videodetail): remove watchlistlistener on play complete

src/containers/Cinema/Cinema.tsx

@@ -34,8 +34,8 @@ const Cinema: React.FC<Props> = ({ item, onPlay, onPause, onComplete, isTrailer
 
     return { duration, progress } as VideoProgress;
   };
-  const { saveItem } = useWatchHistory();
-  useWatchHistoryListener(() => (enableWatchHistory ? saveItem(item, getProgress) : null));
+  const { saveItem, removeItem } = useWatchHistory();
+  const { removeListener } = useWatchHistoryListener(() => (enableWatchHistory ? saveItem(item, getProgress) : null));
 
   useEffect(() => {
     const getPlayer = () => window.jwplayer && (window.jwplayer('cinema') as jwplayer.JWPlayer);
@@ -55,14 +55,30 @@ const Cinema: React.FC<Props> = ({ item, onPlay, onPause, onComplete, isTrailer
           progress && duration && player.seek(duration * progress);
         }
       });
-      player.on('complete', () => onComplete && onComplete());
+      player.on('complete', () => {
+        removeItem(item);
+        removeListener();
+        return onComplete && onComplete();
+      });
     };
 
     if (config.player && !initialized) {
       getPlayer() ? loadVideo() : addScript(scriptUrl, loadVideo);
       setInitialized(true);
     }
-  }, [item, onPlay, onPause, onComplete, config.player, file, scriptUrl, initialized, enableWatchHistory]);
+  }, [
+    item,
+    onPlay,
+    onPause,
+    onComplete,
+    config.player,
+    file,
+    scriptUrl,
+    initialized,
+    enableWatchHistory,
+    removeItem,
+    removeListener,
+  ]);
 
   return <div className={styles.Cinema} id="cinema" />;
 };

src/hooks/useWatchHistoryListener.ts

@@ -1,16 +1,28 @@
 import { useEffect } from 'react';
 
-export const useWatchHistoryListener = (saveItem: () => void): void => {
-  useEffect(() => {
-    const visibilityListener = () => document.visibilityState === 'hidden' && saveItem();
+type WatchHistoryListenerReturn = {
+  removeListener: () => void;
+};
+
+export const useWatchHistoryListener = (saveItem: () => void): WatchHistoryListenerReturn => {
+  let listen = true;
+  const visibilityListener = () => document.visibilityState === 'hidden' && saveItem();
 
+  useEffect(() => {
     window.addEventListener('beforeunload', saveItem);
     window.addEventListener('visibilitychange', visibilityListener);
 
     return () => {
-      saveItem();
+      if (listen) saveItem();
       window.removeEventListener('beforeunload', saveItem);
       window.removeEventListener('visibilitychange', visibilityListener);
     };
   }, []);
+  const removeListener = () => {
+    listen = false;
+    window.removeEventListener('beforeunload', saveItem);
+    window.removeEventListener('visibilitychange', visibilityListener);
+  };
+
+  return { removeListener };
 };