Added jQuery UI Sortable support for jPlayer Playlists add-on

[mdingena]

Added new demo page without minified resources to demonstrate UI sortable functionality. This modification inserts JSON script tags for each playlist item so that it can rebuild the playlist from the DOM. Main benefit here is that playback is not interrupted when user makes changes to the playlist order. Upon playing, or skipping to previous or next track, jPlayerPlaylist now evaluates the DOM and rebuilds the playlist object, before playing the correct index. It supports looping and it follows the same philosophy as enableRemoveControls.

[wobbiewobbit]

hi I really like your addon. I found it after days of searching for a solution to my problem but unfortunately I still can't fathom how to do it. I have your add-on working great now, but I still can't tie it in with what I want to do. I have some checkbox filters that hide the li created by jplayer.playlist.js that I have given classes to. and I can those li's from the playlist list but not from the actual playlist. I am sure your addon will be helpful in this but I can't work out how to do it. I have a filters.js file that hides and shows items from the playlist list based on li classes. it is working well in hiding them but changes aren't reflected in the actual playlist. Any ideas how I can do this please? https://wobbiewobbit.com/a-z

[mdingena]

@wobbiewobbit this code should work out of the box for jPlayer 2.9.2. You should verify that after pageload, there are <script> tags in the DOM for every playlist item. Every time you call myPlaylist.play() or other methods such as previous, next, the plugin scans your DOM for these script tags and rebuilds the playlist object. That means that if you are only hiding the playlist items, they are still present in the DOM, so the <script> tag is still there, meaning it's not removed from the actual playlist.

I recommend that instead of hiding playlist items, you use the actual remove buttons that come with each playlist item. If you must use your own buttons, make sure they call remove. Don't just hide it from the user because it will stay in the playlist.

Hope that makes sense.

[wobbiewobbit]

thank you for your reply. I am struggling as I am new to delving into the code in this much depth, so please forgive any rookie errors and lack of understanding. I have used remove() and the li has gone from the playlist and the DOM but when i press play it doesn't refresh the playlist. I am so nearly there... if I drag the playlist items it works according to what is there properly, it just doesn't refresh it till I do that. I appreciate your help. Thank you.

[mdingena]

Okay, so, the idea was that playback would not stop if you changed the playlist (reorder / remove items). The original playlist add-on did that. So what happens is, the playlist object stays untouched until jPlayer needs to load a new track. That happens for example when next is called. When a new track is loaded, my modification of the add-on says "well, hang on! I need to check some things".

There is a boolean which tracks playlist changes, and on previous or next if the boolean is true, it re-scans the DOM.

So the boolean is made true if you remove or reorder items.

And the scan happens when a new track is about to play, but only if the boolean was true.

My fork of the code added a new demo page. Can you confirm that it works there?

[wobbiewobbit]

not sure how to check my own page's requirements with the demo page - it is all working fine how you have it and I understand why the first track stays with the original playlist. With my page it doesn't reset the playlist when I click Next but it does set it right if I drag the items then play any track other than the first one. How do I get it to refresh by a click either directly from my checkboxes (ideal) or at least on clicking next or some other refresh link? Also, for me to be able to use it as I hope to, I would need to also reload the original playlist from checkboxes or radio buttons. I have tried various things and have been reading up on jquery round the clock but I am way out of my depth really. If I can load original playlist from checkboxes and refresh playlist for items I have removed I will be able to do what I want to. Thank you.

[mdingena]

With my page it doesn't reset the playlist when I click Next but it does set it right if I drag the items then play any track other than the first one.

This is because dragging it with jQuery UI Sortable plugin causes _playlistChanged to be set to true:

https://github.com/mdingena/jPlayer/blob/3cdc88fccfea5e3136de018e2cb50e80065364ea/src/javascript/add-on/jplayer.playlist.js#L83-L85

Here are some places where the boolean is checked and the playlist is rebuilt if it's "dirty":

https://github.com/mdingena/jPlayer/blob/3cdc88fccfea5e3136de018e2cb50e80065364ea/src/javascript/add-on/jplayer.playlist.js#L225-L230

https://github.com/mdingena/jPlayer/blob/3cdc88fccfea5e3136de018e2cb50e80065364ea/src/javascript/add-on/jplayer.playlist.js#L488-L494

https://github.com/mdingena/jPlayer/blob/3cdc88fccfea5e3136de018e2cb50e80065364ea/src/javascript/add-on/jplayer.playlist.js#L509-L516

Basically, if you want to implement your custom functionality and have it work nicely with this plugin, you need to set _playlistChanged to true and call myPlaylist._rebuildPlaylist() (where myPlaylist is the reference to the playlist instance you created with new jPlayerPlaylist():

https://github.com/mdingena/jPlayer/blob/748b8061c4331ff4a05a45239c2ad1d01e60cb24/examples/blue.monday/demo-02-jPlayerPlaylist-sortable.html#L27

[wobbiewobbit]

thank you that is really helpful. And it is good to know I am looking along the right lines with things I am trying, just my basic grasp of jquery letting me down but thank you, at least that is clearer what I need to look at!

[wobbiewobbit]

thanks for your help I am definitely making progress. I can remove list items with checkbox and rebuild playlist. The only thing I am stuck on now is how I reload the original playlist. have tried various things with _originalPlaylist but am having no success. Feels like I am nearly there apart from that... Ugh hours later and I still can't work out how to reload the original playlist, everything I try just causing errors, I feel like it must be a really straightforward thing but I just can't hit upon it or find it anywhere online. So near yet so far....

[wobbiewobbit]

omg I've done it... finally after about 18 hours solid trying to do that one thing! I worked out how to put the initial playlist into an array variable - PHEW! thank you for your help