Show NP info in browser tab

[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.

[Tom]

yeah, that would be awesome

[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

[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.

[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?

[mgrant]

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

[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]

[jeffpetersen]

nevermind, I was editing the wrong file Let me try again...

[jeffpetersen]

Awesome, you're great, thanks!

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

[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(/&/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.

[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