path: root/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/resources/mw.EmbedPlayerImageOverlay.js

/**
 * Used to Overlay images and take over player controls
 *
 *  extends EmbedPlayerNative object image overlay support
 */

mw.EmbedPlayerImageOverlay = {

	instanceOf: 'ImageOverlay',

	// If the player is "ready to play"
	playerReady : true,

	// Pause time used to track player time between pauses
	lastPauseTime: 0,

	// currentTime updated via internal clockStartTime var
	currentTime:0,

	// StartOffset support seeking into the virtual player
	startOffset:0,

	// The local clock used to emulate playback time
	clockStartTime: 0,

	/**
	 * Build the player interface:
	 */
	init: function(){
		// Check if features are already updated:
		if( this['native_instaceOf'] == 'Native' ){
			return ;
		}
		// inherit mw.EmbedPlayerNative (
		for( var i in mw.EmbedPlayerNative ){
			if( typeof mw.EmbedPlayerImageOverlay[ i ] != 'undefined' ){
				this['native_' + i ] = mw.EmbedPlayerNative[i];
			} else {
				this[ i ] = mw.EmbedPlayerNative[i];
			}
		}
	},

	/**
	 * When on playback method switch remove imageOverlay
	 * @param {function} callback
	 */
	updatePlaybackInterface: function( callback ){
		mw.log( 'EmbedPlayerImageOverlay:: updatePlaybackInterface remove imageOverlay: ' + $(this).siblings( '.imageOverlay' ).length );
		// Reset lastPauseTime
		this.lastPauseTime  = 0;
		// Clear imageOverlay sibling:
		$( this ).find( '.imageOverlay' ).remove();
		// Restore the video element on screen position:
		$( this.getPlayerElement() ).css('left', 0 );
		// Call normal parent updatePlaybackInterface
		this.parent_updatePlaybackInterface( callback );
	},

	/**
	 * The method called to "show the player"
	 * For image overlay we want to:
	 * 	Set black video urls for player source
	 * 	Add an image overlay
	 */
	updatePosterHTML: function(){
		var vid = this.getPlayerElement();
		$( vid ).empty()

		// Provide modules the opportunity to supply black sources ( for registering event click )
		// this is need for iPad to capture the play click to auto continue after "playing an image"
		// ( iOS requires a user gesture to initiate video playback )

		// We don't just include the sources as part of core config, since it would result in
		// a possible privacy leakage i.e hitting the kaltura servers when playing images.
		this.triggerHelper( 'AddEmptyBlackSources', [ vid ] );

		// embed the image:
		this.embedPlayerHTML();

		// add the play btn:
		this.addLargePlayBtn();
	},

	/**
	*  Play function starts the video playback
	*/
	play: function() {
		mw.log( 'EmbedPlayerImageOverlay::play> lastPauseTime:' + this.lastPauseTime + ' ct: ' + this.currentTime );
		this.applyIntrinsicAspect();
		// Check for image duration

		// Reset playback if currentTime > duration:
		if( this.currentTime > this.getDuration() ) {
			this.currentTime = this.pauseTime = 0;
		}

		// No longer in a stopped state:
		this.stopped = false;

		// Capture the play event on the native player: ( should just be black silent sources )
		// This is needed so that if a playlist starts with image, it can continue to play the
		// subsequent video without on iOS without requiring another click.
		if( ! $( this ).data('previousInstanceOf') ){
			// Update the previousInstanceOf flag:
			$( this ).data('previousInstanceOf', this.instanceOf );
			var vid = this.getPlayerElement();
			// populate the video with black video sources:
			this.triggerHelper( 'AddEmptyBlackSources', [ vid ] );
			// run play:
			vid.play();
			// inline pause
			setTimeout(function(){
				vid.pause();
			},0);
			// add another pause request after 500 ms ( iOS sometimes does not listen the first time )
			setTimeout(function(){
				vid.pause();
			}, mw.config.get( 'EmbedPlayer.MonitorRate' ) * 2 );
		}
		// call the parent play ( to update interface and call respective triggers )
		this.parent_play();
		// make sure we are in play interface:
		this.playInterfaceUpdate();

		this.clockStartTime = new Date().getTime();
		// Start up monitor:
		this.monitor();
	},
	getDuration: function(){
		if( this.duration ){
			return this.duration;
		}
		if( this.imageDuration ){
			this.duration = this.imageDuration ;
		} else {
			this.duration = mw.config.get( "EmbedPlayer.DefaultImageDuration" );
		}
		// make sure duration has type float:
		this.duration = parseFloat( this.duration );
		return this.duration;
	},
	/**
	* Stops the playback
	*/
	stop: function() {
		this.currentTime = 0;
		this.parent_stop();
	},
	_onpause: function(){
		// catch the native event ( and do nothing )
	},
	/**
	* Preserves the pause time across for timed playback
	*/
	pause: function( ) {
		this.lastPauseTime = this.currentTime;
		mw.log( 'EmbedPlayerImageOverlay::pause, lastPauseTime: ' + this.lastPauseTime  );
		// run parent pause;
		this.parent_pause();
		this.stopMonitor();
	},

	monitor: function(){
		if( this.duration == 0 ){
			this.disablePlayControls();
			return ;
		}
		$( this ).trigger( 'timeupdate' );

		if ( this.currentTime >= this.duration ) {
			$( this ).trigger( 'ended' );
		} else {
			// Run the parent monitor:
			this.parent_monitor();
		}
	},
	/**
	* Seeks to a given percent and updates the lastPauseTime
	*
	* @param {Float} seekPercent Percentage to seek into the virtual player
	*/
	seek: function( seekPercent ) {
		this.lastPauseTime = seekPercent * this.getDuration();
		this.seeking = false;
		// start seeking:
		$( this ).trigger( 'seeking' );
		// Done seeking
		$( this ).trigger( 'seeked' );
		this.play();
	},

	/**
	* Sets the current Time
	*
	* @param {Float} perc Percentage to seek into the virtual player
	* @param {Function} callback Function called once time has been updated
	*/
	setCurrentTime: function( time, callback ) {
		this.lastPauseTime = time;
		// start seeking:
		$( this ).trigger( 'seeking' );
		// Done seeking
		$( this ).trigger( 'seeked' );
		if( callback ){
			callback();
		}
	},
	/**
	 * Switch the image playback
	 */
	playerSwitchSource: function(  source, switchCallback, doneCallback ){
		var _this = this;
		this.selectedSource = source;
		this.embedPlayerHTML();
		this.applyIntrinsicAspect();
		this.play();
		if( switchCallback ){
			switchCallback( this );
		}
		// Wait for ended event to tr
		$( this ).bind('ended.playerSwitchSource', function(){
			$( _this ).unbind('ended.playerSwitchSource');
			if( doneCallback ) {
				doneCallback( this );
			}
		})
	},
	/**
	* Get the embed player time
	*/
	getPlayerElementTime: function() {
		this.currentTime = ( ( new Date().getTime() - this.clockStartTime ) / 1000 ) + this.lastPauseTime;
		return this.currentTime;
	},
	/**
	* Get the "embed" html for the html player
	*/
	embedPlayerHTML: function() {
		var _this = this;
		// remove any old imageOverlay:
		this.$interface.find('.imageOverlay').remove();
		mw.log( 'EmbedPlayerImageOverlay :doEmbedHTML: ' + this.id );

		var currentSoruceObj = this.selectedSource;

		if( !currentSoruceObj ){
			mw.log("Error:: EmbedPlayerImageOverlay:embedPlayerHTML> missing source" );
			return ;
		}
		var $image =
			$( '<img />' )
			.css({
				'position': 'relative',
				'width': '100%',
				'height': '100%'
			})
			.attr({
				'src' : currentSoruceObj.getSrc()
			})
			.addClass( 'imageOverlay' )
			.load( function(){
				// reset clock time:
				_this.clockStartTime = new Date().getTime();
				_this.monitor();
			})

		// move the video element off screen:
		$( this.getPlayerElement() ).css({
			'left': this.getWidth()+50,
			'position' : 'absolute'
		});

		// Add the image before the video element or before the playerInterface
		$( this ).html( $image );

		this.applyIntrinsicAspect();
	},
	// wrap the parent rewize player to apply intensic apsect
	resizePlayer: function( size , animate, callback){
		this.parent_resizePlayer( size , animate, callback );
		this.applyIntrinsicAspect();
	},
	applyIntrinsicAspect: function(){
		var $this = this.$interface;
		// Check if a image thumbnail is present:
		/*if(  this.$interface && this.$interface.find('.imageOverlay').length ){
			var img = this.$interface.find('.imageOverlay')[0];
			var pHeight = $this.height();
			// Check for intrinsic width and maintain aspect ratio
			if( img.naturalWidth && img.naturalHeight ){
				var pWidth = parseInt(  img.naturalWidth / img.naturalHeight * pHeight);
				if( pWidth > $this.width() ){
					pWidth = $this.width();
					pHeight =  parseInt( img.naturalHeight / img.naturalWidth * pWidth );
				}
				$( img ).css({
					'height' : pHeight + 'px',
					'width':  pWidth + 'px',
					'left': ( ( $this.width() - pWidth ) * .5 ) + 'px',
					'top': ( ( $this.height() - pHeight ) * .5 ) + 'px',
					'position' : 'absolute'
				});
			}
		}*/
	}
};