From 0397ac3e66b4b90c7061b712a51548a4f4cd3b2a Mon Sep 17 00:00:00 2001
From: Roy Schut <roy@videodock.com>
Date: Sun, 30 May 2021 20:37:25 +0200
Subject: [PATCH] feat(videodetail): add cinema and jwplayer

---
 src/components/Button/Button.module.scss      |  18 +-
 .../DynamicBlur/DynamicBlur.module.scss       |   5 +-
 src/components/Video/Video.module.scss        | 136 ++++++++----
 src/components/Video/Video.tsx                |  93 +++++----
 .../Video/__snapshots__/Video.test.tsx.snap   | 193 ++++++++++++------
 src/containers/Cinema/Cinema.module.scss      |   7 +
 src/containers/Cinema/Cinema.test.tsx         |  12 ++
 src/containers/Cinema/Cinema.tsx              |  33 +++
 .../Cinema/__snapshots__/Cinema.test.tsx.snap |  10 +
 src/containers/Shelf/Shelf.tsx                |   5 +-
 src/containers/Video/Video.tsx                |  57 ++++--
 src/hooks/usePlaylist.ts                      |  12 +-
 src/icons/Play.tsx                            |  10 +
 src/utils/dom.ts                              |  10 +
 types/global.d.ts                             |   1 +
 types/jwplayer.d.ts                           |   3 +
 16 files changed, 443 insertions(+), 162 deletions(-)
 create mode 100644 src/containers/Cinema/Cinema.module.scss
 create mode 100644 src/containers/Cinema/Cinema.test.tsx
 create mode 100644 src/containers/Cinema/Cinema.tsx
 create mode 100644 src/containers/Cinema/__snapshots__/Cinema.test.tsx.snap
 create mode 100644 src/icons/Play.tsx
 create mode 100644 types/jwplayer.d.ts

diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss
index 051447b39..63a438254 100644
--- a/src/components/Button/Button.module.scss
+++ b/src/components/Button/Button.module.scss
@@ -12,6 +12,8 @@
 
   color: var(--highlight-color, white);
   font-family: theme.$body-alt-font-family;
+  font-size: 16px;
+  line-height: 18px;
   text-align: center;
   text-decoration: none;
 
@@ -20,7 +22,12 @@
   border-radius: 4px;
 
   cursor: pointer;
-  transition: background 0.1s ease, transform 0.1s ease;
+  transition: background-color 0.1s ease, transform 0.1s ease;
+
+  > svg {
+    height: 18px;
+    width: 18px;
+  }
 
   &.fullWidth {
     width: 100%;
@@ -61,5 +68,12 @@
   }
 }
 .startIcon {
-  margin-right: 13px;
+  margin-right: 11px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  > svg {
+    height: 20px;
+    width: 20px;
+  }
 }
diff --git a/src/components/DynamicBlur/DynamicBlur.module.scss b/src/components/DynamicBlur/DynamicBlur.module.scss
index d1cbef02e..56ac1b2de 100644
--- a/src/components/DynamicBlur/DynamicBlur.module.scss
+++ b/src/components/DynamicBlur/DynamicBlur.module.scss
@@ -5,10 +5,11 @@
   position: fixed;
   height: 100vh;
   width: 100vw;
-  background-position: center;
+  background-position: center center;
   background-size: cover;
+  background-repeat: no-repeat;
   box-sizing: border-box;
   filter: blur(30px);
-  z-index: -1;
+  z-index: -2;
   opacity: 0;
 }
diff --git a/src/components/Video/Video.module.scss b/src/components/Video/Video.module.scss
index c7169e385..049f908e2 100644
--- a/src/components/Video/Video.module.scss
+++ b/src/components/Video/Video.module.scss
@@ -1,52 +1,112 @@
 @use '../../styles/variables';
 @use '../../styles/theme';
