Page MenuHomePhabricator

[S] Adding audio and video icons to search result design
Closed, ResolvedPublic

Description

In the audio and video tabs we want to make it very obvious what type of file it is to set the correct expectations. Adding icons in the timer/running time box seems like the least intrusive place to help with this distinction.

Audio example which is using a new audio icon that @mwilliams is working on adding to the icon library

audio_icon.jpg (745×1 px, 112 KB)

Video example which is using the "Media Play" icon

video_icon.jpg (882×1 px, 261 KB)

Acceptance Criteria:
During development, please test the following:

  • Test this feature while logged in AND logged out
  • Test this feature on at least one mobile browser

Event Timeline

mwilliams updated the task description. (Show Details)

Ticket working on getting the new audio icon added to the library: https://phabricator.wikimedia.org/T259906

Setting subtask per last comment.

Obviously not a priority right now but the new audio icon is now on production and this is ready to go.

CBogen renamed this task from Adding audio and video icons to search result design to [S] Adding audio and video icons to search result design.Oct 21 2020, 4:32 PM

Change 645197 had a related patch set uploaded (by Anne Tomasevich; owner: Anne Tomasevich):
[mediawiki/extensions/WikibaseMediaInfo@master] Minor UI changes

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

Change 645197 merged by jenkins-bot:
[mediawiki/extensions/WikibaseMediaInfo@master] Minor UI changes

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

Etonkovidova added a subscriber: Etonkovidova.

Moving for @mwilliams quick review. If there would be no follow-ups, please move to Verify in Production after review.

commons wmf.22- no iconsbetalabs with icons
Screen Shot 2020-12-18 at 5.11.33 PM.png (150×398 px, 23 KB)
Screen Shot 2020-12-18 at 4.52.30 PM.png (367×769 px, 53 KB)
Screen Shot 2020-12-18 at 5.12.25 PM.png (298×368 px, 90 KB)
Screen Shot 2020-12-18 at 5.13.38 PM.png (279×447 px, 62 KB)

Questions:
(1) all labels for file types have either application or audio/video. The screenshot in the task description does not display such information. Is it necessary to display (looks kind of repetitive)?

Screen Shot 2020-12-18 at 4.52.30 PM.png (367×769 px, 53 KB)
Screen Shot 2020-12-18 at 4.54.19 PM.png (499×1 px, 319 KB)

(2) The contrast ration seems to be low.

Screen Shot 2020-12-18 at 5.25.16 PM.png (375×516 px, 58 KB)

(2) (minor) The Audio tab - there is some discrepancy between the filter file type label mp3 which will fetch all files with mp3 extension and the label that displays mpeg.
Screen Shot 2020-12-18 at 5.01.45 PM.png (639×802 px, 106 KB)

This looks good to me! I'll double check the contrast ratio and create a ticket if needed since that is separate from the icon issue.

Checked on `commons wmf.25'. Filed T271373.