Scrolling artist/title on tabs

[gurutech]

How hard would it be to scroll the artist and title across the tab at the top of the browser? I think this would be a neat mod, so I don't have to keep switching over to the SS tab when I want to know the title of the song playing....

[ytechie]

I have done it. It doesn't scroll, but it is very neat. It is complete though, so it shows whether it's paused and it shows video titles. It's a big mod if you want to do it right. I'll get to it soon.

[ytechie]

Here is how to add a dynamic title to Subsonic:

We are going to edit playlist.jsp and videoPlayer.jsp.
First, we are going to edit playlist.jsp.

Add these variables at the beginning of the script section:

Code: Select all

var playing = 0;
var finished = 1;
var playingTitle = null;


Add "top.document.title = "Subsonic";" to the end of the init() function.

Now replace the stateListener() function with this:

Code: Select all

function stateListener(obj) { // IDLE, BUFFERING, PLAYING, PAUSED, COMPLETED
   if (obj.newstate == "COMPLETED") {
      playing = 0;
      finished = 1;
      onNext(repeatEnabled);
   } else if (obj.newstate == "PLAYING") {
      playing = 1;
      finished = 0;
      updateTitle(playingTitle);
   } else if (obj.newstate == "PAUSED") {
      playing = 0;
      updateTitle("Paused - " + playingTitle);
   } else if (obj.newstate == "IDLE") {
      playing = 0;
      updateTitle('Subsonic');
   }
}


Now add the following to the end of the skip() function:

Code: Select all

playingTitle = song.artist + ' - ' + song.title;
updateTitle(song.artist + ' - ' + song.title);


Finally, add this function:

Code: Select all

function updateTitle(titleText) {
   if (titleText) {
      top.document.title = titleText;
   } else if (playing == 0 && !finished && playingTitle && songs.length > 0) {
      top.document.title = "Paused - " + playingTitle;
   } else if (playing == 1 && songs.length > 0) {
      top.document.title = playingTitle;
   } else {
      top.document.title = "Subsonic";
   }
}


Now we are going to edit videoPlayer.jsp.

Add the variable "top.document.title = "Subsonic";" at the beginning of the script section.

Add "player.addModelListener("STATE", "stateListener");" right after the timeListener like so:

Code: Select all

function playerReady(thePlayer) {
   player = $("player1");
   player.addModelListener("TIME", "timeListener");
   player.addModelListener("STATE", "stateListener");
   
<c:if test="${not (model.trial and model.trialExpired)}">
   play();
</c:if>
}


Now add this function:

Code: Select all

function stateListener(obj) { // IDLE, BUFFERING, PLAYING, PAUSED, COMPLETED
   if (obj.newstate == "PLAYING") {
      paused = 0;
      document.title = "${model.video.title}";
      if (top.frames["playlist"]) {
         top.playlist.updateTitle("${model.video.title}");
      }
   } else if (obj.newstate == "PAUSED") {
      paused = 1;
      document.title = "Paused - " + "${model.video.title}";
      if (top.frames["playlist"]) {
         top.playlist.updateTitle("Paused - " + "${model.video.title}");
      }
   } else if (obj.newstate == "BUFFERING") {
      paused = 1;
      document.title = "Buffering - " + "${model.video.title}";
      if (top.frames["playlist"]) {
         top.playlist.updateTitle("Buffering - " + "${model.video.title}");
      }
   } else if (obj.newstate == "COMPLETED") {
      paused = 1;
                if (top.frames["playlist"]) {
                   top.playlist.updateTitle();
                }
   }
}


Hope this helps!

[gurutech]

Definitely helped! For the playlist file though, I swapped the artist and title, so the song title shows first.

Wasn't too sure about the video one, so I haven't done that one yet. I don't have videos playing just yet anyway, and generally if I were to be watching videos, I wouldn't be on another tab.

Thanks for the help!

Now just to be able to find lyrics....

[gurutech]

