Page MenuHomePhabricator

Align VideoJS player to Wikimedia UI design
Open, LowestPublicDesign

Assigned To
None
Authored By
Iniquity
Jul 22 2020, 12:55 PM
Referenced Files
F34919080: audio2.gif
Jan 15 2022, 1:12 PM
F34919078: audio.gif
Jan 15 2022, 1:12 PM
F34731088: 2021-11-05 13.31.31.gif
Nov 5 2021, 10:32 AM
F34619891: Screenshot 2021-08-25 at 20.25.46.png
Aug 25 2021, 6:26 PM
F31962209: player des.gif
Aug 3 2020, 7:23 PM
F31944607: new.gif
Jul 22 2020, 4:01 PM
F31944608: original.gif
Jul 22 2020, 4:01 PM
F31944410: image.png
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.

image.png (612×916 px, 22 KB)
image.png (195×252 px, 39 KB)

Icons are needed to create T302150

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:

CurrentVerson 1Version 2
original.gif (203×286 px, 89 KB)
new.gif (203×286 px, 82 KB)
player des.gif (219×293 px, 133 KB)

Event Timeline

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

Original GifNew Gif
original.gif (203×286 px, 89 KB)
new.gif (203×286 px, 82 KB)
brooke triaged this task as Lowest priority.Aug 3 2020, 6:09 PM

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.

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.

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

@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 :(

I also think to do smth like that (GIF)

audio.gif (195×426 px, 17 KB)

instead of
audio2.gif (195×426 px, 24 KB)

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

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

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

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.

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.

Change 761093 abandoned by Iniquity:

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

Reason:

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