diff options
Diffstat (limited to 'extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/resources/skins/kskin/mw.PlayerSkinKskin.js')
| -rw-r--r-- | extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/resources/skins/kskin/mw.PlayerSkinKskin.js | 394 |
1 files changed, 394 insertions, 0 deletions
diff --git a/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/resources/skins/kskin/mw.PlayerSkinKskin.js b/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/resources/skins/kskin/mw.PlayerSkinKskin.js new file mode 100644 index 00000000..39b43834 --- /dev/null +++ b/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/resources/skins/kskin/mw.PlayerSkinKskin.js @@ -0,0 +1,394 @@ +/** +* Skin js allows you to override contrlBuilder html/class output +*/ + +( function( mw, $ ) {"use strict"; + +mw.PlayerSkinKskin = { + + // The parent class for all kskin css: + playerClass: 'k-player', + + // Display time string length + longTimeDisp: false, + + // Default control bar height + height: 20, + + // Volume control layout is horizontal + volumeLayout: 'horizontal', + + // Skin "kskin" is specific for wikimedia we have an + // api Title key so the "credits" menu item can be showed. + supportedMenuItems: { + 'credits': true + }, + // Stores the current menu item id + currentMenuItem: null, + + // Extends base components with kskin specific options: + components: { + 'pause': { + 'w': 28 + }, + 'volumeControl': { + 'w': 40 + }, + 'playButtonLarge' : { + 'h' : 55 + }, + 'options': { + 'w': 52, + 'o': function( ctrlObj ) { + return $( '<div />' ) + .attr( 'title', mw.msg( 'mwe-embedplayer-player_options' ) ) + .addClass( "ui-state-default ui-corner-bl rButton k-options" ) + .append( + $( '<span />' ) + .text( mw.msg( 'mwe-embedplayer-menu_btn' ) ) + ); + } + }, + // No attributionButton component for kSkin ( its integrated into the credits screen ) + 'attributionButton' : false, + + // Time display: + 'timeDisplay': { + 'w': 52 + }, + 'optionsMenu': { + 'w' : 0, + 'o' : function( ctrlObj ) { + var embedPlayer = ctrlObj.embedPlayer; + var $menuOverlay = $( '<div />') + .addClass( 'overlay-win k-menu ui-widget-content' ) + .css( { + 'width' : '100%', + 'position': 'absolute', + 'top' : '0px', + 'bottom' : ( ctrlObj.getHeight() + 2 ) + 'px' + } ); + + // Note safari can't display video overlays with text: + // see bug https://bugs.webkit.org/show_bug.cgi?id=48379 + + var userAgent = navigator.userAgent.toLowerCase(); + if( userAgent.indexOf('safari') != -1 ){ + $menuOverlay.css('opacity', '0.9'); + } + // Setup menu offset ( if player height < getOverlayHeight ) + // This displays the menu outside of the player on small embeds + if ( embedPlayer.getPlayerHeight() < ctrlObj.getOverlayHeight() ) { + var topPos = ( ctrlObj.isOverlayControls() ) + ? embedPlayer.getPlayerHeight() + : embedPlayer.getPlayerHeight() + ctrlObj.getHeight(); + + if( embedPlayer.isAudio() ){ + topPos = ctrlObj.embedPlayer.getInterface().height(); + } + + $menuOverlay.css( { + 'top' : topPos + 'px', + 'bottom' : null, + 'width' : ctrlObj.getOverlayWidth(), + 'height' : ctrlObj.getOverlayHeight() + 'px' + } ); + // Special common overflow hack for thumbnail display of player + $( embedPlayer ).parents( '.thumbinner' ).css( 'overflow', 'visible' ); + } + + var $menuBar = $( '<ul />' ) + .addClass( 'k-menu-bar' ); + + // Don't include about player menu item ( FIXME should be moved to a init function ) + delete ctrlObj.supportedMenuItems['aboutPlayerLibrary']; + + // Output menu item containers: + for ( var menuItem in ctrlObj.supportedMenuItems ) { + // Give grep a chance to find the usages: + // mwe-embedplayer-playerSelect, mwe-embedplayer-download, + // mwe-embedplayer-share, mwe-embedplayer-credits + $menuBar.append( + $( '<li />') + // Add the menu item class: + .addClass( 'k-' + menuItem + '-btn' ) + .attr( 'rel', menuItem ) + .append( + $( '<a />' ) + .attr( { + 'title' : mw.msg( 'mwe-embedplayer-' + menuItem ), + 'href' : '#' + }) + ) + ); + } + + // Add the menuBar to the menuOverlay + $menuOverlay.append( $menuBar ); + + var $menuScreens = $( '<div />' ) + .addClass( 'k-menu-screens' ) + .css( { + 'position' : 'absolute', + 'top' : '0px', + 'left' : '0px', + 'bottom' : '0px', + 'right' : '45px', + 'overflow' : 'hidden' + } ); + for ( var menuItem in ctrlObj.supportedMenuItems ) { + $menuScreens.append( + $( '<div />' ) + .addClass( 'menu-screen menu-' + menuItem ) + ); + } + + // Add the menuScreens to the menuOverlay + $menuOverlay.append( $menuScreens ); + + return $menuOverlay; + + } + } + }, + + /** + * Get minimal width for interface overlay + */ + getOverlayWidth: function(){ + return ( this.embedPlayer.getPlayerWidth() < 220 )? 220 : this.embedPlayer.getPlayerWidth(); + }, + + /** + * Get minimal height for interface overlay + */ + getOverlayHeight: function(){ + return ( this.embedPlayer.getPlayerHeight() < 160 )? 160 : this.embedPlayer.getPlayerHeight(); + }, + + /** + * Adds the skin Control Bindings + */ + addSkinControlBindings: function() { + var embedPlayer = this.embedPlayer; + var _this = this; + + // Set up control bar pointer + this.$playerTarget = embedPlayer.$interface; + // Set the menu target: + + + // Options menu display: + this.$playerTarget.find( '.k-options' ) + .unbind() + .click( function() { + _this.checkMenuOverlay(); + var $kmenu = _this.$playerTarget.find( '.k-menu' ); + if ( $kmenu.is( ':visible' ) ) { + _this.closeMenuOverlay( ); + } else { + _this.showMenuOverlay(); + // no other item is selected by default show the media credits: + if ( !_this.currentMenuItem ){ + _this.showMenuItem('credits'); + // Hide the others + _this.$playerTarget.find( '.menu-screen' ).hide(); + // Show credits + _this.$playerTarget.find( '.menu-credits' ).fadeIn( "fast" ); + } + } + } ); + + }, + + /** + * checks for menu overlay and runs menu bindings if unset + */ + checkMenuOverlay: function(){ + var _this = this; + var embedPlayer = this.embedPlayer; + if ( _this.$playerTarget.find( '.k-menu' ).length == 0 ) { + // Stop the player if it does not support overlays: + if ( !embedPlayer.supports['overlays'] ) { + embedPlayer.stop(); + } + + // Add the menu binding + _this.addMenuBinding(); + } + }, + + /** + * Close the menu overlay + */ + closeMenuOverlay: function() { + mw.log("PlayerSkinKskin:: close menu overlay" ); + var embedPlayer = this.embedPlayer; + var $optionsMenu = embedPlayer.getInterface().find( '.k-options' ); + var $kmenu = embedPlayer.getInterface().find( '.k-menu' ); + $kmenu.fadeOut( "fast", function() { + $optionsMenu.find( 'span' ) + .text ( mw.msg( 'mwe-embedplayer-menu_btn' ) ); + } ); + // show the play button if not playing + if( !embedPlayer.isPlaying() ){ + embedPlayer.getInterface().find( '.play-btn-large' ).fadeIn( 'fast' ); + } + + // re-display the control bar if hidden: + this.showControlBar(); + + // Set close overlay menu flag: + this.displayOptionsMenuFlag = false; + }, + + /** + * Show the menu overlay + */ + showMenuOverlay: function( $ktxt ) { + var $optionsMenu = this.$playerTarget.find( '.k-options' ); + var $kmenu = this.$playerTarget.find( '.k-menu' ); + + $kmenu.fadeIn( "fast", function() { + $optionsMenu.find( 'span' ) + .text ( mw.msg( 'mwe-embedplayer-close_btn' ) ); + } ); + this.$playerTarget.find( '.play-btn-large' ).fadeOut( 'fast' ); + + $(this.embedPlayer).trigger( 'displayMenuOverlay' ); + + // Set the Options Menu display flag to true: + this.displayOptionsMenuFlag = true; + }, + + /** + * Adds binding for the options menu + * + * @param {Object} $tp Target video container for + */ + addMenuBinding: function() { + var _this = this; + var embedPlayer = this.embedPlayer; + // Set local player target pointer: + var $playerTarget = embedPlayer.$interface; + + // Check if k-menu already exists: + if ( $playerTarget.find( '.k-menu' ).length != 0 ) + return false; + + // Add options menu to top of player target children: + $playerTarget.append( + _this.getComponent( 'optionsMenu' ) + ); + + // By default its hidden: + $playerTarget.find( '.k-menu' ).hide(); + + // Add menu-items bindings: + for ( var menuItem in _this.supportedMenuItems ) { + $playerTarget.find( '.k-' + menuItem + '-btn' ).click( function( ) { + + // Grab the context from the "clicked" menu item + var mk = $( this ).attr( 'rel' ); + + // hide all menu items + var $targetItem = $playerTarget.find( '.menu-' + mk ); + + // call the function showMenuItem + _this.showMenuItem( mk ); + + // Hide the others + $playerTarget.find( '.menu-screen' ).hide(); + + // Show the target menu item: + $targetItem.fadeIn( "fast" ); + + // Don't follow the # link + return false; + } ); + } + }, + + /** + * Shows a selected menu_item + * + * NOTE: this should be merged with parent mw.PlayerControlBuilder optionMenuItems + * binding mode + * + * @param {String} menu_itme Menu item key to display + */ + showMenuItem:function( menuItem ) { + var embedPlayer = this.embedPlayer; + this.currentMenuItem = menuItem; + //handle special k-skin specific display; + switch( menuItem ){ + case 'credits': + this.showCredits(); + break; + case 'playerSelect': + embedPlayer.$interface.find( '.menu-playerSelect').html( + this.getPlayerSelect() + ); + break; + case 'download' : + embedPlayer.$interface.find( '.menu-download').text( + mw.msg('mwe-loading_txt' ) + ); + // Call show download with the target to be populated + this.showDownload( + embedPlayer.$interface.find( '.menu-download') + ); + break; + case 'share': + embedPlayer.$interface.find( '.menu-share' ).html( + this.getShare() + ); + break; + } + }, + + /** + * Show the credit screen ( presently specific to kaltura skin ) + */ + showCredits: function() { + // Set up the shortcuts: + var embedPlayer = this.embedPlayer; + var _this = this; + var $target = embedPlayer.$interface.find( '.menu-credits' ); + + $target.empty().append( + $('<h2 />') + .text( mw.msg( 'mwe-embedplayer-credits' ) ), + $('<div />') + .addClass( "credits_box ui-corner-all" ) + .append( + $('<div/>') + .loadingSpinner() + .css({'position':'absolute','top':'50%','left':'50%'}) + ) + ); + + if( mw.config.get( 'EmbedPlayer.KalturaAttribution' ) == true ){ + $target.append( + $( '<div />' ) + .addClass( 'k-attribution' ) + .attr({ + 'title': mw.msg('mwe-embedplayer-kaltura-platform-title') + }) + .click( function( ) { + window.location = 'http://html5video.org'; + }) + ); + } + var $creditBox = $target.find('.credits_box'); + $creditBox.data( 'playerId', embedPlayer.id ); + $( embedPlayer ).triggerQueueCallback('showCredits', $creditBox, function( addedCredits ){ + if( !addedCredits ){ + $creditBox.find('.credits_box').text( mw.msg( 'mwe-embedplayer-nocredits') ) + } + }); + } + +}; + +} )( mw, jQuery ); |