This is a nice feature but we need to de-prioritize it for now so we can get other work in ahead of performance and security reviews.

@SBisson @eamedina apologies for not sharing this update earlier, as we did discussed during our daily call. I think we can start to experiment with following gestures in parallel to figuring out designs about how editors will use them.

• Scroll to move an image to its left/right/up/down direction until it reaches to the edge of a screen.
• Double taps to toggle between different zoom levels.

As a starting point, we can consider following zoom levels - 100%, 150%, 200%. We can refine these values to see what works well for our use case.

Change 833009 had a related patch set uploaded (by Huei Tan; author: Huei Tan):

[mediawiki/extensions/Wikistories@master] Re-position image on the story builder feature

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

Change 855056 had a related patch set uploaded (by Sbisson; author: Sbisson):

[mediawiki/extensions/Wikistories@master] POC: Image component

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

Change 833009 abandoned by Sbisson:

[mediawiki/extensions/Wikistories@master] Re-position image on the story builder feature

Reason:

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

Change 855056 merged by jenkins-bot:

[mediawiki/extensions/Wikistories@master] StoryImage component

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

Change 931635 had a related patch set uploaded (by Sbisson; author: Sbisson):

[mediawiki/extensions/Wikistories@master] getImagePosition: prevent going out of bound

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

Change 931635 merged by jenkins-bot:

[mediawiki/extensions/Wikistories@master] getImagePosition: prevent going out of bound

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

Hi @SBisson @Jrbranaa , here are my testing results:

PASS

1. Image can be panned to the left or right.
2. Double-tapping the image makes it go through three (3) levels of zoom before returning to the original zoom ratio.
3. When an image is panned, text can be added to the story page and published.
4. When reading the story, it shows the panned image on the story page.

NEEDS REVIEW
There is no instruction to the user about this functionality so it will easily be missed.

Tested on

• Android 13, Chrome v114.0
• iOS 16.1, Safari v16
• iOS 16.1, Firefox v114.4

@eamedina Please see the results below and let me know how you want to proceed. If there is an issue, let me know if you want me to create any new tasks. Other than below, no issues with panning or zooming. (besides iPhone). Thanks!

Mobile: Pixel 6 Pro, Galaxy S23, iPhone 14 & Pro
Browsers: Chrome, Edge, FireFox, Safari

Extra Zoom %- In the task description it has zoom percentages of 150% & 200% but as seen in the screenshots there is an extra zoom in there too.

**No Zoom*	150%	200%	Unknown %?

iPhone 14 Safari Zoom- Unless it's really slow, the double tap zoom feature is not working but the panning is fine.

Firefox Pixel 6 pro & Galaxy S23- edit box is grey and on the Pixel 6 pro it looks darker compared to the other images.

**Pixel 6 Pro*	Galaxy S23

Pan User info- What kind of indication/information am I supposed to see to a user that the image can be panned because I did not notice any info?

Landscape- Are we supposed to look at landscape mode or is this only in portrait mode?

Thank you George for the thorough testing and adding images too.

What kind of indication/information am I supposed to see to a user that the image can be panned because I did not notice any info?

We have T341576 for this 👍

Unless it's really slow, the double tap zoom feature is not working but the panning is fine.

In an initial test on Safari on my iphone it seems be working fine, I'd would need to look more into it

@SGautam_WMF let's find some time to go over the rest of feedback? Thanks

Thanks George, Yes @eamedina let's touch based on this, I will reach out to you to discuss these.

Hey George, thanks again for the feedback. Sudhanshu and I went over it earlier today:

Extra Zoom %

We think this is fine so will leave it as is

iPhone 14 Safari Zoom

I tested with latest Safari version on iPhone 12 and 13 (no access to 14 yet) and was not able to replicate it, could you please give us more info like the Safari version you used? Did you test on a physical device directly? What did you mean by "unless it's really slow"?

Firefox Pixel 6 pro & Galaxy S23

Also not quite able to replicate this one. One thing we noticed that's worth mentioning for context: in the picture for the Pixel 6 pro, the app is in an edit mode state (note the "Edit text" title and "Done" button, hidden attribution), and in this mode there is a dark overlay but the text box should be on top of it. Are you able to replicate this still? Only happens with Firefox in these two phones?

Pan User info

T341576

Landscape

Landscape is out of scope for now.

Mobile: Pixel 6 Pro, Galaxy S23, iPhone 14 & Pro
Browsers: Chrome, Edge, FireFox, Safari

Also could you please let us know, just for context, what is your testing setup like? Testing on devices directly or testing platform?

@eamedina Thanks for the update! I will keep you posted on my findings once Beta is back up.

We think this is fine so will leave it as is

Sounds good, I just wanted to make sure since the description had only those 2 zooms.

I tested with the latest Safari version on iPhone 12 and 13 (no access to 14 yet) and was not able to replicate it, could you please give us more info like the Safari version you used? Did you test on a physical device directly? What did you mean by "unless it's really slow"?

I will retest again once Beta is running again

Also not quite able to replicate this one. One thing we noticed that's worth mentioning for context: in the picture for the Pixel 6 pro, the app is in an edit mode state (note the "Edit text" title and "Done" button, hidden attribution), and in this mode there is a dark overlay but the text box should be on top of it. Are you able to replicate this still? Only happens with Firefox in these two phones?

I can test more in-depth if it's just those two phones once Beta is running again.

T341576

Perfect!

Landscape is out of scope for now.

Sounds good!

Also could you please let us know, just for context, what is your testing setup like? Testing on devices directly or testing platform?

I am not testing on the devices directly but using BrowserStack which allows me to test on real devices besides an emulators

@eamedina With finding out the causes for the two issues below, this will be moved to Sign-off, thanks!

Status: ✅ PASS
Environment: Beta
OS: macOS Ventura, iOS
Browser: Chrome 116, Firefox 116, Safari 16.6
Device: MBP
Emulated Device:BrowserStacks & Dev Tools
Test Link:
https://en.m.wikipedia.beta.wmflabs.org/wiki/Special:StoryBuilder/Story:Dog_Test?frameid=0#story

I tested with latest Safari version on iPhone 12 and 13 (no access to 14 yet) and was not able to replicate it, could you please give us more info like the Safari version you used? Did you test on a physical device directly? What did you mean by "unless it's really slow"?

Not on a physical device but via BrowserStack which uses real devices. It could just be a little on their end since I tested the same phone via DevTool vs BrowserStack and BrowserStack was a little slower so that's probably the cause. Otherwise, it seems fine via DevTool

Firefox Pixel 6 pro & Galaxy S23

Also not quite able to replicate this one. One thing we noticed that's worth mentioning for context: in the picture for the Pixel 6 pro, the app is in an edit mode state (note the "Edit text" title and "Done" button, hidden attribution), and in this mode there is a dark overlay but the text box should be on top of it. Are you able to replicate this still? Only happens with Firefox in these two phones?

I was still able to replicate it but I also just noticed for Firefox, at least on the phones I tested, already started Dark before it even got to Wikistories so this one is fine too.