r69038 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:< r69037‎ | r69038 | r69039 >
Date:23:44, 4 July 2010
Author:dale
Status:deferred
Tags:
Comment:
sync with kalorg updates
* added getAbsoluteOverlaySpinner for spinner overlay on images and video
* stubs for video clipBegin smil player test
Modified paths:
  • /branches/MwEmbedStandAlone/modules/EmbedPlayer/binPlayers/kaltura-player/config.xml (modified) (history)
  • /branches/MwEmbedStandAlone/modules/EmbedPlayer/loader.js (modified) (history)
  • /branches/MwEmbedStandAlone/modules/EmbedPlayer/mw.EmbedPlayer.js (modified) (history)
  • /branches/MwEmbedStandAlone/modules/SmilPlayer/tests/VideoClipBegin.html (added) (history)
  • /branches/MwEmbedStandAlone/modules/SmilPlayer/tests/VideoClipBeginSmil.xml (added) (history)
  • /branches/MwEmbedStandAlone/mwEmbed.js (modified) (history)

Diff [purge]

Index: branches/MwEmbedStandAlone/mwEmbed.js
——@@ -2154,6 +2154,32 @@
21552155 */
21562156 return this;
21572157 }
 2158+ /**
 2159+ * Add an absolute overlay spinner useful for cases where the element
 2160+ * does not display child elements, ( images, video )
 2161+ */
 2162+ $.fn.getAbsoluteOverlaySpinner = function(){
 2163+ var pos = $j( this ).offset();
 2164+ var posLeft = ( $j( this ).width() ) ?
 2165+ parseInt( pos.left + ( .4 * $j( this ).width() ) ) :
 2166+ pos.left + 30;
 2167+
 2168+ var posTop = ( $j( this ).height() ) ?
 2169+ parseInt( pos.top + ( .4 * $j( this ).height() ) ) :
 2170+ pos.top + 30;
 2171+
 2172+ var $spinner = $j('<div />')
 2173+ .loadingSpinner()
 2174+ .css({
 2175+ 'width' : 32,
 2176+ 'height' : 32,
 2177+ 'position': 'absolute',
 2178+ 'top' : posTop + 'px',
 2179+ 'left' : posLeft + 'px'
 2180+ });
 2181+ $j('body').append( $spinner );
 2182+ return $spinner;
 2183+ }
