Align VideoJS player to Wikimedia UI design
Open, LowestPublicDesign
Actions

Assigned To

None

Authored By

	Iniquity
	Jul 22 2020, 12:55 PM

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 to create T302150

Volume icon - T259906: Add 'volumeUp', 'volumeDown' and 'volumeMute' icons in Design Style Guide & OOUI
CC - Subtitle icon
Picture-in-Picture icon
Restart icon (we can use base reload icon but in video players, the arrow is always directed in the other direction)

Where should they be replaced

Preview start buttons
Control panel T302149
Video placeholder in audio files (I'm not sure that it is needed in general)

Demo 'play' GIFs:

Current	Verson 1	Version 2

Details

Subject	Repo	Branch	Lines +/-
Change audio-poster to OOUI icon	mediawiki/extensions/TimedMediaHandler	master	+15 -5
Design fixes for 'play' buttons	mediawiki/extensions/TimedMediaHandler	master	+35 -46
Using a simple css instead of an extra 'audio-play' image	mediawiki/extensions/TimedMediaHandler	master	+14 -9
'Play' button transparency fix	mediawiki/extensions/TimedMediaHandler	master	+0 -0
Change icon style of embed video and use OOUI play icon	mediawiki/extensions/TimedMediaHandler	master	+21 -5

Customize query in gerrit

Related Objects
Search...

Status	Subtype	Assigned	Task
Open	Design	None	T258584 Align VideoJS player to Wikimedia UI design
Open		None	T302149 Replace icons in control panel of VideoJS player
Open		None	T302150 Add 'Subtitle', 'Picture-in-Picture' and 'Restart' icons in Design Style Guide, Codex & OOUI
Open		None	T311372 Move 'info' icon to Videojs icon font
Open		None	T280725 Define and add media player control components to the DSG

Event Timeline

Iniquity created this task.Jul 22 2020, 12:55 PM

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

Iniquity added a project: Video.Jul 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

gerritbot added a project: Patch-For-Review.Jul 22 2020, 4:00 PM

Original Gif	New Gif

VulpesVulpes825 subscribed.Jul 22 2020, 4:59 PM

Iniquity mentioned this in T258622: Poor display of media on Special:NewFiles.Jul 22 2020, 5:38 PM

• brooke triaged this task as Lowest priority.Aug 3 2020, 6:09 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?

In T258584#6359066, @Jdforrester-WMF wrote:

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

Not our icons are used
Not our colors are used
The start button is basically out of OOUI style

In T258584#6359066, @Jdforrester-WMF wrote:

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.

In T258584#6359651, @Iniquity wrote:

In T258584#6359066, @Jdforrester-WMF wrote:

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 mentioned this in T259906: Add 'volumeUp', 'volumeDown' and 'volumeMute' icons in Design Style Guide & OOUI.Aug 7 2020, 11:08 PM

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

In T258584#6375969, @Esanders wrote:

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

cc @Volker_E

Iniquity updated the task description. (Show Details)Dec 15 2020, 8:30 PM

Iniquity updated the task description. (Show Details)Dec 15 2020, 8:34 PM

Iniquity mentioned this in T280725: Define and add media player control components to the DSG.Apr 24 2021, 8:59 AM

Change 615435 merged by jenkins-bot:

[mediawiki/extensions/TimedMediaHandler@master] Change icon style of embed video and use OOUI play icon

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

ReleaseTaggerBot added a project: MW-1.37-notes (1.37.0-wmf.19; 2021-08-16).Aug 16 2021, 11:00 PM

@Iniquity can we add a white outline to that play button ? When you have a dark background in the thumb, it blends in a LOT now...

Example:
https://commons.wikimedia.org/wiki/File:Vettisfossenvideo.webm

Screenshot 2021-08-25 at 20.25.46.png (372×1 px, 416 KB)

It seems to me that I just need to make it brighter

2021-11-05 13.31.31.gif (408×702 px, 386 KB)

I'll fix it when my gerrit account is fixed :(

Iniquity updated the task description. (Show Details)Jan 15 2022, 12:48 PM

I also think to do smth like that (GIF)

instead of

Iniquity removed a project: Patch-For-Review.Jan 15 2022, 1:59 PM

Change 755999 had a related patch set uploaded (by Iniquity; author: Iniquity):

[mediawiki/extensions/TimedMediaHandler@master] 'Play' button transparency fix

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

gerritbot added a project: Patch-For-Review.Jan 21 2022, 6:22 PM

Change 755999 abandoned by Iniquity:

[mediawiki/extensions/TimedMediaHandler@master] 'Play' button transparency fix

Reason:

because https://gerrit.wikimedia.org/r/c/mediawiki/extensions/TimedMediaHandler/+/755023

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

@TheDJ I was hoping you'd wait for me :(

Change 757706 had a related patch set uploaded (by Iniquity; author: Iniquity):

[mediawiki/extensions/TimedMediaHandler@master] Using a simple css instead of an extra 'audio-play' image

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

Change 757706 merged by jenkins-bot:

[mediawiki/extensions/TimedMediaHandler@master] Using a simple css instead of an extra 'audio-play' image

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

ReleaseTaggerBot added a project: MW-1.38-notes (1.38.0-wmf.20; 2022-01-31).Jan 28 2022, 10:00 PM

Change 759946 had a related patch set uploaded (by Iniquity; author: Iniquity):

[mediawiki/extensions/TimedMediaHandler@master] Design fixes for 'play' buttons

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

Change 759946 merged by jenkins-bot:

[mediawiki/extensions/TimedMediaHandler@master] Design fixes for 'play' buttons

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

ReleaseTaggerBot edited projects, added MW-1.38-notes (1.38.0-wmf.21; 2022-02-07); removed MW-1.38-notes (1.38.0-wmf.20; 2022-01-31).Feb 7 2022, 12:00 AM

Change 761093 had a related patch set uploaded (by Iniquity; author: Iniquity):

[mediawiki/extensions/TimedMediaHandler@master] Change audio-poster to OOUI icon

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

Icons for the player can be added or replaced with https://github.com/videojs/font. We still need to somehow connect our library.

Iniquity moved this task from Backlog to Active on the VideoJS player board.Feb 19 2022, 11:15 AM

Iniquity mentioned this in T302149: Replace icons in control panel of VideoJS player.Feb 19 2022, 11:33 AM

Iniquity added a subtask: T302149: Replace icons in control panel of VideoJS player.

Iniquity added a subtask: T280725: Define and add media player control components to the DSG.Feb 19 2022, 11:36 AM

Iniquity mentioned this in T302150: Add 'Subtitle', 'Picture-in-Picture' and 'Restart' icons in Design Style Guide, Codex & OOUI.Feb 19 2022, 11:45 AM

Iniquity updated the task description. (Show Details)Feb 19 2022, 11:47 AM

Just a small note. While I very much want a fully custom videoJS skin for MediaWiki, it also adds a lot of overhead in maintaining the product, if this skin is not maintained separately from the 'stock' videoJS skin. So if we really want to go this way, we should find a way to have actually separate skins, instead of stacking override upon override.

I'm sure this is possible, but I have not setup any infrastructure for multiple skins and building our own skin yet, but these would also be requirement for further progress on this task when it comes to customising the stock controls and stock layout of the controls etc.

https://docs.videojs.com/tutorial-skins.html
I found something :)

Change 761093 abandoned by Iniquity: