renderWhenReady errors with 'can't access property "getBoundingClientRect"'

[jMyles]

I have what I think is a very straightforward invocation:

        webamp = new Webamp({
            initialTracks: [{
                url: "/audio/0 - Paint Exchange.flac",
            }],
            enableHotkeys: true,
            volume: 75
        });

        webamp.renderWhenReady().then(() => {
            console.log("rendered webamp!");
        }).catch(error => {
            alert(error.message)
        });

...and unless I pass a DOM element to renderWhenReady, it fails with an error saying that it can't access getBoundingClientRect.

It seems like it's trying to access properties of the DOM element that I'm not passing.

I'm sure I'm doing something silly, and the problem is right in front of me. :-) But in the unlikely event that it's a browser or library compatibility issue, I figured I'd document it here until I figure it out.

[captbaritone]

This looks like a bug in our docs. A DOM node is required, but our docs imply it can be omitted: https://docs.webamp.org/docs/API/instance-methods#renderwhenreadydomnode-htmlelement-promisevoid

Sorry for the confusion that caused. Would you be interested in opening a PR to fix the docs?

[jMyles]

Sure thing - I'll do it later today.

[jMyles]

The plot has thickened a bit; I'm trying to understand exactly how to position this before I fix the docs.

If I webamp.renderWhenReady(some_very_specific_element_deep_in_my_layout), it doesn't seem to actually go to some_very_specific_element_deep_in_my_layout, but instead still gets rendered at the bottom of the page, but somehow (inexplicably) appears where the element was when it was rendered. I presume this is part of it being draggable (which is awesome of course, this whole damn project is freakin' awesome - I hope that's clear :-)) - that there is some more baroque API that is used to position it in the context of its drag logic?

But yeah, it's hard to understand exact where it's going to appear, and especially what's going to happen at different zoom levels. Is there a way to forego the drag feature in order to just position it inside another element?

[captbaritone]

Not currently.