shuffle play from the browser

[zosopage]

Hey all...

I have been using Subsonic for a couple years and being the dope that I am, I just found the shuffle button on the android app, but I have some friends that use my server from work, using a browser. Is there a way to do this besides doing a random playlist? A "one button" solution like the android app would be awesome, and if it is there, sorry I am missing it ...

[crooksy]

In Google Chrome there is a great extension called Perisonic which randomly shuffles songs and displays album art in the browser, you can even shuffle between genres or years in the settings. It works a charm and looks good too. I use it when I can't make up my mind what to play.

https://chrome.google.com/webstore/deta ... n?hl=en-US

[ytechie]

By the way, if anyone is interested, I could look into copying the random playlist generator to a better location, and linking it to a button that uses it to generate a random playlist upon clicking.

That would be a one-click button, no?

[zosopage]

thanks, that is exactly what I was looking for...

[ytechie]

Well, you could add a "Random" link in the "More Actions..." dropdown that would add 30 (or however many you want) songs to the playlist. I will post a post a little later when I can organize my thoughts about this. I did it to try it out, and was 100% successful, but to do it right, we need to edit two files. So I will post back soon.

[ytechie]

OK. Here we go:

This is how to add a "Random" option to the "More Actions..." dropdown in playlist.jsp.

Start editing playlist.jsp.

Here is what we are going to edit first:

Code: Select all

<!-- 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;
    }

Add an else if that looks like this:

Code: Select all

} else if (id == "randomPlaylist") {
            parent.frames.hidden.location.href = "randomPlaylist.view?size=30&genre=any&year=any&musicFolderId=-1";

Now, we are going to add the actual "Random" link to the dropdown. Here is what we are going to edit:

Code: Select all

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


I added spaces to highlight where the loadPlaylist option is.. We are going to put the random option right above it.


Here is what we are going to add:

Code: Select all

<option id="randomPlaylist">&nbsp;&nbsp;&nbsp;&nbsp;Random</option>

At this point, everything will work. However, when you select "Random" from the dropdown, it will take the main frame to more.view after filling the playlist.

If you want to prevent that from happening, edit subsonic-servlet.xml. Here is what we are going to edit:

Code: Select all

<bean id="randomPlaylistController" class="net.sourceforge.subsonic.controller.RandomPlaylistController">
        <property name="viewName" value="reload"/>
        <property name="playerService" ref="playerService"/>
        <property name="searchService" ref="searchService"/>
        <property name="reloadFrames">
            <list>
                <bean class="net.sourceforge.subsonic.controller.ReloadFrame">
                    <property name="frame" value="playlist"/>
                    <property name="view" value="playlist.view?"/>
                </bean>
           <bean class="net.sourceforge.subsonic.controller.ReloadFrame">
                    <property name="frame" value="main"/>
                    <property name="view" value="nowPlaying.view?"/>
                </bean>
            </list>
        </property>
    </bean>

Just comment the reload frame main bean like this:

Code: Select all

<bean id="randomPlaylistController" class="net.sourceforge.subsonic.controller.RandomPlaylistController">
        <property name="viewName" value="reload"/>
        <property name="playerService" ref="playerService"/>
        <property name="searchService" ref="searchService"/>
        <property name="reloadFrames">
            <list>
                <bean class="net.sourceforge.subsonic.controller.ReloadFrame">
                    <property name="frame" value="playlist"/>
                    <property name="view" value="playlist.view?"/>
                </bean>
           <!--   <bean class="net.sourceforge.subsonic.controller.ReloadFrame">
                    <property name="frame" value="main"/>
                    <property name="view" value="nowPlaying.view?"/>
                </bean>   -->
            </list>
        </property>
    </bean>

And you are done!

Hope this helps!