Page MenuHomePhabricator

Enable users to close a VideoJS modal window by clicking outside it
Closed, ResolvedPublicFeature

Description

Feature summary:

  • Clicking outside the modal window closes it

Use case(s):

  • As a reader who has clicked on a VideoJS media file that opened in a modal window, I want to close it.
    • (perhaps because I've finished watching it, or it was too loud, or it was not what I wanted).
    • At some other websites, I can click outside of modal windows to close them.
    • Currently in VideoJS, to close a modal window I need to either: click the X icon in the top corner, or click the Esc key.

Benefits:

  • Provides a widely understood UX workflow to users who might expect it.

Example:

Event Timeline

Do we do this with other modals in OOUI? Is there a best practice we should adhere to?

We do this in other modals e.g. ULS, Echo.
To do this add an event listener on the body tag that check ev.target (calling ev.stopPropagation when the clicked element is not inside the overlay).
Doesn't seem like a blocker for wider deployment. Seems like it would benefit from design input.

Do we do this with other modals in OOUI?

No, intentionally so.

Is there a best practice we should adhere to?

"Don't do this." But expectations may well be different in media playback than editing a file etc.

@Volker_E - any thoughts on this one? Do you know what the expected behavior should be for video modals?

Change 788427 had a related patch set uploaded (by TheDJ; author: TheDJ):

[mediawiki/extensions/TimedMediaHandler@master] Close the media dialog when clicking outside of it

https://gerrit.wikimedia.org/r/788427

Change 788427 merged by jenkins-bot:

[mediawiki/extensions/TimedMediaHandler@master] Close the media dialog when clicking outside of it

https://gerrit.wikimedia.org/r/788427