Just found this: May help with the scrolling part, just not sure how to do this (I'm a total newb when it comes to programming!)

http://javascript.about.com/library/bltick2.htm

(I have the code correct, but can't figure out where to place the <div id="ticker"> part... I'm assuming it should be around the function skip(index) part, but when I put it there, it gives me an error on the SS page....

[ytechie]

The problem with scrolling is that in Google Chrome it doesn't work properly. Let me rephrase that: It works, but Chrome removes any spaces from the start of the title, so the scrolling is jittery.

Either way, the link you provided shows you how to add scrolling text to the body of the webpage. What you want is to scroll the title of the window.

Scrolling can be done, but I don't recommend it.

Check this out http://www.javascriptsource.com/text-ef ... e-bar.html.

[gurutech]

I think I got it, but it's not scrolling.

This is what I have:

Code: Select all

var scroller = playingTitle;
   
   function scrlsts()  {
      scroller = scroller.substring(1, scroller.length) + scroller.substring(0, 1);
      document.title = scroller;
      setTimeout("scrlsts()", 300);
   }

And then I added

Code: Select all

onLoad="scrlsts()"

into the body section, as described in your link.

If I put the "playingTitle" in quotes, it doesn't even display that. I'm guessing it's something to do with what you provided before, just not sure how to fix it.

I did know enough to make a backup of the playlist.jsp file...

[ytechie]

document.title = scroller;

Change that to "top.document.title = scroller;".

[gurutech]

Didn't work...

here's my entire playlist.jsp... I did some other modification to it... it does everything except scroll...

Code: Select all

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="iso-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
    <%@ include file="head.jsp" %>
    <script type="text/javascript" src="<c:url value="/dwr/interface/nowPlayingService.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/dwr/interface/playlistService.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/dwr/engine.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/dwr/util.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/script/prototype.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/script/scripts.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/script/swfobject.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/script/webfx/range.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/script/webfx/timer.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/script/webfx/slider.js"/>"></script>
   
    <link type="text/css" rel="stylesheet" href="<c:url value="/script/webfx/luna.css"/>">
</head>

<body class="bgcolor2 playlistframe" onLoad="init()" onLoad="scrlsts()">

<script type="text/javascript" language="javascript">
    var player = null;
    var songs = null;
    var currentAlbumUrl = null;
    var currentStreamUrl = null;
    var startPlayer = false;
    var repeatEnabled = false;
    var slider = null;
   var playing = 0;
   var finished = 1;
   var playingTitle = null;
   var scrl = null;
      
   function scrlsts() {
      scrl = scrl.substring(1, scrl.length) + scrl.substring(0, 1);
      top.document.title = scrl;
      setTimeout("scrlsts()", 300);
   }

    function init() {
        dwr.engine.setErrorHandler(null);
        startTimer();

    <c:choose>
    <c:when test="${model.player.web}">
        createPlayer();
    </c:when>
    <c:otherwise>
        getPlaylist();
    </c:otherwise>
    </c:choose>
    }

    function startTimer() {
        <!-- Periodically check if the current song has changed. -->
        nowPlayingService.getNowPlayingForCurrentPlayer(nowPlayingCallback);
        setTimeout("startTimer()", 10000);
    }

    function nowPlayingCallback(nowPlayingInfo) {
        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>
        }
    }

    function createPlayer() {
        var flashvars = {
            backcolor:"<spring:theme code="backgroundColor"/>",
            frontcolor:"<spring:theme code="textColor"/>",
            id:"player1"
        };
        var params = {
            allowfullscreen:"true",
            allowscriptaccess:"always"
        };
        var attributes = {
            id:"player1",
            name:"player1"
        };
        swfobject.embedSWF("<c:url value="/flash/jw-player-5.6.swf"/>", "placeholder", "340", "24", "9.0.0", false, flashvars, params, attributes);
    }

    function playerReady(thePlayer) {
        player = $("player1");
        player.addModelListener("STATE", "stateListener");
        getPlaylist();
    }

   function stateListener(obj) { // IDLE, BUFFERING, PLAYING, PAUSED, COMPLETED
      if (obj.newstate == "COMPLETED") {
         playing = 0;
         finished = 1;
         onNext(repeatEnabled);
      } else if (obj.newstate == "PLAYING") {
            playing = 1;
            finished = 0;
         updateTitle(scrl);
      } else if (obj.newstate == "PAUSED") {
         playing = 0;
         updateTitle("Paused - " + scrl);
      } else if (obj.newstate == "IDLE") {
         playing = 0;
         updateTitle('Subsonic');
      }
   }

    function getPlaylist() {
        playlistService.getPlaylist(playlistCallback);
    }

    function onClear() {
        var ok = true;
    <c:if test="${model.partyMode}">
        ok = confirm("<fmt:message key="playlist.confirmclear"/>");
    </c:if>
        if (ok) {
            playlistService.clear(playlistCallback);
        }
    }
    function onStart() {
        playlistService.start(playlistCallback);
    }
    function onStop() {
        playlistService.stop(playlistCallback);
    }
    function onGain(gain) {
        playlistService.setGain(gain);
    }
    function onSkip(index) {
    <c:choose>
    <c:when test="${model.player.web}">
        skip(index);
    </c:when>
    <c:otherwise>
        currentStreamUrl = songs[index].streamUrl;
        playlistService.skip(index, playlistCallback);
    </c:otherwise>
    </c:choose>
    }
    function onNext(wrap) {
        var index = parseInt(getCurrentSongIndex()) + 1;
        if (wrap) {
            index = index % songs.length;
        }
        skip(index);
    }
    function onPrevious() {
        skip(parseInt(getCurrentSongIndex()) - 1);
    }
    function onPlay(path) {
        startPlayer = true;
        playlistService.play(path, playlistCallback);
    }
    function onPlayRandom(path, count) {
        startPlayer = true;
        playlistService.playRandom(path, count, playlistCallback);
    }
    function onAdd(path) {
        startPlayer = false;
        playlistService.add(path, playlistCallback);
    }
    function onShuffle() {
        playlistService.shuffle(playlistCallback);
    }
    function onRemove(index) {
        playlistService.remove(index, playlistCallback);
    }
    function onRemoveSelected() {
        var indexes = new Array();
        var counter = 0;
        for (var i = 0; i < songs.length; i++) {
            var index = i + 1;
            if ($("songIndex" + index).checked) {
                indexes[counter++] = i;
            }
        }
        playlistService.removeMany(indexes, playlistCallback);
    }

    function onUp(index) {
        playlistService.up(index, playlistCallback);
    }
    function onDown(index) {
        playlistService.down(index, playlistCallback);
    }
    function onToggleRepeat() {
        playlistService.toggleRepeat(playlistCallback);
    }
    function onUndo() {
        playlistService.undo(playlistCallback);
    }
    function onSortByTrack() {
        playlistService.sortByTrack(playlistCallback);
    }
    function onSortByArtist() {
        playlistService.sortByArtist(playlistCallback);
    }
    function onSortByAlbum() {
        playlistService.sortByAlbum(playlistCallback);
    }

    function playlistCallback(playlist) {
        songs = playlist.entries;
        repeatEnabled = playlist.repeatEnabled;
        if ($("start")) {
            if (playlist.stopEnabled) {
                $("start").hide();
                $("stop").show();
            } else {
                $("start").show();
                $("stop").hide();
            }
        }

        if ($("toggleRepeat")) {
            var text = repeatEnabled ? "<fmt:message key="playlist.repeat_on"/>" : "<fmt:message key="playlist.repeat_off"/>";
            dwr.util.setValue("toggleRepeat", text);
        }

        if (songs.length == 0) {
            $("empty").show();
        } else {
            $("empty").hide();
        }

        // Delete all the rows except for the "pattern" row
        dwr.util.removeAllRows("playlistBody", { filter:function(tr) {
            return (tr.id != "pattern");
        }});

        // Create a new set cloned from the pattern row
        for (var i = 0; i < songs.length; i++) {
            var song  = songs[i];
            var id = i + 1;
            dwr.util.cloneNode("pattern", { idSuffix:id });
            if ($("trackNumber" + id)) {
                dwr.util.setValue("trackNumber" + id, song.trackNumber);
            }

            if ($("currentImage" + id) && song.streamUrl == currentStreamUrl) {
                $("currentImage" + id).show();
            }
            if ($("title" + id)) {
                dwr.util.setValue("title" + id, truncate(song.title));
                $("title" + id).title = song.title;
            }
            if ($("titleUrl" + id)) {
                dwr.util.setValue("titleUrl" + id, truncate(song.title));
                $("titleUrl" + id).title = song.title;
                $("titleUrl" + id).onclick = function () {onSkip(this.id.substring(8) - 1)};
            }
            if ($("album" + id)) {
                dwr.util.setValue("album" + id, truncate(song.album));
                $("album" + id).title = song.album;
                $("albumUrl" + id).href = song.albumUrl;
            }
            if ($("artist" + id)) {
                dwr.util.setValue("artist" + id, truncate(song.artist));
                $("artist" + id).title = song.artist;
            }
            if ($("genre" + id)) {
                dwr.util.setValue("genre" + id, song.genre);
            }
            if ($("year" + id)) {
                dwr.util.setValue("year" + id, song.year);
            }
            if ($("bitRate" + id)) {
                dwr.util.setValue("bitRate" + id, song.bitRate);
            }
            if ($("duration" + id)) {
                dwr.util.setValue("duration" + id, song.durationAsString);
            }
            if ($("format" + id)) {
                dwr.util.setValue("format" + id, song.format);
            }
            if ($("fileSize" + id)) {
                dwr.util.setValue("fileSize" + id, song.fileSize);
            }

            $("pattern" + id).show();
            $("pattern" + id).className = (i % 2 == 0) ? "bgcolor1" : "bgcolor2";
        }

        if (playlist.sendM3U) {
            parent.frames.main.location.href="play.m3u?";
        }

        if (slider) {
            slider.setValue(playlist.gain * 100);
        }

    <c:if test="${model.player.web}">
        triggerPlayer();
    </c:if>
    }

    function triggerPlayer() {
        if (startPlayer) {
            startPlayer = false;
            if (songs.length > 0) {
                skip(0);
            }
        }
        updateCurrentImage();
        if (songs.length == 0) {
            player.sendEvent("LOAD", new Array());
            player.sendEvent("STOP");
        }
    }

    function skip(index) {
        if (index < 0 || index >= songs.length) {
            return;
        }

        var song = songs[index];
        currentStreamUrl = song.streamUrl;
        updateCurrentImage();
        var list = new Array();
        list[0] = {
            file:song.streamUrl,
            title:song.title,
            provider:"sound"
        };

        if (song.duration != null) {
            list[0].duration = song.duration;
        }
        if (song.format == "aac" || song.format == "m4a") {
            list[0].provider = "video";
        }

        player.sendEvent("LOAD", list);
        player.sendEvent("PLAY");
      scrl = song.title + ' - ' + song.artist;
      updateTitle(song.title + ' - ' + song.artist);
    }

   function updateTitle(titleText) {
      if (titleText) {
         top.document.title = titleText;
      } else if (playing == 0 && !finished && scrl && songs.length > 0) {
         top.document.title = "Paused - " + scrl;
      } else if (playing == 1 && songs.length > 0) {
         top.document.title = scrl;
      } else {
         top.document.title = "Subsonic";
      }
   }
   
    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();
                } else {
                    image.hide();
                }
            }
        }
    }

    function getCurrentSongIndex() {
        for (var i = 0; i < songs.length; i++) {
            if (songs[i].streamUrl == currentStreamUrl) {
                return i;
            }
        }
        return -1;
    }

    function truncate(s) {
        var cutoff = ${model.visibility.captionCutoff};

        if (s.length > cutoff) {
            return s.substring(0, cutoff) + "...";
        }
        return s;
    }

    <!-- actionSelected() is invoked when the users selects from the "More actions..." combo box. -->
    function actionSelected(id) {
        if (id == "top") {
            return;
        } else if (id == "loadPlaylist") {
            parent.frames.main.location.href = "loadPlaylist.view?";
        } else if (id == "savePlaylist") {
            parent.frames.main.location.href = "savePlaylist.view?";
        } else if (id == "downloadPlaylist") {
            location.href = "download.view?player=${model.player.id}";
        } else if (id == "sharePlaylist") {
            parent.frames.main.location.href = "createShare.view?player=${model.player.id}&" + getSelectedIndexes();
        } else if (id == "sortByTrack") {
            onSortByTrack();
        } else if (id == "sortByArtist") {
            onSortByArtist();
        } else if (id == "sortByAlbum") {
            onSortByAlbum();
        } else if (id == "selectAll") {
            selectAll(true);
        } else if (id == "selectNone") {
            selectAll(false);
        } else if (id == "removeSelected") {
            onRemoveSelected();
        } else if (id == "download") {
            location.href = "download.view?player=${model.player.id}&" + getSelectedIndexes();
        } else if (id == "appendPlaylist") {
            parent.frames.main.location.href = "appendPlaylist.view?player=${model.player.id}&" + getSelectedIndexes();
        }
        $("moreActions").selectedIndex = 0;
    }

    function getSelectedIndexes() {
        var result = "";
        for (var i = 0; i < songs.length; i++) {
            if ($("songIndex" + (i + 1)).checked) {
                result += "i=" + i + "&";
            }
        }
        return result;
    }

    function selectAll(b) {
        for (var i = 0; i < songs.length; i++) {
            $("songIndex" + (i + 1)).checked = b;
        }
    }

