Browsing images to the end of a collection should loop back to the start
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	MingleTerminator
	Dec 8 2014, 7:32 PM

Description

Migrated from: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/997

Narrative

As a user, I can keep browsing all the images in an article in an infinite loop, so that when I get to the end, I can start again from the start, without having to backtrack.

This is a user suggestion from avery discerning tester on usertesting.com.

Acceptance Criteria

Keep looping images when users browse a collection
When you get to the last image, clicking next one more time should go to the first image
Similarly, clicking the previous button back to the start image shouldloop back to the last image.

Related Bugs

Related Changesets

Derived Requirement

Ensure that users can browse images in an article in an infinite loop, allowing navigation from the last image back to the first and vice versa without interruption.

BDD

gherkin
Feature: Infinite Loop Browsing in Image Collection

Scenario: Loop from the last image back to the first in an article's image collection
  Given the user is browsing images in an article's image collection
  And the user reaches the last image
  When the user clicks the "next" button
  Then the first image in the collection should be displayed

Scenario: Loop from the first image to the last in an article's image collection
  Given the user is browsing images in an article's image collection
  And the user is viewing the first image
  When the user clicks the "previous" button
  Then the last image in the collection should be displayed

Test Result - Beta|Prod

Status: ✅ PASS / ❓Need More Info / ❌ FAIL
Environment: beta/xyzwiki
OS: macOS Sonoma 15.0
Browser: Chrome 130
Device: MBA
Emulated Device: NA

Test Artifact(s):

Test Steps

Test Case 1: Loop from Last Image to First in Image Collection

Navigate to an article with an image collection.
Begin browsing the images by clicking the "next" button.
Continue clicking until you reach the last image in the collection.
✅❓❌⬜ AC1: Confirm that clicking "next" after the last image takes you back to the first image.

Test Case 2: Loop from First Image to Last in Image Collection

Navigate to the first image in the same collection.
Click the "previous" button.
✅❓❌⬜ AC2: Confirm that clicking "previous" from the first image takes you to the last image in the collection.

QA Results - Beta

AC	Status	Details
1	✅	T77877#10261238

QA Results - PROD

AC	Status	Details
1	✅	T77877#10261245

Details

Subject	Repo	Branch	Lines +/-
Hide next/prev buttons when there is only one image	mediawiki/extensions/MultimediaViewer	master	+16 -16
Add icons MoveFirst/MoveLast to jump to first/last image when viewing last/first image	mediawiki/extensions/MultimediaViewer	master	+47 -8
Make next/prev buttons jump to first/last image when viewing last/first image	mediawiki/extensions/MultimediaViewer	master	+17 -46
Loops back to the start of images when at the end of collection	mediawiki/extensions/MultimediaViewer	master	+16 -14

Customize query in gerrit

Related Objects

Mentioned In: T378396: Verify 1.44.0-wmf.1 deployment
T378395: Verify 1.44.0-wmf.2 deployment
T377247: Verify 1.43.0-wmf.28 deployment
T377791: MMV should have an affordance for which image is being viewed in the article
T377246: Verify 1.43.0-wmf.27 deployment
T77349: Reduce Javascript Code Size per 2014 Mobile Team recommendation
Mentioned Here: T377791: MMV should have an affordance for which image is being viewed in the article
T59298: The viewer box should not depend on the current page

Event Timeline

In mingle on 2014-11-13 at 19:47:11, @Pginer-WMF wrote:

This has some risks. Being aware you reached the end of a sequence of images is also important.

So I would not support the idea of simply keeping showing more images as you click next. Since that would cause disorientation problems.

We could provide a quick access to start again, or support a more advanced sequence navigation (with small thumbnails at the bottom).

Do we have more context information on the issue? Was it an "I think it would be nice.." comment from the user, or did he had issues trying to do something because of the lack of such feature?

In mingle on 2014-11-18 at 18:22:38, @Tgr wrote:

