|
|
@@ -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}} |