Display thumbnail placeholder ASAP

- Exposes file width and height through data attributes
- If the attributes are present, display the placeholder immediately

Change-Id: I3dfa80b02073984dc2d3d7784cb3744b7e4e2cc8
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/293

MultimediaViewer.php

@@ -691,6 +691,7 @@ call_user_func( function() {
 	$wgHooks['ResourceLoaderGetConfigVars'][] = 'MultimediaViewerHooks::resourceLoaderGetConfigVars';
 	$wgHooks['MakeGlobalVariablesScript'][] = 'MultimediaViewerHooks::makeGlobalVariablesScript';
 	$wgHooks['ResourceLoaderTestModules'][] = 'MultimediaViewerHooks::getTestModules';
+	$wgHooks['ThumbnailBeforeProduceHTML'][] = 'MultimediaViewerHooks::thumbnailBeforeProduceHTML';
 
 	$section = 'other';
 

MultimediaViewerHooks.php

@@ -220,4 +220,30 @@ class MultimediaViewerHooks {
 
 		return true;
 	}
+
+	/**
+	 * Modify thumbnail DOM
+	 * @param ThumbnailImage $thumbnail
+	 * @param array $attribs Attributes of the <img> element
+	 * @param array $linkAttribs Attributes of the wrapping <a> element
+	 */
+	public static function thumbnailBeforeProduceHTML( ThumbnailImage $thumbnail, array &$attribs, array &$linkAttribs ) {
+		$file = $thumbnail->getFile();
+
+		if ( $file ) {
+			// At the moment all classes that extend File have getWidth() and getHeight()
+			// but since the File class doesn't have these methods defined, this check
+			// is more future-proof
+
+			if ( method_exists( $file, 'getWidth' ) ) {
+				$attribs['data-file-width'] = $file->getWidth();
+			}
+
+			if ( method_exists( $file, 'getHeight' ) ) {
+				$attribs['data-file-height'] = $file->getHeight();
+			}
+		}
+
+		return true;
+	}
 }

resources/mmv/mmv.js

@@ -195,11 +195,13 @@
 	 */
 	MMVP.loadImage = function ( image, initialImage ) {
 		var imageWidths,
-			viewer = this,
 			imagePromise,
 			metadataPromise,
 			start,
-			$initialImage = $( initialImage );
+			viewer = this,
+			$initialImage = $( initialImage ),
+			fileWidth = parseInt( $initialImage.data( 'file-width' ), 10 ),
+			fileHeight = parseInt( $initialImage.data( 'file-height' ), 10 );
 
 		this.currentIndex = image.index;
 
@@ -246,6 +248,20 @@
 			viewer.ui.panel.percent( 5 );
 		}
 
+		if ( fileWidth > 0 && fileHeight > 0 ) {
+			viewer.displayPlaceholderThumbnail( { width : fileWidth , height : fileHeight },
+				$initialImage,
+				imageWidths );
+		} else {
+			this.imageInfoProvider.get( image.filePageTitle ).done( function ( imageInfo ) {
+				if ( viewer.currentIndex !== image.index ) {
+					return;
+				}
+
+				viewer.displayPlaceholderThumbnail( imageInfo, $initialImage, imageWidths );
+			} );
+		}
+
 		imagePromise.progress( function ( thumbnailInfoResponse, imageResponse ) {
 			if ( viewer.currentIndex !== image.index ) {
 				return;
@@ -267,14 +283,6 @@
 			viewer.ui.canvas.showError( error );
 		} );
 
-		this.imageInfoProvider.get( image.filePageTitle ).done( function ( imageInfo ) {
-			if ( viewer.currentIndex !== image.index ) {
-				return;
-			}
-
-			viewer.displayPlaceholderThumbnail( imageInfo, $initialImage, imageWidths );
-		} );
-
 		metadataPromise = this.fetchSizeIndependentLightboxInfo(
 			image.filePageTitle
 		).done( function ( imageInfo, repoInfo, localUsage, globalUsage, userInfo ) {