Page 1 of 1

Show NP info in browser tab

PostPosted: Thu Jun 24, 2010 10:01 pm
by jeffpetersen
Would be cool to see info on the current track in the browser tab, instead of just "Subsonic". The Slacker Radio web app does this, and it's nice to see whats going on without switching tabs.

PostPosted: Fri Jun 25, 2010 4:53 pm
by Tom
yeah, that would be awesome :D

PostPosted: Fri Jun 25, 2010 8:15 pm
by mgrant
Which set of NP data should be displayed in the titlebar? In my case I usually have at least 3 or 4 players playing simultaneously (different users, players, etc.). None of them are actually playing through the browser I'm looking at.

FWIW, I made a quick attempt at this feature and here's what I came up with.

I added the following line:
Code: Select all
document.title = nowPlaying[i].artist + " - " + nowPlaying[i].title;


into the getNowPlayingCallback function of right.jsp.

This will show the NowPlaying info in the titlebar but only if you load the "right.view" in it's own tab. Also, if there is more than one set of NP info it will show the last NP artist/title.

Maybe someone smarter than me can suggest a better way?

-mg

PostPosted: Fri Jun 25, 2010 9:07 pm
by mgrant
SOLVED!

Add this line:
Code: Select all
parent.document.title = nowPlaying[i].artist + " - " + nowPlaying[i].title;


To right.jsp. Here's what it looks like in my right.jsp


Code: Select all
       function getNowPlayingCallback(nowPlaying) {
            var html = nowPlaying.length == 0 ? "" : "<h2><fmt:message key="main.nowplaying"/></h2><table>";
            for (var i = 0; i < nowPlaying.length; i++) {
                html += "<tr><td colspan='2' class='detail' style='padding-top:1em;white-space:nowrap'>";

                if (nowPlaying[i].avatarUrl != null) {
                    html += "<img src='" + nowPlaying[i].avatarUrl + "' style='padding-right:5pt'>";
                }
                html += "<b>" + nowPlaying[i].username + "</b></td></tr>"

                html += "<tr><td class='detail' style='padding-right:1em'>" +
                        "<a title='" + nowPlaying[i].tooltip + "' target='main' href='" + nowPlaying[i].albumUrl + "'><em>" +
                        nowPlaying[i].artist + "</em><br/>" + nowPlaying[i].title + "</a><br/>" +
                        "<span class='forward'><a href='" + nowPlaying[i].lyricsUrl + "' onclick=\"return popupSize(this, 'help', 430, 550)\">" +
                        "<fmt:message key="main.lyrics"/>" + "</a></span></td><td style='padding-top:1em'>";

                if (nowPlaying[i].coverArtUrl != null) {
                    html += "<a title='" + nowPlaying[i].tooltip + "' rel='zoom' href='" + nowPlaying[i].coverArtZoomUrl + "'>" +
                            "<img src='" + nowPlaying[i].coverArtUrl + "' width='48' height='48'></a>"; 
                }
                html += "</td></tr>";

                var minutesAgo = nowPlaying[i].minutesAgo;
                if (minutesAgo > 4) {
                    html += "<tr><td class='detail' colspan='2'>" + minutesAgo + " <fmt:message key="main.minutesago"/></td></tr>";
                }
parent.document.title = nowPlaying[i].artist + " - " + nowPlaying[i].title;
            }
            html += "</table>";
            $('nowPlaying').innerHTML = html;
            prepZooms();

        }


This hack is dependent on "Settings -> Personal -> Show what others are playing" being checked.

PostPosted: Tue Jun 29, 2010 8:15 pm
by jeffpetersen
Thanks mg, I'll give it a try!

What do you mean by "load the "right.view" in it's own tab"? This is the right side panel with NP info? And if someone else plays music my tab will show the wrong info?

PostPosted: Wed Jun 30, 2010 9:17 pm
by mgrant
jeffpetersen wrote:Thanks mg, I'll give it a try!

What do you mean by "load the "right.view" in it's own tab"? This is the right side panel with NP info? And if someone else plays music my tab will show the wrong info?


My first post suggested modifying right.jsp to set the document.title to whatever was already displaying in the right side panel. Normally right.jsp is running as a sub-frame of the main page so, the browser doesn't display it's title in the titlebar/tab. If you break right.jsp out of the frameset, it then has no parent and the browser will display the title.

In my second post I updated the hack to use parent.document.title instead. So, it just works. However, you are correct about multiple players - it will always show the last NP info. So if there are two or more players the first will essentially be ignored and the last will be used.

AFAIK there is no reliable way to tell which, if any, of the active players is actually playing in the active browser window.

-mg

PostPosted: Tue Jul 06, 2010 7:16 pm
by mgrant
Here's a better way. Don't modify right.jsp at all.

Instead modify playlist.jsp.

Add the following line (or one like it that suits your taste):

Code: Select all
        parent.document.title= 'Now Playing: ' + nowPlayingInfo.title + " by " + nowPlayingInfo.artist;


This should be the first line in the function NowPlayingCallback. Here's what mine looks like with the modification:

Code: Select all
   function nowPlayingCallback(nowPlayingInfo) {
        parent.document.title= 'Now Playing: ' + nowPlayingInfo.title + " by " + nowPlayingInfo.artist;
        if (nowPlayingInfo != null && nowPlayingInfo.streamUrl != currentStreamUrl) {
            getPlaylist();
            if (currentAlbumUrl != nowPlayingInfo.albumUrl && top.main.updateNowPlaying) {
                top.main.location.replace("nowPlaying.view?");
                currentAlbumUrl = nowPlayingInfo.albumUrl;
            }
        <c:if test="${not model.player.web}">
            currentStreamUrl = nowPlayingInfo.streamUrl;
            updateCurrentImage();
        </c:if>
        }
    }


With this hack it will display NP data for the song that in the displayed playlist. For example I have two players. Payer 1 is an external player, player 2 is web. I can start playing the external player and switch to the web player. This will result in two songs playing simultaneously but the browser's title bar will reflect the one that's being displayed in the playlist. This should work MUCH better than my previous (bad) attempt.

Sorry for the earlier mess.

-mg
[/code]

PostPosted: Tue Jul 06, 2010 8:02 pm
by jeffpetersen
nevermind, I was editing the wrong file ;) Let me try again...

PostPosted: Tue Jul 06, 2010 8:25 pm
by jeffpetersen
Awesome, you're great, thanks!

Only problem is it does not like apostrophes. Don't know that anything can be done about that.

PostPosted: Tue Jul 06, 2010 9:17 pm
by mgrant
Here's my solution to apostrophe and ampersand (other characters will probably also need similar treatment). It's not really elegant but it's the only thing I could find that worked for page titles.

Replace
Code: Select all
        parent.document.title= 'Now Playing: ' + nowPlayingInfo.title + " by " + nowPlayingInfo.artist;


with

Code: Select all
        np = 'Now Playing: ' + nowPlayingInfo.title + ' by ' + nowPlayingInfo.artist;
        np = np.replace(/&amp;/g,"&");
        np = np.replace(/'/g,"'");
        parent.document.title=np;


-mg

EDIT: The forum software automatically converts the escape code for the apostrophe. So, the line for the apostrophe should be this:
Code: Select all
        np = np.replace(/ & # 3 9 ;'/g,"'");
but with the spaces that are present between the / removed.

PostPosted: Thu Jul 08, 2010 9:45 pm
by mgrant
I just noticed another "special" case character - the double quote.

np = np.replace(/& # 3 4 ;/g,'"');

If you've followed this thread succesfully so far then you already know what to do.

-mg :)