Terminando de detallar nuestro player

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

Andres Felipe Valencia Benitez

student•

Hola!

Implemente la solución aplicando useLayoutEffect.

Según la documentación funciona igual que useEffect, pero renderiza de forma síncrona.

import React, { useLayoutEffect } from 'react';

const Player = (props) => {
  const { id } = props.match.params;
  const hasPlaying = Object.keys(props.playing).length > 0;

  useLayoutEffect(() => {
    props.setVideoSource(id);
  }, []);

  return hasPlaying ? (
    <section className='player'>
      <video className='player__item' controls autoPlay>
        <source src={props.playing.source} type='video/mp4' />
      </video>
      <div className='player__back'>
        <button type='button' onClick={() => props.history.goBack()}>
          Regresar
        </button>
      </div>
    </section>
  ) : <NotFound />;
};

Fabián Antonio Salgado Sepúlveda

student•

Creo que es la mejor solución

Héctor Hugo Sandoval Marcelo

student•

Muchas gracias

Franyer Verjel

student•

Agregando un loading mediante el hook useState.

const Player = ({ history, match, playing, getVideoSource }) =&gt; {
  const { id } = match.params;
  const [loading, setLoading] = useState(true);
  const hasPlaying = Object.keys(playing).length &gt; 0;

  useEffect(() =&gt; {
    getVideoSource(id);
    setLoading(false);
  }, []);

  const handleBtnBack = () =&gt; history.goBack();

  if (loading) {
    return &lt;h2&gt;Cargando...&lt;/h2&gt;;
  }

  return hasPlaying ? (
    &lt;div className='player'&gt;
      &lt;video controls autoPlay&gt;
        &lt;source src={playing.source} type='video/mp4' /&gt;
      &lt;/video&gt;
      &lt;div className='Player-back'&gt;
        &lt;button type='button' onClick={handleBtnBack}&gt;
          Regresar
        &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  ) : (
    &lt;Redirect to='/404/' /&gt;
  );
};

Ginnio Sarabia

student•

Esta es la mejor solución.

Muchas gracias.

David Dias

student•

Excelente funciono muy bien

Rodrigo Cerón

student•

El link del source de los videos ya no es publico, al menos a mi me dio un error 401 al intentar llegar a ellos, por lo que les dejo esta opcion "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" solo deben de cambiar el _source _ de cada video en el initialState del archivo /src/index.js

Manuel Jesús Cupil Sauzedo

student•

Tienes toda la razón, a mi no me funcionaba y con el api de google si funciona.

Andrés Felipe Eslava Zuluaga

student•

Estamos igual = / !

Alejandro Betancur

student•

Hola , buenas noches. Compañeros mi solucion fue colocarle un setTimeout al Redirect , asi siempre va a cargar el video antes que llevarme al error.

import React, { useEffect } from "react";
import { connect } from "react-redux";
import { getVideoSource } from "../actions/index";
import { Redirect } from "react-router-dom";
import "../assets/styles/components/Player.scss";
const Player = props => {
  const { id } = props.match.params;
  const hasPlaying = Object.keys(props.playing).length > 0;

  useEffect(() => {
    props.getVideoSource(id);
  }, []);

  return hasPlaying ? (
    <div className="Player">
      <video controls autoPlay>
        <source src={props.playing.source} type="video/mp4" />
      </video>
      <div className="Player-back">
        <button
          type="button"
          onClick={() => {
            props.history.goBack();
          }}
        >
          Regresar
        </button>
      </div>
    </div>
  ) : (
      setTimeout(<Redirect to="/404/" />, 1000)
    );
};
const mapStateToProps = state => {
  return {
    playing: state.playing
  };
};

const mapDispatchToProps = {
  getVideoSource
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Player);

Enrique Alexis Lopez Araujo

student•

Funciona muy bien la solucion

José Andrés Cervera Novelo

student•

Gracias hermano, me sirvió! :)

Effren Anthony Peña Sánchez

student•

Para los que no pueden ver los videos porque ya no están disponibles, aquí dejo mi store con videos disponibles, espero que no los deshabiliten. Ingresen al link para verlo

Carlos Alberto Angel Angel

student•

gracias amigo. me fue de mucha ayuda. yo pensaba que tenia algun error en el codigo.

