Page MenuHomePhabricator

Use OOUI for the player controls
Closed, ResolvedPublic1 Estimated Story Points

Description

Change the icons for the buttons in the control panel to use OOUI instead of Font awesome. This will make it fit better in the rest of the UI.

It shouldn't be too hard to replace most of the code. There may be a bit more work for changing the icon for the play/stop button and the buffering icon, both of which uses FA logic.

Also: investigate whether a OOUI toolbar can be used as the actual panel.

Event Timeline

Sebastian_Berlin-WMSE renamed this task from Use OOUI for control panel to Use OOUI for the player controls.Jul 12 2018, 10:51 AM

This means we won't have to add dependencies for FA, which was brought up in this patch comment.

It should be noted that the reason we first went with FA was IIRC that some of the icons we needed were missing within the OOUI icon set. With the New icons for timedMediaHandler these now exist within OOUI.

Volker Noted that the move to vuejs seems to be advancing faster than anticipated. Vue.js support should be available within research loader around April, based on the preparatory work done for the type-ahead-search bar where vue.js support is being baked into MW core. This implementation re-uses the icon set developed for OOUI.

Since we are not in a rush to handle this task we can probably hold on doing this until there is an update on vue.js

@Lokal_Profil, do you know if there's a task keeping track of the Vue.js implementation? It would be good to have that on the radar.

Lokal_Profil set the point value for this task to 16.Mar 11 2020, 1:27 PM

I've managed to slap together an OOUI toolbar with a player button. There doesn't seem to be any way of adding toolbars in PHP, which would be nice. Access keys don't seem to support space bar or arrow keys, so we may need to stick with the home brew hotkey implementation.

One issue if what to do with the buffering indicator. There isn't really anything like that in OOUI that I can find. I'll have a look if I can make some sort of animation with CSS to indicate this. We'll have to keep an eye on performance since I've experienced some animations, e.g. the text cursor in Google Docs, to be quite taxing on the CPU.

Sebastian_Berlin-WMSE changed the point value for this task from 16 to 8.Apr 30 2020, 8:26 AM

Change 594673 had a related patch set uploaded (by Sebastian Berlin (WMSE); owner: Sebastian Berlin (WMSE)):
[mediawiki/extensions/Wikispeech@master] Use OOUI for GUI

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

Lokal_Profil changed the point value for this task from 8 to 4.May 14 2020, 8:29 AM
Sebastian_Berlin-WMSE changed the point value for this task from 4 to 1.May 28 2020, 10:51 AM

Change 594673 merged by jenkins-bot:
[mediawiki/extensions/Wikispeech@master] Use OOUI for GUI

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

Change 602388 had a related patch set uploaded (by Sebastian Berlin (WMSE); owner: Sebastian Berlin (WMSE)):
[mediawiki/extensions/Wikispeech@master] Use OOUI for GUI

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

Change 602388 merged by jenkins-bot:
[mediawiki/extensions/Wikispeech@master] Use OOUI for GUI

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