summaryrefslogtreecommitdiff
path: root/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/resources/skins/kskin/mw.PlayerSkinKskin.js
diff options
context:
space:
mode:
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.js394
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 );