feat(videodetail): add screen and routing

jwplayer · May 28, 2021 · 76ac62c · 76ac62c
1 parent adf8856
commit 76ac62c
Show file tree

Hide file tree

Showing 19 changed files with 476 additions and 106 deletions.
diff --git a/src/components/Root/Root.tsx b/src/components/Root/Root.tsx
@@ -1,12 +1,12 @@
 import React, { FC } from 'react';
 import { Route, Switch } from 'react-router-dom';
 
+import Series from '../../screens/Series/Series';
 import Layout from '../Layout/Layout';
 import Home from '../../screens/Home/Home';
 import Playlist from '../../screens/Playlist/Playlist';
 import Settings from '../../screens/Settings/Settings';
-import Video from '../../screens/Video/Video';
-import Series from '../../screens/Series/Series';
+import Movie from '../../screens/Movie/Movie';
 
 type Props = {
   error?: Error | null;
@@ -23,8 +23,8 @@ const Root: FC<Props> = ({ error }: Props) => {
         <Route path="/" component={Home} exact />
         <Route path="/p/:id" component={Playlist} exact />
         <Route path="/u" component={Settings} exact />
-        <Route path="/m/:id/:slug" component={Video} exact />
-        <Route path="/s/:seriesId/:seriesSlug/:episodeId/:episodeSlug" component={Series} exact />
+        <Route path="/m/:id/:slug" component={Movie} exact />
+        <Route path="/s/:id/:slug" component={Series} />
       </Switch>
     </Layout>
   );

diff --git a/src/components/Video/Video.module.scss b/src/components/Video/Video.module.scss
@@ -0,0 +1,91 @@
+@use '../../styles/variables';
+@use '../../styles/theme';
+
+.video {
+  padding: 50px;
+  color: white;
+}
+.main {
+  display: flex;
+}
+.info {
+  width: 50%;
+}
+.title {
+  font-weight: 900;
+  font-size: larger;
+  margin: 20px 0px;
+}
+.meta {
+  margin: 20px 0px;
+  > ul {
+    padding-inline-start: 0px;
+    display: flex;
+    > li {
+      margin-right: 30px;
+    }
+    > li:first-child {
+      list-style-type: none;
+    }
+  }
+}
+.buttons {
+  margin: 20px 0px;
+  > button {
+    margin-right: 20px;
+  }
+}
+.banner {
+  width: 50%;
+  position: relative;
+  opacity: 0.7;
+  > img {
+    width: 100%;
+  }
+  &:hover {
+    cursor: pointer;
+    opacity: 1;
+  }
+}
+.playIcon {
+  position: absolute;
+  left: calc(50% - 35px);
+  top: calc(50% - 60px);
+  font-size: xx-large;
+  border: 3px solid white;
+  padding: 25px 30px;
+  border-radius: 100%;
+}
+.other {
+  margin: 50px 0px;
+}
+.playerContainer {
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  background-color: black;
+}
+.background {
+  width: 100vw;
+  height: 100vh;
+  background-size: cover;
+  background-position: center;
+  opacity: 0.7;
+}
+.playerInfo {
+  position: absolute;
+  top: 0;
+  margin: 50px;
+  max-width: 50%;
+  display: flex;
+
+  > h2 {
+    font-size: x-large;
+  }
+}
+.backButton {
+  padding: 10px;
+  font-size: x-large;
+}
diff --git a/src/components/Video/Video.test.tsx b/src/components/Video/Video.test.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import type { PlaylistItem } from 'types/playlist';
+
+import Video from './Video';
+
+describe('<Video>', () => {
+  test('renders and matches snapshot', () => {
+    const item = {
+      description: 'Test item description',
+      duration: 354,
+      feedid: 'ax85aa',
+      image: 'http://test/img.jpg',
+      images: [],
+      link: 'http://test/link',
+      genre: 'Tester',
+      mediaid: 'zp50pz',
+      pubdate: 26092021,
+      rating: 'CC_CC',
+      sources: [],
+      seriesId: 'ag94ag',
+      tags: 'Test tag',
+      title: 'Test item title',
+      tracks: [],
+    } as PlaylistItem;
+    const { container } = render(<Video item={item} startPlay={() => null} goBack={() => null} play />);
+
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/src/components/Video/Video.tsx b/src/components/Video/Video.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import type { PlaylistItem } from 'types/playlist';
+
+import Button from '../Button/Button';
+import IconButton from '../IconButton/IconButton';
+
+import styles from './Video.module.scss';
+
+type Props = {
+  item: PlaylistItem;
+  play: boolean;
+  startPlay: () => void;
+  goBack: () => void;
+};
+
+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`;
+  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>
+          <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>
+        </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>
+      {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>
+              <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.description}>{item.description}</div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Video;
diff --git a/src/components/Video/__snapshots__/Video.test.tsx.snap b/src/components/Video/__snapshots__/Video.test.tsx.snap
@@ -0,0 +1,142 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Video> renders and matches snapshot 1`] = `
+<div>
+  <div
+    class="video"
+  >
+    <div
+      class="main"
+    >
+      <div
+        class="info"
+      >
+        <h2
+          class="title"
+        >
+          Test item title
+        </h2>
+        <div
+          class="meta"
+        >
+          <ul>
+            <li>
+              1970
+            </li>
+            <li>
+              5h 54m
+            </li>
+            <li>
+              Tester
+            </li>
+            <li>
+              CC_CC
+            </li>
+          </ul>
+        </div>
+        <div>
+          Test item description
+        </div>
+        <div
+          class="buttons"
+        >
+          <button
+            class="button active"
+          >
+            <span>
+              Favorite
+            </span>
+          </button>
+          <button
+            class="button active"
+          >
+            <span>
+              Trailer
+            </span>
+          </button>
+          <button
+            class="button active"
+          >
+            <span>
+              Share
+            </span>
+          </button>
+        </div>
+      </div>
+      <div
+        class="banner"
+      >
+        <img
+          src="http://test/img.jpg"
+        />
+        <div
+          class="playIcon"
+        >
+          ►
+        </div>
+      </div>
+    </div>
+    <div
+      class="other"
+    >
+      <h3>
+        Resting shelf
+      </h3>
+    </div>
+    <div
+      class="playerContainer"
+    >
+      <div
+        class="background"
+        style="background-image: url(http://test/img.jpg);"
+      />
+      <div />
+      <div
+        class="playerInfo"
+      >
+        <div
+          class="backButton"
+        >
+          <div
+            aria-label="Back"
+            class="iconButton"
+            role="button"
+          >
+            <p>
+              ←
+            </p>
+          </div>
+        </div>
+        <div>
+          <h2
+            class="title"
+          >
+            Test item title
+          </h2>
+          <div
+            class="meta"
+          >
+            <ul>
+              <li>
+                1970
+              </li>
+              <li>
+                5h 54m
+              </li>
+              <li>
+                Tester
+              </li>
+              <li>
+                CC_CC
+              </li>
+            </ul>
+          </div>
+          <div>
+            Test item description
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/container/Shelf/Shelf.test.tsx → src/containers/Shelf/Shelf.test.tsx b/src/container/Shelf/Shelf.test.tsx → src/containers/Shelf/Shelf.test.tsx
diff --git a/src/container/Shelf/Shelf.tsx → src/containers/Shelf/Shelf.tsx b/src/container/Shelf/Shelf.tsx → src/containers/Shelf/Shelf.tsx