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

master
jvoisin 6 years ago
parent f04ec61d0f
commit 422127e3f6
  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

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

@ -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
Loading…
Cancel
Save