57 lines
1.4 KiB
JavaScript
57 lines
1.4 KiB
JavaScript
// templates.js
|
|
const Templates = {
|
|
test: ()=>`
|
|
<div class="card artist-card">
|
|
<h1>Test</h1>
|
|
</div>
|
|
`,
|
|
|
|
home: (nowPlaying, upNext=[]) => `
|
|
<div class="card nowplaying-card">
|
|
<h2>Now Playing</h2>
|
|
${Cards.TrackCard(nowPlaying)}
|
|
</div>
|
|
<div class="card upnext-card">
|
|
<h3>Up Next</h3>
|
|
<div class="upnext-list">
|
|
${upNext.map(t => Cards.TrackCard(t)).join("")}
|
|
</div>
|
|
</div>
|
|
`,
|
|
|
|
search: (results) => `
|
|
<div class="card search-card">
|
|
<h2>Search Results</h2>
|
|
<div class="search-results">
|
|
${results.map(r => {
|
|
if (r.type === "artist") return Cards.ArtistCard(r);
|
|
if (r.type === "playlist") return Cards.PlaylistCard(r);
|
|
if (r.type === "track") return Cards.TrackCard(r);
|
|
return "";
|
|
}).join("")}
|
|
</div>
|
|
</div>
|
|
`,
|
|
|
|
artist: (trackList) => `
|
|
${Cards.TrackCard(trackList)}
|
|
`,
|
|
|
|
playlists: (playlists) => `
|
|
<div class="card playlists-card">
|
|
<h2>Playlists</h2>
|
|
<div class="playlist-list">
|
|
${playlists.map(p => Cards.PlaylistCard(p)).join("")}
|
|
</div>
|
|
</div>
|
|
`,
|
|
|
|
modal: (track) => `
|
|
<div class="modal-content">
|
|
<h2>${track.name}</h2>
|
|
<p>${track.artist} — <em>${track.album}</em></p>
|
|
<button onclick="queueTrack('${track.uri}')">Add to Queue</button>
|
|
<button onclick="playNext('${track.uri}')">Play Next</button>
|
|
</div>
|
|
`
|
|
};
|