[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.

[kingsleydev19]

This issue has not been fixed yet. I have similar issue on two apps I have built with this package.
If you navigate to the page where the CldVideoPlayer was rendered, it would most likely not render any video. You will get multiple instance detection error. However, if you reload the page, the error will be gone.
While using Next Link component, I am currently setting it to target blank to enable it load from a new tab and force reload all together. This is a bug.

[Elieserlaguerre]

I'm experiencing a similar issue with multiple rendering of CldVideoPlayer.
here's my code:
if (document.docType) { switch (document.docType) { case "document" || "policy": const content = document?.content?.split("\r\n"); return content?.map((data, i) => <p key={i}>{data}</p>); case "video": return document?.files?.map((file, i) => <CldVideoPlayer key={i} id={i} src={file.url} width={file.width} height={file.height} controls className="border border-black" />); default: return document?.files?.map((file) => <CldImage key={file._id} src={file.url} width={file.width} height={file.height} crop={"fill"} gravity={"auto"} alt={file?.title ?? "document image"} className="sm:w-full sm:h-full object-cover object-center" sizes="100vw" />); } }
Even though there's only one video file in the document.files array, it seems that simply looping through the files array is enough to trigger the "Multiple instances of the same video detected on the page" error. Furthermore, it renders the video file more than once, plus the video's CSS code also seems to break because all of the controls appear as plain text at the bottom of the page. At least one of the videos will play when I click on the "play" text, but the other video that is not even supposed to be rendered does not play.