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

Replace the flash player with medialement.js for the shared media

Browse Source
master
jvoisin 6 years ago
parent f04ec61d0f
commit 422127e3f6
4 changed files with 99 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. 97
      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

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

@ -4,68 +4,17 @@
<html> <html>
<head> <head>
<%@ include file="head.jsp" %> <%@ 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> <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>
<meta name="og:type" content="album"/> <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}"> <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:title" content="${fn:escapeXml(model.songs[0].artist)} &mdash; ${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>
<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> </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"> <div style="margin:auto;width:500px">
<h1> <h1>
@ -78,16 +27,38 @@
</c:otherwise> </c:otherwise>
</c:choose> </c:choose>
</h1> </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> <h2 style="margin:0;">${empty model.share.description ? model.songs[0].albumName : fn:escapeXml(model.share.username)}</h2>
</div> </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> </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> </body>
</html> </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