Vista general del player

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!

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

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

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

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

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