Introduction of a new kind of jukebox player based on the javasound api.
This commit is contained in:
Rémi Cocula
@@ -0,0 +1,35 @@
|
||||
<div id="javaJukeboxPlayerControlBar" class="bgcolor2" style="position:fixed; bottom:0; width:100%;padding-top:10px;padding-bottom: 5px">
|
||||
<table style="white-space:nowrap;">
|
||||
<tr style="white-space:nowrap;">
|
||||
<c:if test="${model.user.settingsRole and fn:length(model.players) gt 1}">
|
||||
<td style="padding-right: 5px">
|
||||
<select name="player" onchange="location='playQueue.view?player=' + options[selectedIndex].value;">
|
||||
<c:forEach items="${model.players}" var="player">
|
||||
<option ${player.id eq model.player.id ? "selected" : ""} value="${player.id}">${player.shortDescription}</option>
|
||||
</c:forEach>
|
||||
</select>
|
||||
</td>
|
||||
</c:if>
|
||||
<td>
|
||||
<img id="startIcon" src="<spring:theme code="castPlayImage"/>" onclick="onJavaJukeboxStart()" style="cursor:pointer">
|
||||
<img id="pauseIcon" src="<spring:theme code="castPauseImage"/>" onclick="onJavaJukeboxStop()" style="cursor:pointer; display:none">
|
||||
</td>
|
||||
<td><span id="playingPositionDisplay" class="javaJukeBoxPlayerControlBarSongTime"/></td>
|
||||
<td style="white-space:nowrap;">
|
||||
<div id="javaJukeboxSongPositionSlider"></div>
|
||||
</td>
|
||||
<td><span id="playingDurationDisplay" class="javaJukeBoxPlayerControlBarSongTime"/></td>
|
||||
<td style="white-space:nowrap;">
|
||||
<img src="<spring:theme code="volumeImage"/>" alt="">
|
||||
</td>
|
||||
<td style="white-space:nowrap;">
|
||||
<div id="javaJukeboxVolumeSlider" style="width:80px;height:4px"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="<c:url value='/script/playQueue/javaJukeboxPlayerControlBar.js'/>"></script>
|
||||
<script type="text/javascript">
|
||||
initJavaJukeboxPlayerControlBar();
|
||||
</script>
|
||||
@@ -3,6 +3,7 @@
|
||||
<html><head>
|
||||
<%@ include file="head.jsp" %>
|
||||
<%@ include file="jquery.jsp" %>
|
||||
<script type="text/javascript" src="<c:url value="/script/moment-2.18.1.min.js"/>"></script>
|
||||
<link type="text/css" rel="stylesheet" href="<c:url value="/script/webfx/luna.css"/>">
|
||||
<script type="text/javascript" src="<c:url value="/script/scripts-2.0.js"/>"></script>
|
||||
<script type="text/javascript" src="<c:url value="/dwr/interface/nowPlayingService.js"/>"></script>
|
||||
@@ -257,6 +258,9 @@
|
||||
</c:when>
|
||||
<c:otherwise>
|
||||
currentStreamUrl = songs[index].streamUrl;
|
||||
if (isJavaJukeboxPresent()) {
|
||||
updateJavaJukeboxPlayerControlBar(songs[index]);
|
||||
}
|
||||
playQueueService.skip(index, playQueueCallback);
|
||||
</c:otherwise>
|
||||
</c:choose>
|
||||
@@ -399,6 +403,10 @@
|
||||
});
|
||||
}
|
||||
|
||||
function isJavaJukeboxPresent() {
|
||||
return $("#javaJukeboxPlayerControlBarContainer").length==1;
|
||||
}
|
||||
|
||||
function playQueueCallback(playQueue) {
|
||||
songs = playQueue.entries;
|
||||
repeatEnabled = playQueue.repeatEnabled;
|
||||
@@ -446,6 +454,9 @@
|
||||
}
|
||||
if ($("#currentImage" + id) && song.streamUrl == currentStreamUrl) {
|
||||
$("#currentImage" + id).show();
|
||||
if (isJavaJukeboxPresent()) {
|
||||
updateJavaJukeboxPlayerControlBar(song);
|
||||
}
|
||||
}
|
||||
if ($("#title" + id)) {
|
||||
$("#title" + id).html(song.title);
|
||||
@@ -658,115 +669,125 @@
|
||||
|
||||
</script>
|
||||
|
||||
<div class="bgcolor2" style="position:fixed; bottom:0; width:100%;padding-top:10px;">
|
||||
<table style="white-space:nowrap;">
|
||||
<tr style="white-space:nowrap;">
|
||||
<c:if test="${model.user.settingsRole and fn:length(model.players) gt 1}">
|
||||
<td style="padding-right: 5px"><select name="player" onchange="location='playQueue.view?player=' + options[selectedIndex].value;">
|
||||
<c:forEach items="${model.players}" var="player">
|
||||
<option ${player.id eq model.player.id ? "selected" : ""} value="${player.id}">${player.shortDescription}</option>
|
||||
</c:forEach>
|
||||
</select></td>
|
||||
</c:if>
|
||||
<c:if test="${model.player.web}">
|
||||
<td>
|
||||
<div id="player" style="width:340px; height:40px;padding-right:10px">
|
||||
<audio id="audioPlayer" class="mejs__player" data-mejsoptions='{"alwaysShowControls": "true"}' width="340px" height"40px"/>
|
||||
</div>
|
||||
<div id="castPlayer" style="display: none">
|
||||
<div style="float:left">
|
||||
<img id="castPlay" src="<spring:theme code="castPlayImage"/>" onclick="CastPlayer.playCast()" style="cursor:pointer">
|
||||
<img id="castPause" src="<spring:theme code="castPauseImage"/>" onclick="CastPlayer.pauseCast()" style="cursor:pointer; display:none">
|
||||
<img id="castMuteOn" src="<spring:theme code="volumeImage"/>" onclick="CastPlayer.castMuteOn()" style="cursor:pointer">
|
||||
<img id="castMuteOff" src="<spring:theme code="muteImage"/>" onclick="CastPlayer.castMuteOff()" style="cursor:pointer; display:none">
|
||||
</div>
|
||||
<div style="float:left">
|
||||
<div id="castVolume" style="width:80px;height:4px;margin-left:10px;margin-right:10px;margin-top:8px"></div>
|
||||
<c:choose>
|
||||
<c:when test="${model.player.javaJukebox}">
|
||||
<div id="javaJukeboxPlayerControlBarContainer">
|
||||
<%@ include file="javaJukeboxPlayerControlBar.jspf" %>
|
||||
</div>
|
||||
</c:when>
|
||||
<c:otherwise>
|
||||
<div class="bgcolor2" style="position:fixed; bottom:0; width:100%;padding-top:10px;">
|
||||
<table style="white-space:nowrap;">
|
||||
<tr style="white-space:nowrap;">
|
||||
<c:if test="${model.user.settingsRole and fn:length(model.players) gt 1}">
|
||||
<td style="padding-right: 5px"><select name="player" onchange="location='playQueue.view?player=' + options[selectedIndex].value;">
|
||||
<c:forEach items="${model.players}" var="player">
|
||||
<option ${player.id eq model.player.id ? "selected" : ""} value="${player.id}">${player.shortDescription}</option>
|
||||
</c:forEach>
|
||||
</select></td>
|
||||
</c:if>
|
||||
<c:if test="${model.player.web}">
|
||||
<td>
|
||||
<div id="player" style="width:340px; height:40px;padding-right:10px">
|
||||
<audio id="audioPlayer" class="mejs__player" data-mejsoptions='{"alwaysShowControls": "true"}' width="340px" height"40px"/>
|
||||
</div>
|
||||
<div id="castPlayer" style="display: none">
|
||||
<div style="float:left">
|
||||
<img id="castPlay" src="<spring:theme code="castPlayImage"/>" onclick="CastPlayer.playCast()" style="cursor:pointer">
|
||||
<img id="castPause" src="<spring:theme code="castPauseImage"/>" onclick="CastPlayer.pauseCast()" style="cursor:pointer; display:none">
|
||||
<img id="castMuteOn" src="<spring:theme code="volumeImage"/>" onclick="CastPlayer.castMuteOn()" style="cursor:pointer">
|
||||
<img id="castMuteOff" src="<spring:theme code="muteImage"/>" onclick="CastPlayer.castMuteOff()" style="cursor:pointer; display:none">
|
||||
</div>
|
||||
<div style="float:left">
|
||||
<div id="castVolume" style="width:80px;height:4px;margin-left:10px;margin-right:10px;margin-top:8px"></div>
|
||||
<script type="text/javascript">
|
||||
$("#castVolume").slider({max: 100, value: 50, animate: "fast", range: "min"});
|
||||
$("#castVolume").on("slidestop", onCastVolumeChanged);
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<img id="castOn" src="<spring:theme code="castIdleImage"/>" onclick="CastPlayer.launchCastApp()" style="cursor:pointer; display:none">
|
||||
<img id="castOff" src="<spring:theme code="castActiveImage"/>" onclick="CastPlayer.stopCastApp()" style="cursor:pointer; display:none">
|
||||
</td>
|
||||
</c:if>
|
||||
|
||||
<c:if test="${model.user.streamRole and not model.player.web}">
|
||||
<td>
|
||||
<img id="start" src="<spring:theme code="castPlayImage"/>" onclick="onStart()" style="cursor:pointer">
|
||||
<img id="stop" src="<spring:theme code="castPauseImage"/>" onclick="onStop()" style="cursor:pointer; display:none">
|
||||
</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 id="jukeboxVolume" style="width:80px;height:4px"></div>
|
||||
<script type="text/javascript">
|
||||
$("#castVolume").slider({max: 100, value: 50, animate: "fast", range: "min"});
|
||||
$("#castVolume").on("slidestop", onCastVolumeChanged);
|
||||
$("#jukeboxVolume").slider({max: 100, value: 50, animate: "fast", range: "min"});
|
||||
$("#jukeboxVolume").on("slidestop", onJukeboxVolumeChanged);
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<img id="castOn" src="<spring:theme code="castIdleImage"/>" onclick="CastPlayer.launchCastApp()" style="cursor:pointer; display:none">
|
||||
<img id="castOff" src="<spring:theme code="castActiveImage"/>" onclick="CastPlayer.stopCastApp()" style="cursor:pointer; display:none">
|
||||
</td>
|
||||
</c:if>
|
||||
|
||||
<c:if test="${model.user.streamRole and not model.player.web}">
|
||||
<td>
|
||||
<img id="start" src="<spring:theme code="castPlayImage"/>" onclick="onStart()" style="cursor:pointer">
|
||||
<img id="stop" src="<spring:theme code="castPauseImage"/>" onclick="onStop()" style="cursor:pointer; display:none">
|
||||
</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 id="jukeboxVolume" style="width:80px;height:4px"></div>
|
||||
<script type="text/javascript">
|
||||
$("#jukeboxVolume").slider({max: 100, value: 50, animate: "fast", range: "min"});
|
||||
$("#jukeboxVolume").on("slidestop", onJukeboxVolumeChanged);
|
||||
</script>
|
||||
</td>
|
||||
</c:if>
|
||||
|
||||
<c:if test="${model.player.web}">
|
||||
<td><span class="header">
|
||||
<img src="<spring:theme code="backImage"/>" alt="" onclick="onPrevious()" style="cursor:pointer"></span>
|
||||
</td>
|
||||
<td><span class="header">
|
||||
<img src="<spring:theme code="forwardImage"/>" alt="" onclick="onNext(false)" style="cursor:pointer"></span>
|
||||
</td>
|
||||
</c:if>
|
||||
|
||||
<td style="white-space:nowrap;"><span class="header"><a href="javascript:onClear()"><fmt:message key="playlist.clear"/></a></span> |</td>
|
||||
<td style="white-space:nowrap;"><span class="header"><a href="javascript:onShuffle()"><fmt:message key="playlist.shuffle"/></a></span> |</td>
|
||||
|
||||
<c:if test="${model.player.web or model.player.jukebox or model.player.external}">
|
||||
<td style="white-space:nowrap;"><span class="header"><a href="javascript:onToggleRepeat()"><span id="toggleRepeat"><fmt:message key="playlist.repeat_on"/></span></a></span> |</td>
|
||||
</c:if>
|
||||
|
||||
<td style="white-space:nowrap;"><span class="header"><a href="javascript:onUndo()"><fmt:message key="playlist.undo"/></a></span> |</td>
|
||||
|
||||
<c:if test="${model.user.settingsRole}">
|
||||
<td style="white-space:nowrap;"><span class="header"><a href="playerSettings.view?id=${model.player.id}" target="main"><fmt:message key="playlist.settings"/></a></span> |</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>
|
||||
<optgroup label="<fmt:message key="playlist.more.playlist"/>">
|
||||
<option id="savePlayQueue"><fmt:message key="playlist.saveplayqueue"/></option>
|
||||
<option id="loadPlayQueue"><fmt:message key="playlist.loadplayqueue"/></option>
|
||||
<option id="savePlaylist"><fmt:message key="playlist.save"/></option>
|
||||
<c:if test="${model.user.downloadRole}">
|
||||
<option id="downloadPlaylist"><fmt:message key="common.download"/></option>
|
||||
</td>
|
||||
</c:if>
|
||||
<c:if test="${model.user.shareRole}">
|
||||
<option id="sharePlaylist"><fmt:message key="main.more.share"/></option>
|
||||
</c:if>
|
||||
<option id="sortByTrack"><fmt:message key="playlist.more.sortbytrack"/></option>
|
||||
<option id="sortByAlbum"><fmt:message key="playlist.more.sortbyalbum"/></option>
|
||||
<option id="sortByArtist"><fmt:message key="playlist.more.sortbyartist"/></option>
|
||||
</optgroup>
|
||||
<optgroup label="<fmt:message key="playlist.more.selection"/>">
|
||||
<option id="selectAll"><fmt:message key="playlist.more.selectall"/></option>
|
||||
<option id="selectNone"><fmt:message key="playlist.more.selectnone"/></option>
|
||||
<option id="removeSelected"><fmt:message key="playlist.remove"/></option>
|
||||
<c:if test="${model.user.downloadRole}">
|
||||
<option id="download"><fmt:message key="common.download"/></option>
|
||||
</c:if>
|
||||
<option id="appendPlaylist"><fmt:message key="playlist.append"/></option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</td>
|
||||
|
||||
</tr></table>
|
||||
</div>
|
||||
<c:if test="${model.player.web}">
|
||||
<td><span class="header">
|
||||
<img src="<spring:theme code="backImage"/>" alt="" onclick="onPrevious()" style="cursor:pointer"></span>
|
||||
</td>
|
||||
<td><span class="header">
|
||||
<img src="<spring:theme code="forwardImage"/>" alt="" onclick="onNext(false)" style="cursor:pointer"></span>
|
||||
</td>
|
||||
</c:if>
|
||||
|
||||
<td style="white-space:nowrap;"><span class="header"><a href="javascript:onClear()"><fmt:message key="playlist.clear"/></a></span> |</td>
|
||||
<td style="white-space:nowrap;"><span class="header"><a href="javascript:onShuffle()"><fmt:message key="playlist.shuffle"/></a></span> |</td>
|
||||
|
||||
<c:if test="${model.player.web or model.player.jukebox or model.player.external}">
|
||||
<td style="white-space:nowrap;"><span class="header"><a href="javascript:onToggleRepeat()"><span id="toggleRepeat"><fmt:message key="playlist.repeat_on"/></span></a></span> |</td>
|
||||
</c:if>
|
||||
|
||||
<td style="white-space:nowrap;"><span class="header"><a href="javascript:onUndo()"><fmt:message key="playlist.undo"/></a></span> |</td>
|
||||
|
||||
<c:if test="${model.user.settingsRole}">
|
||||
<td style="white-space:nowrap;"><span class="header"><a href="playerSettings.view?id=${model.player.id}" target="main"><fmt:message key="playlist.settings"/></a></span> |</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>
|
||||
<optgroup label="<fmt:message key="playlist.more.playlist"/>">
|
||||
<option id="savePlayQueue"><fmt:message key="playlist.saveplayqueue"/></option>
|
||||
<option id="loadPlayQueue"><fmt:message key="playlist.loadplayqueue"/></option>
|
||||
<option id="savePlaylist"><fmt:message key="playlist.save"/></option>
|
||||
<c:if test="${model.user.downloadRole}">
|
||||
<option id="downloadPlaylist"><fmt:message key="common.download"/></option>
|
||||
</c:if>
|
||||
<c:if test="${model.user.shareRole}">
|
||||
<option id="sharePlaylist"><fmt:message key="main.more.share"/></option>
|
||||
</c:if>
|
||||
<option id="sortByTrack"><fmt:message key="playlist.more.sortbytrack"/></option>
|
||||
<option id="sortByAlbum"><fmt:message key="playlist.more.sortbyalbum"/></option>
|
||||
<option id="sortByArtist"><fmt:message key="playlist.more.sortbyartist"/></option>
|
||||
</optgroup>
|
||||
<optgroup label="<fmt:message key="playlist.more.selection"/>">
|
||||
<option id="selectAll"><fmt:message key="playlist.more.selectall"/></option>
|
||||
<option id="selectNone"><fmt:message key="playlist.more.selectnone"/></option>
|
||||
<option id="removeSelected"><fmt:message key="playlist.remove"/></option>
|
||||
<c:if test="${model.user.downloadRole}">
|
||||
<option id="download"><fmt:message key="common.download"/></option>
|
||||
</c:if>
|
||||
<option id="appendPlaylist"><fmt:message key="playlist.append"/></option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</td>
|
||||
|
||||
</tr></table>
|
||||
</div>
|
||||
</c:otherwise>
|
||||
</c:choose>
|
||||
|
||||
|
||||
<h2 style="float:left"><fmt:message key="playlist.more.playlist"/></h2>
|
||||
<h2 id="songCountAndDuration" style="float:right;padding-right:1em"></h2>
|
||||
|
||||
@@ -10,6 +10,34 @@
|
||||
<script type="text/javascript" src="<c:url value="/script/wz_tooltip.js"/>"></script>
|
||||
<script type="text/javascript" src="<c:url value="/script/tip_balloon.js"/>"></script>
|
||||
|
||||
<script lang="javascript">
|
||||
|
||||
function hideAllTechnologyDepends() {
|
||||
$('.technologyDepends').hide();
|
||||
}
|
||||
|
||||
function showTechnologyDepends(technologyName) {
|
||||
var selector = '.technologyDepends.' + technologyName;
|
||||
$(selector).show();
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
$('.technologyRadio').click(function() {
|
||||
hideAllTechnologyDepends();
|
||||
var technologyName = $(this).val();
|
||||
showTechnologyDepends(technologyName);
|
||||
});
|
||||
|
||||
hideAllTechnologyDepends();
|
||||
$('.technologyRadio:checked').each(function() {
|
||||
var technologyName = $(this).val();
|
||||
showTechnologyDepends(technologyName);
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<c:import url="settingsHeader.jsp">
|
||||
<c:param name="cat" value="player"/>
|
||||
<c:param name="toast" value="${settings_toast}"/>
|
||||
@@ -60,7 +88,7 @@
|
||||
|
||||
<tr>
|
||||
<td class="ruleTableHeader">
|
||||
<form:radiobutton id="radio-${technologyName}" path="technologyName" value="${technologyHolder.name}"/>
|
||||
<form:radiobutton class="technologyRadio" id="radio-${technologyName}" path="technologyName" value="${technologyHolder.name}"/>
|
||||
<b><label for="radio-${technologyName}">${technologyName}</label></b>
|
||||
</td>
|
||||
<td class="ruleTableCell" style="width:40em">
|
||||
@@ -87,14 +115,27 @@
|
||||
</table>
|
||||
|
||||
<table class="indent" style="border-spacing:3pt;">
|
||||
|
||||
<tr>
|
||||
<td><fmt:message key="playersettings.name"/></td>
|
||||
<td><form:input path="name" size="16"/></td>
|
||||
<td colspan="2"><c:import url="helpToolTip.jsp"><c:param name="topic" value="playername"/></c:import></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<tr class="technologyDepends JAVA_JUKEBOX">
|
||||
<td><fmt:message key="playersettings.javaJukeboxMixer"/></td>
|
||||
<td>
|
||||
<form:select path="javaJukeboxMixer">
|
||||
<c:forEach items="${command.javaJukeboxMixers}" var="javaJukeboxMixer">
|
||||
<form:option value="${javaJukeboxMixer}" label="${javaJukeboxMixer}"/>
|
||||
</c:forEach>
|
||||
</form:select>
|
||||
</td>
|
||||
<td colspan="2"></td>
|
||||
</tr>
|
||||
|
||||
|
||||
<%// Max bitrate %>
|
||||
<tr class="technologyDepends WEB EXTERNAL EXTERNAL_WITH_PLAYLIST JUKEBOX">
|
||||
<td><fmt:message key="playersettings.maxbitrate"/></td>
|
||||
<td>
|
||||
<form:select path="transcodeSchemeName" cssStyle="width:8em">
|
||||
@@ -112,59 +153,56 @@
|
||||
</c:if>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
<table class="indent" style="border-spacing:3pt">
|
||||
<table class="indent technologyDepends WEB EXTERNAL EXTERNAL_WITH_PLAYLIST JUKEBOX" style="border-spacing:3pt">
|
||||
<tr>
|
||||
<td>
|
||||
<form:checkbox path="dynamicIp" id="dynamicIp" cssClass="checkbox"/>
|
||||
<label for="dynamicIp"><fmt:message key="playersettings.dynamicip"/></label>
|
||||
</td>
|
||||
<td><c:import url="helpToolTip.jsp"><c:param name="topic" value="dynamicip"/></c:import></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<form:checkbox path="dynamicIp" id="dynamicIp" cssClass="checkbox"/>
|
||||
<label for="dynamicIp"><fmt:message key="playersettings.dynamicip"/></label>
|
||||
</td>
|
||||
<td><c:import url="helpToolTip.jsp"><c:param name="topic" value="dynamicip"/></c:import></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<form:checkbox path="autoControlEnabled" id="autoControlEnabled" cssClass="checkbox"/>
|
||||
<label for="autoControlEnabled"><fmt:message key="playersettings.autocontrol"/></label>
|
||||
</td>
|
||||
<td><c:import url="helpToolTip.jsp"><c:param name="topic" value="autocontrol"/></c:import></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<form:checkbox path="autoControlEnabled" id="autoControlEnabled" cssClass="checkbox"/>
|
||||
<label for="autoControlEnabled"><fmt:message key="playersettings.autocontrol"/></label>
|
||||
</td>
|
||||
<td><c:import url="helpToolTip.jsp"><c:param name="topic" value="autocontrol"/></c:import></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<form:checkbox path="m3uBomEnabled" id="m3uBomEnabled" cssClass="checkbox"/>
|
||||
<label for="m3uBomEnabled"><fmt:message key="playersettings.m3ubom"/></label>
|
||||
</td>
|
||||
<td><c:import url="helpToolTip.jsp"><c:param name="topic" value="m3ubom"/></c:import></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<form:checkbox path="m3uBomEnabled" id="m3uBomEnabled" cssClass="checkbox"/>
|
||||
<label for="m3uBomEnabled"><fmt:message key="playersettings.m3ubom"/></label>
|
||||
</td>
|
||||
<td><c:import url="helpToolTip.jsp"><c:param name="topic" value="m3ubom"/></c:import></td>
|
||||
</tr>
|
||||
</table>
|
||||
<c:if test="${not empty command.allTranscodings}">
|
||||
<table class="indent technologyDepends WEB EXTERNAL EXTERNAL_WITH_PLAYLIST JUKEBOX">
|
||||
<tr><td><b><fmt:message key="playersettings.transcodings"/></b></td></tr>
|
||||
<c:forEach items="${command.allTranscodings}" var="transcoding" varStatus="loopStatus">
|
||||
<c:if test="${loopStatus.count % 3 == 1}"><tr></c:if>
|
||||
<td style="padding-right:2em">
|
||||
<form:checkbox path="activeTranscodingIds" id="transcoding${transcoding.id}" value="${transcoding.id}" cssClass="checkbox"/>
|
||||
<label for="transcoding${transcoding.id}">${transcoding.name}</label>
|
||||
</td>
|
||||
<c:if test="${loopStatus.count % 3 == 0 or loopStatus.count eq fn:length(command.allTranscodings)}"></tr></c:if>
|
||||
</c:forEach>
|
||||
</table>
|
||||
</c:if>
|
||||
|
||||
<c:if test="${not empty command.allTranscodings}">
|
||||
<table class="indent">
|
||||
<tr><td><b><fmt:message key="playersettings.transcodings"/></b></td></tr>
|
||||
<c:forEach items="${command.allTranscodings}" var="transcoding" varStatus="loopStatus">
|
||||
<c:if test="${loopStatus.count % 3 == 1}"><tr></c:if>
|
||||
<td style="padding-right:2em">
|
||||
<form:checkbox path="activeTranscodingIds" id="transcoding${transcoding.id}" value="${transcoding.id}" cssClass="checkbox"/>
|
||||
<label for="transcoding${transcoding.id}">${transcoding.name}</label>
|
||||
</td>
|
||||
<c:if test="${loopStatus.count % 3 == 0 or loopStatus.count eq fn:length(command.allTranscodings)}"></tr></c:if>
|
||||
</c:forEach>
|
||||
</table>
|
||||
</c:if>
|
||||
|
||||
<input type="submit" value="<fmt:message key="common.save"/>" style="margin-top:1em;margin-right:0.3em">
|
||||
<input type="button" value="<fmt:message key="common.cancel"/>" style="margin-top:1em" onclick="location.href='nowPlaying.view'">
|
||||
</form:form>
|
||||
|
||||
</c:otherwise>
|
||||
<input type="submit" value="<fmt:message key="common.save"/>" style="margin-top:1em;margin-right:0.3em">
|
||||
<input type="button" value="<fmt:message key="common.cancel"/>" style="margin-top:1em" onclick="location.href='nowPlaying.view'">
|
||||
</form:form>
|
||||
</c:otherwise>
|
||||
</c:choose>
|
||||
|
||||
<c:if test="${settings_reload}">
|
||||
<script language="javascript" type="text/javascript">parent.frames.playQueue.location.href="playQueue.view?"</script>
|
||||
</c:if>
|
||||
|
||||
</body></html>
|
||||
</body></html>
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,102 @@
|
||||
|
||||
var songPlayingTimerId = null;
|
||||
|
||||
var javaJukeboxPlayerModel = {
|
||||
currentStreamUrl : null,
|
||||
playing : false,
|
||||
songDuration : null,
|
||||
songPosition : 0
|
||||
}
|
||||
|
||||
function refreshView() {
|
||||
if (javaJukeboxPlayerModel.playing == true) {
|
||||
if (songPlayingTimerId == null) {
|
||||
songPlayingTimerId = setInterval(songPlayingTimer, 1000);
|
||||
}
|
||||
document.getElementById('startIcon').style.display = 'none';
|
||||
document.getElementById('pauseIcon').style.display = 'block';
|
||||
} else {
|
||||
if (songPlayingTimerId != null) {
|
||||
clearInterval(songPlayingTimerId);
|
||||
songPlayingTimerId = null;
|
||||
}
|
||||
document.getElementById('pauseIcon').style.display = 'none';
|
||||
document.getElementById('startIcon').style.display = 'block';
|
||||
}
|
||||
if (javaJukeboxPlayerModel.songDuration == null) {
|
||||
$("#playingDurationDisplay").html("-:--");
|
||||
} else {
|
||||
$("#playingDurationDisplay").html(songTimeAsString(javaJukeboxPlayerModel.songDuration));
|
||||
}
|
||||
$("#playingPositionDisplay").html(songTimeAsString(javaJukeboxPlayerModel.songPosition));
|
||||
$("#javaJukeboxSongPositionSlider").slider("value",javaJukeboxPlayerModel.songPosition);
|
||||
}
|
||||
|
||||
function onJavaJukeboxStart() {
|
||||
playQueueService.start();
|
||||
javaJukeboxPlayerModel.playing = true;
|
||||
refreshView();
|
||||
}
|
||||
|
||||
function onJavaJukeboxStop() {
|
||||
playQueueService.stop();
|
||||
javaJukeboxPlayerModel.playing = false;
|
||||
refreshView();
|
||||
}
|
||||
|
||||
function onJavaJukeboxVolumeChanged() {
|
||||
var value = $("#javaJukeboxVolumeSlider").slider("value");
|
||||
var gain = value / 100;
|
||||
playQueueService.setGain(gain);
|
||||
}
|
||||
|
||||
function onJavaJukeboxPositionChanged() {
|
||||
var pos = $("#javaJukeboxSongPositionSlider").slider("value");
|
||||
playQueueService.setJukeboxPosition(pos);
|
||||
javaJukeboxPlayerModel.songPosition = pos;
|
||||
refreshView();
|
||||
}
|
||||
|
||||
function updateJavaJukeboxPlayerControlBar(song){
|
||||
if (song != null) {
|
||||
var playingStream = song.streamUrl;
|
||||
if (playingStream != javaJukeboxPlayerModel.currentStreamUrl) {
|
||||
javaJukeboxPlayerModel.currentStreamUrl = playingStream;
|
||||
newSongPlaying(song);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function songTimeAsString(timeInSeconds) {
|
||||
var m = moment.duration(timeInSeconds, 'seconds');
|
||||
var seconds = m.seconds();
|
||||
var secondsAsString = seconds;
|
||||
if (seconds < 10) {
|
||||
secondsAsString = "0" + seconds;
|
||||
}
|
||||
return m.minutes() + ":" + secondsAsString;
|
||||
}
|
||||
|
||||
function newSongPlaying(song) {
|
||||
javaJukeboxPlayerModel.songDuration = song.duration;
|
||||
$("#javaJukeboxSongPositionSlider").slider({max: javaJukeboxPlayerModel.songDuration, value: 0, animate: "fast", range: "min"});
|
||||
javaJukeboxPlayerModel.playing = true;
|
||||
javaJukeboxPlayerModel.songPosition = 0;
|
||||
refreshView();
|
||||
}
|
||||
|
||||
function songPlayingTimer() {
|
||||
javaJukeboxPlayerModel.songPosition += 1;
|
||||
refreshView();
|
||||
}
|
||||
|
||||
function initJavaJukeboxPlayerControlBar() {
|
||||
$("#javaJukeboxSongPositionSlider").slider({max: 100, value: 0, animate: "fast", range: "min"});
|
||||
$("#javaJukeboxSongPositionSlider").slider("value",0);
|
||||
$("#javaJukeboxSongPositionSlider").on("slidestop", onJavaJukeboxPositionChanged);
|
||||
|
||||
$("#javaJukeboxVolumeSlider").slider({max: 100, value: 50, animate: "fast", range: "min"});
|
||||
$("#javaJukeboxVolumeSlider").on("slidestop", onJavaJukeboxVolumeChanged);
|
||||
|
||||
refreshView();
|
||||
}
|
||||
@@ -427,3 +427,19 @@ img {
|
||||
color: black;
|
||||
}
|
||||
|
||||
/*
|
||||
* Styles related to java jukebox controls
|
||||
*/
|
||||
|
||||
.javaJukeBoxPlayerControlBarSongTime {
|
||||
width : 50px;
|
||||
font-size: 80%;
|
||||
text-align: right;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
#javaJukeboxSongPositionSlider {
|
||||
width : 200px;
|
||||
height : 4px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user