Vista general del player

Clase 23 de 29 • Curso de React Router 5 y Redux

Ricardo Celis

teacher•

https://static.platzi.com/media/tmp/class-files/git/escuela-js/escuela-js-0b8424b25f04a305cf0666a8b91ebf74b9f2140e/src/assets/styles/components/Player.scss les dejo el acceso directo al archivo!

Carlos David Ramírez Gómez

student•

¿Este es tú heroe? El mío sí

Jose Daniel Molina

student•

Gracias, la salvacion!

Lluis Pitarch Ripolles

student•

Os recomiendo el plugin para VSC de Simple React Snippets

con 'imr' => import react from 'react' con 'sfc' => se crea la estructura de un stateless component con 'cc' => se crea la estructura de un componente completo

Super rápido para agilizar el flujo de trabajo

Jose Daniel Molina

student•

Excelente aporte, muchas gracias

Victor Baruch Pazaran Jaimes

student•

genial, justo estaba pensando si existía algo así

José Alejandro Muñoz Ruiz

student•

Player.scss con SASS

.Player {
  video {
    object-fit: cover;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    &:hover .Player-back {
      display: block;
    }
  }
  &-back {
    position: fixed;
    top: 5px;
    left: 5px;
    font-size: 12px;
    button {
      text-decoration: none;
      color: white;
      background: rgba(0, 0, 0, 0.3);
      padding: 5px;
      border-radius: 5px;
      border: 0;
      outline: 0;
      cursor: pointer;
    }
  }
}

Andrés Campuzano Garzón

student•

🦄 Acá el código hasta el momento: https://github.com/AndresCampuzano/React-Router-and-Redux/commit/101d0f219d68788a095640e5ebae10112712a3fa

Alexander Nova Arevalo

student•

Siempre me ayudo estos commits

Andrés Campuzano Garzón

student•

Un gusto Alex

Alan Alexis Arostegui Maranto

student•

Creamos Player.jsx en dentro de containers. Creamos la logica de estructura y scss de nuestro player. En routes añadimos una nueva ruta para nuestro player y le pasamos un id (es decir, una propiedad a nuestra ruta) <Route exact path="/player/:id" component={Player} /> y lo importamos import Player from '../containers/Player'; Despues hacemos Link al icon de play que se encuentra en carousel Item. <Link to={/player/${id}}> <img className="carousel-item__details--img" src={playIcon} alt="Play Icon" />
</Link> De esta manera creamos una url por cada uno de los elementos que se esta iterando

Camilo Eduardo Gomez Davila

student•

Tuve que poner

controls={true}

para que no me generara un warning, no se si es correcto, pero funciona

import React from 'react'

const Player = () => {
    return(
        <div className="Player">
            <video controls={true} autoPlay>
                <source src="" type="video/mp4" />
            </video>
            <div className="Player-back">
                <button type="button">
                    Regresar
                </button>
            </div>
        </div>
    )
}

export default Player```

Marcelo Oggero

student•

Falto importar el scss del Player. Yo lo cargué así: import '../assets/styles/components/Player.scss';

Marcelo Oggero

student•

Me respondo solo justo en el siguiente video lo importa.🤦‍♂️

Platzi Team

student•

Que col es cuando no debes ver el video si no simplemente con lo que dice el profesor ya sabes que esta haciendo y que debes hacer 😍

Jorge Alberto Rodriguez Flores

student•

Player.scss

video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
}

video:hover .Player-back {
  display: block;
}

.Player-back {
  position: fixed;
  top: 5px;
  left: 5px;
  font-size: 12px;
}

.Player-back button {
  text-decoration: none;
  color: white;
  background: rgba(0, 0, 0, .3);
  padding: 5px;
  border-radius: 5px;
  border: 0;
  outline: 0;
  cursor: pointer;
}

Wilmar Yoan Malaver Malaver

student•

para que cargen los estilos por si a alguien le sirve. :3

Player.jsx

import '../assets/styles/components/Player.scss';

Jaime David Burbano Montoya

student•

video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
}

video:hover .Player-back {
  display: block;
}

.Player-back {
  position: fixed;
  top: 5px;
  left: 5px;
  font-size: 12px;
}

.Player-back button {
  text-decoration: none;
  color: white;
  background: rgba(0, 0, 0, .3);
  padding: 5px;
  border-radius: 5px;
  border: 0;
  outline: 0;
  cursor: pointer;
}

Cesar Antonio

student•

Respecto a los dos puntos, ¿Todo lo que siga va a ser una propiedad, o es que va a diferenciar de algún posible slash que le continúe para determinar el fin de su designación?

Khevin Efraín

student•

Va atrapar todo lo que siga a menos se especifique una nueva ruta después de un slash. Para esto puedes seguir añadiendo los dos puntos

Cesar Antonio

student•

Gracias compañero :-)

Jose Daniel Molina

student•

Y si usamos el player que hicimos en el curso profesional de JavaScript, sería todo un reto, además lo podemos instalar como una dependencia con npm...

Victor Baruch Pazaran Jaimes

student•

yo hice una implementación para mostrar los videos que sacamos del API en otro de los cursos

Jose Daniel Molina

student•

Quiero hacer eso también, de hecho hasta he pensado en usar la API de YouTube

Laura Camila Pregonero

student•

Good Class!!! ..........

..................... ..........

............... ................

................... .....................

Lalo Díaz

student•

Pueden agregar un Link para regresar a la vista principal desde el Player `<Link to="/"> <button type="button"> Regresar </button>

</Link>`

Jhonatan David Ibarra Lavado

student•

estupendo, es muy agradable repasar la clase

Diego Alejandro Cifuentes Arango

student•

Me dice que encuentra el video (:

App.js

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";

import Home from "../containers/Home";
import Login from "../containers/Login";
import Register from "../containers/Register";
import NotFound from "../containers/NotFound";
import Layout from "../components/Layout";
import Player from "../containers/Player";

const App = () => (
  <BrowserRouter>
    <Layout>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/login" component={Login} />
        <Route exact path="/register" component={Register} />
        <Route exact path="player/:id" component={Player} />
        <Route component={NotFound} />
      </Switch>
    </Layout>
  </BrowserRouter>
);

export default App;import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";

import Home from "../containers/Home";
import Login from "../containers/Login";
import Register from "../containers/Register";
import NotFound from "../containers/NotFound";
import Layout from "../components/Layout";
import Player from "../containers/Player";

const App = () => (
  <BrowserRouter>
    <Layout>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/login" component={Login} />
        <Route exact path="/register" component={Register} />
        <Route exact path="player/:id" component={Player} />
        <Route component={NotFound} />
      </Switch>
    </Layout>
  </BrowserRouter>
);

export default App;

Player.js

import React from "react";

import "../assets/styles/components/Player.scss";

const Player = () => {
  return (
    <div className="Player">
      <video controls autoPlay>
        <source src="" type="video/mp4" />
      </video>
      <div className="Player-black">
        <button type="button">Regresar</button>
      </div>
    </div>
  );
};

export default Player;

carouselItem.js

import React from "react";
import { connect } from "react-redux";

import { Link } from "react-router-dom";

import { setFavorite, deleteFavorite } from "../actions";

import PropTypes from "prop-types";
import "../assets/styles/components/CarouselItem.scss";

import playIcon from "../assets/static/play-icon.png";
import plusIcon from "../assets/static/plus-icon.png";

export const CarouselItem = props => {
  const { id, cover, title, year, contentRating, duration, isList } = props;

  const handleSetFavorite = () => {
    props.setFavorite({
      id,
      cover,
      title,
      year,
      contentRating,
      duration
    });
    document.getElementById(id).style.display = "none";
  };

  const handleDeleteFavorite = itemId => {
    props.deleteFavorite(itemId);
    document.getElementById(id).style.display = "inline";
  };

  return (
    <div className="carousel-item">
      <img className="carousel-item__img" src={cover} alt={title} />
      <div className="carousel-item__details">
        <div>
          <Link to={`/player/${id}`}>
            <img
              className="carousel-item__details--img"
              src={playIcon}
              alt="Play Icon"
            />
          </Link>

          {isList ? (
            <img
              className="carousel-item__details--img"
              src="https://static.platzi.com/media/public/uploads/remove-icon_a56b8107-2c02-49ed-bead-308031b0dd76.png"
              alt="Plus Icon"
              onClick={() => handleDeleteFavorite(id)}
            />
          ) : (
            <img
              className="carousel-item__details--img"
              src={plusIcon}
              alt="Plus Icon"
              onClick={handleSetFavorite}
              id={id}
            />
          )}
        </div>
        <p className="carousel-item__details--title">{title}</p>
        <p className="carousel-item__details--subtitle">{`${year} ${contentRating} ${duration}`}</p>
      </div>
    </div>
  );
};

CarouselItem.propTypes = {
  cover: PropTypes.string,
  title: PropTypes.string,
  year: PropTypes.number,
  contentRaiting: PropTypes.string,
  duration: PropTypes.number
};

const mapDispatchToProps = {
  setFavorite,
  deleteFavorite
};

export default connect(
  null,
  mapDispatchToProps
)(CarouselItem);

Héctor Eduardo López Carballo

student•

Genial, Diego! Te ha gustado este curso hasta ahora?

Diego Alejandro Cifuentes Arango

student•

Hombre, he agregado unos conocimientos pardisimos, no me gusto, me encanto, y me emociona más saber que ya casi llego a la lógica de backend, porque aunque suene un poco ilógico, sin la lógica del backend no podrás expandir tu fronted, así que, a seguir practicando !

Alejandro González Reyes

student•

Envío mi código para que puedan auxiliarme con respecto a la primer pregunta que hice en una entrada anterior

import React from 'react';

import '../assets/styles/components/Player.scss';

const Player = (props) => {

  const handleBack = (event) => {
    event.preventDefault();
    props.history.goBack();
  };

  return (
    <div className='Player'>
      <video controls autoPlay>
        <source src='' type='video/mp4' />
      </video>
      <div className='Player-back'>
        <button type='button' onClick={handleBack}>Regresar</button>
      </div>
    </div>
  );
};

export default Player;

Juan Castro

teacher•

¿Puedes ir a la pregunta anterior y responderte a ti mismo con el código? Así sabemos tu pregunta y buscamos la respuesta. . O aquí mismo. ¿Cuál es tu pregunta?

Alejandro González Reyes

student•

Tengo una duda Todo se comporta correctamente

Sin embargo, al presionar f5 o abrir directamente la página mediante la URL marca un error

Pero esto no pasa con los demas containers, solo con Player.jsx

Oscar Barajas Tavares

Team Platzi•

Hay un reto para darle solución a este problema.

Juan Jose Vega

student•

En la siguiente clase se soluciona el bug.

sergio enrique sanhueza osorio

student•

Porque en nuestro archivo de rutas el path que pasamos tiene un ' : ' y en el componente carousel item no lo tiene?

.Player {
  video {
    object-fit: cover;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    &:hover .Player-back {
      display: block;
    }
  }
  &-back {
    position: fixed;
    top: 5px;
    left: 5px;
    font-size: 12px;
    button {
      text-decoration: none;
      color: white;
      background: rgba(0, 0, 0, 0.3);
      padding: 5px;
      border-radius: 5px;
      border: 0;
      outline: 0;
      cursor: pointer;
    }
  }
}

import React from 'react'

const Player = () => {
    return(
        <div className="Player">
            <video controls={true} autoPlay>
                <source src="" type="video/mp4" />
            </video>
            <div className="Player-back">
                <button type="button">
                    Regresar
                </button>
            </div>
        </div>
    )
}

export default Player```

