Page MenuHomePhabricator

Update Frames component to use StoryImage
Closed, ResolvedPublic

Assigned To
Authored By
eamedina
Jul 11 2023, 8:13 PM
Referenced Files
F37622313: 2023-08-23_06-43-10.png
Aug 23 2023, 1:55 PM
F37622307: 2023-08-23_06-30-46.png
Aug 23 2023, 1:55 PM
F37622288: 2023-08-23_06-08-06.png
Aug 23 2023, 1:55 PM
F37622109: 2023-08-23_05-44-42.mp4.gif
Aug 23 2023, 1:55 PM
F37622133: 2023-08-23_05-54-31.mp4.gif
Aug 23 2023, 1:55 PM
F37618176: 2023-08-22_14-15-32.mp4.gif
Aug 23 2023, 1:55 PM
F37618101: 2023-08-22_14-13-05.mp4.gif
Aug 23 2023, 1:55 PM
F37618061: 2023-08-22_13-55-55.mp4.gif
Aug 23 2023, 1:55 PM

Description

As follow up of T296784, update Frames component to use StoryImage and smoothen sorting behavior. Currently working okay in Firefox but not so much in Chrome, the native context menu (that activates when long-pressing an element) is too disruptive when sorting frames.

This update may resolve T340612

QA Results - Beta

Frames sorting at the bottom of the builder. The task on hand passed but please check out the possible issues I noticed in here

Details

Related Changes in Gerrit:

Event Timeline

Change 939789 had a related patch set uploaded (by Eamedina; author: Eamedina):

[mediawiki/extensions/Wikistories@master] Frames component update:

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

Change 939789 merged by jenkins-bot:

[mediawiki/extensions/Wikistories@master] Frames component update

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

@eamedina I noticed a couple of non-related issues to this task. For the actual task at hand, the bottom builder had no issues with the frame rate as seen in the gifs below. Each browser was similar to the ones tested on Chrome.

Status: ✅ PASS
Environment: Beta
OS: iOS 16 and whatever Dev Tool uses, Android 13.0
Browser: Chrome, Firefox, Safari, Edge
Device: MBP
Emulated Device: via BrowserStack & Dev Tool
Test Link: https://en.m.wikipedia.beta.wmflabs.org/wiki/Special:StoryBuilder/Story:Universal_Studios?frameid=0#story

✅AC1: Frames sorting at the bottom of the builder

BrowsersiPhone 12 ProiPad MiniGalaxy S23Pixel 7 ProOnePlus 11R
Chrome
2023-08-22_13-55-55.mp4.gif (762×748 px, 709 KB)
2023-08-22_14-13-05.mp4.gif (766×734 px, 641 KB)
2023-08-22_14-15-32.mp4.gif (970×846 px, 874 KB)
2023-08-23_05-54-31.mp4.gif (838×830 px, 746 KB)
2023-08-23_05-44-42.mp4.gif (854×860 px, 620 KB)
FireFox✅ PASS✅ PASS✅ PASS✅ PASS✅ PASS
Safari✅ PASS✅ PASSN/AN/AN/A
EdgeN/AN/A✅ PASS✅ PASS✅ PASS

Possible Issues

1st issue I noticed is that it seems like the older versions of the iOS software on Chrome's Dev Tool have the "Outdated story text" icon in grey. As seen in the pic after with the same phone in Browser Stack that uses a later software, the icon is yellow like the majority. You can see from the gifs above when using the Chrome Dev Tool that the iPhone 12pro, Mini, and Galaxy S23 both have grey icons besides yellow. With using the same phone on Chrome via Browserstack which uses a later version, it's the yellow icon.

2nd issue is in Safari, when selecting an image at the bottom builder, it only selects the duplicate icon and not the whole image like the rest. This seems to be like all Safari since in the later pic with a more current Safari, it still only selects the duplicate icon.

2023-08-23_06-08-06.png (3,442×1,754 px, 2 MB)

I'm not sure what iOS it's using in Dev Tool for Chrome.

iPhone 12 Pro ver 16- Chrome (Browserstack)iPhone 12 Pro ver ?- Chrome (Dev Tool)
2023-08-23_06-30-46.png (1,954×1,668 px, 936 KB)
2023-08-23_06-43-10.png (1,460×1,484 px, 771 KB)

Thanks @GMikesell-WMF for testing! Glad to hear there are no issues with the task.

the "Outdated story text" icon in grey

We recently merged a patch that updates the icon so that should take care of it, I can test some more later. To be clear, the icon on the row of frames in the bottom should be gray, the icon on the guiding message in the textbox should be yellow.

only selects the duplicate icon and not the whole image like the rest.

Good find, I've created T344847 to investigate more. Thanks!