Giters

muxinc / media-chrome

Custom elements (web components) for making audio and video player controls that look great in your website or app.

Home Page:https://media-chrome.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Getting error in React App: Uncaught TypeError: _c.getElementById is not a function

rizametovd opened this issue · comments

commented

Hi

I'd like to use a separate control bar in React App 18.2.0 and media-chrome 1.4.3, but getting this error:

media-control-bar.js:77 Uncaught TypeError: _c.getElementById is not a function
    at MediaControlBar.attributeChangedCallback (media-control-bar.js:77:1)
    at setValueForProperty (react-dom.development.js:798:1)
    at setInitialDOMProperties (react-dom.development.js:9720:1)
    at setInitialProperties (react-dom.development.js:9921:1)
    at finalizeInitialChildren (react-dom.development.js:10950:1)
    at completeWork (react-dom.development.js:22193:1)
    at completeUnitOfWork (react-dom.development.js:26596:1)
    at performUnitOfWork (react-dom.development.js:26568:1)
    at workLoopSync (react-dom.development.js:26466:1)
    at renderRootSync (react-dom.development.js:26434:1)

And here's my simple component:

        <div>
          <MediaController id="mc">
            <video slot="media" poster={poster} src={url}>
              <track src="" kind="captions" srcLang="en" />
            </video>
          </MediaController>
          <MediaControlBar mediaController="mc">
            <MediaPlayButton />
            <MediaSeekBackwardButton />
            <MediaSeekForwardButton />
            <MediaTimeRange />
            <MediaTimeDisplay showDuration />
            <MediaMuteButton />
            <MediaVolumeRange />
          </MediaControlBar>
        </div>

How can I fix that?

commented

Thanks for filing the issue and providing relevant libraries/version numbers, @rizametovd ! I'll try to take a look at what's going on here ASAP. Will keep you posted on anything I uncover.

commented

@cjpillsbury thanks in advance!

Meanwhile, may I one more question. There's a warning in console in my React App as well as in Media-Chrome Docs basic example: https://media-chrome.mux.dev/examples/vanilla/basic.html . Is it expected behavior?

content.js:1 CssSelectorGenerator: shadow root inferred You did not provide a root and the element is a child of Shadow DOM. This will produce a selector using ShadowRoot as a root. If you plan to use the selector using document as a root (e.g. document.querySelector), it will not work as intended.

commented

hmmmm I'm not seeing that warning on https://media-chrome.mux.dev/examples/vanilla/basic.html when loaded into the latest versions of Chrome, Firefox, or Safari for macOS. Is this possibly a plugin/extension you have installed? Unless I missed something, CssSelectorGenerator isn't part of the media chrome codebase?

commented

Unfortunately I don't know much about CssSelectorGenerator. I don't get this error if I use e.g. native html video tag or ReactPlayer. That is why I asked about console warning

UPD
I also use latest Chrome version
image

commented

Yeah I'm pretty sure that warning is not coming from our codebase. Not even sure what "content.js" is.

commented

Found the issue (fixed in PR mentioned above)! Should have a release out soon. Surprised no one's run into this yet 😅.

commented

Ok fix is released in a canary build: 1.4.4-canary.0-3bf7d18

Here's a codesandbox confirming that the issue is resolved in the canary build: https://codesandbox.io/s/magical-satoshi-qrp82z

If you don't mind testing it out on your end just to make sure it resolves your issue, that would be greatly appreciated. We should get an official build out soon regardless.