mediawiki-extensions-Multim.../resources/mmv/mmv.js

951 lines
30 KiB
JavaScript
Raw Normal View History

/*
* This file is part of the MediaWiki extension MultimediaViewer.
*
* MultimediaViewer is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 2 of the License, or
* (at your option) any later version.
*
* MultimediaViewer is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with MultimediaViewer. If not, see <http://www.gnu.org/licenses/>.
*/
( function ( mw, $ ) {
var MMVP,
comingFromHashChange = false;
/**
* Analyses the page, looks for image content and sets up the hooks
* to manage the viewing experience of such content.
* @class mw.mmv.MultimediaViewer
* @constructor
* @param {mw.Map} mwConfig mw.config
*/
function MultimediaViewer( mwConfig ) {
var apiCacheMaxAge = 86400; // one day (24 hours * 60 min * 60 sec)
var apiCacheFiveMinutes = 300; // 5 min * 60 sec
/**
* @property {mw.Map}
* @private
*/
this.mwConfig = mwConfig;
/**
* @property {mw.mmv.provider.Image}
* @private
*/
this.imageProvider = new mw.mmv.provider.Image( mw.config.get( 'wgMultimediaViewer' ).imageQueryParameter );
/**
* @property {mw.mmv.provider.ImageInfo}
* @private
*/
this.imageInfoProvider = new mw.mmv.provider.ImageInfo( new mw.mmv.logging.Api( 'imageinfo' ), {
language: this.mwConfig.get( 'wgUserLanguage', false ) || this.mwConfig.get( 'wgContentLanguage', 'en' ),
maxage: apiCacheFiveMinutes
});
/**
* @property {mw.mmv.provider.FileRepoInfo}
* @private
*/
this.fileRepoInfoProvider = new mw.mmv.provider.FileRepoInfo( new mw.mmv.logging.Api( 'filerepoinfo' ),
{ maxage: apiCacheMaxAge } );
/**
* @property {mw.mmv.provider.ThumbnailInfo}
* @private
*/
this.thumbnailInfoProvider = new mw.mmv.provider.ThumbnailInfo( new mw.mmv.logging.Api( 'thumbnailinfo' ),
{ maxage: apiCacheMaxAge } );
/**
* @property {mw.mmv.provider.ThumbnailInfo}
* @private
*/
this.guessedThumbnailInfoProvider = new mw.mmv.provider.GuessedThumbnailInfo();
/**
* Image index on page.
* @property {number}
*/
this.currentIndex = 0;
/**
* @property {mw.mmv.routing.Router} router -
*/
this.router = new mw.mmv.routing.Router();
/**
* UI object used to display the pictures in the page.
* @property {mw.mmv.LightboxInterface}
* @private
*/
this.ui = new mw.mmv.LightboxInterface();
/**
* How many sharp images have been displayed in Media Viewer since the pageload
* @property {number}
*/
this.imageDisplayedCount = 0;
/**
* How many data-filled metadata panels have been displayed in Media Viewer since the pageload
* @property {number}
*/
this.metadataDisplayedCount = 0;
/** @property {string} documentTitle base document title, MediaViewer will expand this */
this.documentTitle = document.title;
/**
* @property {mw.mmv.logging.ViewLogger} view -
*/
this.viewLogger = new mw.mmv.logging.ViewLogger( this.mwConfig, window, mw.mmv.actionLogger );
}
MMVP = MultimediaViewer.prototype;
/**
* Initialize the lightbox interface given an array of thumbnail
* objects.
* @param {Object[]} thumbs Complex structure...TODO, document this better.
*/
MMVP.initWithThumbs = function ( thumbs ) {
var i, thumb;
this.thumbs = thumbs;
for ( i = 0; i < this.thumbs.length; i++ ) {
thumb = this.thumbs[ i ];
// Create a LightboxImage object for each legit image
thumb.image = this.createNewImage(
thumb.$thumb.prop( 'src' ),
thumb.link,
thumb.title,
i,
thumb.thumb,
thumb.caption,
thumb.alt
);
thumb.extraStatsDeferred = $.Deferred();
}
};
/**
* Create an image object for the lightbox to use.
* @protected
* @param {string} fileLink Link to the file - generally a thumb URL
* @param {string} filePageLink Link to the File: page
* @param {mw.Title} fileTitle Represents the File: page
* @param {number} index Which number file this is
* @param {HTMLImageElement} thumb The thumbnail that represents this image on the page
* @param {string} [caption] The caption, if any.
* @param {string} [alt] The alt text of the image
* @returns {mw.mmv.LightboxImage}
*/
MMVP.createNewImage = function ( fileLink, filePageLink, fileTitle, index, thumb, caption, alt ) {
var thisImage = new mw.mmv.LightboxImage( fileLink, filePageLink, fileTitle, index, thumb, caption, alt ),
$thumb = $( thumb );
thisImage.filePageLink = filePageLink;
thisImage.filePageTitle = fileTitle;
thisImage.index = index;
thisImage.thumbnail = thumb;
thisImage.originalWidth = parseInt( $thumb.data( 'file-width' ), 10 );
thisImage.originalHeight = parseInt( $thumb.data( 'file-height' ), 10 );
return thisImage;
};
/**
* Handles resize events in viewer.
* @protected
* @param {mw.mmv.LightboxInterface} ui lightbox that got resized
*/
MMVP.resize = function ( ui ) {
var imageWidths, canvasDimensions,
viewer = this,
image = this.thumbs[ this.currentIndex ].image;
this.preloadThumbnails();
if ( image ) {
imageWidths = ui.canvas.getCurrentImageWidths();
canvasDimensions = ui.canvas.getDimensions();
mw.mmv.dimensionLogger.logDimensions( imageWidths, canvasDimensions, 'resize' );
this.fetchThumbnailForLightboxImage(
image, imageWidths.real
).then( function ( thumbnail, image ) {
viewer.setImage( ui, thumbnail, image, imageWidths );
}, function ( error ) {
viewer.ui.canvas.showError( error );
} );
}
this.updateControls();
};
/**
* Updates positioning of controls, usually after a resize event.
*/
MMVP.updateControls = function () {
var numImages = this.thumbs ? this.thumbs.length : 0,
showNextButton = this.currentIndex < ( numImages - 1 ),
showPreviousButton = this.currentIndex > 0;
this.ui.updateControls( showNextButton, showPreviousButton );
};
/**
* Loads and sets the specified image. It also updates the controls.
* @param {mw.mmv.LightboxInterface} ui image container
* @param {mw.mmv.model.Thumbnail} thumbnail thumbnail information
Refactor progressbar & blur handling This tries to fix a number of related issues: * the blurred thumbnail was visible for a split-second sometimes when switching back to an already-loaded image. (Presumably when JS was sluggish enough to take more than 10 ms to execute.) We now check whether the promise is pending before showing a placeholder. (More generally, a lot of unnecessary logic was executed when paging through already loaded images, like displaying the placeholder, so this might make the UI a bit more responsive.) * the blur could get stuck sometimes - I have seen this a few times, but have never been able to reproduce it, so I'm only guessing, but maybe the timing was really unfortunate, and we switched back less than 10 ms before loading finished. We now remove the blur on every branch, just to be sure. * adding a progress handler to a promise might not have any immediate effect, so when switching to an image which was loading, the progress bar reacted too late. We now store the progress state per thumbnail so it is always available immediately. * the progress would animate from 0 to its actual state whenever we navigated to the image. The change on paging is now instant; the progress bar only animates when we are looking at it. * switching quickly back and forthe between a loaded and a loading image resulted in the loading image becoming unblurred. This seems fixed now, I'm not sure why. Maybe the "skip on non-pending promise" logic affects it somehow. Also removes some unused things / renames some things which were confusing, and makes an unrelated fix in the image provider, which kept amassing fail handlers. Change-Id: I580becff246f197ec1bc65e82acd422620e35578 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/489
2014-04-25 22:26:34 +00:00
* @param {HTMLImageElement} imageElement
* @param {mw.mmv.model.ThumbnailWidth} imageWidths
*/
Refactor progressbar & blur handling This tries to fix a number of related issues: * the blurred thumbnail was visible for a split-second sometimes when switching back to an already-loaded image. (Presumably when JS was sluggish enough to take more than 10 ms to execute.) We now check whether the promise is pending before showing a placeholder. (More generally, a lot of unnecessary logic was executed when paging through already loaded images, like displaying the placeholder, so this might make the UI a bit more responsive.) * the blur could get stuck sometimes - I have seen this a few times, but have never been able to reproduce it, so I'm only guessing, but maybe the timing was really unfortunate, and we switched back less than 10 ms before loading finished. We now remove the blur on every branch, just to be sure. * adding a progress handler to a promise might not have any immediate effect, so when switching to an image which was loading, the progress bar reacted too late. We now store the progress state per thumbnail so it is always available immediately. * the progress would animate from 0 to its actual state whenever we navigated to the image. The change on paging is now instant; the progress bar only animates when we are looking at it. * switching quickly back and forthe between a loaded and a loading image resulted in the loading image becoming unblurred. This seems fixed now, I'm not sure why. Maybe the "skip on non-pending promise" logic affects it somehow. Also removes some unused things / renames some things which were confusing, and makes an unrelated fix in the image provider, which kept amassing fail handlers. Change-Id: I580becff246f197ec1bc65e82acd422620e35578 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/489
2014-04-25 22:26:34 +00:00
MMVP.setImage = function ( ui, thumbnail, imageElement, imageWidths ) {
ui.canvas.setImageAndMaxDimensions( thumbnail, imageElement, imageWidths );
this.updateControls();
};
/**
* Loads a specified image.
* @param {mw.mmv.LightboxImage} image
* @param {HTMLImageElement} initialImage A thumbnail to use as placeholder while the image loads
*/
MMVP.loadImage = function ( image, initialImage ) {
var imageWidths,
canvasDimensions,
imagePromise,
metadataPromise,
start,
viewer = this,
$initialImage = $( initialImage ),
extraStatsDeferred = $.Deferred();
this.currentIndex = image.index;
this.currentImageFileTitle = image.filePageTitle;
if ( !this.isOpen ) {
this.ui.open();
this.isOpen = true;
} else {
this.ui.empty();
}
this.setHash();
// At this point we can't show the thumbnail because we don't
// know what size it should be. We still assign it to allow for
// size calculations in getCurrentImageWidths, which needs to know
// the aspect ratio
$initialImage.hide();
$initialImage.addClass( 'mw-mmv-placeholder-image' );
this.ui.canvas.set( image, $initialImage );
this.preloadImagesMetadata();
this.preloadThumbnails();
// this.preloadFullscreenThumbnail( image ); // disabled - #474
imageWidths = this.ui.canvas.getCurrentImageWidths();
canvasDimensions = this.ui.canvas.getDimensions();
start = $.now();
mw.mmv.dimensionLogger.logDimensions( imageWidths, canvasDimensions, 'show' );
imagePromise = this.fetchThumbnailForLightboxImage( image, imageWidths.real, extraStatsDeferred );
Refactor progressbar & blur handling This tries to fix a number of related issues: * the blurred thumbnail was visible for a split-second sometimes when switching back to an already-loaded image. (Presumably when JS was sluggish enough to take more than 10 ms to execute.) We now check whether the promise is pending before showing a placeholder. (More generally, a lot of unnecessary logic was executed when paging through already loaded images, like displaying the placeholder, so this might make the UI a bit more responsive.) * the blur could get stuck sometimes - I have seen this a few times, but have never been able to reproduce it, so I'm only guessing, but maybe the timing was really unfortunate, and we switched back less than 10 ms before loading finished. We now remove the blur on every branch, just to be sure. * adding a progress handler to a promise might not have any immediate effect, so when switching to an image which was loading, the progress bar reacted too late. We now store the progress state per thumbnail so it is always available immediately. * the progress would animate from 0 to its actual state whenever we navigated to the image. The change on paging is now instant; the progress bar only animates when we are looking at it. * switching quickly back and forthe between a loaded and a loading image resulted in the loading image becoming unblurred. This seems fixed now, I'm not sure why. Maybe the "skip on non-pending promise" logic affects it somehow. Also removes some unused things / renames some things which were confusing, and makes an unrelated fix in the image provider, which kept amassing fail handlers. Change-Id: I580becff246f197ec1bc65e82acd422620e35578 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/489
2014-04-25 22:26:34 +00:00
this.resetBlurredThumbnailStates();
if ( imagePromise.state() === 'pending' ) {
this.displayPlaceholderThumbnail( image, $initialImage, imageWidths );
}
Refactor progressbar & blur handling This tries to fix a number of related issues: * the blurred thumbnail was visible for a split-second sometimes when switching back to an already-loaded image. (Presumably when JS was sluggish enough to take more than 10 ms to execute.) We now check whether the promise is pending before showing a placeholder. (More generally, a lot of unnecessary logic was executed when paging through already loaded images, like displaying the placeholder, so this might make the UI a bit more responsive.) * the blur could get stuck sometimes - I have seen this a few times, but have never been able to reproduce it, so I'm only guessing, but maybe the timing was really unfortunate, and we switched back less than 10 ms before loading finished. We now remove the blur on every branch, just to be sure. * adding a progress handler to a promise might not have any immediate effect, so when switching to an image which was loading, the progress bar reacted too late. We now store the progress state per thumbnail so it is always available immediately. * the progress would animate from 0 to its actual state whenever we navigated to the image. The change on paging is now instant; the progress bar only animates when we are looking at it. * switching quickly back and forthe between a loaded and a loading image resulted in the loading image becoming unblurred. This seems fixed now, I'm not sure why. Maybe the "skip on non-pending promise" logic affects it somehow. Also removes some unused things / renames some things which were confusing, and makes an unrelated fix in the image provider, which kept amassing fail handlers. Change-Id: I580becff246f197ec1bc65e82acd422620e35578 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/489
2014-04-25 22:26:34 +00:00
this.setupProgressBar( image, imagePromise, imageWidths.real );
metadataPromise = this.fetchSizeIndependentLightboxInfo( image.filePageTitle );
imagePromise.done( function ( thumbnail, imageElement ) {
if ( viewer.currentIndex !== image.index ) {
return;
}
if ( viewer.imageDisplayedCount++ === 0 ) {
mw.mmv.durationLogger.stop( 'click-to-first-image' );
metadataPromise.done( function ( imageInfo ) {
if ( !imageInfo || !imageInfo.anonymizedUploadDateTime ) {
return;
}
mw.mmv.durationLogger.record( 'click-to-first-image', {
uploadTimestamp: imageInfo.anonymizedUploadDateTime
} );
} );
}
imageElement.className = 'mw-mmv-final-image';
imageElement.alt = image.alt;
viewer.displayRealThumbnail( thumbnail, imageElement, imageWidths, $.now() - start );
} ).fail( function ( error ) {
viewer.ui.canvas.showError( error );
} );
metadataPromise.done( function ( imageInfo, repoInfo ) {
extraStatsDeferred.resolve( { uploadTimestamp: imageInfo.anonymizedUploadDateTime } );
if ( viewer.currentIndex !== image.index ) {
return;
}
if ( viewer.metadataDisplayedCount++ === 0 ) {
mw.mmv.durationLogger.stop( 'click-to-first-metadata' ).record( 'click-to-first-metadata' );
}
viewer.ui.panel.setImageInfo( image, imageInfo, repoInfo );
// File reuse steals a bunch of information from the DOM, so do it last
viewer.ui.setFileReuseData( imageInfo, repoInfo, image.caption, image.alt );
} ).fail( function ( error ) {
extraStatsDeferred.reject();
if ( viewer.currentIndex !== image.index ) {
return;
}
// Set title to caption or file name if caption is not available;
// see setTitle() in mmv.ui.metadataPanel for extended caption fallback
viewer.ui.panel.showError( image.caption || image.filePageTitle.getNameText(), error );
} );
$.when( imagePromise, metadataPromise ).then( function () {
if ( viewer.currentIndex !== image.index ) {
return;
}
viewer.ui.panel.scroller.animateMetadataOnce();
viewer.preloadDependencies();
} );
this.comingFromHashChange = false;
};
/**
* Loads an image by its title
* @param {mw.Title} title
* @param {boolean} updateHash Viewer should update the location hash when true
*/
MMVP.loadImageByTitle = function ( title, updateHash ) {
var viewer = this;
if ( !this.thumbs || !this.thumbs.length ) {
return;
}
this.comingFromHashChange = !updateHash;
$.each( this.thumbs, function ( idx, thumb ) {
if ( thumb.title.getPrefixedText() === title.getPrefixedText() ) {
viewer.loadImage( thumb.image, thumb.$thumb.clone()[ 0 ], true );
return false;
}
} );
};
/**
Refactor progressbar & blur handling This tries to fix a number of related issues: * the blurred thumbnail was visible for a split-second sometimes when switching back to an already-loaded image. (Presumably when JS was sluggish enough to take more than 10 ms to execute.) We now check whether the promise is pending before showing a placeholder. (More generally, a lot of unnecessary logic was executed when paging through already loaded images, like displaying the placeholder, so this might make the UI a bit more responsive.) * the blur could get stuck sometimes - I have seen this a few times, but have never been able to reproduce it, so I'm only guessing, but maybe the timing was really unfortunate, and we switched back less than 10 ms before loading finished. We now remove the blur on every branch, just to be sure. * adding a progress handler to a promise might not have any immediate effect, so when switching to an image which was loading, the progress bar reacted too late. We now store the progress state per thumbnail so it is always available immediately. * the progress would animate from 0 to its actual state whenever we navigated to the image. The change on paging is now instant; the progress bar only animates when we are looking at it. * switching quickly back and forthe between a loaded and a loading image resulted in the loading image becoming unblurred. This seems fixed now, I'm not sure why. Maybe the "skip on non-pending promise" logic affects it somehow. Also removes some unused things / renames some things which were confusing, and makes an unrelated fix in the image provider, which kept amassing fail handlers. Change-Id: I580becff246f197ec1bc65e82acd422620e35578 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/489
2014-04-25 22:26:34 +00:00
* @private
* Image loading progress. Keyed by image (database) name + '|' + thumbnail width in pixels,
* value is undefined, 'blurred' or 'real' (meaning respectively that no thumbnail is shown
* yet / the thumbnail that existed on the page is shown, enlarged and blurred / the real,
* correct-size thumbnail is shown).
* @property {Object.<string, string>}
*/
MMVP.thumbnailStateCache = {};
/**
* Resets the cross-request states needed to handle the blurred thumbnail logic.
*/
MMVP.resetBlurredThumbnailStates = function () {
Refactor progressbar & blur handling This tries to fix a number of related issues: * the blurred thumbnail was visible for a split-second sometimes when switching back to an already-loaded image. (Presumably when JS was sluggish enough to take more than 10 ms to execute.) We now check whether the promise is pending before showing a placeholder. (More generally, a lot of unnecessary logic was executed when paging through already loaded images, like displaying the placeholder, so this might make the UI a bit more responsive.) * the blur could get stuck sometimes - I have seen this a few times, but have never been able to reproduce it, so I'm only guessing, but maybe the timing was really unfortunate, and we switched back less than 10 ms before loading finished. We now remove the blur on every branch, just to be sure. * adding a progress handler to a promise might not have any immediate effect, so when switching to an image which was loading, the progress bar reacted too late. We now store the progress state per thumbnail so it is always available immediately. * the progress would animate from 0 to its actual state whenever we navigated to the image. The change on paging is now instant; the progress bar only animates when we are looking at it. * switching quickly back and forthe between a loaded and a loading image resulted in the loading image becoming unblurred. This seems fixed now, I'm not sure why. Maybe the "skip on non-pending promise" logic affects it somehow. Also removes some unused things / renames some things which were confusing, and makes an unrelated fix in the image provider, which kept amassing fail handlers. Change-Id: I580becff246f197ec1bc65e82acd422620e35578 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/489
2014-04-25 22:26:34 +00:00
/**
* Stores whether the real image was loaded and displayed already.
* This is reset when paging, so it is not necessarily accurate.
* @property {boolean}
*/
this.realThumbnailShown = false;
Refactor progressbar & blur handling This tries to fix a number of related issues: * the blurred thumbnail was visible for a split-second sometimes when switching back to an already-loaded image. (Presumably when JS was sluggish enough to take more than 10 ms to execute.) We now check whether the promise is pending before showing a placeholder. (More generally, a lot of unnecessary logic was executed when paging through already loaded images, like displaying the placeholder, so this might make the UI a bit more responsive.) * the blur could get stuck sometimes - I have seen this a few times, but have never been able to reproduce it, so I'm only guessing, but maybe the timing was really unfortunate, and we switched back less than 10 ms before loading finished. We now remove the blur on every branch, just to be sure. * adding a progress handler to a promise might not have any immediate effect, so when switching to an image which was loading, the progress bar reacted too late. We now store the progress state per thumbnail so it is always available immediately. * the progress would animate from 0 to its actual state whenever we navigated to the image. The change on paging is now instant; the progress bar only animates when we are looking at it. * switching quickly back and forthe between a loaded and a loading image resulted in the loading image becoming unblurred. This seems fixed now, I'm not sure why. Maybe the "skip on non-pending promise" logic affects it somehow. Also removes some unused things / renames some things which were confusing, and makes an unrelated fix in the image provider, which kept amassing fail handlers. Change-Id: I580becff246f197ec1bc65e82acd422620e35578 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/489
2014-04-25 22:26:34 +00:00
/**
* Stores whether the a blurred placeholder is being displayed in place of the real image.
* When a placeholder is displayed, but it is not blurred, this is false.
* This is reset when paging, so it is not necessarily accurate.
* @property {boolean}
*/
this.blurredThumbnailShown = false;
};
/**
* Display the real, full-resolution, thumbnail that was fetched with fetchThumbnail
* @param {mw.mmv.model.Thumbnail} thumbnail
Refactor progressbar & blur handling This tries to fix a number of related issues: * the blurred thumbnail was visible for a split-second sometimes when switching back to an already-loaded image. (Presumably when JS was sluggish enough to take more than 10 ms to execute.) We now check whether the promise is pending before showing a placeholder. (More generally, a lot of unnecessary logic was executed when paging through already loaded images, like displaying the placeholder, so this might make the UI a bit more responsive.) * the blur could get stuck sometimes - I have seen this a few times, but have never been able to reproduce it, so I'm only guessing, but maybe the timing was really unfortunate, and we switched back less than 10 ms before loading finished. We now remove the blur on every branch, just to be sure. * adding a progress handler to a promise might not have any immediate effect, so when switching to an image which was loading, the progress bar reacted too late. We now store the progress state per thumbnail so it is always available immediately. * the progress would animate from 0 to its actual state whenever we navigated to the image. The change on paging is now instant; the progress bar only animates when we are looking at it. * switching quickly back and forthe between a loaded and a loading image resulted in the loading image becoming unblurred. This seems fixed now, I'm not sure why. Maybe the "skip on non-pending promise" logic affects it somehow. Also removes some unused things / renames some things which were confusing, and makes an unrelated fix in the image provider, which kept amassing fail handlers. Change-Id: I580becff246f197ec1bc65e82acd422620e35578 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/489
2014-04-25 22:26:34 +00:00
* @param {HTMLImageElement} imageElement
* @param {mw.mmv.model.ThumbnailWidth} imageWidths
* @param {number} loadTime Time it took to load the thumbnail
*/
Refactor progressbar & blur handling This tries to fix a number of related issues: * the blurred thumbnail was visible for a split-second sometimes when switching back to an already-loaded image. (Presumably when JS was sluggish enough to take more than 10 ms to execute.) We now check whether the promise is pending before showing a placeholder. (More generally, a lot of unnecessary logic was executed when paging through already loaded images, like displaying the placeholder, so this might make the UI a bit more responsive.) * the blur could get stuck sometimes - I have seen this a few times, but have never been able to reproduce it, so I'm only guessing, but maybe the timing was really unfortunate, and we switched back less than 10 ms before loading finished. We now remove the blur on every branch, just to be sure. * adding a progress handler to a promise might not have any immediate effect, so when switching to an image which was loading, the progress bar reacted too late. We now store the progress state per thumbnail so it is always available immediately. * the progress would animate from 0 to its actual state whenever we navigated to the image. The change on paging is now instant; the progress bar only animates when we are looking at it. * switching quickly back and forthe between a loaded and a loading image resulted in the loading image becoming unblurred. This seems fixed now, I'm not sure why. Maybe the "skip on non-pending promise" logic affects it somehow. Also removes some unused things / renames some things which were confusing, and makes an unrelated fix in the image provider, which kept amassing fail handlers. Change-Id: I580becff246f197ec1bc65e82acd422620e35578 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/489
2014-04-25 22:26:34 +00:00
MMVP.displayRealThumbnail = function ( thumbnail, imageElement, imageWidths, loadTime ) {
var viewer = this;
this.realThumbnailShown = true;
Refactor progressbar & blur handling This tries to fix a number of related issues: * the blurred thumbnail was visible for a split-second sometimes when switching back to an already-loaded image. (Presumably when JS was sluggish enough to take more than 10 ms to execute.) We now check whether the promise is pending before showing a placeholder. (More generally, a lot of unnecessary logic was executed when paging through already loaded images, like displaying the placeholder, so this might make the UI a bit more responsive.) * the blur could get stuck sometimes - I have seen this a few times, but have never been able to reproduce it, so I'm only guessing, but maybe the timing was really unfortunate, and we switched back less than 10 ms before loading finished. We now remove the blur on every branch, just to be sure. * adding a progress handler to a promise might not have any immediate effect, so when switching to an image which was loading, the progress bar reacted too late. We now store the progress state per thumbnail so it is always available immediately. * the progress would animate from 0 to its actual state whenever we navigated to the image. The change on paging is now instant; the progress bar only animates when we are looking at it. * switching quickly back and forthe between a loaded and a loading image resulted in the loading image becoming unblurred. This seems fixed now, I'm not sure why. Maybe the "skip on non-pending promise" logic affects it somehow. Also removes some unused things / renames some things which were confusing, and makes an unrelated fix in the image provider, which kept amassing fail handlers. Change-Id: I580becff246f197ec1bc65e82acd422620e35578 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/489
2014-04-25 22:26:34 +00:00
this.setImage( this.ui, thumbnail, imageElement, imageWidths );
Refactor progressbar & blur handling This tries to fix a number of related issues: * the blurred thumbnail was visible for a split-second sometimes when switching back to an already-loaded image. (Presumably when JS was sluggish enough to take more than 10 ms to execute.) We now check whether the promise is pending before showing a placeholder. (More generally, a lot of unnecessary logic was executed when paging through already loaded images, like displaying the placeholder, so this might make the UI a bit more responsive.) * the blur could get stuck sometimes - I have seen this a few times, but have never been able to reproduce it, so I'm only guessing, but maybe the timing was really unfortunate, and we switched back less than 10 ms before loading finished. We now remove the blur on every branch, just to be sure. * adding a progress handler to a promise might not have any immediate effect, so when switching to an image which was loading, the progress bar reacted too late. We now store the progress state per thumbnail so it is always available immediately. * the progress would animate from 0 to its actual state whenever we navigated to the image. The change on paging is now instant; the progress bar only animates when we are looking at it. * switching quickly back and forthe between a loaded and a loading image resulted in the loading image becoming unblurred. This seems fixed now, I'm not sure why. Maybe the "skip on non-pending promise" logic affects it somehow. Also removes some unused things / renames some things which were confusing, and makes an unrelated fix in the image provider, which kept amassing fail handlers. Change-Id: I580becff246f197ec1bc65e82acd422620e35578 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/489
2014-04-25 22:26:34 +00:00
// We only animate unblurWithAnimation if the image wasn't loaded from the cache
// A load in < 10ms is considered to be a browser cache hit
if ( this.blurredThumbnailShown && loadTime > 10 ) {
Refactor progressbar & blur handling This tries to fix a number of related issues: * the blurred thumbnail was visible for a split-second sometimes when switching back to an already-loaded image. (Presumably when JS was sluggish enough to take more than 10 ms to execute.) We now check whether the promise is pending before showing a placeholder. (More generally, a lot of unnecessary logic was executed when paging through already loaded images, like displaying the placeholder, so this might make the UI a bit more responsive.) * the blur could get stuck sometimes - I have seen this a few times, but have never been able to reproduce it, so I'm only guessing, but maybe the timing was really unfortunate, and we switched back less than 10 ms before loading finished. We now remove the blur on every branch, just to be sure. * adding a progress handler to a promise might not have any immediate effect, so when switching to an image which was loading, the progress bar reacted too late. We now store the progress state per thumbnail so it is always available immediately. * the progress would animate from 0 to its actual state whenever we navigated to the image. The change on paging is now instant; the progress bar only animates when we are looking at it. * switching quickly back and forthe between a loaded and a loading image resulted in the loading image becoming unblurred. This seems fixed now, I'm not sure why. Maybe the "skip on non-pending promise" logic affects it somehow. Also removes some unused things / renames some things which were confusing, and makes an unrelated fix in the image provider, which kept amassing fail handlers. Change-Id: I580becff246f197ec1bc65e82acd422620e35578 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/489
2014-04-25 22:26:34 +00:00
this.ui.canvas.unblurWithAnimation();
} else {
this.ui.canvas.unblur();
}
this.viewLogger.attach( thumbnail.url );
mw.mmv.actionLogger.log( 'image-view' ).then( function ( wasEventLogged ) {
viewer.viewLogger.setLastViewLogged( wasEventLogged );
} );
};
/**
* Display the blurred thumbnail from the page
* @param {mw.mmv.LightboxImage} image
* @param {jQuery} $initialImage The thumbnail from the page
* @param {mw.mmv.model.ThumbnailWidth} imageWidths
Refactor progressbar & blur handling This tries to fix a number of related issues: * the blurred thumbnail was visible for a split-second sometimes when switching back to an already-loaded image. (Presumably when JS was sluggish enough to take more than 10 ms to execute.) We now check whether the promise is pending before showing a placeholder. (More generally, a lot of unnecessary logic was executed when paging through already loaded images, like displaying the placeholder, so this might make the UI a bit more responsive.) * the blur could get stuck sometimes - I have seen this a few times, but have never been able to reproduce it, so I'm only guessing, but maybe the timing was really unfortunate, and we switched back less than 10 ms before loading finished. We now remove the blur on every branch, just to be sure. * adding a progress handler to a promise might not have any immediate effect, so when switching to an image which was loading, the progress bar reacted too late. We now store the progress state per thumbnail so it is always available immediately. * the progress would animate from 0 to its actual state whenever we navigated to the image. The change on paging is now instant; the progress bar only animates when we are looking at it. * switching quickly back and forthe between a loaded and a loading image resulted in the loading image becoming unblurred. This seems fixed now, I'm not sure why. Maybe the "skip on non-pending promise" logic affects it somehow. Also removes some unused things / renames some things which were confusing, and makes an unrelated fix in the image provider, which kept amassing fail handlers. Change-Id: I580becff246f197ec1bc65e82acd422620e35578 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/489
2014-04-25 22:26:34 +00:00
* @param {boolean} [recursion=false] for internal use, never set this when calling from outside
*/
MMVP.displayPlaceholderThumbnail = function ( image, $initialImage, imageWidths, recursion ) {
var viewer = this,
size = { width : image.originalWidth, height : image.originalHeight };
Refactor progressbar & blur handling This tries to fix a number of related issues: * the blurred thumbnail was visible for a split-second sometimes when switching back to an already-loaded image. (Presumably when JS was sluggish enough to take more than 10 ms to execute.) We now check whether the promise is pending before showing a placeholder. (More generally, a lot of unnecessary logic was executed when paging through already loaded images, like displaying the placeholder, so this might make the UI a bit more responsive.) * the blur could get stuck sometimes - I have seen this a few times, but have never been able to reproduce it, so I'm only guessing, but maybe the timing was really unfortunate, and we switched back less than 10 ms before loading finished. We now remove the blur on every branch, just to be sure. * adding a progress handler to a promise might not have any immediate effect, so when switching to an image which was loading, the progress bar reacted too late. We now store the progress state per thumbnail so it is always available immediately. * the progress would animate from 0 to its actual state whenever we navigated to the image. The change on paging is now instant; the progress bar only animates when we are looking at it. * switching quickly back and forthe between a loaded and a loading image resulted in the loading image becoming unblurred. This seems fixed now, I'm not sure why. Maybe the "skip on non-pending promise" logic affects it somehow. Also removes some unused things / renames some things which were confusing, and makes an unrelated fix in the image provider, which kept amassing fail handlers. Change-Id: I580becff246f197ec1bc65e82acd422620e35578 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/489
2014-04-25 22:26:34 +00:00
// If the actual image has already been displayed, there's no point showing the blurry one.
// This can happen if the API request to get the original image size needed to show the
// placeholder thumbnail takes longer then loading the actual thumbnail.
if ( this.realThumbnailShown ) {
return;
}
// Width/height of the original image are added to the HTML by MediaViewer via a PHP hook,
// and can be missing in exotic circumstances, e. g. when the extension has only been
// enabled recently and the HTML cache has not cleared yet. If that is the case, we need
// to fetch the size from the API first.
if ( !size.width || !size.height ) {
if ( recursion ) {
// this should not be possible, but an infinite recursion is nasty
// business, so we make a sanity check
throw 'MediaViewer internal error: displayPlaceholderThumbnail recursion';
}
this.imageInfoProvider.get( image.filePageTitle ).done( function ( imageInfo ) {
// Make sure the user has not navigated away while we were waiting for the size
if ( viewer.currentIndex === image.index ) {
image.originalWidth = imageInfo.width;
image.originalHeight = imageInfo.height;
viewer.displayPlaceholderThumbnail( image, $initialImage, imageWidths, true );
}
} );
} else {
this.blurredThumbnailShown = this.ui.canvas.maybeDisplayPlaceholder(
size, $initialImage, imageWidths );
}
};
Refactor progressbar & blur handling This tries to fix a number of related issues: * the blurred thumbnail was visible for a split-second sometimes when switching back to an already-loaded image. (Presumably when JS was sluggish enough to take more than 10 ms to execute.) We now check whether the promise is pending before showing a placeholder. (More generally, a lot of unnecessary logic was executed when paging through already loaded images, like displaying the placeholder, so this might make the UI a bit more responsive.) * the blur could get stuck sometimes - I have seen this a few times, but have never been able to reproduce it, so I'm only guessing, but maybe the timing was really unfortunate, and we switched back less than 10 ms before loading finished. We now remove the blur on every branch, just to be sure. * adding a progress handler to a promise might not have any immediate effect, so when switching to an image which was loading, the progress bar reacted too late. We now store the progress state per thumbnail so it is always available immediately. * the progress would animate from 0 to its actual state whenever we navigated to the image. The change on paging is now instant; the progress bar only animates when we are looking at it. * switching quickly back and forthe between a loaded and a loading image resulted in the loading image becoming unblurred. This seems fixed now, I'm not sure why. Maybe the "skip on non-pending promise" logic affects it somehow. Also removes some unused things / renames some things which were confusing, and makes an unrelated fix in the image provider, which kept amassing fail handlers. Change-Id: I580becff246f197ec1bc65e82acd422620e35578 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/489
2014-04-25 22:26:34 +00:00
/**
* @private
* Image loading progress. Keyed by image (database) name + '|' + thumbnail width in pixels,
* value is a number between 0-100.
* @property {Object.<string, number>}
*/
MMVP.progressCache = {};
/**
* Displays a progress bar for the image loading, if necessary, and sets up handling of
* all the related callbacks.
* @param {mw.mmv.LightboxImage} image
* @param {jQuery.Promise.<mw.mmv.model.Thumbnail, HTMLImageElement>} imagePromise
Refactor progressbar & blur handling This tries to fix a number of related issues: * the blurred thumbnail was visible for a split-second sometimes when switching back to an already-loaded image. (Presumably when JS was sluggish enough to take more than 10 ms to execute.) We now check whether the promise is pending before showing a placeholder. (More generally, a lot of unnecessary logic was executed when paging through already loaded images, like displaying the placeholder, so this might make the UI a bit more responsive.) * the blur could get stuck sometimes - I have seen this a few times, but have never been able to reproduce it, so I'm only guessing, but maybe the timing was really unfortunate, and we switched back less than 10 ms before loading finished. We now remove the blur on every branch, just to be sure. * adding a progress handler to a promise might not have any immediate effect, so when switching to an image which was loading, the progress bar reacted too late. We now store the progress state per thumbnail so it is always available immediately. * the progress would animate from 0 to its actual state whenever we navigated to the image. The change on paging is now instant; the progress bar only animates when we are looking at it. * switching quickly back and forthe between a loaded and a loading image resulted in the loading image becoming unblurred. This seems fixed now, I'm not sure why. Maybe the "skip on non-pending promise" logic affects it somehow. Also removes some unused things / renames some things which were confusing, and makes an unrelated fix in the image provider, which kept amassing fail handlers. Change-Id: I580becff246f197ec1bc65e82acd422620e35578 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/489
2014-04-25 22:26:34 +00:00
* @param {number} imageWidth needed for caching progress (FIXME)
*/
Refactor progressbar & blur handling This tries to fix a number of related issues: * the blurred thumbnail was visible for a split-second sometimes when switching back to an already-loaded image. (Presumably when JS was sluggish enough to take more than 10 ms to execute.) We now check whether the promise is pending before showing a placeholder. (More generally, a lot of unnecessary logic was executed when paging through already loaded images, like displaying the placeholder, so this might make the UI a bit more responsive.) * the blur could get stuck sometimes - I have seen this a few times, but have never been able to reproduce it, so I'm only guessing, but maybe the timing was really unfortunate, and we switched back less than 10 ms before loading finished. We now remove the blur on every branch, just to be sure. * adding a progress handler to a promise might not have any immediate effect, so when switching to an image which was loading, the progress bar reacted too late. We now store the progress state per thumbnail so it is always available immediately. * the progress would animate from 0 to its actual state whenever we navigated to the image. The change on paging is now instant; the progress bar only animates when we are looking at it. * switching quickly back and forthe between a loaded and a loading image resulted in the loading image becoming unblurred. This seems fixed now, I'm not sure why. Maybe the "skip on non-pending promise" logic affects it somehow. Also removes some unused things / renames some things which were confusing, and makes an unrelated fix in the image provider, which kept amassing fail handlers. Change-Id: I580becff246f197ec1bc65e82acd422620e35578 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/489
2014-04-25 22:26:34 +00:00
MMVP.setupProgressBar = function ( image, imagePromise, imageWidth ) {
var viewer = this,
progressBar = viewer.ui.panel.progressBar,
key = image.filePageTitle.getPrefixedDb() + '|' + imageWidth;
if ( imagePromise.state() !== 'pending' ) {
Refactor progressbar & blur handling This tries to fix a number of related issues: * the blurred thumbnail was visible for a split-second sometimes when switching back to an already-loaded image. (Presumably when JS was sluggish enough to take more than 10 ms to execute.) We now check whether the promise is pending before showing a placeholder. (More generally, a lot of unnecessary logic was executed when paging through already loaded images, like displaying the placeholder, so this might make the UI a bit more responsive.) * the blur could get stuck sometimes - I have seen this a few times, but have never been able to reproduce it, so I'm only guessing, but maybe the timing was really unfortunate, and we switched back less than 10 ms before loading finished. We now remove the blur on every branch, just to be sure. * adding a progress handler to a promise might not have any immediate effect, so when switching to an image which was loading, the progress bar reacted too late. We now store the progress state per thumbnail so it is always available immediately. * the progress would animate from 0 to its actual state whenever we navigated to the image. The change on paging is now instant; the progress bar only animates when we are looking at it. * switching quickly back and forthe between a loaded and a loading image resulted in the loading image becoming unblurred. This seems fixed now, I'm not sure why. Maybe the "skip on non-pending promise" logic affects it somehow. Also removes some unused things / renames some things which were confusing, and makes an unrelated fix in the image provider, which kept amassing fail handlers. Change-Id: I580becff246f197ec1bc65e82acd422620e35578 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/489
2014-04-25 22:26:34 +00:00
// image has already loaded (or failed to load) - do not show the progress bar
progressBar.hide();
return;
}
Refactor progressbar & blur handling This tries to fix a number of related issues: * the blurred thumbnail was visible for a split-second sometimes when switching back to an already-loaded image. (Presumably when JS was sluggish enough to take more than 10 ms to execute.) We now check whether the promise is pending before showing a placeholder. (More generally, a lot of unnecessary logic was executed when paging through already loaded images, like displaying the placeholder, so this might make the UI a bit more responsive.) * the blur could get stuck sometimes - I have seen this a few times, but have never been able to reproduce it, so I'm only guessing, but maybe the timing was really unfortunate, and we switched back less than 10 ms before loading finished. We now remove the blur on every branch, just to be sure. * adding a progress handler to a promise might not have any immediate effect, so when switching to an image which was loading, the progress bar reacted too late. We now store the progress state per thumbnail so it is always available immediately. * the progress would animate from 0 to its actual state whenever we navigated to the image. The change on paging is now instant; the progress bar only animates when we are looking at it. * switching quickly back and forthe between a loaded and a loading image resulted in the loading image becoming unblurred. This seems fixed now, I'm not sure why. Maybe the "skip on non-pending promise" logic affects it somehow. Also removes some unused things / renames some things which were confusing, and makes an unrelated fix in the image provider, which kept amassing fail handlers. Change-Id: I580becff246f197ec1bc65e82acd422620e35578 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/489
2014-04-25 22:26:34 +00:00
if ( !this.progressCache[key] ) {
// Animate progress bar to 5 to give a sense that something is happening, and make sure
// the progress bar is noticeable, even if we're sitting at 0% stuck waiting for
// server-side processing, such as thumbnail (re)generation
progressBar.jumpTo( 0 );
progressBar.animateTo( 5 );
viewer.progressCache[key] = 5;
} else {
progressBar.jumpTo( this.progressCache[key] );
}
Refactor progressbar & blur handling This tries to fix a number of related issues: * the blurred thumbnail was visible for a split-second sometimes when switching back to an already-loaded image. (Presumably when JS was sluggish enough to take more than 10 ms to execute.) We now check whether the promise is pending before showing a placeholder. (More generally, a lot of unnecessary logic was executed when paging through already loaded images, like displaying the placeholder, so this might make the UI a bit more responsive.) * the blur could get stuck sometimes - I have seen this a few times, but have never been able to reproduce it, so I'm only guessing, but maybe the timing was really unfortunate, and we switched back less than 10 ms before loading finished. We now remove the blur on every branch, just to be sure. * adding a progress handler to a promise might not have any immediate effect, so when switching to an image which was loading, the progress bar reacted too late. We now store the progress state per thumbnail so it is always available immediately. * the progress would animate from 0 to its actual state whenever we navigated to the image. The change on paging is now instant; the progress bar only animates when we are looking at it. * switching quickly back and forthe between a loaded and a loading image resulted in the loading image becoming unblurred. This seems fixed now, I'm not sure why. Maybe the "skip on non-pending promise" logic affects it somehow. Also removes some unused things / renames some things which were confusing, and makes an unrelated fix in the image provider, which kept amassing fail handlers. Change-Id: I580becff246f197ec1bc65e82acd422620e35578 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/489
2014-04-25 22:26:34 +00:00
// FIXME would be nice to have a "filtered" promise which does not fire when the image is not visible
imagePromise.progress( function ( progress ) {
// We pretend progress is always at least 5%, so progress events below 5% should be ignored
// 100 will be handled by the done handler, do not mix two animations
if ( progress < 5 || progress === 100 ) {
return;
}
Refactor progressbar & blur handling This tries to fix a number of related issues: * the blurred thumbnail was visible for a split-second sometimes when switching back to an already-loaded image. (Presumably when JS was sluggish enough to take more than 10 ms to execute.) We now check whether the promise is pending before showing a placeholder. (More generally, a lot of unnecessary logic was executed when paging through already loaded images, like displaying the placeholder, so this might make the UI a bit more responsive.) * the blur could get stuck sometimes - I have seen this a few times, but have never been able to reproduce it, so I'm only guessing, but maybe the timing was really unfortunate, and we switched back less than 10 ms before loading finished. We now remove the blur on every branch, just to be sure. * adding a progress handler to a promise might not have any immediate effect, so when switching to an image which was loading, the progress bar reacted too late. We now store the progress state per thumbnail so it is always available immediately. * the progress would animate from 0 to its actual state whenever we navigated to the image. The change on paging is now instant; the progress bar only animates when we are looking at it. * switching quickly back and forthe between a loaded and a loading image resulted in the loading image becoming unblurred. This seems fixed now, I'm not sure why. Maybe the "skip on non-pending promise" logic affects it somehow. Also removes some unused things / renames some things which were confusing, and makes an unrelated fix in the image provider, which kept amassing fail handlers. Change-Id: I580becff246f197ec1bc65e82acd422620e35578 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/489
2014-04-25 22:26:34 +00:00
viewer.progressCache[key] = progress;
// Touch the UI only if the user is looking at this image
if ( viewer.currentIndex === image.index ) {
progressBar.animateTo( progress );
}
} ).done( function () {
Refactor progressbar & blur handling This tries to fix a number of related issues: * the blurred thumbnail was visible for a split-second sometimes when switching back to an already-loaded image. (Presumably when JS was sluggish enough to take more than 10 ms to execute.) We now check whether the promise is pending before showing a placeholder. (More generally, a lot of unnecessary logic was executed when paging through already loaded images, like displaying the placeholder, so this might make the UI a bit more responsive.) * the blur could get stuck sometimes - I have seen this a few times, but have never been able to reproduce it, so I'm only guessing, but maybe the timing was really unfortunate, and we switched back less than 10 ms before loading finished. We now remove the blur on every branch, just to be sure. * adding a progress handler to a promise might not have any immediate effect, so when switching to an image which was loading, the progress bar reacted too late. We now store the progress state per thumbnail so it is always available immediately. * the progress would animate from 0 to its actual state whenever we navigated to the image. The change on paging is now instant; the progress bar only animates when we are looking at it. * switching quickly back and forthe between a loaded and a loading image resulted in the loading image becoming unblurred. This seems fixed now, I'm not sure why. Maybe the "skip on non-pending promise" logic affects it somehow. Also removes some unused things / renames some things which were confusing, and makes an unrelated fix in the image provider, which kept amassing fail handlers. Change-Id: I580becff246f197ec1bc65e82acd422620e35578 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/489
2014-04-25 22:26:34 +00:00
viewer.progressCache[key] = 100;
Refactor progressbar & blur handling This tries to fix a number of related issues: * the blurred thumbnail was visible for a split-second sometimes when switching back to an already-loaded image. (Presumably when JS was sluggish enough to take more than 10 ms to execute.) We now check whether the promise is pending before showing a placeholder. (More generally, a lot of unnecessary logic was executed when paging through already loaded images, like displaying the placeholder, so this might make the UI a bit more responsive.) * the blur could get stuck sometimes - I have seen this a few times, but have never been able to reproduce it, so I'm only guessing, but maybe the timing was really unfortunate, and we switched back less than 10 ms before loading finished. We now remove the blur on every branch, just to be sure. * adding a progress handler to a promise might not have any immediate effect, so when switching to an image which was loading, the progress bar reacted too late. We now store the progress state per thumbnail so it is always available immediately. * the progress would animate from 0 to its actual state whenever we navigated to the image. The change on paging is now instant; the progress bar only animates when we are looking at it. * switching quickly back and forthe between a loaded and a loading image resulted in the loading image becoming unblurred. This seems fixed now, I'm not sure why. Maybe the "skip on non-pending promise" logic affects it somehow. Also removes some unused things / renames some things which were confusing, and makes an unrelated fix in the image provider, which kept amassing fail handlers. Change-Id: I580becff246f197ec1bc65e82acd422620e35578 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/489
2014-04-25 22:26:34 +00:00
if ( viewer.currentIndex === image.index ) {
// Fallback in case the browser doesn't have fancy progress updates
progressBar.animateTo( 100 );
}
} ).fail( function () {
Refactor progressbar & blur handling This tries to fix a number of related issues: * the blurred thumbnail was visible for a split-second sometimes when switching back to an already-loaded image. (Presumably when JS was sluggish enough to take more than 10 ms to execute.) We now check whether the promise is pending before showing a placeholder. (More generally, a lot of unnecessary logic was executed when paging through already loaded images, like displaying the placeholder, so this might make the UI a bit more responsive.) * the blur could get stuck sometimes - I have seen this a few times, but have never been able to reproduce it, so I'm only guessing, but maybe the timing was really unfortunate, and we switched back less than 10 ms before loading finished. We now remove the blur on every branch, just to be sure. * adding a progress handler to a promise might not have any immediate effect, so when switching to an image which was loading, the progress bar reacted too late. We now store the progress state per thumbnail so it is always available immediately. * the progress would animate from 0 to its actual state whenever we navigated to the image. The change on paging is now instant; the progress bar only animates when we are looking at it. * switching quickly back and forthe between a loaded and a loading image resulted in the loading image becoming unblurred. This seems fixed now, I'm not sure why. Maybe the "skip on non-pending promise" logic affects it somehow. Also removes some unused things / renames some things which were confusing, and makes an unrelated fix in the image provider, which kept amassing fail handlers. Change-Id: I580becff246f197ec1bc65e82acd422620e35578 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/489
2014-04-25 22:26:34 +00:00
viewer.progressCache[key] = 100;
if ( viewer.currentIndex === image.index ) {
// Hide progress bar on error
progressBar.hide();
}
} );
};
/**
* Preload this many prev/next images to speed up navigation.
* (E.g. preloadDistance = 3 means that the previous 3 and the next 3 images will be loaded.)
* Preloading only happens when the viewer is open.
* @property {number}
*/
MMVP.preloadDistance = 1;
/**
* Stores image metadata preloads, so they can be cancelled.
* @property {mw.mmv.model.TaskQueue}
*/
MMVP.metadataPreloadQueue = null;
/**
* Stores image thumbnail preloads, so they can be cancelled.
* @property {mw.mmv.model.TaskQueue}
*/
MMVP.thumbnailPreloadQueue = null;
/**
* Orders lightboximage indexes for preloading. Works similar to $.each, except it only takes
* the callback argument. Calls the callback with each lightboximage index in some sequence
* that is ideal for preloading.
* @private
* @param {function(number, mw.mmv.LightboxImage)} callback
*/
MMVP.eachPrealoadableLightboxIndex = function ( callback ) {
for ( var i = 0; i <= this.preloadDistance; i++ ) {
if ( this.currentIndex + i < this.thumbs.length ) {
callback(
this.currentIndex + i,
this.thumbs[ this.currentIndex + i ].image,
this.thumbs[ this.currentIndex + i ].extraStatsDeferred
);
}
if ( i && this.currentIndex - i >= 0 ) { // skip duplicate for i==0
callback(
this.currentIndex - i,
this.thumbs[ this.currentIndex - i ].image,
this.thumbs[ this.currentIndex - i ].extraStatsDeferred
);
}
}
};
/**
* A helper function to fill up the preload queues.
* taskFactory(lightboxImage) should return a preload task for the given lightboximage.
* @private
* @param {function(mw.mmv.LightboxImage): function()} taskFactory
* @return {mw.mmv.model.TaskQueue}
*/
MMVP.pushLightboxImagesIntoQueue = function ( taskFactory ) {
var queue = new mw.mmv.model.TaskQueue();
this.eachPrealoadableLightboxIndex( function ( i, lightboxImage, extraStatsDeferred ) {
queue.push( taskFactory( lightboxImage, extraStatsDeferred ) );
} );
return queue;
};
/**
* Cancels in-progress image metadata preloading.
*/
MMVP.cancelImageMetadataPreloading = function () {
if ( this.metadataPreloadQueue ) {
this.metadataPreloadQueue.cancel();
}
};
/**
* Cancels in-progress image thumbnail preloading.
*/
MMVP.cancelThumbnailsPreloading = function () {
if ( this.thumbnailPreloadQueue ) {
this.thumbnailPreloadQueue.cancel();
}
};
/**
* Preload metadata for next and prev N image (N = MMVP.preloadDistance).
* Two images will be loaded at a time (one forward, one backward), with closer images
* being loaded sooner.
*/
MMVP.preloadImagesMetadata = function () {
var viewer = this;
this.cancelImageMetadataPreloading();
this.metadataPreloadQueue = this.pushLightboxImagesIntoQueue( function ( lightboxImage, extraStatsDeferred ) {
return function () {
var metadatapromise = viewer.fetchSizeIndependentLightboxInfo( lightboxImage.filePageTitle );
metadatapromise.done( function ( imageInfo ) {
extraStatsDeferred.resolve( { uploadTimestamp: imageInfo.anonymizedUploadDateTime } );
} ).fail( function () {
extraStatsDeferred.reject();
} );
return metadatapromise;
};
} );
this.metadataPreloadQueue.execute();
};
/**
* Preload thumbnails for next and prev N image (N = MMVP.preloadDistance).
* Two images will be loaded at a time (one forward, one backward), with closer images
* being loaded sooner.
*/
MMVP.preloadThumbnails = function () {
var viewer = this;
this.cancelThumbnailsPreloading();
this.thumbnailPreloadQueue = this.pushLightboxImagesIntoQueue( function ( lightboxImage, extraStatsDeferred ) {
return function () {
var imageWidths, canvasDimensions;
// viewer.ui.canvas.getLightboxImageWidths needs the viewer to be open
// because it needs to read the size of visible elements
if ( !viewer.isOpen ) {
return;
}
imageWidths = viewer.ui.canvas.getLightboxImageWidths( lightboxImage );
canvasDimensions = viewer.ui.canvas.getDimensions();
mw.mmv.dimensionLogger.logDimensions( imageWidths, canvasDimensions, 'preload' );
return viewer.fetchThumbnailForLightboxImage( lightboxImage, imageWidths.real, extraStatsDeferred );
};
} );
this.thumbnailPreloadQueue.execute();
};
/**
* Preload the fullscreen size of the current image.
*/
MMVP.preloadFullscreenThumbnail = function ( image ) {
var imageWidths = this.ui.canvas.getLightboxImageWidthsForFullscreen( image),
canvasDimensions = this.ui.canvas.getDimensions( true );
mw.mmv.dimensionLogger.logDimensions( imageWidths, canvasDimensions, 'preload' );
this.fetchThumbnailForLightboxImage( image, imageWidths.real );
};
/**
* Loads all the size-independent information needed by the lightbox (image metadata, repo
* information).
* @param {mw.Title} fileTitle Title of the file page for the image.
* @returns {jQuery.Promise.<mw.mmv.model.Image, mw.mmv.model.Repo>}
*/
MMVP.fetchSizeIndependentLightboxInfo = function ( fileTitle ) {
var imageInfoPromise = this.imageInfoProvider.get( fileTitle ),
repoInfoPromise = this.fileRepoInfoProvider.get( fileTitle );
return $.when(
imageInfoPromise, repoInfoPromise
).then( function ( imageInfo, repoInfoHash ) {
return $.Deferred().resolve( imageInfo, repoInfoHash[imageInfo.repo] );
} );
};
/**
* Loads size-dependent components of a lightbox - the thumbnail model and the image itself.
* @param {mw.mmv.LightboxImage} image
* @param {number} width the width of the requested thumbnail
* @param {jQuery.Deferred.<string>} [extraStatsDeferred] Promise that resolves to the image's upload timestamp when the metadata is loaded
* @returns {jQuery.Promise.<mw.mmv.model.Thumbnail, HTMLImageElement>}
*/
MMVP.fetchThumbnailForLightboxImage = function ( image, width, extraStatsDeferred ) {
return this.fetchThumbnail(
image.filePageTitle,
width,
image.src,
image.originalWidth,
image.originalHeight,
extraStatsDeferred
);
};
/**
* Loads size-dependent components of a lightbox - the thumbnail model and the image itself.
* @param {mw.Title} fileTitle
* @param {number} width the width of the requested thumbnail
* @param {string} [sampleUrl] a thumbnail URL for the same file (but with different size) (might be missing)
* @param {number} [originalWidth] the width of the original, full-sized file (might be missing)
* @param {number} [originalHeight] the height of the original, full-sized file (might be missing)
* @param {jQuery.Deferred.<string>} [extraStatsDeferred] Promise that resolves to the image's upload timestamp when the metadata is loaded
Refactor progressbar & blur handling This tries to fix a number of related issues: * the blurred thumbnail was visible for a split-second sometimes when switching back to an already-loaded image. (Presumably when JS was sluggish enough to take more than 10 ms to execute.) We now check whether the promise is pending before showing a placeholder. (More generally, a lot of unnecessary logic was executed when paging through already loaded images, like displaying the placeholder, so this might make the UI a bit more responsive.) * the blur could get stuck sometimes - I have seen this a few times, but have never been able to reproduce it, so I'm only guessing, but maybe the timing was really unfortunate, and we switched back less than 10 ms before loading finished. We now remove the blur on every branch, just to be sure. * adding a progress handler to a promise might not have any immediate effect, so when switching to an image which was loading, the progress bar reacted too late. We now store the progress state per thumbnail so it is always available immediately. * the progress would animate from 0 to its actual state whenever we navigated to the image. The change on paging is now instant; the progress bar only animates when we are looking at it. * switching quickly back and forthe between a loaded and a loading image resulted in the loading image becoming unblurred. This seems fixed now, I'm not sure why. Maybe the "skip on non-pending promise" logic affects it somehow. Also removes some unused things / renames some things which were confusing, and makes an unrelated fix in the image provider, which kept amassing fail handlers. Change-Id: I580becff246f197ec1bc65e82acd422620e35578 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/489
2014-04-25 22:26:34 +00:00
* @returns {jQuery.Promise.<mw.mmv.model.Thumbnail, HTMLImageElement>} A promise resolving to
* a thumbnail model and an <img> element. It might or might not have progress events which
* return a single number.
*/
MMVP.fetchThumbnail = function ( fileTitle, width, sampleUrl, originalWidth, originalHeight, extraStatsDeferred ) {
var viewer = this,
guessing = false,
thumbnailPromise,
imagePromise;
if ( originalWidth && width > originalWidth ) {
// Do not request images larger than the original image
// This would be possible (but still unwanted) for SVG images
width = originalWidth;
}
if (
sampleUrl && originalWidth && originalHeight &&
mw.config.get( 'wgMultimediaViewer' ).useThumbnailGuessing
) {
guessing = true;
thumbnailPromise = this.guessedThumbnailInfoProvider.get(
fileTitle, sampleUrl, width, originalWidth, originalHeight
).then( null, function () { // catch rejection, use fallback
return viewer.thumbnailInfoProvider.get( fileTitle, width );
} );
} else {
thumbnailPromise = this.thumbnailInfoProvider.get( fileTitle, width );
}
// Add thumbnail width to the extra stats passed to the performance log
extraStatsDeferred = $.when( extraStatsDeferred || {} ).then( function ( extraStats ) {
extraStats.imageWidth = width;
return extraStats;
} );
imagePromise = thumbnailPromise.then( function ( thumbnail ) {
return viewer.imageProvider.get( thumbnail.url, extraStatsDeferred );
} );
if ( guessing ) {
// If we guessed wrong, need to retry with real URL on failure.
// As a side effect this introduces an extra (harmless) retry of a failed thumbnailInfoProvider.get call
// because thumbnailInfoProvider.get is already called above when guessedThumbnailInfoProvider.get fails.
imagePromise = imagePromise.then( null, function () {
return viewer.thumbnailInfoProvider.get( fileTitle, width ).then( function ( thumbnail ) {
return viewer.imageProvider.get( thumbnail.url, extraStatsDeferred );
} );
} );
}
return $.when( thumbnailPromise, imagePromise ).then( null, null, function ( thumbnailProgress, imageProgress ) {
Refactor progressbar & blur handling This tries to fix a number of related issues: * the blurred thumbnail was visible for a split-second sometimes when switching back to an already-loaded image. (Presumably when JS was sluggish enough to take more than 10 ms to execute.) We now check whether the promise is pending before showing a placeholder. (More generally, a lot of unnecessary logic was executed when paging through already loaded images, like displaying the placeholder, so this might make the UI a bit more responsive.) * the blur could get stuck sometimes - I have seen this a few times, but have never been able to reproduce it, so I'm only guessing, but maybe the timing was really unfortunate, and we switched back less than 10 ms before loading finished. We now remove the blur on every branch, just to be sure. * adding a progress handler to a promise might not have any immediate effect, so when switching to an image which was loading, the progress bar reacted too late. We now store the progress state per thumbnail so it is always available immediately. * the progress would animate from 0 to its actual state whenever we navigated to the image. The change on paging is now instant; the progress bar only animates when we are looking at it. * switching quickly back and forthe between a loaded and a loading image resulted in the loading image becoming unblurred. This seems fixed now, I'm not sure why. Maybe the "skip on non-pending promise" logic affects it somehow. Also removes some unused things / renames some things which were confusing, and makes an unrelated fix in the image provider, which kept amassing fail handlers. Change-Id: I580becff246f197ec1bc65e82acd422620e35578 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/489
2014-04-25 22:26:34 +00:00
// Make progress events have a nice format.
return imageProgress[1];
} );
};
/**
* Loads an image at a specified index in the viewer's thumbnail array.
* @param {number} index
*/
MMVP.loadIndex = function ( index ) {
var thumb;
if ( index < this.thumbs.length && index >= 0 ) {
this.viewLogger.recordViewDuration();
thumb = this.thumbs[ index ];
this.loadImage( thumb.image, thumb.$thumb.clone()[0] );
}
};
/**
* Opens the next image
*/
MMVP.nextImage = function () {
mw.mmv.actionLogger.log( 'next-image' );
this.loadIndex( this.currentIndex + 1 );
};
/**
* Opens the previous image
*/
MMVP.prevImage = function () {
mw.mmv.actionLogger.log( 'prev-image' );
this.loadIndex( this.currentIndex - 1 );
};
/**
* Handles close event coming from the lightbox
*/
MMVP.close = function () {
var windowTitle;
this.viewLogger.recordViewDuration();
this.viewLogger.unattach();
windowTitle = this.createDocumentTitle( null );
if ( comingFromHashChange === false ) {
$( document ).trigger( $.Event( 'mmv-hash', { hash : '#', title: windowTitle } ) );
} else {
comingFromHashChange = false;
}
// This has to happen after the hash reset, because setting the hash to # will reset the page scroll
$( document ).trigger( $.Event( 'mmv-cleanup-overlay' ) );
this.isOpen = false;
};
/**
* Handles a hash change coming from the browser
*/
MMVP.hash = function () {
var route = this.router.parseLocation( window.location );
if ( route instanceof mw.mmv.routing.ThumbnailRoute ) {
document.title = this.createDocumentTitle( route.fileTitle );
this.loadImageByTitle( route.fileTitle );
} else if ( this.isOpen ) {
// This allows us to avoid the mmv-hash event that normally happens on close
comingFromHashChange = true;
document.title = this.createDocumentTitle( null );
if ( this.ui ) {
// FIXME triggers mmv-close event, which calls viewer.close()
this.ui.unattach();
} else {
this.close();
}
}
};
MMVP.setHash = function () {
var route, windowTitle, hashFragment;
if ( !this.comingFromHashChange ) {
route = new mw.mmv.routing.ThumbnailRoute( this.currentImageFileTitle );
hashFragment = '#' + this.router.createHash( route );
windowTitle = this.createDocumentTitle( this.currentImageFileTitle );
$( document ).trigger( $.Event( 'mmv-hash', { hash : hashFragment, title: windowTitle } ) );
}
};
/**
* Creates a string which can be shown as document title (the text at the top of the browser window).
* @param {mw.Title|null} imageTitle the title object for the image which is displayed; null when the
* viewer is being closed
* @return {string}
*/
MMVP.createDocumentTitle = function ( imageTitle ) {
if ( imageTitle ) {
return imageTitle.getNameText() + ' - ' + this.documentTitle;
} else {
return this.documentTitle;
}
};
/**
* @event mmv-close
* Fired when the viewer is closed. This is used by the ligthbox to notify the main app.
*/
/**
* @event mmv-next
* Fired when the user requests the next image.
*/
/**
* @event mmv-prev
* Fired when the user requests the previous image.
*/
/**
* @event mmv-resize-end
* Fired when the screen size changes. Debounced to avoid continous triggering while resizing with a mouse.
*/
/**
* @event mmv-request-thumbnail
* Used by components to request a thumbnail URL for the current thumbnail, with a given size.
* @param {number} size
*/
/**
* Registers all event handlers
*/
MMVP.setupEventHandlers = function () {
var viewer = this;
this.ui.connect( this, {
'next': 'nextImage',
'prev': 'prevImage'
} );
$( document ).on( 'mmv-close.mmvp', function () {
viewer.close();
} ).on( 'mmv-resize-end.mmvp', function () {
viewer.resize( viewer.ui );
} ).on( 'mmv-request-thumbnail.mmvp', function ( e, size ) {
if ( viewer.currentImageFileTitle ) {
return viewer.thumbnailInfoProvider.get( viewer.currentImageFileTitle, size );
} else {
return $.Deferred().reject();
}
} ).on( 'mmv-viewfile.mmvp', function () {
viewer.imageInfoProvider.get( viewer.currentImageFileTitle ).done( function ( imageInfo ) {
document.location = imageInfo.url;
} );
} );
};
/**
* Unregisters all event handlers. Currently only used in tests.
*/
MMVP.cleanupEventHandlers = function () {
$( document ).off( 'mmv-close.mmvp mmv-resize-end.mmvp' );
this.ui.disconnect( this );
};
/**
* Preloads JS and CSS dependencies that aren't needed to display the first image, but could be needed later
*/
MMVP.preloadDependencies = function () {
mw.loader.load( [ 'mmv.ui.reuse.shareembed', 'moment' ] );
};
mw.mmv.MultimediaViewer = MultimediaViewer;
}( mediaWiki, jQuery ) );