mirror of
https://github.com/thebaer/cdr.git
synced 2024-11-14 17:21:01 +00:00
Use consistent indentation in templates
This commit is contained in:
parent
11db38aa36
commit
e64dae9c2d
14
mixtape.tmpl
14
mixtape.tmpl
@ -51,25 +51,25 @@
|
||||
<body>
|
||||
<div id="wrapper">
|
||||
<h1>Mixtape</h1>
|
||||
{{template "player" .Tracks}}
|
||||
{{template "player" .Tracks}}
|
||||
<div id="controls">
|
||||
<a id="prev" href="#prev">⏮ Previous</a>
|
||||
<a id="next" href="#next">Next ⏭</a>
|
||||
</div>
|
||||
{{template "playlist" .Tracks}}
|
||||
{{template "playlist-js"}}
|
||||
{{template "playlist" .Tracks}}
|
||||
{{template "playlist-js"}}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
{{end}}
|
||||
|
||||
{{define "track-info"}}
|
||||
{{if eq .Num 1}}
|
||||
{{if eq .Num 1}}
|
||||
<p>[Here I might introduce this mix.]</p>
|
||||
<p>[Some notes about track 1.]</p>
|
||||
{{else if eq .Num 2}}
|
||||
{{else if eq .Num 2}}
|
||||
<p>[Some notes about track 2.]</p>
|
||||
{{else if eq .Num 5}}
|
||||
{{else if eq .Num 5}}
|
||||
<p>[Some notes about track 5.]</p>
|
||||
{{end}}
|
||||
{{end}}
|
||||
{{end}}
|
||||
@ -1,102 +1,102 @@
|
||||
{{define "player"}}
|
||||
{{with $x := index . 0}}
|
||||
<audio id="player" preload="auto" tabindex="0" controls>
|
||||
<source src="{{$x.Filename}}">
|
||||
</audio>
|
||||
{{end}}
|
||||
{{with $x := index . 0}}
|
||||
<audio id="player" preload="auto" tabindex="0" controls>
|
||||
<source src="{{$x.Filename}}">
|
||||
</audio>
|
||||
{{end}}
|
||||
{{end}}
|
||||
{{define "playlist"}}
|
||||
<ol id="playlist">
|
||||
{{range $i, $el := .}}
|
||||
<li{{if eq $i 0}} class="active"{{end}}>
|
||||
<a class="track" href="{{$el.Filename}}" data-artist="{{$el.Artist}}" data-title="{{$el.Title}}">{{$el.Artist}} - {{$el.Title}}</a>
|
||||
{{template "track-info" $el}}
|
||||
</li>
|
||||
{{end}}
|
||||
</ol>
|
||||
<ol id="playlist">
|
||||
{{range $i, $el := .}}
|
||||
<li{{if eq $i 0}} class="active"{{end}}>
|
||||
<a class="track" href="{{$el.Filename}}" data-artist="{{$el.Artist}}" data-title="{{$el.Title}}">{{$el.Artist}} - {{$el.Title}}</a>
|
||||
{{template "track-info" $el}}
|
||||
</li>
|
||||
{{end}}
|
||||
</ol>
|
||||
{{end}}
|
||||
|
||||
{{define "track-info"}}{{end}}
|
||||
|
||||
{{define "full-player"}}
|
||||
{{template "player" .}}
|
||||
{{template "playlist" .}}
|
||||
{{template "playlist-js"}}
|
||||
{{template "player" .}}
|
||||
{{template "playlist" .}}
|
||||
{{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() {
|
||||
var current = 0;
|
||||
var $audio = $('#player');
|
||||
var $playlist = $('#playlist');
|
||||
var $tracks = $playlist.find('li a.track');
|
||||
var len = $tracks.length;
|
||||
$(document).ready(function () {
|
||||
var current = 0;
|
||||
var $audio = $('#player');
|
||||
var $playlist = $('#playlist');
|
||||
var $tracks = $playlist.find('li a.track');
|
||||
var len = $tracks.length;
|
||||
|
||||
$playlist.on('click', 'a.track', function (e) {
|
||||
e.preventDefault();
|
||||
link = $(this);
|
||||
current = link.parent().index();
|
||||
play(link, $audio[0]);
|
||||
});
|
||||
$audio[0].addEventListener('play', function (e) {
|
||||
var $link = $('li.active > a');
|
||||
setTrackMetadata($link);
|
||||
});
|
||||
$audio[0].addEventListener('ended', function (e) {
|
||||
playNext();
|
||||
});
|
||||
$('a#next').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
playNext();
|
||||
});
|
||||
$('a#prev').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
playPrev();
|
||||
});
|
||||
$playlist.on('click', 'a.track', function (e) {
|
||||
e.preventDefault();
|
||||
link = $(this);
|
||||
current = link.parent().index();
|
||||
play(link, $audio[0]);
|
||||
});
|
||||
$audio[0].addEventListener('play', function (e) {
|
||||
var $link = $('li.active > a');
|
||||
setTrackMetadata($link);
|
||||
});
|
||||
$audio[0].addEventListener('ended', function (e) {
|
||||
playNext();
|
||||
});
|
||||
$('a#next').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
playNext();
|
||||
});
|
||||
$('a#prev').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
playPrev();
|
||||
});
|
||||
|
||||
function playPrev() {
|
||||
current--;
|
||||
if (current < 0) {
|
||||
current = len - 1;
|
||||
}
|
||||
link = $playlist.find('a.track')[current];
|
||||
play($(link), $audio[0]);
|
||||
}
|
||||
function playPrev() {
|
||||
current--;
|
||||
if (current < 0) {
|
||||
current = len - 1;
|
||||
}
|
||||
link = $playlist.find('a.track')[current];
|
||||
play($(link), $audio[0]);
|
||||
}
|
||||
|
||||
function playNext() {
|
||||
current++;
|
||||
if (current == len) {
|
||||
current = 0;
|
||||
}
|
||||
link = $playlist.find('a.track')[current];
|
||||
play($(link), $audio[0]);
|
||||
}
|
||||
function playNext() {
|
||||
current++;
|
||||
if (current == len) {
|
||||
current = 0;
|
||||
}
|
||||
link = $playlist.find('a.track')[current];
|
||||
play($(link), $audio[0]);
|
||||
}
|
||||
|
||||
function setTrackMetadata($link) {
|
||||
if ('mediaSession' in navigator) {
|
||||
// Set track metadata
|
||||
navigator.mediaSession.metadata = new MediaMetadata({
|
||||
title: $link.data('title'),
|
||||
artist: $link.data('artist'),
|
||||
});
|
||||
}
|
||||
}
|
||||
function setTrackMetadata($link) {
|
||||
if ('mediaSession' in navigator) {
|
||||
// Set track metadata
|
||||
navigator.mediaSession.metadata = new MediaMetadata({
|
||||
title: $link.data('title'),
|
||||
artist: $link.data('artist'),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function play($link, $player) {
|
||||
$player.src = $link.attr('href');
|
||||
par = $link.parent();
|
||||
par.addClass('active').siblings().removeClass('active');
|
||||
$player.load();
|
||||
$player.play();
|
||||
}
|
||||
function play($link, $player) {
|
||||
$player.src = $link.attr('href');
|
||||
par = $link.parent();
|
||||
par.addClass('active').siblings().removeClass('active');
|
||||
$player.load();
|
||||
$player.play();
|
||||
}
|
||||
|
||||
if ('mediaSession' in navigator) {
|
||||
// Listen for MediaSession events
|
||||
navigator.mediaSession.setActionHandler('nexttrack', playNext);
|
||||
navigator.mediaSession.setActionHandler('previoustrack', playPrev);
|
||||
}
|
||||
});
|
||||
if ('mediaSession' in navigator) {
|
||||
// Listen for MediaSession events
|
||||
navigator.mediaSession.setActionHandler('nexttrack', playNext);
|
||||
navigator.mediaSession.setActionHandler('previoustrack', playPrev);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{{end}}
|
||||
Loading…
Reference in New Issue
Block a user