|  |  | @ -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}"> | 
			
		
	
	
		
		
			
				
					|  |  | @ -45,20 +46,44 @@ | 
			
		
	
		
		
			
				
					
					|  |  |  |         </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> | 
			
		
	
	
		
		
			
				
					|  |  | 
 |