From 4074b76af39f0ed6412f9a32d28ae8ecf27db9a0 Mon Sep 17 00:00:00 2001 From: andres alcocer Date: Fri, 8 Oct 2021 23:44:47 -0400 Subject: [PATCH] added video background --- package-lock.json | 71 +++++++++++++++++++++++ package.json | 1 + src/components/Header.js | 48 ++++++++-------- src/static/sass/base/_base.scss | 6 +- src/static/sass/layout/_header.scss | 89 +++++++++++++++++++---------- 5 files changed, 158 insertions(+), 57 deletions(-) diff --git a/package-lock.json b/package-lock.json index 98b06dc..d1a1dc0 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 46e507d..b552853 100644 --- a/package.json +++ b/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", diff --git a/src/components/Header.js b/src/components/Header.js index dc11aab..fd1120d 100644 --- a/src/components/Header.js +++ b/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 ( -
-
-

{name}

- - - -

{overview}

-
-
+
+ +

{name}

+ + +

{overview}

+
) } diff --git a/src/static/sass/base/_base.scss b/src/static/sass/base/_base.scss index 87c1627..fb850ac 100644 --- a/src/static/sass/base/_base.scss +++ b/src/static/sass/base/_base.scss @@ -141,7 +141,7 @@ html { // GRID AREA .container { - display: grid; - grid-template-rows: min-content min-content min-content min-content; - grid-template-columns: 0 repeat(10, 1fr); + // display: grid; + // grid-template-rows: min-content min-content min-content min-content; + // grid-template-columns: 0 repeat(10, 1fr); } diff --git a/src/static/sass/layout/_header.scss b/src/static/sass/layout/_header.scss index 8f68060..824d732 100644 --- a/src/static/sass/layout/_header.scss +++ b/src/static/sass/layout/_header.scss @@ -1,16 +1,22 @@ .header { background-color: $color-background; - grid-column: 1 / 13; - height: 82vh; - display: grid; + // grid-column: 1 / 13; + // height: 82vh; + // 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: #e6e6e6; - transition: all 0.2s; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); - - & > * { - fill: #000; - } + background-color: rgb(37, 37, 37); } } &-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 { - align-self: end; - height: 28.5rem; - background-image: linear-gradient( - 180deg, - transparent, - rgba(15, 15, 15, 0.61), - rgb(17, 17, 17), - rgb(17, 17, 17) - ); + &--fadeBottom { + z-index: 100000000000; + position: absolute; + bottom: 0; + height: 10rem; + width: 100%; - @include responsive(phone) { - height: 4rem; + background-image: linear-gradient( + 180deg, + transparent, + rgba(15, 15, 15, 0.61), + rgb(17, 17, 17), + rgb(17, 17, 17) + ); + + @include responsive(phone) { + height: 4rem; + } } } }