cdr/templates/parts.tmpl

{{define "player"}}
	{{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>
{{end}}

{{define "track-info"}}{{end}}

{{define "full-player"}}
	{{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;

			$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 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 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);
			}
		});
	</script>
{{end}}