21582184
21592185 /**
21602186 * dragDrop file loader
Index: branches/MwEmbedStandAlone/modules/SmilPlayer/tests/VideoClipBegin.html
——@@ -0,0 +1,72 @@
 2+<!doctype html>
 3+<html>
 4+<head>
 5+ <title>Video ClipBegin Example</title>
 6+ <script type="text/javascript" src="../../../mwEmbed.js?debug=true"></script>
 7+ <!-- <script type="text/javascript" src="../../ResourceLoader.php?class=window.jQuery,mwEmbed&debug=true"></script> -->
 8+ <script type="text/javascript">
 9+ mw.setConfig( 'EmbedPlayer.OverlayControls', false );
 10+ mw.ready(function(){
 11+ $j( "#seekInputTime" ).blur( function(){
 12+ var smilVid = $j('#videoClipBegin').get(0);
 13+ $j('#seekInProgress').show();
 14+ smilVid.setCurrentTime( parseFloat( $j(this).val() ), function() {
 15+ $j('#seekInProgress').hide();
 16+ });
 17+ });
 18+ $j('#startBuffer').click( function(){
 19+ $j('#videoClipBegin').get(0).load();
 20+ return false;
 21+ });
 22+ $j('#renderToFile').click(function(){
 23+ $j(this).empty().unbind().after(
 24+ $j('<span />').text( ' ' ),
 25+ $j('<span />').attr('id', 'targetFoggStatus' )
 26+ );
 27+
 28+ // xxx for local rendering 'AddMedia.firefogg' is overkill
 29+ // but will have to clean up modularity later
 30+
 31+ mw.load( ['AddMedia.firefogg','mw.FirefoggRender'],function(){
 32+ var foggRender = $j('#videoClipBegin').firefoggRender({
 33+ 'statusTarget': '#targetFoggStatus'
 34+ });
 35+ foggRender.doRender();
 36+
 37+ $j('#renderToFile').text('Stop Render').click(function(){
 38+ foggRender.stopRender();
 39+ });
 40+ })
 41+ return false;
 42+ });
 43+ });
 44+ </script>
 45+</head>
 46+<body>
 47+<h3>Sample Video ClipBegin</h3>
 48+<table>
 49+<tr>
 50+<td>
 51+
 52+<video id="videoClipBegin" type="application/smil" src="VideoClipBeginSmil.xml" width="400" height="300"></video>
 53+<p></p>seek to <input id="seekInputTime" size="4" value = "6"></input><span id="seekInProgress" style="display: none"> Seeking<blink>...</blink></span>
 54+<br/>
 55+<a id="startBuffer" href="#">Start buffering</a> <br>
 56+<a id="renderToFile" href="#">Render to file</a>
 57+</td>
 58+<td valign="top">
 59+Sample playlist code:
 60+<div style="clear:both"></div>
 61+<textarea style="width:500px;">
 62+<video id="videoClipBegin" type="application/smil" src="VideoClipBeginSmil.xml" width="400" height="300"></video>
 63+</textarea>
 64+<div style="clear:both"></div>
 65+
 66+SMIL Source:
 67+<div style="clear:both"></div>
 68+<iframe style="width:500px;height:300px" src="VideoClipBeginSmil.xml"></iframe>
 69+</td>
 70+</tr>
 71+</table>
 72+</body>
 73+</html>
Index: branches/MwEmbedStandAlone/modules/SmilPlayer/tests/VideoClipBeginSmil.xml
——@@ -0,0 +1,55 @@
 2+<?xml version="1.0" encoding="UTF-8"?>
 3+<smil baseProfile="Language" version="3.0" xmlns="http://www.w3.org/ns/SMIL">
 4+ <head>
 5+ <meta name="title" content="Simple Crossfading Example"/>
 6+
 7+ <transition id="fromBlack"
 8+ type="fade"
 9+ subtype="fadeFromColor"
 10+ fadeColor="#000"
 11+ dur="4s"/>
 12+
 13+ </head>
 14+ <body>
 15+ <seq>
 16+
 17+ <video src="http://upload.wikimedia.org/wikipedia/commons/1/14/Independence_Day%2C_1940_Promotion.ogv"
 18+ transIn="fromBlack"
 19+ dur="5"
 20+ />
 21+
 22+ <video src="http://upload.wikimedia.org/wikipedia/commons/9/94/Folgers.ogv"
 23+ transIn="fromBlack"
 24+ dur="2"
 25+ clipBegin = "16"
 26+ />
 27+
 28+ <video src="http://upload.wikimedia.org/wikipedia/commons/1/14/Independence_Day%2C_1940_Promotion.ogv"
 29+ transIn="fromBlack"
 30+ dur="2"
 31+ clipBegin = "16"
 32+ />
 33+
 34+ <video src="http://upload.wikimedia.org/wikipedia/commons/9/94/Folgers.ogv"
 35+ dur="3"
 36+ clipBegin = "16"
 37+ />
 38+
 39+ <video src="http://upload.wikimedia.org/wikipedia/commons/1/14/Independence_Day%2C_1940_Promotion.ogv"
 40+ dur="2"
 41+ clipBegin = "18"
 42+ />
 43+
 44+ <!-- where does quality come from -->
 45+ <video src="http://upload.wikimedia.org/wikipedia/commons/8/8b/Yochai_Benkler_-_On_Autonomy%2C_Control_and_Cultural_Experience.ogg"
 46+ transIn="fromBlack"
 47+ dur="27"
 48+ clipBegin = "0:3:43"
 49+ />
 50+
 51+ </seq>
 52+
 53+ </body>
 54+</smil>
 55+
 56+
Index: branches/MwEmbedStandAlone/modules/EmbedPlayer/loader.js
——@@ -129,30 +129,13 @@
130130 if ( $j( element ).attr( "id" ) == '' ) {
131131 $j( element ).attr( "id", 'v' + ( rewriteElementCount++ ) );
132132 }
133 -
 133+
134134 // Add an absolute positioned loader
135 - var pos = $j( element ).offset();
136 - var posLeft = ( $j( element ).width() ) ?
137 - parseInt( pos.left + ( .4 * $j( element ).width() ) ) :
138 - pos.left + 30;
139 -
140 - var posTop = ( $j( element ).height() ) ?
141 - parseInt( pos.top + ( .4 * $j( element ).height() ) ) :
142 - pos.top + 30;
143 -
144 - $j('body').append(
145 - $j('<div />')
146 - .loadingSpinner()
 135+ $j( element )
 136+ .getAbsoluteOverlaySpinner()
147137 .attr('id', 'loadingSpinner_' + $j( element ).attr('id') )
148 - .addClass( 'playerLoadingSpinner' )
149 - .css({
150 - 'width' : 32,
151 - 'height' : 32,
152 - 'position': 'absolute',
153 - 'top' : posTop + 'px',
154 - 'left' : posLeft + 'px'
155 - })
156 - )
 138+ .addClass( 'playerLoadingSpinner' );
 139+
157140 });
158141 // Load the embedPlayer module ( then run queued hooks )
159142 mw.load( 'EmbedPlayer', function ( ) {
Index: branches/MwEmbedStandAlone/modules/EmbedPlayer/mw.EmbedPlayer.js
——@@ -390,6 +390,13 @@
391391 mw.load( playerDependencyRequest, function() {
392392 var waitForMeta = true;
393393
 394+ // Be sure to "stop" the target ( sometimes firefox keeps playing the video even
 395+ // though its been removed from the DOM )
 396+ if( playerElement.pause ){
 397+ playerElement.pause();
 398+ }
 399+
 400+
394401 // Let extensions determine if its worthwhile to wait for metadata:
395402 // We pass an object to the trigger to preserve reference values
396403 var eventObject = {
——@@ -536,13 +543,14 @@
537544 swapPlayerElement[ method ] = playerInterface[ method ];
538545 }
539546 }
 547+
540548 // Check if we are using native controls ( should keep the video embed around )
541549 // "wrap" the player interface
542550 if( playerInterface.useNativeControls() ) {
543551 $j( targetElement )
544552 .attr('id', playerInterface.pid )
545553 .after(
546 - swapPlayerElement
 554+ $j( swapPlayerElement ).css('display', 'none')
547555 )
548556 } else {
549557 $j( targetElement ).replaceWith( swapPlayerElement );
——@@ -557,10 +565,16 @@
558566
559567 // If we don't already have a loadSpiner add one:
560568 if( $j('#loadingSpinner_' + playerInterface.id ).length == 0 ){
561 - $j( swapPlayerElement ).append(
562 - $j('<div />')
563 - .loadingSpinner()
564 - );
 569+ if( playerInterface.useNativeControls() ) {
 570+ $j( targetElement )
 571+ .getAbsoluteOverlaySpinner()
 572+ .attr('id', 'loadingSpinner_' + playerInterface.id )
 573+ }else{
 574+ $j( swapPlayerElement ).append(
 575+ $j('<div />')
 576+ .loadingSpinner()
 577+ );
 578+ }
565579 }
566580 return true;
567581 },
——@@ -1421,10 +1435,13 @@
14221436 if( customSource.src ){
14231437 var $source = $j('<source />')
14241438 .attr( 'src', customSource.src );
1425 -
 1439+ // xxx todo pull list of valid source attributes from mediaSource prototype
14261440 if( customSource.type ){
14271441 $source.attr('type', customSource.type )
14281442 }
 1443+ if( customSource.title ){
 1444+ $source.attr('title', customSource.title );
 1445+ }
14291446 this.mediaElement.tryAddSource( $source.get(0) );
14301447 }
14311448 }
Index: branches/MwEmbedStandAlone/modules/EmbedPlayer/binPlayers/kaltura-player/config.xml
——@@ -1,4 +1,4 @@
2 -<layout id="full" name="player" skinPath="assets/skin.swf">
 2+<layout id="full" skinPath="assets/skin.swf">
33 <HBox id="topLevel" width="100%" height="100%">
44 <VBox id="player" width="100%" height="100%" styleName="black">
55 <Canvas height="100%" width="100%" id="PlayerHolder" styleName="black">

Status & tagging log