feat(videodetail): hide metadata on mouse activity

package.json

@@ -20,6 +20,7 @@
     "pre-commit": "lint-staged && TZ=UTC yarn test --coverage --watchAll=false --ci --bail=1"
   },
   "dependencies": {
+    "@types/jwplayer": "^8.2.6",
     "@types/react-virtualized": "^9.21.11",
     "classnames": "^2.3.1",
     "lodash.merge": "^4.6.2",

src/components/Video/Video.module.scss

@@ -127,26 +127,27 @@
   left: 0;
   background-color: black;
 }
-.background {
-  width: 100vw;
-  height: 100vh;
-  background-size: cover;
-  background-position: center;
-  opacity: 0.7;
-}
 .player {
   position: absolute;
   left: 0;
   top: 0;
   width: 100vw;
   height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 .playerContent {
   position: absolute;
   top: 0;
   margin: 30px 62px;
   max-width: 50%;
   display: flex;
+
+  &.hidden {
+    transition: opacity 0.6s ease;
+    opacity: 0;
+  }
 }
 .playerInfo {
   margin: 0px 30px;

src/components/Video/Video.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import type { PlaylistItem } from 'types/playlist';
 import classNames from 'classnames';
 
@@ -25,6 +25,8 @@ type Props = {
 };
 
 const Video: React.FC<Props> = ({ item, play, startPlay, goBack, posterFading, relatedShelf }: Props) => {
+  const [isPlaying, setIsPlaying] = useState<boolean>(false);
+  const [mouseActive, setMouseActive] = useState(false);
   const breakpoint: Breakpoint = useBreakpoint();
   const isLargeScreen = breakpoint >= Breakpoint.md;
   const isMobile = breakpoint === Breakpoint.xs;
@@ -38,6 +40,13 @@ const Video: React.FC<Props> = ({ item, play, startPlay, goBack, posterFading, r
   if (item.rating) metaData.push(item.rating);
   const metaString = metaData.join(' • ');
 
+  let timeout: NodeJS.Timeout;
+  const mouseActivity = () => {
+    setMouseActive(true);
+    clearTimeout(timeout);
+    timeout = setTimeout(() => setMouseActive(false), 2000);
+  };
+
   //todo: breakpoints not same as css (so info padding-top acts too soon)
 
   return (
@@ -70,12 +79,11 @@ const Video: React.FC<Props> = ({ item, play, startPlay, goBack, posterFading, r
       </div>
       {!!relatedShelf && <div className={styles.other}>{relatedShelf}</div>}
       {play && (
-        <div className={styles.playerContainer}>
-          <div className={styles.background} style={{ backgroundImage: `url('${item.image}')` }} />
+        <div className={styles.playerContainer} onMouseMove={mouseActivity} onClick={mouseActivity}>
           <div className={styles.player}>
-            <Cinema item={item} />
+            <Cinema item={item} onPlay={() => setIsPlaying(true)} onPause={() => setIsPlaying(false)} />
           </div>
-          <div className={styles.playerContent}>
+          <div className={classNames(styles.playerContent, { [styles.hidden]: isPlaying && !mouseActive })}>
             <IconButton aria-label="Back" onClick={goBack}>
               <ArrowLeft />
             </IconButton>

src/components/Video/__snapshots__/Video.test.tsx.snap

@@ -154,10 +154,6 @@ exports[`<Video> renders and matches snapshot 1`] = `
     <div
       class="playerContainer"
     >
-      <div
-        class="background"
-        style="background-image: url(http://test/img.jpg);"
-      />
       <div
         class="player"
       >

src/containers/Cinema/Cinema.tsx

@@ -1,6 +1,5 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import type { Config } from 'types/Config';
-import type { JWPlayer } from 'types/jwplayer';
 import type { PlaylistItem } from 'types/playlist';
 
 import { ConfigContext } from '../../providers/ConfigProvider';
@@ -10,22 +9,34 @@ import styles from './Cinema.module.scss';
 
 type Props = {
   item: PlaylistItem;
+  onPlay: () => void;
+  onPause: () => void;
 };
 
-const Cinema: React.FC<Props> = ({ item }: Props) => {
+const Cinema: React.FC<Props> = ({ item, onPlay, onPause }: Props) => {
   const config: Config = useContext(ConfigContext);
   const file = item?.sources[0]?.file;
   const scriptUrl = `https://content.jwplatform.com/libraries/${config.player}.js`;
+  const [init, setInit] = useState(true);
 
   useEffect(() => {
-    const getPlayer = () => window.jwplayer && (window.jwplayer('cinema') as JWPlayer);
-    const setupMedia = () => getPlayer().setup({ file });
+    const getPlayer = () => window.jwplayer && (window.jwplayer('cinema') as jwplayer.JWPlayer);
+    const setupMedia = () => {
+      if (init) {
+        const player = getPlayer();
+        player.setup({ file });
+        player.on('ready', () => console.info('Player ready'));
+        player.on('play', () => onPlay());
+        player.on('pause', () => onPause());
+        setInit(false);
+      }
+    };
 
     if (config.player) {
       if (!window.jwplayer) addScript(scriptUrl, setupMedia);
       else setupMedia();
     }
-  }, [config.player, file, scriptUrl]);
+  }, [config.player, file, scriptUrl, onPlay, onPause, init]);
 
   return <div className={styles.Cinema} id="cinema" />;
 };

yarn.lock

@@ -1852,6 +1852,11 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
 
+"@types/jwplayer@^8.2.6":
+  version "8.2.6"
+  resolved "https://registry.yarnpkg.com/@types/jwplayer/-/jwplayer-8.2.6.tgz#d743861051b15bb531a7d0d5fbd68b11d933a350"
+  integrity sha512-1gOPtEwh7OwrJxqBE18IdzI/pPpYeD9AnKVoi8ROMWC+hMfZxrmpZIuvTG3vChTiQe3ENIGYBABVRYwf5gJsPA==
+
 "@types/lodash.merge@^4.6.6":
   version "4.6.6"
   resolved "https://registry.yarnpkg.com/@types/lodash.merge/-/lodash.merge-4.6.6.tgz#b84b403c1d31bc42d51772d1cd5557fa008cd3d6"
@@ -7130,7 +7135,6 @@ minipass-fetch@^1.3.0, minipass-fetch@^1.3.2:
   resolved "https://registry.yarnpkg.com/minipass-fetch/-/minipass-fetch-1.3.3.tgz#34c7cea038c817a8658461bf35174551dce17a0a"
   integrity sha512-akCrLDWfbdAWkMLBxJEeWTdNsjML+dt5YgOI4gJ53vuO0vrmYQkUPxa6j6V65s9CcePIr2SSWqjT2EcrNseryQ==
   dependencies:
-    encoding "^0.1.12"
     minipass "^3.1.0"
     minipass-sized "^1.0.3"
     minizlib "^2.0.0"