/* * Playlist Object for the jPlayer Plugin * http://www.jplayer.org * * Copyright (c) 2009 - 2014 Happyworm Ltd * Licensed under the MIT license. * http://www.opensource.org/licenses/MIT * * Author: Mark J Panaghiston * Version: 2.4.1 * Date: 19th November 2014 * * Requires: * - jQuery 1.7.0+ * - jPlayer 2.8.2+ */ /*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: 221, // ] fn: function() { self.next(); } }, previous: { key: 219, // [ fn: function() { self.previous(); } }, shuffle: { key: 83, // s fn: function() { self.shuffle(); } } }, stateClass: { shuffled: "jp-state-shuffled" } }, 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.details = this.cssSelector.cssSelectorAncestor + " .jp-details"; // Note that jPlayer controls the text in the title element. 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.details).show(); } else { $(self.cssSelector.details).hide(); } }); // Create click handlers for the extra buttons that do playlist functions. $(this.cssSelector.previous).click(function(e) { e.preventDefault(); self.previous(); self.blur(this); }); $(this.cssSelector.next).click(function(e) { e.preventDefault(); self.next(); self.blur(this); }); $(this.cssSelector.shuffle).click(function(e) { e.preventDefault(); if(self.shuffled && $(self.cssSelector.jPlayer).jPlayer("option", "useStateClassSkin")) { self.shuffle(false); } else { self.shuffle(true); } self.blur(this); }); $(this.cssSelector.shuffleOff).click(function(e) { e.preventDefault(); self.shuffle(false); self.blur(this); }).hide(); // Put the title in its initial display state if(!this.options.fullScreen) { $(this.cssSelector.details).hide(); } // Remove the empty