video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
}

video:hover .Player-back {
  display: block;
}

.Player-back {
  position: fixed;
  top: 5px;
  left: 5px;
  font-size: 12px;
}

.Player-back button {
  text-decoration: none;
  color: white;
  background: rgba(0, 0, 0, .3);
  padding: 5px;
  border-radius: 5px;
  border: 0;
  outline: 0;
  cursor: pointer;
}

video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
}

video:hover .Player-back {
  display: block;
}

.Player-back {
  position: fixed;
  top: 5px;
  left: 5px;
  font-size: 12px;
}

.Player-back button {
  text-decoration: none;
  color: white;
  background: rgba(0, 0, 0, .3);
  padding: 5px;
  border-radius: 5px;
  border: 0;
  outline: 0;
  cursor: pointer;
}

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";

import Home from "../containers/Home";
import Login from "../containers/Login";
import Register from "../containers/Register";
import NotFound from "../containers/NotFound";
import Layout from "../components/Layout";
import Player from "../containers/Player";

const App = () => (
  <BrowserRouter>
    <Layout>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/login" component={Login} />
        <Route exact path="/register" component={Register} />
        <Route exact path="player/:id" component={Player} />
        <Route component={NotFound} />
      </Switch>
    </Layout>
  </BrowserRouter>
);

export default App;import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";

import Home from "../containers/Home";
import Login from "../containers/Login";
import Register from "../containers/Register";
import NotFound from "../containers/NotFound";
import Layout from "../components/Layout";
import Player from "../containers/Player";

