Page MenuHomePhabricator
Create Task
Maniphest T258298

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

Assigned To
AnneT
Authored By
mwilliams
Jul 17 2020, 9:26 PM
Project Tags
Referenced Files
F33959158: Screen Shot 2020-12-18 at 4.52.30 PM.png
Dec 19 2020, 1:32 AM
F33959137: Screen Shot 2020-12-18 at 5.01.45 PM.png
Dec 19 2020, 1:32 AM
F33959156: Screen Shot 2020-12-18 at 5.13.38 PM.png
Dec 19 2020, 1:32 AM
F33959150: Screen Shot 2020-12-18 at 5.25.16 PM.png
Dec 19 2020, 1:32 AM
F33959057: Screen Shot 2020-12-18 at 4.52.30 PM.png
Dec 19 2020, 1:32 AM
F33959152: Screen Shot 2020-12-18 at 5.11.33 PM.png
Dec 19 2020, 1:32 AM
F33959154: Screen Shot 2020-12-18 at 5.12.25 PM.png
Dec 19 2020, 1:32 AM
F33959060: Screen Shot 2020-12-18 at 4.54.19 PM.png
Dec 19 2020, 1:32 AM
View All 10 Files
Subscribers
Aklapper
CBogen
Etonkovidova
mwilliams
• Ramsey-WMF

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 (1,231×745 px, 112 KB)

Video example which is using the "Media Play" icon

video_icon.jpg (1,231×882 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

Details

Related Changes in Gerrit:
SubjectAuthorRepoBranchLines +/-
Minor UI changesAnne Tomasevichmediawiki/extensions/WikibaseMediaInfomaster+63 -16
Customize query in gerrit

Related Objects
Search...

Event Timeline

mwilliams created this task.Jul 17 2020, 9:26 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 17 2020, 9:26 PM
CBogen added a project: MediaSearch (MediaSearch-Beta).Jul 27 2020, 7:38 PM
CBogen edited projects, added: Structured-Data-Backlog (Current Work); removed: Structured-Data-Backlog.Jul 27 2020, 7:42 PM
CBogen moved this task from Incoming to Needs Design on the Structured-Data-Backlog (Current Work) board.
mwilliams updated the task description. (Show Details)Jul 27 2020, 7:52 PM
mwilliams updated the task description. (Show Details)
mwilliams added a comment.Aug 7 2020, 6:28 PM

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

Aklapper added a comment.Sep 2 2020, 10:21 AM

Setting subtask per last comment.

Aklapper added a subtask: T259906: Add 'volumeUp', 'volumeDown' and 'volumeMute' icons in Design Style Guide & OOUI.Sep 2 2020, 10:21 AM
• Ramsey-WMF edited projects, added: MediaSearch, Structured-Data-Backlog; removed: Structured-Data-Backlog (Current Work), MediaSearch (MediaSearch-Beta).Sep 9 2020, 8:11 PM
• Ramsey-WMF moved this task from Triage to Section Topics on the Structured-Data-Backlog board.
mwilliams added a comment.Sep 14 2020, 4:05 PM

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

CBogen moved this task from Backlog to MediaSearch-ReleaseCandidate2 on the MediaSearch board.Oct 6 2020, 4:05 PM
CBogen edited projects, added: MediaSearch (MediaSearch-ReleaseCandidate2); removed: MediaSearch.
CBogen edited projects, added: Structured-Data-Backlog (Current Work); removed: Structured-Data-Backlog.Oct 8 2020, 3:28 PM
mwilliams moved this task from Needs Design to Ready for Estimation on the Structured-Data-Backlog (Current Work) board.Oct 8 2020, 8:07 PM
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
CBogen moved this task from Ready for Estimation to Ready for Development on the Structured-Data-Backlog (Current Work) board.Oct 21 2020, 5:02 PM
Volker_E closed subtask T259906: Add 'volumeUp', 'volumeDown' and 'volumeMute' icons in Design Style Guide & OOUI as Resolved.Nov 2 2020, 9:34 AM
AnneT claimed this task.Dec 3 2020, 10:58 PM
gerritbot added a comment.Dec 3 2020, 11:07 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

gerritbot added a project: Patch-For-Review.Dec 3 2020, 11:07 PM
AnneT moved this task from Ready for Development to Code Review on the Structured-Data-Backlog (Current Work) board.Dec 3 2020, 11:07 PM
gerritbot added a comment.Dec 15 2020, 1:45 PM

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

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

ReleaseTaggerBot added a project: MW-1.36-notes (1.36.0-wmf.25; 2021-01-05).Dec 15 2020, 2:00 PM
matthiasmullie moved this task from Code Review to Needs QA on the Structured-Data-Backlog (Current Work) board.Dec 15 2020, 2:04 PM
Maintenance_bot removed a project: Patch-For-Review.Dec 15 2020, 2:11 PM
Etonkovidova moved this task from Needs QA to Design QA on the Structured-Data-Backlog (Current Work) board.Dec 19 2020, 1:32 AM
Etonkovidova subscribed.

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 (398×150 px, 23 KB)
Screen Shot 2020-12-18 at 4.52.30 PM.png (769×367 px, 53 KB)
Screen Shot 2020-12-18 at 5.12.25 PM.png (368×298 px, 90 KB)
Screen Shot 2020-12-18 at 5.13.38 PM.png (447×279 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 (769×367 px, 53 KB)
Screen Shot 2020-12-18 at 4.54.19 PM.png (1,090×499 px, 319 KB)

(2) The contrast ration seems to be low.

Screen Shot 2020-12-18 at 5.25.16 PM.png (516×375 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 (802×639 px, 106 KB)

Etonkovidova updated the task description. (Show Details)Dec 19 2020, 1:32 AM
mwilliams added a comment.Dec 21 2020, 3:48 PM

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.

mwilliams moved this task from Design QA to Verify on Production on the Structured-Data-Backlog (Current Work) board.Dec 21 2020, 3:48 PM
Etonkovidova mentioned this in T271373: [S] [wmf.25] MediaSearch: Audio mid files do not have audio icons.Jan 6 2021, 10:49 PM
Etonkovidova closed this task as Resolved.Jan 7 2021, 1:57 AM

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

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits