No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

3D
22H
50M
59S
Curso de React Router 5 y Redux

Curso de React Router 5 y Redux

Oscar Barajas Tavares

Oscar Barajas Tavares

Vista general del player

23/29
Recursos

Aportes 23

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Os recomiendo el plugin para VSC de Simple React Snippets

con 鈥榠mr鈥 => import react from 'react鈥
con 鈥榮fc鈥 => se crea la estructura de un stateless component
con 鈥榗c鈥 => se crea la estructura de un componente completo

Super r谩pido para agilizar el flujo de trabajo

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

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鈥搃mg"
src={playIcon}
alt=鈥淧lay Icon鈥
/>
</Link>
De esta manera creamos una url por cada uno de los elementos que se esta iterando

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```

Falto importar el scss del Player. Yo lo cargu茅 as铆:
import 鈥樷/assets/styles/components/Player.scss鈥;

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 馃槏

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

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

Player.jsx

import '../assets/styles/components/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;
}

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鈥

Good Class!!!










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

estupendo, es muy agradable repasar la clase

Cuando tengamos nuestro componente ya listo para reproducir, tenemos que agregarlo a nuestras rutas pero esta tendra una forma caracteristica, ya que le mandaremos datos para que cada video que le demos click sea unico.

<Route exact path="/player/:id" component={player} />

Ahora solo al momento de mandarnos a esta ruta le mandamos como parametro el id o numero que queramos:

<Link to={`/player/${id}`}>
            <img
              className="carousel-item__details--img"
              src={playicon}
              alt="Play Icon"
            />
          </Link>

Genial

Falto importar los estilos al componente :p

Creamos el archivo Player.jsx dentro de containers:

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-back'>
        <button type='button'>
          Regresar
        </button>
      </div>
    </div>
  );
};

export default Player;

Agregamos una ruta nueva a App.js:

import Player from '../containers/Player';

<Route exact path='/player/:id' component={Player} />

Modificamos CarouselItem.jsx

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

<Link to={`/player/${id}`}>
  {/*Creamos una url por cada elemento que iteramos*/}
  <img
    className='carousel-item__details--img'
    src={playIcon}
    alt='Play Icon'
  />
</Link>

Estilos Player.scss

interesante, alguna forma de mostrar un mensaje cuando no hay video para mostrar?

s

Muchas gracias!

genial!!