Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Added keyboard support to the minPlayer.
  • Loading branch information
travist committed Feb 28, 2012
1 parent c85c315 commit 571a4a3
Show file tree
Hide file tree
Showing 29 changed files with 1,152 additions and 775 deletions.
29 changes: 16 additions & 13 deletions bin/minplayer.compressed.js

Large diffs are not rendered by default.

176 changes: 141 additions & 35 deletions bin/minplayer.js
Expand Up @@ -361,10 +361,10 @@ minplayer.plugin.prototype.addPlugin = function(name, plugin) {
*/ */
minplayer.plugin.prototype.get = function(plugin, callback) { minplayer.plugin.prototype.get = function(plugin, callback) {


// Allow this to be called on itself with a single callback. // If they pass just a callback, then return all plugins when ready.
if (typeof plugin === 'function') { if (typeof plugin === 'function') {
this.get(this.name, plugin); callback = plugin;
return; plugin = null;
} }


// Return the minplayer.get equivalent. // Return the minplayer.get equivalent.
Expand Down Expand Up @@ -984,9 +984,6 @@ minplayer.prototype.addEvents = function() {
// Bind to the error event. // Bind to the error event.
plugin.bind('error', function(event, data) { plugin.bind('error', function(event, data) {


// Log this to console.
minplayer.console.log(data);

// If an error occurs within the html5 media player, then try // If an error occurs within the html5 media player, then try
// to fall back to the flash player. // to fall back to the flash player.
if (_this.currentPlayer == 'html5') { if (_this.currentPlayer == 'html5') {
Expand Down Expand Up @@ -1030,12 +1027,13 @@ minplayer.prototype.error = function(error) {
*/ */
minplayer.prototype.addKeyEvents = function() { minplayer.prototype.addKeyEvents = function() {


// Bind keyup to the current window. // Bind to key events...
jQuery(window).bind('keyup', {obj: this}, function(event) { jQuery(document).bind('keydown', {obj: this}, function(e) {
// Escape out of fullscreen if they press ESC or Q. switch (e.keyCode) {
var isFull = event.data.obj.display.hasClass('fullscreen'); case 113: // ESC
if (isFull && (event.keyCode === 113 || event.keyCode === 27)) { case 27: // Q
event.data.obj.display.removeClass('fullscreen'); e.data.obj.display.removeClass('fullscreen');
break;
} }
}); });
}; };
Expand Down Expand Up @@ -1202,7 +1200,7 @@ minplayer.prototype.load = function(files) {
minplayer.prototype.resize = function() { minplayer.prototype.resize = function() {


// Call onRezie for each plugin. // Call onRezie for each plugin.
this.eachPlugin(function(name, plugin) { this.get(function(plugin) {
plugin.onResize(); plugin.onResize();
}); });
}; };
Expand Down Expand Up @@ -1776,6 +1774,49 @@ minplayer.players.base.prototype.construct = function() {


// Get the player object... // Get the player object...
this.player = this.getPlayer(); this.player = this.getPlayer();

// Set the focus of the element based on if they click in or outside of it.
var _this = this;
jQuery(document).bind('click', function(e) {
if (jQuery(e.target).closest('#' + _this.options.id).length == 0) {
_this.hasFocus = false;
}
else {
_this.hasFocus = true;
}
});

// Bind to key events...
jQuery(document).bind('keydown', {obj: this}, function(e) {
if (e.data.obj.hasFocus) {
e.preventDefault();
switch (e.keyCode) {
case 32: // SPACE
case 179: // GOOGLE play/pause button.
if (e.data.obj.playing) {
e.data.obj.pause();
}
else {
e.data.obj.play();
}
break;
case 38: // UP
e.data.obj.setVolumeRelative(0.1);
break;
case 40: // DOWN
e.data.obj.setVolumeRelative(-0.1);
break;
case 37: // LEFT
case 227: // GOOGLE TV REW
e.data.obj.seekRelative(-0.05);
break;
case 39: // RIGHT
case 228: // GOOGLE TV FW
e.data.obj.seekRelative(0.05);
break;
}
}
});
}; };


/** /**
Expand All @@ -1788,15 +1829,6 @@ minplayer.players.base.prototype.destroy = function() {
this.reset(); this.reset();
}; };


/**
* Clears all the intervals.
*/
minplayer.players.base.prototype.clearIntervals = function() {
// Stop the intervals.
this.playInterval = false;
this.progressInterval = false;
};

/** /**
* Resets all variables. * Resets all variables.
*/ */
Expand All @@ -1823,8 +1855,14 @@ minplayer.players.base.prototype.reset = function() {
// The current volume of the player. // The current volume of the player.
this.volume = new minplayer.async(); this.volume = new minplayer.async();


// Stop the intervals. // Reset focus.
this.clearIntervals(); this.hasFocus = false;

// We are not playing.
this.playing = false;

// We are not loading.
this.loading = false;


// If the player exists, then unbind all events. // If the player exists, then unbind all events.
if (this.player) { if (this.player) {
Expand Down Expand Up @@ -1859,13 +1897,13 @@ minplayer.players.base.prototype.onReady = function() {
this.setVolume(this.options.volume / 100); this.setVolume(this.options.volume / 100);


// Setup the progress interval. // Setup the progress interval.
this.progressInterval = true; this.loading = true;


// Create a poll to get the progress. // Create a poll to get the progress.
this.poll(function() { this.poll(function() {


// Only do this if the play interval is set. // Only do this if the play interval is set.
if (_this.progressInterval) { if (_this.loading) {


// Get the bytes loaded asynchronously. // Get the bytes loaded asynchronously.
_this.getBytesLoaded(function(bytesLoaded) { _this.getBytesLoaded(function(bytesLoaded) {
Expand All @@ -1888,12 +1926,17 @@ minplayer.players.base.prototype.onReady = function() {
total: bytesTotal, total: bytesTotal,
start: bytesStart start: bytesStart
}); });

// Say we are not longer loading if they are equal.
if (bytesLoaded >= bytesTotal) {
_this.loading = false;
}
} }
}); });
}); });
} }


return _this.progressInterval; return _this.loading;
}); });


// We are now ready. // We are now ready.
Expand All @@ -1913,14 +1956,17 @@ minplayer.players.base.prototype.onPlaying = function() {
// Trigger an event that we are playing. // Trigger an event that we are playing.
this.trigger('playing'); this.trigger('playing');


// Say that this player has focus.
this.hasFocus = true;

// Set the playInterval to true. // Set the playInterval to true.
this.playInterval = true; this.playing = true;


// Create a poll to get the timeupate. // Create a poll to get the timeupate.
this.poll(function() { this.poll(function() {


// Only do this if the play interval is set. // Only do this if the play interval is set.
if (_this.playInterval) { if (_this.playing) {


// Get the current time asyncrhonously. // Get the current time asyncrhonously.
_this.getCurrentTime(function(currentTime) { _this.getCurrentTime(function(currentTime) {
Expand All @@ -1945,7 +1991,7 @@ minplayer.players.base.prototype.onPlaying = function() {
}); });
} }


return _this.playInterval; return _this.playing;
}); });
}; };


Expand All @@ -1957,16 +2003,21 @@ minplayer.players.base.prototype.onPaused = function() {
// Trigger an event that we are paused. // Trigger an event that we are paused.
this.trigger('pause'); this.trigger('pause');


// Stop the play interval. // Remove focus.
this.playInterval = false; this.hasFocus = false;

// Say we are not playing.
this.playing = false;
}; };


/** /**
* Should be called when the media is complete. * Should be called when the media is complete.
*/ */
minplayer.players.base.prototype.onComplete = function() { minplayer.players.base.prototype.onComplete = function() {
// Stop the intervals. // Stop the intervals.
this.clearIntervals(); this.playing = false;
this.loading = false;
this.hasFocus = false;
this.trigger('ended'); this.trigger('ended');
}; };


Expand All @@ -1990,6 +2041,7 @@ minplayer.players.base.prototype.onWaiting = function() {
* @param {string} errorCode The error that was triggered. * @param {string} errorCode The error that was triggered.
*/ */
minplayer.players.base.prototype.onError = function(errorCode) { minplayer.players.base.prototype.onError = function(errorCode) {
this.hasFocus = false;
this.trigger('error', errorCode); this.trigger('error', errorCode);
}; };


Expand Down Expand Up @@ -2070,8 +2122,42 @@ minplayer.players.base.prototype.pause = function() {
* Stop the loaded media file. * Stop the loaded media file.
*/ */
minplayer.players.base.prototype.stop = function() { minplayer.players.base.prototype.stop = function() {
// Stop the intervals. this.playing = false;
this.clearIntervals(); this.loading = false;
this.hasFocus = false;
};

/**
* Seeks to relative position.
*
* @param {number} pos Relative position. -1 to 1 (percent), > 1 (seconds).
*/
minplayer.players.base.prototype.seekRelative = function(pos) {

// Get the current time asyncrhonously.
var _this = this;
this.getCurrentTime(function(currentTime) {

// Get the duration asynchronously.
_this.getDuration(function(duration) {

// Only do this if we have a duration.
if (duration) {

// Get the position.
var seekPos = 0;
if ((pos > -1) && (pos < 1)) {
seekPos = (currentTime / duration) + parseFloat(pos);
}
else {
seekPos = (currentTime + parseFloat(pos)) / duration;
}

// Set the seek value.
_this.seek(seekPos);
}
});
});
}; };


/** /**
Expand All @@ -2080,7 +2166,23 @@ minplayer.players.base.prototype.stop = function() {
* @param {number} pos The position to seek the minplayer. 0 to 1. * @param {number} pos The position to seek the minplayer. 0 to 1.
*/ */
minplayer.players.base.prototype.seek = function(pos) { minplayer.players.base.prototype.seek = function(pos) {
};


/**
* Set the volume of the loaded minplayer.
*
* @param {number} vol -1 to 1 - The relative amount to increase or decrease.
*/
minplayer.players.base.prototype.setVolumeRelative = function(vol) {

// Get the volume
var _this = this;
this.getVolume(function(newVol) {
newVol += parseFloat(vol);
newVol = (newVol < 0) ? 0 : newVol;
newVol = (newVol > 1) ? 1 : newVol;
_this.setVolume(newVol);
});
}; };


/** /**
Expand Down Expand Up @@ -3668,6 +3770,10 @@ minplayer.controller.base.prototype.construct = function() {
} }
}); });


media.bind('volumeupdate', {obj: this}, function(event, vol) {
event.data.obj.volumeBar.slider('option', 'value', (vol * 100));
});

// Set the volume to match that of the player. // Set the volume to match that of the player.
media.getVolume(function(vol) { media.getVolume(function(vol) {
_this.volumeBar.slider('option', 'value', (vol * 100)); _this.volumeBar.slider('option', 'value', (vol * 100));
Expand Down
2 changes: 1 addition & 1 deletion doc/files.html
Expand Up @@ -422,7 +422,7 @@ <h2><a href="symbols/src/src_minplayer.plugin.js.html">src/minplayer.plugin.js</
</div> </div>
<div class="fineprint" style="clear:both"> <div class="fineprint" style="clear:both">


Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blankt">JsDoc Toolkit</a> 2.4.0 on Mon Feb 27 2012 12:46:34 GMT-0800 (PST) Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blankt">JsDoc Toolkit</a> 2.4.0 on Mon Feb 27 2012 18:11:58 GMT-0800 (PST)
</div> </div>
</body> </body>
</html> </html>
2 changes: 1 addition & 1 deletion doc/index.html
Expand Up @@ -341,7 +341,7 @@ <h2><a href="symbols/minplayer.plugin.html">minplayer.plugin</a></h2>
</div> </div>
<div class="fineprint" style="clear:both"> <div class="fineprint" style="clear:both">


Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blankt">JsDoc Toolkit</a> 2.4.0 on Mon Feb 27 2012 12:46:34 GMT-0800 (PST) Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blankt">JsDoc Toolkit</a> 2.4.0 on Mon Feb 27 2012 18:11:58 GMT-0800 (PST)
</div> </div>
</body> </body>
</html> </html>
2 changes: 1 addition & 1 deletion doc/symbols/_global_.html
Expand Up @@ -410,7 +410,7 @@ <h1 class="classTitle">
<!-- ============================== footer ================================= --> <!-- ============================== footer ================================= -->
<div class="fineprint" style="clear:both"> <div class="fineprint" style="clear:both">


Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blank">JsDoc Toolkit</a> 2.4.0 on Mon Feb 27 2012 12:46:33 GMT-0800 (PST) Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blank">JsDoc Toolkit</a> 2.4.0 on Mon Feb 27 2012 18:11:57 GMT-0800 (PST)
</div> </div>
</body> </body>
</html> </html>
2 changes: 1 addition & 1 deletion doc/symbols/jQuery.fn.minplayer.html
Expand Up @@ -343,7 +343,7 @@ <h1 class="classTitle">
<!-- ============================== footer ================================= --> <!-- ============================== footer ================================= -->
<div class="fineprint" style="clear:both"> <div class="fineprint" style="clear:both">


Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blank">JsDoc Toolkit</a> 2.4.0 on Mon Feb 27 2012 12:46:33 GMT-0800 (PST) Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blank">JsDoc Toolkit</a> 2.4.0 on Mon Feb 27 2012 18:11:57 GMT-0800 (PST)
</div> </div>
</body> </body>
</html> </html>
2 changes: 1 addition & 1 deletion doc/symbols/minplayer.async.html
Expand Up @@ -533,7 +533,7 @@ <h1 class="classTitle">
<!-- ============================== footer ================================= --> <!-- ============================== footer ================================= -->
<div class="fineprint" style="clear:both"> <div class="fineprint" style="clear:both">


Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blank">JsDoc Toolkit</a> 2.4.0 on Mon Feb 27 2012 12:46:33 GMT-0800 (PST) Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blank">JsDoc Toolkit</a> 2.4.0 on Mon Feb 27 2012 18:11:58 GMT-0800 (PST)
</div> </div>
</body> </body>
</html> </html>
2 changes: 1 addition & 1 deletion doc/symbols/minplayer.compatibility.html
Expand Up @@ -570,7 +570,7 @@ <h1 class="classTitle">
<!-- ============================== footer ================================= --> <!-- ============================== footer ================================= -->
<div class="fineprint" style="clear:both"> <div class="fineprint" style="clear:both">


Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blank">JsDoc Toolkit</a> 2.4.0 on Mon Feb 27 2012 12:46:33 GMT-0800 (PST) Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blank">JsDoc Toolkit</a> 2.4.0 on Mon Feb 27 2012 18:11:58 GMT-0800 (PST)
</div> </div>
</body> </body>
</html> </html>
2 changes: 1 addition & 1 deletion doc/symbols/minplayer.controller.base.html
Expand Up @@ -668,7 +668,7 @@ <h1 class="classTitle">
<!-- ============================== footer ================================= --> <!-- ============================== footer ================================= -->
<div class="fineprint" style="clear:both"> <div class="fineprint" style="clear:both">


Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blank">JsDoc Toolkit</a> 2.4.0 on Mon Feb 27 2012 12:46:33 GMT-0800 (PST) Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blank">JsDoc Toolkit</a> 2.4.0 on Mon Feb 27 2012 18:11:58 GMT-0800 (PST)
</div> </div>
</body> </body>
</html> </html>
2 changes: 1 addition & 1 deletion doc/symbols/minplayer.display.html
Expand Up @@ -712,7 +712,7 @@ <h1 class="classTitle">
<!-- ============================== footer ================================= --> <!-- ============================== footer ================================= -->
<div class="fineprint" style="clear:both"> <div class="fineprint" style="clear:both">


Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blank">JsDoc Toolkit</a> 2.4.0 on Mon Feb 27 2012 12:46:33 GMT-0800 (PST) Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blank">JsDoc Toolkit</a> 2.4.0 on Mon Feb 27 2012 18:11:58 GMT-0800 (PST)
</div> </div>
</body> </body>
</html> </html>
2 changes: 1 addition & 1 deletion doc/symbols/minplayer.file.html
Expand Up @@ -609,7 +609,7 @@ <h1 class="classTitle">
<!-- ============================== footer ================================= --> <!-- ============================== footer ================================= -->
<div class="fineprint" style="clear:both"> <div class="fineprint" style="clear:both">


Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blank">JsDoc Toolkit</a> 2.4.0 on Mon Feb 27 2012 12:46:33 GMT-0800 (PST) Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blank">JsDoc Toolkit</a> 2.4.0 on Mon Feb 27 2012 18:11:58 GMT-0800 (PST)
</div> </div>
</body> </body>
</html> </html>

0 comments on commit 571a4a3

Please sign in to comment.