matt/cdr
1
0
Fork 0
mirror of https://github.com/thebaer/cdr.git synced 2024-11-15 01:31:01 +00:00
Code Issues Releases Wiki Activity

Add mixtape templates

Browse Source
This commit is contained in:
Matt Baer 2020-02-26 00:02:57 -05:00
parent 3125d14d23
commit c26beff32d
2 changed files with 87 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
mixtape.tmpl Normal file
View File

@ -0,0 +1,27 @@
{{define "mixtape"}}
<html>
<head>
<title>Mixtape</title>
<style type="text/css">
body {
font-size: 1.2em;
margin: 1em;
}
.active {
font-weight: bold;
}
#playlist {
list-style: none;
margin: 1em 0;
padding: 0;
}
#playlist li {
margin: 0.5em 0;
}
</style>
</head>
<body>
{{template "full-player" .Tracks}}
</body>
</html>
{{end}}

60
templates/parts.tmpl Normal file
View File

@ -0,0 +1,60 @@
{{define "player"}}
{{with $x := index . 0}}
<audio id="player" preload="auto" tabindex="0" controls>
<source src="{{$x.Filename}}">
</audio>
{{end}}
<ol id="playlist">
{{range $i, $el := .}}
<li{{if eq $i 0}} class="active"{{end}}>
<a href="{{$el.Filename}}">{{$el.Artist}} - {{$el.Title}}</a>
</li>
{{end}}
</ol>
{{end}}
{{define "full-player"}}
{{template "player" .}}
{{template "playlist-js"}}
{{end}}
{{define "playlist-js"}}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
init();
function init() {
var current = 0;
var $audio = $('#player');
var $playlist = $('#playlist');
var $tracks = $playlist.find('li a');
var len = $tracks.length - 1;
$playlist.on('click', 'a', function (e) {
e.preventDefault();
link = $(this);
current = link.parent().index();
run(link, $audio[0]);
});
$audio[0].addEventListener('ended', function (e) {
current++;
if (current == len) {
current = 0;
link = $playlist.find('a')[0];
} else {
link = $playlist.find('a')[current];
}
run($(link), $audio[0]);
});
}
function run($link, $player) {
$player.src = $link.attr('href');
par = $link.parent();
par.addClass('active').siblings().removeClass('active');
$player.load();
$player.play();
}
});
</script>
{{end}}