Page MenuHomePhabricator

Dynamically adjust size for broken media
Closed, ResolvedPublic

Description

This description is still a WIP, ignore it for now.


In T169975#4176954, we established that, since dimensions aren't applied to the wrapper (figure/span) and are instead on the media (img/video/audio/span), browsers won't respect them for certain elements (audio/span).

T133673 also points out that for <audio> there's another issue in that audio has no inherent height so with the default width, the 32px height placed on the element is arbitrary. It tries to account for that with a class mw-default-audio-height that clients can override. Nevermind the fact that browsers will just ignore the dimensions placed on the audio element to begin with and use whatever defaults they have for audio elements.

We end up with something like the following for audio,

<span class="mw-default-size mw-default-audio-height" typeof="mw:Audio"><span><audio ... height="32" width="220"> ... </audio></span></span>

Broken media are slightly different. If no dimensions are specified in wikitext,

<span class="mw-default-size" typeof="mw:Image"><span><span ...> ... </span></span></span>

However, thumbs are little trickier. They seem to ignore the default thumb size and choose 180 I11fc7fc955656eee2a78461b509c3fee555e8613

Unlike for audio, for spans, the sanitizer doesn't allow these dimension attributes (which'll just be ignored) and we end up using data- attributes instead.

Include some client side js like the following,

mw.loader.using( [ 'mediawiki.api' ], function() {

	var thumbLimits = mw.config.get( 'wgThumbLimits' );
	var defaultWidth = thumbLimits ? thumbLimits[0] : 180;

	document.querySelectorAll( '[typeof~="mw:Error"][typeof*="mw:Image"]' ).forEach( function( m ) {
		var isDefault = m.classList.contains( 'mw-default-size' );
		var span = m.firstChild.firstChild;
		var width = 
		var height = span.getAttribute( 'data-height' );
		if ( isDefault ) {
			span.style.width = defaultWidth + "px";
		} else {
			span.style.width = span.getAttribute( 'data-width' );
			span.style.height = span.getAttribute( 'data-height' );
		}
	});

} );

Event Timeline

Change 659442 had a related patch set uploaded (by Arlolra; owner: Arlolra):
[mediawiki/core@master] [WIP] Dynamically resize spans

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

@Arlolra can you help me understand the decision that needs to be made in this task?

Change 659442 merged by jenkins-bot:

[mediawiki/core@master] Dynamically resize broken media spans in thumbs

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

Change 959028 had a related patch set uploaded (by Arlolra; author: Arlolra):

[mediawiki/services/parsoid@master] Add magnify links on thumbs when not linking to file desc page

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

Change 959028 merged by jenkins-bot:

[mediawiki/services/parsoid@master] Add magnify links on thumbs when not linking to file desc page

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

Change 960644 had a related patch set uploaded (by Arlolra; author: Arlolra):

[mediawiki/vendor@master] Bump parsoid to 0.18.0-a25

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

Change 960644 merged by jenkins-bot:

[mediawiki/vendor@master] Bump parsoid to 0.18.0-a25

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

Change 961481 had a related patch set uploaded (by Arlolra; author: Arlolra):

[mediawiki/extensions/TimedMediaHandler@master] Use JS to transfer audio width from attribute to style

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