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>