feat: make volume slider responsive according to player size

[Pompette]

#1352

As mention in the bug report, the volume is not responsive if the player has a small width.

Integration

Under 480px, I considerer that the width is small (we can change this value by changing the MAX_MOBILE_WIDTH value)

According to the case, there was two possible width :

• Width configured on the player
• window.innerWidth

If the fullScreen is enabled, then I check the innerWidth, otherwise I rely on the width that was configure on the player.

If the player is small, then I delete the injectedCSS for the horizontal display and inject the one for the vertical.

---

IssueHunt Summary

Referenced issues

This pull request has been submitted to:

• #1352: volume component of Player is not responsively designed

---

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
remotion	✅ Ready (Inspect)	Visit Preview	Oct 4, 2022 at 0:00AM (UTC)

[JonnyBurger]

Thanks a lot for the PR! It is also eligible for a $150 bounty during Hacktoberfest if acceptance criteria is fulfilled.
I have not yet defined those and also not yet reviewed your PR, but will do that tomorrow. I think it's already very close :)

[Pompette]

You're welcome, it was a pleasure to work on it 🙂 !

That's so cool for the bounty, I'm indeed participating to the Hacktoberfest event, I registered to IssueHunt and submitted the PR, thanks for that it's awesome !

I'll check if it's filling acceptance criteria's you specified, and come back to you if I have any question about it.

[Pompette]

Enregistrement.de.l.ecran.2022-10-04.a.00.12.20.mov

Hey again 👋 ,

To fulfill the Acceptance criteria "Make slider go upwards if space is not sufficient" I've made some improvement to what I've done before, let me know if this way is fine for you.

Thing to keep in mind is that I consider the width not enough if Time label width with slider open is not more than the slider width itself.

[JonnyBurger]

Works great! Thanks a lot!

The only thing I changed besides some refactors is that instead of the composition width, I took the real player width how it is rendered as the factor deciding whether to show the slider vertically or horizontally.

The bounty is paid out, out of curiosity and for statistics, how long did it take you approximately to work on this issue?

[Pompette]

It's fine, thanks to you @JonnyBurger :) !

Yes I saw, great refacto, I was not a big fan of how the CSS was injected either ! Out of curiosity, did you plan to change inline styling in the futur ?

Nice see for the playerWidth, didn't notice we could retrieve it that way !

Mmh, I think something between 3 to 4 hours.

Dig into the project, find right files, run local example : 30min / 50min
First draft : 1h
Second draft : 2h (computing the resize was the longest part, it lead to manage timeLabel size and overflow behavior etc..)