fix(project): make page transition smoother

jwplayer · Jun 24, 2021 · e1f6bb9 · e1f6bb9
1 parent 5216923
commit e1f6bb9
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 9 deletions.
diff --git a/src/hooks/useMedia.ts b/src/hooks/useMedia.ts
@@ -8,5 +8,6 @@ export type UseMediaResult<TData = PlaylistItem, TError = unknown> = UseBaseQuer
 export default function useMedia(mediaId: string, enabled: boolean = true): UseMediaResult {
   return useQuery(['media', mediaId], () => getMediaById(mediaId), {
     enabled: !!mediaId && enabled,
+    keepPreviousData: true,
   });
 }
diff --git a/src/screens/Movie/Movie.tsx b/src/screens/Movie/Movie.tsx
@@ -85,8 +85,8 @@ const Movie = ({
   }, [play]);
 
   useEffect(() => {
-    (document.scrollingElement || document.body).scrollTop = 0;
-  }, []);
+    (document.scrollingElement || document.body).scroll({ top: 0, behavior: 'smooth' });
+  }, [id]);
 
   const { data: playlist } = useRecommendedPlaylist(config.recommendationsPlaylist || '', item);
 
@@ -99,8 +99,10 @@ const Movie = ({
     return nextItem && history.push(videoUrl(nextItem, searchParams.get('r'), true));
   }, [history, id, playlist, searchParams]);
 
-  if (isLoading) return <LoadingOverlay />;
-  if (error || !item) return <ErrorPage title="Video not found!" />;
+  console.log(isLoading, item);
+
+  if (isLoading && !item) return <LoadingOverlay />;
+  if ((!isLoading && error) || !item) return <ErrorPage title="Video not found!" />;
 
   const pageTitle = `${item.title} - ${config.siteName}`;
   const canonicalUrl = item ? `${window.location.origin}${movieURL(item)}` : window.location.href;

diff --git a/src/screens/Series/Series.tsx b/src/screens/Series/Series.tsx
@@ -44,7 +44,8 @@ const Series = ({
     true,
     false,
   );
-  const { isLoading, error, data: item } = useMedia(searchParams.get('e') || '');
+  const episodeId = searchParams.get('e') || '';
+  const { isLoading, error, data: item } = useMedia(episodeId);
   const { data: trailerItem } = useMedia(item?.trailerId || '');
 
   const [seasonFilter, setSeasonFilter] = useState<string>('');
@@ -114,11 +115,11 @@ const Series = ({
   }, [play]);
 
   useEffect(() => {
-    (document.scrollingElement || document.body).scrollTop = 0;
-  }, []);
+    (document.scrollingElement || document.body).scroll({ top: 0, behavior: 'smooth' });
+  }, [episodeId]);
 
-  if (isLoading || playlistIsLoading || !searchParams.has('e')) return <LoadingOverlay />;
-  if (error || !item) return <ErrorPage title="Episode not found!" />;
+  if ((!item && isLoading) || playlistIsLoading || !searchParams.has('e')) return <LoadingOverlay />;
+  if ((!isLoading && error) || !item) return <ErrorPage title="Episode not found!" />;
   if (playlistError || !seriesPlaylist) return <ErrorPage title="Series not found!" />;
 
   const pageTitle = `${item.title} - ${config.siteName}`;