[Bug] CldVideoPlayer load error (Next 13)

[leebaduk]

Bug Report

Describe the bug

When rendering multiple CldVideoPlayers on one page, some of the players fail to load a video (while others work fine, which is odd). For example when I render 20 players on 5*4 grid which share the same src, 3 or 4 of them would be shown as a white blank randomly.

Is this a regression?

not sure

Steps To Reproduce the error

1. repo: https://github.com/leebaduk/next-cloudinary-test
2. create .env on root with NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=dlz0shbp1 (this is my cloud name)
3. npm i
4. npm run dev

Expected behaviour

all the videos should be successfully loaded.

CodeSandbox or Live Example of Bug

codesandbox available here, just the same as the repo above; https://codesandbox.io/p/sandbox/next-cloudinary-test-y5hssp

Screenshot or Video Recording

Your environment

• OS: MacOS Ventura
• Node version: 18.16.0
• Npm version: 9.5.1
• Browser name and version: Chrome

Additional context

[colbyfayock]

hey @leebaduk thanks for reporting this. strange behavior here and havent pinned down the issue yet.

Are you noticing this when all the videos are different sources as well?

do you have a specific use case for this many instances of the same video?

[leebaduk]

@colbyfayock sorry i got back to you late when the videos are of different sources, it does not happen.

but i use router.replace(query parameter) on my app to search the videos. and when i go back and forth between two pages, say, /search?query=1 to /search?query=2 and back to /search?query=1, the cldvideoplayer on /search?query=1 is not re-rendered, and "sometimes" shows as blank. the possibility of it shown as a blank increases as I go back and forth more times.

so, even though I don't have a specific case for many instances of the same video, it still matters practically.

[colbyfayock]

ah got it, yeah that makes sense, thanks for your patience on this bug, will try to get to it soon

[colbyfayock]

just adding i was able to reproduce this by simply playing the videos on the Basic Usage page, navigating away, playing videos on another page, and navigating back

[JoshuaRotimi]

@colbyfayock I would like to work on this issue. Can you assign it to me ?

[colbyfayock]

yes @JoshuaRotimi all yours!

[colbyfayock]

@leebaduk the latest release should improve the reliability of this, but there's still an issue where the Next.js Script tag won't reliably fire on every single onLoad instance. trying to determine a way to resolve this, but in the meantime, hoping this greatly helps

[colbyfayock]

if anyone would like ot help with this - can someone reproduce the issue of using the <Script onLoad feature to load an external script that's mounted inside of a component? the component can be inside of the project, as opposed to a dependency

the loading mechanism can be displayed using console logs

if this is reproducible outside of the context of this library, i can take it to the Next.js team or raise an Issue

[ODreelist]

Bumping as we are running into this scenario. Anywhere we render a list of CldVideoPlayer there may be a one or more "blanks".

Seems to be reliably triggered by repeated client side navigation (latest next 14 app dir). It's almost as if it renders a fallback

I don't have the bandwidth to perform that sandbox repro but I'm able to cooperate here, let me know if you all have found any solutions.