jenkins-bot has submitted this change and it was merged.
Change subject: Improve live loading and ResourceLoader behavior
......................................................................
Improve live loading and ResourceLoader behavior
MwEmbed module registration using $(mw).bind does not ensure load order.
We ought to find a different way to do this.
Depends on change id: Ib3360fa9271b9452cec5e86281c2859f7e0f464e
Bug: T74675
Change-Id: I2768861e387013dd4411e7d1093f0fff9c9b7b6b
---
M MwEmbedModules/EmbedPlayer/EmbedPlayer.php
R MwEmbedModules/EmbedPlayer/resources/jquery.embedPlayer.js
A MwEmbedModules/EmbedPlayer/resources/mw.EmbedPlayer.loader.js
M MwEmbedModules/EmbedPlayer/resources/mw.processEmbedPlayers.js
M MwEmbedModules/TimedText/TimedText.loader.js
M MwEmbedModules/TimedText/TimedText.php
M TimedMediaHandler.hooks.php
M TimedMediaHandler_body.php
M TimedMediaIframeOutput.php
M resources/PopUpThumbVideo.css
M resources/embedPlayerIframe.css
A resources/ext.tmh.embedPlayerIframe.js
M resources/mw.PopUpThumbVideo.js
13 files changed, 168 insertions(+), 135 deletions(-)
Approvals:
Brion VIBBER: Looks good to me, approved
jenkins-bot: Verified
diff --git a/MwEmbedModules/EmbedPlayer/EmbedPlayer.php
b/MwEmbedModules/EmbedPlayer/EmbedPlayer.php
index a813c8d..2327a70 100644
--- a/MwEmbedModules/EmbedPlayer/EmbedPlayer.php
+++ b/MwEmbedModules/EmbedPlayer/EmbedPlayer.php
@@ -2,18 +2,27 @@
global $wgVideoPlayerSkinModule;
// Register all the EmbedPlayer modules
return array(
+ "jquery.embedPlayer" => array( 'scripts' =>
'resources/jquery.embedPlayer.js' ),
+ "mw.EmbedPlayer.loader" => array(
+ 'scripts' =>
'resources/mw.EmbedPlayer.loader.js',
+ 'dependencies' => 'jquery.embedPlayer',
+ 'position' => 'top',
+ ),
"mw.MediaElement" => array(
'scripts' => 'resources/mw.MediaElement.js',
'dependencies' => array(
'ext.tmh.OgvJsSupport',
- )
+ ),
),
"mw.MediaPlayer" => array( 'scripts' =>
'resources/mw.MediaPlayer.js' ),
"mw.MediaPlayers" => array(
'scripts' => 'resources/mw.MediaPlayers.js',
'dependencies' => 'mw.MediaPlayer'
),
- "mw.MediaSource" => array( 'scripts' =>
'resources/mw.MediaSource.js' ),
+ "mw.MediaSource" => array(
+ 'scripts' => 'resources/mw.MediaSource.js',
+ 'dependencies' => 'mw.MwEmbedSupport',
+ ),
"mw.EmbedTypes" => array(
'scripts' => 'resources/mw.EmbedTypes.js',
'dependencies' => array(
diff --git a/MwEmbedModules/EmbedPlayer/EmbedPlayer.loader.js
b/MwEmbedModules/EmbedPlayer/resources/jquery.embedPlayer.js
similarity index 68%
rename from MwEmbedModules/EmbedPlayer/EmbedPlayer.loader.js
rename to MwEmbedModules/EmbedPlayer/resources/jquery.embedPlayer.js
index f63a939..0ca4086 100644
--- a/MwEmbedModules/EmbedPlayer/EmbedPlayer.loader.js
+++ b/MwEmbedModules/EmbedPlayer/resources/jquery.embedPlayer.js
@@ -1,30 +1,7 @@
/**
-* EmbedPlayer loader
+* $.fn.embedPlayer
*/
( function( mw, $ ) {
- /**
- * Add a DOM ready check for player tags
- */
- $( function() {
- var $selected = $( mw.config.get( 'EmbedPlayer.RewriteSelector'
) );
- if ( $selected.length ) {
- var inx = 0;
- var checkSetDone = function() {
- if ( inx < $selected.length ) {
- // put in timeout to avoid browser
lockup, and function stack
- $selected.slice( inx, inx + 1
).embedPlayer( function() {
- setTimeout( function() {
- checkSetDone();
- }, 5 );
- } );
- }
- inx++;
- };
-
- checkSetDone();
- }
- } );
-
/**
* Add the mwEmbed jQuery loader wrapper
*/
@@ -59,8 +36,12 @@
// Do the request and process the playerElements with
updated dependency set
mw.loader.using( dependencySet, function() {
- // Setup the enhanced language:
- mw.processEmbedPlayers( playerSet,
readyCallback );
+ // Delay actual player setup to the next
exectution run, because
+ // wikipage.content can fire before the content
is attached, and that
+ // breaks something deep inside the player
setup.
+ setTimeout( function() {
+ mw.processEmbedPlayers( playerSet,
readyCallback );
+ } );
}, function( e ) {
throw new Error( 'Error loading EmbedPlayer
dependency set: ' + e.message );
} );
diff --git a/MwEmbedModules/EmbedPlayer/resources/mw.EmbedPlayer.loader.js
b/MwEmbedModules/EmbedPlayer/resources/mw.EmbedPlayer.loader.js
new file mode 100644
index 0000000..6d661c1
--- /dev/null
+++ b/MwEmbedModules/EmbedPlayer/resources/mw.EmbedPlayer.loader.js
@@ -0,0 +1,29 @@
+/**
+* EmbedPlayer loader
+*/
+( function( mw, $ ) {
+ /**
+ * Add a DOM ready check for player tags
+ */
+ var embedPlayerInit = function( $content ) {
+ var $selected = $content.find( mw.config.get(
'EmbedPlayer.RewriteSelector' ) );
+ if ( $selected.length ) {
+ var inx = 0;
+ var checkSetDone = function() {
+ if ( inx < $selected.length ) {
+ // put in timeout to avoid browser
lockup, and function stack
+ $selected.eq( inx ).embedPlayer(
function() {
+ setTimeout( function() {
+ checkSetDone();
+ }, 5 );
+ } );
+ }
+ inx++;
+ };
+
+ checkSetDone();
+ }
+ }
+ mw.hook( 'wikipage.content' ).add( embedPlayerInit );
+
+} )( mediaWiki, jQuery );
diff --git a/MwEmbedModules/EmbedPlayer/resources/mw.processEmbedPlayers.js
b/MwEmbedModules/EmbedPlayer/resources/mw.processEmbedPlayers.js
index 0748ccd..31308c0 100644
--- a/MwEmbedModules/EmbedPlayer/resources/mw.processEmbedPlayers.js
+++ b/MwEmbedModules/EmbedPlayer/resources/mw.processEmbedPlayers.js
@@ -109,7 +109,7 @@
// player interface setup. like iframes asynchronous
announcing its ready for
// bindings that can affect player setup.
mw.log("EmbedPlayer::addPlayerElement :trigger
startPlayerBuildOut:" + inDomPlayer.id );
- $( '#' + inDomPlayer.id ).triggerQueueCallback(
'startPlayerBuildOut', function(){
+ $( inDomPlayer ).triggerQueueCallback(
'startPlayerBuildOut', function(){
// Issue the checkPlayerSources call to the new
player
// interface: make sure to use the element that
is in the DOM:
inDomPlayer.checkPlayerSources();
diff --git a/MwEmbedModules/TimedText/TimedText.loader.js
b/MwEmbedModules/TimedText/TimedText.loader.js
index bbd62d0..b2eadf1 100644
--- a/MwEmbedModules/TimedText/TimedText.loader.js
+++ b/MwEmbedModules/TimedText/TimedText.loader.js
@@ -19,7 +19,9 @@
// On new embed player check if we need to add timedText
$( mw ).bind( 'EmbedPlayerNewPlayer', function( event, embedPlayer ){
if( mw.isTimedTextSupported( embedPlayer ) ){
- embedPlayer.timedText = new mw.TimedText( embedPlayer );
+ mw.loader.using( 'mw.TimedText', function () {
+ embedPlayer.timedText = new mw.TimedText(
embedPlayer );
+ } );
}
});
diff --git a/MwEmbedModules/TimedText/TimedText.php
b/MwEmbedModules/TimedText/TimedText.php
index 57f5004..8473432 100644
--- a/MwEmbedModules/TimedText/TimedText.php
+++ b/MwEmbedModules/TimedText/TimedText.php
@@ -7,7 +7,8 @@
'styles' => "resources/mw.style.TimedText.css",
'dependencies' => array(
'mw.EmbedPlayer',
- 'mw.TextSource'
+ 'mw.TextSource',
+ 'mw.MwEmbedSupport',
),
'messageDir' => 'i18n',
),
diff --git a/TimedMediaHandler.hooks.php b/TimedMediaHandler.hooks.php
index 6acfe41..7bb701f 100644
--- a/TimedMediaHandler.hooks.php
+++ b/TimedMediaHandler.hooks.php
@@ -61,7 +61,8 @@
$wgResourceModules+= array(
'mw.PopUpMediaTransform' => $baseExtensionResource +
array(
'scripts' => 'resources/mw.PopUpThumbVideo.js',
- 'dependencies' => array( 'mw.MwEmbedSupport',
'mediawiki.Title' ),
+ 'dependencies' => array( 'mw.MwEmbedSupport',
'mediawiki.Title', 'mw.PopUpMediaTransform.styles' ),
+ 'position' => 'top',
),
'mw.PopUpMediaTransform.styles' =>
$baseExtensionResource + array(
'position' => 'top',
@@ -74,6 +75,13 @@
),
'embedPlayerIframeStyle'=> $baseExtensionResource +
array(
'styles' => 'resources/embedPlayerIframe.css',
+ ),
+ 'ext.tmh.embedPlayerIframe' => $baseExtensionResource +
array(
+ 'scripts' =>
'resources/ext.tmh.embedPlayerIframe.js',
+ 'dependencies' => array(
+ 'jquery.embedPlayer',
+ 'mw.MwEmbedSupport',
+ ),
),
'ext.tmh.transcodetable' => $baseExtensionResource +
array(
'scripts' =>
'resources/ext.tmh.transcodetable.js',
@@ -95,11 +103,19 @@
),
"mw.MediaWikiPlayerSupport" => $baseExtensionResource
+ array(
'scripts' =>
'resources/mw.MediaWikiPlayerSupport.js',
- 'dependencies'=> 'mw.Api',
+ 'dependencies'=> array(
+ 'mw.Api',
+ 'mw.MwEmbedSupport',
+ ),
),
// adds support MediaWikiPlayerSupport player bindings
- "mw.MediaWikiPlayer.loader" => $baseExtensionResource
+ array(
- 'loaderScripts' =>
'resources/mw.MediaWikiPlayer.loader.js',
+ "mw.MediaWikiPlayer.loader" => $baseExtensionResource +
array(
+ 'scripts' =>
'resources/mw.MediaWikiPlayer.loader.js',
+ 'dependencies' => array(
+ "mw.EmbedPlayer.loader",
+ "mw.TimedText.loader",
+ ),
+ 'position' => 'top',
),
);
@@ -132,9 +148,6 @@
// When image page is deleted so that we remove transcode
settings / files.
$wgHooks['FileDeleteComplete'][] =
'TimedMediaHandlerHooks::onFileDeleteComplete';
-
- // Add parser hook
- $wgParserOutputHooks['TimedMediaHandler'] = array(
'TimedMediaHandler', 'outputHook' );
// Use a BeforePageDisplay hook to load the styles in pages
that pull in media dynamically.
// (Special:Upload, for example, when there is an "existing
file" warning.)
@@ -183,6 +196,7 @@
$wgHooks['LoadExtensionSchemaUpdates'][] =
'TimedMediaHandlerHooks::checkSchemaUpdates';
$wgHooks['wgQueryPages'][] =
'TimedMediaHandlerHooks::onwgQueryPages';
+ $wgHooks['RejectParserCacheValue'][] =
'TimedMediaHandlerHooks::rejectParserCacheValue';
return true;
}
@@ -194,7 +208,11 @@
public static function onImageOpenShowImageInlineBefore( $imagePage,
$out ) {
$handler = $imagePage->getDisplayedFile()->getHandler();
if ( $handler !== false && $handler instanceof
TimedMediaHandler ) {
- TimedMediaHandler::outputHook( $out, null, null );
+ $out->addModules( array(
+ 'mw.MediaWikiPlayer.loader',
+ 'mw.PopUpMediaTransform',
+ 'mw.TMHGalleryHook.js',
+ ) );
}
return true;
}
@@ -443,8 +461,10 @@
}
if ( $addModules ) {
- $out->addModuleScripts( 'mw.PopUpMediaTransform' );
- $out->addModuleStyles( 'mw.PopUpMediaTransform.styles'
);
+ $out->addModules( array(
+ 'mw.MediaWikiPlayer.loader',
+ 'mw.PopUpMediaTransform',
+ ) );
}
return true;
@@ -471,4 +491,22 @@
$qp[] = array( 'SpecialOrphanedTimedText', 'OrphanedTimedText'
);
return true;
}
+
+ /**
+ * Return false here to evict existing parseroutput cache
+ */
+ public static function rejectParserCacheValue( $parserOutput,
$wikiPage, $parserOptions ) {
+ if(
+ $parserOutput->getExtensionData(
'mw_ext_TMH_hasTimedMediaTransform' )
+ || isset( $parserOutput->hasTimedMediaTransform )
+ ) {
+ /* page has old style TMH elements */
+ if ( !in_array( 'mw.MediaWikiPlayer.loader',
$parserOutput->getModules() ) ) {
+ wfDebug( 'Bad TMH parsercache value, throw this
out.' );
+ $wikiPage->getTitle()->purgeSquid();
+ return false;
+ }
+ }
+ return true;
+ }
}
diff --git a/TimedMediaHandler_body.php b/TimedMediaHandler_body.php
index cb68985..00ef07e 100644
--- a/TimedMediaHandler_body.php
+++ b/TimedMediaHandler_body.php
@@ -188,6 +188,10 @@
}
/**
+ * Parser output hook only adds the required modules
+ *
+ * The core embedPlayer module lazy loaded by the loader modules
+ *
* @param $parser Parser
* @param $file File
*/
@@ -197,26 +201,11 @@
return ;
}
$parserOutput->hasTimedMediaTransform = true;
- $parserOutput->addOutputHook( 'TimedMediaHandler' );
- }
-
- /**
- * Parser output hook only adds the PopUpMediaTransform
- *
- * The core embedPlayer module is part of a "loaderScript" so it does
not need to
- * be registered here.
- *
- * TODO move core loader to on-page script as to not include it on all
pages.
- *
- * @param $outputPage OutputPage
- * @param $parserOutput
- * @param $data
- */
- static function outputHook( $outputPage, $parserOutput, $data ) {
- // Add the PopUpMediaTransform code
- $outputPage->addModuleScripts( 'mw.PopUpMediaTransform' );
- $outputPage->addModuleStyles( 'mw.PopUpMediaTransform.styles' );
- $outputPage->addModules( 'mw.TMHGalleryHook.js' );
+ $parserOutput->addModules( array(
+ 'mw.MediaWikiPlayer.loader',
+ 'mw.PopUpMediaTransform',
+ 'mw.TMHGalleryHook.js',
+ ) );
if ( $parserOutput ) {
// Not present when run from outputpage hooks, like
File/Category etc...
$parserOutput->setExtensionData(
'mw_ext_TMH_hasTimedMediaTransform', true );
diff --git a/TimedMediaIframeOutput.php b/TimedMediaIframeOutput.php
index a0e2920..23296ab 100644
--- a/TimedMediaIframeOutput.php
+++ b/TimedMediaIframeOutput.php
@@ -63,86 +63,35 @@
// Definitely do not want to break frames
$wgBreakFrames = false;
$wgOut->allowClickjacking();
+ $wgOut->disallowUserJs();
- $wgOut->addModules( array( 'embedPlayerIframeStyle',
'mw.EmbedPlayer' ) );
+ $wgOut->addModuleStyles( 'embedPlayerIframeStyle' );
+ $wgOut->addModules( array( 'mw.MediaWikiPlayer.loader',
'ext.tmh.embedPlayerIframe' ) );
$wgOut->sendCacheControl();
?>
<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml";>
+<html>
<head>
<meta charset="UTF-8" />
<title><?php echo $title->getText() ?></title>
<?php
- echo Html::element( 'meta', array( 'name' =>
'ResourceLoaderDynamicStyles', 'content' => '' ) );
+ echo implode( "\n", $wgOut->getHeadLinksArray() );
?>
<?php
- echo implode( "\n", $wgOut->getHeadLinksArray() );
- echo implode( "\n", $wgOut->getHeadLinksArray() );
+ // In place of buildCssLinks, because we don't want to pull in
all the skin CSS etc.
+ $links = $wgOut->makeResourceLoaderLink(
'embedPlayerIframeStyle', ResourceLoaderModule::TYPE_STYLES );
+ echo implode( "\n", $links["html"] );
+
+ echo Html::element( 'meta', array( 'name' =>
'ResourceLoaderDynamicStyles', 'content' => '' ) );
?>
- <style type="text/css">
- html, body {
- height: 100%;
- width: 100%;
- margin: 0;
- padding: 0;
- overflow:hidden;
- }
- img#bgimage {
- position:fixed;
- top:0;
- left:0;
- width:100%;
- height:100%;
- }
- .videoHolder {
- position:relative;
- }
- </style>
- <?php echo $wgOut->getHeadScripts(); ?>
- <script>
- window.RLQ = window.RLQ || [];
- window.RLQ.push( function() {
- mw.loader.using( 'mw.MwEmbedSupport', function() {
- mw.setConfig('EmbedPlayer.RewriteSelector', '');
- } );
- // Turn off rewrite selector. This prevents automatic
conversion of
- // <video> tags, since we are going to do that
ourselves later.
- } );
- </script>
+ <?php echo "\n" . $wgOut->getHeadScripts(); ?>
</head>
<body>
- <img src="<?php echo $videoTransform->getUrl() ?>" id="bgimage" ></img>
- <div id="videoContainer" style="visibility:hidden">
- <?php echo $videoTransform->toHtml(); ?>
- </div>
+ <img src="<?php echo $videoTransform->getUrl() ?>" id="bgimage"
></img>
+ <div id="videoContainer" style="visibility:hidden">
+ <?php echo $videoTransform->toHtml(); ?>
+ </div>
<?php echo $wgOut->getBottomScripts(); ?>
- <script>
- window.RLQ.push( function() {
- mw.loader.using( 'mw.MwEmbedSupport', function() {
- // only enable fullscreen if enabled in iframe
- mw.setConfig('EmbedPlayer.EnableFullscreen',
document.fullscreenEnabled || document.webkitFullscreenEnabled ||
document.mozFullScreenEnabled || false );
- $('#bgimage').remove();
-
- mw.setConfig( 'EmbedPlayer.IsIframeServer',
true );
-
- // rewrite player
- $( '#<?php echo
TimedMediaTransformOutput::PLAYER_ID_PREFIX . '0' ?>' ).embedPlayer(function(){
-
- // Bind window resize to reize the
player:
- var fitPlayer = function(){
- $( '#<?php echo
TimedMediaTransformOutput::PLAYER_ID_PREFIX . '0' ?>' )
- [0].updateLayout();
- }
-
- $( window ).resize( fitPlayer );
- $('#videoContainer').css({
- 'visibility':'visible'
- } );
- fitPlayer();
- } );
- } );
- } );
- </script>
</body>
</html>
<?php
diff --git a/resources/PopUpThumbVideo.css b/resources/PopUpThumbVideo.css
index 3ba0572..c55bb06 100644
--- a/resources/PopUpThumbVideo.css
+++ b/resources/PopUpThumbVideo.css
@@ -1,4 +1,4 @@
-.PopUpMediaTransform a .play-btn-large{
+.PopUpMediaTransform a .play-btn-large {
position : absolute;
top: 50%;
left : 50%;
@@ -9,7 +9,7 @@
/* @embed */
background-image:url('player_big_play_button.png');
}
-.PopUpMediaTransform a .play-btn-large :hover{
+.PopUpMediaTransform a .play-btn-large :hover {
/* @embed */
background-image:url('player_big_play_button_hover.png');
}
diff --git a/resources/embedPlayerIframe.css b/resources/embedPlayerIframe.css
index eb6e900..ec05700 100644
--- a/resources/embedPlayerIframe.css
+++ b/resources/embedPlayerIframe.css
@@ -1,7 +1,23 @@
body {
- margin-left: 0px;
- margin-top: 0px;
- margin-right: 0px;
- margin-bottom: 0px;
+ margin-left: 0;
+ margin-top: 0;
+ margin-right: 0;
+ margin-bottom: 0;
overflow: hidden;
}
+html, body {
+ height: 100%;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+}
+img#bgimage {
+ position:fixed;
+ top:0;
+ left:0;
+ width:100%;
+ height:100%;
+}
+.mediaContainer .videoHolder {
+ position: static;
+}
diff --git a/resources/ext.tmh.embedPlayerIframe.js
b/resources/ext.tmh.embedPlayerIframe.js
new file mode 100644
index 0000000..eed6779
--- /dev/null
+++ b/resources/ext.tmh.embedPlayerIframe.js
@@ -0,0 +1,19 @@
+( function( mw, $ ) {
+ // only enable fullscreen if enabled in iframe
+ mw.setConfig('EmbedPlayer.EnableFullscreen', document.fullscreenEnabled
|| document.webkitFullscreenEnabled || document.mozFullScreenEnabled || false );
+
+ mw.setConfig( 'EmbedPlayer.IsIframeServer', true );
+
+ var iframePlayerInit = function () {
+ // rewrite player, normally done by mw.EmbedPlayer.loader upon
wikipage.content hook
+ var $players = $( mw.config.get( 'EmbedPlayer.RewriteSelector'
) );
+ $players.embedPlayer( function () {
+ $( '#videoContainer' ).css( {
+ 'visibility':'visible'
+ } );
+ $( '#bgimage' ).remove();
+ } );
+ };
+
+ $( iframePlayerInit );
+} )( mediaWiki, jQuery );
\ No newline at end of file
diff --git a/resources/mw.PopUpThumbVideo.js b/resources/mw.PopUpThumbVideo.js
index c0aa30d..f56214a 100644
--- a/resources/mw.PopUpThumbVideo.js
+++ b/resources/mw.PopUpThumbVideo.js
@@ -2,8 +2,8 @@
* Simple script to add pop-up video dialog link support for video thumbnails
*/
( function ( mw, $ ) {
- $( document ).ready( function () {
- $('.PopUpMediaTransform a').each( function () {
+ mw.hook( 'wikipage.content' ).add( function ( $content ) {
+ $content.find('.PopUpMediaTransform a').each( function () {
var link, title,
parent = $( this ).parent();
if ( parent.attr( 'videopayload' ) ) {
--
To view, visit https://gerrit.wikimedia.org/r/172421
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I2768861e387013dd4411e7d1093f0fff9c9b7b6b
Gerrit-PatchSet: 36
Gerrit-Project: mediawiki/extensions/TimedMediaHandler
Gerrit-Branch: master
Gerrit-Owner: TheDJ <hartman.w...@gmail.com>
Gerrit-Reviewer: Brion VIBBER <br...@wikimedia.org>
Gerrit-Reviewer: Florianschmidtwelzow <florian.schmidt.stargatewis...@gmail.com>
Gerrit-Reviewer: Gilles <gdu...@wikimedia.org>
Gerrit-Reviewer: MarkTraceur <mtrac...@member.fsf.org>
Gerrit-Reviewer: Ori.livneh <o...@wikimedia.org>
Gerrit-Reviewer: Paladox <thomasmulhall...@yahoo.com>
Gerrit-Reviewer: TheDJ <hartman.w...@gmail.com>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
