<html class="jbx-player-html"><head><meta charset="<?= $GLOBALS['charset'] ?>"><title><?= htmlspecialchars($title, ENT_QUOTES, $GLOBALS['charset']) ?>: Music Player</title>
<link rel="stylesheet" type="text/css" href="<?= htmlspecialchars($css, ENT_QUOTES) ?>" />
</head><body class="jbx-player">
-<table class="jbx-player-bar" cellpadding="0" cellspacing="0"><tr>
-<?php if($is_playlist) { ?>
-<td class="jbx-skip-cell"><button type="button" class="jbx-skip" id="jbx-prev" title="Previous" aria-label="Previous">⏮</button></td>
-<td class="jbx-skip-cell"><button type="button" class="jbx-skip" id="jbx-next" title="Next" aria-label="Next">⏭</button></td>
-<?php } ?>
-<td class="jbx-audio-cell"><audio id="jbx-audio" controls preload="metadata"<?= $song_url && !$is_playlist ? ' src="'.htmlspecialchars($song_url, ENT_QUOTES).'" autoplay' : '' ?>></audio></td>
+<table class="jbx-player-table" cellpadding="0" cellspacing="0">
+<tr>
+<td style="width: 30%;">
+<button type="button" class="jbx-skip" id="jbx-prev" title="Previous" aria-label="Previous">⏮</button>
+<button type="button" class="jbx-skip" id="jbx-next" title="Next" aria-label="Next">⏭</button>
+<span id="jbx-audio-filename"><?= urldecode(basename($song_url)) ?></span>
+</td>
+<td><audio id="jbx-audio" controls preload="metadata"<?= $song_url && !$is_playlist ? ' src="'.htmlspecialchars($song_url, ENT_QUOTES).'" autoplay' : '' ?>></audio></td>
</tr></table>
<?php if($is_playlist) { ?>
<script>
el.src = list[idx];
el.onended = function() { if (idx + 1 < list.length) playAt(idx + 1); };
el.play();
+ document.getElementById('jbx-audio-filename').innerHTML = decodeURIComponent(document.getElementById('jbx-audio').src.split('/').pop());
}
document.getElementById('jbx-prev').onclick = function() { playAt(idx - 1); };
document.getElementById('jbx-next').onclick = function() { playAt(idx + 1); };
margin: 0;
padding: 0;
border: 0;
- height: 48px;
width: 100%;
overflow-x: hidden;
overflow-y: hidden;
box-sizing: border-box;
}
-body.jbx-player .jbx-player-bar,
-body.jbx-player .jbx-player-bar * {
- border-radius: 0;
+
+audio {
+ width: 100%; margin: 0; padding: 0;
+ filter: hue-rotate(0deg) saturate(20);
}
-body.jbx-player table.jbx-player-bar {
+
+table.jbx-player-table {
margin: 0;
padding: 0;
border: 0;
width: 100%;
height: 48px;
}
-body.jbx-player table.jbx-player-bar td {
- margin: 0;
- padding: 0;
- border: 0;
- vertical-align: middle;
-}
-body.jbx-player td.jbx-skip-cell {
- width: 36px;
-}
-body.jbx-player td.jbx-audio-cell {
- width: auto;
-}
-body.jbx-player .jbx-skip {
- width: 32px;
- height: 32px;
- margin: 0;
- padding: 0;
- border: 1px solid rgba(255,255,255,0.5);
- background: #000099;
- color: white;
- font-size: 18px;
- line-height: 1;
- cursor: pointer;
- display: block;
- box-sizing: border-box;
-}
+
body.jbx-player .jbx-skip:hover {
background: #0000cc;
}
+
+body.jbx-player .jbx-skip {
+ margin: 0; padding: 0;
+ height: 40px; width: 40px;
+}
body.jbx-player #jbx-audio {
margin: 0;
padding: 0;
GIT.Harvie.CZ / mirrors / JukeBox.git / commitdiff