Alexis Villalva

student•

Gracias!!

Juan Carlos Pinzón

student•

Para el bug que se presenta, me tomó un poco de tiempo entender por qué sucedía y en unos comentarios anteriores un compañero da una solución muy lógica, que soluciona el problema de forma concreta. Sucede que el hook useEffect funciona asincronamente por decirlo así, es decir que cuando la ejecución va en la línea del useEffect, antes de que termine o mientras se ejecuta, la ejecución continua.

Inicialmente (primera ejecución) el playing es {} (Objeto vacío), es decir que en primera instancia el hasPlaying es false.

Cuando llega la ejecución al return el hasPlaying aún es vacía, pero como "al mismo tiempo" se estaba ejecutando el useEffect, éste cambió el estado, por eso se vuelve a renderizar y en este nuevo renderizado el hasPlaying ya es true, porque encontró el objeto que buscaba, entonces ya se renderiza normal, por eso sucede como esa intermitencia de que se alcanza a ver el 404 por pequeñísimo instante. Ahora bien todo esto ocurre en una fracción de segundo, por eso puede que sea casi que imperceptible.

La solución que el compañero en un comentario da es que se use el hook useLayoutEffect funciona igual al useEffect solo que lo que hará es que éste se ejecute de forma síncrona, es decir la ejecución no llega al return si el useLayoutEffect no ha terminado de ejecutarse o sea, no se muestra nada y como modifica el estado vuelve y renderiza con eso ya tenemos el hasPlaying true o en el peor de los casos false.

Haga de cuenta de useLayoutEffect es como si tuviera ++async/await++.

const Player = ({ match, playing, getVideoSource, history }) => {

	const { id } = match.params

	const hasPlaying = Object.keys(playing).length > 0

	useLayoutEffect(() => {
		getVideoSource(id)
	}, [])

	return hasPlaying ? (
		<div className='Player'>
			<video controls autoPlay>
				<source src={playing.source} type='video/mp4' />
			</video>
			<div className='Player-back'>
				<button type='button' onClick={() => history.goBack()}>
					Regresar
				</button>
			</div>
		</div>
	) :
		<NotFound />
}

Así es como lo he entendido, si estoy equivocado en algo, por favor házmelo saber, y si no me has entendido también para intentar de otra forma.

José Luis Burgon Cervantes

student•

Muy bueno tu planteamiento del problema. Estoy de acuerdo con que esa es la razón por la que sucede el bug. Lastimosamente probé el useLayoutEffect y no me funciono. Sigo buscando una solución pues en mi caso particular nunca se me muestra el reproductor. Me quedo fijo en el 404,

Daniel Alejandro Alvarez Garcia

student•

Lo que dices esta bien pero el punto donde quieres llegar no esta bien planteado,el problema va mas allá de los estados es la tardanza del connect en hacer su funcion sin embargo en los aportes han dado soluciones viables y mas logicos.Sin embargo gracias por tu aporte del uso del useEffect

Jaime Gabriel González Célleri

student•

Una solución podría ser tratar los 2 eventos por separado: cargar video y video no encontrado:

import React, { useEffect, useState } from 'react'
import { connect } from 'react-redux'
import { getVideoSource } from '../actions'

import NotFound from './NotFound'

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

const Player = props => {
  const { id } = props.match.params
  const [ loading, setLoading ] = useState(true)
  const hasPlaying = Object.keys(props.playing).length > 0

  useEffect(() => {
    props.getVideoSource(id)
    setLoading(false)
  }, [])

  if (loading) return <h2>Cargando video...</h2>
  
  return hasPlaying ? (
		<div className="player">
			<video controls autoPlay>
				<source src={props.playing.source} type="video/mp4" />
			</video>
			<div className="Player-back">
				<button type="button" onClick={() => props.history.goBack()}>
					Regresar
				</button>
			</div>
		</div>
	) : <NotFound />
}

const mapStateToProps = state => (
  {
    playing: state.playing
  }
)

const mapDispatchToProps = {
	getVideoSource,
}

export default connect(mapStateToProps, mapDispatchToProps)(Player)

Sandra Mishale Niño Arbelaez

student•

Me gustó tu solución. Gracias.

Manuel Alejandro Aguilar Téllez Girón

student•

