Hi @MMiller_WMF @RHo — when the image is letterboxed, should clicking the area outside the image close the dialog as well (in addition to the close button)?

In T290540#7366753, @mewoph wrote:

Hi @MMiller_WMF @RHo — when the image is letterboxed, should clicking the area outside the image close the dialog as well (in addition to the close button)?

Hi @mewoph - ideally we want to hew to the existing mobile MediaViewer component as possible, which means only the close button should close the fullscreen image.

Thanks @RHo — I just noticed that this task is under the TBC section in the parent task. Should this also have the PLACEHOLDER keyword as well?

Re: MediaViewer, is the expectation that this image viewer would have all the same controls or would it just have the image and the close button?

In T290540#7367271, @mewoph wrote:

Thanks @RHo — I just noticed that this task is under the TBC section in the parent task. Should this also have the PLACEHOLDER keyword as well?

from my perspective it seems straightforward enough to do on its own, unless @MMiller_WMF wants to pause it with the other Add image tasks anyway and concentrate on 'lull' tickets these next couple of weeks.

Re: MediaViewer, is the expectation that this image viewer would have all the same controls or would it just have the image and the close button?

Thanks for checking, it would be only the image and close button, as the other controls can lead the person astray from the main add image task.

@mewoph -- I think this task is well-developed enough to work on. Please do proceed!

Change 722657 had a related patch set uploaded (by MewOphaswongse; author: MewOphaswongse):

[mediawiki/extensions/GrowthExperiments@master] Add an image: Image viewer

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

With latest changes:

@RHo for accessibility & usability purposes, the X to close the overlay probably needs to stand out more. If the image is landscape, or if the device is in landscape orientation, the gray X will be over the image and it can be pretty hard to see depending on the background.

In T290540#7376348, @kostajh wrote:

@RHo for accessibility & usability purposes, the X to close the overlay probably needs to stand out more. If the image is landscape, or if the device is in landscape orientation, the gray X will be over the image and it can be pretty hard to see depending on the background.

Minerva already has an overlay component with a closing X, perhaps we should use that and place the image inside it?

@RHo @kostajh Maybe we can use the same semi-transparent close icon w/a drop shadow like MediaViewer on desktop?

In T290540#7376353, @kostajh wrote:

In T290540#7376348, @kostajh wrote:

@RHo for accessibility & usability purposes, the X to close the overlay probably needs to stand out more. If the image is landscape, or if the device is in landscape orientation, the gray X will be over the image and it can be pretty hard to see depending on the background.

Minerva already has an overlay component with a closing X, perhaps we should use that and place the image inside it?

In T290540#7376882, @mewoph wrote:

@RHo @kostajh Maybe we can use the same semi-transparent close icon w/a drop shadow like MediaViewer on desktop?

Hi @kostajh and @mewoph, the proposal to re-use MediaViewer was intended to reduce work as I assumed it's vetted for accessibility on mobile to account for the the "x". I'm looking on mobile now and it seems the way it works on mobile is that the image always appears below the "x", and zooming in zooms the "x" as well (see screencast).

Thanks for confirming @RHo! Another question: for images that have a transparent background, should we include the tiled background like MediaViewer does so that images with black lines against a transparent background show up (example: https://commons.wikimedia.org/wiki/File:African_Elephant_SVG.svg) or should we use a solid color?

With #000 background:

@RHo what should the back button behavior be? Close the image viewer or navigate away from the task?

Once fullscreen, the user should be able to zoom in farther and pan around the image using the "pinch" and two-finger gestures on their device.

Note, it won't be too useful as the image is sized to fit the screen, so zooming in will just make it pixelated. A proper zoom (tiling) is way beyond what we could fit into this project.

Change 722657 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Add an image: Image viewer

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

In T290540#7381787, @mewoph wrote:

Thanks for confirming @RHo! Another question: for images that have a transparent background, should we include the tiled background like MediaViewer does so that images with black lines against a transparent background show up (example: https://commons.wikimedia.org/wiki/File:African_Elephant_SVG.svg) or should we use a solid color?

With #000 background:

The MediaViewer checkerboard please, thanks for checking!

In T290540#7386908, @Tgr wrote:

@RHo what should the back button behavior be? Close the image viewer or navigate away from the task?

Hi @Tgr - it will be to close the image viewer and return to task, and that reminds me I have added the link to the Figma spec on the task description.

Once fullscreen, the user should be able to zoom in farther and pan around the image using the "pinch" and two-finger gestures on their device.

Note, it won't be too useful as the image is sized to fit the screen, so zooming in will just make it pixelated. A proper zoom (tiling) is way beyond what we could fit into this project.

Definitely not a priority to introduce proper zoom, but enabling this will helpful up to a point for many images.

Change 724808 had a related patch set uploaded (by MewOphaswongse; author: MewOphaswongse):

[mediawiki/extensions/GrowthExperiments@master] Add an image: image viewer updates

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

With updated back behavior (via swiping back & via back button):

If there is time, I think it might be good to revisit the dialog animation. When swiping back, seeing the dialog animate out is rather odd so perhaps the animation can be skipped. Currently the dialog animation is the default one used for VE's dialogs. There is a related task to update the dialog animation: T288978: Add a link: Mobile dialogs should appear fading in and out from the centre of the screen.

In T290540#7389238, @mewoph wrote:

With updated back behavior (via swiping back & via back button):

If there is time, I think it might be good to revisit the dialog animation. When swiping back, seeing the dialog animate out is rather odd so perhaps the animation can be skipped. Currently the dialog animation is the default one used for VE's dialogs. There is a related task to update the dialog animation: T288978: Add a link: Mobile dialogs should appear fading in and out from the centre of the screen.

Hi @mewoph - I forgot to specify but actually can we use the MediaViewer animation behaviour of popping open and close instead? For the reason that you say that the swiping is quite odd.

Hi @RHo thanks for the clarifications, here's the updated (non)animation:

In T290540#7389486, @mewoph wrote:

Hi @RHo thanks for the clarifications, here's the updated (non)animation:

Thanks @mewoph that feels better. Can we also remove the slide right animation when closing the full screen image?

Change 724808 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Add an image: image viewer updates

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

Hi @RHo the slide right is native iOS behavior (to go back to the previous page).

In T290540#7391794, @mewoph wrote:

Hi @RHo the slide right is native iOS behavior (to go back to the previous page).

Ah OK gotcha, so that doesn't happen if the user presses the close button?

That's right. Here's a video w/the two ways of navigating back.

In T290540#7392003, @mewoph wrote:

That's right. Here's a video w/the two ways of navigating back.

That's perfect, thanks for clarifying!