feat(project): use watchhistory between min and max values

src/containers/Cinema/Cinema.tsx

@@ -3,6 +3,7 @@ import type { Config } from 'types/Config';
 import type { PlaylistItem } from 'types/playlist';
 import type { VideoProgress } from 'types/video';
 
+import { VideoProgressMinMax } from '../../enum/VideoProgressMinMax';
 import { useWatchHistoryListener } from '../../hooks/useWatchHistoryListener';
 import { watchHistoryStore, useWatchHistory } from '../../stores/WatchHistoryStore';
 import { ConfigContext } from '../../providers/ConfigProvider';
@@ -34,8 +35,8 @@ const Cinema: React.FC<Props> = ({ item, onPlay, onPause, onComplete, isTrailer
 
     return { duration, progress } as VideoProgress;
   };
-  const { saveItem, removeItem } = useWatchHistory();
-  const { removeListener } = useWatchHistoryListener(() => (enableWatchHistory ? saveItem(item, getProgress) : null));
+  const { saveItem } = useWatchHistory();
+  useWatchHistoryListener(() => (enableWatchHistory ? saveItem(item, getProgress) : null));
 
   useEffect(() => {
     const getPlayer = () => window.jwplayer && (window.jwplayer('cinema') as jwplayer.JWPlayer);
@@ -52,33 +53,19 @@ const Cinema: React.FC<Props> = ({ item, onPlay, onPause, onComplete, isTrailer
         if (applyWatchHistory) {
           applyWatchHistory = false; // Only the first time beforePlay
           const { progress, duration } = watchHistoryItem || {};
-          progress && duration && player.seek(duration * progress);
+          if (progress && duration && progress > VideoProgressMinMax.Min && progress < VideoProgressMinMax.Max) {
+            player.seek(duration * progress);
+          }
         }
       });
-      player.on('complete', () => {
-        removeItem(item);
-        removeListener();
-        return onComplete && onComplete();
-      });
+      player.on('complete', () => onComplete && onComplete());
     };
 
     if (config.player && !initialized) {
       getPlayer() ? loadVideo() : addScript(scriptUrl, loadVideo);
       setInitialized(true);
     }
-  }, [
-    item,
-    onPlay,
-    onPause,
-    onComplete,
-    config.player,
-    file,
-    scriptUrl,
-    initialized,
-    enableWatchHistory,
-    removeItem,
-    removeListener,
-  ]);
+  }, [item, onPlay, onPause, onComplete, config.player, file, scriptUrl, initialized, enableWatchHistory]);
 
   return <div className={styles.Cinema} id="cinema" />;
 };

src/enum/VideoProgressMinMax.ts

@@ -0,0 +1,4 @@
+export enum VideoProgressMinMax {
+  Min = 0.05,
+  Max = 0.95,
+}

src/hooks/useWatchHistoryListener.ts

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

src/screens/Home/Home.tsx

@@ -10,7 +10,7 @@ import classNames from 'classnames';
 import PlaylistContainer from '../../containers/Playlist/PlaylistContainer';
 import { favoritesStore } from '../../stores/FavoritesStore';
 import { PersonalShelf } from '../../enum/PersonalShelf';
-import { watchHistoryStore } from '../../stores/WatchHistoryStore';
+import { useWatchHistory, watchHistoryStore } from '../../stores/WatchHistoryStore';
 import useBlurImageUpdater from '../../hooks/useBlurImageUpdater';
 import ShelfComponent, { featuredTileBreakpoints, tileBreakpoints } from '../../components/Shelf/Shelf';
 import { ConfigContext } from '../../providers/ConfigProvider';
@@ -39,7 +39,9 @@ const Home = (): JSX.Element => {
   const breakpoint = useBreakpoint();
   const listRef = useRef<List>() as React.MutableRefObject<List>;
   const content: Content[] = config?.content;
-  const watchHistory = watchHistoryStore.useState((state) => state.watchHistory);
+
+  const { getPlaylist: getWatchHistoryPlayist } = useWatchHistory();
+  const watchHistory = getWatchHistoryPlayist();
   const watchHistoryLoaded = watchHistoryStore.useState((state) => state.playlistItemsLoaded);
   const favorites = favoritesStore.useState((state) => state.favorites);
 
@@ -84,7 +86,7 @@ const Home = (): JSX.Element => {
     const isLargeScreen = breakpoint >= Breakpoint.md;
 
     if (!item) return 0;
-    if (item.playlistId === PersonalShelf.ContinueWatching && !watchHistory.length) return 0;
+    if (item.playlistId === PersonalShelf.ContinueWatching && !watchHistory.playlist.length) return 0;
     if (item.playlistId === PersonalShelf.Favorites && !favorites.length) return 0;
 
     const calculateFeatured = () => {

src/stores/WatchHistoryStore.ts

@@ -3,6 +3,7 @@ import type { Playlist, PlaylistItem } from 'types/playlist';
 import type { VideoProgress } from 'types/video';
 import type { WatchHistoryItem } from 'types/watchHistory';
 
+import { VideoProgressMinMax } from '../enum/VideoProgressMinMax';
 import { PersonalShelf } from '../enum/PersonalShelf';
 import { getMediaById } from '../services/api.service';
 import * as persist from '../utils/persist';
@@ -115,13 +116,17 @@ export const useWatchHistory = (): UseWatchHistoryReturn => {
     return watchHistory.some(({ mediaid }) => mediaid === item.mediaid);
   };
 
-  const getPlaylist = () => {
-    return {
+  const getPlaylist = () =>
+    ({
       feedid: PersonalShelf.ContinueWatching,
       title: 'Continue watching',
-      playlist: watchHistory.filter(({ playlistItem }) => !!playlistItem).map(({ playlistItem }) => playlistItem),
-    } as Playlist;
-  };
+      playlist: watchHistory
+        .filter(
+          ({ playlistItem, progress }) =>
+            !!playlistItem && progress > VideoProgressMinMax.Min && progress < VideoProgressMinMax.Max,
+        )
+        .map(({ playlistItem }) => playlistItem),
+    } as Playlist);
 
   return { saveItem, removeItem, hasItem, getPlaylist };
 };