Merge remote-tracking branch 'airsonic/pr/962'
This commit is contained in:
Andrew DeMaria
@@ -4,68 +4,18 @@
|
||||
<html>
|
||||
<head>
|
||||
<%@ include file="head.jsp" %>
|
||||
<script type="text/javascript" src="<c:url value="/script/swfobject.js"/>"></script>
|
||||
<script type="text/javascript" src="<c:url value="/script/prototype.js"/>"></script>
|
||||
|
||||
<meta name="og:type" content="album"/>
|
||||
|
||||
<script type="text/javascript" src="<c:url value="/script/prototype.js"/>"></script>
|
||||
<script type="text/javascript" src="<c:url value="/script/mediaelement/mediaelement-and-player.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"/>">
|
||||
<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:image" content="${model.songs[0].coverArtUrl}"/>
|
||||
</c:if>
|
||||
|
||||
<script type="text/javascript">
|
||||
function init() {
|
||||
var flashvars = {
|
||||
id:"player1",
|
||||
screencolor:"000000",
|
||||
frontcolor:"<spring:theme code="textColor"/>",
|
||||
backcolor:"<spring:theme code="backgroundColor"/>",
|
||||
"playlist.position": "bottom",
|
||||
"playlist.size": 300,
|
||||
repeat: "list"
|
||||
};
|
||||
var params = {
|
||||
allowfullscreen:"true",
|
||||
allowscriptaccess:"always"
|
||||
};
|
||||
var attributes = {
|
||||
id:"player1",
|
||||
name:"player1"
|
||||
};
|
||||
swfobject.embedSWF("<c:url value="/flash/jw-player-5.10.swf"/>", "placeholder", "500", "600", "9.0.0", false, flashvars, params, attributes);
|
||||
}
|
||||
|
||||
function playerReady(thePlayer) {
|
||||
var player = $("player1");
|
||||
var list = new Array();
|
||||
|
||||
<c:forEach items="${model.songs}" var="song" varStatus="loopStatus">
|
||||
<%--@elvariable id="song" type="org.airsonic.player.domain.MediaFileWithUrlInfo"--%>
|
||||
|
||||
// TODO: Use video provider for aac, m4a
|
||||
list[${loopStatus.count - 1}] = {
|
||||
file: "${song.streamUrl}",
|
||||
image: "${song.coverArtUrl}",
|
||||
title: "${fn:escapeXml(song.title)}",
|
||||
provider: "${song.video ? "video" : "sound"}",
|
||||
description: "${fn:escapeXml(song.artist)}"
|
||||
};
|
||||
|
||||
<c:if test="${not empty song.durationSeconds}">
|
||||
list[${loopStatus.count-1}].duration = ${song.durationSeconds};
|
||||
</c:if>
|
||||
|
||||
</c:forEach>
|
||||
|
||||
player.sendEvent("LOAD", list);
|
||||
player.sendEvent("PLAY");
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="mainframe bgcolor1" style="padding-top:2em" onload="init();">
|
||||
<body class="mainframe bgcolor1" style="padding-top:2em">
|
||||
|
||||
<div style="margin:auto;width:500px">
|
||||
<h1>
|
||||
@@ -78,16 +28,38 @@
|
||||
</c:otherwise>
|
||||
</c:choose>
|
||||
</h1>
|
||||
<div style="float:left;padding-right:1.5em">
|
||||
<div>
|
||||
<h2 style="margin:0;">${empty model.share.description ? model.songs[0].albumName : fn:escapeXml(model.share.username)}</h2>
|
||||
</div>
|
||||
<div class="detail" style="float:right">Streaming by <a href="https://airsonic.github.io/" target="_blank"><b>Airsonic</b></a></div>
|
||||
</div>
|
||||
|
||||
<div style="clear:both;padding-top:1em">
|
||||
<div id="placeholder">
|
||||
<a href="http://www.adobe.com/go/getflashplayer" target="_blank"><fmt:message key="playlist.getflash"/></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<audio id='player'>
|
||||
<c:forEach items="${model.songs}" var="song" varStatus="loopStatus">
|
||||
<source
|
||||
src="${song.streamUrl}"
|
||||
title="${fn:escapeXml(song.title)}"
|
||||
type="${song.getMediaType()=='MUSIC'?'audio':'video'}/${fn:escapeXml(song.getFormat())}"
|
||||
data-playlist-thumbnail="${song.coverArtUrl}"
|
||||
data-playlist-description="${fn:escapeXml(song.artist)}"
|
||||
>
|
||||
</c:forEach>
|
||||
</audio>
|
||||
|
||||
<div class="detail" style="text-align:center;">Streaming by <a href="https://airsonic.github.io/" target="_blank"><b>Airsonic</b></a></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
new MediaElementPlayer('player', {
|
||||
features: ['playpause','playlist','current','progress','duration','volume'],
|
||||
currentMessage: "",
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.mejs-container.mejs-audio, .mejs__container.mejs__audio {
|
||||
min-height: 75%;
|
||||
margin: auto;
|
||||
margin-top: 2%;
|
||||
margin-bottom: 2%;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 400 120" width="400" height="120" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#ffffff;}
|
||||
.st1{fill:none;stroke:#ffffff;stroke-miterlimit:10;}
|
||||
</style>
|
||||
<g id="Layer_1_1_">
|
||||
<path class="st0" d="M14.7,10.2c0.2,0.1,0.3,0.4,0.2,0.7c-0.1,0.1-0.1,0.2-0.2,0.2l-9.3,5.7C5,17,4.7,16.9,4.7,16.4V4.9
|
||||
c0-0.4,0.3-0.7,0.7-0.4L14.7,10.2z"/>
|
||||
<path class="st0" d="M25,11c-0.2-0.1-0.3-0.4-0.2-0.7c0.1-0.1,0.1-0.2,0.2-0.2l9.3-5.7C34.7,4.2,35,4.3,35,4.8v11.4
|
||||
c0,0.4-0.3,0.7-0.7,0.4L25,11z"/>
|
||||
<g>
|
||||
<path class="st0" d="M26,15.8c0,0.5-0.5,1-1,1h-0.5c-0.6,0-1-0.5-1-1V5.4c0-0.6,0.4-1,1-1H25c0.5,0,1,0.4,1,1V15.8z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="st0" d="M16.2,15.8c0,0.5-0.4,1-1,1h-0.5c-0.5,0-1-0.5-1-1V5.4c0-0.6,0.5-1,1-1h0.5c0.6,0,1,0.4,1,1V15.8z"/>
|
||||
</g>
|
||||
<path class="st0" d="M62.6,11c-0.2-0.1-0.3-0.4-0.1-0.6c0.1-0.1,0.1-0.1,0.1-0.1l8.1-5c0.4-0.2,0.6-0.1,0.6,0.4v10
|
||||
c0,0.4-0.3,0.6-0.6,0.4L62.6,11z"/>
|
||||
<path class="st0" d="M69.6,11c-0.2-0.1-0.3-0.4-0.1-0.6c0.1-0.1,0.1-0.1,0.1-0.1l8.1-5c0.4-0.2,0.6-0.1,0.6,0.4v10
|
||||
c0,0.4-0.3,0.6-0.6,0.4L69.6,11z"/>
|
||||
<path class="st0" d="M57.7,10.2c0.2,0.1,0.3,0.4,0.1,0.6c-0.1,0.1-0.1,0.1-0.1,0.1l-8.1,5C49.2,16.1,49,16,49,15.5v-10
|
||||
c0-0.4,0.3-0.6,0.6-0.4L57.7,10.2z"/>
|
||||
<path class="st0" d="M50.7,10.2c0.2,0.1,0.3,0.4,0.1,0.6c-0.1,0.1-0.1,0.1-0.1,0.1l-8.1,5C42.2,16.1,42,16,42,15.5v-10
|
||||
c0-0.4,0.3-0.6,0.6-0.4L50.7,10.2z"/>
|
||||
<path class="st0" d="M93.3,12.9c0.2,0,0.2,0.2,0.1,0.4c-0.1,0-0.1,0.1-0.1,0.1l-6.5,3.4c-0.3,0.1-0.5,0-0.5-0.2V9.8
|
||||
c0-0.2,0.2-0.4,0.5-0.2L93.3,12.9z"/>
|
||||
<g>
|
||||
<path class="st1" d="M97.6,17.1c0,0.5-0.5,1-1,1h-14c-0.6,0-1-0.5-1-1V9.2c0-0.6,0.4-1,1-1h14c0.5,0,1,0.4,1,1V17.1z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="st0" d="M84.4,6.2c-0.5,0-1-0.3-1-0.7c0-0.4,0.5-0.7,1-0.7h10.4c0.6,0,1,0.3,1,0.7c0,0.4-0.4,0.7-1,0.7H84.4z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="st0" d="M85.9,3.8c-0.6,0-1-0.3-1-0.7s0.4-0.7,1-0.7H94c0.6,0,1,0.3,1,0.7s-0.4,0.7-1,0.7H85.9z"/>
|
||||
</g>
|
||||
<path class="st0" d="M117.4,15.3l-3.2,2.4c-0.1,0-0.1,0-0.1-0.1V16h-2.2c-2.2,0-4.1-1.8-4.1-4.1V9.8c0-1.9-1.6-3.5-3.5-3.5h-2.4
|
||||
V4.6h2.4c2.9,0,5.2,2.3,5.2,5.2v2.1c0,1.3,1,2.3,2.3,2.3h2.2v-1.6c0-0.1,0-0.1,0.1-0.1l3.2,2.4C117.5,15,117.5,15.2,117.4,15.3
|
||||
L117.4,15.3z M106.7,13.7c-0.6,0.6-1.5,1-2.4,1h-2.4v1.7h2.4c1.1,0,2.2-0.4,3.1-1C107.1,14.8,106.8,14.3,106.7,13.7z M110.7,7
|
||||
c0.4-0.2,0.8-0.3,1.2-0.3h2.2v1.6c0,0.1,0,0.1,0.1,0.1l3.2-2.4c0.1-0.1,0.1-0.3,0-0.4l0,0l-3.2-2.4c-0.1,0-0.1,0-0.1,0.1V5h-2.2
|
||||
c-0.7,0-1.5,0.2-2.1,0.6C110.2,6,110.5,6.5,110.7,7z"/>
|
||||
<path class="st0" d="M136.4,6.2l-3,2.2c0,0-0.1,0-0.1-0.1V6.8h-8.6l0,0c-0.1,0-0.3,0-0.4,0.1s-0.2,0.2-0.2,0.4v3.9h-1.6V7.3
|
||||
c0-1.2,0.9-2.1,2.1-2.1c0,0,0,0,0.1,0l0,0h8.5V3.7c0-0.1,0-0.1,0.1-0.1l3,2.2C136.6,5.8,136.6,6,136.4,6.2
|
||||
C136.5,6.2,136.5,6.2,136.4,6.2z M135.3,10v3.9c0,0.2-0.1,0.3-0.2,0.4c-0.1,0.1-0.3,0.2-0.5,0.2l0,0h-8.4V13c0-0.1-0.1-0.1-0.1-0.1
|
||||
l0,0l-3,2.2c-0.1,0.1-0.1,0.3,0,0.4l0,0l3,2.2c0.1,0,0.1,0,0.1-0.1l0,0V16h8.4l0,0c0.6,0,1.2-0.2,1.6-0.6c0.4-0.4,0.7-1,0.7-1.5V10
|
||||
H135.3z"/>
|
||||
</g>
|
||||
<g id="Layer_2">
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
@@ -0,0 +1 @@
|
||||
.mejs-container.mejs-video,.mejs__container.mejs__video{overflow:hidden}.mejs-container.mejs-audio,.mejs__container.mejs__audio{min-height:200px}.mejs-container.mejs-audio.mejs__no-playlist,.mejs__container.mejs__audio.mejs__no-playlist{min-height:60px}.mejs-playlist-button,.mejs__playlist-button{position:relative}.mejs-loop-button>button,.mejs-next-button>button,.mejs-playlist-button>button,.mejs-prev-button>button,.mejs-shuffle-button>button,.mejs__loop-button>button,.mejs__next-button>button,.mejs__playlist-button>button,.mejs__prev-button>button,.mejs__shuffle-button>button{background:url(playlist-controls.svg) transparent no-repeat}.mejs-playlist-button>button,.mejs__playlist-button>button{background-position:-80px 0}.mejs-next-button>button,.mejs__next-button>button{background-position:0 0}.mejs-prev-button>button,.mejs__prev-button>button{background-position:-20px 0}.mejs-loop-button>button,.mejs__loop-button>button{background-position:-120px 0}.mejs-shuffle-button>button,.mejs__shuffle-button>button{background-position:-100px 0}.mejs-loop-button.mejs-loop-off>button,.mejs-shuffle-button.mejs-shuffle-off>button,.mejs__loop-button.mejs__loop-off>button,.mejs__shuffle-button.mejs__shuffle-off>button{opacity:.7}.mejs-playlist-button>.mejs-playlist-selector,.mejs__playlist-button>.mejs__playlist-selector{background:rgba(50,50,50,.7);border:1px solid transparent;border-radius:0;bottom:100%;margin-right:-43px;overflow:hidden;padding:0;position:absolute;right:50%;visibility:visible;width:86px}.mejs-playlist-selector-list,.mejs__playlist-selector-list{height:100%;list-style-type:none!important;margin:0;overflow-y:auto;padding:0}.mejs-playlist-selector-list-item,.mejs__playlist-selector-list-item{border-bottom:1px solid #c8c8c8;border-collapse:collapse;cursor:pointer;display:table;list-style-type:none!important;position:relative;width:100%}.mejs__playlist-item-inner{display:table-row;overflow:hidden}.mejs-playlist-selector-list-item:hover,.mejs__playlist-selector-list-item:hover{background-color:#c8c8c8!important;background-color:hsla(0,0%,100%,.4)!important}.mejs-playlist-selector-list-item:focus,.mejs__playlist-selector-list-item:focus{outline:none}.mejs-playlist-selector-input,.mejs__playlist-selector-input{left:-1000px;position:absolute}.mejs-playlist-selector-label,.mejs__playlist-selector-label{cursor:pointer;float:left;font-size:1.3em;margin:0}.mejs-playlist-selector-label>span,.mejs__playlist-selector-label>span{-webkit-background-clip:text;background-clip:text;background-color:#eb5802;background-image:-webkit-linear-gradient(top,#eb5802,#f3ad39);background-image:linear-gradient(180deg,#eb5802,#f3ad39);color:transparent;font-size:.65em;vertical-align:middle}.mejs-playlist-selected,.mejs__playlist-selected{background-color:#3a3a3a}.mejs-playlist-layer,.mejs__playlist-layer{background:#222;bottom:40px;color:#fff;font-size:12px;height:calc(100% - 40px)!important;overflow:hidden;position:absolute;right:0;text-align:center;top:0;-webkit-transition:.5s;transition:.5s;width:33.33333%!important;z-index:1}.mejs-container.mejs-audio .mejs-playlist-layer,.mejs__container.mejs__audio .mejs__playlist-layer{bottom:85px;height:calc(100% - 85px)!important;overflow:auto;width:100%!important}.mejs-playlist-hidden,.mejs__playlist-hidden{right:-33.33333%;-webkit-transition:.5s;transition:.5s}.mejs-playlist-item-thumbnail,.mejs__playlist-item-thumbnail{display:table-cell;padding:7px 5px;vertical-align:top;width:30%}.mejs-container.mejs-audio .mejs-playlist-item-thumbnail,.mejs__container.mejs__audio .mejs__playlist-item-thumbnail{padding:5px;width:15%}.mejs-playlist-item-thumbnail>img,.mejs__playlist-item-thumbnail>img{height:auto;width:100%}.mejs-playlist-item-content,.mejs__playlist-item-content{display:table-cell;padding:10px;width:70%}.mejs-container.mejs-audio .mejs-playlist-item-content,.mejs__container.mejs__audio .mejs__playlist-item-content{margin:0;width:85%}.mejs-playlist-item-description,.mejs__playlist-item-description{clear:left;padding:5px 0;text-align:left}.mejs-playlist-current,.mejs__playlist-current{background:#000;bottom:34px;height:auto!important;left:0;position:absolute;z-index:2}.mejs-playlist-current p,.mejs__playlist-current p{color:#fff;font-size:.8em;margin:15px 10px}.mejs-playlist-current>img,.mejs__playlist-current>img{float:left;margin:5px 10px;max-height:35px}.mejs-playlist-current-description,.mejs-playlist-current-title,.mejs__playlist-current-description,.mejs__playlist-current-title{font-style:italic}
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user