From d776bf036f3feb5a94595c51011cebadc10a2ab8 Mon Sep 17 00:00:00 2001 From: Roy Schut Date: Thu, 17 Jun 2021 14:29:59 +0200 Subject: [PATCH] feat(project): use watchhistory between min and max values --- src/containers/Cinema/Cinema.tsx | 29 ++++++++-------------------- src/enum/VideoProgressMinMax.ts | 4 ++++ src/hooks/useWatchHistoryListener.ts | 19 +++--------------- src/screens/Home/Home.tsx | 8 +++++--- src/stores/WatchHistoryStore.ts | 15 +++++++++----- 5 files changed, 30 insertions(+), 45 deletions(-) create mode 100644 src/enum/VideoProgressMinMax.ts diff --git a/src/containers/Cinema/Cinema.tsx b/src/containers/Cinema/Cinema.tsx index ae4cedcb2..03789ce89 100644 --- a/src/containers/Cinema/Cinema.tsx +++ b/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 = ({ 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 = ({ 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
; }; diff --git a/src/enum/VideoProgressMinMax.ts b/src/enum/VideoProgressMinMax.ts new file mode 100644 index 000000000..1f1a28d25 --- /dev/null +++ b/src/enum/VideoProgressMinMax.ts @@ -0,0 +1,4 @@ +export enum VideoProgressMinMax { + Min = 0.05, + Max = 0.95, +} diff --git a/src/hooks/useWatchHistoryListener.ts b/src/hooks/useWatchHistoryListener.ts index eb6bcc851..5ca3d1316 100644 --- a/src/hooks/useWatchHistoryListener.ts +++ b/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 }; }; diff --git a/src/screens/Home/Home.tsx b/src/screens/Home/Home.tsx index 9df64614e..8dd699012 100644 --- a/src/screens/Home/Home.tsx +++ b/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() as React.MutableRefObject; 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 = () => { diff --git a/src/stores/WatchHistoryStore.ts b/src/stores/WatchHistoryStore.ts index d36d907b9..488129456 100644 --- a/src/stores/WatchHistoryStore.ts +++ b/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 }; };