Animate the metadata div to show the user it's there

"Hey! Scroll down! Yeah, you!"

Also fixes the previous arrow button, which got disappeared at some point

Bug: 58431
Change-Id: I98676ee921dc1d3b5780046eabec7415c05f8f4f

resources/ext.multimediaViewer/ext.multimediaViewer.js

@@ -81,6 +81,13 @@
 		 */
 		this.lightbox = null;
 
+		/**
+		 * Whether we've fired an animation for the metadata div.
+		 * @property {boolean}
+		 * @private
+		 */
+		this.hasAnimatedMetadata = false;
+
 		var $thumbs = $( imgsSelector ),
 			urls = [],
 			viewer = this;
@@ -169,6 +176,8 @@
 			} else {
 				comingFromPopstate = false;
 			}
+
+			viewer.hasAnimatedMetadata = false;
 		} );
 
 		lightboxHooks.register( 'imageResize', function () {
@@ -686,6 +695,11 @@
 				targetWidth = size;
 
 			viewer.profileEnd( mdpid );
+			viewer.setImageInfo( image.filePageTitle, imageInfo );
+
+			if ( !viewer.hasAnimatedMetadata ) {
+				viewer.animateMetadataDiv();
+			}
 
 			imageEle.onload = function () {
 				if ( imageEle.width > targetWidth ) {
@@ -698,7 +712,6 @@
 				viewer.lightbox.iface.$imageDiv.removeClass( 'empty' );
 				viewer.updateControls();
 				$.removeSpinner( 'mw-mlb-loading-spinner' );
-				viewer.setImageInfo( image.filePageTitle, imageInfo );
 			};
 
 			imageEle.src = imageInfo.imageinfo[0].thumburl || imageInfo.imageinfo[0].url;
@@ -713,6 +726,18 @@
 		comingFromPopstate = false;
 	};
 
+	MMVP.animateMetadataDiv = function () {
+		$( document.body )
+			.animate( {
+				scrollTop: 40
+			}, 400 )
+			.animate( {
+				scrollTop: 0
+			}, 400 );
+
+		this.hasAnimatedMetadata = true;
+	};
+
 	/**
 	 * @method
 	 * Fetches image information from the API.

resources/ext.multimediaViewer/ext.multimediaViewer.lightboxinterface.js

@@ -192,10 +192,8 @@
 		// and we aren't sure why, but it's not really necessary
 		// with the new interface anyway - it's basically fullscreen
 		// already!
-		this.$closeButton.add(
-			this.$nextButton,
-			this.$prevButton
-		).appendTo( this.$imageWrapper );
+		this.$closeButton.add( this.$nextButton ).add( this.$prevButton )
+			.appendTo( this.$imageWrapper );
 	};
 
 	LIP.initializeImage = function () {