Page MenuHomePhabricator

Clicking the black frame should close Multimediaviewer
Open, LowPublic


As most other gallery browers, people expect to be able to dismiss them by clicking the black frame around the image. Now the only two ways to close are the close button, or Esc, and both are not very 'mouse' friendly. (If your hand is on the mouse, the time to discover and move your mouse to the close button takes long)

Event Timeline

Jdlrobson added a project: Readers-Web-Backlog.
Jdlrobson added subscribers: Nirzar, Jdlrobson.

@Nirzar any thoughts around this?
Sounds good to me though.

sure. seems like a standard lightbox pattern.

The one thing I'd be concerned with, is when there are several pictures in a gallery and you've got the prev/next arrows. In this case there are –in my experience– some lightbox implementations where the sides are acting as prev/next clickable area, not as close one. Example

Change 511343 had a related patch set uploaded (by Simon04; owner: Simon04):
[mediawiki/extensions/MultimediaViewer@master] Clicking on the black wrapper should close MVV

Testing out the patch, it works well and the solution is good.
Per @Volker_E comment earlier, I'm not sure if the behaviour is correct. Personally I expect to click the black area to hide the UI, so closing it is not 100% perspective. @Volker_E can you and the design team make a call here and plus 2 if you think this is correct?

My main concern here would be that it is easy to mis-click the buttons which are usually in the black area, and accidentally exit from the viewer. I think we had another task about this with more discussion, but can't find anything now...

Jdlrobson added a subscriber: alexhollender.

@alexhollender would you be able to weigh in on this question about the DESKTOP version of mediaviewer?

@alexhollender would you be able to weigh in on this question about the DESKTOP version of mediaviewer?

I support this change. I just checked several other lightboxes / image galleries and this seems to be standard (Facebook, Instagram, Pinterest, Twitter, Dribbble), as @Nirzar mentioned above.

Perhaps in conjunction with this (or separately) we could increase the height/affordance of the previous/next buttons, e.g.

current height = 120pxincreased height = 140px

+1 to the idea proposed in the task in general. Additionally to the height affordance question above, we should consider to make the clickable area start from right, so that users are not going to think they are on prev/next or one of the other buttons and in reality are on the right of the button – closing MMV.
Not sure how the positioning came together, but even in current way, latter seems to meet user expectations better to me:


The button offset has been introduced in a62410616dc803d1066. Wild guess is that background image positioning was not consistently implemented back then? @MarkTraceur might be able to shed some light here?

Change 511343 merged by Jdlrobson:
[mediawiki/extensions/MultimediaViewer@master] Clicking on the black wrapper should close MVV

Do we want to revert ?
I don't know enough about how 3D files work, but I'm guessing we want to add some logic to only e.stopPropagation(); when it's not a 3D file?

Change 538694 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/MultimediaViewer@master] Revert "Clicking on the black wrapper should close MVV"

It would not occur to me to click on the black area to close the lightbox. If anything, in a full-screen slideshow mode, I would expect clicking next to the image to advance through the gallery, although in MW I appreciate this takes you to the full size image.

Other places this could be confusing:

There is probably an issue with the discoverability of the close button, but I don't think this is the correct solution.

Change 538694 merged by jenkins-bot:
[mediawiki/extensions/MultimediaViewer@master] Revert "Clicking on the black wrapper should close MVV"

Removing @Nirzar as assignee, as that account has been disabled.

@Volker_E @TheDJ I checked the lightboxes from many websites and I tried out the following in which the one half will be for the next nav and the other for prev nav.