Double click to full screen on video#15453
Open
abeddow91 wants to merge 4 commits intoab/full-screen-spikefrom
Open
Double click to full screen on video#15453abeddow91 wants to merge 4 commits intoab/full-screen-spikefrom
abeddow91 wants to merge 4 commits intoab/full-screen-spikefrom
Conversation
…llscreen. Why have a delay? This is to prevent play/pause toggling when the user double-clicks. A double-click fires as: click -> click -> dblclick, so without the delay the video would toggle play/pause twice before the dblclick handler fires. The 250ms delay roughly matches the system double-click threshold, giving the dblclick handler enough time to cancel the pending single-click.
|
Hello 👋! When you're ready to run Chromatic, please apply the You will need to reapply the label each time you want to run Chromatic. |
abeddow91
changed the title
abeddow91
added
feature
Contributor
|
Yay! Thank you! I don’t have strong feelings about the delay. Just looking at Youtube and videojs, I think they just fire off extra pause+play events (Youtube is even flashing all them play+pause icons!)? It may be safest to go with the majority? Although I can’t tell how annoying (if even!) is the delay for those who just want to pause/play… |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
What does this change?
Adds the ability to double-click on a video to go to fullscreen. This is currently guarded so that this functionality only works on self hosted default videos, not loops or cinemagraphs. This works by using reacts onDoubleClick handler to call handleFullscreenClick.
Why does this require a delay to play/pause?
clicks are registered as click -> click -> double click. This means our existing single-click play/pause handler would fire twice before the dblclick event is emitted (eg pause -> play -> fullscreen).
To prevent this, a 250ms delay has been introduced to the single-click play/pause handler. 250ms is roughly the threshold for a double click.
How it works
On first click start a 250ms timer.
Why?
This aligns the video experience more closely with common desktop video player behaviour (e.g. YouTube).
Screenshots
Without the delay to single click
fullscreen-no-delay.mov
With the delay to single click
fullscreen-delay.mov
Running Chromatic
In order to run Chromatic as part of the CI checks, you will need to add the
run_chromaticlabel to your PR. Once the label is added Chromatic will run on every push.Please only add this once you are ready to check for visual regressions, our intention here is to reduce the amount of time Chromatic is run without being looked at.
-->