| Index: branches/MwEmbedStandAlone/loader.js |
| — | — | @@ -152,6 +152,8 @@ |
| 153 | 153 | |
| 154 | 154 | "$j.cookie" : "libraries/jquery/plugins/jquery.cookie.js", |
| 155 | 155 | |
| | 156 | + "$j.postMessage" : "libraries/jquery/plugins/jquery.postmessage.js", |
| | 157 | + |
| 156 | 158 | "$j.contextMenu" : "libraries/jquery/plugins/jquery.contextMenu.js", |
| 157 | 159 | "$j.fn.suggestions" : "libraries/jquery/plugins/jquery.suggestions.js", |
| 158 | 160 | "$j.fn.textSelection" : "libraries/jquery/plugins/jquery.textSelection.js", |
| Index: branches/MwEmbedStandAlone/modules/PlayerThemer/loader.js |
| — | — | @@ -20,23 +20,5 @@ |
| 21 | 21 | } |
| 22 | 22 | } |
| 23 | 23 | }); |
| 24 | | - |
| 25 | | - // Set up the binding / loader |
| 26 | | - ( function( $ ) { |
| 27 | | - $.fn.playerThemer = function( options ){ |
| 28 | | - var _this = this; |
| 29 | | - if( !this.selector ){ |
| 30 | | - mw.log("Error empty selector for playerThemer ") |
| 31 | | - return ; |
| 32 | | - } |
| 33 | | - mw.load( 'mw.PlayerThemer', function(){ |
| 34 | | - $j( _this.selector ).each(function( inx, targetElement ){ |
| 35 | | - $j( targetElement ).data('themer', new mw.PlayerThemer( targetElement, options ) ); |
| 36 | | - }); |
| 37 | | - }) |
| 38 | | - return this; |
| 39 | | - } |
| 40 | | - |
| 41 | | - } )( jQuery ); |
| 42 | | - |
| | 24 | + |
| 43 | 25 | })( window.mw ); |
| \ No newline at end of file |
| Index: branches/MwEmbedStandAlone/modules/Playlist/mw.Playlist.js |
| — | — | @@ -124,12 +124,12 @@ |
| 125 | 125 | }) |
| 126 | 126 | .append( |
| 127 | 127 | $j('<div />') |
| 128 | | - .addClass( 'playlistSet-list' ) |
| 129 | | - .css("width", '2000px') |
| | 128 | + .addClass( 'playlistSetList' ) |
| | 129 | + .css("width", '200px') |
| 130 | 130 | ); |
| 131 | 131 | $j( _this.target ).append( $plListContainer ); |
| 132 | 132 | |
| 133 | | - var $plListSet = $j( _this.target ).find( '.playlistSet-list' ); |
| | 133 | + var $plListSet = $j( _this.target ).find( '.playlistSetList' ); |
| 134 | 134 | |
| 135 | 135 | $j.each( playlistSet, function( inx, playlist){ |
| 136 | 136 | // Add a divider |
| — | — | @@ -556,7 +556,7 @@ |
| 557 | 557 | $j('<tr />') |
| 558 | 558 | .append( |
| 559 | 559 | $j( '<td />') |
| 560 | | - .css('width', _this.itemThumbWidth ) |
| | 560 | + .css('width', _this.itemThumbWidth + 'px' ) |
| 561 | 561 | .append( |
| 562 | 562 | $j('<img />') |
| 563 | 563 | .attr({ |
| Index: branches/MwEmbedStandAlone/modules/EmbedPlayer/skins/kskin/mw.PlayerSkinKskin.js |
| — | — | @@ -180,6 +180,7 @@ |
| 181 | 181 | } ); |
| 182 | 182 | |
| 183 | 183 | }, |
| | 184 | + |
| 184 | 185 | /** |
| 185 | 186 | * checks for menu overlay and runs menu bindings if unset |
| 186 | 187 | */ |
| — | — | @@ -200,7 +201,7 @@ |
| 201 | 202 | /** |
| 202 | 203 | * Close the menu overlay |
| 203 | 204 | */ |
| 204 | | - closeMenuOverlay: function( ) { |
| | 205 | + closeMenuOverlay: function() { |
| 205 | 206 | mw.log("PlayerSkin: close menu overlay" ); |
| 206 | 207 | |
| 207 | 208 | var $optionsMenu = this.$playerTarget.find( '.k-options' ); |
| — | — | @@ -447,7 +448,7 @@ |
| 448 | 449 | .append( |
| 449 | 450 | $j('<span>').html( |
| 450 | 451 | gM( 'mwe-embedplayer-credit-title' , |
| 451 | | - // We use a div container to easialy get at the built out link |
| | 452 | + // We use a div container to easily get at the built out link |
| 452 | 453 | $j('<div>').html( |
| 453 | 454 | $j('<a/>').attr({ |
| 454 | 455 | 'href' : articleUrl, |
| Index: branches/MwEmbedStandAlone/modules/EmbedPlayer/skins/mw.PlayerControlBuilder.js |
| — | — | @@ -202,26 +202,34 @@ |
| 203 | 203 | }, |
| 204 | 204 | |
| 205 | 205 | /** |
| 206 | | - * Get the fullscreen player css |
| 207 | | - */ |
| 208 | | - getFullscreenPlayerCss: function() { |
| | 206 | + * Get a window size for the player while preserving aspect ratio: |
| | 207 | + * |
| | 208 | + * @param {object} windowSize |
| | 209 | + * object that set { 'width': {width}, 'height':{height} } of target window |
| | 210 | + * @return {object} |
| | 211 | + * css settings for fullscreen player |
| | 212 | + */ |
| | 213 | + getAspectPlayerWindowCss: function( windowSize ) { |
| 209 | 214 | var embedPlayer = this.embedPlayer; |
| 210 | 215 | // Setup target height width based on max window size |
| 211 | | - var fullWidth = $j( window ).width() - 2 ; |
| 212 | | - var fullHeight = $j( window ).height() ; |
| 213 | | - |
| | 216 | + if( !windowSize ){ |
| | 217 | + var windowSize = { |
| | 218 | + 'width' : $j( window ).width(), |
| | 219 | + 'height' : $j( window ).height() |
| | 220 | + }; |
| | 221 | + } |
| 214 | 222 | // Set target width |
| 215 | | - var targetWidth = fullWidth; |
| 216 | | - var targetHeight = targetWidth * ( embedPlayer.getHeight() / embedPlayer.getWidth() ); |
| 217 | | - // Check if it exceeds the height constraint: |
| 218 | | - if( targetHeight > fullHeight ){ |
| 219 | | - targetHeight = fullHeight; |
| 220 | | - targetWidth = targetHeight * ( embedPlayer.getWidth() / embedPlayer.getHeight() ); |
| | 223 | + var targetWidth = windowSize.width; |
| | 224 | + var targetHeight = targetWidth * ( embedPlayer.getHeight() / embedPlayer.getWidth() ); |
| | 225 | + // Check if it exceeds the height constraint: |
| | 226 | + if( targetHeight > windowSize.height ){ |
| | 227 | + targetHeight = windowSize.height; |
| | 228 | + targetWidth = targetHeight * ( embedPlayer.getWidth() / embedPlayer.getHeight() ); |
| 221 | 229 | } |
| 222 | | - var offsetTop = ( targetHeight < fullHeight )? ( fullHeight- targetHeight ) / 2 : 0; |
| 223 | | - var offsetLeft = ( targetWidth < fullWidth )? ( fullWidth- targetWidth ) / 2 : 0; |
| 224 | | - |
| 225 | | - //mw.log(" targetWidth: " + targetWidth + ' fullwidth: ' + fullWidth + ' :: ' + ( fullWidth- targetWidth ) / 2 ); |
| | 230 | + var offsetTop = ( targetHeight < windowSize.height )? ( windowSize.height- targetHeight ) / 2 : 0; |
| | 231 | + var offsetLeft = ( targetWidth < windowSize.width )? ( windowSize.width- targetWidth ) / 2 : 0; |
| | 232 | + |
| | 233 | + //mw.log(" targetWidth: " + targetWidth + ' windowSize.width: ' + windowSize.width + ' :: ' + ( windowSize.width- targetWidth ) / 2 ); |
| 226 | 234 | return { |
| 227 | 235 | 'height': targetHeight, |
| 228 | 236 | 'width' : targetWidth, |
| — | — | @@ -233,8 +241,8 @@ |
| 234 | 242 | /** |
| 235 | 243 | * Get the fullscreen play button css |
| 236 | 244 | */ |
| 237 | | - getFullscreenPlayButtonCss: function() { |
| 238 | | - var pos = this.getFullscreenPlayerCss(); |
| | 245 | + getFullscreenPlayButtonCss: function( size ) { |
| | 246 | + var pos = this.getAspectPlayerWindowCss( size ); |
| 239 | 247 | return { |
| 240 | 248 | 'left' : ( ( pos.width - this.getComponentWidth( 'playButtonLarge' ) ) / 2 ), |
| 241 | 249 | 'top' : ( ( pos.height - this.getComponentHeight( 'playButtonLarge' ) ) / 2 ) |
| — | — | @@ -244,9 +252,9 @@ |
| 245 | 253 | /** |
| 246 | 254 | * Get the fullscreen text css |
| 247 | 255 | */ |
| 248 | | - getInterfaceSizeTextCss: function() { |
| | 256 | + getInterfaceSizeTextCss: function( size ) { |
| 249 | 257 | // Some arbitrary scale relative to window size ( 400px wide is text size 105% ) |
| 250 | | - var textSize = this.embedPlayer.$interface.width() / 3.8; |
| | 258 | + var textSize = size.width / 3.8; |
| 251 | 259 | if( textSize < 95 ) textSize = 95; |
| 252 | 260 | if( textSize > 200 ) textSize = 200; |
| 253 | 261 | //mw.log(' win size is: ' + $j( window ).width() + ' ts: ' + textSize ); |
| — | — | @@ -340,41 +348,37 @@ |
| 341 | 349 | if( $interface.offsetParent().get(0).tagName.toLowerCase() != 'body' ) { |
| 342 | 350 | topOffset = -this.windowOffset.top + 'px'; |
| 343 | 351 | leftOffset = -this.windowOffset.left + 'px'; |
| 344 | | - } |
| | 352 | + } |
| | 353 | + |
| 345 | 354 | |
| 346 | | - // Resize interface container |
| 347 | | - $interface.animate( { |
| | 355 | + // Set the player height width: |
| | 356 | + $j( embedPlayer ).css( { |
| | 357 | + 'position' : 'relative' |
| | 358 | + } ); |
| | 359 | + |
| | 360 | + // Overflow hidden in fullscreen: |
| | 361 | + $interface.css('overlow', 'hidden'); |
| | 362 | + |
| | 363 | + // Resize the player keeping aspect and with the widow scroll offset: |
| | 364 | + _this.resizePlayer({ |
| 348 | 365 | 'top' : topOffset, |
| 349 | 366 | 'left' : leftOffset, |
| 350 | 367 | 'width' : $j( window ).width(), |
| 351 | | - 'height' : $j( window ).height(), |
| 352 | | - 'overlow' : 'hidden' |
| 353 | | - }, function(){ |
| 354 | | - // Remove absolute css of the interface parents |
| 355 | | - $interface.parents().each( function() { |
| 356 | | - //mw.log(' parent : ' + $j( this ).attr('id' ) + ' class: ' + $j( this ).attr('class') + ' pos: ' + $j( this ).css( 'position' ) ); |
| 357 | | - if( $j( this ).css( 'position' ) == 'absolute' ) { |
| 358 | | - _this.parentsAbsolute.push( $j( this ) ); |
| 359 | | - $j( this ).css( 'position', null ); |
| 360 | | - mw.log(' should update position: ' + $j( this ).css( 'position' ) ); |
| 361 | | - } |
| 362 | | - } ); |
| 363 | | - |
| 364 | | - // Resize the timed text font size per new player width |
| 365 | | - $interface.find( '.track' ).css( _this.getInterfaceSizeTextCss() ); |
| | 368 | + 'height' : $j( window ).height() |
| | 369 | + }, true); |
| | 370 | + |
| | 371 | + // Remove absolute css of the interface parents |
| | 372 | + $interface.parents().each( function() { |
| | 373 | + //mw.log(' parent : ' + $j( this ).attr('id' ) + ' class: ' + $j( this ).attr('class') + ' pos: ' + $j( this ).css( 'position' ) ); |
| | 374 | + if( $j( this ).css( 'position' ) == 'absolute' ) { |
| | 375 | + _this.parentsAbsolute.push( $j( this ) ); |
| | 376 | + $j( this ).css( 'position', null ); |
| | 377 | + mw.log(' should update position: ' + $j( this ).css( 'position' ) ); |
| | 378 | + } |
| 366 | 379 | } ); |
| | 380 | + |
| | 381 | + |
| 367 | 382 | |
| 368 | | - // Set the player height width: |
| 369 | | - $j( embedPlayer ).css( { |
| 370 | | - 'position' : 'relative' |
| 371 | | - } ) |
| 372 | | - // Animate a zoom ( while keeping aspect ) |
| 373 | | - .animate( _this.getFullscreenPlayerCss() ); |
| 374 | | - |
| 375 | | - |
| 376 | | - // Reposition play-btn-large ( this is unfortunately not easy to position with 'margin': 'auto' |
| 377 | | - $interface.find('.play-btn-large').animate( _this.getFullscreenPlayButtonCss() ); |
| 378 | | - |
| 379 | 383 | // Bind mouse move in interface to hide control bar |
| 380 | 384 | _this.mouseMovedFlag = false; |
| 381 | 385 | $interface.mousemove( function(e){ |
| — | — | @@ -402,21 +406,10 @@ |
| 403 | 407 | // Bind resize resize window to resize window |
| 404 | 408 | $j( window ).resize( function() { |
| 405 | 409 | if( _this.fullscreenMode ){ |
| 406 | | - // Update interface container: |
| 407 | | - $interface.css( { |
| 408 | | - 'top' : '0px', |
| 409 | | - 'left' : '0px', |
| | 410 | + _this.resizePlayer({ |
| 410 | 411 | 'width' : $j( window ).width(), |
| 411 | | - 'height' : $j( window ).height() |
| 412 | | - } ); |
| 413 | | - // Update player size |
| 414 | | - $j( embedPlayer ).css( _this.getFullscreenPlayerCss() ); |
| 415 | | - |
| 416 | | - // Update play button pos |
| 417 | | - $interface.find('.play-btn-large').css( _this.getFullscreenPlayButtonCss() ); |
| 418 | | - |
| 419 | | - // Update the timed text size |
| 420 | | - $interface.find( '.track' ).css( _this.getInterfaceSizeTextCss() ); |
| | 412 | + 'height' : $j( window ).height() |
| | 413 | + }) |
| 421 | 414 | } |
| 422 | 415 | }); |
| 423 | 416 | |
| — | — | @@ -430,6 +423,40 @@ |
| 431 | 424 | }, |
| 432 | 425 | |
| 433 | 426 | /** |
| | 427 | + * Resize the player to a target size keeping aspect ratio |
| | 428 | + */ |
| | 429 | + resizePlayer: function( size, animate ){ |
| | 430 | + var _this = this; |
| | 431 | + // Update interface container: |
| | 432 | + var interfaceCss = { |
| | 433 | + 'top' : ( size.top ) ? size.top : '0px', |
| | 434 | + 'left' : ( size.left ) ? size.left : '0px', |
| | 435 | + 'width' : size.width, |
| | 436 | + 'height' : size.height |
| | 437 | + }; |
| | 438 | + // Set up local pointer to interface: |
| | 439 | + var embedPlayer = this.embedPlayer; |
| | 440 | + var $interface = embedPlayer.$interface; |
| | 441 | + if( animate ){ |
| | 442 | + $interface.animate( interfaceCss ); |
| | 443 | + // Update player size |
| | 444 | + $j( embedPlayer ).animate( _this.getAspectPlayerWindowCss( size ) ); |
| | 445 | + // Update play button pos |
| | 446 | + $interface.find('.play-btn-large').animate( _this.getFullscreenPlayButtonCss( size ) ); |
| | 447 | + // Update the timed text size |
| | 448 | + $interface.find( '.track' ).animate( _this.getInterfaceSizeTextCss( size ) ); |
| | 449 | + } else { |
| | 450 | + $interface.css( interfaceCss ); |
| | 451 | + // Update player size |
| | 452 | + $j( embedPlayer ).css( _this.getAspectPlayerWindowCss( size ) ); |
| | 453 | + // Update play button pos |
| | 454 | + $interface.find('.play-btn-large').css( _this.getFullscreenPlayButtonCss( size ) ); |
| | 455 | + // Update the timed text size |
| | 456 | + $interface.find( '.track' ).css( _this.getInterfaceSizeTextCss( size ) ); |
| | 457 | + } |
| | 458 | + }, |
| | 459 | + |
| | 460 | + /** |
| 434 | 461 | * Restore the window player |
| 435 | 462 | */ |
| 436 | 463 | restoreWindowPlayer: function() { |
| — | — | @@ -476,10 +503,13 @@ |
| 477 | 504 | |
| 478 | 505 | // Restore the body scroll bar |
| 479 | 506 | $j('body').css( 'overflow', 'auto' ); |
| 480 | | - |
| 481 | | - // Resize the timed text font size per window width |
| 482 | | - $interface.find( '.track' ).css( _this.getInterfaceSizeTextCss() ); |
| 483 | | - |
| | 507 | + |
| | 508 | + // Resize the timed text font size per window width |
| | 509 | + $interface.find( '.track' ).css( _this.getInterfaceSizeTextCss({ |
| | 510 | + 'width' : embedPlayer.getWidth(), |
| | 511 | + 'height' : interfaceHeight |
| | 512 | + }) ); |
| | 513 | + |
| 484 | 514 | } ); |
| 485 | 515 | mw.log( 'restore embedPlayer:: ' + embedPlayer.getWidth() + ' h: ' + embedPlayer.getHeight()); |
| 486 | 516 | // Restore the player: |
| — | — | @@ -688,10 +718,17 @@ |
| 689 | 719 | return false; |
| 690 | 720 | } |
| 691 | 721 | } |
| 692 | | - |
| 693 | | - // Check for h264 and or flash/flv source and playback support and don't show warning |
| 694 | | - if( |
| 695 | | - ( mw.EmbedTypes.players.getMIMETypePlayers( 'video/h264' ).length |
| | 722 | + |
| | 723 | + // Chrome's webM support is oky though: |
| | 724 | + if( /chrome/.test(navigator.userAgent.toLowerCase() ) && |
| | 725 | + mw.EmbedTypes.players.getMIMETypePlayers( 'video/webm' ).length ){ |
| | 726 | + return false; |
| | 727 | + } |
| | 728 | + |
| | 729 | + |
| | 730 | + // Check for h264 and or flash/flv source and playback support and don't show warning |
| | 731 | + if( |
| | 732 | + ( mw.EmbedTypes.players.getMIMETypePlayers( 'video/h264' ).length |
| 696 | 733 | && this.embedPlayer.mediaElement.getSources( 'video/h264' ).length ) |
| 697 | 734 | || |
| 698 | 735 | ( mw.EmbedTypes.players.getMIMETypePlayers( 'video/x-flv' ).length |
| — | — | @@ -973,8 +1010,8 @@ |
| 974 | 1011 | var $overlay = embedPlayer.$interface.find( '.overlay-win,.ui-widget-overlay,.ui-widget-shadow' ); |
| 975 | 1012 | |
| 976 | 1013 | this.displayOptionsMenuFlag = false; |
| 977 | | - mw.log(' closeMenuOverlay: ' + this.displayOptionsMenuFlag); |
| 978 | | - |
| | 1014 | + //mw.log(' closeMenuOverlay: ' + this.displayOptionsMenuFlag); |
| | 1015 | + |
| 979 | 1016 | $overlay.fadeOut( "slow", function() { |
| 980 | 1017 | $overlay.remove(); |
| 981 | 1018 | } ); |
| Index: branches/MwEmbedStandAlone/modules/EmbedPlayer/EmbedPlayer.i18n.php |
| — | — | @@ -49,6 +49,7 @@ |
| 50 | 50 | 'mwe-embedplayer-ogg-player-vlc-player' => 'VLC player', |
| 51 | 51 | 'mwe-embedplayer-ogg-player-oggNative' => 'HTML5 Ogg player', |
| 52 | 52 | 'mwe-embedplayer-ogg-player-h264Native' => 'HTML5 H.264 player', |
| | 53 | + 'mwe-embedplayer-ogg-player-webmNative' => 'HTML5 WebM player', |
| 53 | 54 | 'mwe-embedplayer-ogg-player-oggPlugin' => 'Generic Ogg plugin', |
| 54 | 55 | 'mwe-embedplayer-ogg-player-quicktime-mozilla' => 'QuickTime plugin', |
| 55 | 56 | 'mwe-embedplayer-ogg-player-quicktime-activex' => 'QuickTime ActiveX', |