feat(videodetail): implement no vertical scroll while playing

jwplayer · Jun 18, 2021 · ec5816c · ec5816c
1 parent 6e269dc
commit ec5816c
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 7 deletions.
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
@@ -17,10 +17,10 @@ const Modal: React.FC<Props> = ({ onClose, children }: Props) => {
   useEffect(() => {
     const onKeyDown = (event: KeyboardEvent) => event.keyCode === 27 && onClose();
 
-    document.body.style.overflow = 'hidden';
+    document.body.style.overflowY = 'hidden';
     document.addEventListener('keydown', onKeyDown);
     return () => {
-      document.body.style.overflow = 'scroll';
+      document.body.style.overflowY = 'auto';
       document.removeEventListener('keydown', onKeyDown);
     };
   }, [onClose]);

diff --git a/src/screens/Movie/Movie.tsx b/src/screens/Movie/Movie.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import type { RouteComponentProps } from 'react-router-dom';
 import { useHistory } from 'react-router';
 import { Helmet } from 'react-helmet';
@@ -73,6 +73,13 @@ const Movie = ({
     setTimeout(() => setHasShared(false), 2000);
   };
 
+  useEffect(() => {
+    if (play) document.body.style.overflowY = 'hidden';
+    return () => {
+      if (play) document.body.style.overflowY = 'auto';
+    };
+  }, [play]);
+
   if (isLoading) return <p>Loading...</p>;
   if (error) return <p>Error loading list</p>;
   if (!item) return <p>Can not find medium</p>;
@@ -101,7 +108,9 @@ const Movie = ({
         <meta property="og:video:type" content="text/html" />
         <meta property="og:video:width" content="1280" />
         <meta property="og:video:height" content="720" />
-        {item.tags.split(',').map(tag => <meta property="og:video:tag" content={tag} key={tag} />)}
+        {item.tags.split(',').map((tag) => (
+          <meta property="og:video:tag" content={tag} key={tag} />
+        ))}
         {item ? <script type="application/ld+json">{generateMovieJSONLD(item)}</script> : null}
       </Helmet>
       <PlaylistContainer playlistId={config?.recommendationsPlaylist || ''} relatedItem={item}>

diff --git a/src/screens/Series/Series.tsx b/src/screens/Series/Series.tsx
@@ -93,12 +93,22 @@ const Series = ({
     }
   }, [history, searchParams, seriesPlaylist]);
 
+  useEffect(() => {
+    if (play) document.body.style.overflowY = 'hidden';
+    return () => {
+      if (play) document.body.style.overflowY = 'auto';
+    };
+  }, [play]);
+
   if (isLoading || playlistIsLoading) return <p>Loading...</p>;
   if (error || playlistError) return <p>Error loading list</p>;
   if (!seriesPlaylist || !item) return <p>Can not find medium</p>;
 
   const pageTitle = `${item.title} - ${config.siteName}`;
-  const canonicalUrl = seriesPlaylist && item ? `${window.location.origin}${episodeURL(seriesPlaylist, item.mediaid)}` : window.location.href;
+  const canonicalUrl =
+    seriesPlaylist && item
+      ? `${window.location.origin}${episodeURL(seriesPlaylist, item.mediaid)}`
+      : window.location.href;
 
   return (
     <React.Fragment>
@@ -121,8 +131,12 @@ const Series = ({
         <meta property="og:video:type" content="text/html" />
         <meta property="og:video:width" content="1280" />
         <meta property="og:video:height" content="720" />
-        {item.tags.split(',').map(tag => <meta property="og:video:tag" content={tag} key={tag} />)}
-        {seriesPlaylist && item ? <script type="application/ld+json">{generateEpisodeJSONLD(seriesPlaylist, item)}</script> : null}
+        {item.tags.split(',').map((tag) => (
+          <meta property="og:video:tag" content={tag} key={tag} />
+        ))}
+        {seriesPlaylist && item ? (
+          <script type="application/ld+json">{generateEpisodeJSONLD(seriesPlaylist, item)}</script>
+        ) : null}
       </Helmet>
       <VideoComponent
         title={seriesPlaylist.title}