| Index: branches/js2-work/phase3/js/mwEmbed/tests/Sequence_Render.html |
| — | — | @@ -1,68 +0,0 @@ |
| 2 | | -<!doctype html> |
| 3 | | -<html> |
| 4 | | -<head> |
| 5 | | - <title>Seeking Render Example</title> |
| 6 | | - <script type="text/javascript" src="../mwEmbed.js?debug=true"></script> |
| 7 | | - <style> |
| 8 | | - #render_box { |
| 9 | | - position:absolute; |
| 10 | | - width:320px; |
| 11 | | - height:240px; |
| 12 | | - } |
| 13 | | - |
| 14 | | - </style> |
| 15 | | - <script> |
| 16 | | -mw.ready(function(){ |
| 17 | | - |
| 18 | | - $j('#render_player').firefoggRender({ |
| 19 | | - 'render_options':{ |
| 20 | | - "framerate" : 30 |
| 21 | | - }, |
| 22 | | - 'target_startRender':'#buttonStart', |
| 23 | | - 'target_stopRender': '#buttonStop', |
| 24 | | - 'target_timeStatus': '#time_status' |
| 25 | | - |
| 26 | | - },function( foggRender ){ |
| 27 | | - $j('#loading_text').hide(); |
| 28 | | - if( foggRender.enabled ){ |
| 29 | | - $j('#info_control').show(); |
| 30 | | - }else{ |
| 31 | | - $j('#info_control').html( |
| 32 | | - foggRender.myFogg.getTargetHtml('target_please_install') |
| 33 | | - ); |
| 34 | | - if(!($j.browser.mozilla && $j.browser.version >= '1.9.1')) { |
| 35 | | - $j('#info_control').html( |
| 36 | | - foggRender.myFogg.getTargetHtml('target_use_latest_fox') |
| 37 | | - ); |
| 38 | | - } |
| 39 | | - } |
| 40 | | - }); |
| 41 | | - |
| 42 | | -}); |
| 43 | | - </script> |
| 44 | | -</head> |
| 45 | | -<body> |
| 46 | | -<playlist id="render_player" src="media/sample_smil.xml" controls="false" width="320" height="240"></playlist> |
| 47 | | - |
| 48 | | -<!-- <video id="render_player" |
| 49 | | - durationHint="27" |
| 50 | | - src="http://upload.wikimedia.org/wikipedia/commons/4/41/Panthera_tigris8.ogg" |
| 51 | | - style="width:320px;height:240px;" |
| 52 | | - controls="false" |
| 53 | | - poster="http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Panthera_tigris8.ogg/mid-Panthera_tigris8.ogg.jpg"> |
| 54 | | -</video> |
| 55 | | - |
| 56 | | - |
| 57 | | -<span id="loading_text" style="position:absolute; top:320px;"> |
| 58 | | -loading render system <blink>...</blink> |
| 59 | | -</span> |
| 60 | | -<div id="info_control" style="display:none;"> |
| 61 | | - <button id="buttonStart">Do Render</button> |
| 62 | | - <button id="buttonStop">Stop</button> |
| 63 | | - Current Time: <input type="text" id="time_status" value="0.0" /> |
| 64 | | - <span id="status"></span><br> |
| 65 | | -</div> |
| 66 | | - |
| 67 | | -</body> |
| 68 | | -</html> |
| Index: branches/js2-work/phase3/js/mwEmbed/tests/Playlist_Render.html |
| — | — | @@ -0,0 +1,71 @@ |
| | 2 | +<!doctype html> |
| | 3 | +<html> |
| | 4 | +<head> |
| | 5 | + <title>Seeking Render Example</title> |
| | 6 | + <script type="text/javascript" src="../mwEmbed.js?debug=true"></script> |
| | 7 | + <style> |
| | 8 | + #render_box { |
| | 9 | + position:absolute; |
| | 10 | + width:320px; |
| | 11 | + height:240px; |
| | 12 | + } |
| | 13 | + |
| | 14 | + </style> |
| | 15 | + <script> |
| | 16 | +mw.ready(function(){ |
| | 17 | + mw.load('FirefoggRender',function(){ |
| | 18 | + |
| | 19 | + var foggRender = $j( '#render_player' ).firefoggRender({ |
| | 20 | + 'render_options':{ |
| | 21 | + "framerate" : 30 |
| | 22 | + }, |
| | 23 | + 'target_startRender':'#buttonStart', |
| | 24 | + 'target_stopRender': '#buttonStop', |
| | 25 | + 'target_timeStatus': '#time_status' |
| | 26 | + }); |
| | 27 | + |
| | 28 | + $j('#loading_text').hide(); |
| | 29 | + if( foggRender.enabled ){ |
| | 30 | + $j('#info_control').show(); |
| | 31 | + }else{ |
| | 32 | + $j('#info_control').html( |
| | 33 | + foggRender.myFogg.getTargetHtml('target_please_install') |
| | 34 | + ); |
| | 35 | + if(!($j.browser.mozilla && $j.browser.version >= '1.9.1')) { |
| | 36 | + $j('#info_control').html( |
| | 37 | + foggRender.myFogg.getTargetHtml('target_use_latest_fox') |
| | 38 | + ); |
| | 39 | + } |
| | 40 | + } |
| | 41 | + |
| | 42 | + }); |
| | 43 | + |
| | 44 | +}); |
| | 45 | + </script> |
| | 46 | +</head> |
| | 47 | +<body> |
| | 48 | +<!-- <playlist id="render_player" src="media/sample_smil.xml" controls="false" width="320" height="240"></playlist> --> |
| | 49 | + |
| | 50 | + |
| | 51 | +<video id="render_player" |
| | 52 | + durationHint="5" |
| | 53 | + src="http://upload.wikimedia.org/wikipedia/commons/4/41/Panthera_tigris8.ogg" |
| | 54 | + style="width:320px;height:240px;" |
| | 55 | + controls="false" |
| | 56 | + poster="http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Panthera_tigris8.ogg/mid-Panthera_tigris8.ogg.jpg"> |
| | 57 | +</video> |
| | 58 | + |
| | 59 | + |
| | 60 | +<span id="loading_text" style="position:absolute; top:320px;"> |
| | 61 | +loading render system <blink>...</blink> |
| | 62 | +</span> |
| | 63 | +<br><br> |
| | 64 | +<div id="info_control" style="display:none;"> |
| | 65 | + <button id="buttonStart">Do Render</button> |
| | 66 | + <button id="buttonStop">Stop</button> |
| | 67 | + Current Time: <input type="text" id="time_status" value="0.0" /> |
| | 68 | + <span id="status"></span><br> |
| | 69 | +</div> |
| | 70 | + |
| | 71 | +</body> |
| | 72 | +</html> |
| Property changes on: branches/js2-work/phase3/js/mwEmbed/tests/Playlist_Render.html |
| ___________________________________________________________________ |
| Name: svn:mergeinfo |
| 1 | 73 | + /branches/REL1_15/phase3/js2/mwEmbed/example_usage/Sequence_Render.html:51646 |
| /branches/sqlite/js2/mwEmbed/example_usage/Sequence_Render.html:58211-58321 |
| Name: svn:eol-style |
| 2 | 74 | + native |
| Index: branches/js2-work/phase3/js/mwEmbed/skins/kskin/kskinConfig.js |
| — | — | @@ -56,19 +56,19 @@ |
| 57 | 57 | 'options_menu': { |
| 58 | 58 | 'w':0, |
| 59 | 59 | 'o':function( ctrlObj ) { |
| 60 | | - var embedObj = ctrlObj.embedObj; |
| | 60 | + var embedPlayer = ctrlObj.embedPlayer; |
| 61 | 61 | |
| 62 | 62 | // Setup menu offset ( if player height < getOverlayHeight ) |
| 63 | | - var menuOffset = ( embedObj.getPlayerHeight() < ctrlObj.getOverlayHeight() ) ? |
| 64 | | - 'top:' + ( embedObj.getPlayerHeight() + ctrlObj.getControlBarHeight() ) + 'px;' : ''; |
| | 63 | + var menuOffset = ( embedPlayer.getPlayerHeight() < ctrlObj.getOverlayHeight() ) ? |
| | 64 | + 'top:' + ( embedPlayer.getPlayerHeight() + ctrlObj.getControlBarHeight() ) + 'px;' : ''; |
| 65 | 65 | |
| 66 | 66 | // Special common overflow hack: |
| 67 | 67 | // NOTE: should re-factor to just append menu to top body when it does not "fit" in the player |
| 68 | 68 | if( menuOffset != '' ) |
| 69 | | - $j( embedObj ).parents( '.thumbinner' ).css( 'overflow', 'visible' ); |
| | 69 | + $j( embedPlayer ).parents( '.thumbinner' ).css( 'overflow', 'visible' ); |
| 70 | 70 | |
| 71 | 71 | var o = '' + |
| 72 | | - '<div id="blackbg_' + embedObj.id +'" class="k-menu ui-widget-content" ' + |
| | 72 | + '<div id="blackbg_' + embedPlayer.id +'" class="k-menu ui-widget-content" ' + |
| 73 | 73 | 'style="width:' + ctrlObj.getOverlayWidth() + 'px; height:' + ctrlObj.getOverlayHeight() + 'px;' + menuOffset + '">' + |
| 74 | 74 | '<ul class="k-menu-bar">'; |
| 75 | 75 | // Output menu item containers: |
| — | — | @@ -97,25 +97,25 @@ |
| 98 | 98 | * Get minimal width for interface overlay |
| 99 | 99 | */ |
| 100 | 100 | getOverlayWidth: function(){ |
| 101 | | - return ( this.embedObj.getPlayerWidth() < 200 )? 200 : this.embedObj.getPlayerWidth(); |
| | 101 | + return ( this.embedPlayer.getPlayerWidth() < 200 )? 200 : this.embedPlayer.getPlayerWidth(); |
| 102 | 102 | }, |
| 103 | 103 | |
| 104 | 104 | /** |
| 105 | 105 | * Get minimal height for interface overlay |
| 106 | 106 | */ |
| 107 | 107 | getOverlayHeight: function(){ |
| 108 | | - return ( this.embedObj.getPlayerHeight() < 160 )? 160 : this.embedObj.getPlayerHeight(); |
| | 108 | + return ( this.embedPlayer.getPlayerHeight() < 160 )? 160 : this.embedPlayer.getPlayerHeight(); |
| 109 | 109 | }, |
| 110 | 110 | |
| 111 | 111 | /** |
| 112 | 112 | * Adds the skin Control Bindings |
| 113 | 113 | */ |
| 114 | 114 | addSkinControlBindings: function() { |
| 115 | | - var embedObj = this.embedObj; |
| | 115 | + var embedPlayer = this.embedPlayer; |
| 116 | 116 | var _this = this; |
| 117 | 117 | |
| 118 | 118 | // Set up control bar pointer |
| 119 | | - var $playerTarget = embedObj.$target; |
| | 119 | + var $playerTarget = embedPlayer.$interface; |
| 120 | 120 | |
| 121 | 121 | // Options menu display: |
| 122 | 122 | $playerTarget.find( '.k-options' ) |
| — | — | @@ -123,8 +123,8 @@ |
| 124 | 124 | .click( function() { |
| 125 | 125 | if ( $playerTarget.find( '.k-menu' ).length == 0 ) { |
| 126 | 126 | // Stop the player if it does not support overlays: |
| 127 | | - if ( !embedObj.supports['overlays'] ){ |
| 128 | | - embedObj.stop(); |
| | 127 | + if ( !embedPlayer.supports['overlays'] ){ |
| | 128 | + embedPlayer.stop(); |
| 129 | 129 | } |
| 130 | 130 | // Add the menu binding |
| 131 | 131 | _this.addMeunBinding(); |
| — | — | @@ -154,9 +154,9 @@ |
| 155 | 155 | */ |
| 156 | 156 | addMeunBinding: function() { |
| 157 | 157 | var _this = this; |
| 158 | | - var embedObj = this.embedObj; |
| | 158 | + var embedPlayer = this.embedPlayer; |
| 159 | 159 | // Set local player target pointer: |
| 160 | | - var $playerTarget = embedObj.$target; |
| | 160 | + var $playerTarget = embedPlayer.$interface; |
| 161 | 161 | |
| 162 | 162 | // check if k-menu already exists: |
| 163 | 163 | if ( $playerTarget.find( '.k-menu' ).length != 0 ) |
| — | — | @@ -197,14 +197,14 @@ |
| 198 | 198 | * @param {String} menu_itme Menu item key to display |
| 199 | 199 | */ |
| 200 | 200 | showMenuItem:function( menu_item ) { |
| 201 | | - var embedObj = this.embedObj; |
| | 201 | + var embedPlayer = this.embedPlayer; |
| 202 | 202 | //handle special k-skin specific display; |
| 203 | 203 | if( menu_item == 'credits'){ |
| 204 | 204 | this.showCredits(); |
| 205 | 205 | }else{ |
| 206 | | - // Call the base embedObj "show{Item}" |
| 207 | | - this.embedObj['show' + menu_item.charAt( 0 ).toUpperCase() + menu_item.substring( 1 )]( |
| 208 | | - embedObj.$target.find( '.menu-' + menu_item ) |
| | 206 | + // Call the base embedPlayer "show{Item}" |
| | 207 | + this.embedPlayer['show' + menu_item.charAt( 0 ).toUpperCase() + menu_item.substring( 1 )]( |
| | 208 | + embedPlayer.$interface.find( '.menu-' + menu_item ) |
| 209 | 209 | ); |
| 210 | 210 | } |
| 211 | 211 | }, |
| — | — | @@ -221,9 +221,9 @@ |
| 222 | 222 | */ |
| 223 | 223 | showCredits: function() { |
| 224 | 224 | //set up the shortcuts: |
| 225 | | - embedObj = this.embedObj; |
| | 225 | + embedPlayer = this.embedPlayer; |
| 226 | 226 | var _this = this; |
| 227 | | - $target = embedObj.$target.find( '.menu-credits' ); |
| | 227 | + $target = embedPlayer.$interface.find( '.menu-credits' ); |
| 228 | 228 | |
| 229 | 229 | $target.html( '<h2>' + gM( 'mwe-credits' ) + '</h2>' + |
| 230 | 230 | '<div class="credits_box ui-corner-all">' + |
| — | — | @@ -243,7 +243,7 @@ |
| 244 | 244 | ); |
| 245 | 245 | } |
| 246 | 246 | |
| 247 | | - if( !embedObj.wikiTitleKey ){ |
| | 247 | + if( !embedPlayer.wikiTitleKey ){ |
| 248 | 248 | $target.find('.credits_box').text( |
| 249 | 249 | 'Error: no title key to grab credits with' |
| 250 | 250 | ); |
| — | — | @@ -253,7 +253,7 @@ |
| 254 | 254 | // Do the api request to populate the credits via the wikiTitleKey ( tied to "commons" ) |
| 255 | 255 | var request = { |
| 256 | 256 | // Normalize the File NS (ie sometimes its present in wikiTitleKey other times not |
| 257 | | - 'titles' : 'File:' + embedObj.wikiTitleKey.replace(/File:|Image:/, '' ), |
| | 257 | + 'titles' : 'File:' + embedPlayer.wikiTitleKey.replace(/File:|Image:/, '' ), |
| 258 | 258 | 'prop' : 'revisions', |
| 259 | 259 | 'rvprop' : 'content' |
| 260 | 260 | }; |
| — | — | @@ -261,7 +261,7 @@ |
| 262 | 262 | mw.getJSON( mw.commons_api_url, request, function( data ) { |
| 263 | 263 | if( !data || !data.query || !data.query.pages ){ |
| 264 | 264 | $target.find('.credits_box').text( |
| 265 | | - 'Error: title key: ' + embedObj.wikiTitleKey + ' not found' |
| | 265 | + 'Error: title key: ' + embedPlayer.wikiTitleKey + ' not found' |
| 266 | 266 | ); |
| 267 | 267 | return false; |
| 268 | 268 | } |
| — | — | @@ -285,11 +285,11 @@ |
| 286 | 286 | * @parm {String} wikiText Resource wiki text page contents |
| 287 | 287 | */ |
| 288 | 288 | doCreditLineFromWikiText: function ( wikiText ){ |
| 289 | | - var embedObj = this.embedObj; |
| | 289 | + var embedPlayer = this.embedPlayer; |
| 290 | 290 | |
| 291 | 291 | // Get the title str |
| 292 | | - var titleStr = embedObj.wikiTitleKey.replace(/_/g, ' '); |
| 293 | | - var titleLink = 'http://commons.wikimedia.org/wiki/File:' + embedObj.wikiTitleKey; |
| | 292 | + var titleStr = embedPlayer.wikiTitleKey.replace(/_/g, ' '); |
| | 293 | + var titleLink = 'http://commons.wikimedia.org/wiki/File:' + embedPlayer.wikiTitleKey; |
| 294 | 294 | |
| 295 | 295 | var imgWidth = ( this.getOverlayWidth() < 250 )? 45 : 90; |
| 296 | 296 | |
| — | — | @@ -302,10 +302,10 @@ |
| 303 | 303 | }).html( |
| 304 | 304 | $j('<img/>').attr( { |
| 305 | 305 | 'border': 0, |
| 306 | | - 'src' : embedObj.thumbnail |
| | 306 | + 'src' : embedPlayer.thumbnail |
| 307 | 307 | } ).css( { |
| 308 | 308 | 'width' : imgWidth, |
| 309 | | - 'height': parseInt( imgWidth * ( embedObj.height / embedObj.width ) ) |
| | 309 | + 'height': parseInt( imgWidth * ( embedPlayer.height / embedPlayer.width ) ) |
| 310 | 310 | } ) |
| 311 | 311 | ) |
| 312 | 312 | ) |
| Index: branches/js2-work/phase3/js/mwEmbed/skins/kskin/playerSkin.css |
| — | — | @@ -2,7 +2,7 @@ |
| 3 | 3 | * K-skin player |
| 4 | 4 | */ |
| 5 | 5 | .k-player { |
| 6 | | - color: white; |
| | 6 | + color: #FFF; |
| 7 | 7 | } |
| 8 | 8 | |
| 9 | 9 | /* large play button */ |
| — | — | @@ -95,6 +95,7 @@ |
| 96 | 96 | top: 0; |
| 97 | 97 | width: 8px; |
| 98 | 98 | cursor: pointer; |
| | 99 | + -moz-border-radius:5px 5px 5px 5px; |
| 99 | 100 | } |
| 100 | 101 | |
| 101 | 102 | .k-player .time-disp { |
| Index: branches/js2-work/phase3/js/mwEmbed/skins/ctrlBuilder.js |
| — | — | @@ -6,8 +6,8 @@ |
| 7 | 7 | * ctrlBuilder object |
| 8 | 8 | * @param the embedPlayer element we are targeting |
| 9 | 9 | */ |
| 10 | | -var ctrlBuilder = function( embedObj, options ) { |
| 11 | | - return this.init( embedObj, options ); |
| | 10 | +var ctrlBuilder = function( embedPlayer, options ) { |
| | 11 | + return this.init( embedPlayer, options ); |
| 12 | 12 | }; |
| 13 | 13 | |
| 14 | 14 | /* |
| — | — | @@ -31,7 +31,7 @@ |
| 32 | 32 | // Default control bar height is 29 |
| 33 | 33 | height: 29, |
| 34 | 34 | |
| 35 | | - // Default supported componets is merged with embedObject supported types |
| | 35 | + // Default supported components is merged with embedPlayerect supported types |
| 36 | 36 | supportedComponets: { |
| 37 | 37 | 'options':true, |
| 38 | 38 | 'borders':true |
| — | — | @@ -39,17 +39,17 @@ |
| 40 | 40 | /** |
| 41 | 41 | * Initialization Object for the control builder |
| 42 | 42 | * |
| 43 | | - * @param {Object} embedObj EmbedPlayer interface |
| | 43 | + * @param {Object} embedPlayer EmbedPlayer interface |
| 44 | 44 | */ |
| 45 | | - init: function( embedObj ) { |
| | 45 | + init: function( embedPlayer ) { |
| 46 | 46 | var _this = this; |
| 47 | | - this.embedObj = embedObj; |
| | 47 | + this.embedPlayer = embedPlayer; |
| 48 | 48 | |
| 49 | 49 | // Check for skin overrides for ctrlBuilder |
| 50 | | - if ( window[ embedObj.skinName + 'Config'] ) { |
| | 50 | + if ( window[ embedPlayer.skinName + 'Config'] ) { |
| 51 | 51 | |
| 52 | 52 | // Clone as to not override prototype: |
| 53 | | - var _this = $j.extend( true, { }, this, window[ embedObj.skinName + 'Config'] ); |
| | 53 | + var _this = $j.extend( true, { }, this, window[ embedPlayer.skinName + 'Config'] ); |
| 54 | 54 | |
| 55 | 55 | return _this; |
| 56 | 56 | } |
| — | — | @@ -61,34 +61,61 @@ |
| 62 | 62 | * Get the controls html |
| 63 | 63 | * @return {String} html output of controls |
| 64 | 64 | */ |
| 65 | | - getControls: function() { |
| 66 | | - // Set up local pointer to the embedObj |
| 67 | | - var embedObj = this.embedObj; |
| 68 | | - // set up local ctrlBuilder |
| | 65 | + addControls: function() { |
| | 66 | + // Set up local pointer to the embedPlayer |
| | 67 | + var embedPlayer = this.embedPlayer; |
| | 68 | + |
| | 69 | + // Set up local ctrlBuilder |
| 69 | 70 | var _this = this; |
| 70 | 71 | |
| | 72 | + // Remove any old controls: |
| | 73 | + embedPlayer.$interface.find('.control-bar').remove(); |
| | 74 | + |
| | 75 | + // Add some space to control_wrap for the controls |
| | 76 | + embedPlayer.$interface.css({ |
| | 77 | + 'height' : parseInt( embedPlayer.height + this.height) |
| | 78 | + }); |
| | 79 | + embedPlayer.$interface.append( |
| | 80 | + $j('<div>') |
| | 81 | + .addClass( 'ui-state-default ui-widget-header ui-helper-clearfix control-bar' ) |
| | 82 | + .html( |
| | 83 | + this.buildControls() |
| | 84 | + ) |
| | 85 | + ); |
| | 86 | + // Add hooks once Controls are in DOM |
| | 87 | + this.addControlHooks(); |
| | 88 | + }, |
| | 89 | + |
| | 90 | + /** |
| | 91 | + * Builds the interface controls |
| | 92 | + * @returns the interface html string |
| | 93 | + */ |
| | 94 | + buildControls: function(){ |
| | 95 | + var _this = this; |
| 71 | 96 | mw.log( 'f:controlsBuilder:: opt:' + this.options ); |
| 72 | | - this.id = ( embedObj.pc ) ? embedObj.pc.pp.id:embedObj.id; |
| 73 | | - this.available_width = embedObj.getPlayerWidth(); |
| | 97 | + // Set up local pointer to the embedPlayer |
| | 98 | + var embedPlayer = this.embedPlayer; |
| 74 | 99 | |
| 75 | | - // Make pointer to the embedObj |
| 76 | | - this.embedObj = embedObj; |
| | 100 | + this.available_width = embedPlayer.getPlayerWidth(); |
| | 101 | + |
| | 102 | + // Make pointer to the embedPlayer |
| | 103 | + this.embedPlayer = embedPlayer; |
| 77 | 104 | var _this = this; |
| 78 | | - this.supportedComponets = $j.extend(this.supportedComponets, embedObj.supports); |
| | 105 | + this.supportedComponets = $j.extend(this.supportedComponets, embedPlayer.supports); |
| 79 | 106 | |
| 80 | | - //Check for timed text support: |
| 81 | | - if( embedObj.isTimedTextSupported() ){ |
| | 107 | + // Check for timed text support: |
| | 108 | + if( embedPlayer.isTimedTextSupported() ){ |
| 82 | 109 | this.supportedComponets['timed_text'] = true; |
| 83 | 110 | } |
| 84 | 111 | |
| 85 | 112 | // Append options to body (if not already there) |
| 86 | | - if ( _this.external_options && $j( '#mv_vid_options_' + this.id ).length == 0 ){ |
| | 113 | + if ( this.external_options && $j( '#mv_vid_options_' + this.id ).length == 0 ){ |
| 87 | 114 | $j( 'body' ).append( this.components[ 'options_menu' ].o( this ) ); |
| 88 | 115 | } |
| 89 | 116 | |
| 90 | | - var o = ''; |
| | 117 | + var s = ''; |
| 91 | 118 | |
| 92 | | - //Build component output: |
| | 119 | + // Build component output: |
| 93 | 120 | for ( var i in this.components ) { |
| 94 | 121 | // Make sure the given components is supported: |
| 95 | 122 | if ( this.supportedComponets[ i ] ) { |
| — | — | @@ -96,27 +123,27 @@ |
| 97 | 124 | // Special case with playhead don't add unless we have 50px |
| 98 | 125 | if ( i == 'play_head' && this.available_width < 50 ) |
| 99 | 126 | continue; |
| 100 | | - o += this.components[i].o( this ); |
| | 127 | + s += this.components[i].o( this ); |
| 101 | 128 | this.available_width -= this.components[i].w; |
| 102 | 129 | } else { |
| 103 | 130 | mw.log( 'not enough space for control component:' + i ); |
| 104 | 131 | } |
| 105 | 132 | } |
| 106 | 133 | } |
| 107 | | - return o; |
| | 134 | + return s; |
| 108 | 135 | }, |
| 109 | 136 | |
| 110 | 137 | /** |
| 111 | 138 | * Get minimal width for interface overlay |
| 112 | 139 | */ |
| 113 | 140 | getOverlayWidth: function(){ |
| 114 | | - return ( this.embedObj.getPlayerWidth() < 300 )? 300 : this.embedObj.getPlayerWidth(); |
| | 141 | + return ( this.embedPlayer.getPlayerWidth() < 300 )? 300 : this.embedPlayer.getPlayerWidth(); |
| 115 | 142 | }, |
| 116 | 143 | /** |
| 117 | 144 | * Get minimal height for interface overlay |
| 118 | 145 | */ |
| 119 | 146 | getOverlayHeight: function(){ |
| 120 | | - return ( this.embedObj.getPlayerHeight() < 200 )? 200 : this.embedObj.getPlayerHeight(); |
| | 147 | + return ( this.embedPlayer.getPlayerHeight() < 200 )? 200 : this.embedPlayer.getPlayerHeight(); |
| 121 | 148 | }, |
| 122 | 149 | |
| 123 | 150 | /** |
| — | — | @@ -131,36 +158,37 @@ |
| 132 | 159 | * Adds control hooks once controls are in the DOM |
| 133 | 160 | */ |
| 134 | 161 | addControlHooks:function( ) { |
| 135 | | - // Set up local pointer to the embedObj |
| 136 | | - var embedObj = this.embedObj; |
| 137 | | - var _this = this; |
| | 162 | + // Set up local pointer to the embedPlayer |
| | 163 | + var embedPlayer = this.embedPlayer; |
| | 164 | + var _this = this; |
| | 165 | + |
| 138 | 166 | // Setup target shortcut to control-bar |
| 139 | | - $target = embedObj.$target; |
| | 167 | + $target = embedPlayer.$interface; |
| 140 | 168 | |
| 141 | 169 | // Add play hook: |
| 142 | 170 | $target.find( '.play-btn,.play-btn-large' ).unbind().buttonHover().click( function() { |
| 143 | | - embedObj.play(); |
| | 171 | + embedPlayer.play(); |
| 144 | 172 | } ); |
| 145 | 173 | |
| 146 | 174 | // Add recommend firefox if we have non-native playback: |
| 147 | 175 | if ( _this.doNativeWarningCheck() ) { |
| 148 | | - $j( '#dc_' + embedObj.id ).hover( |
| | 176 | + $j( '#dc_' + embedPlayer.id ).hover( |
| 149 | 177 | function() { |
| 150 | | - if ( $j( '#gnp_' + embedObj.id ).length == 0 ) { |
| 151 | | - var toppos = ( embedObj.instanceOf == 'mvPlayList' ) ? 25 : 10; |
| 152 | | - $j( this ).append( '<div id="gnp_' + embedObj.id + '" class="ui-state-highlight ui-corner-all" ' + |
| | 178 | + if ( $j( '#gnp_' + embedPlayer.id ).length == 0 ) { |
| | 179 | + var toppos = ( embedPlayer.instanceOf == 'mvPlayList' ) ? 25 : 10; |
| | 180 | + $j( this ).append( '<div id="gnp_' + embedPlayer.id + '" class="ui-state-highlight ui-corner-all" ' + |
| 153 | 181 | 'style="position:absolute;display:none;background:#FFF;top:' + toppos + 'px;left:10px;right:10px;">' + |
| 154 | 182 | gM( 'mwe-for_best_experience' ) + |
| 155 | | - '<br><input id="ffwarn_' + embedObj.id + '" type=\"checkbox\">' + |
| | 183 | + '<br><input id="ffwarn_' + embedPlayer.id + '" type=\"checkbox\">' + |
| 156 | 184 | gM( 'mwe-do_not_warn_again' ) + |
| 157 | 185 | '</div>' ); |
| 158 | | - $j( '#ffwarn_' + embedObj.id ).click( function() { |
| | 186 | + $j( '#ffwarn_' + embedPlayer.id ).click( function() { |
| 159 | 187 | if ( $j( this ).is( ':checked' ) ) { |
| 160 | 188 | // Set up a cookie for 7 days: |
| 161 | 189 | $j.cookie( 'show_player_warning', false, { expires: 7 } ); |
| 162 | 190 | // Set the current instance |
| 163 | 191 | mw.setConfig( 'show_player_warning', false ); |
| 164 | | - $j( '#gnp_' + embedObj.id ).fadeOut( 'slow' ); |
| | 192 | + $j( '#gnp_' + embedPlayer.id ).fadeOut( 'slow' ); |
| 165 | 193 | } else { |
| 166 | 194 | mw.setConfig( 'show_player_warning', true ); |
| 167 | 195 | $j.cookie( 'show_player_warning', true ); |
| — | — | @@ -170,32 +198,32 @@ |
| 171 | 199 | } |
| 172 | 200 | // Only show the warning if cookie and config are true |
| 173 | 201 | if ( mw.getConfig( 'show_player_warning' ) === true ) |
| 174 | | - $j( '#gnp_' + embedObj.id ).fadeIn( 'slow' ); |
| | 202 | + $j( '#gnp_' + embedPlayer.id ).fadeIn( 'slow' ); |
| 175 | 203 | }, |
| 176 | 204 | function() { |
| 177 | | - $j( '#gnp_' + embedObj.id ).fadeOut( 'slow' ); |
| | 205 | + $j( '#gnp_' + embedPlayer.id ).fadeOut( 'slow' ); |
| 178 | 206 | } |
| 179 | 207 | ); |
| 180 | 208 | } |
| 181 | 209 | |
| 182 | 210 | if ( $j.browser.msie && $j.browser.version <= 6 ) { |
| 183 | | - $j( embedObj.id + ' .play-btn-large' ).pngFix(); |
| | 211 | + $j( embedPlayer.id + ' .play-btn-large' ).pngFix(); |
| 184 | 212 | } |
| 185 | 213 | |
| 186 | 214 | |
| 187 | 215 | // Captions binding: |
| 188 | 216 | $target.find( '.timed-text' ).unbind().buttonHover().click( function() { |
| 189 | | - embedObj.showTextInterface(); |
| | 217 | + embedPlayer.showTextInterface(); |
| 190 | 218 | } ); |
| 191 | 219 | |
| 192 | 220 | // Options binding: |
| 193 | 221 | $target.find( '.options-btn' ).unbind().buttonHover().click( function() { |
| 194 | | - embedObj.doOptionsHTML(); |
| | 222 | + embedPlayer.doOptionsHTML(); |
| 195 | 223 | } ); |
| 196 | 224 | |
| 197 | 225 | // Fullscreen binding: |
| 198 | 226 | $target.find( '.fullscreen-btn' ).unbind().buttonHover().click( function() { |
| 199 | | - embedObj.fullscreen(); |
| | 227 | + embedPlayer.fullscreen(); |
| 200 | 228 | } ); |
| 201 | 229 | |
| 202 | 230 | // Playhead binding |
| — | — | @@ -206,42 +234,42 @@ |
| 207 | 235 | min: 0, |
| 208 | 236 | max: 1000, |
| 209 | 237 | start: function( event, ui ) { |
| 210 | | - var id = ( embedObj.pc != null ) ? embedObj.pc.pp.id:embedObj.id; |
| 211 | | - embedObj.userSlide = true; |
| | 238 | + var id = ( embedPlayer.pc != null ) ? embedPlayer.pc.pp.id:embedPlayer.id; |
| | 239 | + embedPlayer.userSlide = true; |
| 212 | 240 | $j( id + ' .play-btn-large' ).fadeOut( 'fast' ); |
| 213 | 241 | // If playlist always start at 0 |
| 214 | | - embedObj.start_time_sec = ( embedObj.instanceOf == 'mvPlayList' ) ? 0: |
| 215 | | - mw.npt2seconds( embedObj.getTimeRange().split( '/' )[0] ); |
| | 242 | + embedPlayer.start_time_sec = ( embedPlayer.instanceOf == 'mvPlayList' ) ? 0: |
| | 243 | + mw.npt2seconds( embedPlayer.getTimeRange().split( '/' )[0] ); |
| 216 | 244 | }, |
| 217 | 245 | slide: function( event, ui ) { |
| 218 | 246 | var perc = ui.value / 1000; |
| 219 | | - embedObj.jump_time = mw.seconds2npt( parseFloat( parseFloat( embedObj.getDuration() ) * perc ) + embedObj.start_time_sec ); |
| 220 | | - // mw.log('perc:' + perc + ' * ' + embedObj.getDuration() + ' jt:'+ this.jump_time); |
| | 247 | + embedPlayer.jump_time = mw.seconds2npt( parseFloat( parseFloat( embedPlayer.getDuration() ) * perc ) + embedPlayer.start_time_sec ); |
| | 248 | + // mw.log('perc:' + perc + ' * ' + embedPlayer.getDuration() + ' jt:'+ this.jump_time); |
| 221 | 249 | if ( _this.long_time_disp ) { |
| 222 | | - embedObj.setStatus( gM( 'mwe-seek_to', embedObj.jump_time ) ); |
| | 250 | + embedPlayer.setStatus( gM( 'mwe-seek_to', embedPlayer.jump_time ) ); |
| 223 | 251 | } else { |
| 224 | | - embedObj.setStatus( embedObj.jump_time ); |
| | 252 | + embedPlayer.setStatus( embedPlayer.jump_time ); |
| 225 | 253 | } |
| 226 | 254 | // Update the thumbnail / frame |
| 227 | | - if ( embedObj.isPlaying == false ) { |
| 228 | | - embedObj.updateThumbPerc( perc ); |
| | 255 | + if ( embedPlayer.isPlaying == false ) { |
| | 256 | + embedPlayer.updateThumbPerc( perc ); |
| 229 | 257 | } |
| 230 | 258 | }, |
| 231 | 259 | change:function( event, ui ) { |
| 232 | 260 | // Only run the onChange event if done by a user slide |
| 233 | 261 | // (otherwise it runs times it should not) |
| 234 | | - if ( embedObj.userSlide ) { |
| 235 | | - embedObj.userSlide = false; |
| 236 | | - embedObj.seeking = true; |
| | 262 | + if ( embedPlayer.userSlide ) { |
| | 263 | + embedPlayer.userSlide = false; |
| | 264 | + embedPlayer.seeking = true; |
| 237 | 265 | // Stop the monitor timer (if we can) |
| 238 | | - embedObj.stopMonitor(); |
| | 266 | + embedPlayer.stopMonitor(); |
| 239 | 267 | |
| 240 | 268 | var perc = ui.value / 1000; |
| 241 | 269 | // set seek time (in case we have to do a url seek) |
| 242 | | - embedObj.seek_time_sec = mw.npt2seconds( embedObj.jump_time, true ); |
| 243 | | - mw.log( 'do jump to: ' + embedObj.jump_time + ' perc:' + perc + ' sts:' + embedObj.seek_time_sec ); |
| 244 | | - embedObj.setStatus( gM( 'mwe-seeking' ) ); |
| 245 | | - embedObj.doSeek( perc ); |
| | 270 | + embedPlayer.seek_time_sec = mw.npt2seconds( embedPlayer.jump_time, true ); |
| | 271 | + mw.log( 'do jump to: ' + embedPlayer.jump_time + ' perc:' + perc + ' sts:' + embedPlayer.seek_time_sec ); |
| | 272 | + embedPlayer.setStatus( gM( 'mwe-seeking' ) ); |
| | 273 | + embedPlayer.doSeek( perc ); |
| 246 | 274 | } |
| 247 | 275 | } |
| 248 | 276 | } ); |
| — | — | @@ -254,26 +282,26 @@ |
| 255 | 283 | //(we can probably refactor this with custom buffering highlighter) |
| 256 | 284 | $target.find( '.play_head' ).append( this.getBufferHtml() ); |
| 257 | 285 | |
| 258 | | - var $opt = $j( '#mv_vid_options_' + embedObj.id ); |
| | 286 | + var $opt = $j( '#mv_vid_options_' + embedPlayer.id ); |
| 259 | 287 | |
| 260 | 288 | // videoOptions ... @@todo should be merged with something more like kskin.js: |
| 261 | 289 | $opt.find( '.vo_selection' ).click( function() { |
| 262 | | - embedObj.displayOverlay(); |
| 263 | | - embedObj.showPlayerSelect( embedObj.$target.find( '.videoOptionsComplete' ) ); |
| | 290 | + embedPlayer.displayOverlay(); |
| | 291 | + embedPlayer.showPlayerSelect( embedPlayer.$interface.find( '.videoOptionsComplete' ) ); |
| 264 | 292 | $opt.hide(); |
| 265 | 293 | return false; |
| 266 | 294 | } ); |
| 267 | 295 | |
| 268 | 296 | $opt.find( '.vo_download' ).click( function() { |
| 269 | | - embedObj.displayOverlay(); |
| 270 | | - embedObj.showDownload( embedObj.$target.find( '.videoOptionsComplete' ) ); |
| | 297 | + embedPlayer.displayOverlay(); |
| | 298 | + embedPlayer.showDownload( embedPlayer.$interface.find( '.videoOptionsComplete' ) ); |
| 271 | 299 | $opt.hide(); |
| 272 | 300 | return false; |
| 273 | 301 | } ); |
| 274 | 302 | |
| 275 | 303 | $opt.find( '.vo_showcode' ).click( function() { |
| 276 | | - embedObj.displayOverlay(); |
| 277 | | - embedObj.showShare( embedObj.$target.find( '.videoOptionsComplete' ) ); |
| | 304 | + embedPlayer.displayOverlay(); |
| | 305 | + embedPlayer.showShare( embedPlayer.$interface.find( '.videoOptionsComplete' ) ); |
| 278 | 306 | $opt.hide(); |
| 279 | 307 | return false; |
| 280 | 308 | } ); |
| — | — | @@ -286,8 +314,7 @@ |
| 287 | 315 | }, |
| 288 | 316 | |
| 289 | 317 | /** |
| 290 | | - * Issue a warning to non-native playback systems |
| 291 | | - * that they could improve the playback experience with a different browser |
| | 318 | + * check if a warning should be issued to non-native playback systems |
| 292 | 319 | * |
| 293 | 320 | * dependent on mediaElement being setup |
| 294 | 321 | */ |
| — | — | @@ -298,7 +325,7 @@ |
| 299 | 326 | } |
| 300 | 327 | |
| 301 | 328 | // If the resolution is too small don't display the warning |
| 302 | | - if( this.embedObj.getPlayerHeight() < 199 ) |
| | 329 | + if( this.embedPlayer.getPlayerHeight() < 199 ) |
| 303 | 330 | return false; |
| 304 | 331 | |
| 305 | 332 | // See if we have native support for ogg: |
| — | — | @@ -310,9 +337,9 @@ |
| 311 | 338 | } |
| 312 | 339 | |
| 313 | 340 | // See if we are using mwEmbed without a ogg source in which case no point in promoting firefox :P |
| 314 | | - if ( this.embedObj.mediaElement && this.embedObj.mediaElement.sources ) { |
| | 341 | + if ( this.embedPlayer.mediaElement && this.embedPlayer.mediaElement.sources ) { |
| 315 | 342 | var foundOgg = false; |
| 316 | | - var playable_sources = this.embedObj.mediaElement.getPlayableSources(); |
| | 343 | + var playable_sources = this.embedPlayer.mediaElement.getPlayableSources(); |
| 317 | 344 | for ( var sInx = 0; sInx < playable_sources.length; sInx++ ) { |
| 318 | 345 | var mime_type = playable_sources[sInx].mime_type; |
| 319 | 346 | if ( mime_type == 'video/ogg' ) { |
| — | — | @@ -330,24 +357,23 @@ |
| 331 | 358 | * Binds the volume controls |
| 332 | 359 | */ |
| 333 | 360 | doVolumeBinding:function() { |
| 334 | | - var embedObj = this.embedObj; |
| 335 | | - var _this = this; |
| 336 | | - var $target = $j( '#' + embedObj.id ).parent('.control_wrap'); |
| 337 | | - $target.find( '.volume_control' ).unbind().buttonHover().click( function() { |
| | 361 | + var embedPlayer = this.embedPlayer; |
| | 362 | + var _this = this; |
| | 363 | + embedPlayer.$interface.find( '.volume_control' ).unbind().buttonHover().click( function() { |
| 338 | 364 | mw.log( 'clicked volume control' ); |
| 339 | | - embedObj.toggleMute(); |
| | 365 | + embedPlayer.toggleMute(); |
| 340 | 366 | } ); |
| 341 | 367 | |
| 342 | 368 | // Add vertical volume display hover |
| 343 | 369 | if ( this.volume_layout == 'vertical' ) { |
| 344 | 370 | // Default volume binding: |
| 345 | 371 | var hoverOverDelay = false; |
| 346 | | - var $targetvol = $target.find( '.vol_container' ); |
| 347 | | - $target.find( '.volume_control' ).hover( |
| | 372 | + var $targetvol = embedPlayer.$interface.find( '.vol_container' ); |
| | 373 | + embedPlayer.$interface.find( '.volume_control' ).hover( |
| 348 | 374 | function() { |
| 349 | 375 | $targetvol.addClass( 'vol_container_top' ); |
| 350 | 376 | // Set to "below" if playing and embedType != native |
| 351 | | - if ( embedObj && embedObj.isPlaying && embedObj.isPlaying() && !embedObj.supports['overlays'] ) { |
| | 377 | + if ( embedPlayer && embedPlayer.isPlaying && embedPlayer.isPlaying() && !embedPlayer.supports['overlays'] ) { |
| 352 | 378 | $targetvol.removeClass( 'vol_container_top' ).addClass( 'vol_container_below' ); |
| 353 | 379 | } |
| 354 | 380 | $targetvol.fadeIn( 'fast' ); |
| — | — | @@ -373,24 +399,24 @@ |
| 374 | 400 | slide: function( event, ui ) { |
| 375 | 401 | var perc = ui.value / 100; |
| 376 | 402 | // mw.log('update volume:' + perc); |
| 377 | | - embedObj.updateVolumen( perc ); |
| | 403 | + embedPlayer.updateVolumen( perc ); |
| 378 | 404 | }, |
| 379 | 405 | change:function( event, ui ) { |
| 380 | 406 | var perc = ui.value / 100; |
| 381 | 407 | if ( perc == 0 ) { |
| 382 | | - $target.find( '.volume_control span' ).removeClass( 'ui-icon-volume-on' ).addClass( 'ui-icon-volume-off' ); |
| | 408 | + embedPlayer.$interface.find( '.volume_control span' ).removeClass( 'ui-icon-volume-on' ).addClass( 'ui-icon-volume-off' ); |
| 383 | 409 | } else { |
| 384 | | - $target.find( '.volume_control span' ).removeClass( 'ui-icon-volume-off' ).addClass( 'ui-icon-volume-on' ); |
| | 410 | + embedPlayer.$interface.find( '.volume_control span' ).removeClass( 'ui-icon-volume-off' ).addClass( 'ui-icon-volume-on' ); |
| 385 | 411 | } |
| 386 | 412 | var perc = ui.value / 100; |
| 387 | | - embedObj.updateVolumen( perc ); |
| | 413 | + embedPlayer.updateVolumen( perc ); |
| 388 | 414 | } |
| 389 | 415 | } |
| 390 | 416 | |
| 391 | 417 | if ( this.volume_layout == 'vertical' ) |
| 392 | 418 | sliderConf[ 'orientation' ] = "vertical"; |
| 393 | 419 | |
| 394 | | - $target.find( '.volume-slider' ).slider( sliderConf ); |
| | 420 | + embedPlayer.$interface.find( '.volume-slider' ).slider( sliderConf ); |
| 395 | 421 | }, |
| 396 | 422 | |
| 397 | 423 | /** |
| — | — | @@ -399,7 +425,7 @@ |
| 400 | 426 | getBufferHtml:function() { |
| 401 | 427 | return '<div class="ui-slider-range ui-slider-range-min ui-widget-header ' + |
| 402 | 428 | 'ui-state-highlight ui-corner-all ' + |
| 403 | | - 'mv_buffer" style="width:0px;height:100%;z-index:1;top:0px" />'; |
| | 429 | + 'mw_buffer" style="width:0px;height:100%;z-index:1;top:0px" />'; |
| 404 | 430 | }, |
| 405 | 431 | |
| 406 | 432 | /** |
| — | — | @@ -417,7 +443,7 @@ |
| 418 | 444 | |
| 419 | 445 | /** |
| 420 | 446 | * Components Object |
| 421 | | - * Take in the embedObj and return some html for the given component. |
| | 447 | + * Take in the embedPlayer and return some html for the given component. |
| 422 | 448 | * |
| 423 | 449 | * components can be overwritten by skin javascript |
| 424 | 450 | */ |
| — | — | @@ -435,8 +461,8 @@ |
| 436 | 462 | 'class' : "ui-state-default play-btn-large" |
| 437 | 463 | } ) |
| 438 | 464 | .css( { |
| 439 | | - 'left' : ( ( ctrlObj.embedObj.getPlayerWidth() - this.w ) / 2 ), |
| 440 | | - 'top' : ( ( ctrlObj.embedObj.getPlayerHeight() - this.h ) / 2 ) |
| | 465 | + 'left' : ( ( ctrlObj.embedPlayer.getPlayerWidth() - this.w ) / 2 ), |
| | 466 | + 'top' : ( ( ctrlObj.embedPlayer.getPlayerHeight() - this.h ) / 2 ) |
| 441 | 467 | } ) |
| 442 | 468 | .wrap( '<div/>' ).parent().html(); |
| 443 | 469 | } |
| — | — | @@ -461,7 +487,7 @@ |
| 462 | 488 | '<p class="short_match vo_showcode"><a href="#"><span>' + gM( 'mwe-share' ) + '</span></a></p>'; |
| 463 | 489 | |
| 464 | 490 | // link to the stream page if we are not already there: |
| 465 | | - if ( ( ctrlObj.embedObj.roe || ctrlObj.embedObj.linkback ) && typeof mv_stream_interface == 'undefined' ) |
| | 491 | + if ( ( ctrlObj.embedPlayer.roe || ctrlObj.embedPlayer.linkback ) && typeof mv_stream_interface == 'undefined' ) |
| 466 | 492 | o += '<p class="short_match"><a href="javascript:$j(\'#' + ctrlObj.id + '\').get(0).doLinkBack()"><span><strong>Source Page</strong></span></a></p>'; |
| 467 | 493 | |
| 468 | 494 | o += '</div>' + |
| — | — | @@ -550,7 +576,7 @@ |
| 551 | 577 | 'time_display': { |
| 552 | 578 | 'w':90, |
| 553 | 579 | 'o':function( ctrlObj ) { |
| 554 | | - return '<div class="ui-widget time-disp">' + ctrlObj.embedObj.getTimeRange() + '</div>'; |
| | 580 | + return '<div class="ui-widget time-disp">' + ctrlObj.embedPlayer.getTimeRange() + '</div>'; |
| 555 | 581 | } |
| 556 | 582 | }, |
| 557 | 583 | /* |
| — | — | @@ -559,7 +585,7 @@ |
| 560 | 586 | 'play_head': { |
| 561 | 587 | 'w':0, // special case (takes up remaining space) |
| 562 | 588 | 'o':function( ctrlObj ) { |
| 563 | | - return '<div class="play_head" style="width: ' + ( ctrlObj.available_width - 35 ) + 'px;"></div>'; |
| | 589 | + return '<div class="play_head" style="width: ' + ( ctrlObj.available_width - 37 ) + 'px;"></div>'; |
| 564 | 590 | } |
| 565 | 591 | } |
| 566 | 592 | } |
| Index: branches/js2-work/phase3/js/mwEmbed/skins/mvpcf/playerSkin.css |
| — | — | @@ -1,6 +1,12 @@ |
| 2 | 2 | /* |
| 3 | 3 | * reference player skin |
| 4 | 4 | */ |
| | 5 | + |
| | 6 | +/*Video player*/ |
| | 7 | +.mv-player { |
| | 8 | + color: #000; |
| | 9 | + background: #FFF; |
| | 10 | +} |
| 5 | 11 | |
| 6 | 12 | /* large play button: */ |
| 7 | 13 | .mv-player .play-btn-large { |
| — | — | @@ -14,11 +20,6 @@ |
| 15 | 21 | }/*.ui-state-default */ |
| 16 | 22 | |
| 17 | 23 | |
| 18 | | -.mv-player |
| 19 | | -{ |
| 20 | | - color: #474747; |
| 21 | | -} |
| 22 | | - |
| 23 | 24 | .mv-player a:link {color: #2060c1; text-decoration: underline;} |
| 24 | 25 | .mv-player a:visited {color: #2060c1; text-decoration: underline;} |
| 25 | 26 | /*a:visited {color: #75a5e4; text-decoration: underline;}*/ /*Not sure if you want this*/ |
| — | — | @@ -37,10 +38,7 @@ |
| 38 | 39 | .mv-player h6 {font-size: 13px; color: #6c6c6c; padding: 10px 20px 0px 20px; text-transform: uppercase;} |
| 39 | 40 | |
| 40 | 41 | |
| 41 | | -/*Video player*/ |
| 42 | | -.mv-player { |
| 43 | | - color: white; |
| 44 | | -} |
| | 42 | + |
| 45 | 43 | .mv-player .video { |
| 46 | 44 | display: block; |
| 47 | 45 | position: relative; |
| Index: branches/js2-work/phase3/js/mwEmbed/modules/TimedText/mw.TimedText.js |
| — | — | @@ -220,7 +220,7 @@ |
| 221 | 221 | var _this = this; |
| 222 | 222 | mw.log( "TimedText:bindMenu:" + target ); |
| 223 | 223 | _this.menuTarget = target; |
| 224 | | - var $menuButton = this.embedPlayer.$target.find( '.timed-text' ); |
| | 224 | + var $menuButton = this.embedPlayer.$interface.find( '.timed-text' ); |
| 225 | 225 | |
| 226 | 226 | // Else bind and show the menu |
| 227 | 227 | // We already have a loader in embedPlayer so the delay of |
| — | — | @@ -458,10 +458,10 @@ |
| 459 | 459 | // Layout Menu option |
| 460 | 460 | _this.getLi( gM( 'mwe-layout' ), 'image' ).append( |
| 461 | 461 | _this.getLayoutMenu() |
| 462 | | - ), |
| | 462 | + ) |
| 463 | 463 | |
| 464 | 464 | // Search Menu option |
| 465 | | - _this.getLi( gM('mwe-search'), 'search') |
| | 465 | + //_this.getLi( gM('mwe-search'), 'search') |
| 466 | 466 | ); |
| 467 | 467 | } |
| 468 | 468 | // Put in the "Make Transcript" link |
| — | — | @@ -627,7 +627,7 @@ |
| 628 | 628 | * Updates the timed text layout ( should be called when config.layout changes ) |
| 629 | 629 | */ |
| 630 | 630 | updateLayout: function(){ |
| 631 | | - var $playerTarget = this.embedPlayer.$target; |
| | 631 | + var $playerTarget = this.embedPlayer.$interface; |
| 632 | 632 | $playerTarget.find('.itext').remove(); |
| 633 | 633 | this.refreshDisplay(); |
| 634 | 634 | }, |
| — | — | @@ -656,7 +656,7 @@ |
| 657 | 657 | this.enabledSources.push( source ); |
| 658 | 658 | //Set any existing text target to "loading" |
| 659 | 659 | if( !source.loaded ) { |
| 660 | | - var $playerTarget = this.embedPlayer.$target; |
| | 660 | + var $playerTarget = this.embedPlayer.$interface; |
| 661 | 661 | $playerTarget.find('.itext').text( gM('mwe-loading-text') ); |
| 662 | 662 | } |
| 663 | 663 | // Load the text: |
| — | — | @@ -762,7 +762,7 @@ |
| 763 | 763 | |
| 764 | 764 | //mw.log( 'updateTextDisplay: ' + text ); |
| 765 | 765 | |
| 766 | | - var $playerTarget = this.embedPlayer.$target; |
| | 766 | + var $playerTarget = this.embedPlayer.$interface; |
| 767 | 767 | var $textTarget = $playerTarget.find( '.itext_' + source.category + ' span' ); |
| 768 | 768 | // If we are missing the target add it: |
| 769 | 769 | if( $textTarget.length == 0){ |
| — | — | @@ -795,7 +795,7 @@ |
| 796 | 796 | addItextDiv: function( category ){ |
| 797 | 797 | mw.log(" addItextDiv: " + category ) |
| 798 | 798 | // Get the relative positioned player class from the ctrlBuilder: |
| 799 | | - var $playerTarget = this.embedPlayer.$target; |
| | 799 | + var $playerTarget = this.embedPlayer.$interface; |
| 800 | 800 | |
| 801 | 801 | //Remove any existing itext divs for this player; |
| 802 | 802 | $playerTarget.find('.itext_' + category ).remove(); |
| — | — | @@ -820,8 +820,8 @@ |
| 821 | 821 | }) |
| 822 | 822 | ) |
| 823 | 823 | ); |
| 824 | | - // Make sure the outer player height is player + ctrlBuilder |
| 825 | | - $j( '#' + this.embedPlayer.id ).parent('.control_wrap').animate({ |
| | 824 | + // Resize the interface for layoutMode == 'ontop' |
| | 825 | + this.embedPlayer.$interface.animate({ |
| 826 | 826 | 'height': this.embedPlayer.height + this.embedPlayer.ctrlBuilder.height |
| 827 | 827 | }) |
| 828 | 828 | }else if ( layoutMode == 'below'){ |
| — | — | @@ -843,8 +843,8 @@ |
| 844 | 844 | ); |
| 845 | 845 | var height = 62 + this.embedPlayer.height + this.embedPlayer.ctrlBuilder.height; |
| 846 | 846 | mw.log( 'set height:' + height ); |
| 847 | | - // Add 60px to outer player height |
| 848 | | - $j( '#' + this.embedPlayer.id ).parent('.control_wrap').animate({ |
| | 847 | + // Resize the interface for layoutMode == 'below' |
| | 848 | + this.embedPlayer.$interface.animate({ |
| 849 | 849 | 'height': height |
| 850 | 850 | }) |
| 851 | 851 | mw.log( ' height of ' + this.embedPlayer.id + ' is now: ' + $j( '#' + this.embedPlayer.id ).height() ); |
| Index: branches/js2-work/phase3/js/mwEmbed/modules/TimedText/remotes/RemoteMwTimedText.js |
| — | — | @@ -14,17 +14,28 @@ |
| 15 | 15 | RemoteMwTimedText = function( options ){ |
| 16 | 16 | return this.init( options ); |
| 17 | 17 | } |
| | 18 | +mw_default_remote_text_options = [ |
| | 19 | + 'action', |
| | 20 | + 'title', |
| | 21 | + 'target', |
| | 22 | + 'orgBody' |
| | 23 | +]; |
| 18 | 24 | RemoteMwTimedText.prototype = { |
| 19 | 25 | |
| 20 | 26 | init: function( options ) { |
| 21 | | - this.action = ( options.action )? options.action : this.action; |
| 22 | | - this.title = ( options.title )? options.title : this.title; |
| 23 | | - this.target = ( options.target )? options.target : this.target; |
| | 27 | + for(var i in mw_default_remote_text_options){ |
| | 28 | + var opt = mw_default_remote_text_options[i] |
| | 29 | + if( options[ opt ] ){ |
| | 30 | + this[ opt ] = options[ opt ]; |
| | 31 | + } |
| | 32 | + } |
| 24 | 33 | }, |
| 25 | 34 | updateUI: function(){ |
| 26 | 35 | // Check page type |
| 27 | 36 | if( this.action == 'view' ){ |
| 28 | 37 | this.showViewUI(); |
| | 38 | + }else{ |
| | 39 | + //restore |
| 29 | 40 | } |
| 30 | 41 | }, |
| 31 | 42 | showViewUI: function(){ |
| — | — | @@ -132,6 +143,12 @@ |
| 133 | 144 | } |
| 134 | 145 | // (only works for commons right now) |
| 135 | 146 | mw.getJSON( request, function( data ) { |
| | 147 | + // Check for "page not found" |
| | 148 | + if( data.query.pages['-1'] ){ |
| | 149 | + //restore content: |
| | 150 | + $j(_this.target).html( _this.orgBody ); |
| | 151 | + return ; |
| | 152 | + } |
| 136 | 153 | // Check for redirect |
| 137 | 154 | for ( var i in data.query.pages ) { |
| 138 | 155 | var page = data.query.pages[i]; |
| — | — | @@ -169,17 +186,4 @@ |
| 170 | 187 | 'height': page.imageinfo[0].height, |
| 171 | 188 | }; |
| 172 | 189 | } |
| 173 | | -} |
| 174 | | - |
| 175 | | - |
| 176 | | -// Setup config on init: ( remotes drive page actions on init ) |
| 177 | | -mw.ready( function(){ |
| 178 | | - //Setup the remote configuration |
| 179 | | - var myRemote = new RemoteMwTimedText( { |
| 180 | | - 'action': wgAction, |
| 181 | | - 'title' : wgTitle, |
| 182 | | - 'target': '#bodyContent' |
| 183 | | - }); |
| 184 | | - // Update the UI |
| 185 | | - myRemote.updateUI(); |
| 186 | | -} ); |
| \ No newline at end of file |
| | 190 | +} |
| \ No newline at end of file |
| Index: branches/js2-work/phase3/js/mwEmbed/modules/EmbedPlayer/mw.EmbedPlayer.js |
| — | — | @@ -407,14 +407,13 @@ |
| 408 | 408 | _this.swapEmbedPlayerElement( element, playlistPlayer ); |
| 409 | 409 | |
| 410 | 410 | // Issue the checkPlayerSources call to the new playlist interface: |
| 411 | | - $j( '#' + playlistPlayer.id ).get(0).checkPlayerSources(); |
| | 411 | + $j( '#' + playlistPlayer.id ).get(0).showPlayer(); |
| 412 | 412 | } ); |
| 413 | 413 | break; |
| 414 | 414 | case 'video': |
| 415 | 415 | case 'audio': |
| 416 | 416 | // By default treat the rewrite request as "video" |
| 417 | 417 | default: |
| 418 | | - var playerInx = _this.playerList.length; |
| 419 | 418 | var ranPlayerSwapFlag = false; |
| 420 | 419 | // Local callback to runPlayer swap once element has metadata |
| 421 | 420 | function runPlayerSwap(){ |
| — | — | @@ -424,7 +423,6 @@ |
| 425 | 424 | ranPlayerSwapFlag = true; |
| 426 | 425 | var playerInterface = new mw.EmbedPlayer( element , attributes); |
| 427 | 426 | _this.swapEmbedPlayerElement( element, playerInterface ); |
| 428 | | - |
| 429 | 427 | // Issue the checkPlayerSources call to the new player interface: |
| 430 | 428 | $j( '#' + $j( element ).attr('id') ).get(0).checkPlayerSources(); |
| 431 | 429 | } |
| — | — | @@ -1204,6 +1202,9 @@ |
| 1205 | 1203 | } else { |
| 1206 | 1204 | this[attr] = default_video_attributes[attr]; |
| 1207 | 1205 | } |
| | 1206 | + // string -> bollean |
| | 1207 | + if( this[attr] == "false" ) this[attr] = false; |
| | 1208 | + if( this[attr] == "true" ) this[attr] = true; |
| 1208 | 1209 | } |
| 1209 | 1210 | |
| 1210 | 1211 | // Set the skin name from the class |
| — | — | @@ -1582,7 +1583,7 @@ |
| 1583 | 1584 | * Seeks to the requested time and issues a callback when ready |
| 1584 | 1585 | * (should be overwritten by client that supports frame serving) |
| 1585 | 1586 | */ |
| 1586 | | - setCurrentTime:function( time, callback ) { |
| | 1587 | + setCurrentTime: function( time, callback ) { |
| 1587 | 1588 | mw.log( 'Error: base embed setCurrentTime can not frame serve (override via plugin)' ); |
| 1588 | 1589 | }, |
| 1589 | 1590 | |
| — | — | @@ -1590,8 +1591,8 @@ |
| 1591 | 1592 | * Setup the embed player |
| 1592 | 1593 | * issues a loading request |
| 1593 | 1594 | */ |
| 1594 | | - setupEmbedPlayer:function() { |
| 1595 | | - mw.log( 'f:setupEmbedPlayer::' + this.selected_player.id ); |
| | 1595 | + doEmbedPlayer: function() { |
| | 1596 | + mw.log( 'f:doEmbedPlayer::' + this.selected_player.id ); |
| 1596 | 1597 | mw.log( 'thum disp:' + this.thumbnail_disp ); |
| 1597 | 1598 | var _this = this; |
| 1598 | 1599 | |
| — | — | @@ -1604,9 +1605,8 @@ |
| 1605 | 1606 | |
| 1606 | 1607 | // Make sure the player is |
| 1607 | 1608 | mw.log( 'performing embed for ' + _this.id ); |
| 1608 | | - var embed_code = _this.getEmbedHTML(); |
| 1609 | 1609 | // mw.log('shopuld embed:' + embed_code); |
| 1610 | | - $j( '#' + _this.id ).html( embed_code ); |
| | 1610 | + $j( '#' + _this.id ).html( _this.getEmbedHTML() ); |
| 1611 | 1611 | }, |
| 1612 | 1612 | |
| 1613 | 1613 | /** |
| — | — | @@ -1707,13 +1707,13 @@ |
| 1708 | 1708 | //if k-attribution and k-skin show the "credits" screen: |
| 1709 | 1709 | if( mw.getConfig( 'k_attribution' ) && this.ctrlBuilder.showCredits ){ |
| 1710 | 1710 | // Call a "credit" menu display: |
| 1711 | | - this.$target.find( '.k-options' ).click(); |
| | 1711 | + this.$interface.find( '.k-options' ).click(); |
| 1712 | 1712 | this.ctrlBuilder.showCredits(); |
| 1713 | 1713 | return ; |
| 1714 | 1714 | } |
| 1715 | 1715 | |
| 1716 | 1716 | $j( '#img_thumb_' + this.id ).css( 'zindex', 1 ); |
| 1717 | | - this.$target.find( '.play-btn-large' ).hide(); |
| | 1717 | + this.$interface.find( '.play-btn-large' ).hide(); |
| 1718 | 1718 | |
| 1719 | 1719 | // add black background |
| 1720 | 1720 | $j( '#dc_' + this.id ).append( '<div id="black_back_' + this.id + '" ' + |
| — | — | @@ -1972,24 +1972,16 @@ |
| 1973 | 1973 | }, |
| 1974 | 1974 | |
| 1975 | 1975 | /** |
| 1976 | | - * Maps the getControls request to the ctrl Builder |
| 1977 | | - * requires this.ctrlBuilder to be setup |
| 1978 | | - */ |
| 1979 | | - getControls: function() { |
| 1980 | | - return this.ctrlBuilder.getControls( this ); |
| 1981 | | - }, |
| 1982 | | - |
| 1983 | | - /** |
| 1984 | 1976 | * Show the player |
| 1985 | | - * NOTE: the player area is double <div> encapsulation will be factored out shortly |
| | 1977 | + * |
| 1986 | 1978 | */ |
| 1987 | 1979 | showPlayer : function () { |
| 1988 | 1980 | // set-up the local ctrlBuilder instance: |
| 1989 | 1981 | this.ctrlBuilder = new ctrlBuilder( this ); |
| 1990 | 1982 | |
| 1991 | 1983 | var _this = this; |
| 1992 | | - //make sure we have control_wrap |
| 1993 | | - if( $j( this ).parent('.control_wrap').length == 0 ){ |
| | 1984 | + //make sure we have interface_wrap |
| | 1985 | + if( $j( this ).parent('.interface_wrap').length == 0 ){ |
| 1994 | 1986 | // Select "player" |
| 1995 | 1987 | $j( this ) |
| 1996 | 1988 | // Add interface control class: |
| — | — | @@ -1998,55 +1990,26 @@ |
| 1999 | 1991 | }) |
| 2000 | 1992 | .wrap( |
| 2001 | 1993 | $j('<div>') |
| 2002 | | - .addClass('control_wrap ' + this.ctrlBuilder.playerClass) |
| | 1994 | + .addClass('interface_wrap ' + this.ctrlBuilder.playerClass) |
| 2003 | 1995 | .css({ |
| 2004 | 1996 | 'width': parseInt( this.width ), |
| 2005 | 1997 | 'height': parseInt( this.height ) |
| 2006 | 1998 | }) |
| 2007 | 1999 | ) |
| 2008 | 2000 | } |
| | 2001 | + //Set up local jQuery refrence to "interface_wrap" |
| | 2002 | + this.$interface = $j(this).parent('.interface_wrap'); |
| 2009 | 2003 | |
| 2010 | | - // Update Thumbnail html |
| | 2004 | + // Update Thumbnail for the "player" |
| 2011 | 2005 | $j( this ).html( |
| 2012 | 2006 | this.getThumbnailHTML() |
| 2013 | | - ) |
| 2014 | | - |
| | 2007 | + ) |
| 2015 | 2008 | |
| 2016 | 2009 | // Add controls if enabled: |
| 2017 | 2010 | if ( this.controls ) { |
| 2018 | | - mw.log( "embedPlayer:showPlayer::AddControls" ); |
| 2019 | | - |
| 2020 | | - // Remove any old controls: |
| 2021 | | - $j( this ).parent('.control_wrap').find('.control-bar').remove(); |
| 2022 | | - |
| 2023 | | - // Block out some space for controls by encapsulating the top player div |
| 2024 | | - $j( this ).parent( '.control_wrap' ).css({ |
| 2025 | | - 'height' : parseInt( this.height + this.ctrlBuilder.height) |
| 2026 | | - }); |
| 2027 | | - $j( this ).after( |
| 2028 | | - $j('<div>') |
| 2029 | | - .addClass( 'ui-state-default ui-widget-header ui-helper-clearfix control-bar' ) |
| 2030 | | - .html( |
| 2031 | | - this.getControls() |
| 2032 | | - ) |
| 2033 | | - ); |
| 2034 | | - /*html_code += '<div class="" >'; |
| 2035 | | - html_code += ; |
| 2036 | | - html_code += '</div>'; |
| 2037 | | - */ |
| 2038 | | - |
| 2039 | | - } |
| 2040 | | - //Set up local jQuery refrence to "control_wrap" |
| 2041 | | - this.$target = $j(this).parent('.control_wrap'); |
| 2042 | | - |
| 2043 | | - |
| 2044 | | - //html_code += '</div>'; // videoPlayer div close |
| 2045 | | - |
| 2046 | | - // mw.log('should set: '+this.id); |
| 2047 | | - |
| 2048 | | - |
| 2049 | | - // Add hooks once Controls are in DOM |
| 2050 | | - this.ctrlBuilder.addControlHooks(); |
| | 2011 | + mw.log( "embedPlayer:showPlayer::AddControls" ); |
| | 2012 | + this.ctrlBuilder.addControls(); |
| | 2013 | + } |
| 2051 | 2014 | |
| 2052 | 2015 | |
| 2053 | 2016 | if ( this.autoplay ) { |
| — | — | @@ -2290,7 +2253,7 @@ |
| 2291 | 2254 | * Display the options div |
| 2292 | 2255 | */ |
| 2293 | 2256 | doOptionsHTML:function() { |
| 2294 | | - var pos = this.$target.find( '.options-btn' ).offset(); |
| | 2257 | + var pos = this.$interface.find( '.options-btn' ).offset(); |
| 2295 | 2258 | pos['top'] = pos['top'] + 24; |
| 2296 | 2259 | pos['left'] = pos['left'] -124; |
| 2297 | 2260 | // mw.log('pos of options button: t:'+pos['top']+' l:'+ pos['left']); |
| — | — | @@ -2379,7 +2342,7 @@ |
| 2380 | 2343 | $menu.show("fast"); |
| 2381 | 2344 | } |
| 2382 | 2345 | }else{ |
| 2383 | | - var loc = this.$target.position(); |
| | 2346 | + var loc = this.$interface.position(); |
| 2384 | 2347 | //Setup the menu: |
| 2385 | 2348 | var playerHeight = ( parseInt( this.height ) + this.ctrlBuilder.height ); |
| 2386 | 2349 | $j('body').append( |
| — | — | @@ -2445,7 +2408,7 @@ |
| 2446 | 2409 | '<div class="videoOptionsComplete">' + |
| 2447 | 2410 | '</div>'+ |
| 2448 | 2411 | '</div>'; |
| 2449 | | - this.$target.prepend( div_code ); |
| | 2412 | + this.$interface.prepend( div_code ); |
| 2450 | 2413 | if ( fade_in ) |
| 2451 | 2414 | $j( '#blackbg_' + this.id ).fadeIn( "slow" ); |
| 2452 | 2415 | else |
| — | — | @@ -2604,7 +2567,7 @@ |
| 2605 | 2568 | // this.innerHTML = this.getPluginMissingHTML(); |
| 2606 | 2569 | $j( '#' + this.id ).html( this.getPluginMissingHTML() ); |
| 2607 | 2570 | } else { |
| 2608 | | - this.setupEmbedPlayer(); |
| | 2571 | + this.doEmbedPlayer(); |
| 2609 | 2572 | this.paused = false; |
| 2610 | 2573 | this.thumbnail_disp = false; |
| 2611 | 2574 | } |
| — | — | @@ -2614,11 +2577,11 @@ |
| 2615 | 2578 | this.seeking = false; |
| 2616 | 2579 | } |
| 2617 | 2580 | |
| 2618 | | - this.$target.find('.play-btn span') |
| | 2581 | + this.$interface.find('.play-btn span') |
| 2619 | 2582 | .removeClass( 'ui-icon-play' ) |
| 2620 | 2583 | .addClass( 'ui-icon-pause' ); |
| 2621 | 2584 | |
| 2622 | | - this.$target.find('.play-btn' ) |
| | 2585 | + this.$interface.find('.play-btn' ) |
| 2623 | 2586 | .unbind() |
| 2624 | 2587 | .buttonHover() |
| 2625 | 2588 | .click( function() { |
| — | — | @@ -2634,7 +2597,7 @@ |
| 2635 | 2598 | * Maps the html5 load request. |
| 2636 | 2599 | * There is no genneral way to "load" clips so underling plugin-player libs should overide. |
| 2637 | 2600 | */ |
| 2638 | | - load:function() { |
| | 2601 | + load: function() { |
| 2639 | 2602 | // should be done by child (no base way to pre-buffer video) |
| 2640 | 2603 | mw.log( 'baseEmbed:load call' ); |
| 2641 | 2604 | }, |
| — | — | @@ -2650,13 +2613,14 @@ |
| 2651 | 2614 | var _this = this; |
| 2652 | 2615 | // mw.log('mwEmbed:do pause'); |
| 2653 | 2616 | // (playing) do pause |
| 2654 | | - this.paused = true; |
| | 2617 | + this.paused = true; |
| | 2618 | + |
| 2655 | 2619 | // update the ctrl "paused state" |
| 2656 | | - this.$target.find('.play-btn span' ) |
| | 2620 | + this.$interface.find('.play-btn span' ) |
| 2657 | 2621 | .removeClass( 'ui-icon-pause' ) |
| 2658 | 2622 | .addClass( 'ui-icon-play' ); |
| 2659 | 2623 | |
| 2660 | | - this.$target.find('.play-btn' ) |
| | 2624 | + this.$interface.find('.play-btn' ) |
| 2661 | 2625 | .unbind() |
| 2662 | 2626 | .buttonHover() |
| 2663 | 2627 | .click( function() { |
| — | — | @@ -2702,7 +2666,7 @@ |
| 2703 | 2667 | } |
| 2704 | 2668 | |
| 2705 | 2669 | //Bind play-btn-large play |
| 2706 | | - this.$target.find( '.play-btn-large' ) |
| | 2670 | + this.$interface.find( '.play-btn-large' ) |
| 2707 | 2671 | .unbind( 'click' ) |
| 2708 | 2672 | .click( function() { |
| 2709 | 2673 | _this.play(); |
| — | — | @@ -2718,11 +2682,11 @@ |
| 2719 | 2683 | toggleMute:function() { |
| 2720 | 2684 | if ( this.muted ) { |
| 2721 | 2685 | this.muted = false; |
| 2722 | | - this.$target.find( '.volume-slider' ).slider( 'value', 100 ); |
| | 2686 | + this.$interface.find( '.volume-slider' ).slider( 'value', 100 ); |
| 2723 | 2687 | this.updateVolumen( 1 ); |
| 2724 | 2688 | } else { |
| 2725 | 2689 | this.muted = true; |
| 2726 | | - this.$target.find( '.volume-slider' ).slider( 'value', 0 ); |
| | 2690 | + this.$interface.find( '.volume-slider' ).slider( 'value', 0 ); |
| 2727 | 2691 | this.updateVolumen( 0 ); |
| 2728 | 2692 | } |
| 2729 | 2693 | mw.log( 'f:toggleMute::' + this.muted ); |
| — | — | @@ -2867,7 +2831,7 @@ |
| 2868 | 2832 | */ |
| 2869 | 2833 | updateBufferStatus: function() { |
| 2870 | 2834 | // Get the buffer target based for playlist vs clip |
| 2871 | | - $buffer = $j( this ).parent('.control_wrap').find('.mv_buffer'); |
| | 2835 | + $buffer = this.$interface.find( '.mw_buffer' ); |
| 2872 | 2836 | |
| 2873 | 2837 | // Update the buffer progress bar (if available ) |
| 2874 | 2838 | if ( this.bufferedPercent != 0 ) { |
| — | — | @@ -2889,7 +2853,7 @@ |
| 2890 | 2854 | * @param {Float} perc Value between 0 and 1 for position of playhead |
| 2891 | 2855 | */ |
| 2892 | 2856 | updatePlayHead: function( perc ) { |
| 2893 | | - $play_head = $j(this).parent( '.control_wrap' ).find( '.play_head' ); |
| | 2857 | + $play_head = this.$interface.find( '.play_head' ); |
| 2894 | 2858 | if ( this.controls && $play_head.length != 0 ) { |
| 2895 | 2859 | var val = parseInt( perc * 1000 ); |
| 2896 | 2860 | $play_head.slider( 'value', val ); |
| — | — | @@ -2960,7 +2924,7 @@ |
| 2961 | 2925 | */ |
| 2962 | 2926 | setStatus: function( value ) { |
| 2963 | 2927 | // update status: |
| 2964 | | - this.$target.find( '.time-disp' ).html( value ); |
| | 2928 | + this.$interface.find( '.time-disp' ).html( value ); |
| 2965 | 2929 | }, |
| 2966 | 2930 | |
| 2967 | 2931 | |
| — | — | @@ -3130,6 +3094,8 @@ |
| 3131 | 3095 | this.default_players['image/png'] = ['html']; |
| 3132 | 3096 | this.default_players['image/svg'] = ['html']; |
| 3133 | 3097 | |
| | 3098 | + |
| | 3099 | + |
| 3134 | 3100 | }, |
| 3135 | 3101 | |
| 3136 | 3102 | /** |
| Index: branches/js2-work/phase3/js/mwEmbed/modules/EmbedPlayer/nativeEmbed.js |
| — | — | @@ -38,7 +38,7 @@ |
| 39 | 39 | }, |
| 40 | 40 | |
| 41 | 41 | /** |
| 42 | | - * Wraps the embed object and returns the output |
| | 42 | + * Return the embed code |
| 43 | 43 | */ |
| 44 | 44 | getEmbedHTML : function () { |
| 45 | 45 | var _this = this; |
| — | — | @@ -53,7 +53,7 @@ |
| 54 | 54 | /** |
| 55 | 55 | * Get the native embed code |
| 56 | 56 | */ |
| 57 | | - getEmbedObj:function() { |
| | 57 | + getEmbedObj: function() { |
| 58 | 58 | // We want to let mwEmbed handle the controls so notice the absence of control attribute |
| 59 | 59 | // controls=false results in controls being displayed: |
| 60 | 60 | // http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2008-August/016159.html |
| — | — | @@ -70,7 +70,7 @@ |
| 71 | 71 | /** |
| 72 | 72 | * Post element javascript, binds event listeners and starts monitor |
| 73 | 73 | */ |
| 74 | | - postEmbedJS:function() { |
| | 74 | + postEmbedJS: function() { |
| 75 | 75 | var _this = this; |
| 76 | 76 | mw.log( "f:native:postEmbedJS:" ); |
| 77 | 77 | this.getPlayerElement(); |
| — | — | @@ -78,9 +78,7 @@ |
| 79 | 79 | |
| 80 | 80 | // Setup some bindings: |
| 81 | 81 | var vid = $j( this.playerElement ).get(0); |
| 82 | | - var wtf = function(){ |
| 83 | | - alert("wtf"); |
| 84 | | - } |
| | 82 | + |
| 85 | 83 | // Bind events to local js methods: |
| 86 | 84 | vid.addEventListener( 'canplaythrough', function(){ _this.canplaythrough }, true); |
| 87 | 85 | vid.addEventListener( 'loadedmetadata', function(){ _this.onloadedmetadata() }, true); |
| — | — | @@ -89,7 +87,7 @@ |
| 90 | 88 | vid.addEventListener( 'seeking', function(){ _this.onseeking() }, true); |
| 91 | 89 | vid.addEventListener( 'seeked', function(){ _this.onseeked() }, true); |
| 92 | 90 | |
| 93 | | - // Always load the media: |
| | 91 | + // Check for load flag |
| 94 | 92 | if ( this.onlyLoadFlag ) { |
| 95 | 93 | this.playerElement.load(); |
| 96 | 94 | } else { |
| — | — | @@ -187,14 +185,14 @@ |
| 188 | 186 | */ |
| 189 | 187 | setCurrentTime: function( position , callback ) { |
| 190 | 188 | var _this = this; |
| 191 | | - mw.log( 'native:setCurrentTime::: ' + position + ' : dur: ' + _this.getDuration() ); |
| | 189 | + //mw.log( 'native:setCurrentTime::: ' + position + ' : dur: ' + _this.getDuration() ); |
| 192 | 190 | this.getPlayerElement(); |
| 193 | 191 | if ( !this.playerElement ) { |
| 194 | 192 | this.load( function() { |
| 195 | | - _this.doSeekedCb( position, callback ); |
| | 193 | + _this.doSeekedCallback( position, callback ); |
| 196 | 194 | } ); |
| 197 | 195 | } else { |
| 198 | | - _this.doSeekedCb( position, callback ); |
| | 196 | + _this.doSeekedCallback( position, callback ); |
| 199 | 197 | } |
| 200 | 198 | }, |
| 201 | 199 | /** |
| — | — | @@ -206,8 +204,7 @@ |
| 207 | 205 | doSeekedCallback : function( position, callback ){ |
| 208 | 206 | var _this = this; |
| 209 | 207 | this.getPlayerElement(); |
| 210 | | - var once = function( event ) { |
| 211 | | - mw.log("did seek callback"); |
| | 208 | + var once = function( event ) { |
| 212 | 209 | callback(); |
| 213 | 210 | _this.playerElement.removeEventListener( 'seeked', once, false ); |
| 214 | 211 | }; |
| — | — | @@ -339,7 +336,7 @@ |
| 340 | 337 | // No vid loaded |
| 341 | 338 | mw.log( 'native::load() ... doEmbed' ); |
| 342 | 339 | this.onlyLoadFlag = true; |
| 343 | | - this.doEmbedHTML(); |
| | 340 | + this.doEmbedPlayer(); |
| 344 | 341 | this.onLoadedCallback = callback; |
| 345 | 342 | } else { |
| 346 | 343 | // Should not happen offten |
| — | — | @@ -365,7 +362,7 @@ |
| 366 | 363 | * fired when "seeking" |
| 367 | 364 | */ |
| 368 | 365 | onseeking:function() { |
| 369 | | - mw.log( "onseeking" ); |
| | 366 | + //mw.log( "onseeking" ); |
| 370 | 367 | this.seeking = true; |
| 371 | 368 | this.setStatus( gM( 'mwe-seeking' ) ); |
| 372 | 369 | }, |
| — | — | @@ -375,7 +372,7 @@ |
| 376 | 373 | * fired when done seeking |
| 377 | 374 | */ |
| 378 | 375 | onseeked: function() { |
| 379 | | - mw.log("onseeked"); |
| | 376 | + //mw.log("onseeked"); |
| 380 | 377 | this.seeking = false; |
| 381 | 378 | }, |
| 382 | 379 | |
| — | — | @@ -436,7 +433,7 @@ |
| 437 | 434 | mw.log( 'native on ended called with time:' + this.playerElement.currentTime + ' of total real dur: ' + this.getDuration() + ' attempting to reload src...' ); |
| 438 | 435 | var doRetry = function() { |
| 439 | 436 | _this.urlAppend = 'retry_src=' + _this.grab_try_count; |
| 440 | | - _this.doEmbedHTML(); |
| | 437 | + _this.doEmbedPlayer(); |
| 441 | 438 | _this.grab_try_count++; |
| 442 | 439 | } |
| 443 | 440 | setTimeout( doRetry, 100 ); |
| Index: branches/js2-work/phase3/js/mwEmbed/modules/Sequencer/mw.PlayList.new.js |
| — | — | @@ -1,318 +0,0 @@ |
| 2 | | -/** |
| 3 | | - * The mw.PlayList object code |
| 4 | | - * |
| 5 | | - * @author: Michael Dale mdale@wikimedia.org |
| 6 | | - * @license GPL2 |
| 7 | | - * |
| 8 | | - * supports frame by frame rendering of "smil" and other playlist formats |
| 9 | | - * supports basic drop frame live playback of "smil" and other playlist formats |
| 10 | | - * |
| 11 | | - * Extends the "embedPlayer" and represents the playlist as a single video stream |
| 12 | | - */ |
| 13 | | - |
| 14 | | -// Bind to mw (for uncluttered global namespace) |
| 15 | | -( function( $ ) { |
| 16 | | - |
| 17 | | -mw.PlayList = function( element ) { |
| 18 | | - return this.init( element ); |
| 19 | | -}; |
| 20 | | -// set up the mvPlaylist object |
| 21 | | -mw.PlayList.prototype = { |
| 22 | | - init: function( element ) { |
| 23 | | - var myPlayer = new mw.EmbedPlayer( element ); |
| 24 | | - // Inherit "embedPlayer" |
| 25 | | - for( var i in myPlayer ){ |
| 26 | | - if( this[i] ){ |
| 27 | | - this['parent_' + i] = myPlayer[i]; |
| 28 | | - }else{ |
| 29 | | - this[i] = myPlayer[i]; |
| 30 | | - } |
| 31 | | - } |
| 32 | | - }, |
| 33 | | - // Check, parse and load player sources |
| 34 | | - checkPlayerSources: function(){ |
| 35 | | - var _this = this; |
| 36 | | - // Get the first xml source (as potential playlist source) |
| 37 | | - var source = this.mediaElement.getSources( 'text/xml' )[0]; |
| 38 | | - if( !source ){ |
| 39 | | - mw.log("Error: could not load playlist source"); |
| 40 | | - return ; |
| 41 | | - } |
| 42 | | - // Setup localpointer |
| 43 | | - this.source = new mw.PlayListSource( source ); |
| 44 | | - |
| 45 | | - // Load and parse |
| 46 | | - this.source.load( function(){ |
| 47 | | - mw.log( 'Loaded source:' + this.source ) |
| 48 | | - // Show player interface: |
| 49 | | - _this.showPlayer(); |
| 50 | | - }); |
| 51 | | - }, |
| 52 | | - /** |
| 53 | | - * Get the duration for the playlist |
| 54 | | - */ |
| 55 | | - getDuration: function(){ |
| 56 | | - |
| 57 | | - }, |
| 58 | | - /** |
| 59 | | - * Show the player interface |
| 60 | | - */ |
| 61 | | - showPlayer: function(){ |
| 62 | | - // Update duration: |
| 63 | | - _this.getDuration(); |
| 64 | | - // Add playlist title |
| 65 | | - |
| 66 | | - // Add |
| 67 | | - } |
| 68 | | - |
| 69 | | -} |
| 70 | | - |
| 71 | | -/** |
| 72 | | - * Extends the base "source" type with playlist source |
| 73 | | - */ |
| 74 | | -mw.PlayListSource = function( source ){ |
| 75 | | - return this.init( source ) |
| 76 | | -} |
| 77 | | -mw.PlayListSource.prototype = { |
| 78 | | - /** |
| 79 | | - * @constructor |
| 80 | | - * @param {Object} source Source object to extend |
| 81 | | - */ |
| 82 | | - init: function( source ){ |
| 83 | | - for(var i in source){ |
| 84 | | - this[i] = source[i]; |
| 85 | | - } |
| 86 | | - }, |
| 87 | | - /** |
| 88 | | - * Function to load and parse the source xml |
| 89 | | - * @param {Function} callback Function called once text source is loaded |
| 90 | | - */ |
| 91 | | - load: function( callback ){ |
| 92 | | - var _this = this; |
| 93 | | - |
| 94 | | - //check if its already loaded: |
| 95 | | - if( _this.loaded ){ |
| 96 | | - if( callback ){ |
| 97 | | - callback(); |
| 98 | | - } |
| 99 | | - } |
| 100 | | - // Try to load src via src attr: |
| 101 | | - if( this.getSrc() ){ |
| 102 | | - // Issue the direct load request ( if we can ) |
| 103 | | - if ( mw.parseUri( document.URL ).host != mw.parseUri( this.getSrc() ).host ){ |
| 104 | | - mw.log("Error: host mis-match: " + mw.parseUri( document.URL ).host != mw.parseUri( this.getSrc() ).host ) |
| 105 | | - return ; |
| 106 | | - } |
| 107 | | - $j.get( this.getSrc(), function( data ){ |
| 108 | | - // set the local data |
| 109 | | - _this.data = data; |
| 110 | | - // Set the parser handle |
| 111 | | - _this.setParserHandle(); |
| 112 | | - // Parse and load dependencies |
| 113 | | - |
| 114 | | - // Update the loaded state: |
| 115 | | - _this.loaded = true; |
| 116 | | - if( callback ){ |
| 117 | | - callback(); |
| 118 | | - } |
| 119 | | - }, 'text' ); |
| 120 | | - return ; |
| 121 | | - } |
| 122 | | - }, |
| 123 | | - |
| 124 | | - /** |
| 125 | | - * Update src parser handler for given loaded data in this.data |
| 126 | | - */ |
| 127 | | - setParserHandle: function( ) { |
| 128 | | - mw.log( 'data type of: ' + this.src + ' = ' + typeof ( this.data ) + "\n" + this.data ); |
| 129 | | - this.parseHandle = null; |
| 130 | | - // if not external use different detection matrix |
| 131 | | - if ( typeof this.data == 'object' ) { |
| 132 | | - mw.log( 'object' ); |
| 133 | | - // object assume xml (either xspf or rss) |
| 134 | | - plElm = this.data.getElementsByTagName( 'playlist' )[0]; |
| 135 | | - if ( plElm ) { |
| 136 | | - if ( plElm.getAttribute( 'xmlns' ) == 'http://xspf.org/ns/0/' ) { |
| 137 | | - this.parseHandle = 'xspf'; |
| 138 | | - } |
| 139 | | - } |
| 140 | | - // check itunes style rss "items" |
| 141 | | - rssElm = this.data.getElementsByTagName( 'rss' )[0]; |
| 142 | | - if ( rssElm ) { |
| 143 | | - if ( rssElm.getAttribute( 'xmlns:itunes' ) == 'http://www.itunes.com/dtds/podcast-1.0.dtd' ) { |
| 144 | | - this.parseHandle = 'itunes'; |
| 145 | | - } |
| 146 | | - } |
| 147 | | - // check for smil tag: |
| 148 | | - smilElm = this.data.getElementsByTagName( 'smil' )[0]; |
| 149 | | - if ( smilElm ) { |
| 150 | | - this.parseHandle = 'smil'; |
| 151 | | - } |
| 152 | | - } else if ( typeof this.data == 'string' ) { |
| 153 | | - mw.log( 'String' ); |
| 154 | | - // look at the first line: |
| 155 | | - var first_line = this.data.substring( 0, this.data.indexOf( "\n" ) ); |
| 156 | | - mw.log( 'first line: ' + first_line ); |
| 157 | | - // string |
| 158 | | - if ( first_line.indexOf( '#EXTM3U' ) != -1 ) { |
| 159 | | - this.parseHandle = 'm3u'; |
| 160 | | - } else if ( first_line.indexOf( '<smil' ) != -1 ) { |
| 161 | | - // @@todo parse string |
| 162 | | - this.parseHandle = 'smil'; |
| 163 | | - } |
| 164 | | - } |
| 165 | | - if ( this.parseHandle ) { |
| 166 | | - mw.log( 'is of type:' + this.srcType ); |
| 167 | | - } else { |
| 168 | | - // unknown playlist type |
| 169 | | - mw.log( 'unknown playlist type?' ); |
| 170 | | - } |
| 171 | | - } |
| 172 | | -} |
| 173 | | - |
| 174 | | - |
| 175 | | -/* |
| 176 | | - * m3u parse |
| 177 | | - */ |
| 178 | | -var m3uPlaylist = { |
| 179 | | - doParse:function() { |
| 180 | | - // for each line not # add as clip |
| 181 | | - var inx = 0; |
| 182 | | - var _this = this; |
| 183 | | - // mw.log('data:'+ this.data.toString()); |
| 184 | | - $j.each( this.data.split( "\n" ), function( i, n ) { |
| 185 | | - // mw.log('on line '+i+' val:'+n+' len:'+n.length); |
| 186 | | - if ( n.charAt( 0 ) != '#' ) { |
| 187 | | - if ( n.length > 3 ) { |
| 188 | | - // @@todo make sure its a valid url |
| 189 | | - // mw.log('add url: '+i + ' '+ n); |
| 190 | | - var cur_clip = new mvClip( { type:'srcClip', id:'p_' + _this.id + '_c_' + inx, pp:this_pl, src:n, order:inx } ); |
| 191 | | - // setup the embed object |
| 192 | | - cur_clip.setUpEmbedObj(); |
| 193 | | - mw.log( 'm3uPlaylist len:' + thisClip.embed.mediaElement.sources.length ); |
| 194 | | - _this.addCliptoTrack( cur_clip ); |
| 195 | | - inx++; |
| 196 | | - } |
| 197 | | - } |
| 198 | | - } ); |
| 199 | | - return true; |
| 200 | | - } |
| 201 | | -} |
| 202 | | -/** |
| 203 | | - * itunes Playlist parser |
| 204 | | - */ |
| 205 | | -var itunesPlaylist = { |
| 206 | | - doParse:function() { |
| 207 | | - var properties = { |
| 208 | | - title: 'title', |
| 209 | | - linkback: 'link', |
| 210 | | - author: 'itunes:author', |
| 211 | | - desc: 'description', |
| 212 | | - date:'pubDate' |
| 213 | | - }; |
| 214 | | - var tmpElm = null; |
| 215 | | - for ( i in properties ) { |
| 216 | | - tmpElm = this.data.getElementsByTagName( properties[i] )[0]; |
| 217 | | - if ( tmpElm ) { |
| 218 | | - this[i] = tmpElm.childNodes[0].nodeValue; |
| 219 | | - // mw.log('set '+i+' to '+this[i]); |
| 220 | | - } |
| 221 | | - } |
| 222 | | - // image src is nested in itunes rss: |
| 223 | | - tmpElm = this.data.getElementsByTagName( 'image' )[0]; |
| 224 | | - if ( tmpElm ) { |
| 225 | | - imgElm = tmpElm.getElementsByTagName( 'url' )[0]; |
| 226 | | - if ( imgElm ) { |
| 227 | | - this.img = imgElm.childNodes[0].nodeValue; |
| 228 | | - } |
| 229 | | - } |
| 230 | | - // get the clips: |
| 231 | | - var clips = this.data.getElementsByTagName( "item" ); |
| 232 | | - properties.src = 'guid'; |
| 233 | | - for ( var i = 0; i < clips.length; i++ ) { |
| 234 | | - var cur_clip = new mvClip( { type:'srcClip', id:'p_' + this.id + '_c_' + i, pp:this, order:i } ); |
| 235 | | - for ( var j in properties ) { |
| 236 | | - tmpElm = clips[i].getElementsByTagName( properties[j] )[0]; |
| 237 | | - if ( tmpElm != null ) { |
| 238 | | - cur_clip[j] = tmpElm.childNodes[0].nodeValue; |
| 239 | | - // mw.log('set clip property: ' + j+' to '+cur_clip[j]); |
| 240 | | - } |
| 241 | | - } |
| 242 | | - // image is nested |
| 243 | | - tmpElm = clips[i].getElementsByTagName( 'image' )[0]; |
| 244 | | - if ( tmpElm ) { |
| 245 | | - imgElm = tmpElm.getElementsByTagName( 'url' )[0]; |
| 246 | | - if ( imgElm ) { |
| 247 | | - cur_clip.img = imgElm.childNodes[0].nodeValue; |
| 248 | | - } |
| 249 | | - } |
| 250 | | - // set up the embed object now that all the values have been set |
| 251 | | - cur_clip.setUpEmbedObj(); |
| 252 | | - |
| 253 | | - // add the current clip to the clip list |
| 254 | | - this.addCliptoTrack( cur_clip ); |
| 255 | | - } |
| 256 | | - return true; |
| 257 | | - } |
| 258 | | -} |
| 259 | | - |
| 260 | | -/* |
| 261 | | - * xsfp playlist parser: |
| 262 | | - * http://www.xspf.org/xspf-v1.html |
| 263 | | - */ |
| 264 | | -var xspfPlaylist = { |
| 265 | | - doParse:function() { |
| 266 | | - // mw.log('do xsfp parse: '+ this.data.innerHTML); |
| 267 | | - var properties = { title:'title', linkback:'info', |
| 268 | | - author:'creator', desc:'annotation', |
| 269 | | - poster:'image', date:'date' }; |
| 270 | | - var tmpElm = null; |
| 271 | | - // get the first instance of any of the meta tags (ok that may be the meta on the first clip) |
| 272 | | - // mw.log('do loop on properties:' + properties); |
| 273 | | - for ( i in properties ) { |
| 274 | | - mw.log( 'on property: ' + i ); |
| 275 | | - tmpElm = this.data.getElementsByTagName( properties[i] )[0]; |
| 276 | | - if ( tmpElm ) { |
| 277 | | - if ( tmpElm.childNodes[0] ) { |
| 278 | | - this[i] = tmpElm.childNodes[0].nodeValue; |
| 279 | | - mw.log( 'set pl property: ' + i + ' to ' + this[i] ); |
| 280 | | - } |
| 281 | | - } |
| 282 | | - } |
| 283 | | - var clips = this.data.getElementsByTagName( "track" ); |
| 284 | | - mw.log( 'found clips:' + clips.length ); |
| 285 | | - // add any clip specific properties |
| 286 | | - properties.src = 'location'; |
| 287 | | - for ( var i = 0; i < clips.length; i++ ) { |
| 288 | | - var cur_clip = new mvClip( { id:'p_' + this.id + '_c_' + i, pp:this, order:i } ); |
| 289 | | - // mw.log('cur clip:'+ cur_clip.id); |
| 290 | | - for ( var j in properties ) { |
| 291 | | - tmpElm = clips[i].getElementsByTagName( properties[j] )[0]; |
| 292 | | - if ( tmpElm != null ) { |
| 293 | | - if ( tmpElm.childNodes.length != 0 ) { |
| 294 | | - cur_clip[j] = tmpElm.childNodes[0].nodeValue; |
| 295 | | - mw.log( 'set clip property: ' + j + ' to ' + cur_clip[j] ); |
| 296 | | - } |
| 297 | | - } |
| 298 | | - } |
| 299 | | - // add mvClip ref from info link: |
| 300 | | - if ( cur_clip.linkback ) { |
| 301 | | - // if mv linkback |
| 302 | | - mvInx = 'Stream:'; |
| 303 | | - mvclippos = cur_clip.linkback.indexOf( mvInx ); |
| 304 | | - if ( mvclippos !== false ) { |
| 305 | | - cur_clip.mvclip = cur_clip.linkback.substr( mvclippos + mvInx.length ); |
| 306 | | - } |
| 307 | | - } |
| 308 | | - // set up the embed object now that all the values have been set |
| 309 | | - cur_clip.setUpEmbedObj(); |
| 310 | | - // add the current clip to the clip list |
| 311 | | - this.addCliptoTrack( cur_clip ); |
| 312 | | - } |
| 313 | | - // mw.log('done with parse'); |
| 314 | | - return true; |
| 315 | | - } |
| 316 | | -} |
| 317 | | - |
| 318 | | - |
| 319 | | -} )( window.mw ); |
| \ No newline at end of file |
| Index: branches/js2-work/phase3/js/mwEmbed/modules/Sequencer/loader.js |
| — | — | @@ -6,10 +6,21 @@ |
| 7 | 7 | "mw.Sequencer" : "modules/Sequencer/mw.Sequencer.js", |
| 8 | 8 | "mw.SeqRemoteSearchDriver" : "modules/Sequencer/mw.SeqRemoteSearchDriver.js", |
| 9 | 9 | "mw.TimedEffectsEdit" : "modules/Sequencer/mvTimedEffectsEdit.js", |
| | 10 | + "mw.FirefoggRender" : "modules/Sequencer/mw.FirefoggRender.js", |
| 10 | 11 | |
| 11 | 12 | "RemoteMwSequencer" : "modules/Sequencer/remotes/RemoteMwSequencer.js" |
| 12 | 13 | } ); |
| 13 | 14 | |
| | 15 | +mw.addModuleLoader( 'FirefoggRender', function( callback) { |
| | 16 | + mw.load( [ |
| | 17 | + 'mw.Firefogg', |
| | 18 | + 'mw.FirefoggRender', |
| | 19 | + 'mw.BaseUploadInterface' |
| | 20 | + ], function(){ |
| | 21 | + callback( 'FirefoggRender' ); |
| | 22 | + }); |
| | 23 | +}); |
| | 24 | + |
| 14 | 25 | mw.addModuleLoader( 'Sequencer', function( callback ){ |
| 15 | 26 | //Get sequencer style sheet |
| 16 | 27 | mw.getStyleSheet( mw.getMwEmbedPath() + 'skins/' + mw.getConfig( 'skinName' ) + '/mv_sequence.css' ); |
| Index: branches/js2-work/phase3/js/mwEmbed/modules/Sequencer/mw.FirefoggRender.js |
| — | — | @@ -1,30 +1,57 @@ |
| 2 | 2 | /* |
| 3 | 3 | * Handles driving the firefogg render system |
| 4 | 4 | */ |
| 5 | | -mw.FirefoggRender = function( options ) { |
| 6 | | - return this.init( options ); |
| 7 | | -}; |
| | 5 | + |
| | 6 | +/* |
| | 7 | +* Set the jQuery bindings: |
| | 8 | +*/ |
| | 9 | +( function( $ ) { |
| | 10 | + $.fn.firefoggRender = function( options, callback ) { |
| | 11 | + options.player_target = this.selector; |
| | 12 | + var myFogg = new mw.FirefoggRender( options ); |
| | 13 | + return myFogg; |
| | 14 | + } |
| | 15 | +} )( jQuery ); |
| | 16 | + |
| | 17 | + |
| 8 | 18 | var default_render_options = { |
| 9 | | - "videoQuality" : 10, |
| 10 | | - "framerate" : 30 |
| | 19 | + "videoQuality" : 8, |
| | 20 | + "framerate" : 30 |
| | 21 | + |
| | 22 | + |
| 11 | 23 | } |
| 12 | 24 | var default_FirefoggRender_options = { |
| 13 | 25 | start_time:0, |
| 14 | 26 | // if we should save to disk (if false setup upload stuff below) |
| 15 | 27 | save_to_disk:true |
| | 28 | + |
| 16 | 29 | } |
| | 30 | +mw.FirefoggRender = function( options ) { |
| | 31 | + return this.init( options ); |
| | 32 | +}; |
| 17 | 33 | // Set up the mvPlaylist object |
| 18 | 34 | mw.FirefoggRender.prototype = { |
| 19 | | - // default empty render options: |
| | 35 | + |
| | 36 | + // Default empty render options: |
| 20 | 37 | renderOptions: { }, |
| | 38 | + |
| | 39 | + // Render time |
| | 40 | + render_time: null, |
| | 41 | + |
| | 42 | + // The interval time ( set via requested framerate) |
| | 43 | + interval: null, |
| | 44 | + |
| | 45 | + // Continue rendering |
| 21 | 46 | continue_rendering:false, |
| | 47 | + |
| | 48 | + // Constructor |
| 22 | 49 | init:function( options ) { |
| 23 | 50 | var _this = this; |
| 24 | 51 | |
| 25 | | - // grab the mvFirefogg object to do basic tests |
| 26 | | - this.myFogg = new mvFirefogg( { |
| | 52 | + // Grab the mvFirefogg object to do basic tests |
| | 53 | + this.myFogg = new mw.Firefogg( { |
| 27 | 54 | 'only_fogg':true |
| 28 | | - } ); |
| | 55 | + }); |
| 29 | 56 | |
| 30 | 57 | // check for firefogg: |
| 31 | 58 | if ( this.myFogg.getFirefogg() ) { |
| — | — | @@ -37,21 +64,19 @@ |
| 38 | 65 | // set up local fogg pointer: |
| 39 | 66 | this.fogg = this.myFogg.fogg; |
| 40 | 67 | |
| 41 | | - // setup player instance |
| 42 | | - this.player = $j( options.player_target ).get( 0 ); |
| 43 | | - this.player_target = options.player_target; |
| | 68 | + // setup player instance |
| | 69 | + this.player_target = options.player_target; |
| 44 | 70 | |
| 45 | 71 | // Extend the render options with any provided details |
| 46 | 72 | if( options['render_options'] ) |
| 47 | | - $j.extend(this.renderOptions, options['render_options']); |
| | 73 | + $j.extend(this.renderOptions, default_render_options, options['render_options']); |
| 48 | 74 | |
| 49 | 75 | // If no height width provided use target DOM width/height |
| 50 | 76 | if( !this.renderOptions.width && !this.renderOptions.height ){ |
| 51 | 77 | this.renderOptions.width = $j(this.player_target).width(); |
| 52 | | - this.renderOptions.height = $j(this.player_target).height(); |
| 53 | | - } |
| | 78 | + this.renderOptions.height = $j(this.player_target).height(); |
| | 79 | + } |
| 54 | 80 | |
| 55 | | - |
| 56 | 81 | // Setup the application options (with defaults) |
| 57 | 82 | for ( var i in default_FirefoggRender_options ) { |
| 58 | 83 | if ( options[ i ] ) { |
| — | — | @@ -60,6 +85,7 @@ |
| 61 | 86 | this[ i ] = default_FirefoggRender_options[i]; |
| 62 | 87 | } |
| 63 | 88 | } |
| | 89 | + |
| 64 | 90 | // Should be externally controlled |
| 65 | 91 | if ( options.target_startRender ) { |
| 66 | 92 | $j( options.target_startRender ).click( function() { |
| — | — | @@ -78,18 +104,28 @@ |
| 79 | 105 | this.target_timeStatus = options.target_timeStatus; |
| 80 | 106 | } |
| 81 | 107 | }, |
| 82 | | - startRender:function() { |
| | 108 | + |
| | 109 | + // Start rendering |
| | 110 | + startRender: function() { |
| 83 | 111 | var _this = this; |
| 84 | | - var t = this.start_time; |
| | 112 | + this.render_time = this.start_time; |
| 85 | 113 | // get the interval from renderOptions framerate |
| 86 | | - var interval = 1 / this.renderOptions.framerate |
| | 114 | + this.interval = 1 / this.renderOptions.framerate |
| 87 | 115 | |
| 88 | | - // issue a load request on the player: |
| 89 | | - //this.player.load(); |
| | 116 | + // Get the player: |
| | 117 | + this.player = $j( this.player_target ).get( 0 ); |
| 90 | 118 | |
| | 119 | + |
| | 120 | + |
| | 121 | + // Set a target file |
| | 122 | + |
| 91 | 123 | // init the Render |
| 92 | | - this.fogg.initRender( JSON.stringify( _this.renderOptions ), 'foggRender' ); |
| | 124 | + mw.log( "starting render with: " + JSON.stringify( _this.renderOptions ) ); |
| | 125 | + this.fogg.initRender( JSON.stringify( _this.renderOptions ), 'foggRender.ogv' ); |
| 93 | 126 | |
| | 127 | + $j( this.target_timeStatus ).val( "loading player" ); |
| | 128 | + |
| | 129 | + |
| 94 | 130 | // add audio if we had any: |
| 95 | 131 | |
| 96 | 132 | // request a target (should support rendering to temp location too) |
| — | — | @@ -97,33 +133,45 @@ |
| 98 | 134 | |
| 99 | 135 | // set the continue rendering flag to true: |
| 100 | 136 | this.continue_rendering = true; |
| | 137 | + |
| 101 | 138 | |
| 102 | | - // internal function to hanndle updates: |
| 103 | | - var doNextFrame = function() { |
| 104 | | - $j( _this.target_timeStatus ).val( " on " + ( Math.round( t * 10 ) / 10 ) + " of " + |
| 105 | | - ( Math.round( _this.player.getDuration() * 10 ) / 10 ) ); |
| 106 | | - _this.player.setCurrentTime( t, function() { |
| 107 | | - //_this.fogg.addFrame( $j( _this.player_target ).attr( 'id' ) ); |
| 108 | | - t += interval; |
| 109 | | - if ( t >= _this.player.getDuration() ) { |
| | 139 | + // issue a load request on the player: |
| | 140 | + this.player.load(function(){ |
| | 141 | + $j( this.target_timeStatus ).val( "player ready" ); |
| | 142 | + //now issue the save video as call (to avoid running "expired" code |
| | 143 | + _this.fogg.saveVideoAs(); |
| | 144 | + _this.doNextFrame(); |
| | 145 | + }); |
| | 146 | + }, |
| | 147 | + doNextFrame: function(){ |
| | 148 | + var _this = this; |
| | 149 | + // internal function to handle updates: |
| | 150 | + $j( _this.target_timeStatus ).val( " on " + ( Math.round( _this.render_time * 10 ) / 10 ) + " of " + |
| | 151 | + ( Math.round( _this.player.getDuration() * 10 ) / 10 ) ); |
| | 152 | + |
| | 153 | + _this.player.setCurrentTime( _this.render_time, function() { |
| | 154 | + //mw.log( 'addFrame:' + $j( _this.player_target ).attr( 'id' ) ); |
| | 155 | + _this.fogg.addFrame( $j( _this.player_target ).attr( 'id' ) ); |
| | 156 | + _this.render_time += _this.interval; |
| | 157 | + if ( _this.render_time >= _this.player.getDuration() ) { |
| | 158 | + _this.doFinalRender(); |
| | 159 | + } else { |
| | 160 | + if ( _this.continue_rendering ) { |
| | 161 | + _this.doNextFrame(); |
| | 162 | + } else { |
| | 163 | + mw.log('render stoped'); |
| | 164 | + // else quit: |
| 110 | 165 | _this.doFinalRender(); |
| 111 | | - } else { |
| 112 | | - if ( _this.continue_rendering ) { |
| 113 | | - doNextFrame(); |
| 114 | | - } else { |
| 115 | | - mw.log('done with render'); |
| 116 | | - // else quit: |
| 117 | | - //_this.doFinalRender(); |
| 118 | | - } |
| 119 | 166 | } |
| 120 | | - } ); |
| 121 | | - } |
| 122 | | - doNextFrame(); |
| | 167 | + } |
| | 168 | + } ); |
| 123 | 169 | }, |
| 124 | 170 | stopRender:function() { |
| 125 | 171 | this.continue_rendering = false; |
| 126 | 172 | }, |
| 127 | | - doFinalRender:function() { |
| | 173 | + doFinalRender: function() { |
| | 174 | + var _this = this; |
| | 175 | + mw.log( " do final render: " ); |
| 128 | 176 | $j( this.target_timeStatus ).val( "doing final render" ); |
| 129 | 177 | this.fogg.render(); |
| 130 | 178 | this.updateStatus(); |
| Index: branches/js2-work/phase3/js/mwEmbed/modules/Sequencer/playListEmbed.js |
| — | — | @@ -0,0 +1,60 @@ |
| | 2 | +/** |
| | 3 | + * The playlistEmbed object code |
| | 4 | + * Acts as a playback system for embedPlayer where the src |
| | 5 | + * is xml with multiple files |
| | 6 | + * |
| | 7 | + * Only works with "video" tag browsers |
| | 8 | + * |
| | 9 | + * @author: Michael Dale mdale@wikimedia.org |
| | 10 | + * @license GPL2 |
| | 11 | + * |
| | 12 | + * supports frame by frame rendering of "smil" and other playlist formats |
| | 13 | + * supports basic drop frame live playback of "smil" and other playlist formats |
| | 14 | + * |
| | 15 | + * Extends the "embedPlayer" and represents the playlist as a single video stream |
| | 16 | + * |
| | 17 | + */ |
| | 18 | +var playListEmbed = { |
| | 19 | + |
| | 20 | + // Instance Name |
| | 21 | + instanceOf: 'playListEmbed', |
| | 22 | + |
| | 23 | + // Native player supported feature set |
| | 24 | + supports: { |
| | 25 | + 'play_head': true, |
| | 26 | + 'pause': true, |
| | 27 | + 'fullscreen': false, |
| | 28 | + 'time_display': true, |
| | 29 | + 'volume_control': true, |
| | 30 | + 'overlays': true, |
| | 31 | + }, |
| | 32 | + |
| | 33 | + /** |
| | 34 | + * Return the embed code for the first clip in the playlist |
| | 35 | + * ( monitor and seek handle clip switching ) |
| | 36 | + */ |
| | 37 | + getEmbedHTML : function () { |
| | 38 | + var _this = this; |
| | 39 | + var embed_code = this.getEmbedObj(); |
| | 40 | + mw.log( "embed code: " + embed_code ) |
| | 41 | + setTimeout( function(){ |
| | 42 | + _this.postEmbedJS(); |
| | 43 | + }, 150 ); |
| | 44 | + return embed_code; |
| | 45 | + }, |
| | 46 | + |
| | 47 | + /** |
| | 48 | + * Get the native embed code for clipset at given time and seek |
| | 49 | + */ |
| | 50 | + getEmbedObj:function() { |
| | 51 | + // Output Video tag for every clip in next 20s |
| | 52 | + var eb = '<video ' + |
| | 53 | + 'id="' + this.pid + '" ' + |
| | 54 | + 'style="width:' + this.width + 'px;height:' + this.height + 'px;" ' + |
| | 55 | + 'width="' + this.width + '" height="' + this.height + '" ' + |
| | 56 | + 'src="' + this.getSrc() + '" ' + |
| | 57 | + '</video>'; |
| | 58 | + return eb; |
| | 59 | + }, |
| | 60 | + |
| | 61 | +} |
| \ No newline at end of file |
| Property changes on: branches/js2-work/phase3/js/mwEmbed/modules/Sequencer/playListEmbed.js |
| ___________________________________________________________________ |
| Name: svn:mergeinfo |
| 1 | 62 | + /branches/REL1_15/phase3/js2/mwEmbed/libSequencer/mvPlayList.js:51646 |
| /branches/sqlite/js2/mwEmbed/libSequencer/mvPlayList.js:58211-58321 |
| Name: svn:eol-style |
| 2 | 63 | + native |
| Index: branches/js2-work/phase3/js/mwEmbed/modules/Sequencer/mw.PlayList.js |
| — | — | @@ -36,17 +36,16 @@ |
| 37 | 37 | } else { |
| 38 | 38 | var defaultMetaDataProvider = wgServer + wgScript + '?title=Special:MvExportStream&feed_format=roe&stream_name='; |
| 39 | 39 | } |
| 40 | | -/* |
| 41 | | - * The playlist Object implements ~most~ of embedPlayer but we don't inherit (other than to use the control builder) |
| 42 | | - * because pretty much every function has to be changed for the playlist context |
| 43 | | - */ |
| | 40 | + |
| 44 | 41 | mw.PlayList = function( element ) { |
| 45 | 42 | return this.init( element ); |
| 46 | 43 | }; |
| 47 | 44 | // set up the mvPlaylist object |
| 48 | 45 | mw.PlayList.prototype = { |
| | 46 | + // Instance Name |
| 49 | 47 | instanceOf:'mvPlayList', |
| 50 | | - pl_duration:null, |
| | 48 | + |
| | 49 | + pl_duration: null, |
| 51 | 50 | update_tl_hook:null, |
| 52 | 51 | clip_ready_count:0, |
| 53 | 52 | cur_clip:null, |
| — | — | @@ -66,14 +65,14 @@ |
| 67 | 66 | tracks: { }, |
| 68 | 67 | default_track:null, // the default track to add clips to. |
| 69 | 68 | // the layout for the playlist object |
| 70 | | - pl_layout : { |
| | 69 | + layout : { |
| 71 | 70 | seq_title:.1, |
| 72 | 71 | clip_desc:.63, // displays the clip description |
| 73 | 72 | clip_aspect:1.33, // 4/3 video aspect ratio |
| 74 | 73 | seq:.25, // display clip thumbnails |
| 75 | 74 | seq_thumb:.25, // size for thumbnails (same as seq by default) |
| 76 | 75 | seq_nav:0, // for a nav bar at the base (currently disabled) |
| 77 | | - // some pl_layout info: |
| | 76 | + // some layout info: |
| 78 | 77 | title_bar_height:17, |
| 79 | 78 | control_height:29 |
| 80 | 79 | }, |
| — | — | @@ -88,7 +87,7 @@ |
| 89 | 88 | 'overlays':true, |
| 90 | 89 | 'playlist_swap_loader':true // if the object supports playlist functions |
| 91 | 90 | }, |
| 92 | | - init : function( element ) { |
| | 91 | + init: function( element ) { |
| 93 | 92 | mw.log( 'mvPlayList:init:' ); |
| 94 | 93 | this.tracks = { }; |
| 95 | 94 | this.default_track = null; |
| — | — | @@ -119,8 +118,8 @@ |
| 120 | 119 | |
| 121 | 120 | // if controls=false hide the title and the controls: |
| 122 | 121 | if ( this.controls === false ) { |
| 123 | | - this.pl_layout.control_height = 0; |
| 124 | | - this.pl_layout.title_bar_height = 0; |
| | 122 | + this.layout.control_height = 0; |
| | 123 | + this.layout.title_bar_height = 0; |
| 125 | 124 | } else { |
| 126 | 125 | // setup the controlBuilder object: |
| 127 | 126 | this.ctrlBuilder = new ctrlBuilder( this ); |
| — | — | @@ -196,8 +195,7 @@ |
| 197 | 196 | for ( var method in plObj ) { |
| 198 | 197 | // js parent preservation for local overwritten methods |
| 199 | 198 | if ( this[method] )this['parent_' + method] = this[method]; |
| 200 | | - this[method] = plObj[method]; |
| 201 | | - mw.log( 'inherit:' + method ); |
| | 199 | + this[method] = plObj[method]; |
| 202 | 200 | } |
| 203 | 201 | |
| 204 | 202 | if ( typeof this.doParse != 'function' ) { |
| — | — | @@ -391,14 +389,19 @@ |
| 392 | 390 | getClipCount:function() { |
| 393 | 391 | return this.default_track.clips.length; |
| 394 | 392 | }, |
| 395 | | - // }, |
| 396 | | - // takes in the playlist |
| 397 | | - // inherits all the properties |
| 398 | | - // swaps in the playlist object html/interface div |
| 399 | | - showPlayer:function() { |
| 400 | | - mw.log( 'mvPlaylist:showPlayer: loading:' + this.loading ); |
| | 393 | + |
| | 394 | + /** |
| | 395 | + * Checks the playlist player sources and calls "showPlayer" once ready |
| | 396 | + */ |
| | 397 | + checkPlayerSources: function( callback ) { |
| | 398 | + var _this = this; |
| | 399 | + mw.log( 'pl:checkPlayerSources:: loading:' + this.loading ); |
| 401 | 400 | if ( this.loading ) { |
| 402 | | - $j( '#' + this.id ).html( 'loading playlist...' ); |
| | 401 | + $j( '#' + this.id ) |
| | 402 | + .html( 'loading playlist...' ) |
| | 403 | + .css({ |
| | 404 | + 'color':'#000' |
| | 405 | + }); |
| 403 | 406 | if ( this.loading_external_data ) { |
| 404 | 407 | // load the data source chain of functions (to update the innerHTML) |
| 405 | 408 | this.getDataSource(); |
| — | — | @@ -411,17 +414,29 @@ |
| 412 | 415 | if ( this.default_track.getClipCount() == 0 ) { |
| 413 | 416 | $j( this ).html( 'empty playlist' ); |
| 414 | 417 | return ; |
| 415 | | - } else { |
| 416 | | - this.showPlayer(); |
| | 418 | + } else { |
| | 419 | + callback(); |
| 417 | 420 | } |
| 418 | 421 | } |
| 419 | 422 | }, |
| 420 | 423 | showPlayer:function() { |
| 421 | | - mw.log( 'mvPlaylist:showPlayer:: track length: ' + this.default_track.getClipCount() ); |
| | 424 | + mw.log( 'pl:showPlayer:: track length: ' + this.default_track.getClipCount() ); |
| 422 | 425 | var _this = this; |
| 423 | | - |
| 424 | | - //make sure we have control_wrap |
| 425 | | - if( $j( this ).parent('.control_wrap').length == 0 ){ |
| | 426 | + |
| | 427 | + //Check for playlist player sources: |
| | 428 | + this.checkPlayerSources(function(){ |
| | 429 | + _this.buildPlayerUI(); |
| | 430 | + }); |
| | 431 | + }, |
| | 432 | + |
| | 433 | + /** |
| | 434 | + * Build out the player interface ( assumes checkPlayerSources has been run ) |
| | 435 | + */ |
| | 436 | + buildPlayerUI: function(){ |
| | 437 | + var _this = this; |
| | 438 | + mw.log('pl:buildPlayer'); |
| | 439 | + // Make sure we have interface_wrap |
| | 440 | + if( $j( this ).parent('.interface_wrap').length == 0 ){ |
| 426 | 441 | // Select "player" |
| 427 | 442 | $j( this ) |
| 428 | 443 | // Add interface control class: |
| — | — | @@ -430,39 +445,35 @@ |
| 431 | 446 | }) |
| 432 | 447 | .wrap( |
| 433 | 448 | $j('<div>') |
| 434 | | - .addClass('control_wrap ' + this.ctrlBuilder.playerClass) |
| | 449 | + .addClass( 'interface_wrap ' + this.ctrlBuilder.playerClass ) |
| 435 | 450 | .css({ |
| 436 | 451 | 'width': parseInt( this.width ), |
| 437 | 452 | 'height': parseInt( this.height ) |
| 438 | 453 | }) |
| 439 | 454 | ) |
| 440 | 455 | } |
| 441 | | - |
| | 456 | + |
| 442 | 457 | // Update the target player: |
| 443 | | - this.$target = $j(this).parent('.control_wrap'); |
| 444 | | - if ( this.controls == true ) { |
| 445 | | - var cpos = _this.height + _this.pl_layout.title_bar_height; |
| 446 | | - // give more space if not in sequence: |
| 447 | | - cpos += ( this.sequencer ) ? 2:5; |
| 448 | | - // append title: |
| 449 | | - $j( '#dc_' + _this.id ).append( |
| 450 | | - '<div style="font-size:13px;border:solid thin;width:' + this.width + 'px;" id="ptitle_' + this.id + '"></div>' + |
| 451 | | - '<div class="' + this.ctrlBuilder.playerClass + '" style="position:absolute;top:' + cpos + 'px">' + |
| 452 | | - '<div class="ui-widget-header ui-helper-clearfix control-bar" ' + |
| 453 | | - 'style="width:' + _this.width + 'px" >' + |
| 454 | | - _this.getControlsHTML() + |
| 455 | | - '</div>' + |
| 456 | | - '</div>' |
| | 458 | + this.$interface = $j( this ).parent( '.interface_wrap' ); |
| | 459 | + this.ctrlBuilder.embedPlayer = this; |
| | 460 | + |
| | 461 | + if ( this.controls == true ) { |
| | 462 | + // prepend the title (ontop) |
| | 463 | + this.$interface.prepend( |
| | 464 | + $j('<div>') |
| | 465 | + .css({ |
| | 466 | + 'font-size':'13px', |
| | 467 | + 'border' : 'solid thin', |
| | 468 | + 'width' : this.width, |
| | 469 | + 'height': this.layout.title_bar_height |
| | 470 | + |
| | 471 | + }) |
| | 472 | + .attr('id', 'ptitle_' + this.id) |
| 457 | 473 | ); |
| 458 | | - |
| 459 | | - // once the controls are in the DOM add hooks: |
| 460 | | - this.ctrlBuilder.addControlHooks( ); |
| 461 | | - } else { |
| 462 | | - // just append the video: |
| 463 | | - $j( '#dc_' + _this.id ).append( |
| 464 | | - '<div class="' + this.ctrlBuilder.playerClass + '" style="position:absolute;top:' + ( _this.height + _this.pl_layout.title_bar_height + 4 ) + 'px"></div>' |
| 465 | | - ); |
| 466 | | - } |
| | 474 | + // add the controls: |
| | 475 | + this.ctrlBuilder.addControls( ); |
| | 476 | + } |
| | 477 | + |
| 467 | 478 | this.setupClipDisplay(); |
| 468 | 479 | |
| 469 | 480 | // update the title and status bar |
| — | — | @@ -472,16 +483,16 @@ |
| 473 | 484 | setupClipDisplay:function() { |
| 474 | 485 | mw.log( 'mvPlaylist:setupClipDisplay:: clip len:' + this.default_track.clips.length ); |
| 475 | 486 | var _this = this; |
| | 487 | + $j( _this ).html( '' ); |
| 476 | 488 | $j.each( this.default_track.clips, function( i, clip ) { |
| 477 | | - var cout = '<div class="clip_container cc_" id="clipDesc_' + clip.id + '" ' + |
| | 489 | + var cout = '<div class="clip_container" id="clipDesc_' + clip.id + '" ' + |
| 478 | 490 | 'style="display:none;position:absolute;text-align: center;width:' + _this.width + 'px;' + |
| 479 | | - 'height:' + ( _this.height ) + 'px;' + |
| 480 | | - 'top:' + this.title_bar_height + 'px;left:0px;'; |
| | 491 | + 'height:' + ( _this.height ) + 'px;'; |
| 481 | 492 | if ( _this.controls ) { |
| 482 | 493 | cout += 'border:solid thin black;'; |
| 483 | 494 | } |
| 484 | 495 | cout += '"></div>'; |
| 485 | | - $j( '#dc_' + _this.id ).append( cout ); |
| | 496 | + $j( _this ).append( cout ); |
| 486 | 497 | // update the embed html: |
| 487 | 498 | clip.embed.height = _this.height; |
| 488 | 499 | clip.embed.width = _this.width; |
| — | — | @@ -565,13 +576,13 @@ |
| 566 | 577 | }, |
| 567 | 578 | /*setStatus override (could call the jquery directly) */ |
| 568 | 579 | setStatus:function( value ) { |
| 569 | | - $j( '#' + this.id + ' .time-disp' ).text( value ); |
| | 580 | + this.$interface.find( '.time-disp' ).text( value ); |
| 570 | 581 | }, |
| 571 | 582 | updatePlayHead:function( value ) { |
| 572 | 583 | // slider is on 1000 scale: |
| 573 | 584 | var val = parseInt( value * 1000 ); |
| 574 | 585 | //mw.log( 'update slider: #' + this.id + ' .play_head to ' + val ); |
| 575 | | - $j( '#' + this.id + ' .play_head' ).slider( 'value', val ); |
| | 586 | + this.$interface.find( '.play_head' ).slider( 'value', val ); |
| 576 | 587 | }, |
| 577 | 588 | getPlayHeadPos: function( prec_done ) { |
| 578 | 589 | var _this = this; |
| — | — | @@ -691,7 +702,8 @@ |
| 692 | 703 | $j( '#clipDesc_' + this.cur_clip.id ).hide(); |
| 693 | 704 | } |
| 694 | 705 | this.activeClipList.add( new_clip ); |
| 695 | | - // do swap: |
| | 706 | + |
| | 707 | + // Do swap: |
| 696 | 708 | this.cur_clip = new_clip; |
| 697 | 709 | $j( '#clipDesc_' + this.cur_clip.id ).show(); |
| 698 | 710 | |
| — | — | @@ -715,7 +727,7 @@ |
| 716 | 728 | prev_clip = this.start_clip; |
| 717 | 729 | } |
| 718 | 730 | // @@todo we could do something fancy like use playlist for sets of clips where supported. |
| 719 | | - // or in cases where the player nativly supports the playlist format we can just pass it in (ie m3u or xspf) |
| | 731 | + // or in cases where the player natively supports the playlist format we can just pass it in ( ie m3u or xspf ) |
| 720 | 732 | if ( this.cur_clip.embed.supports['playlist_swap_loader'] ) { |
| 721 | 733 | // where the plugin supports pre_loading future clips and manage that in javascript |
| 722 | 734 | // pause current clip |
| — | — | @@ -744,7 +756,7 @@ |
| 745 | 757 | var _this = this; |
| 746 | 758 | mw.log( 'pl play' ); |
| 747 | 759 | // hide the playlist play button: |
| 748 | | - $j( this.id + ' .play-btn-large' ).hide(); |
| | 760 | + this.$interface.find('.play-btn-large' ).hide(); |
| 749 | 761 | |
| 750 | 762 | // un-pause if paused: |
| 751 | 763 | if ( this.paused ) |
| — | — | @@ -777,6 +789,20 @@ |
| 778 | 790 | // play cur_clip |
| 779 | 791 | this.cur_clip.embed.play(); |
| 780 | 792 | } |
| | 793 | + |
| | 794 | + // Update interface: |
| | 795 | + this.$interface.find('.play-btn span') |
| | 796 | + .removeClass( 'ui-icon-play' ) |
| | 797 | + .addClass( 'ui-icon-pause' ); |
| | 798 | + |
| | 799 | + this.$interface.find('.play-btn' ) |
| | 800 | + .unbind() |
| | 801 | + .buttonHover() |
| | 802 | + .click( function() { |
| | 803 | + _this.pause(); |
| | 804 | + } ) |
| | 805 | + .attr( 'title', gM( 'mwe-pause_clip' ) ); |
| | 806 | + |
| 781 | 807 | // start up the playlist monitor |
| 782 | 808 | this.monitor(); |
| 783 | 809 | }, |
| — | — | @@ -791,6 +817,7 @@ |
| 792 | 818 | this.cur_clip.embed.toggleMute(); |
| 793 | 819 | }, |
| 794 | 820 | pause:function() { |
| | 821 | + var _this = this; |
| 795 | 822 | // mw.log('f:pause: playlist'); |
| 796 | 823 | var ct = new Date(); |
| 797 | 824 | this.pauseTime = this.currentTime; |
| — | — | @@ -801,6 +828,20 @@ |
| 802 | 829 | $j.each( this.activeClipList.getClipList(), function( inx, clip ) { |
| 803 | 830 | clip.embed.pause(); |
| 804 | 831 | } ); |
| | 832 | + |
| | 833 | + // Copied from embedPlayer.pause ( in the refactor this is not needed ) |
| | 834 | + // update the ctrl "paused state" |
| | 835 | + this.$interface.find('.play-btn span' ) |
| | 836 | + .removeClass( 'ui-icon-pause' ) |
| | 837 | + .addClass( 'ui-icon-play' ); |
| | 838 | + |
| | 839 | + this.$interface.find('.play-btn' ) |
| | 840 | + .unbind() |
| | 841 | + .buttonHover() |
| | 842 | + .click( function() { |
| | 843 | + _this.play(); |
| | 844 | + } ) |
| | 845 | + .attr( 'title', gM( 'mwe-play_clip' ) ); |
| 805 | 846 | }, |
| 806 | 847 | // @@todo mute across all child clips: |
| 807 | 848 | toggleMute:function() { |
| — | — | @@ -942,15 +983,26 @@ |
| 943 | 984 | // get controls from current clip (add some playlist specific controls: |
| 944 | 985 | return this.ctrlBuilder.getControls( this ); |
| 945 | 986 | }, |
| 946 | | - // ads colors/dividers between tracks |
| | 987 | + |
| | 988 | + /** |
| | 989 | + * Update the buffer status |
| | 990 | + */ |
| | 991 | + updateBufferStatus: function() { |
| | 992 | + // Update the buffer status for all current clip |
| | 993 | + /*mw.log(' update: '+ this.cur_clip.embed.id + ' to ' + (this.cur_clip.embed.bufferedPercent * 100) ); |
| | 994 | + if( this.cur_clip.embed && this.cur_clip.embed.bufferedPercent ){ |
| | 995 | + $j('#cl_status_' + this.cur_clip.embed.id ).find('.mw_buffer').css({ |
| | 996 | + 'width': ( this.cur_clip.embed.bufferedPercent * 100) + '%' |
| | 997 | + }) |
| | 998 | + }*/ |
| | 999 | + }, |
| | 1000 | + // Add colors dividers between tracks |
| 947 | 1001 | colorPlayHead: function() { |
| 948 | 1002 | var _this = this; |
| 949 | 1003 | |
| 950 | | - if ( !_this.mv_seeker_width ) |
| 951 | | - _this.mv_seeker_width = $j( '#' + _this.id + ' .play_head' ).width(); |
| 952 | 1004 | |
| 953 | 1005 | if ( !_this.track_len ) |
| 954 | | - _this.track_len = $j( '#' + _this.id + ' .play_head' ).width(); |
| | 1006 | + _this.track_len = this.$interface.find( '.play_head' ).width(); |
| 955 | 1007 | |
| 956 | 1008 | // total duration: |
| 957 | 1009 | var pl_duration = _this.getDuration(); |
| — | — | @@ -964,7 +1016,6 @@ |
| 965 | 1017 | var perc = ( clip.getSoloDuration() / pl_duration ); |
| 966 | 1018 | var pwidth = Math.round( perc * _this.track_len ); |
| 967 | 1019 | // mw.log('pstatus:c:'+ clip.getDuration() + ' of '+ pl_duration+' %:' + perc + ' width: '+ pwidth + ' of total: ' + _this.track_len); |
| 968 | | - // var pwidth = Math.round( perc * _this.track_len - (_this.mv_seeker_width*perc) ); |
| 969 | 1020 | |
| 970 | 1021 | // add the buffer child indicator: |
| 971 | 1022 | var barHtml = '<div id="cl_status_' + clip.embed.id + '" class="cl_status" style="' + |
| — | — | @@ -983,34 +1034,12 @@ |
| 984 | 1035 | |
| 985 | 1036 | // background:#DDD +clip.getColor(); |
| 986 | 1037 | |
| 987 | | - $j( '#' + _this.id + ' .play_head' ).append( barHtml ); |
| | 1038 | + _this.$interface.find( '.play_head' ).append( barHtml ); |
| 988 | 1039 | |
| 989 | 1040 | // mw.log('offset:' + cur_pixle +' width:'+pwidth+' add clip'+ clip.id + ' is '+clip.embed.getDuration() +' = ' + perc +' of ' + _this.track_len); |
| 990 | 1041 | cur_pixle += pwidth; |
| 991 | 1042 | } ); |
| 992 | | - }, |
| 993 | | - // @@todo currently not really in use |
| 994 | | - setUpHover:function() { |
| 995 | | - mw.log( 'Setup Hover' ); |
| 996 | | - // set up hover for prev,next |
| 997 | | - var th = 50; |
| 998 | | - var tw = th * this.pl_layout.clip_aspect; |
| 999 | | - var _this = this; |
| 1000 | | - $j( '#mv_prev_link_' + _this.id + ',#mv_next_link_' + _this.id ).hover( function() { |
| 1001 | | - var clip = ( this.id == 'mv_prev_link_' + _this.id ) ? _this.getPrevClip() : _this.getNextClip(); |
| 1002 | | - if ( !clip ) |
| 1003 | | - return mw.log( 'missing clip for Hover' ); |
| 1004 | | - // get the position of #mv_perv|next_link: |
| 1005 | | - var loc = getAbsolutePos( this.id ); |
| 1006 | | - // mw.log('Hover: x:'+loc.x + ' y:' + loc.y + ' :'+clip.img); |
| 1007 | | - $j( "body" ).append( '<div id="mv_Athub" style="position:absolute;' + |
| 1008 | | - 'top:' + loc.y + 'px;left:' + loc.x + 'px;width:' + tw + 'px;height:' + th + 'px;">' + |
| 1009 | | - '<img style="border:solid 2px ' + clip.getColor() + ';position:absolute;top:0px;left:0px;" width="' + tw + '" height="' + th + '" src="' + clip.img + '"/>' + |
| 1010 | | - '</div>' ); |
| 1011 | | - }, function() { |
| 1012 | | - $j( '#mv_Athub' ).remove(); |
| 1013 | | - } ); |
| 1014 | | - }, |
| | 1043 | + }, |
| 1015 | 1044 | // @@todo we need to move a lot of this track logic like "cur_clip" to the track Obj |
| 1016 | 1045 | // and have the playlist just drive the tracks. |
| 1017 | 1046 | getNextClip:function( track ) { |
| — | — | @@ -1074,18 +1103,6 @@ |
| 1075 | 1104 | } ); |
| 1076 | 1105 | } |
| 1077 | 1106 | }, |
| 1078 | | - // this is pretty outdated: |
| 1079 | | - getPLControls: function() { |
| 1080 | | - mw.log( 'getPL cont' ); |
| 1081 | | - return '<a id="mv_prev_link_' + this.id + '" title="Previus Clip" onclick="document.getElementById(\'' + this.id + '\').playPrev();return false;" href="#">' + |
| 1082 | | - getTransparentPng( { id:'mv_prev_btn_' + this.id, style:'float:left', width:'27', height:'27', border:"0", |
| 1083 | | - src: mw.getConfig( 'skin_img_path' ) + 'vid_prev_sm.png' } ) + |
| 1084 | | - '</a>' + |
| 1085 | | - '<a id="mv_next_link_' + this.id + '" title="Next Clip" onclick="document.getElementById(\'' + this.id + '\').playNext();return false;" href="#">' + |
| 1086 | | - getTransparentPng( { id:'mv_next_btn_' + this.id, style:'float:left', width:'27', height:'27', border:"0", |
| 1087 | | - src: mw.getConfig( 'skin_img_path' ) + 'vid_next_sm.png' } ) + |
| 1088 | | - '</a>'; |
| 1089 | | - }, |
| 1090 | 1107 | run_transition: function( clip_inx, trans_type ) { |
| 1091 | 1108 | if ( typeof this.default_track.clips[ clip_inx ][ trans_type ] == 'undefined' ) |
| 1092 | 1109 | clearInterval( this.default_track.clips[ clip_inx ].timerId ); |
| — | — | @@ -1093,14 +1110,14 @@ |
| 1094 | 1111 | this.default_track.clips[ clip_inx ][ trans_type ].run_transition(); |
| 1095 | 1112 | }, |
| 1096 | 1113 | getPlayerWidth : function(){ |
| 1097 | | - var player = $j( '#dc_' + this.id ).get( 0 ); |
| | 1114 | + var player = $j( this ).get( 0 ); |
| 1098 | 1115 | if ( typeof player != 'undefined' && player['offsetWidth'] ) |
| 1099 | 1116 | return player.offsetWidth; |
| 1100 | 1117 | else |
| 1101 | 1118 | return parseInt( this.width ); |
| 1102 | 1119 | }, |
| 1103 | 1120 | getPlayerHeight : function(){ |
| 1104 | | - var player = $j( '#dc_' + this.id ).get( 0 ); |
| | 1121 | + var player = $j( this ).get( 0 ); |
| 1105 | 1122 | if ( typeof player != 'undefined' && player['offsetHeight'] ) |
| 1106 | 1123 | return player.offsetHeight; |
| 1107 | 1124 | else |
| — | — | @@ -1147,9 +1164,11 @@ |
| 1148 | 1165 | this.embed = null; |
| 1149 | 1166 | // mw.log('setup embed for clip '+ this.id + ':id is a function?'); |
| 1150 | 1167 | // set up the pl_mwEmbed object: |
| 1151 | | - var init_pl_embed = { id:'e_' + this.id, |
| 1152 | | - pc:this, // parent clip |
| 1153 | | - src:this.src |
| | 1168 | + var init_pl_embed = { |
| | 1169 | + id: 'e_' + this.id, |
| | 1170 | + pc: this, // parent clip |
| | 1171 | + src: this.src, |
| | 1172 | + controls: false |
| 1154 | 1173 | }; |
| 1155 | 1174 | |
| 1156 | 1175 | this.setBaseEmbedDim( init_pl_embed ); |
| — | — | @@ -1211,8 +1230,8 @@ |
| 1212 | 1231 | }, |
| 1213 | 1232 | setBaseEmbedDim:function( o ) { |
| 1214 | 1233 | if ( !o )o = this; |
| 1215 | | - // o.height=Math.round(pl_layout.clip_desc*this.pp.height)-2;//give it some padding: |
| 1216 | | - // o.width=Math.round(o.height*pl_layout.clip_aspect)-2; |
| | 1234 | + // o.height=Math.round(layout.clip_desc*this.pp.height)-2;//give it some padding: |
| | 1235 | + // o.width=Math.round(o.height*layout.clip_aspect)-2; |
| 1217 | 1236 | o.height = this.pp.height; |
| 1218 | 1237 | o.width = this.pp.width; |
| 1219 | 1238 | }, |
| — | — | @@ -1220,8 +1239,8 @@ |
| 1221 | 1240 | // @@todo |
| 1222 | 1241 | /*getDetail:function(){ |
| 1223 | 1242 | //mw.log('get detail:' + this.pp.title); |
| 1224 | | - var th=Math.round( this.pl_layout.clip_desc * this.pp.height ); |
| 1225 | | - var tw=Math.round( th * this.pl_layout.clip_aspect ); |
| | 1243 | + var th=Math.round( this.layout.clip_desc * this.pp.height ); |
| | 1244 | + var tw=Math.round( th * this.layout.clip_aspect ); |
| 1226 | 1245 | |
| 1227 | 1246 | var twDesc = (this.pp.width-tw)-2; |
| 1228 | 1247 | |
| — | — | @@ -1340,8 +1359,8 @@ |
| 1341 | 1360 | // set up convenience pointer to parent playlist |
| 1342 | 1361 | var _this = this.pc.pp; |
| 1343 | 1362 | |
| 1344 | | - var th = Math.round( _this.pl_layout.clip_desc * _this.height ); |
| 1345 | | - var tw = Math.round( th * _this.pl_layout.clip_aspect ); |
| | 1363 | + var th = Math.round( _this.layout.clip_desc * _this.height ); |
| | 1364 | + var tw = Math.round( th * _this.layout.clip_aspect ); |
| 1346 | 1365 | |
| 1347 | 1366 | // run the parent stop: |
| 1348 | 1367 | this.pe_stop(); |
| — | — | @@ -1365,9 +1384,6 @@ |
| 1366 | 1385 | // add playlist clips (if plugin supports it) |
| 1367 | 1386 | if ( this.pc.pp.cur_clip.embed.playlistSupport() ) |
| 1368 | 1387 | this.pc.pp.loadEmbedPlaylist(); |
| 1369 | | - // color playlist points (if play_head present) |
| 1370 | | - if ( this.pc.pp.disp_play_head ) |
| 1371 | | - this.pc.pp.colorPlayHead(); |
| 1372 | 1388 | // setup hover images (for playhead and next/prev buttons) |
| 1373 | 1389 | this.pc.pp.setUpHover(); |
| 1374 | 1390 | // call the parent postEmbedJS |
| — | — | @@ -1380,8 +1396,7 @@ |
| 1381 | 1397 | setStatus:function( value ) { |
| 1382 | 1398 | // status updates handled by playlist obj |
| 1383 | 1399 | }, |
| 1384 | | - updatePlayHead:function( value ) { |
| 1385 | | - //mw.log( 'PlMvEmbed:updatePlayHead:' + value ); |
| | 1400 | + updatePlayHead:function( value ) { |
| 1386 | 1401 | // updatePlayHead handled by playlist obj |
| 1387 | 1402 | } |
| 1388 | 1403 | } |
| — | — | @@ -1526,29 +1541,32 @@ |
| 1527 | 1542 | * SMIL CODE (could be put into another js file / lazy_loaded for improved basic playlist performance / modularity) |
| 1528 | 1543 | *****************************/ |
| 1529 | 1544 | /*playlist driver extensions to the playlist object*/ |
| 1530 | | -mw.PlayList.prototype.monitor = function() { |
| 1531 | | - // mw.log('pl:monitor'); |
| | 1545 | +mw.PlayList.prototype.monitor = function() { |
| | 1546 | + var _this = this; |
| 1532 | 1547 | // if paused stop updates |
| 1533 | | - if ( this.paused ) { |
| 1534 | | - // clearInterval( this.smil_monitorTimerId ); |
| | 1548 | + if ( this.paused ) { |
| 1535 | 1549 | return ; |
| 1536 | | - } |
| | 1550 | + } |
| | 1551 | + |
| | 1552 | + // Update the playlist current time: |
| | 1553 | + var clipCurrentTime = ( this.cur_clip.embed.currentTime )? this.cur_clip.embed.currentTime: 0; |
| | 1554 | + this.currentTime = this.cur_clip.dur_offset + clipCurrentTime; |
| | 1555 | + |
| 1537 | 1556 | // mw.log("pl check: " + this.currentTime + ' > '+this.getDuration()); |
| 1538 | 1557 | // check if we should be done: |
| 1539 | 1558 | if ( this.currentTime > this.getDuration() ) |
| 1540 | 1559 | this.stop(); |
| | 1560 | + |
| 1541 | 1561 | |
| 1542 | | - var relative_time = ( this.startOffset ) ? ( this.currentTime - this.startOffset) : this.currentTime; |
| 1543 | | - |
| 1544 | | - // Update the playlist current time: |
| 1545 | | - // Check for a trsnOut from the previus clip to subtract |
| 1546 | | - this.currentTime = this.cur_clip.dur_offset + relative_time; |
| 1547 | | - |
| 1548 | | - // update slider: |
| | 1562 | + // Update slider: |
| 1549 | 1563 | if ( !this.userSlide ) { |
| 1550 | 1564 | this.setStatus( mw.seconds2npt( this.currentTime ) + '/' + mw.seconds2npt( this.getDuration() ) ); |
| 1551 | 1565 | this.updatePlayHead( this.currentTime / this.getDuration() ); |
| 1552 | 1566 | } |
| | 1567 | + |
| | 1568 | + //Update buffer info |
| | 1569 | + this.updateBufferStatus(); |
| | 1570 | + |
| 1553 | 1571 | // pre-load any future clips: |
| 1554 | 1572 | this.loadFutureClips(); |
| 1555 | 1573 | |
| — | — | @@ -1556,11 +1574,9 @@ |
| 1557 | 1575 | // status updates are handled by children clips ... playlist mostly manages smil actions |
| 1558 | 1576 | this.doSmilActions(); |
| 1559 | 1577 | |
| 1560 | | - if ( ! this.smil_monitorTimerId ) { |
| 1561 | | - if ( document.getElementById( this.id ) ) { |
| 1562 | | - this.smil_monitorTimerId = setInterval( '$j(\'#' + this.id + '\').get(0).monitor()', 250 ); |
| 1563 | | - } |
| 1564 | | - } |
| | 1578 | + setTimeout( function(){ |
| | 1579 | + _this.monitor(); |
| | 1580 | + }, 250); |
| 1565 | 1581 | } |
| 1566 | 1582 | |
| 1567 | 1583 | // handles the rendering of overlays load of future clips (if necessary) |
| — | — | @@ -1696,7 +1712,7 @@ |
| 1697 | 1713 | //issue a load request: |
| 1698 | 1714 | other_pClip.embed.load(); |
| 1699 | 1715 | } |
| 1700 | | - // manualy ad the extra layer to the activeClipList |
| | 1716 | + // Manually ad the extra layer to the activeClipList |
| 1701 | 1717 | tObj.pClip.pp.activeClipList.add( other_pClip ); |
| 1702 | 1718 | tObj.overlay_selector_id = 'clipDesc_' + other_pClip.id; |
| 1703 | 1719 | } else { |
| — | — | @@ -1732,7 +1748,8 @@ |
| 1733 | 1749 | } |
| 1734 | 1750 | return overlay_selector_id; |
| 1735 | 1751 | }, |
| 1736 | | - doUpdate:function( tObj, percent, callback ) { |
| | 1752 | + |
| | 1753 | + doUpdate: function( tObj, percent, callback ) { |
| 1737 | 1754 | // init the transition if necessary: |
| 1738 | 1755 | if ( !tObj.overlay_selector_id ) |
| 1739 | 1756 | this.doInitTransition( tObj ); |
| — | — | @@ -1750,10 +1767,12 @@ |
| 1751 | 1768 | |
| 1752 | 1769 | this[ 'type' ][ tObj.type ][ tObj.subtype ].u( tObj, percent, callback); |
| 1753 | 1770 | }, |
| | 1771 | + |
| 1754 | 1772 | getTransitionIcon:function( type, subtype ) { |
| 1755 | 1773 | return mw.getMwEmbedPath() + '/skins/common/transition_images/' + type + '_' + subtype + '.png'; |
| 1756 | 1774 | }, |
| 1757 | | - /* |
| | 1775 | + |
| | 1776 | + /** |
| 1758 | 1777 | * mvTransLib: functional library mapping: |
| 1759 | 1778 | */ |
| 1760 | 1779 | type: { |
| — | — | @@ -1762,7 +1781,7 @@ |
| 1763 | 1782 | fadeFromColor: { |
| 1764 | 1783 | 'attr' : ['fadeColor'], |
| 1765 | 1784 | 'init' : function( tObj ) { |
| 1766 | | - // mw.log('f:fadeFromColor: '+tObj.overlay_selector_id +' to color: '+ tObj.fadeColor); |
| | 1785 | + mw.log('f:fadeFromColor: '+tObj.overlay_selector_id +' to color: '+ tObj.fadeColor); |
| 1767 | 1786 | if ( !tObj.fadeColor ) |
| 1768 | 1787 | mw.log( 'missing fadeColor' ); |
| 1769 | 1788 | if ( $j( '#' + tObj.overlay_selector_id ).length == 0 ) { |
| — | — | @@ -1805,7 +1824,8 @@ |
| 1806 | 1825 | } |
| 1807 | 1826 | } |
| 1808 | 1827 | |
| 1809 | | -/* object to manage embedding html with smil timings |
| | 1828 | +/** |
| | 1829 | + * Object to manage embedding html with smil timings |
| 1810 | 1830 | * grabs settings from parent clip |
| 1811 | 1831 | */ |
| 1812 | 1832 | var transitionObj = function( element ) { |
| — | — | @@ -1823,8 +1843,9 @@ |
| 1824 | 1844 | overlay_selector_id:null, |
| 1825 | 1845 | pClip:null, |
| 1826 | 1846 | timerId:null, |
| 1827 | | - animation_state:0, // can be 0=unset, 1=running, 2=done |
| 1828 | | - interValCount:0, // inter-intervalCount for animating between time updates |
| | 1847 | + animation_state:0, // can be 0=unset, 1=running, 2=done |
| | 1848 | + // inter-intervalCount for animating between time updates |
| | 1849 | + interValCount:0, |
| 1829 | 1850 | dur:2, // default duration of 2 |
| 1830 | 1851 | init:function( element ) { |
| 1831 | 1852 | // load supported attributes: |
| — | — | @@ -1858,16 +1879,15 @@ |
| 1859 | 1880 | } |
| 1860 | 1881 | return elmObj; |
| 1861 | 1882 | }, |
| 1862 | | - /* |
| 1863 | | - * the main animation loop called every MV_ANIMATION_CB_RATE or 34ms ~around 30frames per second~ |
| | 1883 | + |
| | 1884 | + /** |
| | 1885 | + * Main animation loop called every MV_ANIMATION_CB_RATE or 34ms ~around 30frames per second~ |
| 1864 | 1886 | */ |
| 1865 | | - run_transition:function() { |
| 1866 | | - // mw.log('f:run_transition:' + this.interValCount); |
| 1867 | | - |
| 1868 | | - // update the time from the video if native: |
| 1869 | | - if ( typeof this.pClip.embed.vid != 'undefined' ) { |
| 1870 | | - this.interValCount = 0; |
| 1871 | | - this.pClip.embed.currentTime = this.pClip.embed.vid.currentTime; |
| | 1887 | + run_transition: function() { |
| | 1888 | + _this = this; |
| | 1889 | + // If we have the playerElement update the time per run_transition call |
| | 1890 | + if ( this.pClip.embed.playerElement && this.pClip.embed.playerElement.currentTime ) { |
| | 1891 | + this.pClip.embed.currentTime = this.pClip.embed.playerElement.currentTime; |
| 1872 | 1892 | } |
| 1873 | 1893 | |
| 1874 | 1894 | // }else{ |
| — | — | @@ -1885,23 +1905,11 @@ |
| 1886 | 1906 | mvTransLib.doInitTransition( this ); |
| 1887 | 1907 | this.animation_state = 1; |
| 1888 | 1908 | } |
| 1889 | | - // set percentage include diffrence of currentTime to prev_curTime |
| 1890 | | - // ie updated in-between currentTime updates) |
| 1891 | | - |
| 1892 | | - if ( this.transAttrType == 'transIn' ) |
| 1893 | | - var percentage = ( this.pClip.embed.currentTime + |
| 1894 | | - ( ( this.interValCount * MV_ANIMATION_CB_RATE ) / 1000 ) |
| 1895 | | - ) / this.dur ; |
| | 1909 | + |
| | 1910 | + var percentage = this.pClip.embed.currentTime / this.dur; |
| 1896 | 1911 | |
| 1897 | | - if ( this.transAttrType == 'transOut' ) |
| 1898 | | - var percentage = ( this.pClip.embed.currentTime + |
| 1899 | | - ( ( this.interValCount * MV_ANIMATION_CB_RATE ) / 1000 ) |
| 1900 | | - - ( this.pClip.dur - this.dur ) |
| 1901 | | - ) / this.dur ; |
| | 1912 | + //mw.log('percentage = ct:'+this.pClip.embed.currentTime + ' + ic:'+this.interValCount +' * cb:'+MV_ANIMATION_CB_RATE +' / ' + this.dur + ' = ' + percentage ); |
| 1902 | 1913 | |
| 1903 | | - /*mw.log('percentage = ct:'+this.pClip.embed.currentTime + ' + ic:'+this.interValCount +' * cb:'+MV_ANIMATION_CB_RATE + |
| 1904 | | - ' / ' + this.dur + ' = ' + percentage ); |
| 1905 | | - */ |
| 1906 | 1914 | |
| 1907 | 1915 | // mw.log('cur percentage of transition: '+percentage); |
| 1908 | 1916 | // update state based on current time + cur_time_offset (for now just use pClip.embed.currentTime) |
| — | — | @@ -1910,22 +1918,15 @@ |
| 1911 | 1919 | if ( percentage >= 1 ) { |
| 1912 | 1920 | mw.log( "transition done update with percentage " + percentage ); |
| 1913 | 1921 | this.animation_state = 2; |
| 1914 | | - clearInterval( this.timerId ); |
| 1915 | 1922 | mvTransLib.doCloseTransition( this ) |
| 1916 | 1923 | return true; |
| 1917 | 1924 | } |
| 1918 | | - |
| 1919 | | - this.interValCount++; |
| 1920 | | - // setInterval in we are still in running state and user is not using the playhead |
| 1921 | | - if ( this.animation_state == 1 ) { |
| 1922 | | - if ( !this.timerId ) { |
| 1923 | | - this.timerId = setInterval( 'document.getElementById(\'' + this.pClip.pp.id + '\').' + |
| 1924 | | - 'run_transition(\'' + this.pClip.pp.cur_clip.order + '\',' + |
| 1925 | | - '\'' + this.transAttrType + '\')', |
| 1926 | | - MV_ANIMATION_CB_RATE ); |
| 1927 | | - } |
| 1928 | | - } else { |
| 1929 | | - clearInterval( this.timerId ); |
| | 1925 | + |
| | 1926 | + // run the animation ( animation_state == 1 && not "paused") |
| | 1927 | + if( !this.pClip.pp.paused ){ |
| | 1928 | + setTimeout( function(){ |
| | 1929 | + _this.run_transition(); |
| | 1930 | + }, MV_ANIMATION_CB_RATE); |
| 1930 | 1931 | } |
| 1931 | 1932 | return true; |
| 1932 | 1933 | }, |
| — | — | @@ -1975,7 +1976,7 @@ |
| 1976 | 1977 | mw.log( 'skipping transition: (missing id) ' + trans_elm ); |
| 1977 | 1978 | } |
| 1978 | 1979 | } ); |
| 1979 | | - mw.log( 'loaded transitions:' + _this.transitions.length ); |
| | 1980 | + mw.log( 'loaded transitions:' + _this.transitions ); |
| 1980 | 1981 | |
| 1981 | 1982 | // Add seq (latter we will have support more than one seq tag) / more than one "track" |
| 1982 | 1983 | var seq_tags = this.data.getElementsByTagName( 'seq' ); |
| — | — | @@ -2227,9 +2228,9 @@ |
| 2228 | 2229 | return this.clipList; |
| 2229 | 2230 | } |
| 2230 | 2231 | } |
| 2231 | | - var trackObj = function( iObj ) { |
| | 2232 | +var trackObj = function( iObj ) { |
| 2232 | 2233 | return this.init( iObj ); |
| 2233 | | - } |
| | 2234 | +} |
| 2234 | 2235 | var supported_track_attr = |
| 2235 | 2236 | trackObj.prototype = { |
| 2236 | 2237 | // should be something like "seq" per SMIL spec |
| Index: branches/js2-work/phase3/js/mwEmbed/remotes/mediaWiki.js |
| — | — | @@ -50,13 +50,23 @@ |
| 51 | 51 | // Timed text display: |
| 52 | 52 | if ( wgPageName.indexOf( "TimedText" ) === 0 ) { |
| 53 | 53 | if( wgAction == 'view' ){ |
| 54 | | - mwSetPageToLoading(); |
| 55 | | - } |
| 56 | | - //load the "player" ( includes call to loadMwEmbed ) |
| 57 | | - mwLoadPlayer(function(){ |
| 58 | | - // Now load MediaWiki TimedText Remote: |
| 59 | | - mw.load( 'RemoteMwTimedText' ); |
| 60 | | - } ); |
| | 54 | + var orgBody = mwSetPageToLoading(); |
| | 55 | + //load the "player" ( includes call to loadMwEmbed ) |
| | 56 | + mwLoadPlayer(function(){ |
| | 57 | + // Now load MediaWiki TimedText Remote: |
| | 58 | + mw.load( 'RemoteMwTimedText',function(){ |
| | 59 | + //Setup the remote configuration |
| | 60 | + var myRemote = new RemoteMwTimedText( { |
| | 61 | + 'action': wgAction, |
| | 62 | + 'title' : wgTitle, |
| | 63 | + 'target': '#bodyContent', |
| | 64 | + 'orgBody': orgBody |
| | 65 | + }); |
| | 66 | + // Update the UI |
| | 67 | + myRemote.updateUI(); |
| | 68 | + } ); |
| | 69 | + } ); |
| | 70 | + } |
| 61 | 71 | } |
| 62 | 72 | |
| 63 | 73 | // Remote Sequencer |
| — | — | @@ -124,8 +134,9 @@ |
| 125 | 135 | function mwSetPageToLoading(){ |
| 126 | 136 | importStylesheetURI( mwEmbedHostPath + '/mwEmbed/skins/mvpcf/styles.css?' + mwGetReqArgs() ); |
| 127 | 137 | var body = document.getElementById('bodyContent'); |
| | 138 | + var oldBodyHTML = body.innerHTML; |
| 128 | 139 | body.innerHTML = '<div class="loading_spinner"></div>'; |
| 129 | | - return ; |
| | 140 | + return oldBodyHTML; |
| 130 | 141 | } |
| 131 | 142 | /** |
| 132 | 143 | * Similar to the player loader in /modules/embedPlayer/loader.js |