Error rendering Twitch demo video

[SiroDiaz]

Current Behavior

When i set the demo Twitch url in my local project the player is not rendered. With YouTube, Vimeo and Dailymotion it works. I'm using the latest version of react-player (1.13.0).

Expected Behavior

Render the player and the video normally.

Steps to Reproduce

1. Using a localhost alias, for example example.test create a React project with nginx as reverse proxy.
2. Inside a component, create a simple log methods this.onDuration and this.onProgress and write:

<ReactPlayer
  ref={this.ref}
  className="watch__embed-container"
  controls={true}
  width='100%'
  height='100%'
  url={`https://www.twitch.tv/videos/106400740`}
  playing
  onDuration={this.onDuration}
  onProgress={this.onProgress}
/>

Environment

• URL attempting to play: https://www.twitch.tv/videos/106400740
• Browser: Google Chrome 78
• Operating system: Windows 10
• jsFiddle example: I don't know how to import ReactPlayer with jsFiddle.

Other Information

[cookpete]

This can happen when playerId is not correct here:

https://github.com/CookPete/react-player/blob/1e41ce5ce5e2d6946701723f60e74326385df92d/src/players/Twitch.js#L32

playerID should be twitch-player- plus a random string:

https://github.com/CookPete/react-player/blob/1e41ce5ce5e2d6946701723f60e74326385df92d/src/players/Twitch.js#L18

Is the ID not being set correctly in your DOM?

[SiroDiaz]

The random string id is well generated in my DOM. For example twitch-player-8rn47, as you can see.

[jackhenry]

I'd just like to chime in and say that I'm experiencing the same issue with all Twitch embeds. Here's a codesandbox if this helps.

[cookpete]

@SiroDiaz There must be something wrong with your specific environment or implementation. Your example code works fine for me in jsFiddle with v1.13.0: https://jsfiddle.net/gx5802o9/

@jackhenry Your example doesn't work because https://www.twitch.tv/p/watch/esfand isn't a valid Twitch URL. Visiting it gives me a 301 redirect to https://www.twitch.tv/p/watch/esfand which then returns a 404 page.

[SiroDiaz]

@cookpete i think the same. I'm going yo try others things. If i don't solve the problem i will notice you more about muy environment

[jackhenry]

@cookpete Sorry, I was in a rush. Try this

I've double checked that link and that's the same format for the twitch urls I've been using.

The issue is with the controls property. If set to false, I just get a black screen. If it's set to true, it works. You can replace the url with any other url and the issue should be the same.

Also note, I've only got this issue with embedded twitch live streams. Not embedded twitch videos.

[cookpete]

The issue is with the controls property. If set to false, I just get a black screen. If it's set to true, it works. You can replace the url with any other url and the issue should be the same.

So it only breaks for live streams when controls={false}? I can add a note to the readme but this seems like a bug with the twitch player.

[jackhenry]

@cookpete You're probably right. The Twitch Dev team is notorious for introducing breaking bugs without any notice.

It appears to be an issue with the format of the url used for the iframe.

This doesn't work: https://player.twitch.tv/?allowfullscreen&video=&channel=yogscast&!playsinline&!autoplay&!muted&!controls&origin=http%3A%2F%2Flocalhost%3A3000

This does work https://player.twitch.tv/?allowfullscreen&video=&channel=yogscast&!playsinline&!autoplay&!muted&origin=http%3A%2F%2Flocalhost%3A3000

The only difference between the two is !controls is present in the url that doesn't work, and it isn't present in the one that works.

The first url is what React-Player generates if the controls property is set to false.

[SiroDiaz]

I found the error @cookpete . I'm using next.js for server side rendering. When the player is rendered in the browser Twitch works perfectly, but when the page is reloaded, it says:

So, what conclusion? I'm going to investigate if my server is wrong (for example render twice or redux error with second rendering) but could you check if something in react-player has incompatibilities with server side rendering with nextjs?
Thanks

Edit: I have tried with youtube, vimeo and other providers and zero errors with server side rendering, but i think it is due to div id dependency with Twitch player.

[SiroDiaz]

Example here: nextjs with Twitch video