My jplayerplaylist remove function isn't working

Question

I'm trying to make a mobile version of my site, and the jplayer functionality closely resembles that of my main site. The playlist is updated depending on which page you are on, and all the songs except the one you are currently listening to are deleted from the playlist, then the page dynamically adds songs from the page you are viewing.

It works fine on my main page, but my mobile version (which is almost the same code), does not work on.

I set jplayer_playlist.option("removeTime", 0); just like the jplayer documentation suggests, but it doesn't work. Here is a bit of my code so you can see exactly what I'm doing.

    function reload()
    {
        var current = jplayer_playlist.current;

        for(var i = 0; i < current; i++)
        {
            deleteSong(0);
        }
        var length = theTitles.length;
        for(var i = 0; i < (length - 1); i++)
        {
            deleteSong(1);
        }
    }

    function deleteSong(index)
    {
        if(!jplayer_playlist.remove(index))
        {
            console.log("Could not delete it.");
        }
    }

The first delete does not show the error message, but the second (and every delete after) does. It seems as though it is not recognizing that I set the removeTime to 0, even though I did (and before any delete calls were made). Is there anything else that the jplayer.remove function depends on when you are trying to delete something from it besides removeTime?

Answer 1

I had the same problem and found an answer in jPlaylist docs: http://jplayer.org/latest/demo-02-jPlayerPlaylist/

"Because the second command will only work if the remove animation time, removeTime, is zero."

In my case, I coded the following feature to erase all the songs up to the current one:

When creating the jPlaylist:

var playlistOptions = {
playlistOptions: {
    enableRemoveControls: true,
    autoPlay: false,
    removeTime: 0
},
...
};
playlist = new jPlayerPlaylist(.......);

And the function that erases the songs:

function deleteUpToCurrent(e) {
    while(playlist.current != 0) {
        playlist.remove(0); 
    }
    return false;
}

Hope it helps! Cheers

Answer 2

On line 355 of jquery.playlist.js in the jplayerPlaylist.remove function, there is a call to JQuery's remove function:

$(this).remove();

If you look in the source of JQuery, this is delegated to the DOM method

elem.parentNode.removeChild( elem );

In modern browsers, this DOM operation is asynchronous, ie it returns immediately but actually removing the DOM element takes time. Therefore the jplayerPlaylist.remove() method returns before the node has actually been removed. Unfortunately, there is no callback. So the only workaround is a setTimeout.

var DELAY = 10;
function reload()
{
    var current = jplayer_playlist.current;
    var length = jplayer_playlist.playlist.length;
    if (current > 0)
        deleteSong(0);
    else if (length > 1)
        deleteSong(1);
    if (length > 1)
        window.setTimeout(reload, DELAY);
}

You may have to adjust DELAY.