`loop` prop doesn't work in `VideoPlayer`

🆘 Support
,
1

We use VideoPlayer from react-datocms package. The Mux player itself has a loop attribute https://docs.mux.com/guides/player-customize-look-and-feel#looping-content. When we use boolean value for loop in VideoPlayer, this attribute doesn’t appear on the Mux player custom element.

So this code:

<VideoPlayer
    data={unmaskedData.asset.video}
    loop={true}
/>

result in the following output:

image
image2686×118 62.1 KB

But if we use a string value instead of a boolean:

<VideoPlayer
    data={unmaskedData.asset.video}
    loop={"true"}
/>

it sets the loop attribute on the custom element:

image
image2674×122 63.3 KB

But at the same time it gives a TS error because it expects a boolean value

2

Hi @Eugene,

Welcome to the forum, and sorry about that! That looks like a type mismatch bug on our part. I’ll let the devs know and report back once it’s resolved.

4

@Eugene,

Are you perhaps using this on Next 15? It might be a Mux player issue with that version: https://github.com/muxinc/elements/issues/1015

If you’re NOT on Next 15, could you please let me know your stack and/or provide an reproduction?

5

Hey @roger, thanks for the quick response! Yes you’re right, we recently upgraded to Next 15. Looks like the same issue.

1 Like
6

Ok, thanks for the confirmation! I’ll let you know once Mux fixes their bug.

In the meantime, I think you can just use the string version and // @ts-expect-error it with a comment.

(Moderator note: Un-marking thread as “Solved” until the upstream Mux bug is fixed)

7

Mux has confirmed (but not yet fixed) the bug: https://github.com/muxinc/elements/issues/1015#issuecomment-2504417284

1 Like
8

Mux has now fixed the issue: https://github.com/muxinc/elements/issues/1015#issuecomment-2504417284