InvalidStateError while switching/seeking through videos

[gre]

InvalidStateError while switching/seeking through videos

[gre]

I've been trying to reproduce it with VideoBlur's example with ref={ref => { if (ref) ref.currentTime = 10; }} on the video element, and can't repro,

do you think it's specific to using 2 videos at the same time? specific to Firefox too?
Can you show me how you set the current position?

Also, just to confirm something: can you tell me if this error:
(1) crashes the whole gl-react component?
(2) crashes the entire app?
(3) is just getting logged in the console but rendering finally works after video load?

to me it looks like the error get thrown from inside a requestAnimationFrame, so I think the component should not break and eventually you should have your think rendered when video is ready. If it's not the case, i'm not sure where the bug is, i'm not even sure if this error is a webgl thing or a dom thing?

[khali1]

It occurs only on firefox,
it doesn't crash the gl-react - only gets logged, shouldn't be specific for using 2 videos, mostly I'm setting time like this:

const vid = this.refs.video;
if (vid.readyState > 2){
vid.currentTime = x;
}

I've added the readystate check to the video and it fixed the issue on my side.

the thing in our app is, that we have basically 2inputs which can be video/canvas also those videos are changing in time based on global progress. So what can happen is that in the first RAF callback there are following inputs (uniforms):
A:<video src='a' .../>
B:<canvas>
and in second (consequential frame) there will be:
A:<video src='x' ../>
B:<video src='z' ../>
So the issue should be that on the second frame, we are setting current time to an element which doesn't have even metadata loaded.
Are you setting the current time directly somewhere in the lib (or it just renders it with the same ref)? Or how does this uniform gets rendered into the dom?

[gre]

no one should set the time of <video> passed-in contents and gl-react-dom is not even aware if your content is a <canvas> / <video> / whatever DOM element that can be drawn in webgl but will delegate that work to a library called gl-texture2d, which itself is not doing much except using the WebGL API to upload the texture.

That said, if you move from <video src="a" /> to <video src="x" />, there will be some React Reconciliation: the same video DOM element should get reused and only src attribute will get changed.
If you want to force the video to be recreated, you can use key React props : <video src="a" key="a">

So I guess, if I identify the problem correctly, a minimal example that reproduce the bug is to change the video src. Will try this ASAP.

---

Also:

Your questions just made me think of a current limitation in gl-react (in some specific cases that maybe don't affect you): contents Reconciliation only works by content index at the moment (and you don't even control what that index will be.. except maybe because of the order of your uniforms).
In other words, at the moment, user can't define a "key" on a content to ensure it doesn't get re-created in case things moves / get reordered... basically that means if you swap 2 videos, I don't think the video refs will be preserved, but each one will get reloaded (src attribute will probably be swapped).

The technical reason is because we also needed to wrap the content in a container (for multiple reasons). But maybe we can fix this by just making the content container key inheriting the inner vdom key... that would make sure they get properly swapped by React reconciliation.

[gre]

This is now solved in gl-react v3 ! It's a complete rewrite.

• see release article: http://greweb.me/2016/12/gl-react-v3/
• see cookbook/api: https://gl-react-cookbook.surge.sh
• gl-react v3 is still in development. (hosted on: http://github.com/gre/gl-react )
• gl-react v2 is still the stable version (hosted on: https://github.com/ProjectSeptemberInc/gl-react )

Relevant example that show this issue is fixed: I don't have a precise example that show exactly this, but things don't get unmounted/remounted since we are more compliant with React reconciliation. Maybe the closest example is https://gl-react-cookbook.surge.sh/blurvideo and how changing the number of passes don't recreate the content.