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

Fix formatting on external player for firefox

Browse Source 
Signed-off-by: Andrew DeMaria <lostonamountain@gmail.com>
master
Andrew DeMaria 5 years ago
parent b128479972
commit 15c6a8861b
No known key found for this signature in database
GPG Key ID: 0A3F5E91F8364EDF
1 changed files with 64 additions and 39 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. 103
      airsonic-main/src/main/webapp/WEB-INF/jsp/externalPlayer.jsp

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

@ -10,56 +10,81 @@
<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: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>
</head>
<body class="mainframe bgcolor1" style="padding-top:2em">
<div style="margin:auto;width:500px">
<h1>
<c:choose>
<c:when test="${empty model.share or empty model.songs}">
Sorry, the content is not available.
</c:when>
<c:otherwise>
${empty model.share.description ? model.songs[0].artist : fn:escapeXml(model.share.description)}
</c:otherwise>
</c:choose>
</h1>
<div>
<h2 style="margin:0;">${empty model.share.description ? model.songs[0].albumName : fn:escapeXml(model.share.username)}</h2>
<body class="mainframe bgcolor1" style="height:100%;margin:0;">
<div class="external box">
<div class="header">
<h1>
<c:choose>
<c:when test="${empty model.share or empty model.songs}">
Sorry, the content is not available.
</c:when>
<c:otherwise>
${empty model.share.description ? model.songs[0].artist : fn:escapeXml(model.share.description)}
</c:otherwise>
</c:choose>
</h1>
<div>
<h2 style="margin:0;">${empty model.share.description ? model.songs[0].albumName : fn:escapeXml(model.share.username)}</h2>
</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>
<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>
<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">
new MediaElementPlayer('player', {
features: ['playpause','playlist','current','progress','duration','volume'],
currentMessage: "",
});
new MediaElementPlayer('player', {
features: ['playpause', 'playlist', 'current', 'progress', 'duration', 'volume'],
currentMessage: "",
audioWidth: 600,
});
</script>
<style>
.mejs-container.mejs-audio, .mejs__container.mejs__audio {
min-height: 75%;
margin: auto;
margin-top: 2%;
margin-bottom: 2%;
}
.external .mejs-container.mejs-audio, .mejs__container.mejs__audio {
margin: auto;
margin-top: 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>
</body>
</html>

Write Preview
Loading…
Cancel
Save