React - воспроизведение мультимедиа после загрузки элементов с помощью array.map ()

Я использую react-player для рендеринга видео на YouTube с map(), например:

class Jukebox extends Component {
  constructor (props) {
    super(props);
    this.state = {
     youtube_urls:[],      
     clients:[],        
    };
  };

  componentDidMount() {
    if (this.props.isAuthenticated) {
      this.getItems();
    }
  };

  getItems(event) {
    const {userId} = this.props
    const options = {
      url: `${process.env.REACT_APP_WEB_SERVICE_URL}/jukebox/${userId}`,
      method: 'get',
      headers: {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': true,
        Authorization: `Bearer ${window.localStorage.authToken}`
      }
    };
    return axios(options)
    .then((res) => { 
      console.log(res.data)  
      console.log(res.data.data) 
      this.setState({
        clients: res.data.data[0].clients,
        youtube_urls:res.data.data[0].youtube_urls
      })
    })
    .catch((error) => { console.log(error); });
  };

render() {
 const { youtube_urls } = this.state;
 return (
  <div>      
   <h1 className="title is-1">Jukebox</font></h1>
  {
   clients.map((client, index) => {
     /* 
    Obtain preview from state.previews for current artist index 
    */
    const audio = youtube_urls[index]
    /* 
    Render current client data, and corresponding audio url
    */
    return(
      <div key={index}>
      <ul>
        <ReactPlayer 
          url={ audio }
          controls
          playing // <--- does not work
          width='50'
          height='150'
        />
        <div className="Line" />
      </ul></div>
     )
   })
 })
};

Согласно одному из реквизитов библиотеки, playing (см. Выше), вы можете автоматически воспроизводить мультимедиа по окончании рендеринга, но если я использую map(), это приведет к одновременному воспроизведению всех видео.

В то же время есть callback-опора onReady():

Вызывается, когда носитель загружен и готов к воспроизведению. Если для параметра воспроизведения установлено значение «истина», мультимедиа будет воспроизводиться немедленно.

ВОПРОС:

Как мне реализовать это и воспроизвести все видео, начиная с индекса 0, по одному после загрузки всех медиафайлов?


reactjs react-player
person 8-Bit Borges    schedule 10.11.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я бы использовал две переменные состояния: videosLoadedCount, playingIndex. Инициализируйте videosLoadedCount в 0 и playingIndex в -1.

Вы можете определить игровые свойства по значению состояния playingIndex.

Когда есть onReady, увеличивайте videosLoadedCount. Когда оно достигнет количества видео, вы можете увеличить playingIndex. Когда есть onEnded обратный вызов, вы увеличиваете playingIndex.

Примерно так должно работать:

class Jukebox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loadedVideosCount: 0,
      currentPlayingIndex: -1,
    };
  }

  render() {
    const { youtube_urls } = this.props;
    const { loadedVideosCount, currentPlayingIndex } = this.state;

    return (
      <div>
        {youtube_urls.map((url, index) => (
          <ReactPlayer
            url={url}
            controls
            onLoaded={() =>
              this.setState(currentState => ({
                loadedVideosCount: loadedVideosCount + 1,
                currentPlayingIndex:
                  loadedVideosCount + 1 === youtube_urls.length ? 0 : -1,
              }))
            }
            onEnded={() =>
              this.setState(currentState => ({
                currentPlayingIndex: currentPlayingIndex + 1,
              }))
            }
            playing={index === currentPlayingIndex} // <--- does not work
            width="50"
            height="150"
          />
        ))}
      </div>
    );
  }
}
person Axnyff    schedule 10.11.2019
comment
Не могли бы вы использовать код? Я добавил свой конструктор. Я бы согласился и проголосовал за доброту - person 8-Bit Borges; 11.11.2019
comment
почему вы меняете youtube_urls с состояния на props? - person 8-Bit Borges; 11.11.2019
comment
Я воссоздал компонент с нуля, так как синтаксис был неправильным. Это не имело особого смысла, поскольку у них не было возможности добавить видео в youtube_urls, и его состояние могло усложнить проблему. - person Axnyff; 11.11.2019
comment
Для полноты картины я отредактировал свои компоненты, чтобы вы могли понять мои состояния. Все еще не имеет смысла? Я отображаю clients, а не yoube_urls, который индексирует пользовательские клиенты ... на случай, если это поможет вам - person 8-Bit Borges; 11.11.2019