Notify user and close MMV if image from route not present on page

Fixes: only a black screen without any controls or messages is shown

Bug: T77327
Bug: T336619
Change-Id: I53687fce2c767ff6681707da424b974ecf51675a

extension.json

@@ -124,6 +124,7 @@
 				"multimediaviewer-enable-submit-button",
 				"multimediaviewer-enable-confirmation-header",
 				"multimediaviewer-enable-confirmation-text",
+				"multimediaviewer-file-not-found-error",
 				"multimediaviewer-thumbnail-error",
 				"multimediaviewer-thumbnail-error-description",
 				"multimediaviewer-thumbnail-error-retry",

i18n/en.json

@@ -15,6 +15,7 @@
 	"multimediaviewer-multiple-authors": "{{PLURAL:$1|one more author|$1 more authors}}",
 	"multimediaviewer-multiple-authors-combine": "$1 and $2",
 	"multimediaviewer-metadata-error": "Could not load image details (error: $1)",
+	"multimediaviewer-file-not-found-error": "Sorry, the file $1 cannot be displayed since it is not present on the current page.",
 	"multimediaviewer-thumbnail-error": "Sorry, the file cannot be displayed",
 	"multimediaviewer-thumbnail-error-description": "There seems to be a technical issue. You can $1 if it persists. Error: $2",
 	"multimediaviewer-thumbnail-error-retry": "retry",

i18n/qqq.json

@@ -28,6 +28,7 @@
 	"multimediaviewer-multiple-authors": "Text shown after the author name when there are multiple authors. The text will link to the file description page.\n* $1 - number of additional authors.",
 	"multimediaviewer-multiple-authors-combine": "Combines the author name and the message about other authors.\n* $1 - author name, parsed from the file page\n* $2 - {{msg-mw|multimediaviewer-multiple-authors}} wrapped in a link.\n{{Identical|And}}",
 	"multimediaviewer-metadata-error": "Text shown when the information on the metadata panel could not be loaded. Parameters:\n* $1 - the error message (not localized)\nSee also:\n* {{msg-mw|multimediaviewer-thumbnail-error}}",
+	"multimediaviewer-file-not-found-error": "Text shown when the image could not be found on current page.",
 	"multimediaviewer-thumbnail-error": "Text shown when the image could not be loaded. Followed by {{msg-mw|multimediaviewer-thumbnail-error-description}}.\nSee also:\n* {{msg-mw|multimediaviewer-thumbnail-error-description}}\n* {{msg-mw|multimediaviewer-metadata-error}}",
 	"multimediaviewer-thumbnail-error-description": "Text shown when the image could not be loaded. Follows {{msg-mw|multimediaviewer-thumbnail-error}}. Parameters:\n* $1 - \"retry\" link (see {{msg-mw|multimediaviewer-thumbnail-error-retry}})\n* $2 - the error message (not localized)\nSee also:\n* {{msg-mw|multimediaviewer-thumbnail-error}}",
 	"multimediaviewer-thumbnail-error-retry": "Used as a part of {{msg-mw|multimediaviewer-thumbnail-error-description}} (as a link text).\n{{Identical|Retry}}",

resources/mmv/mmv.js

@@ -414,20 +414,33 @@ const ThumbnailWidthCalculator = require( './mmv.ThumbnailWidthCalculator.js' );
 		 * @param {mw.Title} title
 		 */
 		loadImageByTitle( title ) {
-			let i;
-			let thumb;
-
 			if ( !this.thumbs || !this.thumbs.length ) {
 				return;
 			}
 
-			for ( i = 0; i < this.thumbs.length; i++ ) {
+			const thumb = this.thumbs.find( ( t ) => t.title.getPrefixedText() === title.getPrefixedText() );
-				thumb = this.thumbs[ i ];
+
-				if ( thumb.title.getPrefixedText() === title.getPrefixedText() ) {
+			if ( !thumb ) {
-					this.loadImage( thumb.image, thumb.$thumb.clone()[ 0 ] );
+				this.onTitleNotFound( title );
-					return;
+				return;
-				}
 			}
+
+			this.loadImage( thumb.image, thumb.$thumb.clone()[ 0 ] );
+		}
+
+		/**
+		 * When the image to load is not present on the current page,
+		 * a notification is shown to the user and the MMV is closed.
+		 *
+		 * @param {mw.Title} title
+		 * @private
+		 */
+		onTitleNotFound( title ) {
+			this.close();
+			const text = mw.message( 'multimediaviewer-file-not-found-error', title.getMainText() ).text();
+			const $link = $( '<a>' ).text( mw.message( 'multimediaviewer-file-page' ).text() ).prop( 'href', title.getUrl() );
+			const $message = $( '<div>' ).text( text ).append( $( '<br>' ) ).append( $link );
+			mw.notify( $message );
 		}
 
 		/**