autostart and javascript/css playlist highlighting

8 posts | return to the JavaScript Interaction forum | get the rss feed for this thread

Oct. 22, 2009Edward Spiegel

I have noticed that with my javascript/css playlist that if I set the player to autostart and shuffle that the first playlist item to play is not highlighted when playback starts.

Is this a known bug?

Is there a workaround other than my installing a listener that simulates autostart and turning autostart off?

Oct. 22, 2009Zachary Ozer

Didn't know about it - we'll investigate.

Oct. 23, 2009Edward Spiegel

Zachary,

I thought I'd mention that it doesn't matter if shuffle is on or not. If one is using the javascript/css to display the playlist and autostart is on the first item played is not highlighted. I tried with 4.5.230

I couldn't try with 4.6 because for some reasons I am having problems with that version.

Oct. 23, 2009Edward Spiegel

Got the 4.6 problem straightened out (permissions issue) and 4.6 behaves the sme. So, I guess it is the library rather than the player.

It would be great if this got straightened out.

Oct. 24, 2009Edward Spiegel

Zachary,

I did a bit of poking around because I needed to get this working. Here is some info that may help you figure out the solution and also some workaround code for anyone that needs a fix for this. There may be more elegant solutions than mine.

Ok. The problem is that the itemHandler does not get triggered for the first item played back (at least when shuffle is turned on). (Maybe there is a race condition so that the itemListener has not yet been instantiated when when the player sends it).

After a lot of experiments, I found that the only way that I could reliably set the highlight to the correct item was by setting up a listener for STATE changes and setting the highlight the very first time that that the player issues the PLAYING state.

I tried setting it when the playlist first fires but that doesn't work for the obvious reason that the playlist has not yet been instantiated at that point in the html. (Side note: also, for me listening for the playlist also failed because the first time the player loads it seems like the playlist 'event' was sometimes coming in before the listener itself had been fully initialized.

So, my solution goes something like this:


function stateListener(obj){
switch(obj.newstate) {
case "BUFFERING" :
//my code to display my "now loading' animation/message
break;
case "PLAYING" :
var itemToPlay = document.getElementById('mpl').getConfig().item;
if (!mplInited){
setHighlight(obj);//needed because the javascript library is not setting the highlight when autostart is used
mplInited=true;
}
//various other things that I do when a track starts playing back
break;
}
}

function setHighlight(obj){
//cribbed from the longtailvideo javascript
//and yes i know there is more efficient way to do this but I was too lazy to optimize tonight
var item = document.getElementById(obj['id']).getConfig().item;
var playlist = $("#"+obj['id']).next();
var currentItem = 0;
playlist.children().each(function(){
if (currentItem == item) {
$(this).addClass("playing");
}
currentItem++;
});

}

var mplInited=false;

try { var myReady = playerReady;} catch (err){}

playerReady = function(obj) {
player = document.getElementById(obj['id']);
player.addModelListener("STATE",'stateListener');
try {
myReady(obj);

} catch (err){
}
}




I am pretty ignorant as far as DOM programming is concerned. Can some one tell me what the most direst way to "addClass("playing") to item X of the playlist. In this case, we don't need to iterate through all of the playlist children. But I couldn't find the write syntax to do something like

playlist[0].childNodes[item].addClass("playing") which is all that we need to do when the very first item plays (keep in mind that the item number can be random since I am using shuffle mode)

Oct. 24, 2009Edward Spiegel

I figured out (by imitation) syntax that works so that set highlight doesn't have to iterate


function setHighlight(obj){
var item = document.getElementById(obj['id']).getConfig().item;
var playlist = $("#"+obj['id']).next();
var currentItem = 0;
$(playlist[0].childNodes[item]).addClass("playing");
}


Can someone tell me why the $() syntax is required. I am not quite sure what it means

Oct. 24, 2009Zachary Ozer

$ syntax is jquery.

I'll integrate this into the default release next week.

Oct. 24, 2009hobbs

Various Listeners don't get called upon instantiation because the player is sitting idle or already playing, however you have it setup, when the Listeners are added.

The sequence is:
1) instantiate the player,
2) player loads the playlist,
3) add Listeners.

So, if you need a response from a Listener immediately (actually, a response from the Listener's function), you should call the Listener's function. I usually do it immediately after adding the Listeners, like this:
      function addListeners()
      {
        playlist = player.getPlaylist();

        if(playlist.length > 0)
        {
          player.addControllerListener('ITEM', 'itemMonitor');
          itemMonitor({index:0});
        }
        else
        {
          setTimeout("addListeners();", 50);
        }
      };



Add a reaction

You can also return to the category or try this search for related threads.

Your name *

Supported codes:

 

submit