MarkTraceur has uploaded a new change for review.
https://gerrit.wikimedia.org/r/171855
Change subject: Move thumbnail preview handling to UWU
......................................................................
Move thumbnail preview handling to UWU
Just another step towards less passing of parent objects...
Change-Id: I3c42f4d5758d820b88142e104793a4fd922e883e
---
M resources/mw.UploadWizardUpload.js
M resources/mw.UploadWizardUploadInterface.js
2 files changed, 116 insertions(+), 99 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/UploadWizard
refs/changes/55/171855/1
diff --git a/resources/mw.UploadWizardUpload.js
b/resources/mw.UploadWizardUpload.js
index c518c16..ef4e377 100644
--- a/resources/mw.UploadWizardUpload.js
+++ b/resources/mw.UploadWizardUpload.js
@@ -53,6 +53,7 @@
this.file = undefined;
this.ignoreWarning = {};
this.fromURL = false;
+ this.previewLoaded = false;
this.fileKey = undefined;
@@ -61,7 +62,7 @@
this.detailsWeight = 1; // default all same
// details
- this.ui = new mw.UploadWizardUploadInterface( this, filesDiv,
this.generatePreview )
+ this.ui = new mw.UploadWizardUploadInterface( this, filesDiv )
.connect( this, {
'file-changed': [ 'emit', 'file-changed',
upload ],
'filename-accepted': [ 'emit',
'filename-accepted' ]
@@ -1156,6 +1157,106 @@
*/
UWUP.fileChangedOk = function () {
this.ui.fileChangedOk( this.imageinfo, this.file, this.fromURL
);
+
+ if ( this.generatePreview ) {
+ this.makePreview();
+ } else if ( this.isPreviewable() ) {
+ this.ui.makeShowThumbCtrl();
+ }
+ };
+
+ /**
+ * Make a preview for the file.
+ */
+ UWUP.makePreview = function () {
+ var first, video, url, dataUrlReader,
+ upload = this;
+
+ // don't run this repeatedly.
+ if ( this.previewLoaded ) {
+ return;
+ }
+
+ // do preview if we can
+ if ( this.isPreviewable() ) {
+ // open video and get frame via canvas
+ if ( this.isVideo() ) {
+ first = true;
+ video = document.createElement( 'video' );
+
+ video.addEventListener('loadedmetadata',
function () {
+ //seek 2 seconds into video or to half
if shorter
+ video.currentTime = Math.min( 2,
video.duration / 2 );
+ video.volume = 0;
+ });
+ video.addEventListener('seeked', function () {
+ // Firefox 16 sometimes does not work
on first seek, seek again
+ if ( first ) {
+ first = false;
+ video.currentTime = Math.min(
2, video.duration / 2 );
+
+ } else {
+ // Chrome sometimes shows black
frames if grabbing right away.
+ // wait 500ms before grabbing
frame
+ setTimeout(function () {
+ var context,
+ canvas =
document.createElement( 'canvas' );
+ canvas.width = 100;
+ canvas.height =
Math.round( canvas.width * video.videoHeight / video.videoWidth );
+ context =
canvas.getContext( '2d' );
+ context.drawImage(
video, 0, 0, canvas.width, canvas.height );
+ ui.loadImage(
canvas.toDataURL() );
+
ui.URL().revokeObjectURL( video.url );
+ }, 500);
+ }
+ });
+ url = this.URL().createObjectURL( this.file );
+ video.src = url;
+ } else {
+ dataUrlReader = new FileReader();
+ dataUrlReader.onload = function () {
+ // this step (inserting
image-as-dataurl into image object) is slow for large images, which
+ // is why this is optional and has a
control attached to it to load the preview.
+ upload.loadImage( dataUrlReader.result
);
+ };
+ dataUrlReader.readAsDataURL( this.file );
+ }
+ }
+ };
+
+ /**
+ * Loads an image preview.
+ */
+ UWUP.loadImage = function ( url ) {
+ var image = document.createElement( 'img' ),
+ upload = this;
+ image.onload = function () {
+ $.publishReady( 'thumbnails.' + upload.index, image );
+ upload.previewLoaded = true;
+ };
+ image.src = url;
+ this.thumbnails['*'] = image;
+ };
+
+ /**
+ * Check if the file is previewable.
+ */
+ UWUP.isPreviewable = function () {
+ return mw.fileApi.isAvailable() && this.file &&
mw.fileApi.isPreviewableFile( this.file );
+ };
+
+ /**
+ * Finds the right URL object to use.
+ */
+ UWUP.URL = function () {
+ return window.URL || window.webkitURL || window.mozURL;
+ };
+
+ /**
+ * Checks if this upload is a video.
+ */
+ UWUP.isVideo = function () {
+ return mw.fileApi.isAvailable() &&
mw.fileApi.isPreviewableVideo( this.upload.file );
};
mw.UploadWizardUpload = UploadWizardUpload;
diff --git a/resources/mw.UploadWizardUploadInterface.js
b/resources/mw.UploadWizardUploadInterface.js
index 4323b6b..dac2208 100644
--- a/resources/mw.UploadWizardUploadInterface.js
+++ b/resources/mw.UploadWizardUploadInterface.js
@@ -6,15 +6,12 @@
* Create an interface fragment corresponding to a file input, suitable
for Upload Wizard.
* @param upload
* @param div to insert file interface
- * @param {boolean} generatePreview Whether to generate a thumbnail
preview for this file.
*/
- function UploadWizardUploadInterface( upload, filesDiv, generatePreview
) {
+ function UploadWizardUploadInterface( upload, filesDiv ) {
var $preview,
ui = this;
oo.EventEmitter.call( this );
-
- this.generatePreview = generatePreview;
this.upload = upload;
@@ -24,8 +21,6 @@
this.div = this.$div.get(0);
this.isFilled = false;
-
- this.previewLoaded = false;
this.$fileInputCtrl = $( '<input size="1"
class="mwe-upwiz-file-input" name="file" type="file"/>' );
if (mw.UploadWizard.config.enableFormData &&
mw.fileApi.isFormDataAvailable() &&
@@ -356,102 +351,23 @@
this.clearStatus();
this.setStatusString( statusItems.join( ' \u00b7 ' ) );
-
- if ( this.generatePreview ) {
- // Make the preview now. Will check if it's a
previewable file.
- this.makePreview();
- } else if ( this.isPreviewable() ) {
- // add a control for showing the preview if the user
needs it
- this.$showThumbCtrl = $.fn.showThumbCtrl(
- 'mwe-upwiz-show-thumb',
- 'mwe-upwiz-show-thumb-tip',
- function () { ui.makePreview(); }
- ).addClass( 'mwe-upwiz-file-status-line-item' );
-
- this.visibleFilenameDiv.find(
'.mwe-upwiz-file-status-line' )
- .append( '<br/>' ).append( this.$showThumbCtrl
);
-
- }
};
- UIP.URL = function () {
- return window.URL || window.webkitURL || window.mozURL;
- };
+ /**
+ * Show a link that will show the thumbnail preview.
+ */
+ UIP.makeShowThumbCtrl = function () {
+ var ui = this;
- UIP.isVideo = function () {
- return mw.fileApi.isAvailable() &&
mw.fileApi.isPreviewableVideo( this.upload.file );
- };
+ // add a control for showing the preview if the user needs it
+ this.$showThumbCtrl = $.fn.showThumbCtrl(
+ 'mwe-upwiz-show-thumb',
+ 'mwe-upwiz-show-thumb-tip',
+ function () { ui.emit( 'show-preview' ); }
+ ).addClass( 'mwe-upwiz-file-status-line-item' );
- UIP.isPreviewable = function () {
- return mw.fileApi.isAvailable() && this.upload.file &&
mw.fileApi.isPreviewableFile( this.upload.file );
- };
-
- // called once we have an image url
- UIP.loadImage = function ( url ) {
- var image = document.createElement( 'img' ),
- ui = this;
- image.onload = function () {
- $.publishReady( 'thumbnails.' + ui.upload.index, image
);
- ui.previewLoaded = true;
- };
- image.src = url;
- this.upload.thumbnails['*'] = image;
- };
-
- UIP.makePreview = function () {
- var first, video, url, dataUrlReader,
- ui = this;
-
- // don't run this repeatedly.
- if ( this.previewLoaded ) {
- return;
- }
-
- // do preview if we can
- if ( this.isPreviewable() ) {
- // open video and get frame via canvas
- if ( this.isVideo() ) {
- first = true;
- video = document.createElement( 'video' );
-
- video.addEventListener('loadedmetadata',
function () {
- //seek 2 seconds into video or to half
if shorter
- video.currentTime = Math.min( 2,
video.duration / 2 );
- video.volume = 0;
- });
- video.addEventListener('seeked', function () {
- // Firefox 16 sometimes does not work
on first seek, seek again
- if ( first ) {
- first = false;
- video.currentTime = Math.min(
2, video.duration / 2 );
-
- } else {
- // Chrome sometimes shows black
frames if grabbing right away.
- // wait 500ms before grabbing
frame
- setTimeout(function () {
- var context,
- canvas =
document.createElement( 'canvas' );
- canvas.width = 100;
- canvas.height =
Math.round( canvas.width * video.videoHeight / video.videoWidth );
- context =
canvas.getContext( '2d' );
- context.drawImage(
video, 0, 0, canvas.width, canvas.height );
- ui.loadImage(
canvas.toDataURL() );
-
ui.URL().revokeObjectURL( video.url );
- }, 500);
- }
- });
- url = this.URL().createObjectURL(
this.upload.file );
- video.src = url;
- } else {
- dataUrlReader = new FileReader();
- dataUrlReader.onload = function () {
- // this step (inserting
image-as-dataurl into image object) is slow for large images, which
- // is why this is optional and has a
control attached to it to load the preview.
- ui.loadImage( dataUrlReader.result );
- };
- dataUrlReader.readAsDataURL( this.upload.file );
- }
- }
+ this.visibleFilenameDiv.find( '.mwe-upwiz-file-status-line' )
+ .append( '<br>' ).append( this.$showThumbCtrl );
};
UIP.fileChangedError = function ( code, info ) {
--
To view, visit https://gerrit.wikimedia.org/r/171855
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I3c42f4d5758d820b88142e104793a4fd922e883e
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/UploadWizard
Gerrit-Branch: master
Gerrit-Owner: MarkTraceur <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
