MightyPork
/
airsonic-custom
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge remote-tracking branch 'airsonic/pr/962'

Browse Source
master
Andrew DeMaria 5 years ago
parent 4b2cf99adf 7d865ea7a9
commit b128479972
No known key found for this signature in database
GPG Key ID: 0A3F5E91F8364EDF
4 changed files with 100 additions and 63 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 98
      airsonic-main/src/main/webapp/WEB-INF/jsp/externalPlayer.jsp
  2. 52
      airsonic-main/src/main/webapp/script/mediaelement/playlist-controls.svg
  3. 1
      airsonic-main/src/main/webapp/script/mediaelement/playlist.min.css
  4. 12
      airsonic-main/src/main/webapp/script/mediaelement/playlist.min.js

98
airsonic-main/src/main/webapp/WEB-INF/jsp/externalPlayer.jsp
Unescape View File

@ -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)} &mdash; ${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 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>

52
airsonic-main/src/main/webapp/script/mediaelement/playlist-controls.svg
Unescape View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

1
airsonic-main/src/main/webapp/script/mediaelement/playlist.min.css vendored
Unescape View File

@ -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}

12
airsonic-main/src/main/webapp/script/mediaelement/playlist.min.js vendored
View File

File diff suppressed because one or more lines are too long
Write Preview
Loading…
Cancel
Save