Estoy mostrando una variedad de videos de YouTube en este componente (usando el reproductor de reacción) y los he reproducido cuando se hace clic en el botón de reproducción personalizado, pero los reproduce (y pausa) todos en lugar del elemento seleccionado actualmente.
Estoy usando el enlace useRef y tengo problemas para descubrir cómo hacer referencia a un video seleccionado y reproducir solo ese video (usando clave y/o índice):
Nota: si elimino useRef hook y ref de ReactPlayer, los videos no se reproducen en absoluto
import React, {useState, useRef} from 'react'; import {useStaticQuery, graphql} from 'gatsby'; import ReactPlayer from 'react-player'; import {Button} from '../Buttons/Button'; import './videos.scss'; import '../../Molecules/Cards/cards.scss'; const VideoCards = () => { const { allVideoCardsJson } = useStaticQuery( graphql` query VideoQuery { allVideoCardsJson { edges { node { title source } } } } `) let videoRef = useRef(); const [isPlaying, setIsPlaying] = useState(false); const playVideo = () => { // this plays/pauses all of the videos setIsPlaying(!isPlaying); // this plays the last video in the array //videoRef.current.getInternalPlayer().playVideo() } return ( <div className="card-container__videos"> {allVideoCardsJson.edges.map(({node, index}) => ( <div className="video-card" key={index} isPlaying={isPlaying}> <ReactPlayer ref={videoRef} url={node.source} width="100%" pip={true} controls={true} playing={isPlaying} ></ReactPlayer> <Button onClick={playVideo} style={{zIndex:'200'}} label="Play Video"></Button> </div> ))} </div> ); }; export default VideoCards;ACTUALIZACIÓN: pude mover la función eventHandler al botón y recibir los mismos resultados (reproducir/pausar todos los videos), pero todavía tengo problemas para descubrir cómo hacer referencia a una clave/identificación única y usarla en la función:
<Button onClick={() => { if(isPlaying) { setIsPlaying(false); } else { setIsPlaying(true); } }} label="Play Video"></Button>isPlaying se establece fuera del mapa y no es específico de ningún índice asignado.
Por lo tanto, debe cambiar isPlaying para que sea específico del elemento asignado. Cree un objeto basado en allVideoCardsJson que contenga valores booleanos para cada elemento. Luego, actualícelos en playVideo haciendo que tome el índice o algún identificador como argumento.
En lugar de un valor booleano, almacene el índice del video que se está reproduciendo en isPlaying
Cambie el botón onClick a: onClicK={() => playVideo(index)}
Cambie la función de reproducción de video:
const playVideo = i => setIsPlaying(i)
En ReactPlayer cambia el accesorio de reproducción: playing={isPlaying === index}
Probablemente podría eliminar el accesorio isPlaying del div que lo contiene, no estoy seguro de lo que está logrando