source: Klonkt/src/assets/js/audio-player.js@ 7bc636b

main
Last change on this file since 7bc636b was 7bc636b, checked in by Robin <robin@…>, 4 months ago

Initial commit — PrutFolio v1 source (pulled from Hetzner /srv/prutfolio)
  • Property mode set to 100644
File size: 22.8 KB
Line 
1/**
2 * PrutCMS v10 Audio Player — v9 mini-player + Spotify-style sheet.
3 *
4 * Two surfaces:
5 * 1. .audio-player — bottom strip: cover + meta + controls + progress + volume
6 * 2. .audio-sheet — full-height now-playing panel (slides up from bottom)
7 *
8 * Features:
9 * - Click cover/meta on mini-player → open sheet
10 * - Sheet handle (pill) or backdrop click → close
11 * - Touch swipe-down on the drag-zone → close (mobile only; desktop has the X)
12 * - Reads data-pcms-track-url + data-pcms-track + data-pcms-album from posts
13 * - body.has-audio-player adds bottom padding when player visible
14 * - body.audio-sheet-locked prevents body scroll when sheet open
15 * - Survives HTMX swaps via htmx:afterSettle re-attach
16 *
17 * Singleton — guards against double-init.
18 */
19(function() {
20 if (window.pcmsAudioPlayer) return;
21
22 const SVG = {
23 play: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 4l12 8-12 8z" fill="currentColor"/></svg>',
24 pause: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 4h4v16H7zM13 4h4v16h-4z" fill="currentColor"/></svg>',
25 prev: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 5v14M20 5l-11 7 11 7V5z" stroke="currentColor" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>',
26 next: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M17 5v14M4 5l11 7-11 7V5z" stroke="currentColor" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>',
27 vol: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 9v6h4l5 5V4L7 9H3zM16 8a5 5 0 010 8M19 5a9 9 0 010 14" stroke="currentColor" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>',
28 mute: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 9v6h4l5 5V4L7 9H3zM17 9l5 5M22 9l-5 5" stroke="currentColor" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>',
29 musicNote: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 17V5l12-2v12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="6" cy="17" r="3" fill="currentColor"/><circle cx="18" cy="15" r="3" fill="currentColor"/></svg>',
30 };
31
32 // ============================================================
33 // 1. Build DOM
34 // ============================================================
35 const root = document.createElement('aside');
36 root.id = 'pcms-audio-player';
37 root.className = 'audio-player';
38 root.setAttribute('aria-label', 'Audio speler');
39 root.innerHTML = `
40 <div class="audio-player-inner">
41 <button type="button" class="audio-player-expand-trigger" id="audio-expand-trigger" aria-label="Vergroot speler">
42 <div class="audio-player-cover" id="audio-cover" aria-hidden="true">${SVG.musicNote}</div>
43 <div class="audio-player-meta">
44 <div class="audio-player-title-wrap"><span class="audio-player-title" id="audio-title">No track</span></div>
45 <div class="audio-player-artist" id="audio-artist"></div>
46 </div>
47 </button>
48 <div class="audio-player-controls">
49 <button type="button" class="audio-btn" id="audio-prev" aria-label="Vorige" title="Vorige">${SVG.prev}</button>
50 <button type="button" class="audio-btn audio-btn-play" id="audio-play" aria-label="Afspelen">
51 <span class="icon-play">${SVG.play}</span><span class="icon-pause">${SVG.pause}</span>
52 </button>
53 <button type="button" class="audio-btn" id="audio-next" aria-label="Volgende" title="Volgende">${SVG.next}</button>
54 </div>
55 <div class="audio-player-progress">
56 <span class="audio-time mono" id="audio-current">0:00</span>
57 <div class="audio-seek" id="audio-seek" role="slider" aria-label="Voortgang" tabindex="0">
58 <div class="audio-seek-bar"><div class="audio-seek-fill" id="audio-seek-fill"></div></div>
59 </div>
60 <span class="audio-time mono" id="audio-total">0:00</span>
61 </div>
62 <div class="audio-player-volume">
63 <button type="button" class="audio-btn" id="audio-mute" aria-label="Mute">
64 <span class="icon-vol">${SVG.vol}</span><span class="icon-mute">${SVG.mute}</span>
65 </button>
66 <div class="audio-volume-popup">
67 <input type="range" id="audio-volume" min="0" max="100" value="80" aria-label="Volume">
68 </div>
69 </div>
70 </div>
71 <audio id="audio-element" preload="none" playsinline webkit-playsinline controlsList="nodownload"></audio>
72
73 <div class="audio-sheet" id="audio-sheet" aria-hidden="true">
74 <div class="audio-sheet-backdrop" id="audio-sheet-backdrop"></div>
75 <div class="audio-sheet-panel" role="dialog" aria-label="Now playing">
76 <div class="audio-sheet-drag-zone" id="audio-sheet-drag-zone">
77 <button type="button" class="audio-sheet-handle" id="audio-sheet-close" aria-label="Speler verkleinen"></button>
78 <div class="audio-sheet-cover" id="audio-sheet-cover" aria-hidden="true">${SVG.musicNote}</div>
79 </div>
80 <div class="audio-sheet-info">
81 <div class="audio-sheet-title" id="audio-sheet-title">—</div>
82 <div class="audio-sheet-artist" id="audio-sheet-artist"></div>
83 <div class="audio-sheet-album" id="audio-sheet-album"></div>
84 </div>
85 <div class="audio-sheet-progress">
86 <span class="audio-time mono" id="audio-sheet-current">0:00</span>
87 <div class="audio-seek" id="audio-sheet-seek" role="slider" aria-label="Voortgang" tabindex="0">
88 <div class="audio-seek-bar"><div class="audio-seek-fill" id="audio-sheet-seek-fill"></div></div>
89 </div>
90 <span class="audio-time mono" id="audio-sheet-total">0:00</span>
91 </div>
92 <div class="audio-sheet-controls">
93 <button type="button" class="audio-btn audio-sheet-btn" id="audio-sheet-prev" aria-label="Vorige">${SVG.prev}</button>
94 <button type="button" class="audio-btn audio-sheet-play" id="audio-sheet-play" aria-label="Afspelen">
95 <span class="icon-play">${SVG.play}</span><span class="icon-pause">${SVG.pause}</span>
96 </button>
97 <button type="button" class="audio-btn audio-sheet-btn" id="audio-sheet-next" aria-label="Volgende">${SVG.next}</button>
98 </div>
99 <div class="audio-sheet-queue" id="audio-sheet-queue" hidden>
100 <div class="audio-sheet-queue-label">Queue</div>
101 <ol class="audio-sheet-queue-list" id="audio-sheet-queue-list"></ol>
102 </div>
103 </div>
104 </div>
105 `;
106 document.body.appendChild(root);
107
108 // FIX: Move .audio-sheet out of the .audio-player root so its
109 // position:fixed is anchored to the viewport, not to the mini-bar.
110 // The mini-bar has backdrop-filter, which makes it a containing
111 // block for fixed descendants — that broke the sheet's left/right/top/bottom.
112 const _detachedSheet = root.querySelector('.audio-sheet');
113 if (_detachedSheet) document.body.appendChild(_detachedSheet);
114
115 // ============================================================
116 // 2. Element references
117 // ============================================================
118 const $ = (id) => document.getElementById(id);
119 const audio = $('audio-element');
120 const cover = $('audio-cover');
121 const titleEl = $('audio-title');
122 const artistEl = $('audio-artist');
123 const seek = $('audio-seek');
124 const seekFill = $('audio-seek-fill');
125 const currentEl = $('audio-current');
126 const totalEl = $('audio-total');
127 const playBtn = $('audio-play');
128 const prevBtn = $('audio-prev');
129 const nextBtn = $('audio-next');
130 const muteBtn = $('audio-mute');
131 const volumeSlider = $('audio-volume');
132 const expandTrigger = $('audio-expand-trigger');
133
134 const sheet = $('audio-sheet');
135 const sheetBackdrop = $('audio-sheet-backdrop');
136 const sheetPanel = sheet.querySelector('.audio-sheet-panel');
137 const sheetClose = $('audio-sheet-close');
138 const sheetCover = $('audio-sheet-cover');
139 const sheetTitle = $('audio-sheet-title');
140 const sheetArtist = $('audio-sheet-artist');
141 const sheetAlbum = $('audio-sheet-album');
142 const sheetSeek = $('audio-sheet-seek');
143 const sheetSeekFill = $('audio-sheet-seek-fill');
144 const sheetCurrent = $('audio-sheet-current');
145 const sheetTotal = $('audio-sheet-total');
146 const sheetPlay = $('audio-sheet-play');
147 const sheetPrev = $('audio-sheet-prev');
148 const sheetNext = $('audio-sheet-next');
149 const sheetQueue = $('audio-sheet-queue');
150 const sheetQueueList = $('audio-sheet-queue-list');
151 const dragZone = $('audio-sheet-drag-zone');
152
153 // ============================================================
154 // 3. State
155 // ============================================================
156 let queue = [];
157 let currentIndex = 0;
158 let isPlaying = false;
159 let albumName = '';
160
161 // Hide initially
162 root.classList.add('audio-player-hidden');
163
164 // ============================================================
165 // 4. Track / queue loading
166 // ============================================================
167 function setCoverImage(el, url) {
168 if (url) {
169 el.style.backgroundImage = `url("${url}")`;
170 el.classList.add('has-image');
171 el.innerHTML = '';
172 } else {
173 el.style.backgroundImage = '';
174 el.classList.remove('has-image');
175 el.innerHTML = SVG.musicNote;
176 }
177 }
178
179 function loadTrack(index) {
180 if (!queue[index]) {
181 console.warn('[pcms-audio] loadTrack: no track at index', index);
182 return;
183 }
184 currentIndex = index;
185 const t = queue[index];
186 if (!t.url) {
187 console.error('[pcms-audio] track has no url', t);
188 return;
189 }
190 console.log('[pcms-audio] loading', t.title, t.url);
191 audio.src = t.url;
192 titleEl.textContent = t.title || 'Untitled';
193 artistEl.textContent = t.artist || '';
194 sheetTitle.textContent = t.title || 'Untitled';
195 sheetArtist.textContent = t.artist || '';
196 sheetAlbum.textContent = albumName || '';
197 setCoverImage(cover, t.cover);
198 setCoverImage(sheetCover, t.cover);
199 root.classList.remove('audio-player-hidden');
200 document.body.classList.add('has-audio-player');
201 renderQueue();
202 }
203
204 function setQueue(tracks, startIdx, opts) {
205 queue = Array.isArray(tracks) ? tracks.slice() : [];
206 albumName = (opts && opts.albumName) || '';
207 if (!queue.length) return;
208 loadTrack(typeof startIdx === 'number' ? Math.max(0, Math.min(startIdx, queue.length - 1)) : 0);
209 play();
210 }
211
212 function play() {
213 if (!audio.src) return;
214 const p = audio.play();
215 if (p && typeof p.catch === 'function') {
216 p.catch((err) => console.warn('[pcms-audio] play() rejected', err));
217 }
218 }
219 function pause() { audio.pause(); }
220 function togglePlay() { audio.paused ? play() : pause(); }
221 function next() {
222 if (!queue.length) return;
223 loadTrack((currentIndex + 1) % queue.length);
224 play();
225 }
226 function prev() {
227 if (!queue.length) return;
228 loadTrack(currentIndex === 0 ? queue.length - 1 : currentIndex - 1);
229 play();
230 }
231 function close() {
232 pause();
233 root.classList.add('audio-player-hidden');
234 document.body.classList.remove('has-audio-player');
235 closeSheet();
236 queue = [];
237 albumName = '';
238 }
239
240 function renderQueue() {
241 if (!queue.length) { sheetQueue.hidden = true; return; }
242 sheetQueueList.innerHTML = '';
243 queue.forEach((t, i) => {
244 const li = document.createElement('li');
245 li.className = 'audio-sheet-queue-item' + (i === currentIndex ? ' is-current' : '');
246 li.dataset.idx = String(i);
247 li.innerHTML = `<span class="aqi-num">${i + 1}.</span> <span class="aqi-title">${escapeHtml(t.title || 'Untitled')}</span>`
248 + (t.artist ? `<span class="aqi-artist">${escapeHtml(t.artist)}</span>` : '');
249 sheetQueueList.appendChild(li);
250 });
251 sheetQueueList.querySelectorAll('.audio-sheet-queue-item').forEach((li) => {
252 li.addEventListener('click', () => {
253 const idx = parseInt(li.dataset.idx, 10);
254 if (!isNaN(idx) && idx !== currentIndex) {
255 loadTrack(idx);
256 play();
257 }
258 });
259 });
260 sheetQueue.hidden = queue.length < 2;
261 }
262
263 function escapeHtml(s) {
264 return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
265 }
266
267 // ============================================================
268 // 5. Audio element events → UI sync
269 // ============================================================
270 audio.addEventListener('play', () => { isPlaying = true; root.classList.add('is-playing'); });
271 audio.addEventListener('pause', () => { isPlaying = false; root.classList.remove('is-playing'); });
272 audio.addEventListener('ended', next);
273 audio.addEventListener('error', (e) => {
274 const code = audio.error ? audio.error.code : '?';
275 console.error('[pcms-audio] playback error', code, audio.src, e);
276 });
277 audio.addEventListener('stalled', () => console.warn('[pcms-audio] stalled'));
278 audio.addEventListener('volumechange', () => { root.classList.toggle('is-muted', audio.muted || audio.volume === 0); });
279 audio.addEventListener('timeupdate', () => {
280 if (!audio.duration || isNaN(audio.duration)) return;
281 const pct = (audio.currentTime / audio.duration) * 100;
282 seekFill.style.width = pct + '%';
283 sheetSeekFill.style.width = pct + '%';
284 currentEl.textContent = formatTime(audio.currentTime);
285 totalEl.textContent = formatTime(audio.duration);
286 sheetCurrent.textContent = formatTime(audio.currentTime);
287 sheetTotal.textContent = formatTime(audio.duration);
288 });
289
290 function formatTime(s) {
291 if (!s || isNaN(s)) return '0:00';
292 const m = Math.floor(s / 60), sec = Math.floor(s % 60);
293 return m + ':' + (sec < 10 ? '0' : '') + sec;
294 }
295
296 function attachSeek(seekEl) {
297 seekEl.addEventListener('click', (e) => {
298 if (!audio.duration) return;
299 const rect = seekEl.getBoundingClientRect();
300 const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
301 audio.currentTime = ratio * audio.duration;
302 });
303 }
304 attachSeek(seek);
305 attachSeek(sheetSeek);
306
307 audio.volume = 0.8;
308 volumeSlider.addEventListener('input', () => {
309 audio.volume = volumeSlider.value / 100;
310 if (volumeSlider.value > 0) audio.muted = false;
311 });
312 muteBtn.addEventListener('click', () => { audio.muted = !audio.muted; });
313
314 // ============================================================
315 // 6. Control wiring
316 // ============================================================
317 playBtn.addEventListener('click', togglePlay);
318 prevBtn.addEventListener('click', prev);
319 nextBtn.addEventListener('click', next);
320 sheetPlay.addEventListener('click', togglePlay);
321 sheetPrev.addEventListener('click', prev);
322 sheetNext.addEventListener('click', next);
323
324 // ============================================================
325 // 7. Sheet expand/close + drag-down-to-close
326 // ============================================================
327 function openSheet() {
328 sheet.classList.add('is-open');
329 sheet.setAttribute('aria-hidden', 'false');
330 document.body.classList.add('audio-sheet-locked');
331 }
332 function closeSheet() {
333 sheet.classList.remove('is-open');
334 sheet.setAttribute('aria-hidden', 'true');
335 document.body.classList.remove('audio-sheet-locked');
336 sheetPanel.style.removeProperty('--pcms-drag-y');
337 sheetBackdrop.style.removeProperty('--pcms-sheet-progress');
338 }
339 expandTrigger.addEventListener('click', openSheet);
340 sheetClose.addEventListener('click', closeSheet);
341 sheetBackdrop.addEventListener('click', closeSheet);
342 document.addEventListener('keydown', (e) => {
343 if (e.key === 'Escape' && sheet.classList.contains('is-open')) closeSheet();
344 });
345
346 // Drag-down-to-close on touch devices.
347 //
348 // We set --pcms-drag-y as a CSS custom prop instead of writing
349 // sheetPanel.style.transform directly. The reason: on desktop the panel
350 // uses `transform: translate(-50%, 0)` for horizontal centering. Writing
351 // `style.transform = translateY(...)` would obliterate the -50% and the
352 // panel would jump rightward. With a custom prop, audio.css composes the
353 // final transform per breakpoint:
354 // mobile: transform: translateY(var(--pcms-drag-y, 0))
355 // desktop: transform: translate(-50%, var(--pcms-drag-y, 0))
356 let dragStartY = 0, dragLastY = 0, isDragging = false;
357 function onPointerDown(e) {
358 if (e.pointerType !== 'touch') return;
359 if (sheetPanel.scrollTop > 0) return; // queue is scrolled, don't drag
360 dragStartY = dragLastY = e.clientY;
361 isDragging = true;
362 sheetPanel.classList.add('is-dragging');
363 sheetBackdrop.classList.add('is-dragging');
364 }
365 function onPointerMove(e) {
366 if (!isDragging) return;
367 dragLastY = e.clientY;
368 const dy = Math.max(0, dragLastY - dragStartY);
369 sheetPanel.style.setProperty('--pcms-drag-y', dy + 'px');
370 const progress = Math.max(0, 1 - dy / sheetPanel.offsetHeight);
371 sheetBackdrop.style.setProperty('--pcms-sheet-progress', String(progress));
372 }
373 function onPointerUp() {
374 if (!isDragging) return;
375 isDragging = false;
376 sheetPanel.classList.remove('is-dragging');
377 sheetBackdrop.classList.remove('is-dragging');
378 const dy = dragLastY - dragStartY;
379 if (dy > 100) {
380 closeSheet();
381 } else {
382 sheetPanel.style.removeProperty('--pcms-drag-y');
383 sheetBackdrop.style.removeProperty('--pcms-sheet-progress');
384 }
385 }
386 if (window.PointerEvent) {
387 dragZone.addEventListener('pointerdown', onPointerDown);
388 document.addEventListener('pointermove', onPointerMove);
389 document.addEventListener('pointerup', onPointerUp);
390 document.addEventListener('pointercancel', onPointerUp);
391 }
392
393 // ============================================================
394 // 8. Hook up post-audio-track + post-album-cover-btn + .pat-row + .post-album-playall
395 // ============================================================
396 // Four entry points fire the same play action:
397 // - .pat-play → single-track widget in a post
398 // - .pat-row → track row inside an album/playlist tracklist
399 // - .post-album-cover-btn → big cover button (plays album from track 0)
400 // - .post-album-playall → "Speel album" / "Speel playlist" button
401 //
402 // For .pat-play the metadata lives on the surrounding .post-audio-track
403 // wrapper. For the other three the data is on the button itself. The
404 // handler reads from button-first, falls back to wrapper.
405 function attachListeners() {
406 const playBtns = document.querySelectorAll(
407 '.post-audio-track .pat-play, ' +
408 '.post-album-tracks .pat-row, ' +
409 '.post-album-cover-btn, ' +
410 '.post-album-playall'
411 );
412 if (playBtns.length) console.log('[pcms-audio] attaching to', playBtns.length, 'play buttons');
413
414 playBtns.forEach((btn) => {
415 if (btn.dataset.pcmsAttached) return;
416 btn.dataset.pcmsAttached = '1';
417
418 btn.addEventListener('click', (e) => {
419 e.preventDefault();
420 e.stopPropagation();
421 // Resolve metadata: button-first, then closest .post-audio-track wrapper
422 // (only inline single-track widgets put the data on the wrapper).
423 const wrapper = btn.closest('.post-audio-track');
424 const albumId = btn.dataset.pcmsAlbumId || (wrapper && wrapper.dataset.pcmsAlbumId);
425 const trackData = btn.dataset.pcmsTrack || (wrapper && wrapper.dataset.pcmsTrack);
426 const trackUrl = btn.dataset.pcmsTrackUrl || (wrapper && wrapper.dataset.pcmsTrackUrl);
427 console.log('[pcms-audio] click', { btn: btn.className, albumId, trackUrl, hasTrackData: !!trackData });
428
429 if (albumId) {
430 const album = document.getElementById(albumId);
431 if (!album) { console.error('[pcms-audio] album not found:', albumId); return; }
432 try {
433 const tracks = JSON.parse(album.dataset.pcmsAlbum);
434 // Start at the clicked track if we know its URL, else start at 0
435 // (cover-btn and playall both want to start from the beginning).
436 const startIdx = trackUrl ? tracks.findIndex(t => t.url === trackUrl) : 0;
437 setQueue(tracks, startIdx >= 0 ? startIdx : 0, { albumName: album.dataset.pcmsAlbumTitle || '' });
438 } catch(err) { console.error('[pcms-audio] bad album JSON', err, album.dataset.pcmsAlbum); }
439 } else if (trackData) {
440 try {
441 const t = JSON.parse(trackData);
442 setQueue([t], 0);
443 } catch(err) { console.error('[pcms-audio] bad track JSON', err, trackData); }
444 } else if (trackUrl) {
445 // Fallback: at minimum we have the signed URL
446 setQueue([{ url: trackUrl, title: 'Track', artist: '', cover: '' }], 0);
447 } else {
448 console.error('[pcms-audio] no track data or url on button or wrapper', btn);
449 }
450 });
451 });
452 }
453
454 attachListeners();
455 document.body.addEventListener('htmx:afterSettle', attachListeners);
456
457 // ============================================================
458 // 8b. Admin playlist delete (event delegation)
459 // ============================================================
460 // The post-album embed renders a [data-pcms-playlist-delete] button
461 // top-right when the viewer is admin (server decides; not client).
462 // We delegate from document.body so HTMX-swapped content works too.
463 document.body.addEventListener('click', async (e) => {
464 const btn = e.target.closest('[data-pcms-playlist-delete]');
465 if (!btn) return;
466 e.preventDefault();
467 e.stopPropagation();
468 const id = btn.dataset.pcmsPlaylistDelete;
469 const title = btn.dataset.pcmsPlaylistTitle || id;
470 if (!id) return;
471 if (!confirm(`Playlist "${title}" verwijderen? De embed in deze post toont vanaf nu een placeholder.`)) return;
472 btn.disabled = true;
473 try {
474 const r = await fetch(`/admin/playlists/api/${encodeURIComponent(id)}/delete`, {
475 method: 'POST',
476 headers: { 'X-CSRF-Token': '' },
477 credentials: 'same-origin',
478 });
479 const j = await r.json().catch(() => ({}));
480 if (j && j.ok) {
481 location.reload();
482 } else {
483 alert('Verwijderen mislukt: ' + ((j && j.error) || 'onbekende fout'));
484 btn.disabled = false;
485 }
486 } catch (err) {
487 alert('Verwijderen mislukt: ' + err.message);
488 btn.disabled = false;
489 }
490 });
491
492 // ============================================================
493 // 9. Public API
494 // ============================================================
495 window.pcmsAudioPlayer = {
496 setQueue, play, pause, next, prev, close, openSheet, closeSheet,
497 isPlaying: () => isPlaying,
498 currentTrack: () => queue[currentIndex] || null,
499 };
500
501 // ============================================================
502 // 10. Site-level pre-seed (window.PCMS_SITE_TRACKS)
503 // ============================================================
504 if (Array.isArray(window.PCMS_SITE_TRACKS) && window.PCMS_SITE_TRACKS.length) {
505 queue = window.PCMS_SITE_TRACKS.map(t => ({
506 url: t.media_url || t.url,
507 title: t.title || 'Untitled',
508 artist: t.artist || '',
509 cover: t.cover_url || t.cover || '',
510 }));
511 if (queue.length) loadTrack(0);
512 }
513})();
Note: See TracBrowser for help on using the repository browser.