search

muxinc / media-chrome

Custom elements (web components) for making audio and video player controls that look great in your website or app.
https://media-chrome.org
MIT License
1.77k stars 71 forks source link

MediaChrome React component crash if given single child #727

Closed brandonhub closed 1 year ago

brandonhub commented 1 year ago

Hello. I'm building a player with Media Chrome using the react components found in media-chrome/dist/react. I unfortunately get an error when giving a single child to a React component. The following crashes...

<MediaPlayButton>
            <svg slot="play" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              ...
            </svg>
</MediaPlayButton>

But multiple children is ok (notice extra div under svg)...

<MediaPlayButton>
            <svg slot="play" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              ...
            </svg>
            <div />
</MediaPlayButton>

The error is

UncaughtError: undefined TypeError: Spread syntax requires ...iterable[Symbol.iterator] to be a function

I'm on version 1.2.5

Thanks!

cjpillsbury commented 1 year ago

Cool I'll be sure to check this out ASAP @brandonhub!

cjpillsbury commented 1 year ago

Hey @brandonhub I cut a canary release (media-chrome@1.4.2-canary.0-7e267f7) yesterday evening that should resolve your issue. Here's an example using it in code sandbox: https://codesandbox.io/s/frosty-goodall-gw73ny?file=/src/App.js Just to make sure, if you could try it out to confirm it resolves your problem, that would be great.

brandonhub commented 1 year ago

Hi @cjpillsbury ! I can confirm this appears to be working on the new canary release. Really appreciate the quick turnaround time on this!

cjpillsbury commented 1 year ago

Cool we'll be sure to get a release out soon! Glad it was an easy fix.