</script>

<div class="bgcolor2" style="position:fixed; top:0; width:100%;padding-top:0.5em">
    <table style="white-space:nowrap;">
        <tr style="white-space:nowrap;">
            <c:if test="${model.user.settingsRole}">
                <td><select name="player" onChange="location='playlist.view?player=' + options[selectedIndex].value;">
                    <c:forEach items="${model.players}" var="player">
                        <option ${player.id eq model.player.id ? "selected" : ""} title="{player.ipaddress}" value="${player.id}">${player.shortDescription}</option>
                    </c:forEach>
                </select></td>
            </c:if>
            <c:if test="${model.player.web}">
                <td style="width:340px; height:24px;padding-left:10px;padding-right:10px"><div id="placeholder">
                    <a href="http://www.adobe.com/go/getflashplayer" target="_blank"><fmt:message key="playlist.getflash"/></a>
                </div></td>
            </c:if>

            <c:if test="${model.user.streamRole and not model.player.web}">
                <td style="white-space:nowrap;" id="stop"><b><a href="javascript:noop()" onClick="onStop()"><fmt:message key="playlist.stop"/></a></b> | </td>
                <td style="white-space:nowrap;" id="start"><b><a href="javascript:noop()" onClick="onStart()"><fmt:message key="playlist.start"/></a></b> | </td>
            </c:if>

            <c:if test="${model.player.jukebox}">
                <td style="white-space:nowrap;">
                    <img src="<spring:theme code="volumeImage"/>" alt="">
                </td>
                <td style="white-space:nowrap;">
                    <div class="slider bgcolor2" id="slider-1" style="width:90px">
                        <input class="slider-input" id="slider-input-1" name="slider-input-1">
                    </div>
                    <script type="text/javascript">

                        var updateGainTimeoutId = 0;
                        slider = new Slider(document.getElementById("slider-1"), document.getElementById("slider-input-1"));
                        slider.onchange = function () {
                            clearTimeout(updateGainTimeoutId);
                            updateGainTimeoutId = setTimeout("updateGain()", 250);
                        };

                        function updateGain() {
                            var gain = slider.getValue() / 100.0;
                            onGain(gain);
                        }
                    </script>
                </td>
            </c:if>

            <c:if test="${model.player.web}">
                <td style="white-space:nowrap;"><a href="javascript:noop()" onClick="onPrevious()"><b>&laquo;</b></a></td>
                <td style="white-space:nowrap;"><a href="javascript:noop()" onClick="onNext(false)"><b>&raquo;</b></a> |</td>
            </c:if>

            <td style="white-space:nowrap;"><a href="javascript:noop()" onClick="onClear()"><fmt:message key="playlist.clear"/></a> |</td>
            <td style="white-space:nowrap;"><a href="javascript:noop()" onClick="onShuffle()"><fmt:message key="playlist.shuffle"/></a> |</td>

            <c:if test="${model.player.web or model.player.jukebox or model.player.external}">
                <td style="white-space:nowrap;"><a href="javascript:noop()" onClick="onToggleRepeat()"><span id="toggleRepeat"><fmt:message key="playlist.repeat_on"/></span></a> |</td>
            </c:if>

            <td style="white-space:nowrap;"><a href="javascript:noop()" onClick="onUndo()"><fmt:message key="playlist.undo"/></a> |</td>

            <c:if test="${model.user.settingsRole}">
                <td style="white-space:nowrap;"><a href="playerSettings.view?id=${model.player.id}" target="main"><fmt:message key="playlist.settings"/></a> |</td>
            </c:if>

            <td style="white-space:nowrap;"><select id="moreActions" onChange="actionSelected(this.options[selectedIndex].id)">
                <option id="top" selected="selected"><fmt:message key="playlist.more"/></option>
                <option style="color:blue;"><fmt:message key="playlist.more.playlist"/></option>
                <option id="loadPlaylist">&nbsp;&nbsp;&nbsp;&nbsp;<fmt:message key="playlist.load"/></option>
                <c:if test="${model.user.playlistRole}">
                    <option id="savePlaylist">&nbsp;&nbsp;&nbsp;&nbsp;<fmt:message key="playlist.save"/></option>
                </c:if>
                <c:if test="${model.user.downloadRole}">
                    <option id="downloadPlaylist">&nbsp;&nbsp;&nbsp;&nbsp;<fmt:message key="common.download"/></option>
                </c:if>
                <c:if test="${model.user.shareRole}">
                    <option id="sharePlaylist">&nbsp;&nbsp;&nbsp;&nbsp;<fmt:message key="main.more.share"/></option>
                </c:if>
                <option id="sortByTrack">&nbsp;&nbsp;&nbsp;&nbsp;<fmt:message key="playlist.more.sortbytrack"/></option>
                <option id="sortByAlbum">&nbsp;&nbsp;&nbsp;&nbsp;<fmt:message key="playlist.more.sortbyalbum"/></option>
                <option id="sortByArtist">&nbsp;&nbsp;&nbsp;&nbsp;<fmt:message key="playlist.more.sortbyartist"/></option>
                <option style="color:blue;"><fmt:message key="playlist.more.selection"/></option>
                <option id="selectAll">&nbsp;&nbsp;&nbsp;&nbsp;<fmt:message key="playlist.more.selectall"/></option>
                <option id="selectNone">&nbsp;&nbsp;&nbsp;&nbsp;<fmt:message key="playlist.more.selectnone"/></option>
                <option id="removeSelected">&nbsp;&nbsp;&nbsp;&nbsp;<fmt:message key="playlist.remove"/></option>
                <c:if test="${model.user.downloadRole}">
                    <option id="download">&nbsp;&nbsp;&nbsp;&nbsp;<fmt:message key="common.download"/></option>
                </c:if>
                <c:if test="${model.user.playlistRole}">
                    <option id="appendPlaylist">&nbsp;&nbsp;&nbsp;&nbsp;<fmt:message key="playlist.append"/></option>
                </c:if>
            </select>
            </td>

        </tr></table>
