@ -3,14 +3,14 @@
<html><head>
<html><head>
<%@ include file="head.jsp" %>
<%@ include file="head.jsp" %>
<%@ include file="jquery.jsp" %>
<%@ include file="jquery.jsp" %>
<script type="text/javascript" src="<c:url value="/script/utils.js" />"></script>
<script type="text/javascript" src="<c:url value='/script/utils.js' />"></script>
<script type="text/javascript" src="<c:url value="/dwr/interface/nowPlayingService.js" />"></script>
<script type="text/javascript" src="<c:url value='/dwr/interface/nowPlayingService.js' />"></script>
<script type="text/javascript" src="<c:url value="/dwr/interface/playQueueService.js" />"></script>
<script type="text/javascript" src="<c:url value='/dwr/interface/playQueueService.js' />"></script>
<script type="text/javascript" src="<c:url value="/dwr/interface/playlistService.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/engine.js' />"></script>
<script type="text/javascript" src="<c:url value="/dwr/util.js" />"></script>
<script type="text/javascript" src="<c:url value='/dwr/util.js' />"></script>
<script type="text/javascript" src="<c:url value="/script/mediaelement/mediaelement-and-player.min.js" />"></script>
<script type="text/javascript" src="<c:url value='/script/mediaelement/mediaelement-and-player.min.js' />"></script>
<script type="text/javascript" src="<c:url value="/script/playQueueCast.js" />"></script>
<script type="text/javascript" src="<c:url value='/script/playQueueCast.js' />"></script>
<style type="text/css">
<style type="text/css">
.ui-slider .ui-slider-handle {
.ui-slider .ui-slider-handle {
width: 11px;
width: 11px;
@ -836,14 +836,14 @@
<c:if test="${model.player.web}">
<c:if test="${model.player.web}">
<td>
<td>
<div id="player" style="width:340px; height:40px">
<div id="player" style="width:340px; height:40px">
<audio id="audioPlayer" data-mejsoptions='{"alwaysShowControls": true, "enableKeyboard": false}' width="340px" height"40px" tabindex="-1" />
<audio id="audioPlayer" data-mejsoptions='{"alwaysShowControls": true, "enableKeyboard": false}' width="340px" height= "40px" tabindex="-1" />
</div>
</div>
<div id="castPlayer" style="display: none">
<div id="castPlayer" style="display: none">
<div style="float:left">
<div style="float:left">
<img alt="Play" id="castPlay" src="<spring:theme code="castPlayImage" />" onclick="CastPlayer.playCast()" style="cursor:pointer">
<img alt="Play" id="castPlay" src="<spring:theme code='castPlayImage' />" onclick="CastPlayer.playCast()" style="cursor:pointer">
<img alt="Pause" id="castPause" src="<spring:theme code="castPauseImage" />" onclick="CastPlayer.pauseCast()" style="cursor:pointer; display:none">
<img alt="Pause" id="castPause" src="<spring:theme code='castPauseImage' />" onclick="CastPlayer.pauseCast()" style="cursor:pointer; display:none">
<img alt="Mute on" id="castMuteOn" src="<spring:theme code="volumeImage" />" onclick="CastPlayer.castMuteOn()" style="cursor:pointer">
<img alt="Mute on" id="castMuteOn" src="<spring:theme code='volumeImage' />" onclick="CastPlayer.castMuteOn()" style="cursor:pointer">
<img alt="Mute off" id="castMuteOff" src="<spring:theme code="muteImage" />" onclick="CastPlayer.castMuteOff()" style="cursor:pointer; display:none">
<img alt="Mute off" id="castMuteOff" src="<spring:theme code='muteImage' />" onclick="CastPlayer.castMuteOff()" style="cursor:pointer; display:none">
</div>
</div>
<div style="float:left">
<div style="float:left">
<div id="castVolume" style="width:80px;height:4px;margin-left:10px;margin-right:10px;margin-top:8px"></div>
<div id="castVolume" style="width:80px;height:4px;margin-left:10px;margin-right:10px;margin-top:8px"></div>
@ -855,21 +855,21 @@
</div>
</div>
</td>
</td>
<td>
<td>
<img alt="Cast on" id="castOn" src="<spring:theme code="castIdleImage" />" onclick="CastPlayer.launchCastApp()" style="cursor:pointer; display:none">
<img alt="Cast on" id="castOn" src="<spring:theme code='castIdleImage' />" onclick="CastPlayer.launchCastApp()" style="cursor:pointer; display:none">
<img alt="Cast off" id="castOff" src="<spring:theme code="castActiveImage" />" onclick="CastPlayer.stopCastApp()" style="cursor:pointer; display:none">
<img alt="Cast off" id="castOff" src="<spring:theme code='castActiveImage' />" onclick="CastPlayer.stopCastApp()" style="cursor:pointer; display:none">
</td>
</td>
</c:if>
</c:if>
<c:if test="${model.user.streamRole and not model.player.web}">
<c:if test="${model.user.streamRole and not model.player.web}">
<td>
<td>
<img alt="Start" id="start" src="<spring:theme code="castPlayImage" />" onclick="onStart()" style="cursor:pointer">
<img alt="Start" id="start" src="<spring:theme code='castPlayImage' />" onclick="onStart()" style="cursor:pointer">
<img alt="Stop" id="stop" src="<spring:theme code="castPauseImage" />" onclick="onStop()" style="cursor:pointer; display:none">
<img alt="Stop" id="stop" src="<spring:theme code='castPauseImage' />" onclick="onStop()" style="cursor:pointer; display:none">
</td>
</td>
</c:if>
</c:if>
<c:if test="${model.player.jukebox}">
<c:if test="${model.player.jukebox}">
<td style="white-space:nowrap;">
<td style="white-space:nowrap;">
<img src="<spring:theme code="volumeImage" />" alt="">
<img src="<spring:theme code='volumeImage' />" alt="">
</td>
</td>
<td style="white-space:nowrap;">
<td style="white-space:nowrap;">
<div id="jukeboxVolume" style="width:80px;height:4px"></div>
<div id="jukeboxVolume" style="width:80px;height:4px"></div>
@ -882,24 +882,24 @@
<c:if test="${model.player.web}">
<c:if test="${model.player.web}">
<td><span class="header">
<td><span class="header">
<img src="<spring:theme code="backImage" />" alt="Play next" title="Play next" onclick="onPrevious()" style="cursor:pointer"></span>
<img src="<spring:theme code='backImage' />" alt="Play next" title="Play next" onclick="onPrevious()" style="cursor:pointer"></span>
</td>
</td>
<td><span class="header">
<td><span class="header">
<img src="<spring:theme code="forwardImage" />" alt="Play next" title="Play next" onclick="onNext(false)" style="cursor:pointer"></span> |
<img src="<spring:theme code='forwardImage' />" alt="Play next" title="Play next" onclick="onNext(false)" style="cursor:pointer"></span> |
</td>
</td>
</c:if>
</c:if>
<td style="white-space:nowrap;">
<td style="white-space:nowrap;">
<span class="header">
<span class="header">
<a href="javascript:onClear()" class="player-control">
<a href="javascript:onClear()" class="player-control">
<img src="<spring:theme code="clearImage" />" alt="Clear playlist" title="Clear playlist" style="cursor:pointer; height:18px">
<img src="<spring:theme code='clearImage' />" alt="Clear playlist" title="Clear playlist" style="cursor:pointer; height:18px">
</a>
</a>
</span> |</td>
</span> |</td>
<td style="white-space:nowrap;">
<td style="white-space:nowrap;">
<span class="header">
<span class="header">
<a href="javascript:onShuffle()" id="shuffleQueue" class="player-control">
<a href="javascript:onShuffle()" id="shuffleQueue" class="player-control">
<img src="<spring:theme code="shuffleImage" />" alt="Shuffle" title="Shuffle" style="cursor:pointer; height:18px">
<img src="<spring:theme code='shuffleImage' />" alt="Shuffle" title="Shuffle" style="cursor:pointer; height:18px">
</a>
</a>
</span> |</td>
</span> |</td>
@ -907,7 +907,7 @@
<td style="white-space:nowrap;">
<td style="white-space:nowrap;">
<span class="header">
<span class="header">
<a href="javascript:onToggleRepeat()" id="repeatQueue" class="player-control">
<a href="javascript:onToggleRepeat()" id="repeatQueue" class="player-control">
<img id="toggleRepeat" src="<spring:theme code="repeatOn" />" alt="Toggle repeat" title="Toggle repeat" style="cursor:pointer; height:18px">
<img id="toggleRepeat" src="<spring:theme code='repeatOn' />" alt="Toggle repeat" title="Toggle repeat" style="cursor:pointer; height:18px">
</a>
</a>
</span> |</td>
</span> |</td>
</c:if>
</c:if>
@ -915,7 +915,7 @@
<td style="white-space:nowrap;">
<td style="white-space:nowrap;">
<span class="header">
<span class="header">
<a href="javascript:onUndo()" id="undoQueue" class="player-control">
<a href="javascript:onUndo()" id="undoQueue" class="player-control">
<img src="<spring:theme code="undoImage" />" alt="Undo" title="Undo" style="cursor:pointer; height:18px">
<img src="<spring:theme code='undoImage' />" alt="Undo" title="Undo" style="cursor:pointer; height:18px">
</a>
</a>
</span> |</td>
</span> |</td>
@ -923,14 +923,14 @@
<td style="white-space:nowrap;">
<td style="white-space:nowrap;">
<span class="header">
<span class="header">
<a href="playerSettings.view?id=${model.player.id}" target="main" class="player-control">
<a href="playerSettings.view?id=${model.player.id}" target="main" class="player-control">
<img src="<spring:theme code="settingsImage" />" alt="Settings" title="Settings" style="cursor:pointer; height:18px">
<img src="<spring:theme code='settingsImage' />" alt="Settings" title="Settings" style="cursor:pointer; height:18px">
</a>
</a>
</span> |</td>
</span> |</td>
</c:if>
</c:if>
<td style="white-space:nowrap;"><select id="moreActions" onchange="actionSelected(this.options[selectedIndex].id)">
<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 id="top" selected="selected"><fmt:message key="playlist.more"/></option>
<optgroup label="<fmt:message key="playlist.more.playlist" />">
<optgroup label="<fmt:message key='playlist.more.playlist' />">
<option id="savePlayQueue"><fmt:message key="playlist.saveplayqueue"/></option>
<option id="savePlayQueue"><fmt:message key="playlist.saveplayqueue"/></option>
<option id="loadPlayQueue"><fmt:message key="playlist.loadplayqueue"/></option>
<option id="loadPlayQueue"><fmt:message key="playlist.loadplayqueue"/></option>
<option id="savePlaylist"><fmt:message key="playlist.save"/></option>
<option id="savePlaylist"><fmt:message key="playlist.save"/></option>
@ -944,7 +944,7 @@
<option id="sortByAlbum"><fmt:message key="playlist.more.sortbyalbum"/></option>
<option id="sortByAlbum"><fmt:message key="playlist.more.sortbyalbum"/></option>
<option id="sortByArtist"><fmt:message key="playlist.more.sortbyartist"/></option>
<option id="sortByArtist"><fmt:message key="playlist.more.sortbyartist"/></option>
</optgroup>
</optgroup>
<optgroup label="<fmt:message key="playlist.more.selection" />">
<optgroup label="<fmt:message key='playlist.more.selection' />">
<option id="selectAll"><fmt:message key="playlist.more.selectall"/></option>
<option id="selectAll"><fmt:message key="playlist.more.selectall"/></option>
<option id="selectNone"><fmt:message key="playlist.more.selectnone"/></option>
<option id="selectNone"><fmt:message key="playlist.more.selectnone"/></option>
<option id="removeSelected"><fmt:message key="playlist.remove"/></option>
<option id="removeSelected"><fmt:message key="playlist.remove"/></option>
@ -971,11 +971,11 @@
<tbody id="playlistBody">
<tbody id="playlistBody">
<tr id="pattern" style="display:none;margin:0;padding:0;border:0">
<tr id="pattern" style="display:none;margin:0;padding:0;border:0">
<td class="fit">
<td class="fit">
<img id="starSong" onclick="onStar(this.id.substring(8) - 1)" src="<spring:theme code="ratingOffImage" />"
<img id="starSong" onclick="onStar(this.id.substring(8) - 1)" src="<spring:theme code='ratingOffImage' />"
style="cursor:pointer;height:18px;" alt="" title=""></td>
style="cursor:pointer;height:18px;" alt="" title=""></td>
<td class="fit">
<td class="fit">
<img id="removeSong" onclick="onRemove(this.id.substring(10) - 1)" src="<spring:theme code="removeImage" />"
<img id="removeSong" onclick="onRemove(this.id.substring(10) - 1)" src="<spring:theme code='removeImage' />"
style="cursor:pointer; height:18px;" alt="<fmt:message key="playlist.remove"/>" title="<fmt:message key="playlist.remove" />"></td>
style="cursor:pointer; height:18px;" alt="<fmt:message key='playlist.remove'/>" title="<fmt:message key='playlist.remove' />"></td>
<td class="fit"><input type="checkbox" class="checkbox" id="songIndex"></td>
<td class="fit"><input type="checkbox" class="checkbox" id="songIndex"></td>
<c:if test="${model.visibility.trackNumberVisible}">
<c:if test="${model.visibility.trackNumberVisible}">
@ -983,7 +983,7 @@
</c:if>
</c:if>
<td class="truncate">
<td class="truncate">
<img id="currentImage" src="<spring:theme code="currentImage" />" alt="" style="display:none;padding-right: 0.5em">
<img id="currentImage" src="<spring:theme code='currentImage' />" alt="" style="display:none;padding-right: 0.5em">
<c:choose>
<c:choose>
<c:when test="${model.player.externalWithPlaylist}">
<c:when test="${model.player.externalWithPlaylist}">
<span id="title" class="songTitle">Title</span>
<span id="title" class="songTitle">Title</span>
@ -1024,7 +1024,7 @@
<div style="height:3.2em"></div>
<div style="height:3.2em"></div>
<div id="dialog-select-playlist" title="<fmt:message key="main.addtoplaylist.title" />" style="display: none;">
<div id="dialog-select-playlist" title="<fmt:message key='main.addtoplaylist.title' />" style="display: none;">
<p><fmt:message key="main.addtoplaylist.text"/></p>
<p><fmt:message key="main.addtoplaylist.text"/></p>
<div id="dialog-select-playlist-list"></div>
<div id="dialog-select-playlist-list"></div>
</div>
</div>