added video background

package-lock.json

@@ -13,6 +13,7 @@
         "prop-types": "^15.7.2",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
+        "react-player": "^2.9.0",
         "react-redux": "^7.2.5",
         "react-router-dom": "^5.3.0",
         "redux": "^4.1.1",
@@ -4997,6 +4998,14 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
+    "node_modules/deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/default-gateway": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-6.0.3.tgz",
@@ -9477,6 +9486,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/load-script": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz",
+      "integrity": "sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ="
+    },
     "node_modules/loader-runner": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz",
@@ -9976,6 +9990,11 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "node_modules/meow": {
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/meow/-/meow-9.0.0.tgz",
@@ -12558,6 +12577,11 @@
         "react": "17.0.2"
       }
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -12573,6 +12597,21 @@
         "react-dom": "^15.3.0 || ^16.0.0-0"
       }
     },
+    "node_modules/react-player": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/react-player/-/react-player-2.9.0.tgz",
+      "integrity": "sha512-jNUkTfMmUhwPPAktAdIqiBcVUKsFKrVGH6Ocutj6535CNfM91yrvWxHg6fvIX8Y/fjYUPoejddwh7qboNV9vGA==",
+      "dependencies": {
+        "deepmerge": "^4.0.0",
+        "load-script": "^1.0.0",
+        "memoize-one": "^5.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.0.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0"
+      }
+    },
     "node_modules/react-redux": {
       "version": "7.2.5",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.5.tgz",
@@ -19985,6 +20024,11 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
+    "deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
+    },
     "default-gateway": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-6.0.3.tgz",
@@ -23421,6 +23465,11 @@
         }
       }
     },
+    "load-script": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz",
+      "integrity": "sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ="
+    },
     "loader-runner": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz",
@@ -23816,6 +23865,11 @@
         "fs-monkey": "1.0.3"
       }
     },
+    "memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "meow": {
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/meow/-/meow-9.0.0.tgz",
@@ -25726,6 +25780,11 @@
         "scheduler": "^0.20.2"
       }
     },
+    "react-fast-compare": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -25738,6 +25797,18 @@
       "dev": true,
       "requires": {}
     },