Facebook loops photos, without much notification that you looped (there is a counter but it is not very prominent). Google Photos does it in a weird non-deterministic way (I think the exact logic is that you can loop once but when you reach the end the second time it will open the navigation panel instead). Flickr uses the same logic MediaViewer uses currently.

Lowering priority as we have no intentions of working on this anytime soon.

Tgr added a project: Design.Dec 10 2014, 11:49 PM

Jdforrester-WMF moved this task from Untriaged to Backlog on the Multimedia board.Sep 4 2015, 6:27 PM

Restricted Application added a subscriber: Matanya. · View Herald TranscriptSep 4 2015, 6:27 PM

Mass-removing the Multimedia tag from MediaViewer tasks, as this is now being worked on by the Reading department, not Editing's Multimedia team.

Jdforrester-WMF removed a project: Multimedia.Sep 21 2015, 3:50 PM

Patches welcomed.

Jdlrobson added a project: good first task.Feb 2 2016, 6:14 PM

Jdlrobson set Security to None.

MBinder_WMF added a project: Web-Team-Backlog.Apr 27 2016, 4:28 PM

Restricted Application added a subscriber: TerraCodes. · View Herald TranscriptApr 27 2016, 4:28 PM

MBinder_WMF moved this task from Incoming to Triaged but Future on the Web-Team-Backlog board.Jul 4 2016, 7:25 PM

Jdforrester-WMF unsubscribed.Jul 5 2016, 9:25 AM

Change 339942 had a related patch set uploaded (by Nmoanta):
Loops back to the start of images when at the end of collection

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

gerritbot added a project: Patch-For-Review.Feb 26 2017, 3:29 PM

Since this is such a disputed feature, perhaps an option would be the way out? As for the indication of the end, perhaps another image (such as a double arrow) would be enough?

In T77877#3059006, @Strainu wrote:

Since this is such a disputed feature, perhaps an option would be the way out?

Hell no. Adding a user option for every small tweak someone wants would be a sure way of ending up with an options menu that no one ever uses. MediaWiki settings are already way too hard for the average user to navigate.

Exposing the image iteration logic in such a way that makes it easy for gadgets to change it would be doable, though (and would have many other uses as well). The task for that is T59298.

Jdlrobson added a project: Patch-Needs-Improvement.Mar 7 2017, 7:24 PM

MBinder_WMF removed a project: Web-Team-Backlog.Apr 13 2017, 6:39 PM

MBinder_WMF added a project: Multimedia.Aug 7 2017, 5:54 PM

Tgr unsubscribed.Jul 9 2019, 6:05 PM

Removing good first task as this does not look non-controversial as per task and patch comments.

Change #339942 abandoned by TheDJ:

[mediawiki/extensions/MultimediaViewer@master] Loops back to the start of images when at the end of collection

Reason:

7 years old and not being actively worked. welcome to revive if you want to.

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

This is how it works on Minerva, so I suspect this might be a blocker for removing the MobileFrontend media viewer.

simon04 mentioned this in T77349: Reduce Javascript Code Size per 2014 Mobile Team recommendation.Sep 13 2024, 6:25 PM

@simon04 I would be concerned about taking away a feature. On mobile I think it's particularly important given sections are collapsed by default and it allows a way to cycle through all the images in the page. Perhaps as a compromise we could add the link but hide it at the desktop breakpoint so that it appears for mobile but not desktop?

@mwilliams would you be able to weigh in on this from a design perspective given your familiarity with multimedia viewer from the hackathon?

@simon04 @Jdlrobson I think it's a super reasonable idea to use MMV on Minerva and converge on one media viewer experience!

If we want to add the looping/cycling of images to MMV, I'd love to see an affordance that shows you where you are, whether that's small indicator dots, a number (e.g. 1/5) or exploring thumbnails (I could mock up some options). Having that affordance could be valuable even if we don't loop/cycle images.

If that feels like too much work at the moment - I don't think that not looping is a dealbreaker, when you have navigated somewhere and you reach the end, you understand how to reverse your action / go back to the beginning pretty intuitively, its just a bit cumbersome.

Change #1077891 had a related patch set uploaded (by Simon04; author: Simon04):

