Auto-scroll playlist to current track

[bull]

I've been hacking together a custom interface for a touchscreen friendly version of Subsonic. As a result of limited screen space - and an aim to keeping things simple - I've moved the playlist to the top of the screen and reduced it to only 4 lines. Roughly my interface looks like this:



This meant that after a few tracks I couldn't see which song was playing. After digging around I found the perfect spot to put a single line of Javascript to fix this; the updateCurrentImage() function in playlist.jsp (found around line 330). New code looks like this:

Code: Select all

function updateCurrentImage() {
        for (var i = 0; i < songs.length; i++) {
            var song  = songs[i];
            var id = i + 1;
            var image = $("currentImage" + id);

            if (image) {
                if (song.streamUrl == currentStreamUrl) {
                    image.show();
                    window.scroll(0,(i*18));
            } else {
                    image.hide();
                }
            }
        }
    }


The magic line is window.scroll. Depending on the size of your font you may need to adjust the number, for my setup each line was 18 pixels high. I tried to base this number on the em height provided in the CSS, but it was easier just to kludge it like this.

Also by default this won't scroll until a track has changed, which means that if you refresh the page the scrolling back to the top. I fixed this by calling updateCurrentImage() at the beginning of nowPlayingCallback function (around line 50)[/code]

I know this is pretty simple fix but was a huge help to me, and might be for others that use the default interface but have long playlists.

[compcentral]

I think you meant:

Code: Select all

window.scroll(0,i*18);

and actually, I think this will work a little better:

Code: Select all

window.scroll(0,(i+1)*18);

[colli419]

I have been looking for ways to reduce the overall size of the interface, this is great. Nice work!

[bull]

I think you meant:

Code: Select all

window.scroll(0,i*18);

and actually, I think this will work a little better:

Code: Select all

window.scroll(0,(i+1)*18);

Ah yes thanks for catching that (I've got a 4 pixel offsest that I add to mine, but removed it for this post and lost a bracket in the process!) I have intentionally kept it scrolling to the previous song as I like the idea of seeing the previous song/current song/next two songs...but you're right that is a "better" way.

[kroken]

it just scrolls down on mine, see this video

http://www.speedyshare.com/files/25715779/clip0021.avi

[bull]

it just scrolls down on mine, see this video

http://www.speedyshare.com/files/25715779/clip0021.avi

Not quite sure what's going on there (it was a bit hard to understand in the video if you were skipping tracks manually or it was happening automatically) but if the position is getting progressively more and more out of sync, you'll need to adjust the number (in my example it's 18). This is the height of each row, so it might take a bit of fiddling to find the right multiplier. From the looks of if you will need to increase that number.

Ideally it would be nice to find a magic formula that pulls the em sizes from the CSS and make a one size fits all bit of code, but it's probably just as easy to tweak it by hand.

[kroken]

yeah but when i have playlist with just an album it work fine but when i add like 200 songs it wont work, im using the default height.