mirror of
https://github.com/wahyd4/cdnjs.git
synced 2026-08-17 00:36:26 +10:00
Thomas Davis
Executable
BIN
Binary file not shown.
+470
@@ -0,0 +1,470 @@
|
||||
/*
|
||||
* Playlist Object for the jPlayer Plugin
|
||||
* http://www.jplayer.org
|
||||
*
|
||||
* Copyright (c) 2009 - 2013 Happyworm Ltd
|
||||
* Licensed under the MIT license.
|
||||
* http://www.opensource.org/licenses/MIT
|
||||
*
|
||||
* Author: Mark J Panaghiston
|
||||
* Version: 2.3.0
|
||||
* Date: 20th April 2013
|
||||
*
|
||||
* Requires:
|
||||
* - jQuery 1.7.0+
|
||||
* - jPlayer 2.3.0+
|
||||
*/
|
||||
|
||||
/* Code verified using http://www.jshint.com/ */
|
||||
/*jshint asi:false, bitwise:false, boss:false, browser:true, curly:true, debug:false, eqeqeq:true, eqnull:false, evil:false, forin:false, immed:false, jquery:true, laxbreak:false, newcap:true, noarg:true, noempty:true, nonew:true, onevar:false, passfail:false, plusplus:false, regexp:false, undef:true, sub:false, strict:false, white:false, smarttabs:true */
|
||||
/*global jPlayerPlaylist:true */
|
||||
|
||||
(function($, undefined) {
|
||||
|
||||
jPlayerPlaylist = function(cssSelector, playlist, options) {
|
||||
var self = this;
|
||||
|
||||
this.current = 0;
|
||||
this.loop = false; // Flag used with the jPlayer repeat event
|
||||
this.shuffled = false;
|
||||
this.removing = false; // Flag is true during remove animation, disabling the remove() method until complete.
|
||||
|
||||
this.cssSelector = $.extend({}, this._cssSelector, cssSelector); // Object: Containing the css selectors for jPlayer and its cssSelectorAncestor
|
||||
this.options = $.extend(true, {
|
||||
keyBindings: {
|
||||
next: {
|
||||
key: 39, // RIGHT
|
||||
fn: function() {
|
||||
self.next();
|
||||
}
|
||||
},
|
||||
previous: {
|
||||
key: 37, // LEFT
|
||||
fn: function() {
|
||||
self.previous();
|
||||
}
|
||||
}
|
||||
}
|
||||
}, this._options, options); // Object: The jPlayer constructor options for this playlist and the playlist options
|
||||
|
||||
this.playlist = []; // Array of Objects: The current playlist displayed (Un-shuffled or Shuffled)
|
||||
this.original = []; // Array of Objects: The original playlist
|
||||
|
||||
this._initPlaylist(playlist); // Copies playlist to this.original. Then mirrors this.original to this.playlist. Creating two arrays, where the element pointers match. (Enables pointer comparison.)
|
||||
|
||||
// Setup the css selectors for the extra interface items used by the playlist.
|
||||
this.cssSelector.title = this.cssSelector.cssSelectorAncestor + " .jp-title"; // Note that the text is written to the decendant li node.
|
||||
this.cssSelector.playlist = this.cssSelector.cssSelectorAncestor + " .jp-playlist";
|
||||
this.cssSelector.next = this.cssSelector.cssSelectorAncestor + " .jp-next";
|
||||
this.cssSelector.previous = this.cssSelector.cssSelectorAncestor + " .jp-previous";
|
||||
this.cssSelector.shuffle = this.cssSelector.cssSelectorAncestor + " .jp-shuffle";
|
||||
this.cssSelector.shuffleOff = this.cssSelector.cssSelectorAncestor + " .jp-shuffle-off";
|
||||
|
||||
// Override the cssSelectorAncestor given in options
|
||||
this.options.cssSelectorAncestor = this.cssSelector.cssSelectorAncestor;
|
||||
|
||||
// Override the default repeat event handler
|
||||
this.options.repeat = function(event) {
|
||||
self.loop = event.jPlayer.options.loop;
|
||||
};
|
||||
|
||||
// Create a ready event handler to initialize the playlist
|
||||
$(this.cssSelector.jPlayer).bind($.jPlayer.event.ready, function() {
|
||||
self._init();
|
||||
});
|
||||
|
||||
// Create an ended event handler to move to the next item
|
||||
$(this.cssSelector.jPlayer).bind($.jPlayer.event.ended, function() {
|
||||
self.next();
|
||||
});
|
||||
|
||||
// Create a play event handler to pause other instances
|
||||
$(this.cssSelector.jPlayer).bind($.jPlayer.event.play, function() {
|
||||
$(this).jPlayer("pauseOthers");
|
||||
});
|
||||
|
||||
// Create a resize event handler to show the title in full screen mode.
|
||||
$(this.cssSelector.jPlayer).bind($.jPlayer.event.resize, function(event) {
|
||||
if(event.jPlayer.options.fullScreen) {
|
||||
$(self.cssSelector.title).show();
|
||||
} else {
|
||||
$(self.cssSelector.title).hide();
|
||||
}
|
||||
});
|
||||
|
||||
// Create click handlers for the extra buttons that do playlist functions.
|
||||
$(this.cssSelector.previous).click(function() {
|
||||
self.previous();
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
|
||||
$(this.cssSelector.next).click(function() {
|
||||
self.next();
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
|
||||
$(this.cssSelector.shuffle).click(function() {
|
||||
self.shuffle(true);
|
||||
return false;
|
||||
});
|
||||
$(this.cssSelector.shuffleOff).click(function() {
|
||||
self.shuffle(false);
|
||||
return false;
|
||||
}).hide();
|
||||
|
||||
// Put the title in its initial display state
|
||||
if(!this.options.fullScreen) {
|
||||
$(this.cssSelector.title).hide();
|
||||
}
|
||||
|
||||
// Remove the empty <li> from the page HTML. Allows page to be valid HTML, while not interfereing with display animations
|
||||
$(this.cssSelector.playlist + " ul").empty();
|
||||
|
||||
// Create .on() handlers for the playlist items along with the free media and remove controls.
|
||||
this._createItemHandlers();
|
||||
|
||||
// Instance jPlayer
|
||||
$(this.cssSelector.jPlayer).jPlayer(this.options);
|
||||
};
|
||||
|
||||
jPlayerPlaylist.prototype = {
|
||||
_cssSelector: { // static object, instanced in constructor
|
||||
jPlayer: "#jquery_jplayer_1",
|
||||
cssSelectorAncestor: "#jp_container_1"
|
||||
},
|
||||
_options: { // static object, instanced in constructor
|
||||
playlistOptions: {
|
||||
autoPlay: false,
|
||||
loopOnPrevious: false,
|
||||
shuffleOnLoop: true,
|
||||
enableRemoveControls: false,
|
||||
displayTime: 'slow',
|
||||
addTime: 'fast',
|
||||
removeTime: 'fast',
|
||||
shuffleTime: 'slow',
|
||||
itemClass: "jp-playlist-item",
|
||||
freeGroupClass: "jp-free-media",
|
||||
freeItemClass: "jp-playlist-item-free",
|
||||
removeItemClass: "jp-playlist-item-remove"
|
||||
}
|
||||
},
|
||||
option: function(option, value) { // For changing playlist options only
|
||||
if(value === undefined) {
|
||||
return this.options.playlistOptions[option];
|
||||
}
|
||||
|
||||
this.options.playlistOptions[option] = value;
|
||||
|
||||
switch(option) {
|
||||
case "enableRemoveControls":
|
||||
this._updateControls();
|
||||
break;
|
||||
case "itemClass":
|
||||
case "freeGroupClass":
|
||||
case "freeItemClass":
|
||||
case "removeItemClass":
|
||||
this._refresh(true); // Instant
|
||||
this._createItemHandlers();
|
||||
break;
|
||||
}
|
||||
return this;
|
||||
},
|
||||
_init: function() {
|
||||
var self = this;
|
||||
this._refresh(function() {
|
||||
if(self.options.playlistOptions.autoPlay) {
|
||||
self.play(self.current);
|
||||
} else {
|
||||
self.select(self.current);
|
||||
}
|
||||
});
|
||||
},
|
||||
_initPlaylist: function(playlist) {
|
||||
this.current = 0;
|
||||
this.shuffled = false;
|
||||
this.removing = false;
|
||||
this.original = $.extend(true, [], playlist); // Copy the Array of Objects
|
||||
this._originalPlaylist();
|
||||
},
|
||||
_originalPlaylist: function() {
|
||||
var self = this;
|
||||
this.playlist = [];
|
||||
// Make both arrays point to the same object elements. Gives us 2 different arrays, each pointing to the same actual object. ie., Not copies of the object.
|
||||
$.each(this.original, function(i) {
|
||||
self.playlist[i] = self.original[i];
|
||||
});
|
||||
},
|
||||
_refresh: function(instant) {
|
||||
/* instant: Can be undefined, true or a function.
|
||||
* undefined -> use animation timings
|
||||
* true -> no animation
|
||||
* function -> use animation timings and excute function at half way point.
|
||||
*/
|
||||
var self = this;
|
||||
|
||||
if(instant && !$.isFunction(instant)) {
|
||||
$(this.cssSelector.playlist + " ul").empty();
|
||||
$.each(this.playlist, function(i) {
|
||||
$(self.cssSelector.playlist + " ul").append(self._createListItem(self.playlist[i]));
|
||||
});
|
||||
this._updateControls();
|
||||
} else {
|
||||
var displayTime = $(this.cssSelector.playlist + " ul").children().length ? this.options.playlistOptions.displayTime : 0;
|
||||
|
||||
$(this.cssSelector.playlist + " ul").slideUp(displayTime, function() {
|
||||
var $this = $(this);
|
||||
$(this).empty();
|
||||
|
||||
$.each(self.playlist, function(i) {
|
||||
$this.append(self._createListItem(self.playlist[i]));
|
||||
});
|
||||
self._updateControls();
|
||||
if($.isFunction(instant)) {
|
||||
instant();
|
||||
}
|
||||
if(self.playlist.length) {
|
||||
$(this).slideDown(self.options.playlistOptions.displayTime);
|
||||
} else {
|
||||
$(this).show();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
_createListItem: function(media) {
|
||||
var self = this;
|
||||
|
||||
// Wrap the <li> contents in a <div>
|
||||
var listItem = "<li><div>";
|
||||
|
||||
// Create remove control
|
||||
listItem += "<a href='javascript:;' class='" + this.options.playlistOptions.removeItemClass + "'>×</a>";
|
||||
|
||||
// Create links to free media
|
||||
if(media.free) {
|
||||
var first = true;
|
||||
listItem += "<span class='" + this.options.playlistOptions.freeGroupClass + "'>(";
|
||||
$.each(media, function(property,value) {
|
||||
if($.jPlayer.prototype.format[property]) { // Check property is a media format.
|
||||
if(first) {
|
||||
first = false;
|
||||
} else {
|
||||
listItem += " | ";
|
||||
}
|
||||
listItem += "<a class='" + self.options.playlistOptions.freeItemClass + "' href='" + value + "' tabindex='1'>" + property + "</a>";
|
||||
}
|
||||
});
|
||||
listItem += ")</span>";
|
||||
}
|
||||
|
||||
// The title is given next in the HTML otherwise the float:right on the free media corrupts in IE6/7
|
||||
listItem += "<a href='javascript:;' class='" + this.options.playlistOptions.itemClass + "' tabindex='1'>" + media.title + (media.artist ? " <span class='jp-artist'>by " + media.artist + "</span>" : "") + "</a>";
|
||||
listItem += "</div></li>";
|
||||
|
||||
return listItem;
|
||||
},
|
||||
_createItemHandlers: function() {
|
||||
var self = this;
|
||||
// Create live handlers for the playlist items
|
||||
$(this.cssSelector.playlist).off("click", "a." + this.options.playlistOptions.itemClass).on("click", "a." + this.options.playlistOptions.itemClass, function() {
|
||||
var index = $(this).parent().parent().index();
|
||||
if(self.current !== index) {
|
||||
self.play(index);
|
||||
} else {
|
||||
$(self.cssSelector.jPlayer).jPlayer("play");
|
||||
}
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
|
||||
// Create live handlers that disable free media links to force access via right click
|
||||
$(this.cssSelector.playlist).off("click", "a." + this.options.playlistOptions.freeItemClass).on("click", "a." + this.options.playlistOptions.freeItemClass, function() {
|
||||
$(this).parent().parent().find("." + self.options.playlistOptions.itemClass).click();
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
|
||||
// Create live handlers for the remove controls
|
||||
$(this.cssSelector.playlist).off("click", "a." + this.options.playlistOptions.removeItemClass).on("click", "a." + this.options.playlistOptions.removeItemClass, function() {
|
||||
var index = $(this).parent().parent().index();
|
||||
self.remove(index);
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
},
|
||||
_updateControls: function() {
|
||||
if(this.options.playlistOptions.enableRemoveControls) {
|
||||
$(this.cssSelector.playlist + " ." + this.options.playlistOptions.removeItemClass).show();
|
||||
} else {
|
||||
$(this.cssSelector.playlist + " ." + this.options.playlistOptions.removeItemClass).hide();
|
||||
}
|
||||
if(this.shuffled) {
|
||||
$(this.cssSelector.shuffleOff).show();
|
||||
$(this.cssSelector.shuffle).hide();
|
||||
} else {
|
||||
$(this.cssSelector.shuffleOff).hide();
|
||||
$(this.cssSelector.shuffle).show();
|
||||
}
|
||||
},
|
||||
_highlight: function(index) {
|
||||
if(this.playlist.length && index !== undefined) {
|
||||
$(this.cssSelector.playlist + " .jp-playlist-current").removeClass("jp-playlist-current");
|
||||
$(this.cssSelector.playlist + " li:nth-child(" + (index + 1) + ")").addClass("jp-playlist-current").find(".jp-playlist-item").addClass("jp-playlist-current");
|
||||
$(this.cssSelector.title + " li").html(this.playlist[index].title + (this.playlist[index].artist ? " <span class='jp-artist'>by " + this.playlist[index].artist + "</span>" : ""));
|
||||
}
|
||||
},
|
||||
setPlaylist: function(playlist) {
|
||||
this._initPlaylist(playlist);
|
||||
this._init();
|
||||
},
|
||||
add: function(media, playNow) {
|
||||
$(this.cssSelector.playlist + " ul").append(this._createListItem(media)).find("li:last-child").hide().slideDown(this.options.playlistOptions.addTime);
|
||||
this._updateControls();
|
||||
this.original.push(media);
|
||||
this.playlist.push(media); // Both array elements share the same object pointer. Comforms with _initPlaylist(p) system.
|
||||
|
||||
if(playNow) {
|
||||
this.play(this.playlist.length - 1);
|
||||
} else {
|
||||
if(this.original.length === 1) {
|
||||
this.select(0);
|
||||
}
|
||||
}
|
||||
},
|
||||
remove: function(index) {
|
||||
var self = this;
|
||||
|
||||
if(index === undefined) {
|
||||
this._initPlaylist([]);
|
||||
this._refresh(function() {
|
||||
$(self.cssSelector.jPlayer).jPlayer("clearMedia");
|
||||
});
|
||||
return true;
|
||||
} else {
|
||||
|
||||
if(this.removing) {
|
||||
return false;
|
||||
} else {
|
||||
index = (index < 0) ? self.original.length + index : index; // Negative index relates to end of array.
|
||||
if(0 <= index && index < this.playlist.length) {
|
||||
this.removing = true;
|
||||
|
||||
$(this.cssSelector.playlist + " li:nth-child(" + (index + 1) + ")").slideUp(this.options.playlistOptions.removeTime, function() {
|
||||
$(this).remove();
|
||||
|
||||
if(self.shuffled) {
|
||||
var item = self.playlist[index];
|
||||
$.each(self.original, function(i) {
|
||||
if(self.original[i] === item) {
|
||||
self.original.splice(i, 1);
|
||||
return false; // Exit $.each
|
||||
}
|
||||
});
|
||||
self.playlist.splice(index, 1);
|
||||
} else {
|
||||
self.original.splice(index, 1);
|
||||
self.playlist.splice(index, 1);
|
||||
}
|
||||
|
||||
if(self.original.length) {
|
||||
if(index === self.current) {
|
||||
self.current = (index < self.original.length) ? self.current : self.original.length - 1; // To cope when last element being selected when it was removed
|
||||
self.select(self.current);
|
||||
} else if(index < self.current) {
|
||||
self.current--;
|
||||
}
|
||||
} else {
|
||||
$(self.cssSelector.jPlayer).jPlayer("clearMedia");
|
||||
self.current = 0;
|
||||
self.shuffled = false;
|
||||
self._updateControls();
|
||||
}
|
||||
|
||||
self.removing = false;
|
||||
});
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
},
|
||||
select: function(index) {
|
||||
index = (index < 0) ? this.original.length + index : index; // Negative index relates to end of array.
|
||||
if(0 <= index && index < this.playlist.length) {
|
||||
this.current = index;
|
||||
this._highlight(index);
|
||||
$(this.cssSelector.jPlayer).jPlayer("setMedia", this.playlist[this.current]);
|
||||
} else {
|
||||
this.current = 0;
|
||||
}
|
||||
},
|
||||
play: function(index) {
|
||||
index = (index < 0) ? this.original.length + index : index; // Negative index relates to end of array.
|
||||
if(0 <= index && index < this.playlist.length) {
|
||||
if(this.playlist.length) {
|
||||
this.select(index);
|
||||
$(this.cssSelector.jPlayer).jPlayer("play");
|
||||
}
|
||||
} else if(index === undefined) {
|
||||
$(this.cssSelector.jPlayer).jPlayer("play");
|
||||
}
|
||||
},
|
||||
pause: function() {
|
||||
$(this.cssSelector.jPlayer).jPlayer("pause");
|
||||
},
|
||||
next: function() {
|
||||
var index = (this.current + 1 < this.playlist.length) ? this.current + 1 : 0;
|
||||
|
||||
if(this.loop) {
|
||||
// See if we need to shuffle before looping to start, and only shuffle if more than 1 item.
|
||||
if(index === 0 && this.shuffled && this.options.playlistOptions.shuffleOnLoop && this.playlist.length > 1) {
|
||||
this.shuffle(true, true); // playNow
|
||||
} else {
|
||||
this.play(index);
|
||||
}
|
||||
} else {
|
||||
// The index will be zero if it just looped round
|
||||
if(index > 0) {
|
||||
this.play(index);
|
||||
}
|
||||
}
|
||||
},
|
||||
previous: function() {
|
||||
var index = (this.current - 1 >= 0) ? this.current - 1 : this.playlist.length - 1;
|
||||
|
||||
if(this.loop && this.options.playlistOptions.loopOnPrevious || index < this.playlist.length - 1) {
|
||||
this.play(index);
|
||||
}
|
||||
},
|
||||
shuffle: function(shuffled, playNow) {
|
||||
var self = this;
|
||||
|
||||
if(shuffled === undefined) {
|
||||
shuffled = !this.shuffled;
|
||||
}
|
||||
|
||||
if(shuffled || shuffled !== this.shuffled) {
|
||||
|
||||
$(this.cssSelector.playlist + " ul").slideUp(this.options.playlistOptions.shuffleTime, function() {
|
||||
self.shuffled = shuffled;
|
||||
if(shuffled) {
|
||||
self.playlist.sort(function() {
|
||||
return 0.5 - Math.random();
|
||||
});
|
||||
} else {
|
||||
self._originalPlaylist();
|
||||
}
|
||||
self._refresh(true); // Instant
|
||||
|
||||
if(playNow || !$(self.cssSelector.jPlayer).data("jPlayer").status.paused) {
|
||||
self.play(0);
|
||||
} else {
|
||||
self.select(0);
|
||||
}
|
||||
|
||||
$(this).slideDown(self.options.playlistOptions.shuffleTime);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
})(jQuery);
|
||||
File diff suppressed because one or more lines are too long
+337
@@ -0,0 +1,337 @@
|
||||
/*
|
||||
* jPlayerInspector Plugin for jPlayer Plugin for jQuery JavaScript Library
|
||||
* http://www.jplayer.org
|
||||
*
|
||||
* Copyright (c) 2009 - 2013 Happyworm Ltd
|
||||
* Licensed under the MIT license.
|
||||
* http://www.opensource.org/licenses/MIT
|
||||
*
|
||||
* Author: Mark J Panaghiston
|
||||
* Version: 1.0.4
|
||||
* Date: 29th January 2013
|
||||
*
|
||||
* For use with jPlayer Version: 2.2.19+
|
||||
*
|
||||
* Note: Declare inspector instances after jPlayer instances. ie., Otherwise the jPlayer instance is nonsense.
|
||||
*/
|
||||
|
||||
(function($, undefined) {
|
||||
$.jPlayerInspector = {};
|
||||
$.jPlayerInspector.i = 0;
|
||||
$.jPlayerInspector.defaults = {
|
||||
jPlayer: undefined, // The jQuery selector of the jPlayer instance to inspect.
|
||||
idPrefix: "jplayer_inspector_",
|
||||
visible: false
|
||||
};
|
||||
|
||||
var methods = {
|
||||
init: function(options) {
|
||||
var self = this;
|
||||
var $this = $(this);
|
||||
|
||||
var config = $.extend({}, $.jPlayerInspector.defaults, options);
|
||||
$(this).data("jPlayerInspector", config);
|
||||
|
||||
config.id = $(this).attr("id");
|
||||
config.jPlayerId = config.jPlayer.attr("id");
|
||||
|
||||
config.windowId = config.idPrefix + "window_" + $.jPlayerInspector.i;
|
||||
config.statusId = config.idPrefix + "status_" + $.jPlayerInspector.i;
|
||||
config.configId = config.idPrefix + "config_" + $.jPlayerInspector.i;
|
||||
config.toggleId = config.idPrefix + "toggle_" + $.jPlayerInspector.i;
|
||||
config.eventResetId = config.idPrefix + "event_reset_" + $.jPlayerInspector.i;
|
||||
config.updateId = config.idPrefix + "update_" + $.jPlayerInspector.i;
|
||||
config.eventWindowId = config.idPrefix + "event_window_" + $.jPlayerInspector.i;
|
||||
|
||||
config.eventId = {};
|
||||
config.eventJq = {};
|
||||
config.eventTimeout = {};
|
||||
config.eventOccurrence = {};
|
||||
|
||||
$.each($.jPlayer.event, function(eventName,eventType) {
|
||||
config.eventId[eventType] = config.idPrefix + "event_" + eventName + "_" + $.jPlayerInspector.i;
|
||||
config.eventOccurrence[eventType] = 0;
|
||||
});
|
||||
|
||||
var structure =
|
||||
'<p><a href="#" id="' + config.toggleId + '">' + (config.visible ? "Hide" : "Show") + '</a> jPlayer Inspector</p>'
|
||||
+ '<div id="' + config.windowId + '">'
|
||||
+ '<div id="' + config.statusId + '"></div>'
|
||||
+ '<div id="' + config.eventWindowId + '" style="padding:5px 5px 0 5px;background-color:#eee;border:1px dotted #000;">'
|
||||
+ '<p style="margin:0 0 10px 0;"><strong>jPlayer events that have occurred over the past 1 second:</strong>'
|
||||
+ '<br />(Backgrounds: <span style="padding:0 5px;background-color:#eee;border:1px dotted #000;">Never occurred</span> <span style="padding:0 5px;background-color:#fff;border:1px dotted #000;">Occurred before</span> <span style="padding:0 5px;background-color:#9f9;border:1px dotted #000;">Occurred</span> <span style="padding:0 5px;background-color:#ff9;border:1px dotted #000;">Multiple occurrences</span> <a href="#" id="' + config.eventResetId + '">reset</a>)</p>';
|
||||
|
||||
// MJP: Would use the next 3 lines for ease, but the events are just slapped on the page.
|
||||
// $.each($.jPlayer.event, function(eventName,eventType) {
|
||||
// structure += '<div id="' + config.eventId[eventType] + '" style="float:left;">' + eventName + '</div>';
|
||||
// });
|
||||
|
||||
var eventStyle = "float:left;margin:0 5px 5px 0;padding:0 5px;border:1px dotted #000;";
|
||||
// MJP: Doing it longhand so order and layout easier to control.
|
||||
structure +=
|
||||
'<div id="' + config.eventId[$.jPlayer.event.ready] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.flashreset] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.resize] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.repeat] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.click] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.error] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.warning] + '" style="' + eventStyle + '"></div>'
|
||||
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.loadstart] + '" style="clear:left;' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.progress] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.timeupdate] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.volumechange] + '" style="' + eventStyle + '"></div>'
|
||||
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.play] + '" style="clear:left;' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.pause] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.waiting] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.playing] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.seeking] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.seeked] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.ended] + '" style="' + eventStyle + '"></div>'
|
||||
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.loadeddata] + '" style="clear:left;' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.loadedmetadata] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.canplay] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.canplaythrough] + '" style="' + eventStyle + '"></div>'
|
||||
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.suspend] + '" style="clear:left;' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.abort] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.emptied] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.stalled] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.ratechange] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.durationchange] + '" style="' + eventStyle + '"></div>'
|
||||
|
||||
+ '<div style="clear:both"></div>';
|
||||
|
||||
// MJP: Would like a check here in case we missed an event.
|
||||
|
||||
// MJP: Check fails, since it is not on the page yet.
|
||||
/* $.each($.jPlayer.event, function(eventName,eventType) {
|
||||
if($("#" + config.eventId[eventType])[0] === undefined) {
|
||||
structure += '<div id="' + config.eventId[eventType] + '" style="clear:left;' + eventStyle + '">' + eventName + '</div>';
|
||||
}
|
||||
});
|
||||
*/
|
||||
structure +=
|
||||
'</div>'
|
||||
+ '<p><a href="#" id="' + config.updateId + '">Update</a> jPlayer Inspector</p>'
|
||||
+ '<div id="' + config.configId + '"></div>'
|
||||
+ '</div>';
|
||||
$(this).html(structure);
|
||||
|
||||
config.windowJq = $("#" + config.windowId);
|
||||
config.statusJq = $("#" + config.statusId);
|
||||
config.configJq = $("#" + config.configId);
|
||||
config.toggleJq = $("#" + config.toggleId);
|
||||
config.eventResetJq = $("#" + config.eventResetId);
|
||||
config.updateJq = $("#" + config.updateId);
|
||||
|
||||
$.each($.jPlayer.event, function(eventName,eventType) {
|
||||
config.eventJq[eventType] = $("#" + config.eventId[eventType]);
|
||||
config.eventJq[eventType].text(eventName + " (" + config.eventOccurrence[eventType] + ")"); // Sets the text to the event name and (0);
|
||||
|
||||
config.jPlayer.bind(eventType + ".jPlayerInspector", function(e) {
|
||||
config.eventOccurrence[e.type]++;
|
||||
if(config.eventOccurrence[e.type] > 1) {
|
||||
config.eventJq[e.type].css("background-color","#ff9");
|
||||
} else {
|
||||
config.eventJq[e.type].css("background-color","#9f9");
|
||||
}
|
||||
config.eventJq[e.type].text(eventName + " (" + config.eventOccurrence[e.type] + ")");
|
||||
// The timer to handle the color
|
||||
clearTimeout(config.eventTimeout[e.type]);
|
||||
config.eventTimeout[e.type] = setTimeout(function() {
|
||||
config.eventJq[e.type].css("background-color","#fff");
|
||||
}, 1000);
|
||||
// The timer to handle the occurences.
|
||||
setTimeout(function() {
|
||||
config.eventOccurrence[e.type]--;
|
||||
config.eventJq[e.type].text(eventName + " (" + config.eventOccurrence[e.type] + ")");
|
||||
}, 1000);
|
||||
if(config.visible) { // Update the status, if inspector open.
|
||||
$this.jPlayerInspector("updateStatus");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
config.jPlayer.bind($.jPlayer.event.ready + ".jPlayerInspector", function(e) {
|
||||
$this.jPlayerInspector("updateConfig");
|
||||
});
|
||||
|
||||
config.toggleJq.click(function() {
|
||||
if(config.visible) {
|
||||
$(this).text("Show");
|
||||
config.windowJq.hide();
|
||||
config.statusJq.empty();
|
||||
config.configJq.empty();
|
||||
} else {
|
||||
$(this).text("Hide");
|
||||
config.windowJq.show();
|
||||
config.updateJq.click();
|
||||
}
|
||||
config.visible = !config.visible;
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
|
||||
config.eventResetJq.click(function() {
|
||||
$.each($.jPlayer.event, function(eventName,eventType) {
|
||||
config.eventJq[eventType].css("background-color","#eee");
|
||||
});
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
|
||||
config.updateJq.click(function() {
|
||||
$this.jPlayerInspector("updateStatus");
|
||||
$this.jPlayerInspector("updateConfig");
|
||||
return false;
|
||||
});
|
||||
|
||||
if(!config.visible) {
|
||||
config.windowJq.hide();
|
||||
} else {
|
||||
// config.updateJq.click();
|
||||
}
|
||||
|
||||
$.jPlayerInspector.i++;
|
||||
|
||||
return this;
|
||||
},
|
||||
destroy: function() {
|
||||
$(this).data("jPlayerInspector") && $(this).data("jPlayerInspector").jPlayer.unbind(".jPlayerInspector");
|
||||
$(this).empty();
|
||||
},
|
||||
updateConfig: function() { // This displays information about jPlayer's configuration in inspector
|
||||
|
||||
var jPlayerInfo = "<p>This jPlayer instance is running in your browser where:<br />"
|
||||
|
||||
for(i = 0; i < $(this).data("jPlayerInspector").jPlayer.data("jPlayer").solutions.length; i++) {
|
||||
var solution = $(this).data("jPlayerInspector").jPlayer.data("jPlayer").solutions[i];
|
||||
jPlayerInfo += " jPlayer's <strong>" + solution + "</strong> solution is";
|
||||
if($(this).data("jPlayerInspector").jPlayer.data("jPlayer")[solution].used) {
|
||||
jPlayerInfo += " being <strong>used</strong> and will support:<strong>";
|
||||
for(format in $(this).data("jPlayerInspector").jPlayer.data("jPlayer")[solution].support) {
|
||||
if($(this).data("jPlayerInspector").jPlayer.data("jPlayer")[solution].support[format]) {
|
||||
jPlayerInfo += " " + format;
|
||||
}
|
||||
}
|
||||
jPlayerInfo += "</strong><br />";
|
||||
} else {
|
||||
jPlayerInfo += " <strong>not required</strong><br />";
|
||||
}
|
||||
}
|
||||
jPlayerInfo += "</p>";
|
||||
|
||||
if($(this).data("jPlayerInspector").jPlayer.data("jPlayer").html.active) {
|
||||
if($(this).data("jPlayerInspector").jPlayer.data("jPlayer").flash.active) {
|
||||
jPlayerInfo += "<strong>Problem with jPlayer since both HTML5 and Flash are active.</strong>";
|
||||
} else {
|
||||
jPlayerInfo += "The <strong>HTML5 is active</strong>.";
|
||||
}
|
||||
} else {
|
||||
if($(this).data("jPlayerInspector").jPlayer.data("jPlayer").flash.active) {
|
||||
jPlayerInfo += "The <strong>Flash is active</strong>.";
|
||||
} else {
|
||||
jPlayerInfo += "No solution is currently active. jPlayer needs a setMedia().";
|
||||
}
|
||||
}
|
||||
jPlayerInfo += "</p>";
|
||||
|
||||
var formatType = $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.formatType;
|
||||
jPlayerInfo += "<p><code>status.formatType = '" + formatType + "'</code><br />";
|
||||
if(formatType) {
|
||||
jPlayerInfo += "<code>Browser canPlay('" + $.jPlayer.prototype.format[formatType].codec + "')</code>";
|
||||
} else {
|
||||
jPlayerInfo += "</p>";
|
||||
}
|
||||
|
||||
jPlayerInfo += "<p><code>status.src = '" + $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.src + "'</code></p>";
|
||||
|
||||
jPlayerInfo += "<p><code>status.media = {<br />";
|
||||
for(prop in $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.media) {
|
||||
jPlayerInfo += " " + prop + ": " + $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.media[prop] + "<br />"; // Some are strings
|
||||
}
|
||||
jPlayerInfo += "};</code></p>"
|
||||
|
||||
jPlayerInfo += "<p>";
|
||||
jPlayerInfo += "<code>status.videoWidth = '" + $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.videoWidth + "'</code>";
|
||||
jPlayerInfo += " | <code>status.videoHeight = '" + $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.videoHeight + "'</code>";
|
||||
jPlayerInfo += "<br /><code>status.width = '" + $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.width + "'</code>";
|
||||
jPlayerInfo += " | <code>status.height = '" + $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.height + "'</code>";
|
||||
jPlayerInfo += "</p>";
|
||||
|
||||
+ "<p>Raw browser test for HTML5 support. Should equal a function if HTML5 is available.<br />";
|
||||
if($(this).data("jPlayerInspector").jPlayer.data("jPlayer").html.audio.available) {
|
||||
jPlayerInfo += "<code>htmlElement.audio.canPlayType = " + (typeof $(this).data("jPlayerInspector").jPlayer.data("jPlayer").htmlElement.audio.canPlayType) +"</code><br />"
|
||||
}
|
||||
if($(this).data("jPlayerInspector").jPlayer.data("jPlayer").html.video.available) {
|
||||
jPlayerInfo += "<code>htmlElement.video.canPlayType = " + (typeof $(this).data("jPlayerInspector").jPlayer.data("jPlayer").htmlElement.video.canPlayType) +"</code>";
|
||||
}
|
||||
jPlayerInfo += "</p>";
|
||||
|
||||
jPlayerInfo += "<p>This instance is using the constructor options:<br />"
|
||||
+ "<code>$('#" + $(this).data("jPlayerInspector").jPlayer.data("jPlayer").internal.self.id + "').jPlayer({<br />"
|
||||
|
||||
+ " swfPath: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "swfPath") + "',<br />"
|
||||
|
||||
+ " solution: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "solution") + "',<br />"
|
||||
|
||||
+ " supplied: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "supplied") + "',<br />"
|
||||
|
||||
+ " preload: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "preload") + "',<br />"
|
||||
|
||||
+ " volume: " + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "volume") + ",<br />"
|
||||
|
||||
+ " muted: " + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "muted") + ",<br />"
|
||||
|
||||
+ " backgroundColor: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "backgroundColor") + "',<br />"
|
||||
|
||||
+ " cssSelectorAncestor: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "cssSelectorAncestor") + "',<br />"
|
||||
|
||||
+ " cssSelector: {";
|
||||
|
||||
var cssSelector = $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "cssSelector");
|
||||
for(prop in cssSelector) {
|
||||
|
||||
// jPlayerInfo += "<br /> " + prop + ": '" + cssSelector[prop] + "'," // This works too of course, but want to use option method for deep keys.
|
||||
jPlayerInfo += "<br /> " + prop + ": '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "cssSelector." + prop) + "',"
|
||||
}
|
||||
|
||||
jPlayerInfo = jPlayerInfo.slice(0, -1); // Because the sloppy comma was bugging me.
|
||||
|
||||
jPlayerInfo += "<br /> },<br />"
|
||||
|
||||
+ " errorAlerts: " + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "errorAlerts") + ",<br />"
|
||||
|
||||
+ " warningAlerts: " + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "warningAlerts") + "<br />"
|
||||
|
||||
+ "});</code></p>";
|
||||
$(this).data("jPlayerInspector").configJq.html(jPlayerInfo);
|
||||
return this;
|
||||
},
|
||||
updateStatus: function() { // This displays information about jPlayer's status in the inspector
|
||||
$(this).data("jPlayerInspector").statusJq.html(
|
||||
"<p>jPlayer is " +
|
||||
($(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.paused ? "paused" : "playing") +
|
||||
" at time: " + Math.floor($(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.currentTime*10)/10 + "s." +
|
||||
" (d: " + Math.floor($(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.duration*10)/10 + "s" +
|
||||
", sp: " + Math.floor($(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.seekPercent) + "%" +
|
||||
", cpr: " + Math.floor($(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.currentPercentRelative) + "%" +
|
||||
", cpa: " + Math.floor($(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.currentPercentAbsolute) + "%)</p>"
|
||||
);
|
||||
return this;
|
||||
}
|
||||
};
|
||||
$.fn.jPlayerInspector = function( method ) {
|
||||
// Method calling logic
|
||||
if ( methods[method] ) {
|
||||
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
|
||||
} else if ( typeof method === 'object' || ! method ) {
|
||||
return methods.init.apply( this, arguments );
|
||||
} else {
|
||||
$.error( 'Method ' + method + ' does not exist on jQuery.jPlayerInspector' );
|
||||
}
|
||||
};
|
||||
})(jQuery);
|
||||
File diff suppressed because one or more lines are too long
Executable
+3013
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
+583
@@ -0,0 +1,583 @@
|
||||
/*
|
||||
* jPlayer Player Plugin for Popcorn JavaScript Library
|
||||
* http://www.jplayer.org
|
||||
*
|
||||
* Copyright (c) 2013 Happyworm Ltd
|
||||
* Licensed under the MIT license.
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
* Author: Mark J Panaghiston
|
||||
* Version: 1.1.2
|
||||
* Date: 7th November 2013
|
||||
*
|
||||
* For Popcorn Version: 1.3
|
||||
* For jPlayer Version: 2.5.0
|
||||
* Requires: jQuery 1.7+
|
||||
* Note: jQuery dependancy cannot be removed since jPlayer 2 is a jQuery plugin. Use of jQuery will be kept to a minimum.
|
||||
*/
|
||||
|
||||
/* Code verified using http://www.jshint.com/ */
|
||||
/*jshint asi:false, bitwise:false, boss:false, browser:true, curly:false, debug:false, eqeqeq:true, eqnull:false, evil:false, forin:false, immed:false, jquery:true, laxbreak:false, newcap:true, noarg:true, noempty:true, nonew:true, onevar:false, passfail:false, plusplus:false, regexp:false, undef:true, sub:false, strict:false, white:false, smarttabs:true */
|
||||
/*global Popcorn:false, console:false */
|
||||
|
||||
(function(Popcorn) {
|
||||
|
||||
var JQUERY_SCRIPT = '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', // Used if jQuery not already present.
|
||||
JPLAYER_SCRIPT = '//www.jplayer.org/2.5.0/js/jquery.jplayer.min.js', // Used if jPlayer not already present.
|
||||
JPLAYER_SWFPATH = '//www.jplayer.org/2.5.0/js/Jplayer.swf', // Used if not specified in jPlayer options via SRC Object.
|
||||
SOLUTION = 'html,flash', // The default solution option.
|
||||
DEBUG = false, // Decided to leave the debugging option and console output in for the time being. Overhead is trivial.
|
||||
jQueryDownloading = false, // Flag to stop multiple instances from each pulling in jQuery, thus corrupting it.
|
||||
jPlayerDownloading = false, // Flag to stop multiple instances from each pulling in jPlayer, thus corrupting it.
|
||||
format = { // Duplicate of jPlayer 2.5.0 object, to avoid always requiring jQuery and jPlayer to be loaded before performing the _canPlayType() test.
|
||||
mp3: {
|
||||
codec: 'audio/mpeg; codecs="mp3"',
|
||||
flashCanPlay: true,
|
||||
media: 'audio'
|
||||
},
|
||||
m4a: { // AAC / MP4
|
||||
codec: 'audio/mp4; codecs="mp4a.40.2"',
|
||||
flashCanPlay: true,
|
||||
media: 'audio'
|
||||
},
|
||||
m3u8a: { // AAC / MP4 / Apple HLS
|
||||
codec: 'application/vnd.apple.mpegurl; codecs="mp4a.40.2"',
|
||||
flashCanPlay: false,
|
||||
media: 'audio'
|
||||
},
|
||||
m3ua: { // M3U
|
||||
codec: 'audio/mpegurl',
|
||||
flashCanPlay: false,
|
||||
media: 'audio'
|
||||
},
|
||||
oga: { // OGG
|
||||
codec: 'audio/ogg; codecs="vorbis, opus"',
|
||||
flashCanPlay: false,
|
||||
media: 'audio'
|
||||
},
|
||||
flac: { // FLAC
|
||||
codec: 'audio/x-flac',
|
||||
flashCanPlay: false,
|
||||
media: 'audio'
|
||||
},
|
||||
wav: { // PCM
|
||||
codec: 'audio/wav; codecs="1"',
|
||||
flashCanPlay: false,
|
||||
media: 'audio'
|
||||
},
|
||||
webma: { // WEBM
|
||||
codec: 'audio/webm; codecs="vorbis"',
|
||||
flashCanPlay: false,
|
||||
media: 'audio'
|
||||
},
|
||||
fla: { // FLV / F4A
|
||||
codec: 'audio/x-flv',
|
||||
flashCanPlay: true,
|
||||
media: 'audio'
|
||||
},
|
||||
rtmpa: { // RTMP AUDIO
|
||||
codec: 'audio/rtmp; codecs="rtmp"',
|
||||
flashCanPlay: true,
|
||||
media: 'audio'
|
||||
},
|
||||
m4v: { // H.264 / MP4
|
||||
codec: 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"',
|
||||
flashCanPlay: true,
|
||||
media: 'video'
|
||||
},
|
||||
m3u8v: { // H.264 / AAC / MP4 / Apple HLS
|
||||
codec: 'application/vnd.apple.mpegurl; codecs="avc1.42E01E, mp4a.40.2"',
|
||||
flashCanPlay: false,
|
||||
media: 'video'
|
||||
},
|
||||
m3uv: { // M3U
|
||||
codec: 'audio/mpegurl',
|
||||
flashCanPlay: false,
|
||||
media: 'video'
|
||||
},
|
||||
ogv: { // OGG
|
||||
codec: 'video/ogg; codecs="theora, vorbis"',
|
||||
flashCanPlay: false,
|
||||
media: 'video'
|
||||
},
|
||||
webmv: { // WEBM
|
||||
codec: 'video/webm; codecs="vorbis, vp8"',
|
||||
flashCanPlay: false,
|
||||
media: 'video'
|
||||
},
|
||||
flv: { // FLV / F4V
|
||||
codec: 'video/x-flv',
|
||||
flashCanPlay: true,
|
||||
media: 'video'
|
||||
},
|
||||
rtmpv: { // RTMP VIDEO
|
||||
codec: 'video/rtmp; codecs="rtmp"',
|
||||
flashCanPlay: true,
|
||||
media: 'video'
|
||||
}
|
||||
},
|
||||
isObject = function(val) { // Basic check for Object
|
||||
if(val && typeof val === 'object' && val.hasOwnProperty) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
getMediaType = function(url) { // Function to gleam the media type from the URL
|
||||
var mediaType = false;
|
||||
if(/\.mp3$/i.test(url)) {
|
||||
mediaType = 'mp3';
|
||||
} else if(/\.mp4$/i.test(url) || /\.m4v$/i.test(url)) {
|
||||
mediaType = 'm4v';
|
||||
} else if(/\.m4a$/i.test(url)) {
|
||||
mediaType = 'm4a';
|
||||
} else if(/\.ogg$/i.test(url) || /\.oga$/i.test(url)) {
|
||||
mediaType = 'oga';
|
||||
} else if(/\.ogv$/i.test(url)) {
|
||||
mediaType = 'ogv';
|
||||
} else if(/\.webm$/i.test(url)) {
|
||||
mediaType = 'webmv';
|
||||
}
|
||||
return mediaType;
|
||||
},
|
||||
getSupplied = function(url) { // Function to generate a supplied option from an src object. ie., When supplied not specified.
|
||||
var supplied = '',
|
||||
separator = '';
|
||||
if(isObject(url)) {
|
||||
// Generate supplied option from object's properties. Non-format properties would be ignored by jPlayer. Order is unpredictable.
|
||||
for(var prop in url) {
|
||||
if(url.hasOwnProperty(prop)) {
|
||||
supplied += separator + prop;
|
||||
separator = ',';
|
||||
}
|
||||
}
|
||||
}
|
||||
if(DEBUG) console.log('getSupplied(): Generated: supplied = "' + supplied + '"');
|
||||
return supplied;
|
||||
};
|
||||
|
||||
Popcorn.player( 'jplayer', {
|
||||
_canPlayType: function( containerType, url ) {
|
||||
// url : Either a String or an Object structured similar a jPlayer media object. ie., As used by setMedia in jPlayer.
|
||||
// The url object may also contain a solution and supplied property.
|
||||
|
||||
// Define the src object structure here!
|
||||
|
||||
var cType = containerType.toLowerCase(),
|
||||
srcObj = {
|
||||
media:{},
|
||||
options:{}
|
||||
},
|
||||
rVal = false, // Only a boolean false means it is not supported.
|
||||
mediaType;
|
||||
|
||||
if(cType !== 'video' && cType !== 'audio') {
|
||||
|
||||
if(typeof url === 'string') {
|
||||
// Check it starts with http, so the URL is absolute... Well, it is not a perfect check.
|
||||
if(/^http.*/i.test(url)) {
|
||||
mediaType = getMediaType(url);
|
||||
if(mediaType) {
|
||||
srcObj.media[mediaType] = url;
|
||||
srcObj.options.solution = SOLUTION;
|
||||
srcObj.options.supplied = mediaType;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
srcObj = url; // Assume the url is an src object.
|
||||
}
|
||||
|
||||
// Check for Object and appropriate minimum data structure.
|
||||
if(isObject(srcObj) && isObject(srcObj.media)) {
|
||||
|
||||
if(!isObject(srcObj.options)) {
|
||||
srcObj.options = {};
|
||||
}
|
||||
|
||||
if(!srcObj.options.solution) {
|
||||
srcObj.options.solution = SOLUTION;
|
||||
}
|
||||
|
||||
if(!srcObj.options.supplied) {
|
||||
srcObj.options.supplied = getSupplied(srcObj.media);
|
||||
}
|
||||
|
||||
// Figure out how jPlayer will play it.
|
||||
// This may not work properly when both audio and video is supplied. ie., A media player. But it should return truethy and jPlayer can figure it out.
|
||||
|
||||
var solution = srcObj.options.solution.toLowerCase().split(","), // Create the solution array, with prority based on the order of the solution string.
|
||||
supplied = srcObj.options.supplied.toLowerCase().split(","); // Create the supplied formats array, with prority based on the order of the supplied formats string.
|
||||
|
||||
for(var sol = 0; sol < solution.length; sol++) {
|
||||
|
||||
var solutionType = solution[sol].replace(/^\s+|\s+$/g, ""), //trim
|
||||
checkingHtml = solutionType === 'html',
|
||||
checkingFlash = solutionType === 'flash',
|
||||
mediaElem;
|
||||
|
||||
for(var fmt = 0; fmt < supplied.length; fmt++) {
|
||||
mediaType = supplied[fmt].replace(/^\s+|\s+$/g, ""); //trim
|
||||
if(format[mediaType]) { // Check format is valid.
|
||||
|
||||
// Create an HTML5 media element for the type of media.
|
||||
if(!mediaElem && checkingHtml) {
|
||||
mediaElem = document.createElement(format[mediaType].media);
|
||||
}
|
||||
// See if the HTML5 media element can play the MIME / Codec type.
|
||||
// Flash also returns the object if the format is playable, so it is truethy, but that html property is false.
|
||||
// This assumes Flash is available, but that should be dealt with by jPlayer if that happens.
|
||||
var htmlCanPlay = !!(mediaElem && mediaElem.canPlayType && mediaElem.canPlayType(format[mediaType].codec)),
|
||||
htmlWillPlay = htmlCanPlay && checkingHtml,
|
||||
flashWillPlay = format[mediaType].flashCanPlay && checkingFlash;
|
||||
// The first one found will match what jPlayer uses.
|
||||
if(htmlWillPlay || flashWillPlay) {
|
||||
rVal = {
|
||||
html: htmlWillPlay,
|
||||
type: mediaType
|
||||
};
|
||||
sol = solution.length; // Exit solution loop
|
||||
fmt = supplied.length; // Exit supplied loop
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return rVal;
|
||||
},
|
||||
// _setup: function( options ) { // Warning: options is deprecated.
|
||||
_setup: function() {
|
||||
var media = this,
|
||||
myPlayer, // The jQuery selector of the jPlayer element. Usually a <div>
|
||||
jPlayerObj, // The jPlayer data instance. For performance and DRY code.
|
||||
mediaType = 'unknown',
|
||||
jpMedia = {},
|
||||
jpOptions = {},
|
||||
ready = false, // Used during init to override the annoying duration dependance in the track event padding during Popcorn's isReady(). ie., We is ready after loadeddata and duration can then be set real value at leisure.
|
||||
duration = 0, // For the durationchange event with both HTML5 and Flash solutions. Used with 'ready' to keep control during the Popcorn isReady() via loadeddata event. (Duration=0 is bad.)
|
||||
durationchangeId = null, // A timeout ID used with delayed durationchange event. (Because of the duration=NaN fudge to avoid Popcorn track event corruption.)
|
||||
canplaythrough = false,
|
||||
error = null, // The MediaError object.
|
||||
|
||||
dispatchDurationChange = function() {
|
||||
if(ready) {
|
||||
if(DEBUG) console.log('Dispatched event : durationchange : ' + duration);
|
||||
media.dispatchEvent('durationchange');
|
||||
} else {
|
||||
if(DEBUG) console.log('DELAYED EVENT (!ready) : durationchange : ' + duration);
|
||||
clearTimeout(durationchangeId); // Stop multiple triggers causing multiple timeouts running in parallel.
|
||||
durationchangeId = setTimeout(dispatchDurationChange, 250);
|
||||
}
|
||||
},
|
||||
|
||||
jPlayerFlashEventsPatch = function() {
|
||||
|
||||
/* Events already supported by jPlayer Flash:
|
||||
* loadstart
|
||||
* loadedmetadata (M4A, M4V)
|
||||
* progress
|
||||
* play
|
||||
* pause
|
||||
* seeking
|
||||
* seeked
|
||||
* timeupdate
|
||||
* ended
|
||||
* volumechange
|
||||
* error <- See the custom handler in jPlayerInit()
|
||||
*/
|
||||
|
||||
/* Events patched:
|
||||
* loadeddata
|
||||
* durationchange
|
||||
* canplaythrough
|
||||
* playing
|
||||
*/
|
||||
|
||||
/* Events NOT patched:
|
||||
* suspend
|
||||
* abort
|
||||
* emptied
|
||||
* stalled
|
||||
* loadedmetadata (MP3)
|
||||
* waiting
|
||||
* canplay
|
||||
* ratechange
|
||||
*/
|
||||
|
||||
// Triggering patched events through the jPlayer Object so the events are homogeneous. ie., The contain the event.jPlayer data structure.
|
||||
|
||||
var checkDuration = function(event) {
|
||||
if(event.jPlayer.status.duration !== duration) {
|
||||
duration = event.jPlayer.status.duration;
|
||||
dispatchDurationChange();
|
||||
}
|
||||
},
|
||||
|
||||
checkCanPlayThrough = function(event) {
|
||||
if(!canplaythrough && event.jPlayer.status.seekPercent === 100) {
|
||||
canplaythrough = true;
|
||||
setTimeout(function() {
|
||||
if(DEBUG) console.log('Trigger : canplaythrough');
|
||||
jPlayerObj._trigger($.jPlayer.event.canplaythrough);
|
||||
}, 0);
|
||||
}
|
||||
};
|
||||
|
||||
myPlayer.bind($.jPlayer.event.loadstart, function() {
|
||||
setTimeout(function() {
|
||||
if(DEBUG) console.log('Trigger : loadeddata');
|
||||
jPlayerObj._trigger($.jPlayer.event.loadeddata);
|
||||
}, 0);
|
||||
})
|
||||
.bind($.jPlayer.event.progress, function(event) {
|
||||
checkDuration(event);
|
||||
checkCanPlayThrough(event);
|
||||
})
|
||||
.bind($.jPlayer.event.timeupdate, function(event) {
|
||||
checkDuration(event);
|
||||
checkCanPlayThrough(event);
|
||||
})
|
||||
.bind($.jPlayer.event.play, function() {
|
||||
setTimeout(function() {
|
||||
if(DEBUG) console.log('Trigger : playing');
|
||||
jPlayerObj._trigger($.jPlayer.event.playing);
|
||||
}, 0);
|
||||
});
|
||||
|
||||
if(DEBUG) console.log('Created CUSTOM event handlers for FLASH');
|
||||
},
|
||||
|
||||
jPlayerInit = function() {
|
||||
(function($) {
|
||||
|
||||
myPlayer = $('#' + media.id);
|
||||
|
||||
if(typeof media.src === 'string') {
|
||||
mediaType = getMediaType(media.src);
|
||||
jpMedia[mediaType] = media.src;
|
||||
jpOptions.supplied = mediaType;
|
||||
jpOptions.solution = SOLUTION;
|
||||
} else if(isObject(media.src)) {
|
||||
jpMedia = isObject(media.src.media) ? media.src.media : {};
|
||||
jpOptions = isObject(media.src.options) ? media.src.options : {};
|
||||
jpOptions.solution = jpOptions.solution || SOLUTION;
|
||||
jpOptions.supplied = jpOptions.supplied || getSupplied(media.src.media);
|
||||
}
|
||||
|
||||
// Allow the swfPath to be set to local server. ie., If the jPlayer Plugin is local and already on the page, then you can also use the local SWF.
|
||||
jpOptions.swfPath = jpOptions.swfPath || JPLAYER_SWFPATH;
|
||||
|
||||
myPlayer.bind($.jPlayer.event.ready, function(event) {
|
||||
if(event.jPlayer.flash.used) {
|
||||
jPlayerFlashEventsPatch();
|
||||
}
|
||||
// Set the media andd load it, so that the Flash solution behaves similar to HTML5 solution.
|
||||
// This also allows the loadstart event to be used to know jPlayer is ready.
|
||||
$(this).jPlayer('setMedia', jpMedia).jPlayer('load');
|
||||
});
|
||||
|
||||
// Do not auto-bubble the reserved events, nor the loadeddata and durationchange event, since the duration must be carefully handled when loadeddata event occurs.
|
||||
// See the duration property code for more details. (Ranting.)
|
||||
|
||||
var reservedEvents = $.jPlayer.reservedEvent + ' loadeddata durationchange',
|
||||
reservedEvent = reservedEvents.split(/\s+/g);
|
||||
|
||||
// Generate event handlers for all the standard HTML5 media events. (Except durationchange)
|
||||
|
||||
var bindEvent = function(name) {
|
||||
myPlayer.bind($.jPlayer.event[name], function(event) {
|
||||
if(DEBUG) console.log('Dispatched event: ' + name + (event && event.jPlayer ? ' (' + event.jPlayer.status.currentTime + 's)' : '')); // Must be after dispatch for some reason on Firefox/Opera
|
||||
media.dispatchEvent(name);
|
||||
});
|
||||
if(DEBUG) console.log('Created event handler for: ' + name);
|
||||
};
|
||||
|
||||
for(var eventName in $.jPlayer.event) {
|
||||
if($.jPlayer.event.hasOwnProperty(eventName)) {
|
||||
var nativeEvent = true;
|
||||
for(var iRes in reservedEvent) {
|
||||
if(reservedEvent.hasOwnProperty(iRes)) {
|
||||
if(reservedEvent[iRes] === eventName) {
|
||||
nativeEvent = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
if(nativeEvent) {
|
||||
bindEvent(eventName);
|
||||
} else {
|
||||
if(DEBUG) console.log('Skipped auto event handler creation for: ' + eventName);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
myPlayer.bind($.jPlayer.event.loadeddata, function(event) {
|
||||
if(DEBUG) console.log('Dispatched event: loadeddata' + (event && event.jPlayer ? ' (' + event.jPlayer.status.currentTime + 's)' : ''));
|
||||
media.dispatchEvent('loadeddata');
|
||||
ready = true;
|
||||
});
|
||||
if(DEBUG) console.log('Created CUSTOM event handler for: loadeddata');
|
||||
|
||||
myPlayer.bind($.jPlayer.event.durationchange, function(event) {
|
||||
duration = event.jPlayer.status.duration;
|
||||
dispatchDurationChange();
|
||||
});
|
||||
if(DEBUG) console.log('Created CUSTOM event handler for: durationchange');
|
||||
|
||||
// The error event is a special case. Plus jPlayer error event assumes it is a broken URL. (It could also be a decoder error... Or aborted or a Network error.)
|
||||
myPlayer.bind($.jPlayer.event.error, function(event) {
|
||||
// Not sure how to handle the error situation. Popcorn does not appear to have the error or error.code property documented here: http://popcornjs.org/popcorn-docs/media-methods/
|
||||
// If any error event happens, then something has gone pear shaped.
|
||||
|
||||
error = event.jPlayer.error; // Saving object pointer, not a copy of the object. Possible garbage collection issue... But the player is dead anyway, so don't care.
|
||||
|
||||
if(error.type === $.jPlayer.error.URL) {
|
||||
error.code = 4; // MEDIA_ERR_SRC_NOT_SUPPORTED since jPlayer makes this assumption. It is the most common error, then the decode error. Never seen either of the other 2 error types occur.
|
||||
} else {
|
||||
error.code = 0; // It was a jPlayer error, not an HTML5 media error.
|
||||
}
|
||||
|
||||
if(DEBUG) console.log('Dispatched event: error');
|
||||
if(DEBUG) console.dir(error);
|
||||
media.dispatchEvent('error');
|
||||
});
|
||||
if(DEBUG) console.log('Created CUSTOM event handler for: error');
|
||||
|
||||
Popcorn.player.defineProperty( media, 'error', {
|
||||
set: function() {
|
||||
// Read-only property
|
||||
return error;
|
||||
},
|
||||
get: function() {
|
||||
return error;
|
||||
}
|
||||
});
|
||||
|
||||
Popcorn.player.defineProperty( media, 'currentTime', {
|
||||
set: function( val ) {
|
||||
if(jPlayerObj.status.paused) {
|
||||
myPlayer.jPlayer('pause', val);
|
||||
} else {
|
||||
myPlayer.jPlayer('play', val);
|
||||
}
|
||||
return val;
|
||||
},
|
||||
get: function() {
|
||||
return jPlayerObj.status.currentTime;
|
||||
}
|
||||
});
|
||||
|
||||
/* The joy of duration and the loadeddata event isReady() handler
|
||||
* The duration is assumed to be a NaN or a valid duration.
|
||||
* jPlayer uses zero instead of a NaN and this screws up the Popcorn track event start/end arrays padding.
|
||||
* This line here:
|
||||
* videoDurationPlus = duration != duration ? Number.MAX_VALUE : duration + 1;
|
||||
* Not sure why it is not simply:
|
||||
* videoDurationPlus = Number.MAX_VALUE; // Who cares if the padding is close to the real duration?
|
||||
* So if you trigger loadeddata before the duration is correct, the track event padding is screwed up. (It pads the start, not the end... Well, duration+1 = 0+1 = 1s)
|
||||
* That line makes the MP3 Flash fallback difficult to setup. The whole MP3 will need to load before the duration is known.
|
||||
* Planning on using a NaN for duration until a >0 value is found... Except with MP3, where seekPercent must be 100% before setting the duration.
|
||||
* Why not just use a NaN during init... And then correct the duration later?
|
||||
*/
|
||||
|
||||
Popcorn.player.defineProperty( media, 'duration', {
|
||||
set: function() {
|
||||
// Read-only property
|
||||
if(ready) {
|
||||
return duration;
|
||||
} else {
|
||||
return NaN;
|
||||
}
|
||||
},
|
||||
get: function() {
|
||||
if(ready) {
|
||||
return duration; // Popcorn has initialized, we can now use duration zero or whatever without fear.
|
||||
} else {
|
||||
return NaN; // Keep the duration a NaN until after loadeddata event has occurred. Otherwise Popcorn track event padding is corrupted.
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Popcorn.player.defineProperty( media, 'muted', {
|
||||
set: function( val ) {
|
||||
myPlayer.jPlayer('mute', val);
|
||||
return jPlayerObj.options.muted;
|
||||
},
|
||||
get: function() {
|
||||
return jPlayerObj.options.muted;
|
||||
}
|
||||
});
|
||||
|
||||
Popcorn.player.defineProperty( media, 'volume', {
|
||||
set: function( val ) {
|
||||
myPlayer.jPlayer('volume', val);
|
||||
return jPlayerObj.options.volume;
|
||||
},
|
||||
get: function() {
|
||||
return jPlayerObj.options.volume;
|
||||
}
|
||||
});
|
||||
|
||||
Popcorn.player.defineProperty( media, 'paused', {
|
||||
set: function() {
|
||||
// Read-only property
|
||||
return jPlayerObj.status.paused;
|
||||
},
|
||||
get: function() {
|
||||
return jPlayerObj.status.paused;
|
||||
}
|
||||
});
|
||||
|
||||
media.play = function() {
|
||||
myPlayer.jPlayer('play');
|
||||
};
|
||||
media.pause = function() {
|
||||
myPlayer.jPlayer('pause');
|
||||
};
|
||||
|
||||
myPlayer.jPlayer(jpOptions); // Instance jPlayer. Note that the options should not have a ready event defined... Kill it by default?
|
||||
jPlayerObj = myPlayer.data('jPlayer');
|
||||
|
||||
}(jQuery));
|
||||
},
|
||||
|
||||
jPlayerCheck = function() {
|
||||
if (!jQuery.jPlayer) {
|
||||
if (!jPlayerDownloading) {
|
||||
jPlayerDownloading = true;
|
||||
Popcorn.getScript(JPLAYER_SCRIPT, function() {
|
||||
jPlayerDownloading = false;
|
||||
jPlayerInit();
|
||||
});
|
||||
} else {
|
||||
setTimeout(jPlayerCheck, 250);
|
||||
}
|
||||
} else {
|
||||
jPlayerInit();
|
||||
}
|
||||
},
|
||||
|
||||
jQueryCheck = function() {
|
||||
if (!window.jQuery) {
|
||||
if (!jQueryDownloading) {
|
||||
jQueryDownloading = true;
|
||||
Popcorn.getScript(JQUERY_SCRIPT, function() {
|
||||
jQueryDownloading = false;
|
||||
jPlayerCheck();
|
||||
});
|
||||
} else {
|
||||
setTimeout(jQueryCheck, 250);
|
||||
}
|
||||
} else {
|
||||
jPlayerCheck();
|
||||
}
|
||||
};
|
||||
|
||||
jQueryCheck();
|
||||
},
|
||||
_teardown: function() {
|
||||
jQuery('#' + this.id).jPlayer('destroy');
|
||||
}
|
||||
});
|
||||
|
||||
}(Popcorn));
|
||||
File diff suppressed because one or more lines are too long
Executable
BIN
Binary file not shown.
+470
@@ -0,0 +1,470 @@
|
||||
/*
|
||||
* Playlist Object for the jPlayer Plugin
|
||||
* http://www.jplayer.org
|
||||
*
|
||||
* Copyright (c) 2009 - 2013 Happyworm Ltd
|
||||
* Licensed under the MIT license.
|
||||
* http://www.opensource.org/licenses/MIT
|
||||
*
|
||||
* Author: Mark J Panaghiston
|
||||
* Version: 2.3.0
|
||||
* Date: 20th April 2013
|
||||
*
|
||||
* Requires:
|
||||
* - jQuery 1.7.0+
|
||||
* - jPlayer 2.3.0+
|
||||
*/
|
||||
|
||||
/* Code verified using http://www.jshint.com/ */
|
||||
/*jshint asi:false, bitwise:false, boss:false, browser:true, curly:true, debug:false, eqeqeq:true, eqnull:false, evil:false, forin:false, immed:false, jquery:true, laxbreak:false, newcap:true, noarg:true, noempty:true, nonew:true, onevar:false, passfail:false, plusplus:false, regexp:false, undef:true, sub:false, strict:false, white:false, smarttabs:true */
|
||||
/*global jPlayerPlaylist:true */
|
||||
|
||||
(function($, undefined) {
|
||||
|
||||
jPlayerPlaylist = function(cssSelector, playlist, options) {
|
||||
var self = this;
|
||||
|
||||
this.current = 0;
|
||||
this.loop = false; // Flag used with the jPlayer repeat event
|
||||
this.shuffled = false;
|
||||
this.removing = false; // Flag is true during remove animation, disabling the remove() method until complete.
|
||||
|
||||
this.cssSelector = $.extend({}, this._cssSelector, cssSelector); // Object: Containing the css selectors for jPlayer and its cssSelectorAncestor
|
||||
this.options = $.extend(true, {
|
||||
keyBindings: {
|
||||
next: {
|
||||
key: 39, // RIGHT
|
||||
fn: function() {
|
||||
self.next();
|
||||
}
|
||||
},
|
||||
previous: {
|
||||
key: 37, // LEFT
|
||||
fn: function() {
|
||||
self.previous();
|
||||
}
|
||||
}
|
||||
}
|
||||
}, this._options, options); // Object: The jPlayer constructor options for this playlist and the playlist options
|
||||
|
||||
this.playlist = []; // Array of Objects: The current playlist displayed (Un-shuffled or Shuffled)
|
||||
this.original = []; // Array of Objects: The original playlist
|
||||
|
||||
this._initPlaylist(playlist); // Copies playlist to this.original. Then mirrors this.original to this.playlist. Creating two arrays, where the element pointers match. (Enables pointer comparison.)
|
||||
|
||||
// Setup the css selectors for the extra interface items used by the playlist.
|
||||
this.cssSelector.title = this.cssSelector.cssSelectorAncestor + " .jp-title"; // Note that the text is written to the decendant li node.
|
||||
this.cssSelector.playlist = this.cssSelector.cssSelectorAncestor + " .jp-playlist";
|
||||
this.cssSelector.next = this.cssSelector.cssSelectorAncestor + " .jp-next";
|
||||
this.cssSelector.previous = this.cssSelector.cssSelectorAncestor + " .jp-previous";
|
||||
this.cssSelector.shuffle = this.cssSelector.cssSelectorAncestor + " .jp-shuffle";
|
||||
this.cssSelector.shuffleOff = this.cssSelector.cssSelectorAncestor + " .jp-shuffle-off";
|
||||
|
||||
// Override the cssSelectorAncestor given in options
|
||||
this.options.cssSelectorAncestor = this.cssSelector.cssSelectorAncestor;
|
||||
|
||||
// Override the default repeat event handler
|
||||
this.options.repeat = function(event) {
|
||||
self.loop = event.jPlayer.options.loop;
|
||||
};
|
||||
|
||||
// Create a ready event handler to initialize the playlist
|
||||
$(this.cssSelector.jPlayer).bind($.jPlayer.event.ready, function() {
|
||||
self._init();
|
||||
});
|
||||
|
||||
// Create an ended event handler to move to the next item
|
||||
$(this.cssSelector.jPlayer).bind($.jPlayer.event.ended, function() {
|
||||
self.next();
|
||||
});
|
||||
|
||||
// Create a play event handler to pause other instances
|
||||
$(this.cssSelector.jPlayer).bind($.jPlayer.event.play, function() {
|
||||
$(this).jPlayer("pauseOthers");
|
||||
});
|
||||
|
||||
// Create a resize event handler to show the title in full screen mode.
|
||||
$(this.cssSelector.jPlayer).bind($.jPlayer.event.resize, function(event) {
|
||||
if(event.jPlayer.options.fullScreen) {
|
||||
$(self.cssSelector.title).show();
|
||||
} else {
|
||||
$(self.cssSelector.title).hide();
|
||||
}
|
||||
});
|
||||
|
||||
// Create click handlers for the extra buttons that do playlist functions.
|
||||
$(this.cssSelector.previous).click(function() {
|
||||
self.previous();
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
|
||||
$(this.cssSelector.next).click(function() {
|
||||
self.next();
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
|
||||
$(this.cssSelector.shuffle).click(function() {
|
||||
self.shuffle(true);
|
||||
return false;
|
||||
});
|
||||
$(this.cssSelector.shuffleOff).click(function() {
|
||||
self.shuffle(false);
|
||||
return false;
|
||||
}).hide();
|
||||
|
||||
// Put the title in its initial display state
|
||||
if(!this.options.fullScreen) {
|
||||
$(this.cssSelector.title).hide();
|
||||
}
|
||||
|
||||
// Remove the empty <li> from the page HTML. Allows page to be valid HTML, while not interfereing with display animations
|
||||
$(this.cssSelector.playlist + " ul").empty();
|
||||
|
||||
// Create .on() handlers for the playlist items along with the free media and remove controls.
|
||||
this._createItemHandlers();
|
||||
|
||||
// Instance jPlayer
|
||||
$(this.cssSelector.jPlayer).jPlayer(this.options);
|
||||
};
|
||||
|
||||
jPlayerPlaylist.prototype = {
|
||||
_cssSelector: { // static object, instanced in constructor
|
||||
jPlayer: "#jquery_jplayer_1",
|
||||
cssSelectorAncestor: "#jp_container_1"
|
||||
},
|
||||
_options: { // static object, instanced in constructor
|
||||
playlistOptions: {
|
||||
autoPlay: false,
|
||||
loopOnPrevious: false,
|
||||
shuffleOnLoop: true,
|
||||
enableRemoveControls: false,
|
||||
displayTime: 'slow',
|
||||
addTime: 'fast',
|
||||
removeTime: 'fast',
|
||||
shuffleTime: 'slow',
|
||||
itemClass: "jp-playlist-item",
|
||||
freeGroupClass: "jp-free-media",
|
||||
freeItemClass: "jp-playlist-item-free",
|
||||
removeItemClass: "jp-playlist-item-remove"
|
||||
}
|
||||
},
|
||||
option: function(option, value) { // For changing playlist options only
|
||||
if(value === undefined) {
|
||||
return this.options.playlistOptions[option];
|
||||
}
|
||||
|
||||
this.options.playlistOptions[option] = value;
|
||||
|
||||
switch(option) {
|
||||
case "enableRemoveControls":
|
||||
this._updateControls();
|
||||
break;
|
||||
case "itemClass":
|
||||
case "freeGroupClass":
|
||||
case "freeItemClass":
|
||||
case "removeItemClass":
|
||||
this._refresh(true); // Instant
|
||||
this._createItemHandlers();
|
||||
break;
|
||||
}
|
||||
return this;
|
||||
},
|
||||
_init: function() {
|
||||
var self = this;
|
||||
this._refresh(function() {
|
||||
if(self.options.playlistOptions.autoPlay) {
|
||||
self.play(self.current);
|
||||
} else {
|
||||
self.select(self.current);
|
||||
}
|
||||
});
|
||||
},
|
||||
_initPlaylist: function(playlist) {
|
||||
this.current = 0;
|
||||
this.shuffled = false;
|
||||
this.removing = false;
|
||||
this.original = $.extend(true, [], playlist); // Copy the Array of Objects
|
||||
this._originalPlaylist();
|
||||
},
|
||||
_originalPlaylist: function() {
|
||||
var self = this;
|
||||
this.playlist = [];
|
||||
// Make both arrays point to the same object elements. Gives us 2 different arrays, each pointing to the same actual object. ie., Not copies of the object.
|
||||
$.each(this.original, function(i) {
|
||||
self.playlist[i] = self.original[i];
|
||||
});
|
||||
},
|
||||
_refresh: function(instant) {
|
||||
/* instant: Can be undefined, true or a function.
|
||||
* undefined -> use animation timings
|
||||
* true -> no animation
|
||||
* function -> use animation timings and excute function at half way point.
|
||||
*/
|
||||
var self = this;
|
||||
|
||||
if(instant && !$.isFunction(instant)) {
|
||||
$(this.cssSelector.playlist + " ul").empty();
|
||||
$.each(this.playlist, function(i) {
|
||||
$(self.cssSelector.playlist + " ul").append(self._createListItem(self.playlist[i]));
|
||||
});
|
||||
this._updateControls();
|
||||
} else {
|
||||
var displayTime = $(this.cssSelector.playlist + " ul").children().length ? this.options.playlistOptions.displayTime : 0;
|
||||
|
||||
$(this.cssSelector.playlist + " ul").slideUp(displayTime, function() {
|
||||
var $this = $(this);
|
||||
$(this).empty();
|
||||
|
||||
$.each(self.playlist, function(i) {
|
||||
$this.append(self._createListItem(self.playlist[i]));
|
||||
});
|
||||
self._updateControls();
|
||||
if($.isFunction(instant)) {
|
||||
instant();
|
||||
}
|
||||
if(self.playlist.length) {
|
||||
$(this).slideDown(self.options.playlistOptions.displayTime);
|
||||
} else {
|
||||
$(this).show();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
_createListItem: function(media) {
|
||||
var self = this;
|
||||
|
||||
// Wrap the <li> contents in a <div>
|
||||
var listItem = "<li><div>";
|
||||
|
||||
// Create remove control
|
||||
listItem += "<a href='javascript:;' class='" + this.options.playlistOptions.removeItemClass + "'>×</a>";
|
||||
|
||||
// Create links to free media
|
||||
if(media.free) {
|
||||
var first = true;
|
||||
listItem += "<span class='" + this.options.playlistOptions.freeGroupClass + "'>(";
|
||||
$.each(media, function(property,value) {
|
||||
if($.jPlayer.prototype.format[property]) { // Check property is a media format.
|
||||
if(first) {
|
||||
first = false;
|
||||
} else {
|
||||
listItem += " | ";
|
||||
}
|
||||
listItem += "<a class='" + self.options.playlistOptions.freeItemClass + "' href='" + value + "' tabindex='1'>" + property + "</a>";
|
||||
}
|
||||
});
|
||||
listItem += ")</span>";
|
||||
}
|
||||
|
||||
// The title is given next in the HTML otherwise the float:right on the free media corrupts in IE6/7
|
||||
listItem += "<a href='javascript:;' class='" + this.options.playlistOptions.itemClass + "' tabindex='1'>" + media.title + (media.artist ? " <span class='jp-artist'>by " + media.artist + "</span>" : "") + "</a>";
|
||||
listItem += "</div></li>";
|
||||
|
||||
return listItem;
|
||||
},
|
||||
_createItemHandlers: function() {
|
||||
var self = this;
|
||||
// Create live handlers for the playlist items
|
||||
$(this.cssSelector.playlist).off("click", "a." + this.options.playlistOptions.itemClass).on("click", "a." + this.options.playlistOptions.itemClass, function() {
|
||||
var index = $(this).parent().parent().index();
|
||||
if(self.current !== index) {
|
||||
self.play(index);
|
||||
} else {
|
||||
$(self.cssSelector.jPlayer).jPlayer("play");
|
||||
}
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
|
||||
// Create live handlers that disable free media links to force access via right click
|
||||
$(this.cssSelector.playlist).off("click", "a." + this.options.playlistOptions.freeItemClass).on("click", "a." + this.options.playlistOptions.freeItemClass, function() {
|
||||
$(this).parent().parent().find("." + self.options.playlistOptions.itemClass).click();
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
|
||||
// Create live handlers for the remove controls
|
||||
$(this.cssSelector.playlist).off("click", "a." + this.options.playlistOptions.removeItemClass).on("click", "a." + this.options.playlistOptions.removeItemClass, function() {
|
||||
var index = $(this).parent().parent().index();
|
||||
self.remove(index);
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
},
|
||||
_updateControls: function() {
|
||||
if(this.options.playlistOptions.enableRemoveControls) {
|
||||
$(this.cssSelector.playlist + " ." + this.options.playlistOptions.removeItemClass).show();
|
||||
} else {
|
||||
$(this.cssSelector.playlist + " ." + this.options.playlistOptions.removeItemClass).hide();
|
||||
}
|
||||
if(this.shuffled) {
|
||||
$(this.cssSelector.shuffleOff).show();
|
||||
$(this.cssSelector.shuffle).hide();
|
||||
} else {
|
||||
$(this.cssSelector.shuffleOff).hide();
|
||||
$(this.cssSelector.shuffle).show();
|
||||
}
|
||||
},
|
||||
_highlight: function(index) {
|
||||
if(this.playlist.length && index !== undefined) {
|
||||
$(this.cssSelector.playlist + " .jp-playlist-current").removeClass("jp-playlist-current");
|
||||
$(this.cssSelector.playlist + " li:nth-child(" + (index + 1) + ")").addClass("jp-playlist-current").find(".jp-playlist-item").addClass("jp-playlist-current");
|
||||
$(this.cssSelector.title + " li").html(this.playlist[index].title + (this.playlist[index].artist ? " <span class='jp-artist'>by " + this.playlist[index].artist + "</span>" : ""));
|
||||
}
|
||||
},
|
||||
setPlaylist: function(playlist) {
|
||||
this._initPlaylist(playlist);
|
||||
this._init();
|
||||
},
|
||||
add: function(media, playNow) {
|
||||
$(this.cssSelector.playlist + " ul").append(this._createListItem(media)).find("li:last-child").hide().slideDown(this.options.playlistOptions.addTime);
|
||||
this._updateControls();
|
||||
this.original.push(media);
|
||||
this.playlist.push(media); // Both array elements share the same object pointer. Comforms with _initPlaylist(p) system.
|
||||
|
||||
if(playNow) {
|
||||
this.play(this.playlist.length - 1);
|
||||
} else {
|
||||
if(this.original.length === 1) {
|
||||
this.select(0);
|
||||
}
|
||||
}
|
||||
},
|
||||
remove: function(index) {
|
||||
var self = this;
|
||||
|
||||
if(index === undefined) {
|
||||
this._initPlaylist([]);
|
||||
this._refresh(function() {
|
||||
$(self.cssSelector.jPlayer).jPlayer("clearMedia");
|
||||
});
|
||||
return true;
|
||||
} else {
|
||||
|
||||
if(this.removing) {
|
||||
return false;
|
||||
} else {
|
||||
index = (index < 0) ? self.original.length + index : index; // Negative index relates to end of array.
|
||||
if(0 <= index && index < this.playlist.length) {
|
||||
this.removing = true;
|
||||
|
||||
$(this.cssSelector.playlist + " li:nth-child(" + (index + 1) + ")").slideUp(this.options.playlistOptions.removeTime, function() {
|
||||
$(this).remove();
|
||||
|
||||
if(self.shuffled) {
|
||||
var item = self.playlist[index];
|
||||
$.each(self.original, function(i) {
|
||||
if(self.original[i] === item) {
|
||||
self.original.splice(i, 1);
|
||||
return false; // Exit $.each
|
||||
}
|
||||
});
|
||||
self.playlist.splice(index, 1);
|
||||
} else {
|
||||
self.original.splice(index, 1);
|
||||
self.playlist.splice(index, 1);
|
||||
}
|
||||
|
||||
if(self.original.length) {
|
||||
if(index === self.current) {
|
||||
self.current = (index < self.original.length) ? self.current : self.original.length - 1; // To cope when last element being selected when it was removed
|
||||
self.select(self.current);
|
||||
} else if(index < self.current) {
|
||||
self.current--;
|
||||
}
|
||||
} else {
|
||||
$(self.cssSelector.jPlayer).jPlayer("clearMedia");
|
||||
self.current = 0;
|
||||
self.shuffled = false;
|
||||
self._updateControls();
|
||||
}
|
||||
|
||||
self.removing = false;
|
||||
});
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
},
|
||||
select: function(index) {
|
||||
index = (index < 0) ? this.original.length + index : index; // Negative index relates to end of array.
|
||||
if(0 <= index && index < this.playlist.length) {
|
||||
this.current = index;
|
||||
this._highlight(index);
|
||||
$(this.cssSelector.jPlayer).jPlayer("setMedia", this.playlist[this.current]);
|
||||
} else {
|
||||
this.current = 0;
|
||||
}
|
||||
},
|
||||
play: function(index) {
|
||||
index = (index < 0) ? this.original.length + index : index; // Negative index relates to end of array.
|
||||
if(0 <= index && index < this.playlist.length) {
|
||||
if(this.playlist.length) {
|
||||
this.select(index);
|
||||
$(this.cssSelector.jPlayer).jPlayer("play");
|
||||
}
|
||||
} else if(index === undefined) {
|
||||
$(this.cssSelector.jPlayer).jPlayer("play");
|
||||
}
|
||||
},
|
||||
pause: function() {
|
||||
$(this.cssSelector.jPlayer).jPlayer("pause");
|
||||
},
|
||||
next: function() {
|
||||
var index = (this.current + 1 < this.playlist.length) ? this.current + 1 : 0;
|
||||
|
||||
if(this.loop) {
|
||||
// See if we need to shuffle before looping to start, and only shuffle if more than 1 item.
|
||||
if(index === 0 && this.shuffled && this.options.playlistOptions.shuffleOnLoop && this.playlist.length > 1) {
|
||||
this.shuffle(true, true); // playNow
|
||||
} else {
|
||||
this.play(index);
|
||||
}
|
||||
} else {
|
||||
// The index will be zero if it just looped round
|
||||
if(index > 0) {
|
||||
this.play(index);
|
||||
}
|
||||
}
|
||||
},
|
||||
previous: function() {
|
||||
var index = (this.current - 1 >= 0) ? this.current - 1 : this.playlist.length - 1;
|
||||
|
||||
if(this.loop && this.options.playlistOptions.loopOnPrevious || index < this.playlist.length - 1) {
|
||||
this.play(index);
|
||||
}
|
||||
},
|
||||
shuffle: function(shuffled, playNow) {
|
||||
var self = this;
|
||||
|
||||
if(shuffled === undefined) {
|
||||
shuffled = !this.shuffled;
|
||||
}
|
||||
|
||||
if(shuffled || shuffled !== this.shuffled) {
|
||||
|
||||
$(this.cssSelector.playlist + " ul").slideUp(this.options.playlistOptions.shuffleTime, function() {
|
||||
self.shuffled = shuffled;
|
||||
if(shuffled) {
|
||||
self.playlist.sort(function() {
|
||||
return 0.5 - Math.random();
|
||||
});
|
||||
} else {
|
||||
self._originalPlaylist();
|
||||
}
|
||||
self._refresh(true); // Instant
|
||||
|
||||
if(playNow || !$(self.cssSelector.jPlayer).data("jPlayer").status.paused) {
|
||||
self.play(0);
|
||||
} else {
|
||||
self.select(0);
|
||||
}
|
||||
|
||||
$(this).slideDown(self.options.playlistOptions.shuffleTime);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
})(jQuery);
|
||||
File diff suppressed because one or more lines are too long
+337
@@ -0,0 +1,337 @@
|
||||
/*
|
||||
* jPlayerInspector Plugin for jPlayer Plugin for jQuery JavaScript Library
|
||||
* http://www.jplayer.org
|
||||
*
|
||||
* Copyright (c) 2009 - 2013 Happyworm Ltd
|
||||
* Licensed under the MIT license.
|
||||
* http://www.opensource.org/licenses/MIT
|
||||
*
|
||||
* Author: Mark J Panaghiston
|
||||
* Version: 1.0.4
|
||||
* Date: 29th January 2013
|
||||
*
|
||||
* For use with jPlayer Version: 2.2.19+
|
||||
*
|
||||
* Note: Declare inspector instances after jPlayer instances. ie., Otherwise the jPlayer instance is nonsense.
|
||||
*/
|
||||
|
||||
(function($, undefined) {
|
||||
$.jPlayerInspector = {};
|
||||
$.jPlayerInspector.i = 0;
|
||||
$.jPlayerInspector.defaults = {
|
||||
jPlayer: undefined, // The jQuery selector of the jPlayer instance to inspect.
|
||||
idPrefix: "jplayer_inspector_",
|
||||
visible: false
|
||||
};
|
||||
|
||||
var methods = {
|
||||
init: function(options) {
|
||||
var self = this;
|
||||
var $this = $(this);
|
||||
|
||||
var config = $.extend({}, $.jPlayerInspector.defaults, options);
|
||||
$(this).data("jPlayerInspector", config);
|
||||
|
||||
config.id = $(this).attr("id");
|
||||
config.jPlayerId = config.jPlayer.attr("id");
|
||||
|
||||
config.windowId = config.idPrefix + "window_" + $.jPlayerInspector.i;
|
||||
config.statusId = config.idPrefix + "status_" + $.jPlayerInspector.i;
|
||||
config.configId = config.idPrefix + "config_" + $.jPlayerInspector.i;
|
||||
config.toggleId = config.idPrefix + "toggle_" + $.jPlayerInspector.i;
|
||||
config.eventResetId = config.idPrefix + "event_reset_" + $.jPlayerInspector.i;
|
||||
config.updateId = config.idPrefix + "update_" + $.jPlayerInspector.i;
|
||||
config.eventWindowId = config.idPrefix + "event_window_" + $.jPlayerInspector.i;
|
||||
|
||||
config.eventId = {};
|
||||
config.eventJq = {};
|
||||
config.eventTimeout = {};
|
||||
config.eventOccurrence = {};
|
||||
|
||||
$.each($.jPlayer.event, function(eventName,eventType) {
|
||||
config.eventId[eventType] = config.idPrefix + "event_" + eventName + "_" + $.jPlayerInspector.i;
|
||||
config.eventOccurrence[eventType] = 0;
|
||||
});
|
||||
|
||||
var structure =
|
||||
'<p><a href="#" id="' + config.toggleId + '">' + (config.visible ? "Hide" : "Show") + '</a> jPlayer Inspector</p>'
|
||||
+ '<div id="' + config.windowId + '">'
|
||||
+ '<div id="' + config.statusId + '"></div>'
|
||||
+ '<div id="' + config.eventWindowId + '" style="padding:5px 5px 0 5px;background-color:#eee;border:1px dotted #000;">'
|
||||
+ '<p style="margin:0 0 10px 0;"><strong>jPlayer events that have occurred over the past 1 second:</strong>'
|
||||
+ '<br />(Backgrounds: <span style="padding:0 5px;background-color:#eee;border:1px dotted #000;">Never occurred</span> <span style="padding:0 5px;background-color:#fff;border:1px dotted #000;">Occurred before</span> <span style="padding:0 5px;background-color:#9f9;border:1px dotted #000;">Occurred</span> <span style="padding:0 5px;background-color:#ff9;border:1px dotted #000;">Multiple occurrences</span> <a href="#" id="' + config.eventResetId + '">reset</a>)</p>';
|
||||
|
||||
// MJP: Would use the next 3 lines for ease, but the events are just slapped on the page.
|
||||
// $.each($.jPlayer.event, function(eventName,eventType) {
|
||||
// structure += '<div id="' + config.eventId[eventType] + '" style="float:left;">' + eventName + '</div>';
|
||||
// });
|
||||
|
||||
var eventStyle = "float:left;margin:0 5px 5px 0;padding:0 5px;border:1px dotted #000;";
|
||||
// MJP: Doing it longhand so order and layout easier to control.
|
||||
structure +=
|
||||
'<div id="' + config.eventId[$.jPlayer.event.ready] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.flashreset] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.resize] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.repeat] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.click] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.error] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.warning] + '" style="' + eventStyle + '"></div>'
|
||||
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.loadstart] + '" style="clear:left;' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.progress] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.timeupdate] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.volumechange] + '" style="' + eventStyle + '"></div>'
|
||||
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.play] + '" style="clear:left;' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.pause] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.waiting] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.playing] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.seeking] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.seeked] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.ended] + '" style="' + eventStyle + '"></div>'
|
||||
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.loadeddata] + '" style="clear:left;' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.loadedmetadata] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.canplay] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.canplaythrough] + '" style="' + eventStyle + '"></div>'
|
||||
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.suspend] + '" style="clear:left;' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.abort] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.emptied] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.stalled] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.ratechange] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.durationchange] + '" style="' + eventStyle + '"></div>'
|
||||
|
||||
+ '<div style="clear:both"></div>';
|
||||
|
||||
// MJP: Would like a check here in case we missed an event.
|
||||
|
||||
// MJP: Check fails, since it is not on the page yet.
|
||||
/* $.each($.jPlayer.event, function(eventName,eventType) {
|
||||
if($("#" + config.eventId[eventType])[0] === undefined) {
|
||||
structure += '<div id="' + config.eventId[eventType] + '" style="clear:left;' + eventStyle + '">' + eventName + '</div>';
|
||||
}
|
||||
});
|
||||
*/
|
||||
structure +=
|
||||
'</div>'
|
||||
+ '<p><a href="#" id="' + config.updateId + '">Update</a> jPlayer Inspector</p>'
|
||||
+ '<div id="' + config.configId + '"></div>'
|
||||
+ '</div>';
|
||||
$(this).html(structure);
|
||||
|
||||
config.windowJq = $("#" + config.windowId);
|
||||
config.statusJq = $("#" + config.statusId);
|
||||
config.configJq = $("#" + config.configId);
|
||||
config.toggleJq = $("#" + config.toggleId);
|
||||
config.eventResetJq = $("#" + config.eventResetId);
|
||||
config.updateJq = $("#" + config.updateId);
|
||||
|
||||
$.each($.jPlayer.event, function(eventName,eventType) {
|
||||
config.eventJq[eventType] = $("#" + config.eventId[eventType]);
|
||||
config.eventJq[eventType].text(eventName + " (" + config.eventOccurrence[eventType] + ")"); // Sets the text to the event name and (0);
|
||||
|
||||
config.jPlayer.bind(eventType + ".jPlayerInspector", function(e) {
|
||||
config.eventOccurrence[e.type]++;
|
||||
if(config.eventOccurrence[e.type] > 1) {
|
||||
config.eventJq[e.type].css("background-color","#ff9");
|
||||
} else {
|
||||
config.eventJq[e.type].css("background-color","#9f9");
|
||||
}
|
||||
config.eventJq[e.type].text(eventName + " (" + config.eventOccurrence[e.type] + ")");
|
||||
// The timer to handle the color
|
||||
clearTimeout(config.eventTimeout[e.type]);
|
||||
config.eventTimeout[e.type] = setTimeout(function() {
|
||||
config.eventJq[e.type].css("background-color","#fff");
|
||||
}, 1000);
|
||||
// The timer to handle the occurences.
|
||||
setTimeout(function() {
|
||||
config.eventOccurrence[e.type]--;
|
||||
config.eventJq[e.type].text(eventName + " (" + config.eventOccurrence[e.type] + ")");
|
||||
}, 1000);
|
||||
if(config.visible) { // Update the status, if inspector open.
|
||||
$this.jPlayerInspector("updateStatus");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
config.jPlayer.bind($.jPlayer.event.ready + ".jPlayerInspector", function(e) {
|
||||
$this.jPlayerInspector("updateConfig");
|
||||
});
|
||||
|
||||
config.toggleJq.click(function() {
|
||||
if(config.visible) {
|
||||
$(this).text("Show");
|
||||
config.windowJq.hide();
|
||||
config.statusJq.empty();
|
||||
config.configJq.empty();
|
||||
} else {
|
||||
$(this).text("Hide");
|
||||
config.windowJq.show();
|
||||
config.updateJq.click();
|
||||
}
|
||||
config.visible = !config.visible;
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
|
||||
config.eventResetJq.click(function() {
|
||||
$.each($.jPlayer.event, function(eventName,eventType) {
|
||||
config.eventJq[eventType].css("background-color","#eee");
|
||||
});
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
|
||||
config.updateJq.click(function() {
|
||||
$this.jPlayerInspector("updateStatus");
|
||||
$this.jPlayerInspector("updateConfig");
|
||||
return false;
|
||||
});
|
||||
|
||||
if(!config.visible) {
|
||||
config.windowJq.hide();
|
||||
} else {
|
||||
// config.updateJq.click();
|
||||
}
|
||||
|
||||
$.jPlayerInspector.i++;
|
||||
|
||||
return this;
|
||||
},
|
||||
destroy: function() {
|
||||
$(this).data("jPlayerInspector") && $(this).data("jPlayerInspector").jPlayer.unbind(".jPlayerInspector");
|
||||
$(this).empty();
|
||||
},
|
||||
updateConfig: function() { // This displays information about jPlayer's configuration in inspector
|
||||
|
||||
var jPlayerInfo = "<p>This jPlayer instance is running in your browser where:<br />"
|
||||
|
||||
for(i = 0; i < $(this).data("jPlayerInspector").jPlayer.data("jPlayer").solutions.length; i++) {
|
||||
var solution = $(this).data("jPlayerInspector").jPlayer.data("jPlayer").solutions[i];
|
||||
jPlayerInfo += " jPlayer's <strong>" + solution + "</strong> solution is";
|
||||
if($(this).data("jPlayerInspector").jPlayer.data("jPlayer")[solution].used) {
|
||||
jPlayerInfo += " being <strong>used</strong> and will support:<strong>";
|
||||
for(format in $(this).data("jPlayerInspector").jPlayer.data("jPlayer")[solution].support) {
|
||||
if($(this).data("jPlayerInspector").jPlayer.data("jPlayer")[solution].support[format]) {
|
||||
jPlayerInfo += " " + format;
|
||||
}
|
||||
}
|
||||
jPlayerInfo += "</strong><br />";
|
||||
} else {
|
||||
jPlayerInfo += " <strong>not required</strong><br />";
|
||||
}
|
||||
}
|
||||
jPlayerInfo += "</p>";
|
||||
|
||||
if($(this).data("jPlayerInspector").jPlayer.data("jPlayer").html.active) {
|
||||
if($(this).data("jPlayerInspector").jPlayer.data("jPlayer").flash.active) {
|
||||
jPlayerInfo += "<strong>Problem with jPlayer since both HTML5 and Flash are active.</strong>";
|
||||
} else {
|
||||
jPlayerInfo += "The <strong>HTML5 is active</strong>.";
|
||||
}
|
||||
} else {
|
||||
if($(this).data("jPlayerInspector").jPlayer.data("jPlayer").flash.active) {
|
||||
jPlayerInfo += "The <strong>Flash is active</strong>.";
|
||||
} else {
|
||||
jPlayerInfo += "No solution is currently active. jPlayer needs a setMedia().";
|
||||
}
|
||||
}
|
||||
jPlayerInfo += "</p>";
|
||||
|
||||
var formatType = $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.formatType;
|
||||
jPlayerInfo += "<p><code>status.formatType = '" + formatType + "'</code><br />";
|
||||
if(formatType) {
|
||||
jPlayerInfo += "<code>Browser canPlay('" + $.jPlayer.prototype.format[formatType].codec + "')</code>";
|
||||
} else {
|
||||
jPlayerInfo += "</p>";
|
||||
}
|
||||
|
||||
jPlayerInfo += "<p><code>status.src = '" + $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.src + "'</code></p>";
|
||||
|
||||
jPlayerInfo += "<p><code>status.media = {<br />";
|
||||
for(prop in $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.media) {
|
||||
jPlayerInfo += " " + prop + ": " + $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.media[prop] + "<br />"; // Some are strings
|
||||
}
|
||||
jPlayerInfo += "};</code></p>"
|
||||
|
||||
jPlayerInfo += "<p>";
|
||||
jPlayerInfo += "<code>status.videoWidth = '" + $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.videoWidth + "'</code>";
|
||||
jPlayerInfo += " | <code>status.videoHeight = '" + $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.videoHeight + "'</code>";
|
||||
jPlayerInfo += "<br /><code>status.width = '" + $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.width + "'</code>";
|
||||
jPlayerInfo += " | <code>status.height = '" + $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.height + "'</code>";
|
||||
jPlayerInfo += "</p>";
|
||||
|
||||
+ "<p>Raw browser test for HTML5 support. Should equal a function if HTML5 is available.<br />";
|
||||
if($(this).data("jPlayerInspector").jPlayer.data("jPlayer").html.audio.available) {
|
||||
jPlayerInfo += "<code>htmlElement.audio.canPlayType = " + (typeof $(this).data("jPlayerInspector").jPlayer.data("jPlayer").htmlElement.audio.canPlayType) +"</code><br />"
|
||||
}
|
||||
if($(this).data("jPlayerInspector").jPlayer.data("jPlayer").html.video.available) {
|
||||
jPlayerInfo += "<code>htmlElement.video.canPlayType = " + (typeof $(this).data("jPlayerInspector").jPlayer.data("jPlayer").htmlElement.video.canPlayType) +"</code>";
|
||||
}
|
||||
jPlayerInfo += "</p>";
|
||||
|
||||
jPlayerInfo += "<p>This instance is using the constructor options:<br />"
|
||||
+ "<code>$('#" + $(this).data("jPlayerInspector").jPlayer.data("jPlayer").internal.self.id + "').jPlayer({<br />"
|
||||
|
||||
+ " swfPath: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "swfPath") + "',<br />"
|
||||
|
||||
+ " solution: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "solution") + "',<br />"
|
||||
|
||||
+ " supplied: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "supplied") + "',<br />"
|
||||
|
||||
+ " preload: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "preload") + "',<br />"
|
||||
|
||||
+ " volume: " + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "volume") + ",<br />"
|
||||
|
||||
+ " muted: " + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "muted") + ",<br />"
|
||||
|
||||
+ " backgroundColor: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "backgroundColor") + "',<br />"
|
||||
|
||||
+ " cssSelectorAncestor: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "cssSelectorAncestor") + "',<br />"
|
||||
|
||||
+ " cssSelector: {";
|
||||
|
||||
var cssSelector = $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "cssSelector");
|
||||
for(prop in cssSelector) {
|
||||
|
||||
// jPlayerInfo += "<br /> " + prop + ": '" + cssSelector[prop] + "'," // This works too of course, but want to use option method for deep keys.
|
||||
jPlayerInfo += "<br /> " + prop + ": '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "cssSelector." + prop) + "',"
|
||||
}
|
||||
|
||||
jPlayerInfo = jPlayerInfo.slice(0, -1); // Because the sloppy comma was bugging me.
|
||||
|
||||
jPlayerInfo += "<br /> },<br />"
|
||||
|
||||
+ " errorAlerts: " + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "errorAlerts") + ",<br />"
|
||||
|
||||
+ " warningAlerts: " + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "warningAlerts") + "<br />"
|
||||
|
||||
+ "});</code></p>";
|
||||
$(this).data("jPlayerInspector").configJq.html(jPlayerInfo);
|
||||
return this;
|
||||
},
|
||||
updateStatus: function() { // This displays information about jPlayer's status in the inspector
|
||||
$(this).data("jPlayerInspector").statusJq.html(
|
||||
"<p>jPlayer is " +
|
||||
($(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.paused ? "paused" : "playing") +
|
||||
" at time: " + Math.floor($(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.currentTime*10)/10 + "s." +
|
||||
" (d: " + Math.floor($(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.duration*10)/10 + "s" +
|
||||
", sp: " + Math.floor($(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.seekPercent) + "%" +
|
||||
", cpr: " + Math.floor($(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.currentPercentRelative) + "%" +
|
||||
", cpa: " + Math.floor($(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.currentPercentAbsolute) + "%)</p>"
|
||||
);
|
||||
return this;
|
||||
}
|
||||
};
|
||||
$.fn.jPlayerInspector = function( method ) {
|
||||
// Method calling logic
|
||||
if ( methods[method] ) {
|
||||
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
|
||||
} else if ( typeof method === 'object' || ! method ) {
|
||||
return methods.init.apply( this, arguments );
|
||||
} else {
|
||||
$.error( 'Method ' + method + ' does not exist on jQuery.jPlayerInspector' );
|
||||
}
|
||||
};
|
||||
})(jQuery);
|
||||
File diff suppressed because one or more lines are too long
Executable
+3013
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
+583
@@ -0,0 +1,583 @@
|
||||
/*
|
||||
* jPlayer Player Plugin for Popcorn JavaScript Library
|
||||
* http://www.jplayer.org
|
||||
*
|
||||
* Copyright (c) 2013 Happyworm Ltd
|
||||
* Licensed under the MIT license.
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
* Author: Mark J Panaghiston
|
||||
* Version: 1.1.2
|
||||
* Date: 7th November 2013
|
||||
*
|
||||
* For Popcorn Version: 1.3
|
||||
* For jPlayer Version: 2.5.0
|
||||
* Requires: jQuery 1.7+
|
||||
* Note: jQuery dependancy cannot be removed since jPlayer 2 is a jQuery plugin. Use of jQuery will be kept to a minimum.
|
||||
*/
|
||||
|
||||
/* Code verified using http://www.jshint.com/ */
|
||||
/*jshint asi:false, bitwise:false, boss:false, browser:true, curly:false, debug:false, eqeqeq:true, eqnull:false, evil:false, forin:false, immed:false, jquery:true, laxbreak:false, newcap:true, noarg:true, noempty:true, nonew:true, onevar:false, passfail:false, plusplus:false, regexp:false, undef:true, sub:false, strict:false, white:false, smarttabs:true */
|
||||
/*global Popcorn:false, console:false */
|
||||
|
||||
(function(Popcorn) {
|
||||
|
||||
var JQUERY_SCRIPT = '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', // Used if jQuery not already present.
|
||||
JPLAYER_SCRIPT = '//www.jplayer.org/2.5.0/js/jquery.jplayer.min.js', // Used if jPlayer not already present.
|
||||
JPLAYER_SWFPATH = '//www.jplayer.org/2.5.0/js/Jplayer.swf', // Used if not specified in jPlayer options via SRC Object.
|
||||
SOLUTION = 'html,flash', // The default solution option.
|
||||
DEBUG = false, // Decided to leave the debugging option and console output in for the time being. Overhead is trivial.
|
||||
jQueryDownloading = false, // Flag to stop multiple instances from each pulling in jQuery, thus corrupting it.
|
||||
jPlayerDownloading = false, // Flag to stop multiple instances from each pulling in jPlayer, thus corrupting it.
|
||||
format = { // Duplicate of jPlayer 2.5.0 object, to avoid always requiring jQuery and jPlayer to be loaded before performing the _canPlayType() test.
|
||||
mp3: {
|
||||
codec: 'audio/mpeg; codecs="mp3"',
|
||||
flashCanPlay: true,
|
||||
media: 'audio'
|
||||
},
|
||||
m4a: { // AAC / MP4
|
||||
codec: 'audio/mp4; codecs="mp4a.40.2"',
|
||||
flashCanPlay: true,
|
||||
media: 'audio'
|
||||
},
|
||||
m3u8a: { // AAC / MP4 / Apple HLS
|
||||
codec: 'application/vnd.apple.mpegurl; codecs="mp4a.40.2"',
|
||||
flashCanPlay: false,
|
||||
media: 'audio'
|
||||
},
|
||||
m3ua: { // M3U
|
||||
codec: 'audio/mpegurl',
|
||||
flashCanPlay: false,
|
||||
media: 'audio'
|
||||
},
|
||||
oga: { // OGG
|
||||
codec: 'audio/ogg; codecs="vorbis, opus"',
|
||||
flashCanPlay: false,
|
||||
media: 'audio'
|
||||
},
|
||||
flac: { // FLAC
|
||||
codec: 'audio/x-flac',
|
||||
flashCanPlay: false,
|
||||
media: 'audio'
|
||||
},
|
||||
wav: { // PCM
|
||||
codec: 'audio/wav; codecs="1"',
|
||||
flashCanPlay: false,
|
||||
media: 'audio'
|
||||
},
|
||||
webma: { // WEBM
|
||||
codec: 'audio/webm; codecs="vorbis"',
|
||||
flashCanPlay: false,
|
||||
media: 'audio'
|
||||
},
|
||||
fla: { // FLV / F4A
|
||||
codec: 'audio/x-flv',
|
||||
flashCanPlay: true,
|
||||
media: 'audio'
|
||||
},
|
||||
rtmpa: { // RTMP AUDIO
|
||||
codec: 'audio/rtmp; codecs="rtmp"',
|
||||
flashCanPlay: true,
|
||||
media: 'audio'
|
||||
},
|
||||
m4v: { // H.264 / MP4
|
||||
codec: 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"',
|
||||
flashCanPlay: true,
|
||||
media: 'video'
|
||||
},
|
||||
m3u8v: { // H.264 / AAC / MP4 / Apple HLS
|
||||
codec: 'application/vnd.apple.mpegurl; codecs="avc1.42E01E, mp4a.40.2"',
|
||||
flashCanPlay: false,
|
||||
media: 'video'
|
||||
},
|
||||
m3uv: { // M3U
|
||||
codec: 'audio/mpegurl',
|
||||
flashCanPlay: false,
|
||||
media: 'video'
|
||||
},
|
||||
ogv: { // OGG
|
||||
codec: 'video/ogg; codecs="theora, vorbis"',
|
||||
flashCanPlay: false,
|
||||
media: 'video'
|
||||
},
|
||||
webmv: { // WEBM
|
||||
codec: 'video/webm; codecs="vorbis, vp8"',
|
||||
flashCanPlay: false,
|
||||
media: 'video'
|
||||
},
|
||||
flv: { // FLV / F4V
|
||||
codec: 'video/x-flv',
|
||||
flashCanPlay: true,
|
||||
media: 'video'
|
||||
},
|
||||
rtmpv: { // RTMP VIDEO
|
||||
codec: 'video/rtmp; codecs="rtmp"',
|
||||
flashCanPlay: true,
|
||||
media: 'video'
|
||||
}
|
||||
},
|
||||
isObject = function(val) { // Basic check for Object
|
||||
if(val && typeof val === 'object' && val.hasOwnProperty) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
getMediaType = function(url) { // Function to gleam the media type from the URL
|
||||
var mediaType = false;
|
||||
if(/\.mp3$/i.test(url)) {
|
||||
mediaType = 'mp3';
|
||||
} else if(/\.mp4$/i.test(url) || /\.m4v$/i.test(url)) {
|
||||
mediaType = 'm4v';
|
||||
} else if(/\.m4a$/i.test(url)) {
|
||||
mediaType = 'm4a';
|
||||
} else if(/\.ogg$/i.test(url) || /\.oga$/i.test(url)) {
|
||||
mediaType = 'oga';
|
||||
} else if(/\.ogv$/i.test(url)) {
|
||||
mediaType = 'ogv';
|
||||
} else if(/\.webm$/i.test(url)) {
|
||||
mediaType = 'webmv';
|
||||
}
|
||||
return mediaType;
|
||||
},
|
||||
getSupplied = function(url) { // Function to generate a supplied option from an src object. ie., When supplied not specified.
|
||||
var supplied = '',
|
||||
separator = '';
|
||||
if(isObject(url)) {
|
||||
// Generate supplied option from object's properties. Non-format properties would be ignored by jPlayer. Order is unpredictable.
|
||||
for(var prop in url) {
|
||||
if(url.hasOwnProperty(prop)) {
|
||||
supplied += separator + prop;
|
||||
separator = ',';
|
||||
}
|
||||
}
|
||||
}
|
||||
if(DEBUG) console.log('getSupplied(): Generated: supplied = "' + supplied + '"');
|
||||
return supplied;
|
||||
};
|
||||
|
||||
Popcorn.player( 'jplayer', {
|
||||
_canPlayType: function( containerType, url ) {
|
||||
// url : Either a String or an Object structured similar a jPlayer media object. ie., As used by setMedia in jPlayer.
|
||||
// The url object may also contain a solution and supplied property.
|
||||
|
||||
// Define the src object structure here!
|
||||
|
||||
var cType = containerType.toLowerCase(),
|
||||
srcObj = {
|
||||
media:{},
|
||||
options:{}
|
||||
},
|
||||
rVal = false, // Only a boolean false means it is not supported.
|
||||
mediaType;
|
||||
|
||||
if(cType !== 'video' && cType !== 'audio') {
|
||||
|
||||
if(typeof url === 'string') {
|
||||
// Check it starts with http, so the URL is absolute... Well, it is not a perfect check.
|
||||
if(/^http.*/i.test(url)) {
|
||||
mediaType = getMediaType(url);
|
||||
if(mediaType) {
|
||||
srcObj.media[mediaType] = url;
|
||||
srcObj.options.solution = SOLUTION;
|
||||
srcObj.options.supplied = mediaType;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
srcObj = url; // Assume the url is an src object.
|
||||
}
|
||||
|
||||
// Check for Object and appropriate minimum data structure.
|
||||
if(isObject(srcObj) && isObject(srcObj.media)) {
|
||||
|
||||
if(!isObject(srcObj.options)) {
|
||||
srcObj.options = {};
|
||||
}
|
||||
|
||||
if(!srcObj.options.solution) {
|
||||
srcObj.options.solution = SOLUTION;
|
||||
}
|
||||
|
||||
if(!srcObj.options.supplied) {
|
||||
srcObj.options.supplied = getSupplied(srcObj.media);
|
||||
}
|
||||
|
||||
// Figure out how jPlayer will play it.
|
||||
// This may not work properly when both audio and video is supplied. ie., A media player. But it should return truethy and jPlayer can figure it out.
|
||||
|
||||
var solution = srcObj.options.solution.toLowerCase().split(","), // Create the solution array, with prority based on the order of the solution string.
|
||||
supplied = srcObj.options.supplied.toLowerCase().split(","); // Create the supplied formats array, with prority based on the order of the supplied formats string.
|
||||
|
||||
for(var sol = 0; sol < solution.length; sol++) {
|
||||
|
||||
var solutionType = solution[sol].replace(/^\s+|\s+$/g, ""), //trim
|
||||
checkingHtml = solutionType === 'html',
|
||||
checkingFlash = solutionType === 'flash',
|
||||
mediaElem;
|
||||
|
||||
for(var fmt = 0; fmt < supplied.length; fmt++) {
|
||||
mediaType = supplied[fmt].replace(/^\s+|\s+$/g, ""); //trim
|
||||
if(format[mediaType]) { // Check format is valid.
|
||||
|
||||
// Create an HTML5 media element for the type of media.
|
||||
if(!mediaElem && checkingHtml) {
|
||||
mediaElem = document.createElement(format[mediaType].media);
|
||||
}
|
||||
// See if the HTML5 media element can play the MIME / Codec type.
|
||||
// Flash also returns the object if the format is playable, so it is truethy, but that html property is false.
|
||||
// This assumes Flash is available, but that should be dealt with by jPlayer if that happens.
|
||||
var htmlCanPlay = !!(mediaElem && mediaElem.canPlayType && mediaElem.canPlayType(format[mediaType].codec)),
|
||||
htmlWillPlay = htmlCanPlay && checkingHtml,
|
||||
flashWillPlay = format[mediaType].flashCanPlay && checkingFlash;
|
||||
// The first one found will match what jPlayer uses.
|
||||
if(htmlWillPlay || flashWillPlay) {
|
||||
rVal = {
|
||||
html: htmlWillPlay,
|
||||
type: mediaType
|
||||
};
|
||||
sol = solution.length; // Exit solution loop
|
||||
fmt = supplied.length; // Exit supplied loop
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return rVal;
|
||||
},
|
||||
// _setup: function( options ) { // Warning: options is deprecated.
|
||||
_setup: function() {
|
||||
var media = this,
|
||||
myPlayer, // The jQuery selector of the jPlayer element. Usually a <div>
|
||||
jPlayerObj, // The jPlayer data instance. For performance and DRY code.
|
||||
mediaType = 'unknown',
|
||||
jpMedia = {},
|
||||
jpOptions = {},
|
||||
ready = false, // Used during init to override the annoying duration dependance in the track event padding during Popcorn's isReady(). ie., We is ready after loadeddata and duration can then be set real value at leisure.
|
||||
duration = 0, // For the durationchange event with both HTML5 and Flash solutions. Used with 'ready' to keep control during the Popcorn isReady() via loadeddata event. (Duration=0 is bad.)
|
||||
durationchangeId = null, // A timeout ID used with delayed durationchange event. (Because of the duration=NaN fudge to avoid Popcorn track event corruption.)
|
||||
canplaythrough = false,
|
||||
error = null, // The MediaError object.
|
||||
|
||||
dispatchDurationChange = function() {
|
||||
if(ready) {
|
||||
if(DEBUG) console.log('Dispatched event : durationchange : ' + duration);
|
||||
media.dispatchEvent('durationchange');
|
||||
} else {
|
||||
if(DEBUG) console.log('DELAYED EVENT (!ready) : durationchange : ' + duration);
|
||||
clearTimeout(durationchangeId); // Stop multiple triggers causing multiple timeouts running in parallel.
|
||||
durationchangeId = setTimeout(dispatchDurationChange, 250);
|
||||
}
|
||||
},
|
||||
|
||||
jPlayerFlashEventsPatch = function() {
|
||||
|
||||
/* Events already supported by jPlayer Flash:
|
||||
* loadstart
|
||||
* loadedmetadata (M4A, M4V)
|
||||
* progress
|
||||
* play
|
||||
* pause
|
||||
* seeking
|
||||
* seeked
|
||||
* timeupdate
|
||||
* ended
|
||||
* volumechange
|
||||
* error <- See the custom handler in jPlayerInit()
|
||||
*/
|
||||
|
||||
/* Events patched:
|
||||
* loadeddata
|
||||
* durationchange
|
||||
* canplaythrough
|
||||
* playing
|
||||
*/
|
||||
|
||||
/* Events NOT patched:
|
||||
* suspend
|
||||
* abort
|
||||
* emptied
|
||||
* stalled
|
||||
* loadedmetadata (MP3)
|
||||
* waiting
|
||||
* canplay
|
||||
* ratechange
|
||||
*/
|
||||
|
||||
// Triggering patched events through the jPlayer Object so the events are homogeneous. ie., The contain the event.jPlayer data structure.
|
||||
|
||||
var checkDuration = function(event) {
|
||||
if(event.jPlayer.status.duration !== duration) {
|
||||
duration = event.jPlayer.status.duration;
|
||||
dispatchDurationChange();
|
||||
}
|
||||
},
|
||||
|
||||
checkCanPlayThrough = function(event) {
|
||||
if(!canplaythrough && event.jPlayer.status.seekPercent === 100) {
|
||||
canplaythrough = true;
|
||||
setTimeout(function() {
|
||||
if(DEBUG) console.log('Trigger : canplaythrough');
|
||||
jPlayerObj._trigger($.jPlayer.event.canplaythrough);
|
||||
}, 0);
|
||||
}
|
||||
};
|
||||
|
||||
myPlayer.bind($.jPlayer.event.loadstart, function() {
|
||||
setTimeout(function() {
|
||||
if(DEBUG) console.log('Trigger : loadeddata');
|
||||
jPlayerObj._trigger($.jPlayer.event.loadeddata);
|
||||
}, 0);
|
||||
})
|
||||
.bind($.jPlayer.event.progress, function(event) {
|
||||
checkDuration(event);
|
||||
checkCanPlayThrough(event);
|
||||
})
|
||||
.bind($.jPlayer.event.timeupdate, function(event) {
|
||||
checkDuration(event);
|
||||
checkCanPlayThrough(event);
|
||||
})
|
||||
.bind($.jPlayer.event.play, function() {
|
||||
setTimeout(function() {
|
||||
if(DEBUG) console.log('Trigger : playing');
|
||||
jPlayerObj._trigger($.jPlayer.event.playing);
|
||||
}, 0);
|
||||
});
|
||||
|
||||
if(DEBUG) console.log('Created CUSTOM event handlers for FLASH');
|
||||
},
|
||||
|
||||
jPlayerInit = function() {
|
||||
(function($) {
|
||||
|
||||
myPlayer = $('#' + media.id);
|
||||
|
||||
if(typeof media.src === 'string') {
|
||||
mediaType = getMediaType(media.src);
|
||||
jpMedia[mediaType] = media.src;
|
||||
jpOptions.supplied = mediaType;
|
||||
jpOptions.solution = SOLUTION;
|
||||
} else if(isObject(media.src)) {
|
||||
jpMedia = isObject(media.src.media) ? media.src.media : {};
|
||||
jpOptions = isObject(media.src.options) ? media.src.options : {};
|
||||
jpOptions.solution = jpOptions.solution || SOLUTION;
|
||||
jpOptions.supplied = jpOptions.supplied || getSupplied(media.src.media);
|
||||
}
|
||||
|
||||
// Allow the swfPath to be set to local server. ie., If the jPlayer Plugin is local and already on the page, then you can also use the local SWF.
|
||||
jpOptions.swfPath = jpOptions.swfPath || JPLAYER_SWFPATH;
|
||||
|
||||
myPlayer.bind($.jPlayer.event.ready, function(event) {
|
||||
if(event.jPlayer.flash.used) {
|
||||
jPlayerFlashEventsPatch();
|
||||
}
|
||||
// Set the media andd load it, so that the Flash solution behaves similar to HTML5 solution.
|
||||
// This also allows the loadstart event to be used to know jPlayer is ready.
|
||||
$(this).jPlayer('setMedia', jpMedia).jPlayer('load');
|
||||
});
|
||||
|
||||
// Do not auto-bubble the reserved events, nor the loadeddata and durationchange event, since the duration must be carefully handled when loadeddata event occurs.
|
||||
// See the duration property code for more details. (Ranting.)
|
||||
|
||||
var reservedEvents = $.jPlayer.reservedEvent + ' loadeddata durationchange',
|
||||
reservedEvent = reservedEvents.split(/\s+/g);
|
||||
|
||||
// Generate event handlers for all the standard HTML5 media events. (Except durationchange)
|
||||
|
||||
var bindEvent = function(name) {
|
||||
myPlayer.bind($.jPlayer.event[name], function(event) {
|
||||
if(DEBUG) console.log('Dispatched event: ' + name + (event && event.jPlayer ? ' (' + event.jPlayer.status.currentTime + 's)' : '')); // Must be after dispatch for some reason on Firefox/Opera
|
||||
media.dispatchEvent(name);
|
||||
});
|
||||
if(DEBUG) console.log('Created event handler for: ' + name);
|
||||
};
|
||||
|
||||
for(var eventName in $.jPlayer.event) {
|
||||
if($.jPlayer.event.hasOwnProperty(eventName)) {
|
||||
var nativeEvent = true;
|
||||
for(var iRes in reservedEvent) {
|
||||
if(reservedEvent.hasOwnProperty(iRes)) {
|
||||
if(reservedEvent[iRes] === eventName) {
|
||||
nativeEvent = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
if(nativeEvent) {
|
||||
bindEvent(eventName);
|
||||
} else {
|
||||
if(DEBUG) console.log('Skipped auto event handler creation for: ' + eventName);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
myPlayer.bind($.jPlayer.event.loadeddata, function(event) {
|
||||
if(DEBUG) console.log('Dispatched event: loadeddata' + (event && event.jPlayer ? ' (' + event.jPlayer.status.currentTime + 's)' : ''));
|
||||
media.dispatchEvent('loadeddata');
|
||||
ready = true;
|
||||
});
|
||||
if(DEBUG) console.log('Created CUSTOM event handler for: loadeddata');
|
||||
|
||||
myPlayer.bind($.jPlayer.event.durationchange, function(event) {
|
||||
duration = event.jPlayer.status.duration;
|
||||
dispatchDurationChange();
|
||||
});
|
||||
if(DEBUG) console.log('Created CUSTOM event handler for: durationchange');
|
||||
|
||||
// The error event is a special case. Plus jPlayer error event assumes it is a broken URL. (It could also be a decoder error... Or aborted or a Network error.)
|
||||
myPlayer.bind($.jPlayer.event.error, function(event) {
|
||||
// Not sure how to handle the error situation. Popcorn does not appear to have the error or error.code property documented here: http://popcornjs.org/popcorn-docs/media-methods/
|
||||
// If any error event happens, then something has gone pear shaped.
|
||||
|
||||
error = event.jPlayer.error; // Saving object pointer, not a copy of the object. Possible garbage collection issue... But the player is dead anyway, so don't care.
|
||||
|
||||
if(error.type === $.jPlayer.error.URL) {
|
||||
error.code = 4; // MEDIA_ERR_SRC_NOT_SUPPORTED since jPlayer makes this assumption. It is the most common error, then the decode error. Never seen either of the other 2 error types occur.
|
||||
} else {
|
||||
error.code = 0; // It was a jPlayer error, not an HTML5 media error.
|
||||
}
|
||||
|
||||
if(DEBUG) console.log('Dispatched event: error');
|
||||
if(DEBUG) console.dir(error);
|
||||
media.dispatchEvent('error');
|
||||
});
|
||||
if(DEBUG) console.log('Created CUSTOM event handler for: error');
|
||||
|
||||
Popcorn.player.defineProperty( media, 'error', {
|
||||
set: function() {
|
||||
// Read-only property
|
||||
return error;
|
||||
},
|
||||
get: function() {
|
||||
return error;
|
||||
}
|
||||
});
|
||||
|
||||
Popcorn.player.defineProperty( media, 'currentTime', {
|
||||
set: function( val ) {
|
||||
if(jPlayerObj.status.paused) {
|
||||
myPlayer.jPlayer('pause', val);
|
||||
} else {
|
||||
myPlayer.jPlayer('play', val);
|
||||
}
|
||||
return val;
|
||||
},
|
||||
get: function() {
|
||||
return jPlayerObj.status.currentTime;
|
||||
}
|
||||
});
|
||||
|
||||
/* The joy of duration and the loadeddata event isReady() handler
|
||||
* The duration is assumed to be a NaN or a valid duration.
|
||||
* jPlayer uses zero instead of a NaN and this screws up the Popcorn track event start/end arrays padding.
|
||||
* This line here:
|
||||
* videoDurationPlus = duration != duration ? Number.MAX_VALUE : duration + 1;
|
||||
* Not sure why it is not simply:
|
||||
* videoDurationPlus = Number.MAX_VALUE; // Who cares if the padding is close to the real duration?
|
||||
* So if you trigger loadeddata before the duration is correct, the track event padding is screwed up. (It pads the start, not the end... Well, duration+1 = 0+1 = 1s)
|
||||
* That line makes the MP3 Flash fallback difficult to setup. The whole MP3 will need to load before the duration is known.
|
||||
* Planning on using a NaN for duration until a >0 value is found... Except with MP3, where seekPercent must be 100% before setting the duration.
|
||||
* Why not just use a NaN during init... And then correct the duration later?
|
||||
*/
|
||||
|
||||
Popcorn.player.defineProperty( media, 'duration', {
|
||||
set: function() {
|
||||
// Read-only property
|
||||
if(ready) {
|
||||
return duration;
|
||||
} else {
|
||||
return NaN;
|
||||
}
|
||||
},
|
||||
get: function() {
|
||||
if(ready) {
|
||||
return duration; // Popcorn has initialized, we can now use duration zero or whatever without fear.
|
||||
} else {
|
||||
return NaN; // Keep the duration a NaN until after loadeddata event has occurred. Otherwise Popcorn track event padding is corrupted.
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Popcorn.player.defineProperty( media, 'muted', {
|
||||
set: function( val ) {
|
||||
myPlayer.jPlayer('mute', val);
|
||||
return jPlayerObj.options.muted;
|
||||
},
|
||||
get: function() {
|
||||
return jPlayerObj.options.muted;
|
||||
}
|
||||
});
|
||||
|
||||
Popcorn.player.defineProperty( media, 'volume', {
|
||||
set: function( val ) {
|
||||
myPlayer.jPlayer('volume', val);
|
||||
return jPlayerObj.options.volume;
|
||||
},
|
||||
get: function() {
|
||||
return jPlayerObj.options.volume;
|
||||
}
|
||||
});
|
||||
|
||||
Popcorn.player.defineProperty( media, 'paused', {
|
||||
set: function() {
|
||||
// Read-only property
|
||||
return jPlayerObj.status.paused;
|
||||
},
|
||||
get: function() {
|
||||
return jPlayerObj.status.paused;
|
||||
}
|
||||
});
|
||||
|
||||
media.play = function() {
|
||||
myPlayer.jPlayer('play');
|
||||
};
|
||||
media.pause = function() {
|
||||
myPlayer.jPlayer('pause');
|
||||
};
|
||||
|
||||
myPlayer.jPlayer(jpOptions); // Instance jPlayer. Note that the options should not have a ready event defined... Kill it by default?
|
||||
jPlayerObj = myPlayer.data('jPlayer');
|
||||
|
||||
}(jQuery));
|
||||
},
|
||||
|
||||
jPlayerCheck = function() {
|
||||
if (!jQuery.jPlayer) {
|
||||
if (!jPlayerDownloading) {
|
||||
jPlayerDownloading = true;
|
||||
Popcorn.getScript(JPLAYER_SCRIPT, function() {
|
||||
jPlayerDownloading = false;
|
||||
jPlayerInit();
|
||||
});
|
||||
} else {
|
||||
setTimeout(jPlayerCheck, 250);
|
||||
}
|
||||
} else {
|
||||
jPlayerInit();
|
||||
}
|
||||
},
|
||||
|
||||
jQueryCheck = function() {
|
||||
if (!window.jQuery) {
|
||||
if (!jQueryDownloading) {
|
||||
jQueryDownloading = true;
|
||||
Popcorn.getScript(JQUERY_SCRIPT, function() {
|
||||
jQueryDownloading = false;
|
||||
jPlayerCheck();
|
||||
});
|
||||
} else {
|
||||
setTimeout(jQueryCheck, 250);
|
||||
}
|
||||
} else {
|
||||
jPlayerCheck();
|
||||
}
|
||||
};
|
||||
|
||||
jQueryCheck();
|
||||
},
|
||||
_teardown: function() {
|
||||
jQuery('#' + this.id).jPlayer('destroy');
|
||||
}
|
||||
});
|
||||
|
||||
}(Popcorn));
|
||||
File diff suppressed because one or more lines are too long
Executable
BIN
Binary file not shown.
+470
@@ -0,0 +1,470 @@
|
||||
/*
|
||||
* Playlist Object for the jPlayer Plugin
|
||||
* http://www.jplayer.org
|
||||
*
|
||||
* Copyright (c) 2009 - 2013 Happyworm Ltd
|
||||
* Licensed under the MIT license.
|
||||
* http://www.opensource.org/licenses/MIT
|
||||
*
|
||||
* Author: Mark J Panaghiston
|
||||
* Version: 2.3.0
|
||||
* Date: 20th April 2013
|
||||
*
|
||||
* Requires:
|
||||
* - jQuery 1.7.0+
|
||||
* - jPlayer 2.3.0+
|
||||
*/
|
||||
|
||||
/* Code verified using http://www.jshint.com/ */
|
||||
/*jshint asi:false, bitwise:false, boss:false, browser:true, curly:true, debug:false, eqeqeq:true, eqnull:false, evil:false, forin:false, immed:false, jquery:true, laxbreak:false, newcap:true, noarg:true, noempty:true, nonew:true, onevar:false, passfail:false, plusplus:false, regexp:false, undef:true, sub:false, strict:false, white:false, smarttabs:true */
|
||||
/*global jPlayerPlaylist:true */
|
||||
|
||||
(function($, undefined) {
|
||||
|
||||
jPlayerPlaylist = function(cssSelector, playlist, options) {
|
||||
var self = this;
|
||||
|
||||
this.current = 0;
|
||||
this.loop = false; // Flag used with the jPlayer repeat event
|
||||
this.shuffled = false;
|
||||
this.removing = false; // Flag is true during remove animation, disabling the remove() method until complete.
|
||||
|
||||
this.cssSelector = $.extend({}, this._cssSelector, cssSelector); // Object: Containing the css selectors for jPlayer and its cssSelectorAncestor
|
||||
this.options = $.extend(true, {
|
||||
keyBindings: {
|
||||
next: {
|
||||
key: 39, // RIGHT
|
||||
fn: function() {
|
||||
self.next();
|
||||
}
|
||||
},
|
||||
previous: {
|
||||
key: 37, // LEFT
|
||||
fn: function() {
|
||||
self.previous();
|
||||
}
|
||||
}
|
||||
}
|
||||
}, this._options, options); // Object: The jPlayer constructor options for this playlist and the playlist options
|
||||
|
||||
this.playlist = []; // Array of Objects: The current playlist displayed (Un-shuffled or Shuffled)
|
||||
this.original = []; // Array of Objects: The original playlist
|
||||
|
||||
this._initPlaylist(playlist); // Copies playlist to this.original. Then mirrors this.original to this.playlist. Creating two arrays, where the element pointers match. (Enables pointer comparison.)
|
||||
|
||||
// Setup the css selectors for the extra interface items used by the playlist.
|
||||
this.cssSelector.title = this.cssSelector.cssSelectorAncestor + " .jp-title"; // Note that the text is written to the decendant li node.
|
||||
this.cssSelector.playlist = this.cssSelector.cssSelectorAncestor + " .jp-playlist";
|
||||
this.cssSelector.next = this.cssSelector.cssSelectorAncestor + " .jp-next";
|
||||
this.cssSelector.previous = this.cssSelector.cssSelectorAncestor + " .jp-previous";
|
||||
this.cssSelector.shuffle = this.cssSelector.cssSelectorAncestor + " .jp-shuffle";
|
||||
this.cssSelector.shuffleOff = this.cssSelector.cssSelectorAncestor + " .jp-shuffle-off";
|
||||
|
||||
// Override the cssSelectorAncestor given in options
|
||||
this.options.cssSelectorAncestor = this.cssSelector.cssSelectorAncestor;
|
||||
|
||||
// Override the default repeat event handler
|
||||
this.options.repeat = function(event) {
|
||||
self.loop = event.jPlayer.options.loop;
|
||||
};
|
||||
|
||||
// Create a ready event handler to initialize the playlist
|
||||
$(this.cssSelector.jPlayer).bind($.jPlayer.event.ready, function() {
|
||||
self._init();
|
||||
});
|
||||
|
||||
// Create an ended event handler to move to the next item
|
||||
$(this.cssSelector.jPlayer).bind($.jPlayer.event.ended, function() {
|
||||
self.next();
|
||||
});
|
||||
|
||||
// Create a play event handler to pause other instances
|
||||
$(this.cssSelector.jPlayer).bind($.jPlayer.event.play, function() {
|
||||
$(this).jPlayer("pauseOthers");
|
||||
});
|
||||
|
||||
// Create a resize event handler to show the title in full screen mode.
|
||||
$(this.cssSelector.jPlayer).bind($.jPlayer.event.resize, function(event) {
|
||||
if(event.jPlayer.options.fullScreen) {
|
||||
$(self.cssSelector.title).show();
|
||||
} else {
|
||||
$(self.cssSelector.title).hide();
|
||||
}
|
||||
});
|
||||
|
||||
// Create click handlers for the extra buttons that do playlist functions.
|
||||
$(this.cssSelector.previous).click(function() {
|
||||
self.previous();
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
|
||||
$(this.cssSelector.next).click(function() {
|
||||
self.next();
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
|
||||
$(this.cssSelector.shuffle).click(function() {
|
||||
self.shuffle(true);
|
||||
return false;
|
||||
});
|
||||
$(this.cssSelector.shuffleOff).click(function() {
|
||||
self.shuffle(false);
|
||||
return false;
|
||||
}).hide();
|
||||
|
||||
// Put the title in its initial display state
|
||||
if(!this.options.fullScreen) {
|
||||
$(this.cssSelector.title).hide();
|
||||
}
|
||||
|
||||
// Remove the empty <li> from the page HTML. Allows page to be valid HTML, while not interfereing with display animations
|
||||
$(this.cssSelector.playlist + " ul").empty();
|
||||
|
||||
// Create .on() handlers for the playlist items along with the free media and remove controls.
|
||||
this._createItemHandlers();
|
||||
|
||||
// Instance jPlayer
|
||||
$(this.cssSelector.jPlayer).jPlayer(this.options);
|
||||
};
|
||||
|
||||
jPlayerPlaylist.prototype = {
|
||||
_cssSelector: { // static object, instanced in constructor
|
||||
jPlayer: "#jquery_jplayer_1",
|
||||
cssSelectorAncestor: "#jp_container_1"
|
||||
},
|
||||
_options: { // static object, instanced in constructor
|
||||
playlistOptions: {
|
||||
autoPlay: false,
|
||||
loopOnPrevious: false,
|
||||
shuffleOnLoop: true,
|
||||
enableRemoveControls: false,
|
||||
displayTime: 'slow',
|
||||
addTime: 'fast',
|
||||
removeTime: 'fast',
|
||||
shuffleTime: 'slow',
|
||||
itemClass: "jp-playlist-item",
|
||||
freeGroupClass: "jp-free-media",
|
||||
freeItemClass: "jp-playlist-item-free",
|
||||
removeItemClass: "jp-playlist-item-remove"
|
||||
}
|
||||
},
|
||||
option: function(option, value) { // For changing playlist options only
|
||||
if(value === undefined) {
|
||||
return this.options.playlistOptions[option];
|
||||
}
|
||||
|
||||
this.options.playlistOptions[option] = value;
|
||||
|
||||
switch(option) {
|
||||
case "enableRemoveControls":
|
||||
this._updateControls();
|
||||
break;
|
||||
case "itemClass":
|
||||
case "freeGroupClass":
|
||||
case "freeItemClass":
|
||||
case "removeItemClass":
|
||||
this._refresh(true); // Instant
|
||||
this._createItemHandlers();
|
||||
break;
|
||||
}
|
||||
return this;
|
||||
},
|
||||
_init: function() {
|
||||
var self = this;
|
||||
this._refresh(function() {
|
||||
if(self.options.playlistOptions.autoPlay) {
|
||||
self.play(self.current);
|
||||
} else {
|
||||
self.select(self.current);
|
||||
}
|
||||
});
|
||||
},
|
||||
_initPlaylist: function(playlist) {
|
||||
this.current = 0;
|
||||
this.shuffled = false;
|
||||
this.removing = false;
|
||||
this.original = $.extend(true, [], playlist); // Copy the Array of Objects
|
||||
this._originalPlaylist();
|
||||
},
|
||||
_originalPlaylist: function() {
|
||||
var self = this;
|
||||
this.playlist = [];
|
||||
// Make both arrays point to the same object elements. Gives us 2 different arrays, each pointing to the same actual object. ie., Not copies of the object.
|
||||
$.each(this.original, function(i) {
|
||||
self.playlist[i] = self.original[i];
|
||||
});
|
||||
},
|
||||
_refresh: function(instant) {
|
||||
/* instant: Can be undefined, true or a function.
|
||||
* undefined -> use animation timings
|
||||
* true -> no animation
|
||||
* function -> use animation timings and excute function at half way point.
|
||||
*/
|
||||
var self = this;
|
||||
|
||||
if(instant && !$.isFunction(instant)) {
|
||||
$(this.cssSelector.playlist + " ul").empty();
|
||||
$.each(this.playlist, function(i) {
|
||||
$(self.cssSelector.playlist + " ul").append(self._createListItem(self.playlist[i]));
|
||||
});
|
||||
this._updateControls();
|
||||
} else {
|
||||
var displayTime = $(this.cssSelector.playlist + " ul").children().length ? this.options.playlistOptions.displayTime : 0;
|
||||
|
||||
$(this.cssSelector.playlist + " ul").slideUp(displayTime, function() {
|
||||
var $this = $(this);
|
||||
$(this).empty();
|
||||
|
||||
$.each(self.playlist, function(i) {
|
||||
$this.append(self._createListItem(self.playlist[i]));
|
||||
});
|
||||
self._updateControls();
|
||||
if($.isFunction(instant)) {
|
||||
instant();
|
||||
}
|
||||
if(self.playlist.length) {
|
||||
$(this).slideDown(self.options.playlistOptions.displayTime);
|
||||
} else {
|
||||
$(this).show();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
_createListItem: function(media) {
|
||||
var self = this;
|
||||
|
||||
// Wrap the <li> contents in a <div>
|
||||
var listItem = "<li><div>";
|
||||
|
||||
// Create remove control
|
||||
listItem += "<a href='javascript:;' class='" + this.options.playlistOptions.removeItemClass + "'>×</a>";
|
||||
|
||||
// Create links to free media
|
||||
if(media.free) {
|
||||
var first = true;
|
||||
listItem += "<span class='" + this.options.playlistOptions.freeGroupClass + "'>(";
|
||||
$.each(media, function(property,value) {
|
||||
if($.jPlayer.prototype.format[property]) { // Check property is a media format.
|
||||
if(first) {
|
||||
first = false;
|
||||
} else {
|
||||
listItem += " | ";
|
||||
}
|
||||
listItem += "<a class='" + self.options.playlistOptions.freeItemClass + "' href='" + value + "' tabindex='1'>" + property + "</a>";
|
||||
}
|
||||
});
|
||||
listItem += ")</span>";
|
||||
}
|
||||
|
||||
// The title is given next in the HTML otherwise the float:right on the free media corrupts in IE6/7
|
||||
listItem += "<a href='javascript:;' class='" + this.options.playlistOptions.itemClass + "' tabindex='1'>" + media.title + (media.artist ? " <span class='jp-artist'>by " + media.artist + "</span>" : "") + "</a>";
|
||||
listItem += "</div></li>";
|
||||
|
||||
return listItem;
|
||||
},
|
||||
_createItemHandlers: function() {
|
||||
var self = this;
|
||||
// Create live handlers for the playlist items
|
||||
$(this.cssSelector.playlist).off("click", "a." + this.options.playlistOptions.itemClass).on("click", "a." + this.options.playlistOptions.itemClass, function() {
|
||||
var index = $(this).parent().parent().index();
|
||||
if(self.current !== index) {
|
||||
self.play(index);
|
||||
} else {
|
||||
$(self.cssSelector.jPlayer).jPlayer("play");
|
||||
}
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
|
||||
// Create live handlers that disable free media links to force access via right click
|
||||
$(this.cssSelector.playlist).off("click", "a." + this.options.playlistOptions.freeItemClass).on("click", "a." + this.options.playlistOptions.freeItemClass, function() {
|
||||
$(this).parent().parent().find("." + self.options.playlistOptions.itemClass).click();
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
|
||||
// Create live handlers for the remove controls
|
||||
$(this.cssSelector.playlist).off("click", "a." + this.options.playlistOptions.removeItemClass).on("click", "a." + this.options.playlistOptions.removeItemClass, function() {
|
||||
var index = $(this).parent().parent().index();
|
||||
self.remove(index);
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
},
|
||||
_updateControls: function() {
|
||||
if(this.options.playlistOptions.enableRemoveControls) {
|
||||
$(this.cssSelector.playlist + " ." + this.options.playlistOptions.removeItemClass).show();
|
||||
} else {
|
||||
$(this.cssSelector.playlist + " ." + this.options.playlistOptions.removeItemClass).hide();
|
||||
}
|
||||
if(this.shuffled) {
|
||||
$(this.cssSelector.shuffleOff).show();
|
||||
$(this.cssSelector.shuffle).hide();
|
||||
} else {
|
||||
$(this.cssSelector.shuffleOff).hide();
|
||||
$(this.cssSelector.shuffle).show();
|
||||
}
|
||||
},
|
||||
_highlight: function(index) {
|
||||
if(this.playlist.length && index !== undefined) {
|
||||
$(this.cssSelector.playlist + " .jp-playlist-current").removeClass("jp-playlist-current");
|
||||
$(this.cssSelector.playlist + " li:nth-child(" + (index + 1) + ")").addClass("jp-playlist-current").find(".jp-playlist-item").addClass("jp-playlist-current");
|
||||
$(this.cssSelector.title + " li").html(this.playlist[index].title + (this.playlist[index].artist ? " <span class='jp-artist'>by " + this.playlist[index].artist + "</span>" : ""));
|
||||
}
|
||||
},
|
||||
setPlaylist: function(playlist) {
|
||||
this._initPlaylist(playlist);
|
||||
this._init();
|
||||
},
|
||||
add: function(media, playNow) {
|
||||
$(this.cssSelector.playlist + " ul").append(this._createListItem(media)).find("li:last-child").hide().slideDown(this.options.playlistOptions.addTime);
|
||||
this._updateControls();
|
||||
this.original.push(media);
|
||||
this.playlist.push(media); // Both array elements share the same object pointer. Comforms with _initPlaylist(p) system.
|
||||
|
||||
if(playNow) {
|
||||
this.play(this.playlist.length - 1);
|
||||
} else {
|
||||
if(this.original.length === 1) {
|
||||
this.select(0);
|
||||
}
|
||||
}
|
||||
},
|
||||
remove: function(index) {
|
||||
var self = this;
|
||||
|
||||
if(index === undefined) {
|
||||
this._initPlaylist([]);
|
||||
this._refresh(function() {
|
||||
$(self.cssSelector.jPlayer).jPlayer("clearMedia");
|
||||
});
|
||||
return true;
|
||||
} else {
|
||||
|
||||
if(this.removing) {
|
||||
return false;
|
||||
} else {
|
||||
index = (index < 0) ? self.original.length + index : index; // Negative index relates to end of array.
|
||||
if(0 <= index && index < this.playlist.length) {
|
||||
this.removing = true;
|
||||
|
||||
$(this.cssSelector.playlist + " li:nth-child(" + (index + 1) + ")").slideUp(this.options.playlistOptions.removeTime, function() {
|
||||
$(this).remove();
|
||||
|
||||
if(self.shuffled) {
|
||||
var item = self.playlist[index];
|
||||
$.each(self.original, function(i) {
|
||||
if(self.original[i] === item) {
|
||||
self.original.splice(i, 1);
|
||||
return false; // Exit $.each
|
||||
}
|
||||
});
|
||||
self.playlist.splice(index, 1);
|
||||
} else {
|
||||
self.original.splice(index, 1);
|
||||
self.playlist.splice(index, 1);
|
||||
}
|
||||
|
||||
if(self.original.length) {
|
||||
if(index === self.current) {
|
||||
self.current = (index < self.original.length) ? self.current : self.original.length - 1; // To cope when last element being selected when it was removed
|
||||
self.select(self.current);
|
||||
} else if(index < self.current) {
|
||||
self.current--;
|
||||
}
|
||||
} else {
|
||||
$(self.cssSelector.jPlayer).jPlayer("clearMedia");
|
||||
self.current = 0;
|
||||
self.shuffled = false;
|
||||
self._updateControls();
|
||||
}
|
||||
|
||||
self.removing = false;
|
||||
});
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
},
|
||||
select: function(index) {
|
||||
index = (index < 0) ? this.original.length + index : index; // Negative index relates to end of array.
|
||||
if(0 <= index && index < this.playlist.length) {
|
||||
this.current = index;
|
||||
this._highlight(index);
|
||||
$(this.cssSelector.jPlayer).jPlayer("setMedia", this.playlist[this.current]);
|
||||
} else {
|
||||
this.current = 0;
|
||||
}
|
||||
},
|
||||
play: function(index) {
|
||||
index = (index < 0) ? this.original.length + index : index; // Negative index relates to end of array.
|
||||
if(0 <= index && index < this.playlist.length) {
|
||||
if(this.playlist.length) {
|
||||
this.select(index);
|
||||
$(this.cssSelector.jPlayer).jPlayer("play");
|
||||
}
|
||||
} else if(index === undefined) {
|
||||
$(this.cssSelector.jPlayer).jPlayer("play");
|
||||
}
|
||||
},
|
||||
pause: function() {
|
||||
$(this.cssSelector.jPlayer).jPlayer("pause");
|
||||
},
|
||||
next: function() {
|
||||
var index = (this.current + 1 < this.playlist.length) ? this.current + 1 : 0;
|
||||
|
||||
if(this.loop) {
|
||||
// See if we need to shuffle before looping to start, and only shuffle if more than 1 item.
|
||||
if(index === 0 && this.shuffled && this.options.playlistOptions.shuffleOnLoop && this.playlist.length > 1) {
|
||||
this.shuffle(true, true); // playNow
|
||||
} else {
|
||||
this.play(index);
|
||||
}
|
||||
} else {
|
||||
// The index will be zero if it just looped round
|
||||
if(index > 0) {
|
||||
this.play(index);
|
||||
}
|
||||
}
|
||||
},
|
||||
previous: function() {
|
||||
var index = (this.current - 1 >= 0) ? this.current - 1 : this.playlist.length - 1;
|
||||
|
||||
if(this.loop && this.options.playlistOptions.loopOnPrevious || index < this.playlist.length - 1) {
|
||||
this.play(index);
|
||||
}
|
||||
},
|
||||
shuffle: function(shuffled, playNow) {
|
||||
var self = this;
|
||||
|
||||
if(shuffled === undefined) {
|
||||
shuffled = !this.shuffled;
|
||||
}
|
||||
|
||||
if(shuffled || shuffled !== this.shuffled) {
|
||||
|
||||
$(this.cssSelector.playlist + " ul").slideUp(this.options.playlistOptions.shuffleTime, function() {
|
||||
self.shuffled = shuffled;
|
||||
if(shuffled) {
|
||||
self.playlist.sort(function() {
|
||||
return 0.5 - Math.random();
|
||||
});
|
||||
} else {
|
||||
self._originalPlaylist();
|
||||
}
|
||||
self._refresh(true); // Instant
|
||||
|
||||
if(playNow || !$(self.cssSelector.jPlayer).data("jPlayer").status.paused) {
|
||||
self.play(0);
|
||||
} else {
|
||||
self.select(0);
|
||||
}
|
||||
|
||||
$(this).slideDown(self.options.playlistOptions.shuffleTime);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
})(jQuery);
|
||||
File diff suppressed because one or more lines are too long
+337
@@ -0,0 +1,337 @@
|
||||
/*
|
||||
* jPlayerInspector Plugin for jPlayer Plugin for jQuery JavaScript Library
|
||||
* http://www.jplayer.org
|
||||
*
|
||||
* Copyright (c) 2009 - 2013 Happyworm Ltd
|
||||
* Licensed under the MIT license.
|
||||
* http://www.opensource.org/licenses/MIT
|
||||
*
|
||||
* Author: Mark J Panaghiston
|
||||
* Version: 1.0.4
|
||||
* Date: 29th January 2013
|
||||
*
|
||||
* For use with jPlayer Version: 2.2.19+
|
||||
*
|
||||
* Note: Declare inspector instances after jPlayer instances. ie., Otherwise the jPlayer instance is nonsense.
|
||||
*/
|
||||
|
||||
(function($, undefined) {
|
||||
$.jPlayerInspector = {};
|
||||
$.jPlayerInspector.i = 0;
|
||||
$.jPlayerInspector.defaults = {
|
||||
jPlayer: undefined, // The jQuery selector of the jPlayer instance to inspect.
|
||||
idPrefix: "jplayer_inspector_",
|
||||
visible: false
|
||||
};
|
||||
|
||||
var methods = {
|
||||
init: function(options) {
|
||||
var self = this;
|
||||
var $this = $(this);
|
||||
|
||||
var config = $.extend({}, $.jPlayerInspector.defaults, options);
|
||||
$(this).data("jPlayerInspector", config);
|
||||
|
||||
config.id = $(this).attr("id");
|
||||
config.jPlayerId = config.jPlayer.attr("id");
|
||||
|
||||
config.windowId = config.idPrefix + "window_" + $.jPlayerInspector.i;
|
||||
config.statusId = config.idPrefix + "status_" + $.jPlayerInspector.i;
|
||||
config.configId = config.idPrefix + "config_" + $.jPlayerInspector.i;
|
||||
config.toggleId = config.idPrefix + "toggle_" + $.jPlayerInspector.i;
|
||||
config.eventResetId = config.idPrefix + "event_reset_" + $.jPlayerInspector.i;
|
||||
config.updateId = config.idPrefix + "update_" + $.jPlayerInspector.i;
|
||||
config.eventWindowId = config.idPrefix + "event_window_" + $.jPlayerInspector.i;
|
||||
|
||||
config.eventId = {};
|
||||
config.eventJq = {};
|
||||
config.eventTimeout = {};
|
||||
config.eventOccurrence = {};
|
||||
|
||||
$.each($.jPlayer.event, function(eventName,eventType) {
|
||||
config.eventId[eventType] = config.idPrefix + "event_" + eventName + "_" + $.jPlayerInspector.i;
|
||||
config.eventOccurrence[eventType] = 0;
|
||||
});
|
||||
|
||||
var structure =
|
||||
'<p><a href="#" id="' + config.toggleId + '">' + (config.visible ? "Hide" : "Show") + '</a> jPlayer Inspector</p>'
|
||||
+ '<div id="' + config.windowId + '">'
|
||||
+ '<div id="' + config.statusId + '"></div>'
|
||||
+ '<div id="' + config.eventWindowId + '" style="padding:5px 5px 0 5px;background-color:#eee;border:1px dotted #000;">'
|
||||
+ '<p style="margin:0 0 10px 0;"><strong>jPlayer events that have occurred over the past 1 second:</strong>'
|
||||
+ '<br />(Backgrounds: <span style="padding:0 5px;background-color:#eee;border:1px dotted #000;">Never occurred</span> <span style="padding:0 5px;background-color:#fff;border:1px dotted #000;">Occurred before</span> <span style="padding:0 5px;background-color:#9f9;border:1px dotted #000;">Occurred</span> <span style="padding:0 5px;background-color:#ff9;border:1px dotted #000;">Multiple occurrences</span> <a href="#" id="' + config.eventResetId + '">reset</a>)</p>';
|
||||
|
||||
// MJP: Would use the next 3 lines for ease, but the events are just slapped on the page.
|
||||
// $.each($.jPlayer.event, function(eventName,eventType) {
|
||||
// structure += '<div id="' + config.eventId[eventType] + '" style="float:left;">' + eventName + '</div>';
|
||||
// });
|
||||
|
||||
var eventStyle = "float:left;margin:0 5px 5px 0;padding:0 5px;border:1px dotted #000;";
|
||||
// MJP: Doing it longhand so order and layout easier to control.
|
||||
structure +=
|
||||
'<div id="' + config.eventId[$.jPlayer.event.ready] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.flashreset] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.resize] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.repeat] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.click] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.error] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.warning] + '" style="' + eventStyle + '"></div>'
|
||||
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.loadstart] + '" style="clear:left;' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.progress] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.timeupdate] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.volumechange] + '" style="' + eventStyle + '"></div>'
|
||||
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.play] + '" style="clear:left;' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.pause] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.waiting] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.playing] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.seeking] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.seeked] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.ended] + '" style="' + eventStyle + '"></div>'
|
||||
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.loadeddata] + '" style="clear:left;' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.loadedmetadata] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.canplay] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.canplaythrough] + '" style="' + eventStyle + '"></div>'
|
||||
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.suspend] + '" style="clear:left;' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.abort] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.emptied] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.stalled] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.ratechange] + '" style="' + eventStyle + '"></div>'
|
||||
+ '<div id="' + config.eventId[$.jPlayer.event.durationchange] + '" style="' + eventStyle + '"></div>'
|
||||
|
||||
+ '<div style="clear:both"></div>';
|
||||
|
||||
// MJP: Would like a check here in case we missed an event.
|
||||
|
||||
// MJP: Check fails, since it is not on the page yet.
|
||||
/* $.each($.jPlayer.event, function(eventName,eventType) {
|
||||
if($("#" + config.eventId[eventType])[0] === undefined) {
|
||||
structure += '<div id="' + config.eventId[eventType] + '" style="clear:left;' + eventStyle + '">' + eventName + '</div>';
|
||||
}
|
||||
});
|
||||
*/
|
||||
structure +=
|
||||
'</div>'
|
||||
+ '<p><a href="#" id="' + config.updateId + '">Update</a> jPlayer Inspector</p>'
|
||||
+ '<div id="' + config.configId + '"></div>'
|
||||
+ '</div>';
|
||||
$(this).html(structure);
|
||||
|
||||
config.windowJq = $("#" + config.windowId);
|
||||
config.statusJq = $("#" + config.statusId);
|
||||
config.configJq = $("#" + config.configId);
|
||||
config.toggleJq = $("#" + config.toggleId);
|
||||
config.eventResetJq = $("#" + config.eventResetId);
|
||||
config.updateJq = $("#" + config.updateId);
|
||||
|
||||
$.each($.jPlayer.event, function(eventName,eventType) {
|
||||
config.eventJq[eventType] = $("#" + config.eventId[eventType]);
|
||||
config.eventJq[eventType].text(eventName + " (" + config.eventOccurrence[eventType] + ")"); // Sets the text to the event name and (0);
|
||||
|
||||
config.jPlayer.bind(eventType + ".jPlayerInspector", function(e) {
|
||||
config.eventOccurrence[e.type]++;
|
||||
if(config.eventOccurrence[e.type] > 1) {
|
||||
config.eventJq[e.type].css("background-color","#ff9");
|
||||
} else {
|
||||
config.eventJq[e.type].css("background-color","#9f9");
|
||||
}
|
||||
config.eventJq[e.type].text(eventName + " (" + config.eventOccurrence[e.type] + ")");
|
||||
// The timer to handle the color
|
||||
clearTimeout(config.eventTimeout[e.type]);
|
||||
config.eventTimeout[e.type] = setTimeout(function() {
|
||||
config.eventJq[e.type].css("background-color","#fff");
|
||||
}, 1000);
|
||||
// The timer to handle the occurences.
|
||||
setTimeout(function() {
|
||||
config.eventOccurrence[e.type]--;
|
||||
config.eventJq[e.type].text(eventName + " (" + config.eventOccurrence[e.type] + ")");
|
||||
}, 1000);
|
||||
if(config.visible) { // Update the status, if inspector open.
|
||||
$this.jPlayerInspector("updateStatus");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
config.jPlayer.bind($.jPlayer.event.ready + ".jPlayerInspector", function(e) {
|
||||
$this.jPlayerInspector("updateConfig");
|
||||
});
|
||||
|
||||
config.toggleJq.click(function() {
|
||||
if(config.visible) {
|
||||
$(this).text("Show");
|
||||
config.windowJq.hide();
|
||||
config.statusJq.empty();
|
||||
config.configJq.empty();
|
||||
} else {
|
||||
$(this).text("Hide");
|
||||
config.windowJq.show();
|
||||
config.updateJq.click();
|
||||
}
|
||||
config.visible = !config.visible;
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
|
||||
config.eventResetJq.click(function() {
|
||||
$.each($.jPlayer.event, function(eventName,eventType) {
|
||||
config.eventJq[eventType].css("background-color","#eee");
|
||||
});
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
|
||||
config.updateJq.click(function() {
|
||||
$this.jPlayerInspector("updateStatus");
|
||||
$this.jPlayerInspector("updateConfig");
|
||||
return false;
|
||||
});
|
||||
|
||||
if(!config.visible) {
|
||||
config.windowJq.hide();
|
||||
} else {
|
||||
// config.updateJq.click();
|
||||
}
|
||||
|
||||
$.jPlayerInspector.i++;
|
||||
|
||||
return this;
|
||||
},
|
||||
destroy: function() {
|
||||
$(this).data("jPlayerInspector") && $(this).data("jPlayerInspector").jPlayer.unbind(".jPlayerInspector");
|
||||
$(this).empty();
|
||||
},
|
||||
updateConfig: function() { // This displays information about jPlayer's configuration in inspector
|
||||
|
||||
var jPlayerInfo = "<p>This jPlayer instance is running in your browser where:<br />"
|
||||
|
||||
for(i = 0; i < $(this).data("jPlayerInspector").jPlayer.data("jPlayer").solutions.length; i++) {
|
||||
var solution = $(this).data("jPlayerInspector").jPlayer.data("jPlayer").solutions[i];
|
||||
jPlayerInfo += " jPlayer's <strong>" + solution + "</strong> solution is";
|
||||
if($(this).data("jPlayerInspector").jPlayer.data("jPlayer")[solution].used) {
|
||||
jPlayerInfo += " being <strong>used</strong> and will support:<strong>";
|
||||
for(format in $(this).data("jPlayerInspector").jPlayer.data("jPlayer")[solution].support) {
|
||||
if($(this).data("jPlayerInspector").jPlayer.data("jPlayer")[solution].support[format]) {
|
||||
jPlayerInfo += " " + format;
|
||||
}
|
||||
}
|
||||
jPlayerInfo += "</strong><br />";
|
||||
} else {
|
||||
jPlayerInfo += " <strong>not required</strong><br />";
|
||||
}
|
||||
}
|
||||
jPlayerInfo += "</p>";
|
||||
|
||||
if($(this).data("jPlayerInspector").jPlayer.data("jPlayer").html.active) {
|
||||
if($(this).data("jPlayerInspector").jPlayer.data("jPlayer").flash.active) {
|
||||
jPlayerInfo += "<strong>Problem with jPlayer since both HTML5 and Flash are active.</strong>";
|
||||
} else {
|
||||
jPlayerInfo += "The <strong>HTML5 is active</strong>.";
|
||||
}
|
||||
} else {
|
||||
if($(this).data("jPlayerInspector").jPlayer.data("jPlayer").flash.active) {
|
||||
jPlayerInfo += "The <strong>Flash is active</strong>.";
|
||||
} else {
|
||||
jPlayerInfo += "No solution is currently active. jPlayer needs a setMedia().";
|
||||
}
|
||||
}
|
||||
jPlayerInfo += "</p>";
|
||||
|
||||
var formatType = $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.formatType;
|
||||
jPlayerInfo += "<p><code>status.formatType = '" + formatType + "'</code><br />";
|
||||
if(formatType) {
|
||||
jPlayerInfo += "<code>Browser canPlay('" + $.jPlayer.prototype.format[formatType].codec + "')</code>";
|
||||
} else {
|
||||
jPlayerInfo += "</p>";
|
||||
}
|
||||
|
||||
jPlayerInfo += "<p><code>status.src = '" + $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.src + "'</code></p>";
|
||||
|
||||
jPlayerInfo += "<p><code>status.media = {<br />";
|
||||
for(prop in $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.media) {
|
||||
jPlayerInfo += " " + prop + ": " + $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.media[prop] + "<br />"; // Some are strings
|
||||
}
|
||||
jPlayerInfo += "};</code></p>"
|
||||
|
||||
jPlayerInfo += "<p>";
|
||||
jPlayerInfo += "<code>status.videoWidth = '" + $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.videoWidth + "'</code>";
|
||||
jPlayerInfo += " | <code>status.videoHeight = '" + $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.videoHeight + "'</code>";
|
||||
jPlayerInfo += "<br /><code>status.width = '" + $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.width + "'</code>";
|
||||
jPlayerInfo += " | <code>status.height = '" + $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.height + "'</code>";
|
||||
jPlayerInfo += "</p>";
|
||||
|
||||
+ "<p>Raw browser test for HTML5 support. Should equal a function if HTML5 is available.<br />";
|
||||
if($(this).data("jPlayerInspector").jPlayer.data("jPlayer").html.audio.available) {
|
||||
jPlayerInfo += "<code>htmlElement.audio.canPlayType = " + (typeof $(this).data("jPlayerInspector").jPlayer.data("jPlayer").htmlElement.audio.canPlayType) +"</code><br />"
|
||||
}
|
||||
if($(this).data("jPlayerInspector").jPlayer.data("jPlayer").html.video.available) {
|
||||
jPlayerInfo += "<code>htmlElement.video.canPlayType = " + (typeof $(this).data("jPlayerInspector").jPlayer.data("jPlayer").htmlElement.video.canPlayType) +"</code>";
|
||||
}
|
||||
jPlayerInfo += "</p>";
|
||||
|
||||
jPlayerInfo += "<p>This instance is using the constructor options:<br />"
|
||||
+ "<code>$('#" + $(this).data("jPlayerInspector").jPlayer.data("jPlayer").internal.self.id + "').jPlayer({<br />"
|
||||
|
||||
+ " swfPath: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "swfPath") + "',<br />"
|
||||
|
||||
+ " solution: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "solution") + "',<br />"
|
||||
|
||||
+ " supplied: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "supplied") + "',<br />"
|
||||
|
||||
+ " preload: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "preload") + "',<br />"
|
||||
|
||||
+ " volume: " + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "volume") + ",<br />"
|
||||
|
||||
+ " muted: " + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "muted") + ",<br />"
|
||||
|
||||
+ " backgroundColor: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "backgroundColor") + "',<br />"
|
||||
|
||||
+ " cssSelectorAncestor: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "cssSelectorAncestor") + "',<br />"
|
||||
|
||||
+ " cssSelector: {";
|
||||
|
||||
var cssSelector = $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "cssSelector");
|
||||
for(prop in cssSelector) {
|
||||
|
||||
// jPlayerInfo += "<br /> " + prop + ": '" + cssSelector[prop] + "'," // This works too of course, but want to use option method for deep keys.
|
||||
jPlayerInfo += "<br /> " + prop + ": '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "cssSelector." + prop) + "',"
|
||||
}
|
||||
|
||||
jPlayerInfo = jPlayerInfo.slice(0, -1); // Because the sloppy comma was bugging me.
|
||||
|
||||
jPlayerInfo += "<br /> },<br />"
|
||||
|
||||
+ " errorAlerts: " + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "errorAlerts") + ",<br />"
|
||||
|
||||
+ " warningAlerts: " + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "warningAlerts") + "<br />"
|
||||
|
||||
+ "});</code></p>";
|
||||
$(this).data("jPlayerInspector").configJq.html(jPlayerInfo);
|
||||
return this;
|
||||
},
|
||||
updateStatus: function() { // This displays information about jPlayer's status in the inspector
|
||||
$(this).data("jPlayerInspector").statusJq.html(
|
||||
"<p>jPlayer is " +
|
||||
($(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.paused ? "paused" : "playing") +
|
||||
" at time: " + Math.floor($(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.currentTime*10)/10 + "s." +
|
||||
" (d: " + Math.floor($(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.duration*10)/10 + "s" +
|
||||
", sp: " + Math.floor($(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.seekPercent) + "%" +
|
||||
", cpr: " + Math.floor($(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.currentPercentRelative) + "%" +
|
||||
", cpa: " + Math.floor($(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.currentPercentAbsolute) + "%)</p>"
|
||||
);
|
||||
return this;
|
||||
}
|
||||
};
|
||||
$.fn.jPlayerInspector = function( method ) {
|
||||
// Method calling logic
|
||||
if ( methods[method] ) {
|
||||
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
|
||||
} else if ( typeof method === 'object' || ! method ) {
|
||||
return methods.init.apply( this, arguments );
|
||||
} else {
|
||||
$.error( 'Method ' + method + ' does not exist on jQuery.jPlayerInspector' );
|
||||
}
|
||||
};
|
||||
})(jQuery);
|
||||
File diff suppressed because one or more lines are too long
Executable
+3013
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
+583
@@ -0,0 +1,583 @@
|
||||
/*
|
||||
* jPlayer Player Plugin for Popcorn JavaScript Library
|
||||
* http://www.jplayer.org
|
||||
*
|
||||
* Copyright (c) 2013 Happyworm Ltd
|
||||
* Licensed under the MIT license.
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
* Author: Mark J Panaghiston
|
||||
* Version: 1.1.2
|
||||
* Date: 7th November 2013
|
||||
*
|
||||
* For Popcorn Version: 1.3
|
||||
* For jPlayer Version: 2.5.0
|
||||
* Requires: jQuery 1.7+
|
||||
* Note: jQuery dependancy cannot be removed since jPlayer 2 is a jQuery plugin. Use of jQuery will be kept to a minimum.
|
||||
*/
|
||||
|
||||
/* Code verified using http://www.jshint.com/ */
|
||||
/*jshint asi:false, bitwise:false, boss:false, browser:true, curly:false, debug:false, eqeqeq:true, eqnull:false, evil:false, forin:false, immed:false, jquery:true, laxbreak:false, newcap:true, noarg:true, noempty:true, nonew:true, onevar:false, passfail:false, plusplus:false, regexp:false, undef:true, sub:false, strict:false, white:false, smarttabs:true */
|
||||
/*global Popcorn:false, console:false */
|
||||
|
||||
(function(Popcorn) {
|
||||
|
||||
var JQUERY_SCRIPT = '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', // Used if jQuery not already present.
|
||||
JPLAYER_SCRIPT = '//www.jplayer.org/2.5.0/js/jquery.jplayer.min.js', // Used if jPlayer not already present.
|
||||
JPLAYER_SWFPATH = '//www.jplayer.org/2.5.0/js/Jplayer.swf', // Used if not specified in jPlayer options via SRC Object.
|
||||
SOLUTION = 'html,flash', // The default solution option.
|
||||
DEBUG = false, // Decided to leave the debugging option and console output in for the time being. Overhead is trivial.
|
||||
jQueryDownloading = false, // Flag to stop multiple instances from each pulling in jQuery, thus corrupting it.
|
||||
jPlayerDownloading = false, // Flag to stop multiple instances from each pulling in jPlayer, thus corrupting it.
|
||||
format = { // Duplicate of jPlayer 2.5.0 object, to avoid always requiring jQuery and jPlayer to be loaded before performing the _canPlayType() test.
|
||||
mp3: {
|
||||
codec: 'audio/mpeg; codecs="mp3"',
|
||||
flashCanPlay: true,
|
||||
media: 'audio'
|
||||
},
|
||||
m4a: { // AAC / MP4
|
||||
codec: 'audio/mp4; codecs="mp4a.40.2"',
|
||||
flashCanPlay: true,
|
||||
media: 'audio'
|
||||
},
|
||||
m3u8a: { // AAC / MP4 / Apple HLS
|
||||
codec: 'application/vnd.apple.mpegurl; codecs="mp4a.40.2"',
|
||||
flashCanPlay: false,
|
||||
media: 'audio'
|
||||
},
|
||||
m3ua: { // M3U
|
||||
codec: 'audio/mpegurl',
|
||||
flashCanPlay: false,
|
||||
media: 'audio'
|
||||
},
|
||||
oga: { // OGG
|
||||
codec: 'audio/ogg; codecs="vorbis, opus"',
|
||||
flashCanPlay: false,
|
||||
media: 'audio'
|
||||
},
|
||||
flac: { // FLAC
|
||||
codec: 'audio/x-flac',
|
||||
flashCanPlay: false,
|
||||
media: 'audio'
|
||||
},
|
||||
wav: { // PCM
|
||||
codec: 'audio/wav; codecs="1"',
|
||||
flashCanPlay: false,
|
||||
media: 'audio'
|
||||
},
|
||||
webma: { // WEBM
|
||||
codec: 'audio/webm; codecs="vorbis"',
|
||||
flashCanPlay: false,
|
||||
media: 'audio'
|
||||
},
|
||||
fla: { // FLV / F4A
|
||||
codec: 'audio/x-flv',
|
||||
flashCanPlay: true,
|
||||
media: 'audio'
|
||||
},
|
||||
rtmpa: { // RTMP AUDIO
|
||||
codec: 'audio/rtmp; codecs="rtmp"',
|
||||
flashCanPlay: true,
|
||||
media: 'audio'
|
||||
},
|
||||
m4v: { // H.264 / MP4
|
||||
codec: 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"',
|
||||
flashCanPlay: true,
|
||||
media: 'video'
|
||||
},
|
||||
m3u8v: { // H.264 / AAC / MP4 / Apple HLS
|
||||
codec: 'application/vnd.apple.mpegurl; codecs="avc1.42E01E, mp4a.40.2"',
|
||||
flashCanPlay: false,
|
||||
media: 'video'
|
||||
},
|
||||
m3uv: { // M3U
|
||||
codec: 'audio/mpegurl',
|
||||
flashCanPlay: false,
|
||||
media: 'video'
|
||||
},
|
||||
ogv: { // OGG
|
||||
codec: 'video/ogg; codecs="theora, vorbis"',
|
||||
flashCanPlay: false,
|
||||
media: 'video'
|
||||
},
|
||||
webmv: { // WEBM
|
||||
codec: 'video/webm; codecs="vorbis, vp8"',
|
||||
flashCanPlay: false,
|
||||
media: 'video'
|
||||
},
|
||||
flv: { // FLV / F4V
|
||||
codec: 'video/x-flv',
|
||||
flashCanPlay: true,
|
||||
media: 'video'
|
||||
},
|
||||
rtmpv: { // RTMP VIDEO
|
||||
codec: 'video/rtmp; codecs="rtmp"',
|
||||
flashCanPlay: true,
|
||||
media: 'video'
|
||||
}
|
||||
},
|
||||
isObject = function(val) { // Basic check for Object
|
||||
if(val && typeof val === 'object' && val.hasOwnProperty) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
getMediaType = function(url) { // Function to gleam the media type from the URL
|
||||
var mediaType = false;
|
||||
if(/\.mp3$/i.test(url)) {
|
||||
mediaType = 'mp3';
|
||||
} else if(/\.mp4$/i.test(url) || /\.m4v$/i.test(url)) {
|
||||
mediaType = 'm4v';
|
||||
} else if(/\.m4a$/i.test(url)) {
|
||||
mediaType = 'm4a';
|
||||
} else if(/\.ogg$/i.test(url) || /\.oga$/i.test(url)) {
|
||||
mediaType = 'oga';
|
||||
} else if(/\.ogv$/i.test(url)) {
|
||||
mediaType = 'ogv';
|
||||
} else if(/\.webm$/i.test(url)) {
|
||||
mediaType = 'webmv';
|
||||
}
|
||||
return mediaType;
|
||||
},
|
||||
getSupplied = function(url) { // Function to generate a supplied option from an src object. ie., When supplied not specified.
|
||||
var supplied = '',
|
||||
separator = '';
|
||||
if(isObject(url)) {
|
||||
// Generate supplied option from object's properties. Non-format properties would be ignored by jPlayer. Order is unpredictable.
|
||||
for(var prop in url) {
|
||||
if(url.hasOwnProperty(prop)) {
|
||||
supplied += separator + prop;
|
||||
separator = ',';
|
||||
}
|
||||
}
|
||||
}
|
||||
if(DEBUG) console.log('getSupplied(): Generated: supplied = "' + supplied + '"');
|
||||
return supplied;
|
||||
};
|
||||
|
||||
Popcorn.player( 'jplayer', {
|
||||
_canPlayType: function( containerType, url ) {
|
||||
// url : Either a String or an Object structured similar a jPlayer media object. ie., As used by setMedia in jPlayer.
|
||||
// The url object may also contain a solution and supplied property.
|
||||
|
||||
// Define the src object structure here!
|
||||
|
||||
var cType = containerType.toLowerCase(),
|
||||
srcObj = {
|
||||
media:{},
|
||||
options:{}
|
||||
},
|
||||
rVal = false, // Only a boolean false means it is not supported.
|
||||
mediaType;
|
||||
|
||||
if(cType !== 'video' && cType !== 'audio') {
|
||||
|
||||
if(typeof url === 'string') {
|
||||
// Check it starts with http, so the URL is absolute... Well, it is not a perfect check.
|
||||
if(/^http.*/i.test(url)) {
|
||||
mediaType = getMediaType(url);
|
||||
if(mediaType) {
|
||||
srcObj.media[mediaType] = url;
|
||||
srcObj.options.solution = SOLUTION;
|
||||
srcObj.options.supplied = mediaType;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
srcObj = url; // Assume the url is an src object.
|
||||
}
|
||||
|
||||
// Check for Object and appropriate minimum data structure.
|
||||
if(isObject(srcObj) && isObject(srcObj.media)) {
|
||||
|
||||
if(!isObject(srcObj.options)) {
|
||||
srcObj.options = {};
|
||||
}
|
||||
|
||||
if(!srcObj.options.solution) {
|
||||
srcObj.options.solution = SOLUTION;
|
||||
}
|
||||
|
||||
if(!srcObj.options.supplied) {
|
||||
srcObj.options.supplied = getSupplied(srcObj.media);
|
||||
}
|
||||
|
||||
// Figure out how jPlayer will play it.
|
||||
// This may not work properly when both audio and video is supplied. ie., A media player. But it should return truethy and jPlayer can figure it out.
|
||||
|
||||
var solution = srcObj.options.solution.toLowerCase().split(","), // Create the solution array, with prority based on the order of the solution string.
|
||||
supplied = srcObj.options.supplied.toLowerCase().split(","); // Create the supplied formats array, with prority based on the order of the supplied formats string.
|
||||
|
||||
for(var sol = 0; sol < solution.length; sol++) {
|
||||
|
||||
var solutionType = solution[sol].replace(/^\s+|\s+$/g, ""), //trim
|
||||
checkingHtml = solutionType === 'html',
|
||||
checkingFlash = solutionType === 'flash',
|
||||
mediaElem;
|
||||
|
||||
for(var fmt = 0; fmt < supplied.length; fmt++) {
|
||||
mediaType = supplied[fmt].replace(/^\s+|\s+$/g, ""); //trim
|
||||
if(format[mediaType]) { // Check format is valid.
|
||||
|
||||
// Create an HTML5 media element for the type of media.
|
||||
if(!mediaElem && checkingHtml) {
|
||||
mediaElem = document.createElement(format[mediaType].media);
|
||||
}
|
||||
// See if the HTML5 media element can play the MIME / Codec type.
|
||||
// Flash also returns the object if the format is playable, so it is truethy, but that html property is false.
|
||||
// This assumes Flash is available, but that should be dealt with by jPlayer if that happens.
|
||||
var htmlCanPlay = !!(mediaElem && mediaElem.canPlayType && mediaElem.canPlayType(format[mediaType].codec)),
|
||||
htmlWillPlay = htmlCanPlay && checkingHtml,
|
||||
flashWillPlay = format[mediaType].flashCanPlay && checkingFlash;
|
||||
// The first one found will match what jPlayer uses.
|
||||
if(htmlWillPlay || flashWillPlay) {
|
||||
rVal = {
|
||||
html: htmlWillPlay,
|
||||
type: mediaType
|
||||
};
|
||||
sol = solution.length; // Exit solution loop
|
||||
fmt = supplied.length; // Exit supplied loop
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return rVal;
|
||||
},
|
||||
// _setup: function( options ) { // Warning: options is deprecated.
|
||||
_setup: function() {
|
||||
var media = this,
|
||||
myPlayer, // The jQuery selector of the jPlayer element. Usually a <div>
|
||||
jPlayerObj, // The jPlayer data instance. For performance and DRY code.
|
||||
mediaType = 'unknown',
|
||||
jpMedia = {},
|
||||
jpOptions = {},
|
||||
ready = false, // Used during init to override the annoying duration dependance in the track event padding during Popcorn's isReady(). ie., We is ready after loadeddata and duration can then be set real value at leisure.
|
||||
duration = 0, // For the durationchange event with both HTML5 and Flash solutions. Used with 'ready' to keep control during the Popcorn isReady() via loadeddata event. (Duration=0 is bad.)
|
||||
durationchangeId = null, // A timeout ID used with delayed durationchange event. (Because of the duration=NaN fudge to avoid Popcorn track event corruption.)
|
||||
canplaythrough = false,
|
||||
error = null, // The MediaError object.
|
||||
|
||||
dispatchDurationChange = function() {
|
||||
if(ready) {
|
||||
if(DEBUG) console.log('Dispatched event : durationchange : ' + duration);
|
||||
media.dispatchEvent('durationchange');
|
||||
} else {
|
||||
if(DEBUG) console.log('DELAYED EVENT (!ready) : durationchange : ' + duration);
|
||||
clearTimeout(durationchangeId); // Stop multiple triggers causing multiple timeouts running in parallel.
|
||||
durationchangeId = setTimeout(dispatchDurationChange, 250);
|
||||
}
|
||||
},
|
||||
|
||||
jPlayerFlashEventsPatch = function() {
|
||||
|
||||
/* Events already supported by jPlayer Flash:
|
||||
* loadstart
|
||||
* loadedmetadata (M4A, M4V)
|
||||
* progress
|
||||
* play
|
||||
* pause
|
||||
* seeking
|
||||
* seeked
|
||||
* timeupdate
|
||||
* ended
|
||||
* volumechange
|
||||
* error <- See the custom handler in jPlayerInit()
|
||||
*/
|
||||
|
||||
/* Events patched:
|
||||
* loadeddata
|
||||
* durationchange
|
||||
* canplaythrough
|
||||
* playing
|
||||
*/
|
||||
|
||||
/* Events NOT patched:
|
||||
* suspend
|
||||
* abort
|
||||
* emptied
|
||||
* stalled
|
||||
* loadedmetadata (MP3)
|
||||
* waiting
|
||||
* canplay
|
||||
* ratechange
|
||||
*/
|
||||
|
||||
// Triggering patched events through the jPlayer Object so the events are homogeneous. ie., The contain the event.jPlayer data structure.
|
||||
|
||||
var checkDuration = function(event) {
|
||||
if(event.jPlayer.status.duration !== duration) {
|
||||
duration = event.jPlayer.status.duration;
|
||||
dispatchDurationChange();
|
||||
}
|
||||
},
|
||||
|
||||
checkCanPlayThrough = function(event) {
|
||||
if(!canplaythrough && event.jPlayer.status.seekPercent === 100) {
|
||||
canplaythrough = true;
|
||||
setTimeout(function() {
|
||||
if(DEBUG) console.log('Trigger : canplaythrough');
|
||||
jPlayerObj._trigger($.jPlayer.event.canplaythrough);
|
||||
}, 0);
|
||||
}
|
||||
};
|
||||
|
||||
myPlayer.bind($.jPlayer.event.loadstart, function() {
|
||||
setTimeout(function() {
|
||||
if(DEBUG) console.log('Trigger : loadeddata');
|
||||
jPlayerObj._trigger($.jPlayer.event.loadeddata);
|
||||
}, 0);
|
||||
})
|
||||
.bind($.jPlayer.event.progress, function(event) {
|
||||
checkDuration(event);
|
||||
checkCanPlayThrough(event);
|
||||
})
|
||||
.bind($.jPlayer.event.timeupdate, function(event) {
|
||||
checkDuration(event);
|
||||
checkCanPlayThrough(event);
|
||||
})
|
||||
.bind($.jPlayer.event.play, function() {
|
||||
setTimeout(function() {
|
||||
if(DEBUG) console.log('Trigger : playing');
|
||||
jPlayerObj._trigger($.jPlayer.event.playing);
|
||||
}, 0);
|
||||
});
|
||||
|
||||
if(DEBUG) console.log('Created CUSTOM event handlers for FLASH');
|
||||
},
|
||||
|
||||
jPlayerInit = function() {
|
||||
(function($) {
|
||||
|
||||
myPlayer = $('#' + media.id);
|
||||
|
||||
if(typeof media.src === 'string') {
|
||||
mediaType = getMediaType(media.src);
|
||||
jpMedia[mediaType] = media.src;
|
||||
jpOptions.supplied = mediaType;
|
||||
jpOptions.solution = SOLUTION;
|
||||
} else if(isObject(media.src)) {
|
||||
jpMedia = isObject(media.src.media) ? media.src.media : {};
|
||||
jpOptions = isObject(media.src.options) ? media.src.options : {};
|
||||
jpOptions.solution = jpOptions.solution || SOLUTION;
|
||||
jpOptions.supplied = jpOptions.supplied || getSupplied(media.src.media);
|
||||
}
|
||||
|
||||
// Allow the swfPath to be set to local server. ie., If the jPlayer Plugin is local and already on the page, then you can also use the local SWF.
|
||||
jpOptions.swfPath = jpOptions.swfPath || JPLAYER_SWFPATH;
|
||||
|
||||
myPlayer.bind($.jPlayer.event.ready, function(event) {
|
||||
if(event.jPlayer.flash.used) {
|
||||
jPlayerFlashEventsPatch();
|
||||
}
|
||||
// Set the media andd load it, so that the Flash solution behaves similar to HTML5 solution.
|
||||
// This also allows the loadstart event to be used to know jPlayer is ready.
|
||||
$(this).jPlayer('setMedia', jpMedia).jPlayer('load');
|
||||
});
|
||||
|
||||
// Do not auto-bubble the reserved events, nor the loadeddata and durationchange event, since the duration must be carefully handled when loadeddata event occurs.
|
||||
// See the duration property code for more details. (Ranting.)
|
||||
|
||||
var reservedEvents = $.jPlayer.reservedEvent + ' loadeddata durationchange',
|
||||
reservedEvent = reservedEvents.split(/\s+/g);
|
||||
|
||||
// Generate event handlers for all the standard HTML5 media events. (Except durationchange)
|
||||
|
||||
var bindEvent = function(name) {
|
||||
myPlayer.bind($.jPlayer.event[name], function(event) {
|
||||
if(DEBUG) console.log('Dispatched event: ' + name + (event && event.jPlayer ? ' (' + event.jPlayer.status.currentTime + 's)' : '')); // Must be after dispatch for some reason on Firefox/Opera
|
||||
media.dispatchEvent(name);
|
||||
});
|
||||
if(DEBUG) console.log('Created event handler for: ' + name);
|
||||
};
|
||||
|
||||
for(var eventName in $.jPlayer.event) {
|
||||
if($.jPlayer.event.hasOwnProperty(eventName)) {
|
||||
var nativeEvent = true;
|
||||
for(var iRes in reservedEvent) {
|
||||
if(reservedEvent.hasOwnProperty(iRes)) {
|
||||
if(reservedEvent[iRes] === eventName) {
|
||||
nativeEvent = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
if(nativeEvent) {
|
||||
bindEvent(eventName);
|
||||
} else {
|
||||
if(DEBUG) console.log('Skipped auto event handler creation for: ' + eventName);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
myPlayer.bind($.jPlayer.event.loadeddata, function(event) {
|
||||
if(DEBUG) console.log('Dispatched event: loadeddata' + (event && event.jPlayer ? ' (' + event.jPlayer.status.currentTime + 's)' : ''));
|
||||
media.dispatchEvent('loadeddata');
|
||||
ready = true;
|
||||
});
|
||||
if(DEBUG) console.log('Created CUSTOM event handler for: loadeddata');
|
||||
|
||||
myPlayer.bind($.jPlayer.event.durationchange, function(event) {
|
||||
duration = event.jPlayer.status.duration;
|
||||
dispatchDurationChange();
|
||||
});
|
||||
if(DEBUG) console.log('Created CUSTOM event handler for: durationchange');
|
||||
|
||||
// The error event is a special case. Plus jPlayer error event assumes it is a broken URL. (It could also be a decoder error... Or aborted or a Network error.)
|
||||
myPlayer.bind($.jPlayer.event.error, function(event) {
|
||||
// Not sure how to handle the error situation. Popcorn does not appear to have the error or error.code property documented here: http://popcornjs.org/popcorn-docs/media-methods/
|
||||
// If any error event happens, then something has gone pear shaped.
|
||||
|
||||
error = event.jPlayer.error; // Saving object pointer, not a copy of the object. Possible garbage collection issue... But the player is dead anyway, so don't care.
|
||||
|
||||
if(error.type === $.jPlayer.error.URL) {
|
||||
error.code = 4; // MEDIA_ERR_SRC_NOT_SUPPORTED since jPlayer makes this assumption. It is the most common error, then the decode error. Never seen either of the other 2 error types occur.
|
||||
} else {
|
||||
error.code = 0; // It was a jPlayer error, not an HTML5 media error.
|
||||
}
|
||||
|
||||
if(DEBUG) console.log('Dispatched event: error');
|
||||
if(DEBUG) console.dir(error);
|
||||
media.dispatchEvent('error');
|
||||
});
|
||||
if(DEBUG) console.log('Created CUSTOM event handler for: error');
|
||||
|
||||
Popcorn.player.defineProperty( media, 'error', {
|
||||
set: function() {
|
||||
// Read-only property
|
||||
return error;
|
||||
},
|
||||
get: function() {
|
||||
return error;
|
||||
}
|
||||
});
|
||||
|
||||
Popcorn.player.defineProperty( media, 'currentTime', {
|
||||
set: function( val ) {
|
||||
if(jPlayerObj.status.paused) {
|
||||
myPlayer.jPlayer('pause', val);
|
||||
} else {
|
||||
myPlayer.jPlayer('play', val);
|
||||
}
|
||||
return val;
|
||||
},
|
||||
get: function() {
|
||||
return jPlayerObj.status.currentTime;
|
||||
}
|
||||
});
|
||||
|
||||
/* The joy of duration and the loadeddata event isReady() handler
|
||||
* The duration is assumed to be a NaN or a valid duration.
|
||||
* jPlayer uses zero instead of a NaN and this screws up the Popcorn track event start/end arrays padding.
|
||||
* This line here:
|
||||
* videoDurationPlus = duration != duration ? Number.MAX_VALUE : duration + 1;
|
||||
* Not sure why it is not simply:
|
||||
* videoDurationPlus = Number.MAX_VALUE; // Who cares if the padding is close to the real duration?
|
||||
* So if you trigger loadeddata before the duration is correct, the track event padding is screwed up. (It pads the start, not the end... Well, duration+1 = 0+1 = 1s)
|
||||
* That line makes the MP3 Flash fallback difficult to setup. The whole MP3 will need to load before the duration is known.
|
||||
* Planning on using a NaN for duration until a >0 value is found... Except with MP3, where seekPercent must be 100% before setting the duration.
|
||||
* Why not just use a NaN during init... And then correct the duration later?
|
||||
*/
|
||||
|
||||
Popcorn.player.defineProperty( media, 'duration', {
|
||||
set: function() {
|
||||
// Read-only property
|
||||
if(ready) {
|
||||
return duration;
|
||||
} else {
|
||||
return NaN;
|
||||
}
|
||||
},
|
||||
get: function() {
|
||||
if(ready) {
|
||||
return duration; // Popcorn has initialized, we can now use duration zero or whatever without fear.
|
||||
} else {
|
||||
return NaN; // Keep the duration a NaN until after loadeddata event has occurred. Otherwise Popcorn track event padding is corrupted.
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Popcorn.player.defineProperty( media, 'muted', {
|
||||
set: function( val ) {
|
||||
myPlayer.jPlayer('mute', val);
|
||||
return jPlayerObj.options.muted;
|
||||
},
|
||||
get: function() {
|
||||
return jPlayerObj.options.muted;
|
||||
}
|
||||
});
|
||||
|
||||
Popcorn.player.defineProperty( media, 'volume', {
|
||||
set: function( val ) {
|
||||
myPlayer.jPlayer('volume', val);
|
||||
return jPlayerObj.options.volume;
|
||||
},
|
||||
get: function() {
|
||||
return jPlayerObj.options.volume;
|
||||
}
|
||||
});
|
||||
|
||||
Popcorn.player.defineProperty( media, 'paused', {
|
||||
set: function() {
|
||||
// Read-only property
|
||||
return jPlayerObj.status.paused;
|
||||
},
|
||||
get: function() {
|
||||
return jPlayerObj.status.paused;
|
||||
}
|
||||
});
|
||||
|
||||
media.play = function() {
|
||||
myPlayer.jPlayer('play');
|
||||
};
|
||||
media.pause = function() {
|
||||
myPlayer.jPlayer('pause');
|
||||
};
|
||||
|
||||
myPlayer.jPlayer(jpOptions); // Instance jPlayer. Note that the options should not have a ready event defined... Kill it by default?
|
||||
jPlayerObj = myPlayer.data('jPlayer');
|
||||
|
||||
}(jQuery));
|
||||
},
|
||||
|
||||
jPlayerCheck = function() {
|
||||
if (!jQuery.jPlayer) {
|
||||
if (!jPlayerDownloading) {
|
||||
jPlayerDownloading = true;
|
||||
Popcorn.getScript(JPLAYER_SCRIPT, function() {
|
||||
jPlayerDownloading = false;
|
||||
jPlayerInit();
|
||||
});
|
||||
} else {
|
||||
setTimeout(jPlayerCheck, 250);
|
||||
}
|
||||
} else {
|
||||
jPlayerInit();
|
||||
}
|
||||
},
|
||||
|
||||
jQueryCheck = function() {
|
||||
if (!window.jQuery) {
|
||||
if (!jQueryDownloading) {
|
||||
jQueryDownloading = true;
|
||||
Popcorn.getScript(JQUERY_SCRIPT, function() {
|
||||
jQueryDownloading = false;
|
||||
jPlayerCheck();
|
||||
});
|
||||
} else {
|
||||
setTimeout(jQueryCheck, 250);
|
||||
}
|
||||
} else {
|
||||
jPlayerCheck();
|
||||
}
|
||||
};
|
||||
|
||||
jQueryCheck();
|
||||
},
|
||||
_teardown: function() {
|
||||
jQuery('#' + this.id).jPlayer('destroy');
|
||||
}
|
||||
});
|
||||
|
||||
}(Popcorn));
|
||||
File diff suppressed because one or more lines are too long
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "jplayer",
|
||||
"filename": "jquery.jplayer.min.js",
|
||||
"version": "2.5.0",
|
||||
"version": "2.5.3",
|
||||
"description": "The jQuery HTML5 Audio / Video Library",
|
||||
"homepage": "http://www.jplayer.org/",
|
||||
"keywords": [
|
||||
|
||||
Executable
+221
@@ -0,0 +1,221 @@
|
||||
/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas. Dual MIT/BSD license */
|
||||
/*! NOTE: If you're already including a window.matchMedia polyfill via Modernizr or otherwise, you don't need this part */
|
||||
(function(w) {
|
||||
"use strict";
|
||||
w.matchMedia = w.matchMedia || function(doc, undefined) {
|
||||
var bool, docElem = doc.documentElement, refNode = docElem.firstElementChild || docElem.firstChild, fakeBody = doc.createElement("body"), div = doc.createElement("div");
|
||||
div.id = "mq-test-1";
|
||||
div.style.cssText = "position:absolute;top:-100em";
|
||||
fakeBody.style.background = "none";
|
||||
fakeBody.appendChild(div);
|
||||
return function(q) {
|
||||
div.innerHTML = '­<style media="' + q + '"> #mq-test-1 { width: 42px; }</style>';
|
||||
docElem.insertBefore(fakeBody, refNode);
|
||||
bool = div.offsetWidth === 42;
|
||||
docElem.removeChild(fakeBody);
|
||||
return {
|
||||
matches: bool,
|
||||
media: q
|
||||
};
|
||||
};
|
||||
}(w.document);
|
||||
})(this);
|
||||
|
||||
/*! Respond.js v1.4.0: min/max-width media query polyfill. (c) Scott Jehl. MIT Lic. j.mp/respondjs */
|
||||
(function(w) {
|
||||
"use strict";
|
||||
var respond = {};
|
||||
w.respond = respond;
|
||||
respond.update = function() {};
|
||||
var requestQueue = [], xmlHttp = function() {
|
||||
var xmlhttpmethod = false;
|
||||
try {
|
||||
xmlhttpmethod = new w.XMLHttpRequest();
|
||||
} catch (e) {
|
||||
xmlhttpmethod = new w.ActiveXObject("Microsoft.XMLHTTP");
|
||||
}
|
||||
return function() {
|
||||
return xmlhttpmethod;
|
||||
};
|
||||
}(), ajax = function(url, callback) {
|
||||
var req = xmlHttp();
|
||||
if (!req) {
|
||||
return;
|
||||
}
|
||||
req.open("GET", url, true);
|
||||
req.onreadystatechange = function() {
|
||||
if (req.readyState !== 4 || req.status !== 200 && req.status !== 304) {
|
||||
return;
|
||||
}
|
||||
callback(req.responseText);
|
||||
};
|
||||
if (req.readyState === 4) {
|
||||
return;
|
||||
}
|
||||
req.send(null);
|
||||
};
|
||||
respond.ajax = ajax;
|
||||
respond.queue = requestQueue;
|
||||
respond.regex = {
|
||||
media: /@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,
|
||||
keyframes: /@.*keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]+\}/gi,
|
||||
urls: /(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,
|
||||
findStyles: /@media *([^\{]+)\{([\S\s]+?)$/,
|
||||
only: /(only\s+)?([a-zA-Z]+)\s?/,
|
||||
minw: /\([\s]*min\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/,
|
||||
maxw: /\([\s]*max\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/
|
||||
};
|
||||
respond.mediaQueriesSupported = w.matchMedia && w.matchMedia("only all") !== null && w.matchMedia("only all").matches;
|
||||
if (respond.mediaQueriesSupported) {
|
||||
return;
|
||||
}
|
||||
var doc = w.document, docElem = doc.documentElement, mediastyles = [], rules = [], appendedEls = [], parsedSheets = {}, resizeThrottle = 30, head = doc.getElementsByTagName("head")[0] || docElem, base = doc.getElementsByTagName("base")[0], links = head.getElementsByTagName("link"), lastCall, resizeDefer, eminpx, getEmValue = function() {
|
||||
var ret, div = doc.createElement("div"), body = doc.body, originalHTMLFontSize = docElem.style.fontSize, originalBodyFontSize = body && body.style.fontSize, fakeUsed = false;
|
||||
div.style.cssText = "position:absolute;font-size:1em;width:1em";
|
||||
if (!body) {
|
||||
body = fakeUsed = doc.createElement("body");
|
||||
body.style.background = "none";
|
||||
}
|
||||
docElem.style.fontSize = "100%";
|
||||
body.style.fontSize = "100%";
|
||||
body.appendChild(div);
|
||||
docElem.insertBefore(body, docElem.firstChild);
|
||||
ret = div.offsetWidth;
|
||||
if (fakeUsed) {
|
||||
docElem.removeChild(body);
|
||||
} else {
|
||||
body.removeChild(div);
|
||||
}
|
||||
docElem.style.fontSize = originalHTMLFontSize;
|
||||
if (originalBodyFontSize) {
|
||||
body.style.fontSize = originalBodyFontSize;
|
||||
}
|
||||
ret = eminpx = parseFloat(ret);
|
||||
return ret;
|
||||
}, applyMedia = function(fromResize) {
|
||||
var name = "clientWidth", docElemProp = docElem[name], currWidth = doc.compatMode === "CSS1Compat" && docElemProp || doc.body[name] || docElemProp, styleBlocks = {}, lastLink = links[links.length - 1], now = new Date().getTime();
|
||||
if (fromResize && lastCall && now - lastCall < resizeThrottle) {
|
||||
w.clearTimeout(resizeDefer);
|
||||
resizeDefer = w.setTimeout(applyMedia, resizeThrottle);
|
||||
return;
|
||||
} else {
|
||||
lastCall = now;
|
||||
}
|
||||
for (var i in mediastyles) {
|
||||
if (mediastyles.hasOwnProperty(i)) {
|
||||
var thisstyle = mediastyles[i], min = thisstyle.minw, max = thisstyle.maxw, minnull = min === null, maxnull = max === null, em = "em";
|
||||
if (!!min) {
|
||||
min = parseFloat(min) * (min.indexOf(em) > -1 ? eminpx || getEmValue() : 1);
|
||||
}
|
||||
if (!!max) {
|
||||
max = parseFloat(max) * (max.indexOf(em) > -1 ? eminpx || getEmValue() : 1);
|
||||
}
|
||||
if (!thisstyle.hasquery || (!minnull || !maxnull) && (minnull || currWidth >= min) && (maxnull || currWidth <= max)) {
|
||||
if (!styleBlocks[thisstyle.media]) {
|
||||
styleBlocks[thisstyle.media] = [];
|
||||
}
|
||||
styleBlocks[thisstyle.media].push(rules[thisstyle.rules]);
|
||||
}
|
||||
}
|
||||
}
|
||||
for (var j in appendedEls) {
|
||||
if (appendedEls.hasOwnProperty(j)) {
|
||||
if (appendedEls[j] && appendedEls[j].parentNode === head) {
|
||||
head.removeChild(appendedEls[j]);
|
||||
}
|
||||
}
|
||||
}
|
||||
for (var k in styleBlocks) {
|
||||
if (styleBlocks.hasOwnProperty(k)) {
|
||||
var ss = doc.createElement("style"), css = styleBlocks[k].join("\n");
|
||||
ss.type = "text/css";
|
||||
ss.media = k;
|
||||
head.insertBefore(ss, lastLink.nextSibling);
|
||||
if (ss.styleSheet) {
|
||||
ss.styleSheet.cssText = css;
|
||||
} else {
|
||||
ss.appendChild(doc.createTextNode(css));
|
||||
}
|
||||
appendedEls.push(ss);
|
||||
}
|
||||
}
|
||||
}, translate = function(styles, href, media) {
|
||||
var qs = styles.replace(respond.regex.keyframes, "").match(respond.regex.media), ql = qs && qs.length || 0;
|
||||
href = href.substring(0, href.lastIndexOf("/"));
|
||||
var repUrls = function(css) {
|
||||
return css.replace(respond.regex.urls, "$1" + href + "$2$3");
|
||||
}, useMedia = !ql && media;
|
||||
if (href.length) {
|
||||
href += "/";
|
||||
}
|
||||
if (useMedia) {
|
||||
ql = 1;
|
||||
}
|
||||
for (var i = 0; i < ql; i++) {
|
||||
var fullq, thisq, eachq, eql;
|
||||
if (useMedia) {
|
||||
fullq = media;
|
||||
rules.push(repUrls(styles));
|
||||
} else {
|
||||
fullq = qs[i].match(respond.regex.findStyles) && RegExp.$1;
|
||||
rules.push(RegExp.$2 && repUrls(RegExp.$2));
|
||||
}
|
||||
eachq = fullq.split(",");
|
||||
eql = eachq.length;
|
||||
for (var j = 0; j < eql; j++) {
|
||||
thisq = eachq[j];
|
||||
mediastyles.push({
|
||||
media: thisq.split("(")[0].match(respond.regex.only) && RegExp.$2 || "all",
|
||||
rules: rules.length - 1,
|
||||
hasquery: thisq.indexOf("(") > -1,
|
||||
minw: thisq.match(respond.regex.minw) && parseFloat(RegExp.$1) + (RegExp.$2 || ""),
|
||||
maxw: thisq.match(respond.regex.maxw) && parseFloat(RegExp.$1) + (RegExp.$2 || "")
|
||||
});
|
||||
}
|
||||
}
|
||||
applyMedia();
|
||||
}, makeRequests = function() {
|
||||
if (requestQueue.length) {
|
||||
var thisRequest = requestQueue.shift();
|
||||
ajax(thisRequest.href, function(styles) {
|
||||
translate(styles, thisRequest.href, thisRequest.media);
|
||||
parsedSheets[thisRequest.href] = true;
|
||||
w.setTimeout(function() {
|
||||
makeRequests();
|
||||
}, 0);
|
||||
});
|
||||
}
|
||||
}, ripCSS = function() {
|
||||
for (var i = 0; i < links.length; i++) {
|
||||
var sheet = links[i], href = sheet.href, media = sheet.media, isCSS = sheet.rel && sheet.rel.toLowerCase() === "stylesheet";
|
||||
if (!!href && isCSS && !parsedSheets[href]) {
|
||||
if (sheet.styleSheet && sheet.styleSheet.rawCssText) {
|
||||
translate(sheet.styleSheet.rawCssText, href, media);
|
||||
parsedSheets[href] = true;
|
||||
} else {
|
||||
if (!/^([a-zA-Z:]*\/\/)/.test(href) && !base || href.replace(RegExp.$1, "").split("/")[0] === w.location.host) {
|
||||
if (href.substring(0, 2) === "//") {
|
||||
href = w.location.protocol + href;
|
||||
}
|
||||
requestQueue.push({
|
||||
href: href,
|
||||
media: media
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
makeRequests();
|
||||
};
|
||||
ripCSS();
|
||||
respond.update = ripCSS;
|
||||
respond.getEmValue = getEmValue;
|
||||
function callMedia() {
|
||||
applyMedia(true);
|
||||
}
|
||||
if (w.addEventListener) {
|
||||
w.addEventListener("resize", callMedia, false);
|
||||
} else if (w.attachEvent) {
|
||||
w.attachEvent("onresize", callMedia);
|
||||
}
|
||||
})(this);
|
||||
+5
@@ -0,0 +1,5 @@
|
||||
/*! Respond.js v1.4.0: min/max-width media query polyfill * Copyright 2013 Scott Jehl
|
||||
* Licensed under https://github.com/scottjehl/Respond/blob/master/LICENSE-MIT
|
||||
* */
|
||||
|
||||
!function(a){"use strict";a.matchMedia=a.matchMedia||function(a){var b,c=a.documentElement,d=c.firstElementChild||c.firstChild,e=a.createElement("body"),f=a.createElement("div");return f.id="mq-test-1",f.style.cssText="position:absolute;top:-100em",e.style.background="none",e.appendChild(f),function(a){return f.innerHTML='­<style media="'+a+'"> #mq-test-1 { width: 42px; }</style>',c.insertBefore(e,d),b=42===f.offsetWidth,c.removeChild(e),{matches:b,media:a}}}(a.document)}(this),function(a){"use strict";function b(){u(!0)}var c={};a.respond=c,c.update=function(){};var d=[],e=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}(),f=function(a,b){var c=e();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))};if(c.ajax=f,c.queue=d,c.regex={media:/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,keyframes:/@.*keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]+\}/gi,urls:/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,findStyles:/@media *([^\{]+)\{([\S\s]+?)$/,only:/(only\s+)?([a-zA-Z]+)\s?/,minw:/\([\s]*min\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/,maxw:/\([\s]*max\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/},c.mediaQueriesSupported=a.matchMedia&&null!==a.matchMedia("only all")&&a.matchMedia("only all").matches,!c.mediaQueriesSupported){var g,h,i,j=a.document,k=j.documentElement,l=[],m=[],n=[],o={},p=30,q=j.getElementsByTagName("head")[0]||k,r=j.getElementsByTagName("base")[0],s=q.getElementsByTagName("link"),t=function(){var a,b=j.createElement("div"),c=j.body,d=k.style.fontSize,e=c&&c.style.fontSize,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",c||(c=f=j.createElement("body"),c.style.background="none"),k.style.fontSize="100%",c.style.fontSize="100%",c.appendChild(b),k.insertBefore(c,k.firstChild),a=b.offsetWidth,f?k.removeChild(c):c.removeChild(b),k.style.fontSize=d,e&&(c.style.fontSize=e),a=i=parseFloat(a)},u=function(b){var c="clientWidth",d=k[c],e="CSS1Compat"===j.compatMode&&d||j.body[c]||d,f={},o=s[s.length-1],r=(new Date).getTime();if(b&&g&&p>r-g)return a.clearTimeout(h),h=a.setTimeout(u,p),void 0;g=r;for(var v in l)if(l.hasOwnProperty(v)){var w=l[v],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)>-1?i||t():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?i||t():1)),w.hasquery&&(z&&A||!(z||e>=x)||!(A||y>=e))||(f[w.media]||(f[w.media]=[]),f[w.media].push(m[w.rules]))}for(var C in n)n.hasOwnProperty(C)&&n[C]&&n[C].parentNode===q&&q.removeChild(n[C]);for(var D in f)if(f.hasOwnProperty(D)){var E=j.createElement("style"),F=f[D].join("\n");E.type="text/css",E.media=D,q.insertBefore(E,o.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(j.createTextNode(F)),n.push(E)}},v=function(a,b,d){var e=a.replace(c.regex.keyframes,"").match(c.regex.media),f=e&&e.length||0;b=b.substring(0,b.lastIndexOf("/"));var g=function(a){return a.replace(c.regex.urls,"$1"+b+"$2$3")},h=!f&&d;b.length&&(b+="/"),h&&(f=1);for(var i=0;f>i;i++){var j,k,n,o;h?(j=d,m.push(g(a))):(j=e[i].match(c.regex.findStyles)&&RegExp.$1,m.push(RegExp.$2&&g(RegExp.$2))),n=j.split(","),o=n.length;for(var p=0;o>p;p++)k=n[p],l.push({media:k.split("(")[0].match(c.regex.only)&&RegExp.$2||"all",rules:m.length-1,hasquery:k.indexOf("(")>-1,minw:k.match(c.regex.minw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:k.match(c.regex.maxw)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}u()},w=function(){if(d.length){var b=d.shift();f(b.href,function(c){v(c,b.href,b.media),o[b.href]=!0,a.setTimeout(function(){w()},0)})}},x=function(){for(var b=0;b<s.length;b++){var c=s[b],e=c.href,f=c.media,g=c.rel&&"stylesheet"===c.rel.toLowerCase();e&&g&&!o[e]&&(c.styleSheet&&c.styleSheet.rawCssText?(v(c.styleSheet.rawCssText,e,f),o[e]=!0):(!/^([a-zA-Z:]*\/\/)/.test(e)&&!r||e.replace(RegExp.$1,"").split("/")[0]===a.location.host)&&("//"===e.substring(0,2)&&(e=a.location.protocol+e),d.push({href:e,media:f})))}w()};x(),c.update=x,c.getEmValue=t,a.addEventListener?a.addEventListener("resize",b,!1):a.attachEvent&&a.attachEvent("onresize",b)}}(this);
|
||||
Executable
+223
@@ -0,0 +1,223 @@
|
||||
/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas. Dual MIT/BSD license */
|
||||
/*! NOTE: If you're already including a window.matchMedia polyfill via Modernizr or otherwise, you don't need this part */
|
||||
(function(w) {
|
||||
"use strict";
|
||||
w.matchMedia = w.matchMedia || function(doc, undefined) {
|
||||
var bool, docElem = doc.documentElement, refNode = docElem.firstElementChild || docElem.firstChild, fakeBody = doc.createElement("body"), div = doc.createElement("div");
|
||||
div.id = "mq-test-1";
|
||||
div.style.cssText = "position:absolute;top:-100em";
|
||||
fakeBody.style.background = "none";
|
||||
fakeBody.appendChild(div);
|
||||
return function(q) {
|
||||
div.innerHTML = '­<style media="' + q + '"> #mq-test-1 { width: 42px; }</style>';
|
||||
docElem.insertBefore(fakeBody, refNode);
|
||||
bool = div.offsetWidth === 42;
|
||||
docElem.removeChild(fakeBody);
|
||||
return {
|
||||
matches: bool,
|
||||
media: q
|
||||
};
|
||||
};
|
||||
}(w.document);
|
||||
})(this);
|
||||
|
||||
/*! Respond.js v1.4.0: min/max-width media query polyfill. (c) Scott Jehl. MIT Lic. j.mp/respondjs */
|
||||
(function(w) {
|
||||
"use strict";
|
||||
var respond = {};
|
||||
w.respond = respond;
|
||||
respond.update = function() {};
|
||||
var requestQueue = [], xmlHttp = function() {
|
||||
var xmlhttpmethod = false;
|
||||
try {
|
||||
xmlhttpmethod = new w.XMLHttpRequest();
|
||||
} catch (e) {
|
||||
xmlhttpmethod = new w.ActiveXObject("Microsoft.XMLHTTP");
|
||||
}
|
||||
return function() {
|
||||
return xmlhttpmethod;
|
||||
};
|
||||
}(), ajax = function(url, callback) {
|
||||
var req = xmlHttp();
|
||||
if (!req) {
|
||||
return;
|
||||
}
|
||||
req.open("GET", url, true);
|
||||
req.onreadystatechange = function() {
|
||||
if (req.readyState !== 4 || req.status !== 200 && req.status !== 304) {
|
||||
return;
|
||||
}
|
||||
callback(req.responseText);
|
||||
};
|
||||
if (req.readyState === 4) {
|
||||
return;
|
||||
}
|
||||
req.send(null);
|
||||
};
|
||||
respond.ajax = ajax;
|
||||
respond.queue = requestQueue;
|
||||
respond.regex = {
|
||||
media: /@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,
|
||||
keyframes: /@.*keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]+\}/gi,
|
||||
urls: /(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,
|
||||
findStyles: /@media *([^\{]+)\{([\S\s]+?)$/,
|
||||
only: /(only\s+)?([a-zA-Z]+)\s?/,
|
||||
minw: /\([\s]*min\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/,
|
||||
maxw: /\([\s]*max\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/
|
||||
};
|
||||
respond.mediaQueriesSupported = w.matchMedia && w.matchMedia("only all") !== null && w.matchMedia("only all").matches;
|
||||
if (respond.mediaQueriesSupported) {
|
||||
return;
|
||||
}
|
||||
var doc = w.document, docElem = doc.documentElement, mediastyles = [], rules = [], appendedEls = [], parsedSheets = {}, resizeThrottle = 30, head = doc.getElementsByTagName("head")[0] || docElem, base = doc.getElementsByTagName("base")[0], links = head.getElementsByTagName("link"), lastCall, resizeDefer, eminpx, getEmValue = function() {
|
||||
var ret, div = doc.createElement("div"), body = doc.body, originalHTMLFontSize = docElem.style.fontSize, originalBodyFontSize = body && body.style.fontSize, fakeUsed = false;
|
||||
div.style.cssText = "position:absolute;font-size:1em;width:1em";
|
||||
if (!body) {
|
||||
body = fakeUsed = doc.createElement("body");
|
||||
body.style.background = "none";
|
||||
}
|
||||
docElem.style.fontSize = "100%";
|
||||
body.style.fontSize = "100%";
|
||||
body.appendChild(div);
|
||||
if (fakeUsed) {
|
||||
docElem.insertBefore(body, docElem.firstChild);
|
||||
}
|
||||
ret = div.offsetWidth;
|
||||
if (fakeUsed) {
|
||||
docElem.removeChild(body);
|
||||
} else {
|
||||
body.removeChild(div);
|
||||
}
|
||||
docElem.style.fontSize = originalHTMLFontSize;
|
||||
if (originalBodyFontSize) {
|
||||
body.style.fontSize = originalBodyFontSize;
|
||||
}
|
||||
ret = eminpx = parseFloat(ret);
|
||||
return ret;
|
||||
}, applyMedia = function(fromResize) {
|
||||
var name = "clientWidth", docElemProp = docElem[name], currWidth = doc.compatMode === "CSS1Compat" && docElemProp || doc.body[name] || docElemProp, styleBlocks = {}, lastLink = links[links.length - 1], now = new Date().getTime();
|
||||
if (fromResize && lastCall && now - lastCall < resizeThrottle) {
|
||||
w.clearTimeout(resizeDefer);
|
||||
resizeDefer = w.setTimeout(applyMedia, resizeThrottle);
|
||||
return;
|
||||
} else {
|
||||
lastCall = now;
|
||||
}
|
||||
for (var i in mediastyles) {
|
||||
if (mediastyles.hasOwnProperty(i)) {
|
||||
var thisstyle = mediastyles[i], min = thisstyle.minw, max = thisstyle.maxw, minnull = min === null, maxnull = max === null, em = "em";
|
||||
if (!!min) {
|
||||
min = parseFloat(min) * (min.indexOf(em) > -1 ? eminpx || getEmValue() : 1);
|
||||
}
|
||||
if (!!max) {
|
||||
max = parseFloat(max) * (max.indexOf(em) > -1 ? eminpx || getEmValue() : 1);
|
||||
}
|
||||
if (!thisstyle.hasquery || (!minnull || !maxnull) && (minnull || currWidth >= min) && (maxnull || currWidth <= max)) {
|
||||
if (!styleBlocks[thisstyle.media]) {
|
||||
styleBlocks[thisstyle.media] = [];
|
||||
}
|
||||
styleBlocks[thisstyle.media].push(rules[thisstyle.rules]);
|
||||
}
|
||||
}
|
||||
}
|
||||
for (var j in appendedEls) {
|
||||
if (appendedEls.hasOwnProperty(j)) {
|
||||
if (appendedEls[j] && appendedEls[j].parentNode === head) {
|
||||
head.removeChild(appendedEls[j]);
|
||||
}
|
||||
}
|
||||
}
|
||||
for (var k in styleBlocks) {
|
||||
if (styleBlocks.hasOwnProperty(k)) {
|
||||
var ss = doc.createElement("style"), css = styleBlocks[k].join("\n");
|
||||
ss.type = "text/css";
|
||||
ss.media = k;
|
||||
head.insertBefore(ss, lastLink.nextSibling);
|
||||
if (ss.styleSheet) {
|
||||
ss.styleSheet.cssText = css;
|
||||
} else {
|
||||
ss.appendChild(doc.createTextNode(css));
|
||||
}
|
||||
appendedEls.push(ss);
|
||||
}
|
||||
}
|
||||
}, translate = function(styles, href, media) {
|
||||
var qs = styles.replace(respond.regex.keyframes, "").match(respond.regex.media), ql = qs && qs.length || 0;
|
||||
href = href.substring(0, href.lastIndexOf("/"));
|
||||
var repUrls = function(css) {
|
||||
return css.replace(respond.regex.urls, "$1" + href + "$2$3");
|
||||
}, useMedia = !ql && media;
|
||||
if (href.length) {
|
||||
href += "/";
|
||||
}
|
||||
if (useMedia) {
|
||||
ql = 1;
|
||||
}
|
||||
for (var i = 0; i < ql; i++) {
|
||||
var fullq, thisq, eachq, eql;
|
||||
if (useMedia) {
|
||||
fullq = media;
|
||||
rules.push(repUrls(styles));
|
||||
} else {
|
||||
fullq = qs[i].match(respond.regex.findStyles) && RegExp.$1;
|
||||
rules.push(RegExp.$2 && repUrls(RegExp.$2));
|
||||
}
|
||||
eachq = fullq.split(",");
|
||||
eql = eachq.length;
|
||||
for (var j = 0; j < eql; j++) {
|
||||
thisq = eachq[j];
|
||||
mediastyles.push({
|
||||
media: thisq.split("(")[0].match(respond.regex.only) && RegExp.$2 || "all",
|
||||
rules: rules.length - 1,
|
||||
hasquery: thisq.indexOf("(") > -1,
|
||||
minw: thisq.match(respond.regex.minw) && parseFloat(RegExp.$1) + (RegExp.$2 || ""),
|
||||
maxw: thisq.match(respond.regex.maxw) && parseFloat(RegExp.$1) + (RegExp.$2 || "")
|
||||
});
|
||||
}
|
||||
}
|
||||
applyMedia();
|
||||
}, makeRequests = function() {
|
||||
if (requestQueue.length) {
|
||||
var thisRequest = requestQueue.shift();
|
||||
ajax(thisRequest.href, function(styles) {
|
||||
translate(styles, thisRequest.href, thisRequest.media);
|
||||
parsedSheets[thisRequest.href] = true;
|
||||
w.setTimeout(function() {
|
||||
makeRequests();
|
||||
}, 0);
|
||||
});
|
||||
}
|
||||
}, ripCSS = function() {
|
||||
for (var i = 0; i < links.length; i++) {
|
||||
var sheet = links[i], href = sheet.href, media = sheet.media, isCSS = sheet.rel && sheet.rel.toLowerCase() === "stylesheet";
|
||||
if (!!href && isCSS && !parsedSheets[href]) {
|
||||
if (sheet.styleSheet && sheet.styleSheet.rawCssText) {
|
||||
translate(sheet.styleSheet.rawCssText, href, media);
|
||||
parsedSheets[href] = true;
|
||||
} else {
|
||||
if (!/^([a-zA-Z:]*\/\/)/.test(href) && !base || href.replace(RegExp.$1, "").split("/")[0] === w.location.host) {
|
||||
if (href.substring(0, 2) === "//") {
|
||||
href = w.location.protocol + href;
|
||||
}
|
||||
requestQueue.push({
|
||||
href: href,
|
||||
media: media
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
makeRequests();
|
||||
};
|
||||
ripCSS();
|
||||
respond.update = ripCSS;
|
||||
respond.getEmValue = getEmValue;
|
||||
function callMedia() {
|
||||
applyMedia(true);
|
||||
}
|
||||
if (w.addEventListener) {
|
||||
w.addEventListener("resize", callMedia, false);
|
||||
} else if (w.attachEvent) {
|
||||
w.attachEvent("onresize", callMedia);
|
||||
}
|
||||
})(this);
|
||||
+5
@@ -0,0 +1,5 @@
|
||||
/*! Respond.js v1.4.0: min/max-width media query polyfill * Copyright 2013 Scott Jehl
|
||||
* Licensed under https://github.com/scottjehl/Respond/blob/master/LICENSE-MIT
|
||||
* */
|
||||
|
||||
!function(a){"use strict";a.matchMedia=a.matchMedia||function(a){var b,c=a.documentElement,d=c.firstElementChild||c.firstChild,e=a.createElement("body"),f=a.createElement("div");return f.id="mq-test-1",f.style.cssText="position:absolute;top:-100em",e.style.background="none",e.appendChild(f),function(a){return f.innerHTML='­<style media="'+a+'"> #mq-test-1 { width: 42px; }</style>',c.insertBefore(e,d),b=42===f.offsetWidth,c.removeChild(e),{matches:b,media:a}}}(a.document)}(this),function(a){"use strict";function b(){u(!0)}var c={};a.respond=c,c.update=function(){};var d=[],e=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}(),f=function(a,b){var c=e();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))};if(c.ajax=f,c.queue=d,c.regex={media:/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,keyframes:/@.*keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]+\}/gi,urls:/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,findStyles:/@media *([^\{]+)\{([\S\s]+?)$/,only:/(only\s+)?([a-zA-Z]+)\s?/,minw:/\([\s]*min\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/,maxw:/\([\s]*max\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/},c.mediaQueriesSupported=a.matchMedia&&null!==a.matchMedia("only all")&&a.matchMedia("only all").matches,!c.mediaQueriesSupported){var g,h,i,j=a.document,k=j.documentElement,l=[],m=[],n=[],o={},p=30,q=j.getElementsByTagName("head")[0]||k,r=j.getElementsByTagName("base")[0],s=q.getElementsByTagName("link"),t=function(){var a,b=j.createElement("div"),c=j.body,d=k.style.fontSize,e=c&&c.style.fontSize,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",c||(c=f=j.createElement("body"),c.style.background="none"),k.style.fontSize="100%",c.style.fontSize="100%",c.appendChild(b),f&&k.insertBefore(c,k.firstChild),a=b.offsetWidth,f?k.removeChild(c):c.removeChild(b),k.style.fontSize=d,e&&(c.style.fontSize=e),a=i=parseFloat(a)},u=function(b){var c="clientWidth",d=k[c],e="CSS1Compat"===j.compatMode&&d||j.body[c]||d,f={},o=s[s.length-1],r=(new Date).getTime();if(b&&g&&p>r-g)return a.clearTimeout(h),h=a.setTimeout(u,p),void 0;g=r;for(var v in l)if(l.hasOwnProperty(v)){var w=l[v],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)>-1?i||t():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?i||t():1)),w.hasquery&&(z&&A||!(z||e>=x)||!(A||y>=e))||(f[w.media]||(f[w.media]=[]),f[w.media].push(m[w.rules]))}for(var C in n)n.hasOwnProperty(C)&&n[C]&&n[C].parentNode===q&&q.removeChild(n[C]);for(var D in f)if(f.hasOwnProperty(D)){var E=j.createElement("style"),F=f[D].join("\n");E.type="text/css",E.media=D,q.insertBefore(E,o.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(j.createTextNode(F)),n.push(E)}},v=function(a,b,d){var e=a.replace(c.regex.keyframes,"").match(c.regex.media),f=e&&e.length||0;b=b.substring(0,b.lastIndexOf("/"));var g=function(a){return a.replace(c.regex.urls,"$1"+b+"$2$3")},h=!f&&d;b.length&&(b+="/"),h&&(f=1);for(var i=0;f>i;i++){var j,k,n,o;h?(j=d,m.push(g(a))):(j=e[i].match(c.regex.findStyles)&&RegExp.$1,m.push(RegExp.$2&&g(RegExp.$2))),n=j.split(","),o=n.length;for(var p=0;o>p;p++)k=n[p],l.push({media:k.split("(")[0].match(c.regex.only)&&RegExp.$2||"all",rules:m.length-1,hasquery:k.indexOf("(")>-1,minw:k.match(c.regex.minw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:k.match(c.regex.maxw)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}u()},w=function(){if(d.length){var b=d.shift();f(b.href,function(c){v(c,b.href,b.media),o[b.href]=!0,a.setTimeout(function(){w()},0)})}},x=function(){for(var b=0;b<s.length;b++){var c=s[b],e=c.href,f=c.media,g=c.rel&&"stylesheet"===c.rel.toLowerCase();e&&g&&!o[e]&&(c.styleSheet&&c.styleSheet.rawCssText?(v(c.styleSheet.rawCssText,e,f),o[e]=!0):(!/^([a-zA-Z:]*\/\/)/.test(e)&&!r||e.replace(RegExp.$1,"").split("/")[0]===a.location.host)&&("//"===e.substring(0,2)&&(e=a.location.protocol+e),d.push({href:e,media:f})))}w()};x(),c.update=x,c.getEmValue=t,a.addEventListener?a.addEventListener("resize",b,!1):a.attachEvent&&a.attachEvent("onresize",b)}}(this);
|
||||
Executable
+224
@@ -0,0 +1,224 @@
|
||||
/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas. Dual MIT/BSD license */
|
||||
/*! NOTE: If you're already including a window.matchMedia polyfill via Modernizr or otherwise, you don't need this part */
|
||||
(function(w) {
|
||||
"use strict";
|
||||
w.matchMedia = w.matchMedia || function(doc, undefined) {
|
||||
var bool, docElem = doc.documentElement, refNode = docElem.firstElementChild || docElem.firstChild, fakeBody = doc.createElement("body"), div = doc.createElement("div");
|
||||
div.id = "mq-test-1";
|
||||
div.style.cssText = "position:absolute;top:-100em";
|
||||
fakeBody.style.background = "none";
|
||||
fakeBody.appendChild(div);
|
||||
return function(q) {
|
||||
div.innerHTML = '­<style media="' + q + '"> #mq-test-1 { width: 42px; }</style>';
|
||||
docElem.insertBefore(fakeBody, refNode);
|
||||
bool = div.offsetWidth === 42;
|
||||
docElem.removeChild(fakeBody);
|
||||
return {
|
||||
matches: bool,
|
||||
media: q
|
||||
};
|
||||
};
|
||||
}(w.document);
|
||||
})(this);
|
||||
|
||||
/*! Respond.js v1.4.0: min/max-width media query polyfill. (c) Scott Jehl. MIT Lic. j.mp/respondjs */
|
||||
(function(w) {
|
||||
"use strict";
|
||||
var respond = {};
|
||||
w.respond = respond;
|
||||
respond.update = function() {};
|
||||
var requestQueue = [], xmlHttp = function() {
|
||||
var xmlhttpmethod = false;
|
||||
try {
|
||||
xmlhttpmethod = new w.XMLHttpRequest();
|
||||
} catch (e) {
|
||||
xmlhttpmethod = new w.ActiveXObject("Microsoft.XMLHTTP");
|
||||
}
|
||||
return function() {
|
||||
return xmlhttpmethod;
|
||||
};
|
||||
}(), ajax = function(url, callback) {
|
||||
var req = xmlHttp();
|
||||
if (!req) {
|
||||
return;
|
||||
}
|
||||
req.open("GET", url, true);
|
||||
req.onreadystatechange = function() {
|
||||
if (req.readyState !== 4 || req.status !== 200 && req.status !== 304) {
|
||||
return;
|
||||
}
|
||||
callback(req.responseText);
|
||||
};
|
||||
if (req.readyState === 4) {
|
||||
return;
|
||||
}
|
||||
req.send(null);
|
||||
};
|
||||
respond.ajax = ajax;
|
||||
respond.queue = requestQueue;
|
||||
respond.regex = {
|
||||
media: /@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,
|
||||
keyframes: /@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi,
|
||||
urls: /(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,
|
||||
findStyles: /@media *([^\{]+)\{([\S\s]+?)$/,
|
||||
only: /(only\s+)?([a-zA-Z]+)\s?/,
|
||||
minw: /\([\s]*min\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/,
|
||||
maxw: /\([\s]*max\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/
|
||||
};
|
||||
respond.mediaQueriesSupported = w.matchMedia && w.matchMedia("only all") !== null && w.matchMedia("only all").matches;
|
||||
if (respond.mediaQueriesSupported) {
|
||||
return;
|
||||
}
|
||||
var doc = w.document, docElem = doc.documentElement, mediastyles = [], rules = [], appendedEls = [], parsedSheets = {}, resizeThrottle = 30, head = doc.getElementsByTagName("head")[0] || docElem, base = doc.getElementsByTagName("base")[0], links = head.getElementsByTagName("link"), lastCall, resizeDefer, eminpx, getEmValue = function() {
|
||||
var ret, div = doc.createElement("div"), body = doc.body, originalHTMLFontSize = docElem.style.fontSize, originalBodyFontSize = body && body.style.fontSize, fakeUsed = false;
|
||||
div.style.cssText = "position:absolute;font-size:1em;width:1em";
|
||||
if (!body) {
|
||||
body = fakeUsed = doc.createElement("body");
|
||||
body.style.background = "none";
|
||||
}
|
||||
docElem.style.fontSize = "100%";
|
||||
body.style.fontSize = "100%";
|
||||
body.appendChild(div);
|
||||
if (fakeUsed) {
|
||||
docElem.insertBefore(body, docElem.firstChild);
|
||||
}
|
||||
ret = div.offsetWidth;
|
||||
if (fakeUsed) {
|
||||
docElem.removeChild(body);
|
||||
} else {
|
||||
body.removeChild(div);
|
||||
}
|
||||
docElem.style.fontSize = originalHTMLFontSize;
|
||||
if (originalBodyFontSize) {
|
||||
body.style.fontSize = originalBodyFontSize;
|
||||
}
|
||||
ret = eminpx = parseFloat(ret);
|
||||
return ret;
|
||||
}, applyMedia = function(fromResize) {
|
||||
var name = "clientWidth", docElemProp = docElem[name], currWidth = doc.compatMode === "CSS1Compat" && docElemProp || doc.body[name] || docElemProp, styleBlocks = {}, lastLink = links[links.length - 1], now = new Date().getTime();
|
||||
if (fromResize && lastCall && now - lastCall < resizeThrottle) {
|
||||
w.clearTimeout(resizeDefer);
|
||||
resizeDefer = w.setTimeout(applyMedia, resizeThrottle);
|
||||
return;
|
||||
} else {
|
||||
lastCall = now;
|
||||
}
|
||||
for (var i in mediastyles) {
|
||||
if (mediastyles.hasOwnProperty(i)) {
|
||||
var thisstyle = mediastyles[i], min = thisstyle.minw, max = thisstyle.maxw, minnull = min === null, maxnull = max === null, em = "em";
|
||||
if (!!min) {
|
||||
min = parseFloat(min) * (min.indexOf(em) > -1 ? eminpx || getEmValue() : 1);
|
||||
}
|
||||
if (!!max) {
|
||||
max = parseFloat(max) * (max.indexOf(em) > -1 ? eminpx || getEmValue() : 1);
|
||||
}
|
||||
if (!thisstyle.hasquery || (!minnull || !maxnull) && (minnull || currWidth >= min) && (maxnull || currWidth <= max)) {
|
||||
if (!styleBlocks[thisstyle.media]) {
|
||||
styleBlocks[thisstyle.media] = [];
|
||||
}
|
||||
styleBlocks[thisstyle.media].push(rules[thisstyle.rules]);
|
||||
}
|
||||
}
|
||||
}
|
||||
for (var j in appendedEls) {
|
||||
if (appendedEls.hasOwnProperty(j)) {
|
||||
if (appendedEls[j] && appendedEls[j].parentNode === head) {
|
||||
head.removeChild(appendedEls[j]);
|
||||
}
|
||||
}
|
||||
}
|
||||
appendedEls.length = 0;
|
||||
for (var k in styleBlocks) {
|
||||
if (styleBlocks.hasOwnProperty(k)) {
|
||||
var ss = doc.createElement("style"), css = styleBlocks[k].join("\n");
|
||||
ss.type = "text/css";
|
||||
ss.media = k;
|
||||
head.insertBefore(ss, lastLink.nextSibling);
|
||||
if (ss.styleSheet) {
|
||||
ss.styleSheet.cssText = css;
|
||||
} else {
|
||||
ss.appendChild(doc.createTextNode(css));
|
||||
}
|
||||
appendedEls.push(ss);
|
||||
}
|
||||
}
|
||||
}, translate = function(styles, href, media) {
|
||||
var qs = styles.replace(respond.regex.keyframes, "").match(respond.regex.media), ql = qs && qs.length || 0;
|
||||
href = href.substring(0, href.lastIndexOf("/"));
|
||||
var repUrls = function(css) {
|
||||
return css.replace(respond.regex.urls, "$1" + href + "$2$3");
|
||||
}, useMedia = !ql && media;
|
||||
if (href.length) {
|
||||
href += "/";
|
||||
}
|
||||
if (useMedia) {
|
||||
ql = 1;
|
||||
}
|
||||
for (var i = 0; i < ql; i++) {
|
||||
var fullq, thisq, eachq, eql;
|
||||
if (useMedia) {
|
||||
fullq = media;
|
||||
rules.push(repUrls(styles));
|
||||
} else {
|
||||
fullq = qs[i].match(respond.regex.findStyles) && RegExp.$1;
|
||||
rules.push(RegExp.$2 && repUrls(RegExp.$2));
|
||||
}
|
||||
eachq = fullq.split(",");
|
||||
eql = eachq.length;
|
||||
for (var j = 0; j < eql; j++) {
|
||||
thisq = eachq[j];
|
||||
mediastyles.push({
|
||||
media: thisq.split("(")[0].match(respond.regex.only) && RegExp.$2 || "all",
|
||||
rules: rules.length - 1,
|
||||
hasquery: thisq.indexOf("(") > -1,
|
||||
minw: thisq.match(respond.regex.minw) && parseFloat(RegExp.$1) + (RegExp.$2 || ""),
|
||||
maxw: thisq.match(respond.regex.maxw) && parseFloat(RegExp.$1) + (RegExp.$2 || "")
|
||||
});
|
||||
}
|
||||
}
|
||||
applyMedia();
|
||||
}, makeRequests = function() {
|
||||
if (requestQueue.length) {
|
||||
var thisRequest = requestQueue.shift();
|
||||
ajax(thisRequest.href, function(styles) {
|
||||
translate(styles, thisRequest.href, thisRequest.media);
|
||||
parsedSheets[thisRequest.href] = true;
|
||||
w.setTimeout(function() {
|
||||
makeRequests();
|
||||
}, 0);
|
||||
});
|
||||
}
|
||||
}, ripCSS = function() {
|
||||
for (var i = 0; i < links.length; i++) {
|
||||
var sheet = links[i], href = sheet.href, media = sheet.media, isCSS = sheet.rel && sheet.rel.toLowerCase() === "stylesheet";
|
||||
if (!!href && isCSS && !parsedSheets[href]) {
|
||||
if (sheet.styleSheet && sheet.styleSheet.rawCssText) {
|
||||
translate(sheet.styleSheet.rawCssText, href, media);
|
||||
parsedSheets[href] = true;
|
||||
} else {
|
||||
if (!/^([a-zA-Z:]*\/\/)/.test(href) && !base || href.replace(RegExp.$1, "").split("/")[0] === w.location.host) {
|
||||
if (href.substring(0, 2) === "//") {
|
||||
href = w.location.protocol + href;
|
||||
}
|
||||
requestQueue.push({
|
||||
href: href,
|
||||
media: media
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
makeRequests();
|
||||
};
|
||||
ripCSS();
|
||||
respond.update = ripCSS;
|
||||
respond.getEmValue = getEmValue;
|
||||
function callMedia() {
|
||||
applyMedia(true);
|
||||
}
|
||||
if (w.addEventListener) {
|
||||
w.addEventListener("resize", callMedia, false);
|
||||
} else if (w.attachEvent) {
|
||||
w.attachEvent("onresize", callMedia);
|
||||
}
|
||||
})(this);
|
||||
+5
@@ -0,0 +1,5 @@
|
||||
/*! Respond.js v1.4.2: min/max-width media query polyfill * Copyright 2013 Scott Jehl
|
||||
* Licensed under https://github.com/scottjehl/Respond/blob/master/LICENSE-MIT
|
||||
* */
|
||||
|
||||
!function(a){"use strict";a.matchMedia=a.matchMedia||function(a){var b,c=a.documentElement,d=c.firstElementChild||c.firstChild,e=a.createElement("body"),f=a.createElement("div");return f.id="mq-test-1",f.style.cssText="position:absolute;top:-100em",e.style.background="none",e.appendChild(f),function(a){return f.innerHTML='­<style media="'+a+'"> #mq-test-1 { width: 42px; }</style>',c.insertBefore(e,d),b=42===f.offsetWidth,c.removeChild(e),{matches:b,media:a}}}(a.document)}(this),function(a){"use strict";function b(){u(!0)}var c={};a.respond=c,c.update=function(){};var d=[],e=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}(),f=function(a,b){var c=e();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))};if(c.ajax=f,c.queue=d,c.regex={media:/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,keyframes:/@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi,urls:/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,findStyles:/@media *([^\{]+)\{([\S\s]+?)$/,only:/(only\s+)?([a-zA-Z]+)\s?/,minw:/\([\s]*min\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/,maxw:/\([\s]*max\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/},c.mediaQueriesSupported=a.matchMedia&&null!==a.matchMedia("only all")&&a.matchMedia("only all").matches,!c.mediaQueriesSupported){var g,h,i,j=a.document,k=j.documentElement,l=[],m=[],n=[],o={},p=30,q=j.getElementsByTagName("head")[0]||k,r=j.getElementsByTagName("base")[0],s=q.getElementsByTagName("link"),t=function(){var a,b=j.createElement("div"),c=j.body,d=k.style.fontSize,e=c&&c.style.fontSize,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",c||(c=f=j.createElement("body"),c.style.background="none"),k.style.fontSize="100%",c.style.fontSize="100%",c.appendChild(b),f&&k.insertBefore(c,k.firstChild),a=b.offsetWidth,f?k.removeChild(c):c.removeChild(b),k.style.fontSize=d,e&&(c.style.fontSize=e),a=i=parseFloat(a)},u=function(b){var c="clientWidth",d=k[c],e="CSS1Compat"===j.compatMode&&d||j.body[c]||d,f={},o=s[s.length-1],r=(new Date).getTime();if(b&&g&&p>r-g)return a.clearTimeout(h),h=a.setTimeout(u,p),void 0;g=r;for(var v in l)if(l.hasOwnProperty(v)){var w=l[v],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)>-1?i||t():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?i||t():1)),w.hasquery&&(z&&A||!(z||e>=x)||!(A||y>=e))||(f[w.media]||(f[w.media]=[]),f[w.media].push(m[w.rules]))}for(var C in n)n.hasOwnProperty(C)&&n[C]&&n[C].parentNode===q&&q.removeChild(n[C]);n.length=0;for(var D in f)if(f.hasOwnProperty(D)){var E=j.createElement("style"),F=f[D].join("\n");E.type="text/css",E.media=D,q.insertBefore(E,o.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(j.createTextNode(F)),n.push(E)}},v=function(a,b,d){var e=a.replace(c.regex.keyframes,"").match(c.regex.media),f=e&&e.length||0;b=b.substring(0,b.lastIndexOf("/"));var g=function(a){return a.replace(c.regex.urls,"$1"+b+"$2$3")},h=!f&&d;b.length&&(b+="/"),h&&(f=1);for(var i=0;f>i;i++){var j,k,n,o;h?(j=d,m.push(g(a))):(j=e[i].match(c.regex.findStyles)&&RegExp.$1,m.push(RegExp.$2&&g(RegExp.$2))),n=j.split(","),o=n.length;for(var p=0;o>p;p++)k=n[p],l.push({media:k.split("(")[0].match(c.regex.only)&&RegExp.$2||"all",rules:m.length-1,hasquery:k.indexOf("(")>-1,minw:k.match(c.regex.minw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:k.match(c.regex.maxw)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}u()},w=function(){if(d.length){var b=d.shift();f(b.href,function(c){v(c,b.href,b.media),o[b.href]=!0,a.setTimeout(function(){w()},0)})}},x=function(){for(var b=0;b<s.length;b++){var c=s[b],e=c.href,f=c.media,g=c.rel&&"stylesheet"===c.rel.toLowerCase();e&&g&&!o[e]&&(c.styleSheet&&c.styleSheet.rawCssText?(v(c.styleSheet.rawCssText,e,f),o[e]=!0):(!/^([a-zA-Z:]*\/\/)/.test(e)&&!r||e.replace(RegExp.$1,"").split("/")[0]===a.location.host)&&("//"===e.substring(0,2)&&(e=a.location.protocol+e),d.push({href:e,media:f})))}w()};x(),c.update=x,c.getEmValue=t,a.addEventListener?a.addEventListener("resize",b,!1):a.attachEvent&&a.attachEvent("onresize",b)}}(this);
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "respond.js",
|
||||
"filename": "respond.js",
|
||||
"version": "1.3.0",
|
||||
"version": "1.4.2",
|
||||
"description": "A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more).",
|
||||
"homepage": "https://github.com/scottjehl/Respond",
|
||||
"keywords": [
|
||||
|
||||
Reference in New Issue
Block a user