TheDJ has uploaded a new change for review.
https://gerrit.wikimedia.org/r/216538
Change subject: On demand playback of animated images
......................................................................
On demand playback of animated images
I've added a few classes to animated resources. Based on the presence
of these classes I load a very minimal player.
Right now this is only to load images that trigger:
"Due to technical limitations, thumbnails of high resolution GIF images
such as this one will not be animated."
The reason is because we already generate single frame thumbnails for
those.
Bug: T101644
Change-Id: I0e4d0f9b427bfca8e8a06eff4c3a553b73c23956
---
M includes/media/MediaTransformOutput.php
M resources/Resources.php
A resources/src/jquery/images/player_big_play_button.png
A resources/src/jquery/jquery.animationPlayer.css
A resources/src/jquery/jquery.animationPlayer.js
M resources/src/mediawiki.page/mediawiki.page.ready.js
6 files changed, 82 insertions(+), 1 deletion(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core
refs/changes/38/216538/1
diff --git a/includes/media/MediaTransformOutput.php
b/includes/media/MediaTransformOutput.php
index 1dd8519..7e80f9e 100644
--- a/includes/media/MediaTransformOutput.php
+++ b/includes/media/MediaTransformOutput.php
@@ -407,6 +407,18 @@
if ( isset( $options['override-width'] ) ) {
$attribs['width'] = $options['override-width'];
}
+ if ( $this->file &&
+ !$this->fileIsSource() &&
+ $this->file->getHandler() &&
+ $this->file->getHandler()->isAnimatedImage( $this->file
) )
+ {
+ $attribs['class'] = isset( $attribs['class'] ) ?
$attribs['class'] . " " : "";
+ $attribs['class'] .= "animated";
+ if ( !$this->file->canAnimateThumbIfAppropriate() ) {
+ $attribs['class'] .= " paused";
+ $attribs['data-file-original'] =
$this->file->getUrl();
+ }
+ }
// Additional densities for responsive images, if specified.
if ( !empty( $this->responsiveUrls ) ) {
diff --git a/resources/Resources.php b/resources/Resources.php
index 644ff9c..8d638dc 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -156,6 +156,11 @@
'messages' => array( 'brackets', 'word-separator' ),
'targets' => array( 'mobile', 'desktop' ),
),
+ 'jquery.animationPlayer' => array(
+ 'scripts' => 'resources/src/jquery/jquery.animationPlayer.js',
+ 'styles' => 'resources/src/jquery/jquery.animationPlayer.css',
+ 'targets' => array( 'desktop', 'mobile' ),
+ ),
'jquery.appear' => array(
'scripts' => 'resources/lib/jquery/jquery.appear.js',
),
diff --git a/resources/src/jquery/images/player_big_play_button.png
b/resources/src/jquery/images/player_big_play_button.png
new file mode 100644
index 0000000..041fea9
--- /dev/null
+++ b/resources/src/jquery/images/player_big_play_button.png
Binary files differ
diff --git a/resources/src/jquery/jquery.animationPlayer.css
b/resources/src/jquery/jquery.animationPlayer.css
new file mode 100644
index 0000000..a14dbbf
--- /dev/null
+++ b/resources/src/jquery/jquery.animationPlayer.css
@@ -0,0 +1,16 @@
+.animatedWrapper {
+ position:relative;
+}
+.animatedWrapper > .playButton {
+ position: absolute;
+ top: 0;
+ left: 0;
+ opacity: .9;
+ cursor:pointer;
+ background-image: url( images/player_big_play_button.png );
+ background-repeat: no-repeat;
+ background-position: center center;
+}
+.animatedWrapper > .playButton:hover {
+ opacity:.5;
+}
diff --git a/resources/src/jquery/jquery.animationPlayer.js
b/resources/src/jquery/jquery.animationPlayer.js
new file mode 100644
index 0000000..0a7c6de
--- /dev/null
+++ b/resources/src/jquery/jquery.animationPlayer.js
@@ -0,0 +1,41 @@
+/**
+ * Simple playback system for animated GIF/PNG etc
+ *
+ * @author Derk-Jan Hartman <[email protected]>, 2015
+ * @version 1.0.0
+ * @license MIT
+ */
+( function ( $ ) {
+
+ $.fn.extend( {
+ animationPlayer: function () {
+ var $img;
+
+ function play( $elem ) {
+ $elem.attr( 'src', $elem.data( 'file-original'
) );
+ $elem.removeClass( 'paused' );
+ }
+
+ this.each( function () {
+ $img = $( this );
+
+ $img
+ .wrap( $( '<div>' ).addClass(
'animatedWrapper' ) )
+ .after(
+ $( '<div>' )
+ .addClass( 'playButton'
)
+ .css( {
+ width:
$img.attr( 'width' ) + 'px',
+ height:
$img.attr( 'height' ) + 'px'
+ } )
+ .one( 'click',
function( event ) {
+ play( $img );
+ $( this
).remove();
+
event.preventDefault();
+ } )
+ );
+ } );
+ }
+ } );
+
+}( jQuery ));
diff --git a/resources/src/mediawiki.page/mediawiki.page.ready.js
b/resources/src/mediawiki.page/mediawiki.page.ready.js
index 36eb9d4..8026f5e 100644
--- a/resources/src/mediawiki.page/mediawiki.page.ready.js
+++ b/resources/src/mediawiki.page/mediawiki.page.ready.js
@@ -12,7 +12,7 @@
}
mw.hook( 'wikipage.content' ).add( function ( $content ) {
- var $sortableTables;
+ var $sortableTables, $animated;
// Run jquery.placeholder polyfill if placeholder is not
supported
if ( !supportsPlaceholder ) {
@@ -32,6 +32,13 @@
// Run jquery.checkboxShiftClick
$content.find( 'input[type="checkbox"]:not(.noshiftselect)'
).checkboxShiftClick();
+
+ $animated = $content.find( 'img.animated.paused' );
+ if ( $animated.length ) {
+ mw.loader.using( 'jquery.animationPlayer', function () {
+ $animated.animationPlayer();
+ } );
+ }
} );
// Things outside the wikipage content
--
To view, visit https://gerrit.wikimedia.org/r/216538
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I0e4d0f9b427bfca8e8a06eff4c3a553b73c23956
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: TheDJ <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
