How to load YouTube videos from self-hosted video ids JSON API

[tunnaduong]

Like the title. I'm building a real-time listen to music together app that uses socket.io and your youtube-iframe API. However, I'm stuck at figuring out how to load YouTube videos from self-hosted video ids JSON API.

For example, here is what the self-hosted API returns when the app calls it:

{
     "playlist_name": "V-POP Không thể thiếu",
     "total_videos": "5",
     "video_ids": ['KypuJGsZ8pQ','UVbv-PJXm14','PNhYz6RmIr4','hTGcMk_QXEg','ixdSsW5n2rI'],
     "now_playing": "0",
     "current_video_duration": "233",
     "elapsed_time": "12"
}

I also want the Youtube-iframe to play the video that has the "now_playing" value refers to the number of indexes in the "video_ids" playlist array. And the player in sync with the "elapsed_time" seconds value from the API.

Thank you for creating this wonderful Youtube-iframe API built for react native. Hope you reply soon!

[tunnaduong]

@LonelyCpp Can you help me with this?

[LonelyCpp]

umm, this is like a general app question lol, so off topic.

you can simply do

// assume "res" has the json API response

const videoToPlay = res.video_ids[res. now_playing];
const startTime = res.elapsed_time;

<YoutubeIframe 
  height={300} 
  videoId={videoToPlay} 
  initialPlayerParams={{ start: startTime}}  
/>

[tunnaduong]

fetch("http://localhost:2003/live", {
      method: "GET",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
    })
      .then((response) => response.json())
      .then((responseJson) => {
        const videoToPlay = responseJson.video_ids[responseJson.now_playing];
        const startTime = responseJson.elapsed_time;
        const settings = responseJson.settings;
        this.setState({
          videos: videoToPlay,
          time: startTime,
          settings: settings,
        });
      });

    return (
      <YoutubePlayer
        height={220}
        ref={(ref) => (this.playerRef = ref)}
        videoId={this.state.videos}
        initialPlayerParams={{ start: this.state.time }}
        play="true"
      />
    );

@LonelyCpp There is an issue when I did what you told me. That is the initialPlayerParams start seconds not working when I set the videoId prop to this.state.videos. But when I set it to normal youtube video id it starts working again.

For example:

<YoutubePlayer
        height={220}
        ref={(ref) => (this.playerRef = ref)}
        videoId={"UVbv-PJXm14"}
        initialPlayerParams={{ start: 40 }}
        play="true"
      />

I think this is an asynchronous glitch because this.state.videos videoId prop needs time to load but the initialPlayerParams start has already declared.

I tried to delay the component mount by using setTimeout() on component return but no hope since it doesn't even work.

Also, the loop boolean in initialPlayerParams seems like not working at all even when I set the videoId prop to normal youtube video id. When the video ends, it doesn't replay itself.