From b1ec623b4c4b34278113371890424b2a71674227 Mon Sep 17 00:00:00 2001 From: Greg Kass Date: Fri, 26 Apr 2013 17:19:34 -0400 Subject: [PATCH] Implement Autohide for Mobile/Touch Devices. A touch on the videoplayer fades in the player controls, over 'fadeIn' milliseconds. When the touch is released, after 'hold' milliseconds, the controls fade out after 'fadeOut' milliseconds, unless the player or controls are retouched, in which case the 'hold' countdown resets until next touch release. I copied the conditional checks for autohide into the event handlers. This satisfies the need to not autohide the controls on video end and on video pause, for example. Many video players, particularly for entertainment content, keep the controls shown on end and on pause. I have not tested fully if having the conditionals here negates the need for the same conditional on line 2262. --- jquery.jplayer/jquery.jplayer.js | 43 ++++++++++++++++++++++++++------ 1 file changed, 36 insertions(+), 7 deletions(-) diff --git a/jquery.jplayer/jquery.jplayer.js b/jquery.jplayer/jquery.jplayer.js index fea6ba34..6efb1846 100644 --- a/jquery.jplayer/jquery.jplayer.js +++ b/jquery.jplayer/jquery.jplayer.js @@ -2215,12 +2215,34 @@ namespace = ".jPlayerAutohide", eventType = event + namespace, handler = function() { - self.css.jq.gui.fadeIn(self.options.autohide.fadeIn, function() { - clearTimeout(self.internal.autohideId); - self.internal.autohideId = setTimeout( function() { - self.css.jq.gui.fadeOut(self.options.autohide.fadeOut); + if((self.options.fullScreen && self.options.autohide.full) || (!self.options.fullScreen && self.options.autohide.restored) ) { + self.css.jq.gui.fadeIn(self.options.autohide.fadeIn, function() { + clearTimeout(self.internal.autohideId); + self.internal.autohideId = setTimeout( function() { + self.css.jq.gui.fadeOut(self.options.autohide.fadeOut); + }, self.options.autohide.hold); + }); + } + }, + touchhandlerTimeout = setTimeout(function(){},0), + touchstartHandler = function(){ + if((self.options.fullScreen && self.options.autohide.full) || (!self.options.fullScreen && self.options.autohide.restored) ) { + clearTimeout(touchhandlerTimeout); + self.css.jq.gui.fadeIn(self.options.autohide.fadeIn); + } + }, + touchendHandler = function() { + if((self.options.fullScreen && self.options.autohide.full) || (!self.options.fullScreen && self.options.autohide.restored) ) { + touchhandlerTimeout = setTimeout( function() { + if(self.options.fullScreen && self.options.autohide.full || !self.options.fullScreen && self.options.autohide.restored) { + self.css.jq.gui.fadeOut(self.options.autohide.fadeOut, function(){ + if(!(self.options.fullScreen && self.options.autohide.full || !self.options.fullScreen && self.options.autohide.restored)) { + self.css.jq.gui.fadeIn(); + } + }); + } }, self.options.autohide.hold); - }); + } }; if(this.css.jq.gui.length) { @@ -2237,8 +2259,15 @@ if(!this.status.nativeVideoControls) { if(this.options.fullWindow && this.options.autohide.full || !this.options.fullWindow && this.options.autohide.restored) { - this.element.bind(eventType, handler); - this.css.jq.gui.bind(eventType, handler); + if (!($.jPlayer.uaPlatform(navigator.userAgent).tablet || $.jPlayer.uaPlatform(navigator.userAgent).platform)) { + this.element.bind(eventType, handler); + this.css.jq.gui.bind(eventType, handler); + } else { + this.element.bind("touchend", touchendHandler); + this.element.bind("touchstart", touchstartHandler); + this.css.jq.gui.bind("touchend", touchendHandler); + this.css.jq.gui.bind("touchstart", touchstartHandler); + } this.css.jq.gui.hide(); } else { this.css.jq.gui.show();