</div>

<div style="height:3.2em"></div>

<p id="empty"><em><fmt:message key="playlist.empty"/></em></p>

<table style="border-collapse:collapse;white-space:nowrap;">
    <tbody id="playlistBody">
        <tr id="pattern" style="display:none;margin:0;padding:0;border:0">
            <td class="bgcolor2"><a href="javascript:noop()">
                <img id="removeSong" onClick="onRemove(this.id.substring(10) - 1)" src="<spring:theme code="removeImage"/>"
                     alt="<fmt:message key="playlist.remove"/>" title="<fmt:message key="playlist.remove"/>"></a></td>
            <td class="bgcolor2"><a href="javascript:noop()">
                <img id="up" onClick="onUp(this.id.substring(2) - 1)" src="<spring:theme code="upImage"/>"
                     alt="<fmt:message key="playlist.up"/>" title="<fmt:message key="playlist.up"/>"></a></td>
            <td class="bgcolor2"><a href="javascript:noop()">
                <img id="down" onClick="onDown(this.id.substring(4) - 1)" src="<spring:theme code="downImage"/>"
                     alt="<fmt:message key="playlist.down"/>" title="<fmt:message key="playlist.down"/>"></a></td>

            <td class="bgcolor2" style="padding-left: 0.1em"><input type="checkbox" class="checkbox" id="songIndex"></td>
            <td style="padding-right:0.25em"></td>

            <c:if test="${model.visibility.trackNumberVisible}">
                <td style="padding-right:0.5em;text-align:right"><span class="detail" id="trackNumber">1</span></td>
            </c:if>

            <td style="padding-right:1.25em">
                <img id="currentImage" src="<spring:theme code="currentImage"/>" alt="" style="display:none">
                <c:choose>
                    <c:when test="${model.player.externalWithPlaylist}">
                        <span id="title">Title</span>
                    </c:when>
                    <c:otherwise>
                        <a id="titleUrl" href="javascript:noop()">Title</a>
                    </c:otherwise>
                </c:choose>
            </td>

            <c:if test="${model.visibility.albumVisible}">
                <td style="padding-right:1.25em"><a id="albumUrl" target="main"><span id="album" class="detail">Album</span></a></td>
            </c:if>
            <c:if test="${model.visibility.artistVisible}">
                <td style="padding-right:1.25em"><span id="artist" class="detail">Artist</span></td>
            </c:if>
            <c:if test="${model.visibility.genreVisible}">
                <td style="padding-right:1.25em"><span id="genre" class="detail">Genre</span></td>
            </c:if>
            <c:if test="${model.visibility.yearVisible}">
                <td style="padding-right:1.25em"><span id="year" class="detail">Year</span></td>
            </c:if>
            <c:if test="${model.visibility.formatVisible}">
                <td style="padding-right:1.25em"><span id="format" class="detail">Format</span></td>
            </c:if>
            <c:if test="${model.visibility.fileSizeVisible}">
                <td style="padding-right:1.25em;text-align:right;"><span id="fileSize" class="detail">Format</span></td>
            </c:if>
            <c:if test="${model.visibility.durationVisible}">
                <td style="padding-right:1.25em;text-align:right;"><span id="duration" class="detail">Duration</span></td>
            </c:if>
            <c:if test="${model.visibility.bitRateVisible}">
                <td style="padding-right:0.25em"><span id="bitRate" class="detail">Bit Rate</span></td>
            </c:if>
        </tr>
    </tbody>
