| Index: branches/js2-work/phase3/js/mwEmbed/modules/TimedText/remotes/RemoteMwTimedText.js |
| — | — | @@ -1,18 +1,127 @@ |
| 2 | 2 | /** |
| 3 | 3 | * Stop-gap for mediaWiki timed text support |
| 4 | 4 | * |
| 5 | | -* Does some tranformations to normal wiki timed Text pages to make them look |
| | 5 | +* Does some transformations to normal wiki timed Text pages to make them look |
| 6 | 6 | * like the php output that we will eventually want to have |
| | 7 | + |
| | 8 | +wgArticleId |
| 7 | 9 | */ |
| 8 | 10 | mw.addMessages( { |
| 9 | | - "mwe-language-subtiles-for-clip": "$1 subtitles for clip: $2", |
| 10 | | - "mwe-language-no-subtiles-for-clip": "No $1 subtitles where found for clip: $2" |
| | 11 | + "mwe-language-subtitles-for-clip": "$1 subtitles for clip: $2", |
| | 12 | + "mwe-language-no-subtitles-for-clip": "No $1 subtitles where found for clip: $2" |
| 11 | 13 | }); |
| 12 | | - |
| 13 | | -RemoteMwTimedText = { |
| | 14 | +var RemoteMwTimedText = function( options ){ |
| | 15 | + return this.init( options ); |
| | 16 | +} |
| | 17 | +RemoteMwTimedText.prototype = { |
| 14 | 18 | |
| 15 | | - embedByTitle: function( fileTitle, callback ){ |
| 16 | | - //Get all the embed details: |
| | 19 | + init: function( options ) { |
| | 20 | + this.action = ( options.action )? options.action : this.action; |
| | 21 | + this.title = ( options.title )? options.title : this.title; |
| | 22 | + this.target = ( options.target )? options.target : this.target; |
| | 23 | + }, |
| | 24 | + updateUI: function(){ |
| | 25 | + // Check page type |
| | 26 | + if( this.action == 'view' ){ |
| | 27 | + this.showViewUI(); |
| | 28 | + } |
| | 29 | + }, |
| | 30 | + showViewUI: function(){ |
| | 31 | + var _this = this; |
| | 32 | + var fileTitleKey = this.title.split('.'); |
| | 33 | + this.extension = fileTitleKey.pop(); |
| | 34 | + this.langKey = fileTitleKey.pop(); |
| | 35 | + this.fileTitleKey = fileTitleKey.join('.'); |
| | 36 | + |
| | 37 | + this.getTitleResource( this.fileTitleKey, function( resource ){ |
| | 38 | + _this.embedViewUI( resource ); |
| | 39 | + }); |
| | 40 | + }, |
| | 41 | + embedViewUI: function( resource ){ |
| | 42 | + var _this = this; |
| | 43 | + // Load the player module: |
| | 44 | + mw.load( 'EmbedPlayer', function(){ |
| | 45 | + // Add the embed code: ( jquery wrapping of "video" fails ) |
| | 46 | + $j( _this.target ).append( |
| | 47 | + $j( '<div class="videoLoading">').html( |
| | 48 | + '<video id="timed-text-player-embed" '+ |
| | 49 | + 'style="width:' + resource.width + 'px;height:' + resource.height + 'px;" '+ |
| | 50 | + 'class="kskin" ' + //We need to centrally store this config somewhere |
| | 51 | + 'poster="' + resource.poster + '" ' + |
| | 52 | + 'src="' + resource.src + '" ' + |
| | 53 | + 'wikiTitleKey="' + resource.wikiTitleKey + '" >' + |
| | 54 | + '</video><br><br><br><br>' |
| | 55 | + ) |
| | 56 | + ); |
| | 57 | + $j('.videoLoading').hide(); |
| | 58 | + // embed the player with the pre-selected langauge: |
| | 59 | + _this.embedPlayerLang(); |
| | 60 | + }); |
| | 61 | + }, |
| | 62 | + /* |
| | 63 | + * embeds a player with the current language key pre selected |
| | 64 | + */ |
| | 65 | + embedPlayerLang: function(){ |
| | 66 | + var _this = this; |
| | 67 | + if( wgArticlePath ){ |
| | 68 | + var $fileLink = $j('<div>').append( |
| | 69 | + $j('<a>').attr({ |
| | 70 | + 'href' : wgArticlePath.replace( '$1', 'File:' + _this.fileTitleKey) |
| | 71 | + }) |
| | 72 | + .text( _this.fileTitleKey.replace('_', ' ') ) |
| | 73 | + ) |
| | 74 | + } |
| | 75 | + |
| | 76 | + // Rewrite the player (any video tags on the page) |
| | 77 | + $j('#timed-text-player-embed').embedPlayer( function(){ |
| | 78 | + //Select the timed text for the page: |
| | 79 | + |
| | 80 | + //remove the loader |
| | 81 | + $j('.loading_spinner').remove(); |
| | 82 | + |
| | 83 | + var player = $j('#timed-text-player-embed').get(0); |
| | 84 | + |
| | 85 | + |
| | 86 | + if( !player.timedText ){ |
| | 87 | + mw.log("Error: no timedText method on embedPlayer" ); |
| | 88 | + return ; |
| | 89 | + } |
| | 90 | + // Set the userLanguage: |
| | 91 | + player.timedText.config.userLanugage = this.langKey; |
| | 92 | + |
| | 93 | + // Make sure the timed text sources are loaded: |
| | 94 | + player.timedText.setupTextSources( function(){ |
| | 95 | + |
| | 96 | + var source = player.timedText.getSourceByLanguage( _this.langKey ); |
| | 97 | + var pageMsgKey = 'mwe-language-subtitles-for-clip'; |
| | 98 | + if( ! source ){ |
| | 99 | + pageMsgKey = "mwe-language-no-subtitles-for-clip" |
| | 100 | + } |
| | 101 | + // Add the page msg to the top |
| | 102 | + $j( _this.target ).prepend( |
| | 103 | + $j('<h3>') |
| | 104 | + .html( |
| | 105 | + gM(pageMsgKey, [ unescape( mw.languages[ _this.langKey ] ), $fileLink.html() ] ) |
| | 106 | + ) |
| | 107 | + ); |
| | 108 | + // Select the language if possible: |
| | 109 | + if( source ){ |
| | 110 | + player.timedText.selectTextSource( source ); |
| | 111 | + } |
| | 112 | + // Un-hide the player |
| | 113 | + $j('.videoLoading').show(); |
| | 114 | + } ); |
| | 115 | + } ); |
| | 116 | + }, |
| | 117 | + |
| | 118 | + /** |
| | 119 | + * Gets the properties of a given title as a resource |
| | 120 | + * @param {String} fileTitle Title of media asset to embed |
| | 121 | + * @param {Function} {Optional} callback Function to call once asset is embedded |
| | 122 | + */ |
| | 123 | + getTitleResource: function( fileTitle, callback ){ |
| | 124 | + var _this = this; |
| | 125 | + // Get all the embed details: |
| 17 | 126 | var request = { |
| 18 | 127 | 'titles' : 'File:' + fileTitle, |
| 19 | 128 | 'prop' : 'imageinfo|revisions', |
| — | — | @@ -22,7 +131,7 @@ |
| 23 | 132 | } |
| 24 | 133 | // (only works for commons right now) |
| 25 | 134 | mw.getJSON( request, function( data ) { |
| 26 | | - // check for redirect |
| | 135 | + // Check for redirect |
| 27 | 136 | for ( var i in data.query.pages ) { |
| 28 | 137 | var page = data.query.pages[i]; |
| 29 | 138 | if ( page.revisions[0]['*'] && page.revisions[0]['*'].indexOf( '#REDIRECT' ) === 0 ) { |
| — | — | @@ -33,15 +142,15 @@ |
| 34 | 143 | RemoteMwTimedText.embedByTitle( pt[1], callback); |
| 35 | 144 | return ; |
| 36 | 145 | } else { |
| 37 | | - mw.log( 'Error: addByTitle could not proccess redirect' ); |
| | 146 | + mw.log( 'Error: addByTitle could not process redirect' ); |
| 38 | 147 | callback( false ); |
| 39 | 148 | return false; |
| 40 | 149 | } |
| 41 | 150 | } |
| 42 | | - mw.log("should proccess data result"); |
| | 151 | + mw.log( "should process data result" ); |
| 43 | 152 | // Else process the result |
| 44 | | - embedAttributes = RemoteMwTimedText.getEmbedAttributes( page ); |
| 45 | | - callback( embedAttributes ); |
| | 153 | + var resource = _this.getResource( page ); |
| | 154 | + callback( resource ); |
| 46 | 155 | } |
| 47 | 156 | } ); |
| 48 | 157 | }, |
| — | — | @@ -49,7 +158,7 @@ |
| 50 | 159 | /** |
| 51 | 160 | * Get the embed code from response resource and sends it a callback |
| 52 | 161 | */ |
| 53 | | - getEmbedAttributes: function( page ){ |
| | 162 | + getResource: function( page ){ |
| 54 | 163 | return { |
| 55 | 164 | 'wikiTitleKey' : page.title.replace(/File:/ig, '' ), |
| 56 | 165 | 'link' : page.imageinfo[0].descriptionurl, |
| — | — | @@ -62,78 +171,12 @@ |
| 63 | 172 | } |
| 64 | 173 | |
| 65 | 174 | mw.ready( function(){ |
| 66 | | - // Check page type |
| 67 | | - if( wgAction == 'view' ){ |
| 68 | | - var fileTitleKey = wgTitle.split('.'); |
| 69 | | - var extension = fileTitleKey.pop(); |
| 70 | | - var langKey = fileTitleKey.pop(); |
| 71 | | - fileTitleKey = fileTitleKey.join('.'); |
| 72 | | - |
| 73 | | - RemoteMwTimedText.embedByTitle( fileTitleKey, function( embedAttributes ){ |
| 74 | | - mw.load( 'EmbedPlayer', function(){ |
| 75 | | - if( wgArticlePath ){ |
| 76 | | - var $fileLink = $j('<div>').append( |
| 77 | | - $j('<a>').attr({ |
| 78 | | - 'href' : wgArticlePath.replace( '$1', 'File:' + fileTitleKey) |
| 79 | | - }) |
| 80 | | - .text( fileTitleKey.replace('_', ' ') ) |
| 81 | | - ) |
| 82 | | - } |
| 83 | | - // Add the embed code: ( jquery wraping of "video" fails ) |
| 84 | | - $j('#bodyContent').append( |
| 85 | | - $j( '<div class="videoLoading">').html( |
| 86 | | - '<video id="timed-text-player-embed" '+ |
| 87 | | - 'class="kskin" ' + //We need to centrally store this config somewhere |
| 88 | | - 'poster="' + embedAttributes.poster + '" ' + |
| 89 | | - 'src="' + embedAttributes.src + '" ' + |
| 90 | | - 'wikiTitleKey="' + embedAttributes.wikiTitleKey + '" >' + |
| 91 | | - '</video><br><br><br><br>' |
| 92 | | - ) |
| 93 | | - ); |
| 94 | | - $j('.videoLoading').hide(); |
| 95 | | - // Rewrite the player (any video tags on the page) |
| 96 | | - $j('#timed-text-player-embed').embedPlayer( function(){ |
| 97 | | - //Select the timed text for the page: |
| 98 | | - |
| 99 | | - //remove the loader |
| 100 | | - $j('.loading_spinner').remove(); |
| 101 | | - |
| 102 | | - var player = $j('#timed-text-player-embed').get(0); |
| 103 | | - |
| 104 | | - |
| 105 | | - if( !player.timedText ){ |
| 106 | | - mw.log("Error: no timedText method on embedPlayer" ); |
| 107 | | - return ; |
| 108 | | - } |
| 109 | | - // Set the userLanguage: |
| 110 | | - player.timedText.config.userLanugage = langKey; |
| 111 | | - |
| 112 | | - //Make sure the timed text sources are loaded: |
| 113 | | - player.timedText.setupTextSources( function(){ |
| 114 | | - |
| 115 | | - var source = player.timedText.getSourceByLanguage( langKey ); |
| 116 | | - var pageMsgKey = 'mwe-language-subtiles-for-clip'; |
| 117 | | - if( ! source ){ |
| 118 | | - pageMsgKey = "mwe-language-no-subtiles-for-clip" |
| 119 | | - } |
| 120 | | - //Add the page msg to the top |
| 121 | | - $j('#bodyContent').prepend( |
| 122 | | - $j('<h3>') |
| 123 | | - .html( |
| 124 | | - gM(pageMsgKey, [ unescape( mw.languages[ langKey ] ), $fileLink.html() ] ) |
| 125 | | - ) |
| 126 | | - ); |
| 127 | | - //Select the language if possible: |
| 128 | | - if( source ){ |
| 129 | | - player.timedText.selectTextSource( source ); |
| 130 | | - } |
| 131 | | - // Un-hide the player |
| 132 | | - $j('.videoLoading').show(); |
| 133 | | - }); |
| 134 | | - |
| 135 | | - }); |
| 136 | | - } ); |
| 137 | | - |
| 138 | | - } ); |
| 139 | | - } |
| | 175 | + //Setup the remote configuration |
| | 176 | + myRemote = new RemoteMwTimedText( { |
| | 177 | + 'action': wgAction, |
| | 178 | + 'title' : wgTitle, |
| | 179 | + 'target': '#bodyContent' |
| | 180 | + }); |
| | 181 | + // Update the UI |
| | 182 | + myRemote.updateUI(); |
| 140 | 183 | } ); |
| \ No newline at end of file |