Merge pull request #3 from OrcaPracticas/develop

PullRequest Proyecto de react
OrcaPracticas · Dec 12, 2018 · 04d90ee · 04d90ee
2 parents 8f1b4da + 8cb6c45
commit 04d90ee
Show file tree

Hide file tree

Showing 88 changed files with 1,607 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore/.gitignore → .gitignore b/.gitignore/.gitignore → .gitignore
@@ -2,3 +2,4 @@ dist
 node_modules
 yarn.*
 *.lock
+*-lock.*
diff --git a/components.md b/components.md
@@ -0,0 +1,30 @@
+Platzi-Video <3
+==============
+home - entry point para webpack
+
+  Home - página / (container|smart)
+    -> <!-- Layout - UI -->
+      -> Related - UI
+      -> Categories - UI
+         -> Category - UI
+            -> Playlist - UI
+               -> Media - UI / Pure
+      -> Search / (container|smart)
+         -> <!-- Search Layout UI -->
+            -> Input - UI
+      -> Modal - (container|smart)
+        -> <!-- Layout - UI -->
+          -> VideoPlayer - (container|smart)
+            <!-- Layout -->
+             -> Video - UI state
+             -> Spinner - UI
+             -> Controls - UI
+                -> PlayPause - UI
+                  -> PlayIcon - UI
+                  -> PauseIcon - UI
+                -> Timer - UI
+                -> ProgressBar - UI
+                -> Volume - UI
+                  -> VolumeIcon - UI
+                -> FullScreen - UI
+                  -> FullScreenIcon - UI
diff --git a/images/.DS_Store b/images/.DS_Store
diff --git a/images/covers/bitcoin.jpg b/images/covers/bitcoin.jpg
diff --git a/images/covers/despacito.jpg b/images/covers/despacito.jpg
diff --git a/images/covers/echame-la-culpa.jpg b/images/covers/echame-la-culpa.jpg
diff --git a/images/covers/felices.jpg b/images/covers/felices.jpg
diff --git a/images/covers/gorillaz.jpg b/images/covers/gorillaz.jpg
diff --git a/images/covers/html5.jpg b/images/covers/html5.jpg
diff --git a/images/covers/mejorandola.jpg b/images/covers/mejorandola.jpg
diff --git a/images/covers/mi-gente.jpg b/images/covers/mi-gente.jpg
diff --git a/images/covers/midnight.jpg b/images/covers/midnight.jpg
diff --git a/images/covers/no-vaya-a-ser.jpg b/images/covers/no-vaya-a-ser.jpg
diff --git a/images/covers/one-more-time.jpg b/images/covers/one-more-time.jpg
diff --git a/images/covers/optimizar.jpg b/images/covers/optimizar.jpg
diff --git a/images/covers/rehuso.jpg b/images/covers/rehuso.jpg
diff --git a/images/covers/responsive.jpg b/images/covers/responsive.jpg
diff --git a/images/covers/social.jpg b/images/covers/social.jpg
diff --git a/images/covers/solar-sailer.jpg b/images/covers/solar-sailer.jpg
diff --git a/images/logo.png b/images/logo.png
diff --git a/index.html b/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Platzi Video</title>
+  <link rel="stylesheet" href="dist/css/home.css">
+</head>
+<body>
+  <div id="home-container"></div>
+  <div id="modal-container"></div>
+  <!-- <script src="http://localhost:9000/js/home.js"></script> -->
+  <script src="dist/js/home.js"></script>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "platzi-video",
+  "version": "1.0.0",
+  "description": "",
+  "main": "webpack.config.js",
+  "scripts": {
+    "build:dev": "webpack-dev-server --config ./webpack.dev.config.js",
+    "build": "webpack",
+    "build:local": "webpack --env.NODE_ENV=local",
+    "build:prod": "webpack -p --env.NODE_ENV=production",
+    "server": "webpack --config webpack.server.config.js && babel-node --presets react,es2015,stage-2 server.js"
+  },
+  "keywords": [
+    "react"
+  ],
+  "author": "LeonidasEsteban",
+  "license": "MIT",
+  "devDependencies": {
+    "babel-cli": "6.26.0",
+    "babel-core": "6.26.0",
+    "babel-loader": "7.1.2",
+    "babel-preset-es2015": "6.24.1",
+    "babel-preset-react": "6.24.1",
+    "babel-preset-stage-2": "6.24.1",
+    "clean-webpack-plugin": "0.1.17",
+    "css-loader": "0.28.7",
+    "extract-text-webpack-plugin": "3.0.2",
+    "file-loader": "1.1.5",
+    "style-loader": "0.19.0",
+    "url-loader": "0.6.2",
+    "webpack": "3.8.1",
+    "webpack-dev-server": "2.9.3"
+  },
+  "dependencies": {
+    "express": "4.16.2",
+    "prop-types": "15.6.0",
+    "react": "16.1.1",
+    "react-dom": "16.1.1",
+    "redux": "^4.0.1"
+  }
+}
diff --git a/redux.html b/redux.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Redux</title>
+    <style media="screen">
+    body {
+      margin: 0;
+      background: lightgray;
+      font-family: Arial;
+      padding-top: 55px;
+    }
+    form {
+      padding: 10px;
+      position: fixed;
+      top: 0;
+      box-sizing: border-box;
+      width: 100%;
+    }
+    input {
+      width: 100%;
+      padding: 10px;
+      font-size: 18px;
+      box-sizing: border-box;
+    }
+    p {
+      margin: 10px;
+      background: black;
+      color: white;
+      padding: 5px;
+    }
+    </style>
+</head>
+<body>
+    <form id="form">
+        <input type="text" name="title" placeholder="Nombre de la Canción">
+    </form>
+    <div id="playlist">
+
+    </div>
+    <!-- <script src="http://localhost:9000/js/home.js"></script> -->
+    <script src="dist/js/redux.js"></script>
+</body>
+</html>
diff --git a/server.js b/server.js
@@ -0,0 +1,29 @@
+import express from 'express';
+import Home from './dist/ssr/home';
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server'
+import data from './src/api.json';
+import Base from './src/pages/components/base';
+
+const app = express();
+
+app.use(express.static('dist'))
+app.use('/images', express.static('images'))
+
+app.get('/', (req, res) => {
+  // fetch('dame datos').then((datos)=>{
+
+  // })
+  res.write(renderToStaticMarkup(
+    <Base
+      title="Platzi Video"
+      css="css/home.css"
+      js="js/home.js"
+    >
+      <Home data={data} />
+    </Base>
+  ));
+  res.end();
+})
+
+app.listen(3000)
diff --git a/src/.DS_Store b/src/.DS_Store
diff --git a/src/api.json b/src/api.json
@@ -0,0 +1,146 @@
+{
+  "categories": [
+    {
+      "id": 1,
+      "description": "Lo mejor de la semana",
+      "title": "Destacados",
+      "playlist": [
+        {
+          "title": "¿Qué es responsive Design?",
+          "author": "LeonidasEsteban",
+          "type": "video",
+          "cover": "./images/covers/responsive.jpg",
+          "src": "http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4",
+          "id": 1
+        },
+        {
+          "title": "Cómo optimzar la carga de un website",
+          "author": "LeonidasEsteban",
+          "type": "video",
+          "cover": "./images/covers/optimizar.jpg",
+          "src": "http://peach.themazzone.com/durian/movies/sintel-1024-surround.mp4",
+          "id": 2
+        },
+        {
+          "title": "Qué es Bitcoin",
+          "author": "Yograterol",
+          "type": "video",
+          "cover": "./images/covers/bitcoin.jpg",
+          "src": "http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4",
+          "id": 3
+        },
+        {
+          "title": "Que pasó con HTML5",
+          "author": "Freddier",
+          "type": "video",
+          "cover": "./images/covers/html5.jpg",
+          "src": "http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4",
+          "id": 4
+        },
+        {
+          "title": "Lo mejor de Mejorando.la",
+          "author": "Cvander",
+          "type": "video",
+          "cover": "./images/covers/mejorandola.jpg",
+          "src": "http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4",
+          "id": 5
+        }
+      ]
+    },
+    {
+      "id": 2,
+      "description": "Lo mejor para concentrarte",
+      "title": "Para programar",
+      "playlist": [
+        {
+          "title": "One more time",
+          "author": "Daft Punk",
+          "type": "video",
+          "cover": "./images/covers/one-more-time.jpg",
+          "src": "http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4",
+          "id": 1
+        },
+        {
+          "title": "Midnight City",
+          "author": "M83",
+          "type": "video",
+          "cover": "./images/covers/midnight.jpg",
+          "src": "http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4",
+          "id": 5
+        },
+        {
+          "title": "Solar Sailer",
+          "author": "Daft Punk",
+          "type": "video",
+          "cover": "./images/covers/solar-sailer.jpg",
+          "src": "http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4",
+          "id": 2
+        },
+        {
+          "title": "The social network",
+          "author": "The social network",
+          "type": "video",
+          "cover": "./images/covers/social.jpg",
+          "src": "http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4",
+          "id": 4
+        },
+        {
+          "title": "No vaya a ser",
+          "author": "Pablo Alboran",
+          "type": "video",
+          "cover": "./images/covers/no-vaya-a-ser.jpg",
+          "src": "http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4",
+          "id": 3
+        }
+      ]
+    },
+    {
+      "id": 3,
+      "description": "Si no te queda de otra",
+      "title": "Regueton",
+      "playlist": [
+        {
+          "title": "Despacito",
+          "author": "Luis Fonsi",
+          "type": "video",
+          "cover": "./images/covers/despacito.jpg",
+          "src": "http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4",
+          "id": 1
+        },
+        {
+          "title": "Echame la culpa",
+          "author": "Luis fonsi",
+          "type": "video",
+          "cover": "./images/covers/echame-la-culpa.jpg",
+          "src": "http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4",
+          "id": 3
+        },
+        {
+          "title": "Mi Gente",
+          "author": "J Bavil",
+          "type": "video",
+          "cover": "./images/covers/mi-gente.jpg",
+          "src": "http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4",
+          "id": 2
+        },
+        {
+          "title": "Felices los 4",
+          "author": "Maluma",
+          "type": "video",
+          "cover": "./images/covers/felices.jpg",
+          "src": "http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4",
+          "id": 4
+        },
+        {
+          "title": "Me Rehúso",
+          "author": "Danny Ocean",
+          "type": "video",
+          "cover": "./images/covers/rehuso.jpg",
+          "src": "http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4",
+          "id": 5
+        }
+      ]
+    }
+  ]
+}
+
diff --git a/src/categories/.DS_Store b/src/categories/.DS_Store
diff --git a/src/categories/components/categories.css b/src/categories/components/categories.css
@@ -0,0 +1,5 @@
+.Categories {
+  overflow: hidden;
+  padding: 20px 0 20px 20px;
+  background: white;
+}
diff --git a/src/categories/components/categories.js b/src/categories/components/categories.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import Category from './category';
+import './categories.css';
+import Search from '../../widgets/containers/search';
+
+function Categories(props) {
+  return (
+    <div className="Categories">
+      <Search />
+      {
+        props.categories.map((item) =>{
+          return (
+            <Category
+              key={item.id}
+              {...item}
+              handleOpenModal={props.handleOpenModal}
+            />
+          )
+        })
+      }
+    </div>
+  )
+}
+
+export default Categories
diff --git a/src/categories/components/category.css b/src/categories/components/category.css
@@ -0,0 +1,18 @@
+.Category {
+  margin-bottom: 1em;
+}
+
+.Category-title {
+  text-transform: uppercase;
+  font-size: 20px;
+  color: #3f546c;
+  margin: 0 0 20px 0;
+  letter-spacing: 2px;
+  font-weight: bold;
+}
+.Category-description {
+  color: #888b8e;
+  font-weight: 300;
+  margin: 0;
+  font-size: 14px;
+}
diff --git a/src/categories/components/category.js b/src/categories/components/category.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import Playlist from '../../playlist/components/playlist.js';
+import './category.css';
+
+function Category(props) {
+  return (
+    <div className="Category">
+      <p className="Category-description">{props.description}</p>
+      <h2 className="Category-title">{props.title}</h2>
+      <Playlist
+        handleOpenModal={props.handleOpenModal}
+        playlist={props.playlist}
+      />
+    </div>
+  )
+}
+
+export default Category;
diff --git a/src/entries/home.js b/src/entries/home.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { hydrate } from 'react-dom';
+import Home from '../pages/containers/home';
+// import Playlist from './src/playlist/components/playlist';
+import data from '../api.json';
+// console.log('Hola mundo!' )
+
+const homeContainer = document.getElementById('home-container')
+
+// ReactDOM.render(que voy a renderizar, donde lo haré);
+// const holaMundo = <h1>hola Estudiante!</h1>;
+hydrate( <Home data={data} />, homeContainer);
+
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,3 +2,4 @@ dist @@
     node_modules
     yarn.*
     *.lock
+    *-lock.*