[mediawiki/extensions/MultimediaViewer@master] Add icons MoveFirst/MoveLast to jump to first/last image when viewing last/first image

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

gerritbot added a project: Patch-For-Review.Oct 4 2024, 8:13 AM

Restricted Application removed a project: Patch-Needs-Improvement. · View Herald TranscriptOct 4 2024, 8:13 AM

Demo of above patch:

I'm worried about using the MoveLast icon like this and it being universally understood quickly, especially on it's own and used from the very beginning I find it a bit confusing.

I'd propose three different options:

Arrows on both left and right sides from very beginning, slideshow loops/cycles through. A straightforward and common approach (e.g. Facebook does this on multiple image posts in their feed). I lean towards the simplicity of this solution - we can always push it farther if this isn't sufficient.
Same as above but we create an affordance that shows you what number slide you are on, like this The "1/5" in the top right or top left
Or thumbnails of each image in the slideshow that allows you quickly navigate to the image you are looking for.
This option would require quite a bit more front end work and testing, including some more thinking on my end to solve what it looks like when there are too many images, how does it interact with the main image, etc. I'm open to this but wouldn't be able to get to it for awhile.

Change #1078727 had a related patch set uploaded (by Simon04; author: Simon04):

[mediawiki/extensions/MultimediaViewer@master] Make next/prev buttons jump to first/last image when viewing last/first image

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

Change #1078727 merged by jenkins-bot:

[mediawiki/extensions/MultimediaViewer@master] Make next/prev buttons jump to first/last image when viewing last/first image

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

Arrows on both left and right sides from very beginning, slideshow loops/cycles through. A straightforward and common approach (e.g. Facebook does this on multiple image posts in their feed). I lean towards the simplicity of this solution - we can always push it farther if this isn't sufficient.

We went ahead with this solution which is consistent with mobile. We can revise later if needed.

ReleaseTaggerBot added a project: MW-1.43-notes (1.43.0-wmf.27; 2024-10-15).Oct 10 2024, 11:00 PM

Change #1077891 abandoned by Simon04:

[mediawiki/extensions/MultimediaViewer@master] Add icons MoveFirst/MoveLast to jump to first/last image when viewing last/first image

Reason:

I10f4d1b51b909ac8683afbd21f9529254a25ff37

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

Maintenance_bot removed a project: Patch-For-Review.Oct 11 2024, 3:31 PM

Jdlrobson added a project: Web Team Essential Work 2024 (Merge mobile and desktop media viewers).Oct 15 2024, 7:07 PM

Edtadros mentioned this in T377246: Verify 1.43.0-wmf.27 deployment.Oct 18 2024, 7:07 PM

There is feedback on VPT that looping with only one image is a confusing user interaction. Buttons probably shouldn't be usable in that case.

