Limit focus changes on control bar internal components #176
Conversation
|
@leonvogt is attempting to deploy a commit to the Vlitejs Team on Vercel. A member of the Team first needs to authorize it. |
|
Hi @leonvogt, thanks for the feedback, I've read the RubyEvents issues too. The focus change is triggered by the I suggest encapsulating the line, this solves the problem on RubyEvents and keeps the focus on elements not observed by It also fixes another problem with Vlitejs, when the subtitle button is clicked, the focus is not currently maintained. I'll take this opportunity to update the demo, which uses an older version (v5) and doesn't reflect the latest developments in the project. diff --git a/src/components/control-bar/control-bar.ts b/src/components/control-bar/control-bar.ts
index 2164bcb..2068c99 100644
--- a/src/components/control-bar/control-bar.ts
+++ b/src/components/control-bar/control-bar.ts
@@ -160,8 +160,10 @@ export default class ControlBar {
this.toggleFullscreen(e)
}
+ if (validateTargetPlayPauseButton || validateTargetVolume || validateTargetFullscreen) {
+ this.player.elements.container.focus()
+ }
// Hide controls with timer after clicks
- this.player.elements.container.focus()
this.player.Vlitejs.startAutoHideTimer()
} |
da2a8a8 to
07fc2fe
Compare
|
Hi @yoriiis, I really like your approach of encapsulating the focus change within the selector conditions! That way, library consumers don't need to do anything, which is really nice. I've updated the PR accordingly. |
|
@leonvogt to fix lint's work, use either the VSCode workspace with auto format on save, or the npm |
686f5bc to
55fb4d4
Compare
|
@yoriiis, I've run the |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Available in release |
|
Thank you so much for the fast merge and release, @yoriiis! |
This PR contains a:
Hey there 👋
Thanks for this awesome library!
I discovered this player because rubyevents.org uses it.
On rubyevents.org, there is a custom implementation for setting playback speed. This is done by adding a select element to the control bar and calling the player instance
setPlaybackRatemethod.While this works well, there is a small issue where the select dropdown closes automatically when clicked in some browsers. There is a related issue on the rubyevents repo, here.
The problem seems to be caused by the
onClickOnControlBarevent listener. This listener triggers when the custom<select>element is clicked and tries to hide the control bar by focusing the container element:This focus causes the playback speed select dropdown to close prematurely.
This PR would skip the
onClickOnControlBarbehaviour when the click target has av-customControlButtonclass.This would allow us to add custom control elements that are independent of the default control bar functionality.
I’d love to hear your thoughts on this approach. Also, I'm also not sure if
v-customControlButtonis the best class name for this purpose.