Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added jQuery UI Sortable support for jPlayer Playlists add-on #357

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

mdingena
Copy link
Contributor

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.

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.
Used same semantics as master branch for new options object. Ensured
that enableHandleControls is false if jQuery UI Sortable isn't
available.
@wobbiewobbit
Copy link

wobbiewobbit commented Dec 11, 2018

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
Copy link
Contributor Author

mdingena commented Dec 12, 2018

@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
Copy link

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
Copy link
Contributor Author

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
Copy link

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
Copy link
Contributor Author

mdingena commented Dec 14, 2018

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
Copy link

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
Copy link

wobbiewobbit commented Dec 14, 2018

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants