1<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="iso-8859-1" %> 2<html> 3<head> 4 <%@ include file="head.jsp" %> 5 <%@ include file="jquery.jsp" %> 6 <link rel="stylesheet" href="<c:url value="/script/fontawesome/css/font-awesome.min.css"/>" type="text/css"> 7 <script type="text/javascript" src="<c:url value="/script/scripts.js"/>"></script> 8 9 <script type="text/javascript" src="<c:url value="/dwr/engine.js"/>"></script> 10 <script type="text/javascript" src="<c:url value="/dwr/util.js"/>"></script> 11 12 <script type="text/javascript" src="<c:url value="/dwr/interface/nowPlayingService.js"/>"></script> 13 <script type="text/javascript" src="<c:url value="/dwr/interface/starService.js"/>"></script> 14 <script type="text/javascript" src="<c:url value="/dwr/interface/multiService.js"/>"></script> 15</head> 16 17<body class="bgcolor1 playingframe" style="padding:0 0; overflow:auto;" onload="init()"> 18 19<script type="text/javascript"> 20 function init() { 21 dwr.engine.setErrorHandler(null); 22 } 23</script> 24 <!-- This script uses AJAX to periodically retrieve what all users are playing. --> 25 <script type="text/javascript" language="javascript"> 26 27 startgetNowListeningTimer(); 28 29 function startgetNowListeningTimer() { 30 nowPlayingService.getNowListening(getNowListeningCallback); 31 setTimeout("startgetNowListeningTimer()", 10000); 32 } 33 34 function getNowListeningCallback(nowPlaying) { 35 36 <c:if test="${model.showSidePanel}"> 37 38 if (nowPlaying.length == 0) { 39 parent.setSidePanelWidth(0); 40 } else { 41 parent.setSidePanelWidth(300); 42 43 if (escapeHtml(jQuery('#artistname').html()) != nowPlaying[0].artist) { 44 jQuery("#similarArtists").hide(); 45 jQuery("#similarArtistsTitle").hide(); 46 jQuery("#similarArtistsRadio").hide(); 47 jQuery("#artistBioTable").hide(); 48 jQuery("#artistBio").hide(); 49 jQuery("#topAlbums").hide(); 50 jQuery("#topAlbumsTitle").hide(); 51 jQuery("#topTracks").hide(); 52 jQuery("#topTracksTitle").hide(); 53 } 54 55 var html = ""; 56 57 if (nowPlaying.length == 0) { 58 // ignore 59 } else { 60 html += "<h1 style='padding-top: 11px;padding-bottom: 5px;'>"; 61 62 if (nowPlaying[0].artist != null) { 63 html += nowPlaying[0].artist + "</h1>" + "<table style='width:100%'>"; 64 } else { 65 html += "</h1>" + "<table style='width:100%'>"; 66 } 67 } 68 69 html += "<tr><td colspan='2' class='detail' style=';white-space:nowrap'>"; 70 html += "<a title='" + nowPlaying[0].tooltip + "' target='main' href='" + nowPlaying[0].albumUrl + "'>"; 71 html += "<span id='songTitle' class='songTitle'>" + nowPlaying[0].title + "</span></a><br/>"; 72 html += "</td></tr><tr><td rowspan='2'>"; 73 if (nowPlaying[0].year != null && nowPlaying[0].year != 'null') { 74 html += "<span id='songYear' class='songYear'>" + nowPlaying[0].year + "</span></a> "; 75 } 76 html += "<span id='songDuration' class='songDuration'>"; 77 if (nowPlaying[0].year != null && nowPlaying[0].year != 'null') { 78 html += " / "; 79 } 80 html += nowPlaying[0].duration + "</span></a>"; 81 html += "<span id='mediaId' style='display:none'>" + nowPlaying[0].mediaId + "</span></a><br>"; 82 html += "</td></tr><tr><td rowspan='2'>"; 83 html += "<a title='" + nowPlaying[0].tooltip + "' target='main' href='" + nowPlaying[0].albumUrl + "'>" + 84 "<img src='" + nowPlaying[0].coverArtZoomUrl + "' class='dropshadow' height='60' width='60' style='float: right;margin-right: 10px;'></a>"; 85 html += "</td></tr><tr><td><div align='left'>"; 86 87 if (nowPlaying[0].bookmarked == true) { 88 html += "<i style='margin-right:1px;' class='fa fa-bookmark custom-icon-nohover starred'></i>"; 89 } else { html += "<i style='margin-right:1px;' class='fa fa-bookmark-o custom-icon-nohover'></i>"; 90 } 91 if (nowPlaying[0].loved == true) { 92 html += "<i style='margin-right:1px;' class='fa fa-heart custom-icon-nohover starred'></i>"; 93 } else { html += "<i style='margin-right:1px;' class='fa fa-heart-o custom-icon-nohover'></i>"; 94 } 95 if (nowPlaying[0].starred == true) { 96 html += "<i style='margin-right:1px;' class='fa fa-star custom-icon-nohover starred'></i>"; 97 } else { html += "<i style='margin-right:1px;' class='fa fa-star-o custom-icon-nohover'></i>"; 98 } 99 html += "</div></td></tr>"; 100 html += "</table>"; 101 102 jQuery("#nowPlaying").html(html); 103 jQuery("#nowPlaying").show(); 104 105 if (escapeHtml(jQuery('#artistname').html()) != nowPlaying[0].artist) { 106 jQuery("#artistname").html(nowPlaying[0].artist); 107 loadArtistInfo(nowPlaying[0].mediaId); 108 } 109 110 } 111 </c:if> 112 113 } 114 115 function loadArtistInfo(mediaId) { 116 117 multiService.getFullArtistInfo(mediaId, 10, function (artistInfo) { 118 119 120 if (artistInfo.similarArtists.length != null && artistInfo.similarArtists.length > 0 ) { 121 var html = ""; 122 for (var i = 0; i < artistInfo.similarArtists.length; i++) { 123 html += "<i class='fa fa-file accent' style='margin:3'> </i> <a href='main.view?id=" + artistInfo.similarArtists[i].mediaFileId + "' style='white-space:nowrap' target='main'>" + escapeHtml(artistInfo.similarArtists[i].artistName) + "</a><br>"; 124 } 125 jQuery("#similarArtists").html(html); 126 jQuery("#similarArtists").show(); 127 jQuery("#similarArtistsTitle").show(); 128 jQuery("#similarArtistsRadio").show(); 129 jQuery("#artistBioTable").show(); 130 jQuery("#artistBio").show(); 131 } else { 132 jQuery("#similarArtists").hide(); 133 jQuery("#similarArtistsTitle").hide(); 134 jQuery("#similarArtistsRadio").hide(); 135 } 136 137 if (artistInfo.topAlbums.length != null && artistInfo.topAlbums.length > 0 ) { 138 var html = ""; 139 for (var i = 0; i < artistInfo.topAlbums.length; i++) { 140 html += "<i class='fa fa-file accent' style='margin:3'> </i> <a href='main.view?id=" + artistInfo.topAlbums[i].mediaFileId + "' style='white-space:nowrap' target='main'>" + escapeHtml(artistInfo.topAlbums[i].albumName) + "</a><br>"; 141 } 142 jQuery("#topAlbums").html(html); 143 jQuery("#topAlbums").show(); 144 jQuery("#topAlbumsDiv").show(); 145 jQuery("#topAlbumsTitle").show(); 146 147 } else { 148 jQuery("#topAlbums").hide(); 149 jQuery("#topAlbumsDiv").hide(); 150 jQuery("#topAlbumsTitle").hide(); 151 } 152 153 154 if (artistInfo.topTracks.length != null && artistInfo.topTracks.length > 0) { 155 var html = ""; 156 for (var i = 0; i < artistInfo.topTracks.length; i++) { 157 html += "<i class='fa fa-music accent' style='margin:3'> </i> <a href='main.view?id=" + artistInfo.topTracks[i].mediaFileId + "' style='white-space:nowrap' target='main'>" + escapeHtml(artistInfo.topTracks[i].trackName) + "</a><br>"; 158 } 159 jQuery("#topTracks").html(html); 160 jQuery("#topTracks").show(); 161 jQuery("#topTracksDiv").show(); 162 jQuery("#topTracksTitle").show(); 163 } else { 164 jQuery("#topTracks").hide(); 165 jQuery("#topTracksDiv").hide(); 166 jQuery("#topTracksTitle").hide(); 167 } 168 169 if (artistInfo.artistBio && artistInfo.artistBio.shortBio) { 170 171 jQuery("#artistBio").html( artistInfo.artistBio.shortBio); 172 173 if (artistInfo.artistBio.mediumImageUrl) { 174 jQuery("#artistImage").attr("src", artistInfo.artistBio.smallImageUrl); 175 jQuery("#artistImage").attr("height", "60"); 176 jQuery("#artistImage").attr("width", "60"); 177 jQuery("#artistImage").show(); 178 } 179 jQuery("#artistBio").show(); 180 jQuery("#artistBioTable").show(); 181 } else { 182 jQuery("#artistBio").html(""); 183 jQuery("#similarArtists").html(""); 184 jQuery("#artistBioTable").hide(); 185 jQuery("#artistImage").hide(); 186 jQuery("#similarArtists").hide(); 187 jQuery("#similarArtistsTitle").show(); 188 } 189 }); 190 } 191 192 function playSimilar() { 193 parent.playQueue.onPlaySimilar(jQuery("#mediaId").html(), 30); 194 parent.main.onToastmessage("showSuccessToast", "Play similar artist radio"); 195 } 196 </script> 197 198 <div id="nowPlaying" class="nowPlaying"></div> 199 <div id="artistname" style="display:none"></div> 200 201 <table id="artistBioTable" style="width:100%;padding-top:1em;padding-bottom: 1em;clear:both;border-bottom: 1px dotted #ccc;display: none"> 202 <tr> 203 <td id="artistBio"></td> 204 <td style="vertical-align:top"> 205 <img id="artistImage" class="dropshadow" alt="" style="float: right;margin-left: 5px;margin-right: 10px; display:none"> 206 </td> 207 </tr> 208 <tr> 209 <!-- <td colspan=2><div style="border-bottom: 1px dotted #333;"></div></td> --> 210 </tr> 211 <tr><td colspan=2> 212 <h2><span id="similarArtistsTitle" style="display:none"><fmt:message key="main.similarartists"/></span></h2> 213 <span id="similarArtists"></span> 214 </td></tr> 215 <tr> 216 <td> 217 <div id="similarArtistsRadio" class="forward" style="display: none"> 218 <a href="javascript:playSimilar()"><fmt:message key="main.startradio"/></a> 219 </div> 220 </td></tr> 221 222 <tr> 223 <td colspan=2><div id="topAlbumsDiv" style="padding-bottom: 8px;border-bottom: 1px dotted #ccc;"></div> 224 <h2><span id="topAlbumsTitle" style="display:none">TOP Albums</span></h2> 225 <span id="topAlbums" style="display:none"></span> 226 </td></tr> 227 228 <tr> 229 <td colspan=2><div id="topTracksDiv" style="padding-bottom: 8px;border-bottom: 1px dotted #ccc;"></div> 230 <h2><span id="topTracksTitle" style="display:none">TOP Tracks</span></h2> 231 <span id="topTracks" style="display:none"></span> 232 </td></tr> 233 234 </table> 235</body> 236</html>