[Video] Add volume slider to video embeds on web #5352
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Only for videos on web. The slider only shows up when the speaker icon is hovered. - Uses browser's <input type="range"> element - Starts at 50% (linear for now) - Unmutes the audio when changed For convenience, move mute button to new <AudioControls> component.
This aligns better with human perception, so most values in the slider are not practically useless.
Use global video volume context from 843f992 Currently only `volume` is used from there because replacing the `muted` state from `useVideoUtils()` causes the speaker to flicker on and off in some videos while the slider is moved, and I'm unsure as to why.
A simple slide animation to make the interaction not so sudden. Easing copied from YouTube, since I really liked their little animation*. *: Looking at Chromium DevTools, this specific function seems to be called "Fast Out, Linear In". So it seems to be a standard, at least from Google.
- Add tabIndex to slider - Open slider immediately when the entire <AudioControls> component is focused
|
I think the bar should be a bit longer and perhaps slightly thinner here to avoid feeling finicky. Also, I can see in your examples that the end of the control is slightly clipped.
I think everyone would expect it to default to 100% not 50% |
|
Thank you so much for this! I ended up redoing from scratch in #5363, but this PR was really helpful for doing the logarithmic volume controls. Much appreciated! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Adds an
<input type="range">(better designs are welcome) next to the Toggle Mute button to adjust the volume of the video.This is more a personal preference, but I think not maxing out the volume and blasting people's ears when focus on a video is probably a good idea. 50% is a comfortable default for me.
Basically, with a logarithmic scale, moving the slider from one point to another should feel like the slider value change more accurately resembles the change in volume perceived, even to audiophiles.
I chose to use the conversion function from this blog post: https://www.dr-lex.be/info-stuff/volumecontrols.html.
Resolves #5285