diff --git a/initialState.json b/initialState.json new file mode 100644 index 00000000..4e30330d --- /dev/null +++ b/initialState.json @@ -0,0 +1,165 @@ +{ + "initalState": { + "mylist": [], + "trends": [ + { + "id": 2, + "slug": "tvshow-2", + "title": "In the Dark", + "type": "Scripted", + "language": "English", + "year": 2009, + "contentRating": "16+", + "duration": 164, + "cover": "http://dummyimage.com/800x600.png/99118E/ffffff", + "description": "Vestibulum ac est lacinia nisi venenatis tristique", + "source": "https://mdstrm.com/video/58333e214ad055d208427db5.mp4" + }, + { + "id": 3, + "slug": "tvshow-3", + "title": "Instinct", + "type": "Adventure", + "language": "English", + "year": 2002, + "contentRating": "16+", + "duration": 137, + "cover": "http://dummyimage.com/800x600.png/302140/ffffff", + "description": "Vestibulum ac est lacinia nisi venenatis tristique", + "source": "https://mdstrm.com/video/58333e214ad055d208427db5.mp4" + }, + { + "id": 4, + "slug": "tvshow-4", + "title": "Grand Hotel", + "type": "Comedy", + "language": "English", + "year": 2014, + "contentRating": "16+", + "duration": 163, + "cover": "http://dummyimage.com/800x600.png/5472FF/ffffff", + "description": "Vestibulum ac est lacinia nisi venenatis tristique", + "source": "https://mdstrm.com/video/58333e214ad055d208427db5.mp4" + }, + { + "id": 5, + "slug": "tvshow-5", + "title": "Stargate Atlantis", + "type": "Scripted", + "language": "English", + "year": 2014, + "contentRating": "16+", + "duration": 194, + "cover": "http://dummyimage.com/800x600.png/B36F20/ffffff", + "description": "Vestibulum ac est lacinia nisi venenatis tristique", + "source": "https://mdstrm.com/video/58333e214ad055d208427db5.mp4" + }, + { + "id": 6, + "slug": "tvshow-6", + "title": "Final Space", + "type": "Scripted", + "language": "English", + "year": 2017, + "contentRating": "16+", + "duration": 124, + "cover": "http://dummyimage.com/800x600.png/CCC539/ffffff", + "description": "Vestibulum ac est lacinia nisi venenatis tristique", + "source": "https://mdstrm.com/video/58333e214ad055d208427db5.mp4" + }, + { + "id": 7, + "slug": "tvshow-7", + "title": "The InBetween", + "type": "Drama", + "language": "English", + "year": 2011, + "contentRating": "16+", + "duration": 179, + "cover": "http://dummyimage.com/800x600.png/FF7A90/ffffff", + "description": "Vestibulum ac est lacinia nisi venenatis tristique", + "source": "https://mdstrm.com/video/58333e214ad055d208427db5.mp4" + } + ], + "originals": [ + { + "id": 8, + "slug": "tvshow-8", + "title": "Stargate Atlantis", + "type": "Action", + "language": "English", + "year": 2012, + "contentRating": "16+", + "duration": 148, + "cover": "http://dummyimage.com/800x600.png/306880/ffffff", + "description": "Vestibulum ac est lacinia nisi venenatis tristique", + "source": "https://mdstrm.com/video/58333e214ad055d208427db5.mp4" + }, + { + "id": 9, + "slug": "tvshow-9", + "title": "Alien Highway", + "type": "Action", + "language": "English", + "year": 2019, + "contentRating": "16+", + "duration": 128, + "cover": "http://dummyimage.com/800x600.png/604180/ffffff", + "description": "Vestibulum ac est lacinia nisi venenatis tristique", + "source": "https://mdstrm.com/video/58333e214ad055d208427db5.mp4" + }, + { + "id": 10, + "slug": "tvshow-10", + "title": "Elementary", + "type": "Animation", + "language": "English", + "year": 2011, + "contentRating": "16+", + "duration": 346, + "cover": "http://dummyimage.com/800x600.png/FF91BA/ffffff", + "description": "Vestibulum ac est lacinia nisi venenatis tristique", + "source": "https://mdstrm.com/video/58333e214ad055d208427db5.mp4" + }, + { + "id": 11, + "slug": "tvshow-11", + "title": "Strange Angel", + "type": "War", + "language": "English", + "year": 2015, + "contentRating": "16+", + "duration": 226, + "cover": "http://dummyimage.com/800x600.png/45807C/ffffff", + "description": "Vestibulum ac est lacinia nisi venenatis tristique", + "source": "https://mdstrm.com/video/58333e214ad055d208427db5.mp4" + }, + { + "id": 12, + "slug": "tvshow-12", + "title": "Private Eyes", + "type": "Comedy", + "language": "English", + "year": 2018, + "contentRating": "16+", + "duration": 190, + "cover": "http://dummyimage.com/800x600.png/577380/ffffff", + "description": "Vestibulum ac est lacinia nisi venenatis tristique", + "source": "https://mdstrm.com/video/58333e214ad055d208427db5.mp4" + }, + { + "id": 13, + "slug": "tvshow-13", + "title": "NCIS: Los Angeles", + "type": "Drama", + "language": "English", + "year": 2010, + "contentRating": "16+", + "duration": 160, + "cover": "http://dummyimage.com/800x600.png/5472FF/ffffff", + "description": "Vestibulum ac est lacinia nisi venenatis tristique", + "source": "https://mdstrm.com/video/58333e214ad055d208427db5.mp4" + } + ] + } + } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index a246bd10..6f2810e1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3909,6 +3909,29 @@ "flat-cache": "^2.0.1" } }, + "file-loader": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.0.0.tgz", + "integrity": "sha512-/aMOAYEFXDdjG0wytpTL5YQLfZnnTmLNjn+AIrJ/6HVnTfDqLsVKUUwkDf4I4kgex36BvjuXEn/TX9B/1ESyqQ==", + "dev": true, + "requires": { + "loader-utils": "^2.0.0", + "schema-utils": "^2.6.5" + }, + "dependencies": { + "loader-utils": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", + "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", + "dev": true, + "requires": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + } + } + } + }, "file-uri-to-path": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", diff --git a/package.json b/package.json index b371e92d..5ad89b1a 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "@babel/preset-react": "^7.9.4", "babel-loader": "^8.1.0", "css-loader": "^3.4.2", + "file-loader": "^6.0.0", "html-loader": "^1.0.0", "html-webpack-plugin": "^4.0.1", "mini-css-extract-plugin": "^0.9.0", diff --git a/public/index.html b/public/index.html index d5617b44..2e41f058 100644 --- a/public/index.html +++ b/public/index.html @@ -1,8 +1,9 @@ - + + + Platzi Video diff --git a/src/assets/static/google-icon.png b/src/assets/static/google-icon.png new file mode 100644 index 00000000..c441a456 Binary files /dev/null and b/src/assets/static/google-icon.png differ diff --git a/src/assets/static/logo-platzi-video-BW2.png b/src/assets/static/logo-platzi-video-BW2.png new file mode 100644 index 00000000..f1e1cd72 Binary files /dev/null and b/src/assets/static/logo-platzi-video-BW2.png differ diff --git a/src/assets/static/logo-platzi-video-colors.png b/src/assets/static/logo-platzi-video-colors.png new file mode 100644 index 00000000..cf0b6ed5 Binary files /dev/null and b/src/assets/static/logo-platzi-video-colors.png differ diff --git a/src/assets/static/logo-platzi-video.png b/src/assets/static/logo-platzi-video.png new file mode 100644 index 00000000..cf0b6ed5 Binary files /dev/null and b/src/assets/static/logo-platzi-video.png differ diff --git a/src/assets/static/play-icon.png b/src/assets/static/play-icon.png new file mode 100644 index 00000000..3c8529a8 Binary files /dev/null and b/src/assets/static/play-icon.png differ diff --git a/src/assets/static/plus-icon.png b/src/assets/static/plus-icon.png new file mode 100644 index 00000000..44437afa Binary files /dev/null and b/src/assets/static/plus-icon.png differ diff --git a/src/assets/static/twitter-icon.png b/src/assets/static/twitter-icon.png new file mode 100644 index 00000000..09f60024 Binary files /dev/null and b/src/assets/static/twitter-icon.png differ diff --git a/src/assets/static/user-icon.png b/src/assets/static/user-icon.png new file mode 100644 index 00000000..5c6e36f4 Binary files /dev/null and b/src/assets/static/user-icon.png differ diff --git a/src/assets/styles/App.scss b/src/assets/styles/App.scss index 70e49f99..cbaffc38 100644 --- a/src/assets/styles/App.scss +++ b/src/assets/styles/App.scss @@ -1,5 +1,12 @@ +@import "./Vars.scss"; +@import "./Media.scss"; + body { margin: 0; - background-color: red; - color: white; -} \ No newline at end of file + font-family: $theme-font; + background: $main-color; + } + + * { + box-sizing: border-box; + } \ No newline at end of file diff --git a/src/assets/styles/Media.scss b/src/assets/styles/Media.scss new file mode 100644 index 00000000..bedd289a --- /dev/null +++ b/src/assets/styles/Media.scss @@ -0,0 +1,11 @@ + +@media only screen and (max-width: 600px) { + .main__description--title { + font-size: 30px; + } + + .footer { + align-items: flex-start; + flex-direction: column; + } + } \ No newline at end of file diff --git a/src/assets/styles/Vars.scss b/src/assets/styles/Vars.scss new file mode 100644 index 00000000..a8257cfc --- /dev/null +++ b/src/assets/styles/Vars.scss @@ -0,0 +1,6 @@ +@import url(https://fonts.googleapis.com/css?family=Muli&display=swap); + +$theme-font: 'Muli', sans-serif; +$main-color: #8f57fd; + + diff --git a/src/assets/styles/components/Carousel.scss b/src/assets/styles/components/Carousel.scss new file mode 100644 index 00000000..f0aae39a --- /dev/null +++ b/src/assets/styles/components/Carousel.scss @@ -0,0 +1,29 @@ +.carousel { + overflow-y: hidden; + padding-left: 30px; + width: 100%; + position: relative; + -webkit-scrollbar {display: none;} + overflow-x: hidden; + +} + +.carousel__container { + transition: 450ms -webkit-transform; + transition: 450ms transform; + transition: 450ms transform, 450ms -webkit-transform; + font-size: 0; + white-space: nowrap; + margin: 70px 0px; + padding-bottom: 10px; +} + +.carousel__container:hover .carousel-item { + opacity: 0.3; +} + +.carousel__container:hover .carousel-item:hover { + -webkit-transform: scale(1.5); + transform: scale(1.5); + opacity: 1; +} \ No newline at end of file diff --git a/src/assets/styles/components/CarouselItem.scss b/src/assets/styles/components/CarouselItem.scss new file mode 100644 index 00000000..e7f657fa --- /dev/null +++ b/src/assets/styles/components/CarouselItem.scss @@ -0,0 +1,62 @@ +.carousel-item { + border-radius: 20px; + overflow: hidden; + position: relative; + display: inline-block; + width: 200px; + height: 250px; + margin-right: 10px; + font-size: 20px; + cursor: pointer; + transition: 450ms all; + -webkit-transform-origin: center left; + transform-origin: center left; +} + +.carousel-item:hover ~ .carousel-item { + -webkit-transform: translate3d(100px, 0, 0); + transform: translate3d(100px, 0, 0); +} + +.carousel-item__img { + width: 200px; + height: 250px; + -o-object-fit: cover; + object-fit: cover; +} + +.carousel-item__details { + align-items: flex-start; + background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%); + bottom: 0; + display: flex; + font-size: 10px; + flex-direction: column; + justify-content: flex-end; + left: 0; + opacity: 0; + transition: 450ms opacity; + padding: 10px; + position: absolute; + right: 0; + top: 0; +} + +.carousel-item__details--img { + width: 20px; +} + +.carousel-item:hover .carousel-item__details { + opacity: 1; +} + +.carousel-item__details--title { + color: white; + margin: 5px 0px 0px 0px; +} + +.carousel-item__details--subtitle { + color: white; + font-size: 8px; + margin: 3px 0px; +} diff --git a/src/assets/styles/components/Categories.scss b/src/assets/styles/components/Categories.scss new file mode 100644 index 00000000..329597c5 --- /dev/null +++ b/src/assets/styles/components/Categories.scss @@ -0,0 +1,10 @@ + +.categories__title { + background: #8f57fd; + color: white; + font-size: 16px; + margin-top: -16px; + position: absolute; + padding-left: 30px; + width: 100%; + } \ No newline at end of file diff --git a/src/assets/styles/components/Footer.scss b/src/assets/styles/components/Footer.scss new file mode 100644 index 00000000..0c21643b --- /dev/null +++ b/src/assets/styles/components/Footer.scss @@ -0,0 +1,20 @@ +.footer { + align-items: center; + background-color: #8f57fd; + display: flex; + height: 100px; + width: 100%; + } + + .footer a { + color: white; + cursor: pointer; + font-size: 14px; + padding-left: 30px; + text-decoration: none; + } + + .footer a:hover { + text-decoration: underline; + } + \ No newline at end of file diff --git a/src/assets/styles/components/Header.scss b/src/assets/styles/components/Header.scss new file mode 100644 index 00000000..df494925 --- /dev/null +++ b/src/assets/styles/components/Header.scss @@ -0,0 +1,57 @@ +.header { + align-items: center; + background: #8f57fd; + color: white; + display: flex; + height: 100px; + justify-content: space-between; + top: 0px; + width: 100%; + } + + .header__img { + margin-left: 30px; + width: 200px; + } + + .header__menu { + margin-right: 30px; + } + + .header__menu ul { + display: none; + list-style: none; + margin: 0px 0px 0px -14px; + padding: 0px; + position: absolute; + width: 100px; + text-align: right; + } + + .header__menu:hover ul, ul:hover { + display: block; + } + + .header__menu li { + margin: 10px 0px; + } + + .header__menu li a { + color: white; + text-decoration: none; + } + + .header__menu li a:hover { + text-decoration: underline; + } + + .header__menu--profile { + align-items: center; + display: flex; + cursor: pointer; + } + + .header__menu--profile img { + margin-right: 8px; + width: 40px; + } \ No newline at end of file diff --git a/src/assets/styles/components/Search.scss b/src/assets/styles/components/Search.scss new file mode 100644 index 00000000..3741137b --- /dev/null +++ b/src/assets/styles/components/Search.scss @@ -0,0 +1,31 @@ +.main { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + height: 300px; + border-radius: 0px 0px 40px 40px; + } + + .main__title { + color: white; + font-size: 25px; + } + +.input { + background-color: rgba(255,255,255,0.1); + border: 2px solid white; + border-radius: 25px; + color: white; + font-family: 'Muli', sans-serif; + font-size: 16px; + height: 50px; + margin-bottom: 20px; + outline: none; + padding: 0px 20px; + width: 70%; +} + +::placeholder { + color: white; +} diff --git a/src/components/Carousel.jsx b/src/components/Carousel.jsx new file mode 100644 index 00000000..0839baea --- /dev/null +++ b/src/components/Carousel.jsx @@ -0,0 +1,12 @@ +import React from 'react'; +import '../assets/styles/components/Carousel.scss'; + +const Carousel = ({ children }) => ( +
+
+ {children} +
+
+); + +export default Carousel; \ No newline at end of file diff --git a/src/components/CarouselItem.jsx b/src/components/CarouselItem.jsx new file mode 100644 index 00000000..decb9cb0 --- /dev/null +++ b/src/components/CarouselItem.jsx @@ -0,0 +1,21 @@ +import React from 'react'; +import '../assets/styles/components/CarouselItem.scss'; +import playIcon from '../assets/static/play-icon.png' +import plusIcon from '../assets/static/plus-icon.png' + +const CarouselItem = () => ( +
+ +
+
+ Play Icon + Plus Icon +
+

Título descriptivo

+

2019 16+ 114 minutos

+
+
+); + + +export default CarouselItem; \ No newline at end of file diff --git a/src/components/Categories.jsx b/src/components/Categories.jsx new file mode 100644 index 00000000..6cfeebbe --- /dev/null +++ b/src/components/Categories.jsx @@ -0,0 +1,12 @@ +import React from 'react'; +import '../assets/styles/components/Categories.scss'; + +const Categories = ({ children, title }) => ( +
+

{ title }

+ {children} +
+ +) + +export default Categories; \ No newline at end of file diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx new file mode 100644 index 00000000..2e4f073f --- /dev/null +++ b/src/components/Footer.jsx @@ -0,0 +1,11 @@ +import React from 'react'; +import '../assets/styles/components/Footer.scss' + +const Footer = () => ( + +) +export default Footer; \ No newline at end of file diff --git a/src/components/Header.jsx b/src/components/Header.jsx new file mode 100644 index 00000000..f0ba5fdb --- /dev/null +++ b/src/components/Header.jsx @@ -0,0 +1,23 @@ +import React from 'react'; +import '../assets/styles/components/Header.scss'; +import logo from '../assets/static/logo-platzi-video-BW2.png'; +import userIcon from '../assets/static/user-icon.png'; + +const Header = () => ( +
+ Platzi Video +
+
+ +

Perfil

+
+ +
+
+); + +export default Header; + diff --git a/src/components/HelloWorld.jsx b/src/components/HelloWorld.jsx deleted file mode 100644 index d7496ff4..00000000 --- a/src/components/HelloWorld.jsx +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; -import '../assets/styles/App.scss' - -const HelloWorld = () => ( -

Hola Mundo

-); - -export default HelloWorld; \ No newline at end of file diff --git a/src/components/Search.jsx b/src/components/Search.jsx new file mode 100644 index 00000000..898d1b1f --- /dev/null +++ b/src/components/Search.jsx @@ -0,0 +1,11 @@ +import React from 'react'; +import '../assets/styles/components/Search.scss'; + +const Search = () => ( +
+

¿Qué quieres ver hoy?

+ +
+) + +export default Search; diff --git a/src/containers/App.jsx b/src/containers/App.jsx new file mode 100644 index 00000000..b7be86ef --- /dev/null +++ b/src/containers/App.jsx @@ -0,0 +1,46 @@ +import React from 'react'; +import Header from '../components/Header'; +import Search from '../components/Search'; +import Categories from '../components/Categories'; +import Carousel from '../components/Carousel'; +import CarouselItem from '../components/CarouselItem'; +import Footer from '../components/Footer'; +import '../assets/styles/App.scss'; + + + +const App = () => ( +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+) + +export default App; \ No newline at end of file diff --git a/src/index.js b/src/index.js index 0ac98a51..2d5e5ae7 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,4 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import HelloWorld from './components/HelloWorld'; - -ReactDOM.render(, document.getElementById('app')); \ No newline at end of file +import App from './containers/App'; +ReactDOM.render(, document.getElementById('app')); \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 29e49700..430a8817 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -38,6 +38,17 @@ module.exports = { 'css-loader', 'sass-loader' ] + }, + { + test: /\.(png|gif|jpg)$/, + use: [ + { + 'loader': 'file-loader', + options: { + name: 'assets/[hash].[ext]' + } + } + ] } ] },