Page MenuHomePhabricator

Align VideoJS player to Wikimedia UI design
Open, LowestPublicDesign

Description

It is necessary to replace all the icons both in the player itself and on the preview. Perhaps we need to draw missing icons. Repaint the menu with the colors from the style guide.

Icons are needed

Demo 'play' GIFs:

CurrentVerson 1Version 2

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 22 2020, 12:55 PM

Change 615435 had a related patch set uploaded (by Iniquity; owner: Iniquity):
[mediawiki/extensions/TimedMediaHandler@master] Change icon style of embed video and use OOUI play icon

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

Iniquity added a comment.EditedJul 22 2020, 4:01 PM
Original GifNew Gif
brion triaged this task as Lowest priority.Aug 3 2020, 6:09 PM
Iniquity added subscribers: brion, Jdforrester-WMF.EditedAug 3 2020, 7:23 PM

@brion, @Jdforrester-WMF: And if like this (gif image)?

That large a hover trigger area probably isn't great from an accessibility standpoint (too much of the screen flashing in response to user action).

Can you explain why you think the current WikimediaUI-compliant design isn't?

Can you explain why you think the current WikimediaUI-compliant design isn't?

  1. Not our icons are used
  2. Not our colors are used
  3. The start button is basically out of OOUI style

That large a hover trigger area probably isn't great from an accessibility standpoint (too much of the screen flashing in response to user action).

Hmm, It seems to me that it is good that the entire button is blinking, maybe I'm wrong.

That large a hover trigger area probably isn't great from an accessibility standpoint (too much of the screen flashing in response to user action).

Hmm, It seems to me that it is good that the entire button is blinking, maybe I'm wrong.

I think it still follows W3C accessibility guideline on hovering, and better as there is no longer the need for users to exactly position of the video play button.

For example, when you hover YouTube video thumbnail on Google search page, it completely change to a small video preview. Twitter’s video play button’s hover area is only the button, but considering the fact that there is also a big hover area for the whole tweet (Change background color of the tweet), the new hover area of video in mediawiki should be fine.

I like the previous centered button, but I think the background color is too dark, maybe considering changing the background color, and the hovered background color similar to what videojs’s sea theme color, but keep the circle shape.

Iniquity updated the task description. (Show Details)Aug 7 2020, 11:33 PM
Iniquity updated the task description. (Show Details)Aug 7 2020, 11:35 PM

Note that "CC"/closed-captioning is English, and specifically North American English, terminology: https://en.wikipedia.org/wiki/Closed_captioning#Terminology

Note that "CC"/closed-captioning is English, and specifically North American English, terminology: https://en.wikipedia.org/wiki/Closed_captioning#Terminology

Yes, I've already thought about it :) I think we need a textless icon like on YouTube.

Iniquity updated the task description. (Show Details)Aug 13 2020, 2:36 PM