Page MenuHomePhabricator

Replace TimedMediaHandler's use of deprecated jQuery UI with OOUI
Open, MediumPublic


TimedMediaHandler's use of jQuery UI adds a set of additional loads to any page that has timed media on it. This is (a) ugly and (b) expensive in terms of client time/network/CPU.

Instead, let's use OOUI's styles, which are arguably not better but are at least consistent, and don't need additional loads (as right now many, and soon enough every, page load already loads this).

Note that we are also considering dropping those parts completely as part of T100106.

Related Objects


Event Timeline

Jdforrester-WMF raised the priority of this task from to Needs Triage.
Jdforrester-WMF updated the task description. (Show Details)
Jdforrester-WMF added subscribers: Jdforrester-WMF, ori.
Restricted Application added a project: Multimedia. · View Herald TranscriptFeb 13 2015, 8:59 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
TheDJ added a subscriber: TheDJ.Feb 13 2015, 9:10 PM

although a worthy goal to use oojs-ui, i'd say cleanup TMH itself first :)

although a worthy goal to use oojs-ui, i'd say cleanup TMH itself first :)

From IRC, selected lines:

ori: that's 300kb of javascript on barack obama for the media player
marktraceur: Oh no.
marktraceur: Wait, jquery UI is HOW BIG?
marktraceur: WHAT THE HELL
ori: something's wrong, right?
ori: it grew
James_F: marktraceur: We could switch to something else that's more performant, maybe?
marktraceur: Maybe.
James_F: But switching from jQuery UI to OOjs UI might be less effort for the same general pay-off.

I think "Making TMH better" is rather more epic than justifies blocking this issue.

Tgr added a subscriber: Tgr.Feb 13 2015, 10:32 PM

jQUI is ~200K minified/uncompressed, OOUI is 300K, so as long as OOUI is not included on every page this will actually increase the payload. I don't think it's very significant anyway; gzip will shrink these to 10-20%, and TMH is a video player; a typical video is probably in the megabytes and will dominate traffic costs. There might be valid reasons for replacing jQUI with OOUI, but script size is not one of them, at least for the moment.

ori: that's 300kb of javascript on barack obama for the media player

For posterity, the imgur image:

TMH is like UploadWizard. Tinker on one end, and it breaks on the other.

Jdforrester-WMF set Security to None.
Jdforrester-WMF triaged this task as Medium priority.Apr 30 2015, 4:12 PM
Jdforrester-WMF moved this task from Untriaged to Next up on the Multimedia board.
TheDJ updated the task description. (Show Details)May 28 2015, 9:05 AM
brion added a subscriber: brion.Jul 21 2015, 1:16 AM
Restricted Application added a subscriber: Matanya. · View Herald TranscriptJul 21 2015, 1:16 AM
Paladox added a subscriber: Paladox.Dec 4 2015, 6:25 PM

This has partialy been done.

Transcode was switched to oo-ui.

All that needs left as far as it looks is the MwEmbedModules/ folder.

But also they are thinking off switching to videojs which is more modern.

TheDJ added a comment.Dec 18 2015, 9:20 AM

One thing that can really still be 'easily' done is to replace the popup dialog for enlarging thumbed videos to OOjs UI. The Kaltura player is however fully build with jQuery UI, so not likely that it will be removed from there.

Volker_E renamed this task from Replace TimedMediaHandler's use of deprecated jQuery UI with OOjs UI to Replace TimedMediaHandler's use of deprecated jQuery UI with OOUI.Jan 18 2018, 9:42 PM
Volker_E updated the task description. (Show Details)
brion moved this task from To sort to Player-Old on the TimedMediaHandler board.Apr 23 2018, 11:03 PM
Krinkle added a subscriber: Krinkle.Jul 5 2019, 6:15 PM

@TheDJ / @brion: Is it true that the video.js mode in TMH does not involve jQuery UI? Are there other parts of TMH (e.g. special pages, TimedText stuff etc.) still that use jQuery UI, or would this task be resolved after T100106?

On a Commons page with TMH in videoJS mode, jQUI is now still loaded, because:

  • jquery.ui.core.styles
    • jquery.ui.core
      • jquery.ui.button
        • jquery.ui.dialog
          • ext.gadget.AjaxQuickDelete
          • ext.gadget.Stockphoto
      • jquery.ui.draggable
        • (jquery.ui.dialog again)
      • jquery.ui.resizable
        • (jquery.ui.dialog again)

Not AFAICT pulled in by TMH at all, just the gadgets.