media-preview-thumbnail overflowing

[jakubslambor]

Hi!

I have implemented the Preview Thumbnails in our player, however, it seems like the overflow prevention is not working for me 😢 can you help? In the youtube theme example, this is what does the trick:

this does not generate for me:

[luwes]

Hi, sorry for the later reply. Is this still an issue? thanks

[luwes]

Would it be possible to provide a code sandbox with this overflow bug? that would help a lot in fixing this. thanks!

[jakubslambor]

Thank you for trying to help! I will try to create one, but it's a complex app, I hope I'll be able to extract the player to a sandbox.

[jakubslambor]

Sorry for the long delay, I got completely sidetracked. Unfortunately I cannot provide you with the sandbox as my codebase is too complex to rip just the player out 🥲 I've tried everything and the only way I could get it to work was if I put the player on the very first layer of the entire app, like even outside of it (it's a Vue 3 project), right after body:

putting it any lower in the hierarchy breaks it for me:

From what I can see in the source code, the issue is that in the #getBoxPosition function in media-time-range.js, the bounds const is most likely wrongly set/undefined, therefore boxMin and boxMax are NAN, and so the returned position ends up being just the one defined on line 115, which skips the overflow prevention. Any ideas on what to wrap the player in to make this work? How is the mediaBoundsRect determined?

[jakubslambor]

This has been fixed at some point 🙌