1<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="iso-8859-1" %> 2<%@ include file="include.jsp" %> 3 4<link rel="stylesheet" href="<c:url value="/script/fontawesome/css/font-awesome.min.css"/>" type="text/css"> 5 6<%-- 7PARAMETERS 8 albumId: ID of album. 9 playlistId: ID of playlist. 10 podcastChannelId: ID of podcast channel 11 auth: Authentication token 12 coverArtHQ: HD Coverart 13 coverArtSize: Height and width of cover art. 14 caption1: Caption line 1 15 caption2: Caption line 2 16 caption3: Caption line 3 17 captionCount: Number of caption lines to display (default 0) 18 showLink: Whether to make the cover art image link to the album page. 19 showZoom: Whether to display a link for zooming the cover art. 20 showChange: Whether to display a link for changing the cover art. 21 appearAfter: Fade in after this many milliseconds, or nil if no fading in should happen. 22 showSmoother: more opacity effect 23--%> 24 25<c:choose> 26 <c:when test="${empty param.coverArtSize}"> 27 <c:set var="size" value="auto"/> 28 </c:when> 29 <c:otherwise> 30 <c:set var="size" value="${param.coverArtSize}px"/> 31 </c:otherwise> 32</c:choose> 33 34<c:set var="captionCount" value="${empty param.captionCount ? 0 : param.captionCount}"/> 35 36<str:randomString count="5" type="alphabet" var="divId"/> 37<str:randomString count="5" type="alphabet" var="imgId"/> 38<str:randomString count="5" type="alphabet" var="playId"/> 39<str:randomString count="5" type="alphabet" var="addId"/> 40<str:randomString count="5" type="alphabet" var="backId"/> 41 42<div class="coverart"> 43 <div style="width:${size};max-width:${size};height:${size};max-height:${size};cursor:pointer" title="${param.caption1}" id="${divId}"> 44 45 <c:if test="${not empty param.albumId}"> 46 <c:url value="main.view" var="targetUrl"> 47 <c:param name="id" value="${param.albumId}"/> 48 </c:url> 49 </c:if> 50 <c:if test="${not empty param.playlistId}"> 51 <c:url value="playlist.view" var="targetUrl"> 52 <c:param name="id" value="${param.playlistId}"/> 53 </c:url> 54 </c:if> 55 <c:if test="${not empty param.podcastChannelId}"> 56 <c:url value="podcastChannel.view" var="targetUrl"> 57 <c:param name="id" value="${param.podcastChannelId}"/> 58 </c:url> 59 </c:if> 60 61 <c:url value="/coverArt.view" var="coverArtUrl"> 62 <c:if test="${not empty param.coverArtSize}"> 63 <c:choose> 64 <c:when test="${param.coverArtHQ}"> 65 <c:param name="size" value="${param.coverArtSize * 2}"/> 66 </c:when> 67 <c:otherwise> 68 <c:param name="size" value="${param.coverArtSize}"/> 69 </c:otherwise> 70 </c:choose> 71 </c:if> 72 <c:if test="${not empty param.albumId}"> 73 <c:param name="id" value="${param.albumId}"/> 74 </c:if> 75 <c:if test="${not empty param.podcastChannelId}"> 76 <c:param name="id" value="pod-${param.podcastChannelId}"/> 77 </c:if> 78 <c:if test="${not empty param.playlistId}"> 79 <c:param name="id" value="pl-${param.playlistId}"/> 80 </c:if> 81 <c:if test="${not empty param.auth}"> 82 <c:param name="auth" value="${param.auth}"/> 83 </c:if> 84 </c:url> 85 <c:url value="/coverArt.view" var="zoomCoverArtUrl"> 86 <c:param name="id" value="${param.albumId}"/> 87 </c:url> 88 89 <div style="position: relative; width: 0; height: 0"> 90 <a href="#" onclick="parent.playQueue.onPlay(${param.albumId}); return false;"> 91 <img src="icons/default/playalbum.png" id="${playId}" style="position: relative; top: ${param.coverArtSize -30}px; left: ${param.coverArtSize -52}px; z-index:100; display:none;" ></a> 92 </div> 93 94 <div style="position: relative; width: 0; height: 0"> 95 <a href="#" onclick="parent.playQueue.onAdd(${param.albumId}); return false;"> 96 <img src="icons/default/addalbum.png" id="${addId}" style="position: relative; top: ${param.coverArtSize -30}px; left: ${param.coverArtSize -29}px; z-index:100; display:none;" ></a> 97 </div> 98 99 <c:choose> 100 <c:when test="${param.showLink}"><a href="${targetUrl}" title="${param.caption1}"></c:when> 101 </c:choose> 102 103 <div style="position: relative; width: 0; height: 0"> 104 <c:if test="${param.typVideo}"> 105 <img src="icons/default/test.png" id="${backId}" width="${param.coverArtSize +1}" height="${param.coverArtSize * 1.3 +1}" style="position: relative; bottom: 0px; left: 0px;z-index:90; display:none; opacity: 0.5;" > 106 </c:if> 107 108 <c:if test="${not param.typVideo}"> 109 <img src="icons/default/test.png" id="${backId}" width="${param.coverArtSize +1}" height="${param.coverArtSize +1}" style="position: relative; bottom: 0px; left: 0px;z-index:90; display:none; opacity: 0.5;" > 110 </c:if> 111 </div> 112 113 <img src="${coverArtUrl}" id="${imgId}" width="${param.coverArtSize}" class="dropshadow" alt="${param.albumName}"> 114 <c:if test="${param.showLink}"></a></c:if> 115 </div> 116 117 <c:if test="${captionCount gt 0}"> 118 <div class="caption1" style="width:${param.coverArtSize - 16}px;margin-top:5px"><a href="${targetUrl}" title="${param.caption1}">${param.caption1}</a></div> 119 </c:if> 120 <c:if test="${captionCount gt 1}"> 121 <div class="caption2" style="width:${param.coverArtSize - 16}px">${param.caption2} </div> 122 </c:if> 123 <c:if test="${captionCount gt 2}"> 124 <div class="caption3" style="width:${param.coverArtSize - 16}px">${param.caption3} </div> 125 </c:if> 126</div> 127 128<c:if test="${param.showChange or param.showZoom}"> 129 <div style="padding-top:6px;text-align:right"> 130 <c:if test="${param.showChange}"> 131 <c:url value="/changeCoverArt.view" var="changeCoverArtUrl"> 132 <c:param name="id" value="${param.albumId}"/> 133 </c:url> 134 <a class="detail" href="${changeCoverArtUrl}"><fmt:message key="coverart.change"/></a> 135 </c:if> 136 137 <c:if test="${param.showZoom and param.showChange}"> 138 | 139 </c:if> 140 141 <c:if test="${param.showZoom}"> 142 <a class="detail" rel="zoom" title="${param.caption1}" href="${zoomCoverArtUrl}"><fmt:message key="coverart.zoom"/></a> 143 </c:if> 144 </div> 145</c:if> 146 147<script type="text/javascript"> 148 $(document).ready(function () { 149 setTimeout("$('#${imgId}').fadeIn(500)", ${empty param.appearAfter ? 0 : param.appearAfter}); 150 }); 151 152 $("#${divId}").mouseover(function () { 153 $("#${playId}").stop(1,1).fadeIn(600); 154 $("#${addId}").stop(1,1).fadeIn(500); 155 $("#${imgId}").animate({opacity: 0.8}, 150); 156 }); 157 158 $("#${divId}").mouseleave(function () { 159 $("#${playId}").stop(1,1).fadeOut(1200); 160 $("#${addId}").stop(1,1).fadeOut(1000); 161 $("#${imgId}").animate({opacity: 1.0}, 150); 162 }); 163 164 $("#${playId}").click(function () { 165 <c:choose> 166 <c:when test="${not empty param.albumId}"> 167 parent.playQueue.onPlay(${param.albumId}); 168 </c:when> 169 <c:otherwise> 170 parent.playQueue.onPlayPlaylist('${param.playlistId}', false); 171 </c:otherwise> 172 </c:choose> 173 174 <c:if test="${not empty param.podcastChannelId}"> 175 parent.playQueue.onPlayPodcastChannel(${param.podcastChannelId}); 176 </c:if> 177 }); 178 179 180 $("#${addId}").click(function () { 181 <c:choose> 182 <c:when test="${not empty param.albumId}"> 183 parent.playQueue.onAdd(${param.albumId}); 184 </c:when> 185 <c:otherwise> 186 parent.playQueue.onAddPlaylist('${param.playlistId}', false); 187 </c:otherwise> 188 </c:choose> 189 }); 190</script> 191 192