Elegante y eficaz. Felicidades y muchas gracias por tu aporte, no tenia ni idea xD

Daniel Hernández

student•

con ECMA script 6 podemos parsear strings a numeros anteponiendo el signo +, para este caso seria: item.id === +action.payload

Jose Anibal Garcia Giraldo

student•

Excelente aporte bro, gracias super útil! :D

John Alexander Diaz Astudillo

student•

Pensé que algo estaba mal, puesto que siempre me reproducía el mismo video !FacePalm

Markoz Peña Mendez

student•

Same :(

Alexis Alberto Texis Auza

student•

Hola yo hago lo siguiente :

-Dejo en null el atributo playing para ser mucho mas exacto en que no se ha cargado absolutamente nada. -La idea es que una vez que en el REDUCER se intente buscar el video,tendra como valor un objeto con o sin atributos. En el momento que tenga un valor(objeto) lo considero que ya se ha cargado el video y ahora lo que hago es que si esta vacio, quieres decir que no se encontro,y si es todo lo contrario retorno el componente ya que si se habra encontrado.

const initialState = {
	playing : null,
	...
}

En el componente :

const media = ({id,playing,setPlaying}) => {
   useEffect(() =>{
     setPlaying(id)
   },[])

  const render = () => {
    if(!playing) return <h3>cargando...</h3>
    if(!Object.keys(playing).length) return <h3>No existe el video</h3>
    return (
       <div className='video-player'>
		<video
         src={playing.source} 
         controls
	      autoPlay
         />
       </div>
    )
  }
}

Enrique Alexis Lopez Araujo

student•

Trate de implementarlo pero no logro saber donde devuelves render podrias ayudarme para saber como retornar correctamente el componente?

Alexis Alberto Texis Auza

student•

Hola,lo haces en el metodo return,ejecutando la función.


const MiComponente = () => {
  const render() => {
  ...codigo
  }

//Si solo vas a retorna el video player,solo ejecuta la funcion
 return  render()

//Si tienes una layout harias esto.
 return (
  <MiLayoutContainer>
    { render() }
    <MiComponente/>
    <MiComponente/>
  <Mi/LayoutContainer>
  )
}

Jose Colmenares

student•

Esta es la clase que mas me ha costado del curso :/

Pablo Martino

student•

a mi no me reproducía el video. Parece que la URL es prvada y no permite visualizar.

Podéis sino usar algún video de stock y sustituirlo en el index.js principal.

os dejo uno si alguien necesita https://static.videezy.com/system/resources/previews/000/044/479/original/banana.mp4

IVAN DARIO CHIPATECUA CABEZAS

student•

Yo utilice useState.

<code>
import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import { Redirect } from 'react-router-dom';
import { getVideoSource } from '../actions';
import '../assets/styles/components/Player.scss';

const Player = (props) => {
  const { id } = props.match.params;
  const [loading, changeLoading] = useState(true);
  const hasPlaying = Object.keys(props.playing).length > 0;

  useEffect(() => {
    props.getVideoSource(id);
    changeLoading(false);
  }, []);

  return loading ?
    (<h1>Loading...</h1>) :
    hasPlaying ? (
      <div className='Player'>
        <video controls autoPlay>
          <source src={props.playing.source} type='video/mp4' />
        </video>
        <div className='Player-back'>
          <button type='button' onClick={() => props.history.goBack()}>
            Regresar
          </button>
        </div>
      </div>
    ) : <Redirect to='/404' />;
};

const mapStateToProps = (state) => {
  return {
    playing: state.playing,
  };
};

const mapDispatchToProps = {
  getVideoSource,
};

export default connect(mapStateToProps, mapDispatchToProps)(Player);
</code>

Javier Romero

student•

una pregunta compañeros tengo que poner un video o algo asi porque no me sale nada 😅😅

Alex Camacho

teacher•

Sí, debes de añadir un video para probar el reproductor x)

Javier Romero

student•

hola en que parte del código pongo ese video 😅

Carlos Rafael Padilla Ramirez

student•

En este bloque el profesor puso original en lugar de originals por si tienen el mismo problema que yo.

