55 lines
2.0 KiB
HTML
55 lines
2.0 KiB
HTML
{{define "share"}}<!doctype html>
|
|
<html lang="en" data-bs-theme="dark">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{{.Title}} · VibeSonic</title>
|
|
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="/static/css/bootstrap-icons.min.css">
|
|
<link rel="stylesheet" href="/static/css/app.css">
|
|
</head>
|
|
<body>
|
|
<div class="container py-4" style="max-width: 700px;">
|
|
<h1 class="h4 mb-1"><i class="bi bi-vinyl-fill"></i> Shared music</h1>
|
|
{{if .Data.OwnerName}}<p class="text-secondary small">Shared by {{.Data.OwnerName}}</p>{{end}}
|
|
{{if .Data.Description}}<p>{{.Data.Description}}</p>{{end}}
|
|
|
|
{{if .Data.Songs}}
|
|
<div class="table-responsive" data-playable-list>
|
|
<table class="vs-table vs-table-hover table mb-0">
|
|
<tbody>
|
|
{{range $i, $s := .Data.Songs}}
|
|
<tr class="vs-playable" data-song-id="{{$s.ID}}" data-title="{{$s.Title}}" data-artist="{{$s.ArtistName}}" data-album="{{$s.AlbumTitle}}">
|
|
<td class="vs-track-num">{{add $i 1}}</td>
|
|
<td>
|
|
<div class="fw-semibold">{{$s.Title}}</div>
|
|
<div class="text-secondary small">{{$s.ArtistName}}</div>
|
|
</td>
|
|
<td class="text-end"><a class="btn btn-sm btn-outline-secondary" href="/share/{{$.Data.Token}}/stream/{{$s.ID}}" download><i class="bi bi-download"></i></a></td>
|
|
</tr>
|
|
{{end}}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{{else}}
|
|
<p class="text-secondary">This share has no items.</p>
|
|
{{end}}
|
|
</div>
|
|
|
|
<audio id="vs-share-audio" controls style="position:fixed; bottom:0; left:0; right:0; width:100%;"></audio>
|
|
<script>
|
|
(function () {
|
|
var audio = document.getElementById("vs-share-audio");
|
|
document.addEventListener("click", function (ev) {
|
|
var el = ev.target.closest(".vs-playable");
|
|
if (!el) return;
|
|
ev.preventDefault();
|
|
audio.src = "/share/{{.Data.Token}}/stream/" + encodeURIComponent(el.dataset.songId);
|
|
audio.play().catch(function () {});
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|
|
{{end}}
|