jenkins-bot has submitted this change and it was merged. Change subject: Handle image loading rejections ......................................................................
Handle image loading rejections Displays the rejection error message when loading something fails, so that the user knows what's going on and can send meaningful error reports. Needs non-crappy design. Change-Id: I7d2914d89549b598bd1070ed40c6f1c9d45b55f0 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/271 --- M MultimediaViewer.i18n.php M MultimediaViewer.php M resources/mmv/mmv.js A resources/mmv/ui/img/error.svg M resources/mmv/ui/mmv.ui.canvas.js M resources/mmv/ui/mmv.ui.canvas.less M resources/mmv/ui/mmv.ui.metadataPanel.js 7 files changed, 98 insertions(+), 4 deletions(-) Approvals: Siebrand: Looks good to me, but someone else must approve Gergő Tisza: Looks good to me, approved jenkins-bot: Verified diff --git a/MultimediaViewer.i18n.php b/MultimediaViewer.i18n.php index 4a08f29..a5aa051 100644 --- a/MultimediaViewer.i18n.php +++ b/MultimediaViewer.i18n.php @@ -37,6 +37,8 @@ 'multimediaviewer-datetime-uploaded' => 'Uploaded on $1', 'multimediaviewer-userpage-link' => '{{GENDER:$2|Uploaded}} by $1', 'multimediaviewer-credit' => '$1 - $2', + 'multimediaviewer-metadata-error' => 'Error: Could not load image data. $1', + 'multimediaviewer-thumbnail-error' => 'Error: Could not load thumbnail data. $1', // Licenses 'multimediaviewer-license-cc-by-1.0' => 'CC BY 1.0', @@ -150,6 +152,8 @@ Neither parameters are usernames, so GENDER is useless. Both come directly from the API, the extended metadata imageinfo prop in particular. They will usually be derived from the HTML output from wikitext on a file description page - however, no complicated HTML, only links, will be allowed.', + 'multimediaviewer-metadata-error' => 'Text shown when the information on the metadata panel could not be loaded. $1 is the error message (not localized).', + 'multimediaviewer-thumbnail-error' => 'Text shown when the image could not be loaded. $1 is the error message (not localized).', 'multimediaviewer-license-cc-by-1.0' => 'Very short label for the Creative Commons Attribution license, version 1.0, used in a link to the file information page that has more licensing information. {{Identical|CC BY}}', 'multimediaviewer-license-cc-sa-1.0' => 'Very short label for the Creative Commons ShareAlike license, version 1.0, used in a link to the file information page that has more licensing information.', diff --git a/MultimediaViewer.php b/MultimediaViewer.php index 1d76e19..bf64701 100644 --- a/MultimediaViewer.php +++ b/MultimediaViewer.php @@ -231,6 +231,10 @@ 'mmv.ui.canvas.less', ), + 'messages' => array( + 'multimediaviewer-thumbnail-error', + ), + 'dependencies' => array( 'mmv.ui', 'mmv.ThumbnailWidthCalculator', @@ -360,6 +364,8 @@ 'multimediaviewer-about-mmv', 'multimediaviewer-discuss-mmv', + + 'multimediaviewer-metadata-error', ), ), $moduleInfo( 'mmv/ui' ) ); diff --git a/resources/mmv/mmv.js b/resources/mmv/mmv.js index 649e4ff..4932569 100755 --- a/resources/mmv/mmv.js +++ b/resources/mmv/mmv.js @@ -157,6 +157,8 @@ fileTitle, imageWidths.real ).then( function( thumbnail, image ) { viewer.setImage( ui, thumbnail, image, imageWidths ); + }, function ( error ) { + viewer.ui.canvas.showError( error ); } ); } @@ -261,6 +263,8 @@ } viewer.displayRealThumbnail( thumbnail, imageElement, imageWidths, $.now() - start ); + } ).fail( function ( error ) { + viewer.ui.canvas.showError( error ); } ); this.imageInfoProvider.get( image.filePageTitle ).done( function ( imageInfo ) { @@ -278,8 +282,13 @@ return; } - viewer.ui.panel.setImageInfo(image, imageInfo, repoInfo, - localUsage, globalUsage, userInfo ); + viewer.ui.panel.setImageInfo( image, imageInfo, repoInfo, localUsage, globalUsage, userInfo ); + } ).fail( function ( error ) { + if ( viewer.currentIndex !== image.index ) { + return; + } + + viewer.ui.panel.showError( error ); } ); $.when( imagePromise, metadataPromise ).then( function() { diff --git a/resources/mmv/ui/img/error.svg b/resources/mmv/ui/img/error.svg new file mode 100644 index 0000000..ccd7efe --- /dev/null +++ b/resources/mmv/ui/img/error.svg @@ -0,0 +1,32 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/"; + xmlns:cc="http://creativecommons.org/ns#"; + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"; + xmlns:svg="http://www.w3.org/2000/svg"; + xmlns="http://www.w3.org/2000/svg"; + version="1.1" + width="22.86124" + height="22.83745" + id="svg2"> + <defs + id="defs4" /> + <metadata + id="metadata7"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage"; /> + <dc:title></dc:title> + </cc:Work> + </rdf:RDF> + </metadata> + <path + d="M 19.649385,5.0026555e-4 C 19.552285,0.00551027 19.446485,0.04710027 19.368135,0.12549977 L 11.336883,8.1254979 3.4931325,0.28174747 c -0.1567,-0.1566899 -0.390229,-0.1722696 -0.53125,-0.0312 L 0.27438252,2.9380477 c -0.14103,0.14103 -0.125449,0.3745605 0.0312,0.5312505 L 8.1493325,11.313049 0.12795552,19.334426 c -0.1567,0.1567 -0.17228,0.42148 -0.0312,0.562499 l 2.68749998,2.65625 c 0.141021,0.141031 0.374551,0.125451 0.531251,-0.0312 l 8.0213775,-8.021377 8.208895,8.208896 c 0.15669,0.1567 0.39022,0.17228 0.53125,0.0312 l 2.6875,-2.6875 c 0.14102,-0.14102 0.12544,-0.37455 -0.0312,-0.53125 l -8.208895,-8.208896 8.031249,-8.0312499 c 0.15669,-0.1566899 0.17227,-0.3902197 0.0312,-0.53125 L 19.899381,0.09430007 c -0.0705,-0.070499 -0.152868,-0.098902 -0.250001,-0.0937000044 z" + id="rect3107-3-4-1-1-0-9-5-7" + style="fill:#ff0000;fill-opacity:1;stroke:none" /> +</svg> diff --git a/resources/mmv/ui/mmv.ui.canvas.js b/resources/mmv/ui/mmv.ui.canvas.js index 0437475..be186c3 100644 --- a/resources/mmv/ui/mmv.ui.canvas.js +++ b/resources/mmv/ui/mmv.ui.canvas.js @@ -82,7 +82,7 @@ * Clears everything. */ C.empty = function() { - this.$imageDiv.addClass( 'empty' ); + this.$imageDiv.addClass( 'empty' ).removeClass( 'error' ); this.$imageDiv.empty(); }; @@ -266,6 +266,20 @@ }; /** + * Displays a message and error icon when loading the image fails. + * @param {string} error error message + */ + C.showError = function ( error ) { + this.$imageDiv.empty() + .addClass( 'error' ) + .append( + $( '<div>' ).addClass( 'mlb-error-text' ).text( + mw.message( 'multimediaviewer-thumbnail-error', error ).text() + ) + ); + }; + + /** * Gets the widths for a given lightbox image. * @param {mw.mmv.LightboxImage} image * @returns {mw.mmv.model.ThumbnailWidth} diff --git a/resources/mmv/ui/mmv.ui.canvas.less b/resources/mmv/ui/mmv.ui.canvas.less index a0c2993..c52f8b2 100644 --- a/resources/mmv/ui/mmv.ui.canvas.less +++ b/resources/mmv/ui/mmv.ui.canvas.less @@ -6,9 +6,29 @@ height: 100%; vertical-align: middle; .unselectable; + &.empty { display: none; } + &.error { + /* @embed */ + background-image: url(img/error.svg); + background-repeat: no-repeat; + background-position: 50% 50%; + } + .mlb-error-text { + position: absolute; + left: 10%; + right: 10%; + top: 20%; + + padding: 6px 20px; + .box-round(15px); + background-color: #ff4f4d; + text-align: center; + font-size: normal; + color: #000; + } } .mlb-image.empty img { diff --git a/resources/mmv/ui/mmv.ui.metadataPanel.js b/resources/mmv/ui/mmv.ui.metadataPanel.js index e477c89..511b625 100644 --- a/resources/mmv/ui/mmv.ui.metadataPanel.js +++ b/resources/mmv/ui/mmv.ui.metadataPanel.js @@ -79,7 +79,7 @@ this.fileUsage.empty(); this.permission.empty(); - this.$title.empty(); + this.$title.empty().removeClass( 'error' ); this.$credit.empty().addClass( 'empty' ); this.$username.empty(); @@ -681,6 +681,15 @@ }; /** + * Show an error message, in case the data could not be loaded + * @param {string} error + */ + MPP.showError = function ( error ) { + this.$title.addClass( 'error' ) + .text( mw.message( 'multimediaviewer-metadata-error', error ).text() ); + }; + + /** * Transforms a date string into localized, human-readable format. * Unrecognized strings are returned unchanged. * @param {string} dateString -- To view, visit https://gerrit.wikimedia.org/r/116629 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: I7d2914d89549b598bd1070ed40c6f1c9d45b55f0 Gerrit-PatchSet: 8 Gerrit-Project: mediawiki/extensions/MultimediaViewer Gerrit-Branch: master Gerrit-Owner: Gergő Tisza <[email protected]> Gerrit-Reviewer: Aarcos <[email protected]> Gerrit-Reviewer: Gergő Tisza <[email protected]> Gerrit-Reviewer: Gilles <[email protected]> Gerrit-Reviewer: Siebrand <[email protected]> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