+@use '../../styles/mixins/responsive';
 
 .video {
-  padding: 50px;
-  color: white;
+  padding: 56px 56px;
+  color: var(--primary-color);
+  font-family: var(--body-font-family);
+  font-weight: 400;
+  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 3px 4px rgba(0, 0, 0, 0.12), 0px 1px 5px rgba(0, 0, 0, 0.2);
+
+  @include responsive.tablet-only() {
+    padding: 24px;
+  }
+  @include responsive.mobile-only() {
+    padding: 16px;
+  }
 }
 .main {
   display: flex;
+  position: relative;
 }
 .info {
-  width: 50%;
+  max-width: 450px;
+  @include responsive.tablet-only() {
+    max-width: 350px;
+  }
+  @include responsive.mobile-only() {
+    width: 100%;
+    padding-top: 225px;
+  }
 }
 .title {
-  font-weight: 900;
-  font-size: larger;
-  margin: 20px 0px;
+  font-size: 34px;
+  font-weight: 700;
+  line-height: 36px;
+  letter-spacing: 0.25px;
+  margin: 8px 0px;
 }
 .meta {
-  margin: 20px 0px;
-  > ul {
-    padding-inline-start: 0px;
-    display: flex;
-    > li {
-      margin-right: 30px;
+  line-height: 18px;
+  font-size: 16px;
+  letter-spacing: 0.15px;
+  margin-bottom: 8px;
+}
+.description {
+  font-size: 18px;
+  line-height: 20px;
+  letter-spacing: 0.5px;
+  margin-bottom: 24px;
+}
+.playButton {
+  justify-content: center;
+  margin-bottom: 8px;
+}
+.otherButtons {
+  display: flex;
+  justify-content: center;
+  > button {
+    margin-right: 8px;
+    width: 33%;
+  }
+  > button:last-child {
+    margin-right: 0px;
+  }
+  @include responsive.mobile-only() {
+    flex-wrap: wrap;
+    > button:first-child {
+      margin-bottom: 8px;
+      margin-right: 0px;
+      width: 100%;
     }
-    > li:first-child {
-      list-style-type: none;
+    > button:not(:first-child) {
+      flex: 1;
     }
   }
 }
-.buttons {
-  margin: 20px 0px;
-  > button {
-    margin-right: 20px;
-  }
+.poster {
+  position: absolute;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  top: 0;
+  right: 0;
+  z-index: -1;
 }
-.banner {
-  width: 50%;
-  position: relative;
-  opacity: 0.7;
-  > img {
-    width: 100%;
+.posterNormal {
+  width: 720px;
+  height: 405px;
+  border-radius: 4px;
+  mask-image: linear-gradient(-90deg, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
+  -webkit-mask-image: linear-gradient(-90deg, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
+
+  @include responsive.tablet-only() {
+    width: 600px;
+    height: 338px;
   }
-  &:hover {
-    cursor: pointer;
-    opacity: 1;
+  @include responsive.mobile-only() {
+    width: 100vw;
+    mask-image: radial-gradient(farthest-corner at 80% 20%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 60%);
+    -webkit-mask-image: radial-gradient(farthest-corner at 80% 20%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 60%);
   }
 }
+.posterFading {
+  width: 1280px;
+  height: 640px;
+  mask-image: radial-gradient(farthest-corner at 80% 20%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 60%);
+  -webkit-mask-image: radial-gradient(farthest-corner at 80% 20%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 60%);
+}
 .playIcon {
   position: absolute;
   left: calc(50% - 35px);
@@ -74,18 +134,20 @@
   background-position: center;
   opacity: 0.7;
 }
-.playerInfo {
+.player {
   position: absolute;
+  left: 0;
   top: 0;
-  margin: 50px;
+  width: 100vw;
+  height: 100vh;
+}
+.playerContent {
+  position: absolute;
+  top: 0;
+  margin: 30px 62px;
   max-width: 50%;
   display: flex;
-
-  > h2 {
-    font-size: x-large;
-  }
 }
-.backButton {
-  padding: 10px;
-  font-size: x-large;
+.playerInfo {
+  margin: 0px 30px;
 }
diff --git a/src/components/Video/Video.tsx b/src/components/Video/Video.tsx
index 5a2ad5985..d37509597 100644
--- a/src/components/Video/Video.tsx
+++ b/src/components/Video/Video.tsx
@@ -1,6 +1,14 @@
 import React from 'react';
 import type { PlaylistItem } from 'types/playlist';
+import classNames from 'classnames';
 
+import Cinema from '../../containers/Cinema/Cinema';
+import useBreakpoint, { Breakpoint } from '../../hooks/useBreakpoint';
+import Favorite from '../../icons/Favorite';
+import PlayTrailer from '../../icons/PlayTrailer';
+import Share from '../../icons/Share';
+import ArrowLeft from '../../icons/ArrowLeft';
+import Play from '../../icons/Play';
 import Button from '../Button/Button';
 import IconButton from '../IconButton/IconButton';
 
@@ -11,59 +19,68 @@ type Props = {
   play: boolean;
   startPlay: () => void;
   goBack: () => void;
+  posterFading: boolean;
+  relatedShelf?: JSX.Element;
 };
 
-const Video: React.FC<Props> = ({ item, play, startPlay, goBack }: Props) => {
-  const fullYear: number = new Date(item.pubdate).getFullYear();
-  const duration: string = `${Math.floor(item.duration / 60)}h ${item.duration % 60}m`;
+const Video: React.FC<Props> = ({ item, play, startPlay, goBack, posterFading, relatedShelf }: Props) => {
+  const posterImage = item.image.replace('720', '1280'); // Todo: 1280 should be sent from API
+  const breakpoint = useBreakpoint();
+  const isMobile = breakpoint === Breakpoint.xs;
+
+  const metaData = [];
+  if (item.pubdate) metaData.push(new Date(item.pubdate).getFullYear());
+  if (item.duration) metaData.push(`${Math.floor(item.duration / 60)}h ${item.duration % 60}m`);
+  if (item.genre) metaData.push(item.genre);
+  if (item.rating) metaData.push(item.rating);
+  const metaString = metaData.join(' • ');
+
+  //todo: image based on screen res, etc (like Home)
+  //todo: breakpoints not same as css (so info padding-top acts too soon)
+  //todo: description enlarger
+
   return (
     <div className={styles.video}>
       <div className={styles.main}>
         <div className={styles.info}>
           <h2 className={styles.title}>{item.title}</h2>
-          <div className={styles.meta}>
-            <ul>
-              <li>{fullYear}</li>
-              <li>{duration}</li>
-              <li>{item.genre}</li>
-              <li>{item.rating}</li>
-            </ul>
+          <div className={styles.meta}>{metaString}</div>
+          {!isMobile && <div className={styles.description}>{item.description}</div>}
+          <div className={styles.playButton}>
+            <Button
+              color="secondary"
+              label={'Start watching'}
+              startIcon={<Play />}
+              onClick={startPlay}
+              active={play}
+              fullWidth
+            />
           </div>
-          <div className={styles.description}>{item.description}</div>
-          <div className={styles.buttons}>
-            <Button label={'Favorite'} onClick={() => null} active />
-            <Button label={'Trailer'} onClick={() => null} active />
-            <Button label={'Share'} onClick={() => null} active />
+          <div className={styles.otherButtons}>
+            <Button label={'Trailer'} startIcon={<PlayTrailer />} onClick={() => null} />
+            <Button label={'Favorite'} startIcon={<Favorite />} onClick={() => null} />
+            <Button label={'Share'} startIcon={<Share />} onClick={() => null} />
           </div>
         </div>
-        <div className={styles.banner} onClick={startPlay}>
-          <img src={item.image} />
-          <div className={styles.playIcon}>&#9658;</div>
-        </div>
-      </div>
-      <div className={styles.other}>
-        <h3>Resting shelf</h3>
+        <div
+          className={classNames(styles.poster, posterFading ? styles.posterFading : styles.posterNormal)}
+          style={{ backgroundImage: `url('${posterImage}')` }}
+        />
       </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.player}></div>
-          <div className={styles.playerInfo}>
-            <div className={styles.backButton}>
-              <IconButton aria-label="Back" onClick={goBack}>
-                <p>&#8592;</p>
-              </IconButton>
-            </div>
-            <div>
+          <div className={styles.player}>
+            <Cinema item={item} />
+          </div>
+          <div className={styles.playerContent}>
+            <IconButton aria-label="Back" onClick={goBack}>
+              <ArrowLeft />
+            </IconButton>
+            <div className={styles.playerInfo}>
               <h2 className={styles.title}>{item.title}</h2>
-              <div className={styles.meta}>
-                <ul>
-                  <li>{fullYear}</li>
-                  <li>{duration}</li>
-                  <li>{item.genre}</li>
-                  <li>{item.rating}</li>
-                </ul>
-              </div>
+              <div className={styles.meta}>{metaString}</div>
               <div className={styles.description}>{item.description}</div>
             </div>
           </div>
diff --git a/src/components/Video/__snapshots__/Video.test.tsx.snap b/src/components/Video/__snapshots__/Video.test.tsx.snap
index d572f7bb4..0eb654f3e 100644
--- a/src/components/Video/__snapshots__/Video.test.tsx.snap
+++ b/src/components/Video/__snapshots__/Video.test.tsx.snap
@@ -19,44 +19,116 @@ exports[`<Video> renders and matches snapshot 1`] = `
         <div
           class="meta"
         >
-          <ul>
-            <li>
-              1970
-            </li>
-            <li>
-              5h 54m
-            </li>
-            <li>
-              Tester
-            </li>
-            <li>
-              CC_CC
-            </li>
-          </ul>
+          1970 • 5h 54m • Tester • CC_CC
         </div>
-        <div>
+        <div
+          class="description"
+        >
           Test item description
         </div>
         <div
-          class="buttons"
+          class="playButton"
         >
           <button
-            class="button active"
+            class="button active secondary fullWidth"
           >
+            <div
+              class="startIcon"
+            >
+              <svg
+                aria-hidden="true"
+                class="icon"
+                focusable="false"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <g>
+                  <path
+                    d="M8,5.14V19.14L19,12.14L8,5.14Z"
+                    fill="currentColor"
+                  />
+                </g>
+              </svg>
+            </div>
             <span>
-              Favorite
+              Start watching
             </span>
           </button>
+        </div>
+        <div
+          class="otherButtons"
+        >
           <button
-            class="button active"
+            class="button"
           >
+            <div
+              class="startIcon"
+            >
+              <svg
+                aria-hidden="true"
+                class="icon"
+                focusable="false"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <g>
+                  <path
+                    d="M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M10,8V16L15,12L10,8Z"
+                    fill="currentColor"
+                  />
+                </g>
+              </svg>
+            </div>
             <span>
               Trailer
             </span>
           </button>
           <button
-            class="button active"
+            class="button"
           >
+            <div
+              class="startIcon"
+            >
+              <svg
+                aria-hidden="true"
+                class="icon"
+                focusable="false"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <g>
+                  <path
+                    d="M12.1,18.55L12,18.65L11.89,18.55C7.14,14.24 4,11.39 4,8.5C4,6.5 5.5,5 7.5,5C9.04,5 10.54,6 11.07,7.36H12.93C13.46,6 14.96,5 16.5,5C18.5,5 20,6.5 20,8.5C20,11.39 16.86,14.24 12.1,18.55M16.5,3C14.76,3 13.09,3.81 12,5.08C10.91,3.81 9.24,3 7.5,3C4.42,3 2,5.41 2,8.5C2,12.27 5.4,15.36 10.55,20.03L12,21.35L13.45,20.03C18.6,15.36 22,12.27 22,8.5C22,5.41 19.58,3 16.5,3Z"
+                    fill="currentColor"
+                  />
+                </g>
+              </svg>
+            </div>
+            <span>
+              Favorite
+            </span>
+          </button>
+          <button
+            class="button"
+          >
+            <div
+              class="startIcon"
+            >
+              <svg
+                aria-hidden="true"
+                class="icon"
+                focusable="false"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <g>
+                  <path
+                    d="M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z"
+                    fill="currentColor"
+                  />
+                </g>
+              </svg>
+            </div>
             <span>
               Share
             </span>
@@ -64,24 +136,9 @@ exports[`<Video> renders and matches snapshot 1`] = `
         </div>
       </div>
       <div
-        class="banner"
-      >
-        <img
-          src="http://test/img.jpg"
-        />
-        <div
-          class="playIcon"
-        >
-          ►
-        </div>
-      </div>
-    </div>
-    <div
-      class="other"
-    >
-      <h3>
-        Resting shelf
-      </h3>
+        class="poster posterNormal"
+        style="background-image: url(http://test/img.jpg);"
+      />
     </div>
     <div
       class="playerContainer"
@@ -90,24 +147,41 @@ exports[`<Video> renders and matches snapshot 1`] = `
         class="background"
         style="background-image: url(http://test/img.jpg);"
       />
-      <div />
       <div
-        class="playerInfo"
+        class="player"
       >
         <div
-          class="backButton"
+          class="Cinema"
+          id="cinema"
+        />
+      </div>
+      <div
+        class="playerContent"
+      >
+        <div
+          aria-label="Back"
+          class="iconButton"
+          role="button"
+          tabindex="0"
         >
-          <div
-            aria-label="Back"
-            class="iconButton"
-            role="button"
+          <svg
+            aria-hidden="true"
+            class="icon"
+            focusable="false"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <p>
-              ←
-            </p>
-          </div>
+            <g>
+              <path
+                d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"
+                fill="currentColor"
+              />
+            </g>
+          </svg>
         </div>
-        <div>
+        <div
+          class="playerInfo"
+        >
           <h2
             class="title"
           >
@@ -116,22 +190,11 @@ exports[`<Video> renders and matches snapshot 1`] = `
           <div
             class="meta"
           >
-            <ul>
-              <li>
-                1970
-              </li>
-              <li>
-                5h 54m
-              </li>
-              <li>
-                Tester
-              </li>
-              <li>
-                CC_CC
-              </li>
-            </ul>
+            1970 • 5h 54m • Tester • CC_CC
           </div>
-          <div>
+          <div
+            class="description"
+          >
             Test item description
           </div>
         </div>
diff --git a/src/containers/Cinema/Cinema.module.scss b/src/containers/Cinema/Cinema.module.scss
new file mode 100644
index 000000000..2e12c4740
--- /dev/null
+++ b/src/containers/Cinema/Cinema.module.scss
@@ -0,0 +1,7 @@
+@use '../../styles/variables';
+@use '../../styles/theme';
+
+.Cinema {
+  width: 100vw;
+  height: 100vh;
+}
diff --git a/src/containers/Cinema/Cinema.test.tsx b/src/containers/Cinema/Cinema.test.tsx
new file mode 100644
index 000000000..8b86bcfe6
--- /dev/null
+++ b/src/containers/Cinema/Cinema.test.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import Cinema from './Cinema';
+
+describe('<Cinema>', () => {
+  test('renders and matches snapshot', () => {
+    const { container } = render(<Cinema />);
+
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/src/containers/Cinema/Cinema.tsx b/src/containers/Cinema/Cinema.tsx
new file mode 100644
index 000000000..d3ac8c0d6
--- /dev/null
+++ b/src/containers/Cinema/Cinema.tsx
@@ -0,0 +1,33 @@
+import React, { useContext, useEffect } 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';
+import { addScript } from '../../utils/dom';
+
+import styles from './Cinema.module.scss';
+
+type Props = {
+  item: PlaylistItem;
+};
+
+const Cinema: React.FC<Props> = ({ item }: Props) => {
+  const config: Config = useContext(ConfigContext);
+  const file = item?.sources[0]?.file;
+  const scriptUrl = `https://content.jwplatform.com/libraries/${config.player}.js`;
+
+  useEffect(() => {
+    const getPlayer = () => window.jwplayer && (window.jwplayer('cinema') as JWPlayer);
+    const setupMedia = () => getPlayer().setup({ file });
+
+    if (config.player) {
+      if (!window.jwplayer) addScript(scriptUrl, setupMedia);
+      else setupMedia();
+    }
+  }, [config.player, file, scriptUrl]);
+
+  return <div className={styles.Cinema} id="cinema" />;
+};
+
+export default Cinema;
diff --git a/src/containers/Cinema/__snapshots__/Cinema.test.tsx.snap b/src/containers/Cinema/__snapshots__/Cinema.test.tsx.snap
new file mode 100644
index 000000000..858a99c5a
--- /dev/null
+++ b/src/containers/Cinema/__snapshots__/Cinema.test.tsx.snap
@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Cinema> renders and matches snapshot 1`] = `
+<div>
+  <div
+    class="Cinema"
+    id="cinema"
+  />
+</div>
+`;
diff --git a/src/containers/Shelf/Shelf.tsx b/src/containers/Shelf/Shelf.tsx
index f8e2cb496..0a7bd7142 100644
--- a/src/containers/Shelf/Shelf.tsx
+++ b/src/containers/Shelf/Shelf.tsx
@@ -8,11 +8,12 @@ type ShelfProps = {
   playlistId: string;
   onCardClick: (playlistItem: PlaylistItem) => void;
   onCardHover: (playlistItem: PlaylistItem) => void;
+  relatedMediaId?: string;
   featured?: boolean;
 };
 
-const Shelf = ({ playlistId, onCardClick, onCardHover, featured = false }: ShelfProps): JSX.Element => {
-  const { isLoading, error, data: playlist }: UsePlaylistResult = usePlaylist(playlistId);
+const Shelf = ({ playlistId, onCardClick, onCardHover, relatedMediaId, featured = false }: ShelfProps): JSX.Element => {
+  const { isLoading, error, data: playlist }: UsePlaylistResult = usePlaylist(playlistId, relatedMediaId);
 
   if (error) return <p>Error here {error}</p>;
 
diff --git a/src/containers/Video/Video.tsx b/src/containers/Video/Video.tsx
index a924d8421..16bbfb1ca 100644
--- a/src/containers/Video/Video.tsx
+++ b/src/containers/Video/Video.tsx
@@ -1,9 +1,14 @@
 import { useHistory, useLocation } from 'react-router';
-import React from 'react';
+import React, { useContext, useEffect } from 'react';
+import type { Config } from 'types/Config';
+import type { PlaylistItem } from 'types/playlist';
 
+import { UIStateContext } from '../../providers/uiStateProvider';
+import { ConfigContext } from '../../providers/ConfigProvider';
 import VideoComponent from '../../components/Video/Video';
-import { videoUrl } from '../../utils/formatting';
+import { cardUrl, videoUrl } from '../../utils/formatting';
 import usePlaylist, { UsePlaylistResult } from '../../hooks/usePlaylist';
+import Shelf from '../Shelf/Shelf';
 
 export type VideoType = 'movie' | 'series';
 
@@ -17,26 +22,54 @@ export type VideoProps = {
 const Video = ({ playlistId, videoType, episodeId, mediaId }: VideoProps): JSX.Element => {
   const history = useHistory();
   const location = useLocation();
+  const { updateBlurImage } = useContext(UIStateContext);
   const play = new URLSearchParams(location.search).get('play') === '1';
+  const config: Config = useContext(ConfigContext);
+  const posterFading: boolean = config ? config.options.posterFading === true : false;
 
   const { isLoading, error, data: playlist }: UsePlaylistResult = usePlaylist(playlistId);
 
+  const getMovieItem = () => playlist?.playlist?.find((item) => item.mediaid === mediaId);
+  const getSeriesItem = () => playlist?.playlist[0];
+  const item = videoType === 'movie' ? getMovieItem() : getSeriesItem();
+
+  const startPlay = () => (item ? history.push(videoUrl(item, playlistId, true)) : null);
+  const goBack = () => (item ? history.push(videoUrl(item, playlistId, false)) : null);
+
+  const onCardClick = (playlistItem: PlaylistItem) =>
+    history.push(cardUrl(playlistItem, config.recommendationsPlaylist));
+  const onCardHover = (playlistItem: PlaylistItem) => updateBlurImage(playlistItem.image);
+
+  useEffect(() => {
+    if (item) updateBlurImage(item.image);
+  }, [item, updateBlurImage]);
+
   if (isLoading) return <p>Loading...</p>;
   if (error) return <p>Error loading list</p>;
   if (!playlist) return <p>List not found</p>;
-
-  const getMovieItem = () => playlist.playlist.find((item) => item.mediaid === mediaId);
-  const getSeriesItem = () => playlist.playlist[0];
-  const item = videoType === 'movie' ? getMovieItem() : getSeriesItem();
-
   if (!item) return <p>Can not find medium</p>;
 
-  const startPlay = () => history.push(videoUrl(item, playlistId, true));
-  const goBack = () => history.push(videoUrl(item, playlistId, false));
-
-  console.info({ videoType, play, episodeId });
+  console.info({ episodeId });
 
-  return <VideoComponent item={item} play={play} startPlay={startPlay} goBack={goBack} />;
+  return (
+    <VideoComponent
+      item={item}
+      play={play}
+      startPlay={startPlay}
+      goBack={goBack}
+      posterFading={posterFading}
+      relatedShelf={
+        config.recommendationsPlaylist ? (
+          <Shelf
+            playlistId={config.recommendationsPlaylist}
+            onCardClick={onCardClick}
+            onCardHover={onCardHover}
+            relatedMediaId={item.mediaid}
+          />
+        ) : undefined
+      }
+    />
+  );
 };
 
 export default Video;
diff --git a/src/hooks/usePlaylist.ts b/src/hooks/usePlaylist.ts
index 9fc3dfed1..5fe1e7f4d 100644
--- a/src/hooks/usePlaylist.ts
+++ b/src/hooks/usePlaylist.ts
@@ -3,12 +3,16 @@ import type { Playlist } from 'types/playlist';
 
 const baseUrl = 'https://content.jwplatform.com'; // temp data, till config arrives
 
-const getPlaylistById = (playlistId: string) => {
-  return fetch(`${baseUrl}/v2/playlists/${playlistId}`).then((res) => res.json());
+const getPlaylistById = (playlistId: string, relatedMediaId?: string) => {
+  const relatedQuery = relatedMediaId ? `?related_media_id=${relatedMediaId}` : '';
+
+  return fetch(`${baseUrl}/v2/playlists/${playlistId}${relatedQuery}`).then((res) => res.json());
 };
 
 export type UsePlaylistResult<TData = Playlist, TError = unknown> = UseBaseQueryResult<TData, TError>;
 
-export default function usePlaylist(playlistId: string): UsePlaylistResult {
-  return useQuery(['playlist', playlistId], () => getPlaylistById(playlistId), { enabled: !!playlistId });
+export default function usePlaylist(playlistId: string, relatedMediaId?: string): UsePlaylistResult {
+  return useQuery(['playlist', playlistId], () => getPlaylistById(playlistId, relatedMediaId), {
+    enabled: !!playlistId,
+  });
 }
diff --git a/src/icons/Play.tsx b/src/icons/Play.tsx
new file mode 100644
index 000000000..089d7d48e
--- /dev/null
+++ b/src/icons/Play.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+import createIcon from './Icon';
+
+export default createIcon(
+  '0 0 24 24',
+  <g>
+    <path fill="currentColor" d="M8,5.14V19.14L19,12.14L8,5.14Z" />
+  </g>,
+);
diff --git a/src/utils/dom.ts b/src/utils/dom.ts
index 754a48941..114e43f04 100644
--- a/src/utils/dom.ts
+++ b/src/utils/dom.ts
@@ -18,3 +18,13 @@ export default function scrollbarSize(recalc?: boolean) {
   }
   return size;
 }
+
+export const addScript = (src: string, callback: () => void): void => {
+  const script: HTMLScriptElement = document.createElement('script');
+  script.type = 'text/javascript';
+  script.async = true;
+  script.src = src;
+  script.onload = callback;
+  script.onerror = (error) => console.info('Error loading external script', error);
+  document.body.appendChild(script);
+};
diff --git a/types/global.d.ts b/types/global.d.ts
index ea2304912..b4dcc2aa4 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -1,3 +1,4 @@
 interface Window {
   configLocation: configLocation;
+  jwplayer: (id: string) => unknown;
 }
diff --git a/types/jwplayer.d.ts b/types/jwplayer.d.ts
new file mode 100644
index 000000000..74c63a474
--- /dev/null
+++ b/types/jwplayer.d.ts
@@ -0,0 +1,3 @@
+export type JWPlayer = {
+  setup: ({ file: string }) => void;
+};