+    "react-player": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/react-player/-/react-player-2.9.0.tgz",
+      "integrity": "sha512-jNUkTfMmUhwPPAktAdIqiBcVUKsFKrVGH6Ocutj6535CNfM91yrvWxHg6fvIX8Y/fjYUPoejddwh7qboNV9vGA==",
+      "requires": {
+        "deepmerge": "^4.0.0",
+        "load-script": "^1.0.0",
+        "memoize-one": "^5.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.0.1"
+      }
+    },
     "react-redux": {
       "version": "7.2.5",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.5.tgz",

package.json

@@ -20,6 +20,7 @@
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-player": "^2.9.0",
     "react-redux": "^7.2.5",
     "react-router-dom": "^5.3.0",
     "redux": "^4.1.1",

src/components/Header.js

@@ -2,33 +2,33 @@ import React from 'react'
 
 import PlayLogo from '../static/images/play-button.svg'
 import AddLogo from '../static/images/add.svg'
+import ReactPlayer from 'react-player'
 
 const Header = ({ movie: { backdrop_path, name, overview } }) => {
-  const backgroundStyle = {
-    backgroundSize: 'cover',
-    backgroundImage: `url(https://image.tmdb.org/t/p/original/${backdrop_path})`,
-    backgroundPosition: 'center',
-  }
-
   return (
-    <header style={backgroundStyle} className='header'>
+    <header className='header'>
-      <div className='header__container'>
+      <ReactPlayer
-        <h1 className='header__container-heading'>{name}</h1>
+        playing={true}
-        <button
+        loop={true}
-          onClick={() => alert('not a movie!')}
+        width='100%'
-          className='header__container-btnPlay'
+        height='100%'
-        >
+        className='header__video'
-          <PlayLogo className='header__container-btnMyList-play' />
+        url='https://vimeo.com/384025132'
-          Play
+      />
-        </button>
+      <h1 className='header__container-heading'>{name}</h1>
-
+      <button
-        <button className='header__container-btnMyList'>
+        onClick={() => alert('not a movie!')}
-          <AddLogo className='header__container-btnMyList-add' />
+        className='header__container-btnPlay'
-          My List
+      >
-        </button>
+        <PlayLogo className='header__container-btnMyList-play' />
-        <p className='header__container-overview'>{overview}</p>
+        Play
-      </div>
+      </button>
-      <div className='header--fadeBottom'></div>
+      <button className='header__container-btnMyList'>
+        <AddLogo className='header__container-btnMyList-add' />
+        My List
+      </button>
+      <p className='header__container-overview'>{overview}</p>
+      <div className='header__container--fadeBottom'></div>
     </header>
   )
 }

src/static/sass/base/_base.scss

@@ -141,7 +141,7 @@ html {
 
 // GRID AREA
 .container {
-  display: grid;
+  // display: grid;
-  grid-template-rows: min-content min-content min-content min-content;
+  // grid-template-rows: min-content min-content min-content min-content;
-  grid-template-columns: 0 repeat(10, 1fr);
+  // grid-template-columns: 0 repeat(10, 1fr);
 }

src/static/sass/layout/_header.scss

@@ -1,16 +1,22 @@
 .header {
   background-color: $color-background;
-  grid-column: 1 / 13;
+  // grid-column: 1 / 13;
-  height: 82vh;
+  // height: 82vh;
-  display: grid;
+  // display: grid;
+  position: relative;
+  padding-top: 56.25%;
 
   @include responsive(phone) {
     height: 58rem;
   }
 
+  &__video {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
   &__container {
-    padding-top: 20rem;
-    padding-left: 4.5rem;
     color: #fff;
 
     @include responsive(phone) {
@@ -19,23 +25,27 @@
 
     &-heading {
       font-size: 6rem;
-      padding-bottom: 1rem;
+      position: absolute;
+      color: #fff;
+      top: 12rem;
+      left: 3.5rem;
     }
 
     &-btnPlay,
     &-btnMyList {
+      top: 40rem;
       cursor: pointer;
       font-size: 1.6rem;
       color: #fff;
       outline: none;
       border: none;
       font-weight: 700;
-      border-radius: 0.2vw;
+      border-radius: 5px;
       padding-left: 3.5rem;
       padding-right: 3.5rem;
       margin-right: 1rem;
       padding-top: 1rem;
-      background-color: rgba(51, 51, 51, 0.5);
+      background-color: rgba(112, 111, 111, 0.5);
       padding-bottom: 1rem;
 
       &-add {
@@ -51,40 +61,59 @@
         fill: #fff;
         margin-right: 1rem;
       }
+    }
+
+    &-btnPlay {
+      color: #000;
+      background-color: #e6e6e6;
+      transition: all 0.2s;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+
+      & > * {
+        fill: #000;
+      }
+      left: 4rem;
+      position: absolute;
+    }
+
+    &-btnMyList {
+      left: 18.5rem;
+      position: absolute;
 
       &:hover {
-        color: #000;
+        background-color: rgb(37, 37, 37);
-        background-color: #e6e6e6;
-        transition: all 0.2s;
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-
-        & > * {
-          fill: #000;
-        }
       }
     }
 
     &-overview {
-      width: 45rem;
+      top: 28rem;
+      left: 4rem;
+      position: absolute;
+      color: #fff;
+      width: 55rem;
       line-height: 1.3;
       padding-top: 2.5rem;
       font-size: 1.8rem;
     }
-  }
 
-  &--fadeBottom {
+    &--fadeBottom {
-    align-self: end;
+      z-index: 100000000000;
-    height: 28.5rem;
+      position: absolute;
-    background-image: linear-gradient(
+      bottom: 0;
-      180deg,
+      height: 10rem;
-      transparent,
+      width: 100%;
-      rgba(15, 15, 15, 0.61),
-      rgb(17, 17, 17),
-      rgb(17, 17, 17)
-    );
 
-    @include responsive(phone) {
+      background-image: linear-gradient(
-      height: 4rem;
+        180deg,
+        transparent,
+        rgba(15, 15, 15, 0.61),
+        rgb(17, 17, 17),
+        rgb(17, 17, 17)
+      );
+
+      @include responsive(phone) {
+        height: 4rem;
+      }
     }
   }
 }