</table>

</body></html>

[ytechie]

The whole thing is messed up lol. Let me see if I can rewrite it for you.

[ytechie]

Here are your new custom made functions:

Code: Select all

function updateTitle(titleText) {
   clearTimeout(scrollTimer);
   if (titleText) {
     currentTitleText = titleText;
   } else if (playing == 0 && !finished && playingTitle && songs.length > 0) {
     currentTitleText = "Paused - " + playingTitle;
   } else if (playing == 1 && songs.length > 0) {
     currentTitleText = playingTitle;
   } else {
     currentTitleText = "Subsonic";
   }
   if (currentTitleText != "Subsonic") {
     currentTitleText += " | ";
   }
   scrollTitle();
}
   
   
function scrollTitle() {
   top.document.title = currentTitleText;
   if (currentTitleText != "Subsonic") {
      currentTitleText = currentTitleText.substring(1, currentTitleText.length) + currentTitleText.substring(0, 1);
      scrollTimer = setTimeout("scrollTitle()", 300);
   }
}


and these are two new variables:

Code: Select all

var currentTitleText;
var scrollTimer;


Hope this helps!

PS. - Get rid of the double onload. Leave it at "onload='init()'".

[gurutech]

Thanks! That worked! I'm just messing with the scroll speed to get it where I want, but this really works good!

Next time I'm up in the city, I owe you a beer! (If you are over 21... never know these days... lol)