Fix formatting on external player for firefox
Signed-off-by: Andrew DeMaria <lostonamountain@gmail.com>
This commit is contained in:
@@ -10,14 +10,15 @@
|
|||||||
<script type="text/javascript" src="<c:url value="/script/mediaelement/playlist.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"/>">
|
<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)} — ${fn:escapeXml(model.songs[0].albumName)}"/>
|
<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}"/>
|
<meta name="og:image" content="${model.songs[0].coverArtUrl}"/>
|
||||||
</c:if>
|
</c:if>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="mainframe bgcolor1" style="padding-top:2em">
|
<body class="mainframe bgcolor1" style="height:100%;margin:0;">
|
||||||
|
<div class="external box">
|
||||||
<div style="margin:auto;width:500px">
|
<div class="header">
|
||||||
<h1>
|
<h1>
|
||||||
<c:choose>
|
<c:choose>
|
||||||
<c:when test="${empty model.share or empty model.songs}">
|
<c:when test="${empty model.share or empty model.songs}">
|
||||||
@@ -45,20 +46,44 @@
|
|||||||
</c:forEach>
|
</c:forEach>
|
||||||
</audio>
|
</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">
|
<script type="text/javascript">
|
||||||
new MediaElementPlayer('player', {
|
new MediaElementPlayer('player', {
|
||||||
features: ['playpause', 'playlist', 'current', 'progress', 'duration', 'volume'],
|
features: ['playpause', 'playlist', 'current', 'progress', 'duration', 'volume'],
|
||||||
currentMessage: "",
|
currentMessage: "",
|
||||||
|
audioWidth: 600,
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
.mejs-container.mejs-audio, .mejs__container.mejs__audio {
|
.external .mejs-container.mejs-audio, .mejs__container.mejs__audio {
|
||||||
min-height: 75%;
|
|
||||||
margin: auto;
|
margin: auto;
|
||||||
margin-top: 2%;
|
margin-top: 2%;
|
||||||
margin-bottom: 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>
|
</style>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Reference in New Issue
Block a user