psmattas/Netflix-Clone
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added video background

Browse Source
This commit is contained in:
andres alcocer
2021-10-08 23:44:47 -04:00
parent 8ee1dc1bfd
commit 4074b76af3
5 changed files with 158 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
package-lock.json generated
View File

@@ -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",

1
package.json
View File

@@ -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",

48
src/components/Header.js
View File

@@ -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'>
<div className='header__container'>
<h1 className='header__container-heading'>{name}</h1>
<button
onClick={() => alert('not a movie!')}
className='header__container-btnPlay'
>
<PlayLogo className='header__container-btnMyList-play' />
Play
</button>
<button className='header__container-btnMyList'>
<AddLogo className='header__container-btnMyList-add' />
My List
</button>
<p className='header__container-overview'>{overview}</p>
</div>
<div className='header--fadeBottom'></div>
<header className='header'>
<ReactPlayer
playing={true}
loop={true}
width='100%'
height='100%'
className='header__video'
url='https://vimeo.com/384025132'
/>
<h1 className='header__container-heading'>{name}</h1>
<button
onClick={() => alert('not a movie!')}
className='header__container-btnPlay'
>
<PlayLogo className='header__container-btnMyList-play' />
Play
</button>
<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>
)
}

6
src/static/sass/base/_base.scss
View File

@@ -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);
}

89
src/static/sass/layout/_header.scss
View File

@@ -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;
}
}
}
}