Thanks for the note! The follow up work here is to add an indicator about the number of the image in the top right ( T77877#10203938 ) I haven't created that ticket yet though. When we do that we can also add classes to the media viewer so that editors who want to opt out can disable the behaviour using their local CSS. I'll create this next week if nobody beats me to it.

In T77877#10243873, @Jdlrobson wrote:

Thanks for the note! The follow up work here is to add an indicator about the number of the image in the top right ( T77877#10203938 ) I haven't created that ticket yet though. When we do that we can also add classes to the media viewer so that editors who want to opt out can disable the behaviour using their local CSS. I'll create this next week if nobody beats me to it.

Seems like there are 3 things to do?

feature request to add counter
feature request to add a class
The UX/UI problem identified above: scrolling should not be enabled when the number of elements is 1

Change #1082042 had a related patch set uploaded (by Simon04; author: Simon04):

[mediawiki/extensions/MultimediaViewer@master] Hide next/prev buttons when there is only one image

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

gerritbot added a project: Patch-For-Review.Oct 21 2024, 4:44 PM

Change #1082042 merged by jenkins-bot:

[mediawiki/extensions/MultimediaViewer@master] Hide next/prev buttons when there is only one image

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

Maintenance_bot removed a project: Patch-For-Review.Oct 21 2024, 8:31 PM

ReleaseTaggerBot edited projects, added MW-1.43-notes (1.43.0-wmf.28; 2024-10-22); removed MW-1.43-notes (1.43.0-wmf.27; 2024-10-15).Oct 21 2024, 9:00 PM

Follow up work in: T377791

The UX/UI problem identified above: scrolling should not be enabled when the number of elements is 1

Fixed as part of this ticket and will roll out with this week's train.

Edtadros mentioned this in T377247: Verify 1.43.0-wmf.28 deployment.Oct 24 2024, 2:46 AM

Jdlrobson moved this task from Needs analysis to Ready for Signoff on the Web-Team-Backlog (FY2024-25 Q2 Sprint 2) board.Oct 24 2024, 5:00 PM

GMikesell-WMF updated the task description. (Show Details)Thu, Oct 24, 11:06 PM

GMikesell-WMF added subscribers: Edtadros, GMikesell-WMF.

Test Result - Beta

Status: ✅ PASS /
Environment: Beta
OS: macOS Sonoma 15.0
Browser: Chrome 130
Device: MBA
Emulated Device: NA

Test Artifact(s):

https://en.wikipedia.beta.wmflabs.org/wiki/Bat-eared_fox

Test Steps

Test Case 1: Loop from Last Image to First in Image Collection

Navigate to an article with an image collection.
Begin browsing the images by clicking the "next" button.
Continue clicking until you reach the last image in the collection.
✅ AC1: Confirm that clicking "next" after the last image takes you back to the first image.

2024-10-24_16-07-24.mp4.gif (1×914 px, 3 MB)

Test Case 2: Loop from First Image to Last in Image Collection

Navigate to the first image in the same collection.
Click the "previous" button.
✅AC2: Confirm that clicking "previous" from the first image takes you to the last image in the collection.

2024-10-24_16-09-57.mp4.gif (880×900 px, 3 MB)

Test Result - PROD

Status: ✅ PASS /
Environment: PROD
OS: macOS Sonoma 15.0
Browser: Chrome 130
Device: MBA
Emulated Device: NA

Test Artifact(s):

https://en.wikipedia.org/wiki/Batman

Test Steps

Test Case 1: Loop from Last Image to First in Image Collection

Navigate to an article with an image collection.
Begin browsing the images by clicking the "next" button.
Continue clicking until you reach the last image in the collection.
✅ AC1: Confirm that clicking "next" after the last image takes you back to the first image.

2024-10-24_16-13-40.mp4.gif (946×822 px, 1 MB)

Test Case 2: Loop from First Image to Last in Image Collection

Navigate to the first image in the same collection.
Click the "previous" button.
✅AC2: Confirm that clicking "previous" from the first image takes you to the last image in the collection.

2024-10-24_16-14-37.mp4.gif (942×818 px, 2 MB)

GMikesell-WMF updated the task description. (Show Details)Thu, Oct 24, 11:17 PM

Jdlrobson mentioned this in T378395: Verify 1.44.0-wmf.2 deployment.Mon, Oct 28, 6:02 PM

Jdlrobson mentioned this in T378396: Verify 1.44.0-wmf.1 deployment.

GMikesell-WMF added a project: Verified.Mon, Oct 28, 8:22 PM

Looks fixed. Cheers.

	F57589445: Screenshot 2024-10-04 at 3.04.36 PM.png
	Oct 4 2024, 9:10 PM

	F57589332: tabbing.gif
	Oct 4 2024, 7:30 PM

Browsing images to the end of a collection should loop back to the startClosed, ResolvedPublicActions

Description

Narrative

Acceptance Criteria

Related Bugs

Related Stories

Related Changesets

Derived Requirement

BDD

Test Result - Beta|Prod

Test Steps

QA Results - Beta

QA Results - PROD

Details

Related Objects

Event Timeline

Test Result - Beta

Test Steps

Test Result - PROD

Test Steps

Browsing images to the end of a collection should loop back to the start
Closed, ResolvedPublic
Actions