fix: hide mouse tooltip on touch devices when not scrubbing #8945
Conversation
This file contains hidden or 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
Problem: the vjs-user-inactive class triggering the hiding of the tooltip is added much later on touch devices, therefore the mouse tooltip stays visible on its last seek target position whenever the user taps the screen to access the controls. This change ensures that the mouse tooltip is only visible when the user is actually scrubbing.
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #8945 +/- ##
=======================================
Coverage 83.72% 83.72%
=======================================
Files 120 120
Lines 8110 8110
Branches 1949 1949
=======================================
Hits 6790 6790
Misses 1320 1320 ☔ View full report in Codecov by Sentry. |
phloxic
referenced
this pull request
Dec 22, 2024
## Description On desktop, a user can hover over the progress bar while content plays, which makes it possible to seek to a relatively precise location without disrupting playback. On mobile there is no hovering, so in order to seek during inline playback the user can only tap a location on the progress bar (very hard to do precisely on a small screen) or scrub to try to hone in on a specific location (can be very clunky because seeks are constantly being executed). This PR adds a feature to treat scrubbing on mobile more like hovering on desktop-- while scrubbing, seeks are disabled and playback continues, only when the user finishes scrubbing is a single seek executed to the desired location. One key use-case for this feature is thumbnail seeking integrations on mobile, where the user can scrub through different thumbnail images until they find their desired seek location. ## Specific Changes proposed This behavior is similar to the existing `enableSmoothSeeking` behavior in that the `PlayProgressBar` slider visibly updates with the scrubbing movements, but differs in a few ways: - Playback continues while scrubbing, no seeks are executed until `touchend`. - The seek bar's `TimeTooltip` component displays the target seek time while scrubbing, rather than the `CurrentTimeDisplay` (which continues to show the current time of the playing content).
This was referenced Dec 28, 2024
Closed
mister-ben
approved these changes
Feb 1, 2025
dzianis-dashkevich
approved these changes
Feb 5, 2025
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.
Problem: the vjs-user-inactive class triggering the hiding of the tooltip is added much later on touch devices, therefore the mouse tooltip stays visible on its last seek target position whenever the user taps the screen to access the controls.
This change ensures that the mouse tooltip is only visible when the user is actually scrubbing.