| 
						
						
							
								
							
						
						
					 | 
					 | 
					@ -10,14 +10,15 @@ | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					    <script type="text/javascript" src="<c:url value="/script/mediaelement/playlist.min.js"/>"></script> | 
					 | 
					 | 
					 | 
					    <script type="text/javascript" src="<c:url value="/script/mediaelement/playlist.min.js"/>"></script> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					    <link type="text/css" rel="stylesheet" href="<c:url value="/script/mediaelement/playlist.min.css"/>"> | 
					 | 
					 | 
					 | 
					    <link type="text/css" rel="stylesheet" href="<c:url value="/script/mediaelement/playlist.min.css"/>"> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					    <c:if test="${not empty model.songs}"> | 
					 | 
					 | 
					 | 
					    <c:if test="${not empty model.songs}"> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					        <meta name="og:title" content="${fn:escapeXml(model.songs[0].artist)} — ${fn:escapeXml(model.songs[0].albumName)}"/> | 
					 | 
					 | 
					 | 
					        <meta name="og:title" | 
				
			
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					              content="${fn:escapeXml(model.songs[0].artist)} — ${fn:escapeXml(model.songs[0].albumName)}"/> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					        <meta name="og:image" content="${model.songs[0].coverArtUrl}"/> | 
					 | 
					 | 
					 | 
					        <meta name="og:image" content="${model.songs[0].coverArtUrl}"/> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					    </c:if> | 
					 | 
					 | 
					 | 
					    </c:if> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					</head> | 
					 | 
					 | 
					 | 
					</head> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					
 | 
					 | 
					 | 
					 | 
					
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					<body class="mainframe bgcolor1" style="padding-top:2em"> | 
					 | 
					 | 
					 | 
					<body class="mainframe bgcolor1" style="height:100%;margin:0;"> | 
				
			
			
				
				
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					
 | 
					 | 
					 | 
					 | 
					<div class="external box"> | 
				
			
			
				
				
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					<div style="margin:auto;width:500px"> | 
					 | 
					 | 
					 | 
					    <div class="header"> | 
				
			
			
				
				
			
		
	
		
		
	
		
		
	
		
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					        <h1> | 
					 | 
					 | 
					 | 
					        <h1> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					            <c:choose> | 
					 | 
					 | 
					 | 
					            <c:choose> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					                <c:when test="${empty model.share or empty model.songs}"> | 
					 | 
					 | 
					 | 
					                <c:when test="${empty model.share or empty model.songs}"> | 
				
			
			
		
	
	
		
		
			
				
					| 
						
						
						
							
								
							
						
					 | 
					 | 
					@ -31,10 +32,10 @@ | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					        <div> | 
					 | 
					 | 
					 | 
					        <div> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					            <h2 style="margin:0;">${empty model.share.description ? model.songs[0].albumName : fn:escapeXml(model.share.username)}</h2> | 
					 | 
					 | 
					 | 
					            <h2 style="margin:0;">${empty model.share.description ? model.songs[0].albumName : fn:escapeXml(model.share.username)}</h2> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					        </div> | 
					 | 
					 | 
					 | 
					        </div> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					</div> | 
					 | 
					 | 
					 | 
					    </div> | 
				
			
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					
 | 
					 | 
					 | 
					 | 
					
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					<audio id='player'> | 
					 | 
					 | 
					 | 
					    <audio id='player'> | 
				
			
			
				
				
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					<c:forEach items="${model.songs}" var="song" varStatus="loopStatus"> | 
					 | 
					 | 
					 | 
					        <c:forEach items="${model.songs}" var="song" varStatus="loopStatus"> | 
				
			
			
				
				
			
		
	
		
		
	
		
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					            <source | 
					 | 
					 | 
					 | 
					            <source | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					                    src="${song.streamUrl}" | 
					 | 
					 | 
					 | 
					                    src="${song.streamUrl}" | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					                    title="${fn:escapeXml(song.title)}" | 
					 | 
					 | 
					 | 
					                    title="${fn:escapeXml(song.title)}" | 
				
			
			
		
	
	
		
		
			
				
					| 
						
						
						
							
								
							
						
					 | 
					 | 
					@ -42,24 +43,48 @@ | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					                    data-playlist-thumbnail="${song.coverArtUrl}" | 
					 | 
					 | 
					 | 
					                    data-playlist-thumbnail="${song.coverArtUrl}" | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					                    data-playlist-description="${fn:escapeXml(song.artist)}" | 
					 | 
					 | 
					 | 
					                    data-playlist-description="${fn:escapeXml(song.artist)}" | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					            > | 
					 | 
					 | 
					 | 
					            > | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					</c:forEach> | 
					 | 
					 | 
					 | 
					        </c:forEach> | 
				
			
			
				
				
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					</audio> | 
					 | 
					 | 
					 | 
					    </audio> | 
				
			
			
				
				
			
		
	
		
		
	
		
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					
 | 
					 | 
					 | 
					 | 
					
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					<div class="detail" style="text-align:center;">Streaming by <a href="https://airsonic.github.io/" target="_blank"><b>Airsonic</b></a></div> | 
					 | 
					 | 
					 | 
					    <div class="detail" style="text-align:center;">Streaming by <a href="https://airsonic.github.io/" | 
				
			
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					                                                                   target="_blank"><b>Airsonic</b></a></div> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					</div> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					
 | 
					 | 
					 | 
					 | 
					
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					<script type="text/javascript"> | 
					 | 
					 | 
					 | 
					<script type="text/javascript"> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					    new MediaElementPlayer('player', { | 
					 | 
					 | 
					 | 
					    new MediaElementPlayer('player', { | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					    features: ['playpause','playlist','current','progress','duration','volume'], | 
					 | 
					 | 
					 | 
					        features: ['playpause', 'playlist', 'current', 'progress', 'duration', 'volume'], | 
				
			
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					        currentMessage: "", | 
					 | 
					 | 
					 | 
					        currentMessage: "", | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					        audioWidth: 600, | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					    }); | 
					 | 
					 | 
					 | 
					    }); | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					</script> | 
					 | 
					 | 
					 | 
					</script> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					<style> | 
					 | 
					 | 
					 | 
					<style> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					.mejs-container.mejs-audio, .mejs__container.mejs__audio { | 
					 | 
					 | 
					 | 
					    .external .mejs-container.mejs-audio, .mejs__container.mejs__audio { | 
				
			
			
				
				
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					    min-height: 75%; | 
					 | 
					 | 
					 | 
					 | 
				
			
			
		
	
		
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					        margin: auto; | 
					 | 
					 | 
					 | 
					        margin: auto; | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					        margin-top: 2%; | 
					 | 
					 | 
					 | 
					        margin-top: 2%; | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					        margin-bottom: 2%; | 
					 | 
					 | 
					 | 
					        margin-bottom: 2%; | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					} | 
					 | 
					 | 
					 | 
					        flex-grow: 1; | 
				
			
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					        flex-shrink: 1; | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					        flex-basis: auto; | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					    } | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					    .external.box { | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					        display: flex; | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					        flex-flow: column; | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					        height: 100%; | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					    } | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					    .external > .header { | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					        padding-top: 2em; | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					        margin: auto; | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					        width: 500px; | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					        flex-grow: 0; | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					        flex-shrink: 1; | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					        flex-basis: auto; | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					    } | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					    .external > .detail { | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					        flex-grow: 0; | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					        flex-shrink: 1; | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					        flex-basis: 40px; | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					    } | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					</style> | 
					 | 
					 | 
					 | 
					</style> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					</body> | 
					 | 
					 | 
					 | 
					</body> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					</html> | 
					 | 
					 | 
					 | 
					</html> | 
				
			
			
		
	
	
		
		
			
				
					| 
						
						
						
					 | 
					 | 
					
  |