const App = () => (
  <BrowserRouter>
    <Layout>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/login" component={Login} />
        <Route exact path="/register" component={Register} />
        <Route exact path="player/:id" component={Player} />
        <Route component={NotFound} />
      </Switch>
    </Layout>
  </BrowserRouter>
);

export default App;

import React from "react";

import "../assets/styles/components/Player.scss";

const Player = () => {
  return (
    <div className="Player">
      <video controls autoPlay>
        <source src="" type="video/mp4" />
      </video>
      <div className="Player-black">
        <button type="button">Regresar</button>
      </div>
    </div>
  );
};

export default Player;

import React from "react";
import { connect } from "react-redux";

import { Link } from "react-router-dom";

import { setFavorite, deleteFavorite } from "../actions";

import PropTypes from "prop-types";
import "../assets/styles/components/CarouselItem.scss";

import playIcon from "../assets/static/play-icon.png";
import plusIcon from "../assets/static/plus-icon.png";

export const CarouselItem = props => {
  const { id, cover, title, year, contentRating, duration, isList } = props;

  const handleSetFavorite = () => {
    props.setFavorite({
      id,
      cover,
      title,
      year,
      contentRating,
      duration
    });
    document.getElementById(id).style.display = "none";
  };

  const handleDeleteFavorite = itemId => {
    props.deleteFavorite(itemId);
    document.getElementById(id).style.display = "inline";
  };

  return (
    <div className="carousel-item">
      <img className="carousel-item__img" src={cover} alt={title} />
      <div className="carousel-item__details">
        <div>
          <Link to={`/player/${id}`}>
            <img
              className="carousel-item__details--img"
              src={playIcon}
              alt="Play Icon"
            />
          </Link>

          {isList ? (
            <img
              className="carousel-item__details--img"
              src="https://static.platzi.com/media/public/uploads/remove-icon_a56b8107-2c02-49ed-bead-308031b0dd76.png"
              alt="Plus Icon"
              onClick={() => handleDeleteFavorite(id)}
            />
          ) : (
            <img
              className="carousel-item__details--img"
              src={plusIcon}
              alt="Plus Icon"
              onClick={handleSetFavorite}
              id={id}
            />
          )}
        </div>
        <p className="carousel-item__details--title">{title}</p>
        <p className="carousel-item__details--subtitle">{`${year} ${contentRating} ${duration}`}</p>
      </div>
    </div>
  );
};

CarouselItem.propTypes = {
  cover: PropTypes.string,
  title: PropTypes.string,
  year: PropTypes.number,
  contentRaiting: PropTypes.string,
  duration: PropTypes.number
};

const mapDispatchToProps = {
  setFavorite,
  deleteFavorite
};

export default connect(
  null,
  mapDispatchToProps
)(CarouselItem);

import React from 'react';

import '../assets/styles/components/Player.scss';

const Player = (props) => {

  const handleBack = (event) => {
    event.preventDefault();
    props.history.goBack();
  };

  return (
    <div className='Player'>
      <video controls autoPlay>
        <source src='' type='video/mp4' />
      </video>
      <div className='Player-back'>
        <button type='button' onClick={handleBack}>Regresar</button>
      </div>
    </div>
  );
};

export default Player;

Vista general del player

Bienvenida al curso

Todo lo que aprenderás sobre React Router y Redux

¿Qué es React Router? y Aplicarlo en tus proyectos

¿Qué es React Router y cómo instalarlo?

Crear nuestro archivo de Rutas

Container: Login

Container: Register

Container: 404 Not Found

Componente: Layout

Manejando enlaces y configuraciones

¿Qué es Redux?

Qué es Redux

¿Qué es Redux? Profundizando en la herramienta

Instalación de Redux

Creando el Store de Redux

Aplicando Redux a nuestra aplicación

Creando los reducers

Finalizando reducers y eliminar favoritos

Debuggeando nuestro proyecto (agregando validaciones a nuestro componente card)

Crear Formulario de Login

Formulario de Login con Redux

Creando un Servicio para Gravatar

Uso de gravatar en nuestro proyecto

Validación para LogIn LogOut

Register

Register con Redux

Vista general del player

Arreglando la funcionalidad del player

Terminando de detallar nuestro player

Validaciones

Validaciones de UI

Debug con Redux Devtools

Cierre del curso

Cierre del Proyecto