<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">
+<div class="jbx-player-bar">
+<?php if($is_playlist) { ?>
+<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>
+<?php } ?>
<audio id="jbx-audio" controls preload="metadata"<?= $song_url && !$is_playlist ? ' src="'.htmlspecialchars($song_url, ENT_QUOTES).'" autoplay' : '' ?>></audio>
+</div>
<?php if($is_playlist) { ?>
<script>
(function(){
var playlistUrl = <?= json_encode($playlist_url) ?>;
var el = document.getElementById('jbx-audio');
- function playNext(list, idx) {
- if (idx >= list.length) return;
+ var list = [];
+ var idx = 0;
+ function playAt(i) {
+ if (i < 0 || i >= list.length) return;
+ idx = i;
el.src = list[idx];
- el.onended = function() { playNext(list, idx + 1); };
+ el.onended = function() { if (idx + 1 < list.length) playAt(idx + 1); };
el.play();
}
+ document.getElementById('jbx-prev').onclick = function() { playAt(idx - 1); };
+ document.getElementById('jbx-next').onclick = function() { playAt(idx + 1); };
fetch(playlistUrl).then(function(r){ return r.text(); }).then(function(text){
- var list = text.trim().split(/\r?\n/).filter(function(u){ return u.length; });
- if (list.length) playNext(list, 0);
+ list = text.trim().split(/\r?\n/).filter(function(u){ return u.length; });
+ if (list.length) playAt(0);
});
})();
</script>
padding: 0;
border: 0;
height: 48px;
+ width: 100%;
overflow: hidden;
+ box-sizing: border-box;
}
-body.jbx-player #jbx-audio {
+body.jbx-player .jbx-player-bar {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
width: 100%;
height: 48px;
+ box-sizing: border-box;
+}
+body.jbx-player .jbx-player-bar .jbx-skip {
+ flex: 0 0 auto;
+ width: 32px;
+ height: 32px;
+ margin: 0 2px;
+ padding: 0;
+ border: 1px solid rgba(255,255,255,0.5);
+ background: #000099;
+ color: white;
+ font-size: 18px;
+ line-height: 1;
+ cursor: pointer;
+ vertical-align: middle;
+}
+body.jbx-player .jbx-player-bar .jbx-skip:hover {
+ background: #0000cc;
+}
+body.jbx-player .jbx-player-bar #jbx-audio {
+ flex: 1 1 0;
+ min-width: 0;
+ height: 48px;
display: block;
}
GIT.Harvie.CZ / mirrors / JukeBox.git / commitdiff