case 'GET_VIDEO_SOURCE':
      return {
        ...state,
        playing: state.trends.find((item) => item.id === Number(action.payload)) || state.originals.find((item) => item.id === Number(action.payload)) || [],
      };```

Gaspar Dolcemascolo

student•

Los videos ya no están disponibles verdad? Me sale esto en consola, aclaro de que el playing me retorna todo el obj con source incluido.

GEThttps://mdstrm.com/video/58333e214ad055d208427db5.mp4
La carga HTTP ha fallado con el estado 401. Ha fallado la carga del recurso de medios https://mdstrm.com/video/58333e214ad055d208427db5.mp4. 8
Ha fallado la carga de todos los recursos candidatos. Carga de medios pausada.

Edwin Olaff Cuba Davila

student•

Hola @gasparnd, ya no estan disponibles los videos, ahora son privados. Te recomiendo que cambiar la url del source de los video por esta "https://" "commondatastoragegoogleapis.con/gtv-videos-bucket/sample/BigBuckBunny.mp4" para que al menos puedas probar su funcionalidad.

Gaspar Dolcemascolo

student•

Gracias =D

Andres David Sanchez

student•

No entendi porque utilizo useEffect para llamar el reducer! Alguien puede explicarmee? :(

andrés eduardo betancourt bescanza

student•

Recuerda que useEffect se ejecuta de primero, asi al hacer click en el componente este busca el id que se utilizara para renderizar el video

Sebastián Buitrago

student•

Hay alguna diferencia entre usar "react-router" y "react-router-dom" al momento de importar un archivo ya que mi auto import me pone los archivos asi

import { Redirect } from "react-router"

Platzi Nauta

student•

Que tal! Les comparto el initialState actualizado con nuevos sources para los videos, ya que los que venían originalmente no se podían acceder.

https://gist.github.com/Fredyspt/087cc10ad1ac0513eb2683cb684b5a15

Franklin Gerardo Pimentel Hernández

student•

Woow, muchas gracias. Esto es lo que me faltaba :3

Andrés Campuzano Garzón

student•

🦄 Acá el código trabajado hasta el momento: https://github.com/AndresCampuzano/React-Router-and-Redux/commits/master

César Palma

student•

me gusta tu repositorio con commits por clase, ayuda a revisar algun cambio faltante

import React, { useLayoutEffect } from 'react';

const Player = (props) => {
  const { id } = props.match.params;
  const hasPlaying = Object.keys(props.playing).length > 0;

  useLayoutEffect(() => {
    props.setVideoSource(id);
  }, []);

  return hasPlaying ? (
    <section className='player'>
      <video className='player__item' controls autoPlay>
        <source src={props.playing.source} type='video/mp4' />
      </video>
      <div className='player__back'>
        <button type='button' onClick={() => props.history.goBack()}>
          Regresar
        </button>
      </div>
    </section>
  ) : <NotFound />;
};

const Player = ({ history, match, playing, getVideoSource }) =&gt; {
  const { id } = match.params;
  const [loading, setLoading] = useState(true);
  const hasPlaying = Object.keys(playing).length &gt; 0;

  useEffect(() =&gt; {
    getVideoSource(id);
    setLoading(false);
  }, []);

  const handleBtnBack = () =&gt; history.goBack();

  if (loading) {
    return &lt;h2&gt;Cargando...&lt;/h2&gt;;
  }

  return hasPlaying ? (
    &lt;div className='player'&gt;
      &lt;video controls autoPlay&gt;
        &lt;source src={playing.source} type='video/mp4' /&gt;
      &lt;/video&gt;
      &lt;div className='Player-back'&gt;
        &lt;button type='button' onClick={handleBtnBack}&gt;
          Regresar
        &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  ) : (
    &lt;Redirect to='/404/' /&gt;
  );
};

import React, { useEffect } from "react";
import { connect } from "react-redux";
import { getVideoSource } from "../actions/index";
import { Redirect } from "react-router-dom";
import "../assets/styles/components/Player.scss";
const Player = props => {
  const { id } = props.match.params;
  const hasPlaying = Object.keys(props.playing).length > 0;

  useEffect(() => {
    props.getVideoSource(id);
  }, []);

  return hasPlaying ? (
    <div className="Player">
      <video controls autoPlay>
        <source src={props.playing.source} type="video/mp4" />
      </video>
      <div className="Player-back">
        <button
          type="button"
          onClick={() => {
            props.history.goBack();
          }}
        >
          Regresar
        </button>
      </div>
    </div>
  ) : (
      setTimeout(<Redirect to="/404/" />, 1000)
    );
};
const mapStateToProps = state => {
  return {
    playing: state.playing
  };
};

const mapDispatchToProps = {
  getVideoSource
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Player);

const Player = ({ match, playing, getVideoSource, history }) => {

	const { id } = match.params

	const hasPlaying = Object.keys(playing).length > 0

	useLayoutEffect(() => {
		getVideoSource(id)
	}, [])

	return hasPlaying ? (
		<div className='Player'>
			<video controls autoPlay>
				<source src={playing.source} type='video/mp4' />
			</video>
			<div className='Player-back'>
				<button type='button' onClick={() => history.goBack()}>
					Regresar
				</button>
			</div>
		</div>
	) :
		<NotFound />
}

import React, { useEffect, useState } from 'react'
import { connect } from 'react-redux'
import { getVideoSource } from '../actions'

import NotFound from './NotFound'

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

const Player = props => {
  const { id } = props.match.params
  const [ loading, setLoading ] = useState(true)
  const hasPlaying = Object.keys(props.playing).length > 0

  useEffect(() => {
    props.getVideoSource(id)
    setLoading(false)
  }, [])

  if (loading) return <h2>Cargando video...</h2>
  
  return hasPlaying ? (
		<div className="player">
			<video controls autoPlay>
				<source src={props.playing.source} type="video/mp4" />
			</video>
			<div className="Player-back">
				<button type="button" onClick={() => props.history.goBack()}>
					Regresar
				</button>
			</div>
		</div>
	) : <NotFound />
}

const mapStateToProps = state => (
  {
    playing: state.playing
  }
)

const mapDispatchToProps = {
	getVideoSource,
}

export default connect(mapStateToProps, mapDispatchToProps)(Player)

const media = ({id,playing,setPlaying}) => {
   useEffect(() =>{
     setPlaying(id)
   },[])

  const render = () => {
    if(!playing) return <h3>cargando...</h3>
    if(!Object.keys(playing).length) return <h3>No existe el video</h3>
    return (
       <div className='video-player'>
		<video
         src={playing.source} 
         controls
	      autoPlay
         />
       </div>
    )
  }
}

const MiComponente = () => {
  const render() => {
  ...codigo
  }

//Si solo vas a retorna el video player,solo ejecuta la funcion
 return  render()

//Si tienes una layout harias esto.
 return (
  <MiLayoutContainer>
    { render() }
    <MiComponente/>
    <MiComponente/>
  <Mi/LayoutContainer>
  )
}

<code>
import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import { Redirect } from 'react-router-dom';
import { getVideoSource } from '../actions';
import '../assets/styles/components/Player.scss';

const Player = (props) => {
  const { id } = props.match.params;
  const [loading, changeLoading] = useState(true);
  const hasPlaying = Object.keys(props.playing).length > 0;

  useEffect(() => {
    props.getVideoSource(id);
    changeLoading(false);
  }, []);

  return loading ?
    (<h1>Loading...</h1>) :
    hasPlaying ? (
      <div className='Player'>
        <video controls autoPlay>
          <source src={props.playing.source} type='video/mp4' />
        </video>
        <div className='Player-back'>
          <button type='button' onClick={() => props.history.goBack()}>
            Regresar
          </button>
        </div>
      </div>
    ) : <Redirect to='/404' />;
};

const mapStateToProps = (state) => {
  return {
    playing: state.playing,
  };
};

const mapDispatchToProps = {
  getVideoSource,
};

export default connect(mapStateToProps, mapDispatchToProps)(Player);
</code>

case 'GET_VIDEO_SOURCE':
      return {
        ...state,
        playing: state.trends.find((item) => item.id === Number(action.payload)) || state.originals.find((item) => item.id === Number(action.payload)) || [],
      };```

GEThttps://mdstrm.com/video/58333e214ad055d208427db5.mp4
La carga HTTP ha fallado con el estado 401. Ha fallado la carga del recurso de medios https://mdstrm.com/video/58333e214ad055d208427db5.mp4. 8
Ha fallado la carga de todos los recursos candidatos. Carga de medios pausada.

Terminando de detallar nuestro 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