Page MenuHomePhabricator

VideoJS player is next to the score instead of below it
Closed, ResolvedPublic

Description

The VideoJS player for the automatically generated MediaWiki-extensions-Score playback is shown next to the score itself, while the Kaltura one is below it. VideoJS should appear below, too.

KalturaVideoJS
Score Kaltura.png (191×763 px, 17 KB)
Score VideoJS.png (171×1 px, 17 KB)

Event Timeline

Please always provide a link where to see the problem. See https://www.mediawiki.org/wiki/How_to_report_a_bug - thanks.

Thanks. :) I assumed it happens on every Score page, but if you quickly copy and paste the link here that you have opened anyway, then someone else does not need to spend time to manually find a Score page. :)

TheDJ subscribed.

Yes this is expected. The old player was always in block mode, while the newer player allows inline positioning (just like normal images do). That might require Score+TMH to have an additional CSS line to force it to the next line. Not sure if this should be in Score or in TMH...

I think it has better place in Score, but it would require TMH to have a consistent outer element. Currently the Kaltura player’s outer element is

<div class="mediaContainer" style="width:300px">

(which is present without JavaScript as well); VideoJS’ outer element is

<div class="video-js mwe_player_0-dimensions vjs-controls-enabled vjs-audio vjs-workinghover vjs-v7 vjs-has-started vjs-user-inactive vjs-waiting vjs-paused vjs-ended" data-durationhint="32.253968253968" data-disablecontrols="options,timedText" preload="metadata" id="mwe_player_0" tabindex="-1" role="region" aria-label="Audio Player" lang="hu">

but the JavaScript-less HTML source contains only an <audio> element. Wrapping the VideoJS HTML (JavaScript-less) output in

<div class="mediaContainer">

(with display:inline-block) can help Score to style it appropriately.

Change 628246 had a related patch set uploaded (by Tim Starling; owner: Tim Starling):
[mediawiki/extensions/Score@master] Drop TimedMediaHandler support

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

Change 628246 merged by jenkins-bot:
[mediawiki/extensions/Score@master] Drop TimedMediaHandler support

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

Because apparently no one closed it. cf8a4f2133cb fixed the issue.

Turns out cf8a4f2133cb has not fully fixed it (or it came back), see T295514: Score audio uses different players depending on whether the page has other embedded media.

Another weird thing is that the VideoJS player appears next to score on enwiki but below it on testwiki.

T295514 is not about the alignment, so this issue is (AFAIK) fully fixed.

See https://test.wikipedia.org/wiki/Score_and_media.

sc.png (405×574 px, 15 KB)

On testwiki <span class="mw-tmh-player audio"> is not wrapped in <div style="margin-top: 3px;"> for some reason. It doesn't happen on enwiki so I thought Score wasn't up-to-date on testwiki, but the Score version shown on Special:Version is identical to that on enwiki.

On testwiki <span class="mw-tmh-player audio"> is not wrapped in <div style="margin-top: 3px;"> for some reason. It doesn't happen on enwiki so I thought Score wasn't up-to-date on testwiki, but the Score version shown on Special:Version is identical to that on enwiki.

Its because of assumptions that ParserEnableLegacyMediaDOM=false (new style parser/parsoid output) makes. This new DOM structure is available on certain test wikis but not on most other wikis. It's completely broken, and you shouldn't compare results with it until someone finishes development of the new layout.

Specifically:

var enableLegacyMediaDOM = require( './config.json' ).ParserEnableLegacyMediaDOM;
if ( enableLegacyMediaDOM ) {
        $videoplayer.replaceWith( $placeholder );
} else {
        // Replace the span linkWrap gave us
        $videoplayer.parent().replaceWith( $placeholder );
}

Here it makes assumptions about the parent of the player being initialized, which are dangerous when score inserts them in a different format.