5268 lines
231 KiB
JavaScript
5268 lines
231 KiB
JavaScript
//js/ui.js
|
|
import { showNotification } from './downloads.js';
|
|
import {
|
|
formatTime,
|
|
createPlaceholder,
|
|
trackDataStore,
|
|
hasExplicitContent,
|
|
getTrackArtists,
|
|
getTrackArtistsHTML,
|
|
getTrackTitle,
|
|
getTrackYearDisplay,
|
|
createQualityBadgeHTML,
|
|
calculateTotalDuration,
|
|
formatDuration,
|
|
escapeHtml,
|
|
getShareUrl,
|
|
} from './utils.js';
|
|
import { openLyricsPanel } from './lyrics.js';
|
|
import {
|
|
recentActivityManager,
|
|
backgroundSettings,
|
|
dynamicColorSettings,
|
|
cardSettings,
|
|
visualizerSettings,
|
|
homePageSettings,
|
|
fontSettings,
|
|
contentBlockingSettings,
|
|
settingsUiState,
|
|
} from './storage.js';
|
|
import { db } from './db.js';
|
|
import { getVibrantColorFromImage } from './vibrant-color.js';
|
|
import { syncManager } from './accounts/pocketbase.js';
|
|
import { Visualizer } from './visualizer.js';
|
|
import { navigate } from './router.js';
|
|
import { sidePanelManager } from './side-panel.js';
|
|
import {
|
|
renderUnreleasedPage as renderUnreleasedTrackerPage,
|
|
renderTrackerArtistPage as renderTrackerArtistContent,
|
|
renderTrackerProjectPage as renderTrackerProjectContent,
|
|
renderTrackerTrackPage as renderTrackerTrackContent,
|
|
findTrackerArtistByName,
|
|
getArtistUnreleasedProjects,
|
|
createProjectCardHTML,
|
|
createTrackFromSong,
|
|
} from './tracker.js';
|
|
import { trackSearch, trackChangeSort } from './analytics.js';
|
|
|
|
fontSettings.applyFont();
|
|
fontSettings.applyFontSize();
|
|
|
|
import {
|
|
SVG_PLAY,
|
|
SVG_DOWNLOAD,
|
|
SVG_MENU,
|
|
SVG_HEART,
|
|
SVG_VOLUME,
|
|
SVG_MUTE,
|
|
SVG_HEART_FILLED,
|
|
SVG_CLOSE,
|
|
SVG_SORT,
|
|
SVG_BIN,
|
|
SVG_TRASH,
|
|
SVG_GLOBE,
|
|
SVG_INSTAGRAM,
|
|
SVG_FACEBOOK,
|
|
SVG_YOUTUBE,
|
|
SVG_TWITTER,
|
|
SVG_LINK,
|
|
SVG_SOUNDCLOUD,
|
|
SVG_APPLE,
|
|
SVG_REPEAT,
|
|
SVG_REPEAT_ONE,
|
|
SVG_PLAY_LARGE,
|
|
SVG_PAUSE_LARGE,
|
|
SVG_MINUS,
|
|
SVG_SQUARE_PEN,
|
|
SVG_SHARE,
|
|
SVG_SHUFFLE,
|
|
SVG_VIDEO,
|
|
SVG_LEFT_ARROW,
|
|
SVG_RIGHT_ARROW,
|
|
SVG_CLOCK,
|
|
SVG_MOVE_UP,
|
|
SVG_MOVE_DOWN,
|
|
} from './icons.js';
|
|
|
|
function sortTracks(tracks, sortType) {
|
|
if (sortType === 'custom') return [...tracks];
|
|
const sorted = [...tracks];
|
|
switch (sortType) {
|
|
case 'added-newest':
|
|
return sorted.sort((a, b) => (b.addedAt || 0) - (a.addedAt || 0));
|
|
case 'added-oldest':
|
|
return sorted.sort((a, b) => (a.addedAt || 0) - (b.addedAt || 0));
|
|
case 'title':
|
|
return sorted.sort((a, b) => (a.title || '').localeCompare(b.title || ''));
|
|
case 'artist':
|
|
return sorted.sort((a, b) => {
|
|
const artistA = a.artist?.name || a.artists?.[0]?.name || '';
|
|
const artistB = b.artist?.name || b.artists?.[0]?.name || '';
|
|
return artistA.localeCompare(artistB);
|
|
});
|
|
case 'album':
|
|
return sorted.sort((a, b) => {
|
|
const albumA = a.album?.title || '';
|
|
const albumB = b.album?.title || '';
|
|
const albumCompare = albumA.localeCompare(albumB);
|
|
if (albumCompare !== 0) return albumCompare;
|
|
const trackNumA = a.trackNumber || a.position || 0;
|
|
const trackNumB = b.trackNumber || b.position || 0;
|
|
return trackNumA - trackNumB;
|
|
});
|
|
default:
|
|
return sorted;
|
|
}
|
|
}
|
|
|
|
export class UIRenderer {
|
|
constructor(api, player) {
|
|
this.api = api;
|
|
this.player = player;
|
|
this.currentTrack = null;
|
|
this.searchAbortController = null;
|
|
this.vibrantColorCache = new Map();
|
|
this.visualizer = null;
|
|
this.renderLock = false;
|
|
this.lastRecommendedTracks = [];
|
|
|
|
// Listen for dynamic color reset events
|
|
window.addEventListener('reset-dynamic-color', () => {
|
|
this.resetVibrantColor();
|
|
});
|
|
|
|
// Listen for theme changes to re-apply vibrant colors
|
|
window.addEventListener('theme-changed', () => {
|
|
this.updateGlobalTheme();
|
|
});
|
|
|
|
window.addEventListener('visualizer-dim-change', () => {
|
|
if (this.visualizer) {
|
|
this.visualizer.updateDimming();
|
|
}
|
|
});
|
|
}
|
|
|
|
// Helper for Heart Icon
|
|
createHeartIcon(filled = false) {
|
|
if (filled) {
|
|
return SVG_HEART_FILLED(20);
|
|
}
|
|
return SVG_HEART(20);
|
|
}
|
|
|
|
async extractAndApplyColor(url) {
|
|
if (!url) {
|
|
this.resetVibrantColor();
|
|
return;
|
|
}
|
|
|
|
// Check if dynamic coloring is enabled
|
|
if (!dynamicColorSettings.isEnabled()) {
|
|
this.resetVibrantColor();
|
|
return;
|
|
}
|
|
|
|
// Check cache first
|
|
if (this.vibrantColorCache.has(url)) {
|
|
const cachedColor = this.vibrantColorCache.get(url);
|
|
if (cachedColor) {
|
|
this.setVibrantColor(cachedColor);
|
|
return;
|
|
}
|
|
}
|
|
|
|
const img = new Image();
|
|
img.crossOrigin = 'Anonymous';
|
|
// Add cache buster to bypass opaque response in cache
|
|
const separator = url.includes('?') ? '&' : '?';
|
|
img.src = `${url}${separator}not-from-cache-please`;
|
|
|
|
img.onload = () => {
|
|
try {
|
|
const color = getVibrantColorFromImage(img);
|
|
if (color) {
|
|
this.vibrantColorCache.set(url, color);
|
|
this.setVibrantColor(color);
|
|
} else {
|
|
this.vibrantColorCache.set(url, null);
|
|
this.resetVibrantColor();
|
|
}
|
|
} catch {
|
|
this.vibrantColorCache.set(url, null);
|
|
this.resetVibrantColor();
|
|
}
|
|
};
|
|
|
|
img.onerror = () => {
|
|
this.vibrantColorCache.set(url, null);
|
|
this.resetVibrantColor();
|
|
};
|
|
}
|
|
|
|
async updateLikeState(element, type, id) {
|
|
const isLiked = await db.isFavorite(type, id);
|
|
const btn = element.querySelector('.like-btn');
|
|
if (btn) {
|
|
btn.innerHTML = this.createHeartIcon(isLiked);
|
|
btn.classList.toggle('active', isLiked);
|
|
btn.title = isLiked ? 'Remove from Liked' : 'Add to Liked';
|
|
}
|
|
}
|
|
|
|
async renderPinnedItems() {
|
|
const nav = document.getElementById('pinned-items-nav');
|
|
const list = document.getElementById('pinned-items-list');
|
|
if (!nav || !list) return;
|
|
|
|
const pinnedItems = await db.getPinned();
|
|
|
|
if (pinnedItems.length === 0) {
|
|
nav.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
nav.style.display = '';
|
|
list.innerHTML = pinnedItems
|
|
.map((item) => {
|
|
let iconHTML;
|
|
if (item.type === 'user-playlist' && !item.cover && item.images && item.images.length > 0) {
|
|
const images = item.images.slice(0, 4);
|
|
const imgsHTML = images
|
|
.map((src) => `<img src="${this.api.getCoverUrl(src)}" loading="lazy">`)
|
|
.join('');
|
|
iconHTML = `<div class="pinned-item-collage">${imgsHTML}</div>`;
|
|
} else {
|
|
const coverUrl =
|
|
item.type === 'artist'
|
|
? this.api.getArtistPictureUrl(item.cover)
|
|
: this.api.getCoverUrl(item.cover);
|
|
const coverClass = item.type === 'artist' ? 'artist' : '';
|
|
iconHTML = `<img src="${coverUrl}" class="pinned-item-cover ${coverClass}" alt="${escapeHtml(item.name)}" loading="lazy" onerror="this.src='assets/logo.svg'">`;
|
|
}
|
|
|
|
return `
|
|
<li class="nav-item">
|
|
<a href="${item.href}">
|
|
${iconHTML}
|
|
<span class="pinned-item-name">${escapeHtml(item.name)}</span>
|
|
</a>
|
|
</li>
|
|
`;
|
|
})
|
|
.join('');
|
|
}
|
|
|
|
setCurrentTrack(track) {
|
|
this.currentTrack = track;
|
|
this.updateGlobalTheme();
|
|
|
|
const likeBtn = document.getElementById('now-playing-like-btn');
|
|
const addPlaylistBtn = document.getElementById('now-playing-add-playlist-btn');
|
|
const mobileAddPlaylistBtn = document.getElementById('mobile-add-playlist-btn');
|
|
const lyricsBtn = document.getElementById('toggle-lyrics-btn');
|
|
const fsLikeBtn = document.getElementById('fs-like-btn');
|
|
const fsAddPlaylistBtn = document.getElementById('fs-add-playlist-btn');
|
|
|
|
if (track) {
|
|
const isLocal = track.isLocal;
|
|
const isTracker = track.isTracker || (track.id && String(track.id).startsWith('tracker-'));
|
|
const shouldHideLikes = isLocal || isTracker;
|
|
|
|
if (likeBtn) {
|
|
if (shouldHideLikes) {
|
|
likeBtn.style.display = 'none';
|
|
} else {
|
|
likeBtn.style.display = 'flex';
|
|
this.updateLikeState(likeBtn.parentElement, track.type || 'track', track.id);
|
|
}
|
|
}
|
|
|
|
if (addPlaylistBtn) {
|
|
if (isLocal) {
|
|
addPlaylistBtn.style.setProperty('display', 'none', 'important');
|
|
} else {
|
|
addPlaylistBtn.style.removeProperty('display');
|
|
addPlaylistBtn.style.display = 'flex';
|
|
}
|
|
}
|
|
if (mobileAddPlaylistBtn) {
|
|
if (isLocal) {
|
|
mobileAddPlaylistBtn.style.setProperty('display', 'none', 'important');
|
|
} else {
|
|
mobileAddPlaylistBtn.style.removeProperty('display');
|
|
mobileAddPlaylistBtn.style.display = 'flex';
|
|
}
|
|
}
|
|
if (lyricsBtn) {
|
|
if (isLocal) lyricsBtn.style.display = 'none';
|
|
else lyricsBtn.style.removeProperty('display');
|
|
}
|
|
|
|
if (fsLikeBtn) {
|
|
if (shouldHideLikes) {
|
|
fsLikeBtn.style.display = 'none';
|
|
} else {
|
|
fsLikeBtn.style.display = 'flex';
|
|
this.updateLikeState(fsLikeBtn.parentElement, track.type || 'track', track.id);
|
|
}
|
|
}
|
|
if (fsAddPlaylistBtn) {
|
|
if (shouldHideLikes) fsAddPlaylistBtn.style.display = 'none';
|
|
else fsAddPlaylistBtn.style.display = 'flex';
|
|
}
|
|
} else {
|
|
if (likeBtn) likeBtn.style.display = 'none';
|
|
if (addPlaylistBtn) addPlaylistBtn.style.setProperty('display', 'none', 'important');
|
|
if (mobileAddPlaylistBtn) mobileAddPlaylistBtn.style.setProperty('display', 'none', 'important');
|
|
if (lyricsBtn) lyricsBtn.style.display = 'none';
|
|
if (fsLikeBtn) fsLikeBtn.style.display = 'none';
|
|
if (fsAddPlaylistBtn) fsAddPlaylistBtn.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
updateGlobalTheme() {
|
|
// Check if we are currently viewing an album page
|
|
const isAlbumPage = document.getElementById('page-album').classList.contains('active');
|
|
|
|
if (isAlbumPage) {
|
|
// The album page render logic handles its own coloring.
|
|
// We shouldn't override it here.
|
|
return;
|
|
}
|
|
|
|
if (backgroundSettings.isEnabled() && this.currentTrack?.album?.cover) {
|
|
this.extractAndApplyColor(this.api.getCoverUrl(this.currentTrack.album.cover, '80'));
|
|
} else {
|
|
this.resetVibrantColor();
|
|
}
|
|
}
|
|
|
|
createExplicitBadge() {
|
|
return '<span class="explicit-badge" title="Explicit">E</span>';
|
|
}
|
|
|
|
adjustTitleFontSize(element, text) {
|
|
element.classList.remove('long-title', 'very-long-title');
|
|
if (!text) return;
|
|
if (text.length > 40) {
|
|
element.classList.add('very-long-title');
|
|
} else if (text.length > 25) {
|
|
element.classList.add('long-title');
|
|
}
|
|
}
|
|
|
|
createTrackItemHTML(track, index, showCover = false, hasMultipleDiscs = false, useTrackNumber = false) {
|
|
const isUnavailable = track.isUnavailable;
|
|
const isBlocked = contentBlockingSettings?.shouldHideTrack(track);
|
|
const isVideo = track.type === 'video';
|
|
|
|
let trackImageHTML = '';
|
|
if (showCover) {
|
|
if (isVideo && this.currentPage === 'playlist') {
|
|
const videoCoverUrl = this.api.getVideoCoverUrl(track.imageId);
|
|
if (videoCoverUrl) {
|
|
trackImageHTML = `<img src="${videoCoverUrl}" alt="" class="track-item-cover" loading="lazy">`;
|
|
} else {
|
|
trackImageHTML = `<div class="track-item-cover video-icon-placeholder" style="display: flex; align-items: center; justify-content: center; background: var(--secondary);">${SVG_VIDEO(20, { style: 'opacity: 0.7;' })}</div>`;
|
|
}
|
|
} else if (isVideo && (this.currentPage === 'search' || this.currentPage === 'library')) {
|
|
const videoCoverUrl = this.api.getVideoCoverUrl(track.imageId);
|
|
if (videoCoverUrl) {
|
|
trackImageHTML = `<img src="${videoCoverUrl}" alt="" class="track-item-cover" loading="lazy">`;
|
|
} else {
|
|
trackImageHTML = `<div class="track-item-cover video-icon-placeholder" style="display: flex; align-items: center; justify-content: center; background: var(--secondary);">${SVG_PLAY(16, { style: 'opacity: 0.7;' })}</div>`;
|
|
}
|
|
} else {
|
|
trackImageHTML = this.getCoverHTML(
|
|
track.image || track.cover || track.album?.cover,
|
|
'Track Cover',
|
|
'track-item-cover',
|
|
'lazy'
|
|
);
|
|
}
|
|
}
|
|
|
|
let displayIndex;
|
|
if (hasMultipleDiscs && !showCover) {
|
|
const discNum = track.volumeNumber ?? track.discNumber ?? 1;
|
|
displayIndex = `${discNum}-${track.trackNumber}`;
|
|
} else if (useTrackNumber && track.trackNumber) {
|
|
displayIndex = track.trackNumber;
|
|
} else {
|
|
displayIndex = index + 1;
|
|
}
|
|
|
|
const videoIcon = isVideo
|
|
? `<span class="video-item-icon" title="Music Video" style="display: inline-flex; align-items: center; margin-right: 4px; color: var(--muted-foreground);">${SVG_VIDEO(14)}</span>`
|
|
: '';
|
|
const trackNumberHTML = `<div class="track-number">${showCover ? trackImageHTML : displayIndex}</div>`;
|
|
const explicitBadge = hasExplicitContent(track) ? this.createExplicitBadge() : '';
|
|
const qualityBadge = createQualityBadgeHTML(track);
|
|
const trackTitle = getTrackTitle(track);
|
|
const isCurrentTrack = this.player?.currentTrack?.id === track.id;
|
|
|
|
if (track.isLocal && (!track.album?.cover || track.album.cover === 'assets/appicon.png')) {
|
|
showCover = false;
|
|
}
|
|
|
|
const yearDisplay = getTrackYearDisplay(track);
|
|
|
|
const actionsHTML = isUnavailable
|
|
? ''
|
|
: `
|
|
<button class="track-menu-btn" type="button" title="More options" ${track.isLocal ? 'style="display:none"' : ''}>
|
|
${SVG_MENU(20)}
|
|
</button>
|
|
`;
|
|
|
|
const blockedTitle = isBlocked
|
|
? `title="Blocked: ${contentBlockingSettings.isTrackBlocked(track.id) ? 'Track blocked' : contentBlockingSettings.isArtistBlocked(track.artist?.id) ? 'Artist blocked' : 'Album blocked'}"`
|
|
: '';
|
|
|
|
const classList = [
|
|
'track-item',
|
|
isVideo ? 'video-track-item' : '',
|
|
isCurrentTrack ? 'playing' : '',
|
|
isUnavailable ? 'unavailable' : '',
|
|
isBlocked ? 'blocked' : '',
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ');
|
|
|
|
return `
|
|
<div class="${classList}"
|
|
data-track-id="${track.id}"
|
|
${isVideo ? 'data-type="video"' : 'data-type="track"'}
|
|
${track.isLocal ? 'data-is-local="true"' : ''}
|
|
${isUnavailable ? 'title="This track is currently unavailable"' : ''}
|
|
${blockedTitle}>
|
|
${trackNumberHTML}
|
|
<div class="track-item-info">
|
|
<div class="track-item-details">
|
|
<div class="title">
|
|
${videoIcon}
|
|
${escapeHtml(trackTitle)}
|
|
${explicitBadge}
|
|
${qualityBadge}
|
|
</div>
|
|
<div class="artist">${getTrackArtistsHTML(track)}${yearDisplay}</div>
|
|
</div>
|
|
</div>
|
|
<div class="track-item-duration">${isUnavailable || isBlocked ? '--:--' : track.duration ? formatTime(track.duration) : '--:--'}</div>
|
|
<div class="track-item-actions">
|
|
${actionsHTML}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
getCoverHTML(cover, alt, className = 'card-image', loading = 'lazy', videoCoverUrl = null) {
|
|
const imageUrl = this.api.getCoverUrl(cover);
|
|
if (videoCoverUrl) {
|
|
return `<video src="${videoCoverUrl}" poster="${imageUrl}" class="${className}" alt="${alt}" preload="metadata" playsinline muted></video>`;
|
|
}
|
|
return `<img src="${imageUrl}" class="${className}" alt="${alt}" loading="${loading}">`;
|
|
}
|
|
|
|
createBaseCardHTML({
|
|
type,
|
|
id,
|
|
href,
|
|
title,
|
|
subtitle,
|
|
imageHTML,
|
|
actionButtonsHTML,
|
|
isCompact,
|
|
extraAttributes = '',
|
|
extraClasses = '',
|
|
}) {
|
|
const playBtnHTML =
|
|
type !== 'artist'
|
|
? `
|
|
<button class="play-btn card-play-btn" data-action="play-card" data-type="${type}" data-id="${id}" title="Play">
|
|
${SVG_PLAY(20)}
|
|
</button>
|
|
<button class="card-menu-btn" data-action="card-menu" data-type="${type}" data-id="${id}" title="Menu">
|
|
${SVG_MENU(20)}
|
|
</button>
|
|
`
|
|
: '';
|
|
|
|
const cardContent = `
|
|
<div class="card-info">
|
|
<h4 class="card-title">${title}</h4>
|
|
${subtitle ? `<p class="card-subtitle">${subtitle}</p>` : ''}
|
|
</div>`;
|
|
|
|
// In compact mode, move the play button outside the wrapper to position it on the right side of the card
|
|
const buttonsInWrapper = !isCompact ? playBtnHTML : '';
|
|
const buttonsOutside = isCompact ? playBtnHTML : '';
|
|
|
|
return `
|
|
<div class="card ${extraClasses} ${isCompact ? 'compact' : ''}" data-${type}-id="${id}" data-href="${href}" style="cursor: pointer;" ${extraAttributes}>
|
|
<div class="card-image-wrapper">
|
|
${imageHTML}
|
|
${actionButtonsHTML}
|
|
${buttonsInWrapper}
|
|
</div>
|
|
${cardContent}
|
|
${buttonsOutside}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
createPlaylistCardHTML(playlist) {
|
|
const imageId = playlist.squareImage || playlist.image || playlist.uuid;
|
|
const isCompact = cardSettings.isCompactAlbum();
|
|
|
|
return this.createBaseCardHTML({
|
|
type: 'playlist',
|
|
id: playlist.uuid,
|
|
href: `/playlist/${playlist.uuid}`,
|
|
title: playlist.title,
|
|
subtitle: `${playlist.numberOfTracks || 0} tracks`,
|
|
imageHTML: `<img src="${this.api.getCoverUrl(imageId)}" alt="${playlist.title}" class="card-image" loading="lazy">`,
|
|
actionButtonsHTML: `
|
|
<button class="like-btn card-like-btn" data-action="toggle-like" data-type="playlist" title="Add to Liked">
|
|
${this.createHeartIcon(false)}
|
|
</button>
|
|
`,
|
|
isCompact,
|
|
});
|
|
}
|
|
|
|
createFolderCardHTML(folder) {
|
|
const imageSrc = folder.cover || 'assets/folder.png';
|
|
const isCompact = cardSettings.isCompactAlbum();
|
|
|
|
return this.createBaseCardHTML({
|
|
type: 'folder',
|
|
id: folder.id,
|
|
href: `/folder/${folder.id}`,
|
|
title: escapeHtml(folder.name),
|
|
subtitle: `${folder.playlists ? folder.playlists.length : 0} playlists`,
|
|
imageHTML: `<img src="${imageSrc}" alt="${escapeHtml(folder.name)}" class="card-image" loading="lazy" onerror="this.src='/assets/folder.png'">`,
|
|
actionButtonsHTML: '',
|
|
isCompact,
|
|
});
|
|
}
|
|
|
|
createMixCardHTML(mix) {
|
|
const imageSrc = mix.cover || '/assets/appicon.png';
|
|
const description = mix.subTitle || mix.description || '';
|
|
const isCompact = cardSettings.isCompactAlbum();
|
|
|
|
return this.createBaseCardHTML({
|
|
type: 'mix',
|
|
id: mix.id,
|
|
href: `/mix/${mix.id}`,
|
|
title: mix.title,
|
|
subtitle: description,
|
|
imageHTML: `<img src="${imageSrc}" alt="${mix.title}" class="card-image" loading="lazy">`,
|
|
actionButtonsHTML: `
|
|
<button class="like-btn card-like-btn" data-action="toggle-like" data-type="mix" title="Add to Liked">
|
|
${this.createHeartIcon(false)}
|
|
</button>
|
|
`,
|
|
isCompact,
|
|
});
|
|
}
|
|
|
|
createUserPlaylistCardHTML(playlist, customSubtitle = null) {
|
|
let imageHTML = '';
|
|
if (playlist.cover) {
|
|
imageHTML = `<img src="${playlist.cover}" alt="${playlist.name}" class="card-image" loading="lazy">`;
|
|
} else {
|
|
const tracks = playlist.tracks || [];
|
|
let uniqueCovers = playlist.images || [];
|
|
const seenCovers = new Set(uniqueCovers);
|
|
|
|
if (uniqueCovers.length === 0) {
|
|
for (const track of tracks) {
|
|
const cover = track.album?.cover;
|
|
if (cover && !seenCovers.has(cover)) {
|
|
seenCovers.add(cover);
|
|
uniqueCovers.push(cover);
|
|
if (uniqueCovers.length >= 4) break;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (uniqueCovers.length >= 2) {
|
|
const count = Math.min(uniqueCovers.length, 4);
|
|
const itemsClass = count < 4 ? `items-${count}` : '';
|
|
const covers = uniqueCovers.slice(0, 4);
|
|
imageHTML = `
|
|
<div class="card-image card-collage ${itemsClass}">
|
|
${covers.map((cover) => `<img src="${this.api.getCoverUrl(cover)}" alt="" loading="lazy">`).join('')}
|
|
</div>
|
|
`;
|
|
} else if (uniqueCovers.length > 0) {
|
|
imageHTML = `<img src="${this.api.getCoverUrl(uniqueCovers[0])}" alt="${playlist.name}" class="card-image" loading="lazy">`;
|
|
} else {
|
|
imageHTML = `<img src="/assets/appicon.png" alt="${playlist.name}" class="card-image" loading="lazy">`;
|
|
}
|
|
}
|
|
|
|
const isCompact = cardSettings.isCompactAlbum();
|
|
const subtitle =
|
|
customSubtitle || `${playlist.tracks ? playlist.tracks.length : playlist.numberOfTracks || 0} tracks`;
|
|
|
|
return this.createBaseCardHTML({
|
|
type: 'user-playlist', // Note: data-type logic in base might need adjustment if it uses this for buttons.
|
|
// Actually Base uses type for data attributes. play-card uses data-type="user-playlist" which is correct.
|
|
id: playlist.id,
|
|
href: `/userplaylist/${playlist.id}`,
|
|
title: escapeHtml(playlist.name),
|
|
subtitle,
|
|
imageHTML: imageHTML,
|
|
actionButtonsHTML: `
|
|
<button class="edit-playlist-btn" data-action="edit-playlist" title="Edit Playlist">
|
|
${SVG_SQUARE_PEN(20)}
|
|
</button>
|
|
<button class="delete-playlist-btn" data-action="delete-playlist" title="Delete Playlist">
|
|
${SVG_BIN(20)}
|
|
</button>
|
|
`,
|
|
isCompact,
|
|
extraAttributes: 'draggable="true"',
|
|
extraClasses: 'user-playlist',
|
|
});
|
|
}
|
|
|
|
createAlbumCardHTML(album) {
|
|
const explicitBadge = hasExplicitContent(album) ? this.createExplicitBadge() : '';
|
|
const qualityBadge = createQualityBadgeHTML(album);
|
|
const isBlocked = contentBlockingSettings?.shouldHideAlbum(album);
|
|
let yearDisplay = '';
|
|
if (album.releaseDate) {
|
|
const date = new Date(album.releaseDate);
|
|
if (!isNaN(date.getTime())) yearDisplay = `${date.getFullYear()}`;
|
|
}
|
|
|
|
let typeLabel = '';
|
|
if (album.type === 'EP') typeLabel = ' • EP';
|
|
else if (album.type === 'SINGLE') typeLabel = ' • Single';
|
|
|
|
const isCompact = cardSettings.isCompactAlbum();
|
|
let artistName = '';
|
|
if (album.artist) {
|
|
artistName = typeof album.artist === 'string' ? album.artist : album.artist.name;
|
|
} else if (album.artists?.length) {
|
|
artistName = album.artists.map((a) => a.name).join(', ');
|
|
}
|
|
|
|
return this.createBaseCardHTML({
|
|
type: 'album',
|
|
id: album.id,
|
|
href: `/album/${album.id}`,
|
|
title: `${escapeHtml(album.title)} ${explicitBadge} ${qualityBadge}`,
|
|
subtitle: `${escapeHtml(artistName)} • ${yearDisplay}${typeLabel}`,
|
|
imageHTML: this.getCoverHTML(
|
|
album.cover,
|
|
escapeHtml(album.title),
|
|
'card-image',
|
|
'lazy',
|
|
album.videoCoverUrl
|
|
),
|
|
actionButtonsHTML: `
|
|
<button class="like-btn card-like-btn" data-action="toggle-like" data-type="album" title="Add to Liked">
|
|
${this.createHeartIcon(false)}
|
|
</button>
|
|
`,
|
|
isCompact,
|
|
extraClasses: isBlocked ? 'blocked' : '',
|
|
extraAttributes: isBlocked
|
|
? `title="Blocked: ${contentBlockingSettings.isAlbumBlocked(album.id) ? 'Album blocked' : 'Artist blocked'}"`
|
|
: '',
|
|
});
|
|
}
|
|
|
|
createVideoCardHTML(video) {
|
|
const duration = formatTime(video.duration);
|
|
const artistName = getTrackArtists(video);
|
|
|
|
const videoCoverUrl = this.api.getVideoCoverUrl(video.imageId);
|
|
const cover = video.image || video.cover;
|
|
let imageHTML;
|
|
|
|
if (videoCoverUrl) {
|
|
imageHTML = `<img src="${videoCoverUrl}" alt="${escapeHtml(video.title)}" class="card-image" loading="lazy">`;
|
|
} else if (cover) {
|
|
imageHTML = this.getCoverHTML(cover, escapeHtml(video.title));
|
|
} else {
|
|
imageHTML = `<div class="card-image video-icon-placeholder" style="display: flex; align-items: center; justify-content: center; background: var(--secondary); aspect-ratio: 16/9; width: 100%;">${SVG_PLAY(48, { style: 'opacity: 0.7;' })}</div>`;
|
|
}
|
|
|
|
return `
|
|
<div class="card video-card" data-video-id="${video.id}" data-type="video" draggable="true">
|
|
<div class="card-image-container">
|
|
${imageHTML}
|
|
<div class="card-overlay">
|
|
<button class="card-play-btn" title="Play video">
|
|
${SVG_PLAY(24)}
|
|
</button>
|
|
</div>
|
|
<button class="like-btn card-like-btn" data-action="toggle-like" data-type="video" title="Add to Liked">
|
|
${this.createHeartIcon(false)}
|
|
</button>
|
|
<div class="video-duration-badge" style="position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.7); color: white; padding: 2px 6px; border-radius: 4px; font-size: 12px; font-weight: 500;">${duration}</div>
|
|
</div>
|
|
<div class="card-info">
|
|
<div class="card-title" title="${escapeHtml(video.title)}">${escapeHtml(video.title)}</div>
|
|
<div class="card-subtitle">${escapeHtml(artistName)}</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
createArtistCardHTML(artist) {
|
|
const isCompact = cardSettings.isCompactArtist();
|
|
const isBlocked = contentBlockingSettings?.shouldHideArtist(artist);
|
|
|
|
return this.createBaseCardHTML({
|
|
type: 'artist',
|
|
id: artist.id,
|
|
href: `/artist/${artist.id}`,
|
|
title: escapeHtml(artist.name),
|
|
subtitle: '',
|
|
imageHTML: `<img src="${this.api.getArtistPictureUrl(artist.picture)}" alt="${escapeHtml(artist.name)}" class="card-image" loading="lazy">`,
|
|
actionButtonsHTML: `
|
|
<button class="like-btn card-like-btn" data-action="toggle-like" data-type="artist" title="Add to Liked">
|
|
${this.createHeartIcon(false)}
|
|
</button>
|
|
`,
|
|
isCompact,
|
|
extraClasses: `artist${isBlocked ? ' blocked' : ''}`,
|
|
extraAttributes: isBlocked ? 'title="Blocked: Artist blocked"' : '',
|
|
});
|
|
}
|
|
|
|
createSkeletonTrack(showCover = false) {
|
|
return `
|
|
<div class="skeleton-track">
|
|
${showCover ? '<div class="skeleton skeleton-track-cover"></div>' : '<div class="skeleton skeleton-track-number"></div>'}
|
|
<div class="skeleton-track-info">
|
|
<div class="skeleton-track-details">
|
|
<div class="skeleton skeleton-track-title"></div>
|
|
<div class="skeleton skeleton-track-artist"></div>
|
|
</div>
|
|
</div>
|
|
<div class="skeleton skeleton-track-duration"></div>
|
|
<div class="skeleton skeleton-track-actions"></div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
createSkeletonCard(isArtist = false) {
|
|
return `
|
|
<div class="skeleton-card ${isArtist ? 'artist' : ''}">
|
|
<div class="skeleton skeleton-card-image"></div>
|
|
<div class="skeleton skeleton-card-title"></div>
|
|
${!isArtist ? '<div class="skeleton skeleton-card-subtitle"></div>' : ''}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
createSkeletonTracks(count = 5, showCover = false) {
|
|
return Array(count)
|
|
.fill(0)
|
|
.map(() => this.createSkeletonTrack(showCover))
|
|
.join('');
|
|
}
|
|
|
|
createSkeletonCards(count = 6, isArtist = false) {
|
|
return Array(count)
|
|
.fill(0)
|
|
.map(() => this.createSkeletonCard(isArtist))
|
|
.join('');
|
|
}
|
|
|
|
setupSearchClearButton(inputElement, clearBtnSelector = '.search-clear-btn') {
|
|
if (!inputElement) return;
|
|
|
|
const clearBtn = inputElement.parentElement?.querySelector(clearBtnSelector);
|
|
if (!clearBtn) return;
|
|
|
|
// Remove old listener if exists
|
|
const oldListener = clearBtn._clearListener;
|
|
if (oldListener) clearBtn.removeEventListener('click', oldListener);
|
|
|
|
// Toggle visibility based on input value
|
|
const toggleVisibility = () => {
|
|
clearBtn.style.display = inputElement.value.trim() ? 'flex' : 'none';
|
|
};
|
|
|
|
// Clear input on click
|
|
const clearListener = () => {
|
|
inputElement.value = '';
|
|
inputElement.dispatchEvent(new Event('input'));
|
|
inputElement.focus();
|
|
};
|
|
|
|
inputElement.addEventListener('input', toggleVisibility);
|
|
clearBtn._clearListener = clearListener;
|
|
clearBtn.addEventListener('click', clearListener);
|
|
}
|
|
|
|
setupTracklistSearch(
|
|
searchInputId = 'track-list-search-input',
|
|
tracklistContainerId = 'playlist-detail-tracklist'
|
|
) {
|
|
const searchInput = document.getElementById(searchInputId);
|
|
const tracklistContainer = document.getElementById(tracklistContainerId);
|
|
|
|
if (!searchInput || !tracklistContainer) return;
|
|
|
|
// Setup clear button
|
|
this.setupSearchClearButton(searchInput);
|
|
|
|
// Remove previous listener if exists
|
|
const oldListener = searchInput._searchListener;
|
|
if (oldListener) {
|
|
searchInput.removeEventListener('input', oldListener);
|
|
}
|
|
|
|
// Create new listener
|
|
const listener = () => {
|
|
const query = searchInput.value.toLowerCase().trim();
|
|
const trackItems = tracklistContainer.querySelectorAll('.track-item');
|
|
|
|
trackItems.forEach((item) => {
|
|
const trackData = trackDataStore.get(item);
|
|
if (!trackData) {
|
|
item.style.display = '';
|
|
return;
|
|
}
|
|
|
|
const title = (trackData.title || '').toLowerCase();
|
|
const artist = (trackData.artist?.name || trackData.artists?.[0]?.name || '').toLowerCase();
|
|
const album = (trackData.album?.title || '').toLowerCase();
|
|
|
|
const matches = title.includes(query) || artist.includes(query) || album.includes(query);
|
|
item.style.display = matches ? '' : 'none';
|
|
});
|
|
};
|
|
|
|
searchInput._searchListener = listener;
|
|
searchInput.addEventListener('input', listener);
|
|
}
|
|
|
|
renderListWithTracks(container, tracks, showCover, append = false, useTrackNumber = false) {
|
|
const fragment = document.createDocumentFragment();
|
|
const tempDiv = document.createElement('div');
|
|
|
|
// Check if there are multiple discs in the tracks array
|
|
const hasMultipleDiscs = tracks.some((t) => (t.volumeNumber || t.discNumber || 1) > 1);
|
|
|
|
tempDiv.innerHTML = tracks
|
|
.map((track, i) => this.createTrackItemHTML(track, i, showCover, hasMultipleDiscs, useTrackNumber))
|
|
.join('');
|
|
|
|
// Bind data to elements immediately using index, avoiding selector ambiguity
|
|
Array.from(tempDiv.children).forEach((element, index) => {
|
|
const track = tracks[index];
|
|
if (element && track) {
|
|
trackDataStore.set(element, track);
|
|
// Async update for like button
|
|
this.updateLikeState(element, track.type || 'track', track.id);
|
|
}
|
|
});
|
|
|
|
while (tempDiv.firstChild) {
|
|
fragment.appendChild(tempDiv.firstChild);
|
|
}
|
|
|
|
if (!append) container.innerHTML = '';
|
|
container.appendChild(fragment);
|
|
}
|
|
|
|
setPageBackground(imageUrl) {
|
|
const bgElement = document.getElementById('page-background');
|
|
if (backgroundSettings.isEnabled() && imageUrl) {
|
|
bgElement.style.backgroundImage = `url('${imageUrl}')`;
|
|
bgElement.classList.add('active');
|
|
document.body.classList.add('has-page-background');
|
|
} else {
|
|
bgElement.classList.remove('active');
|
|
document.body.classList.remove('has-page-background');
|
|
// Delay clearing the image to allow transition
|
|
setTimeout(() => {
|
|
if (!bgElement.classList.contains('active')) {
|
|
bgElement.style.backgroundImage = '';
|
|
}
|
|
}, 500);
|
|
}
|
|
}
|
|
|
|
setVibrantColor(color) {
|
|
if (!color) return;
|
|
|
|
const root = document.documentElement;
|
|
const theme = root.getAttribute('data-theme');
|
|
const isLightMode = theme === 'white';
|
|
|
|
let hex = color.replace('#', '');
|
|
// Handle shorthand hex
|
|
if (hex.length === 3) {
|
|
hex = hex
|
|
.split('')
|
|
.map((char) => char + char)
|
|
.join('');
|
|
}
|
|
|
|
let r = parseInt(hex.substr(0, 2), 16);
|
|
let g = parseInt(hex.substr(2, 2), 16);
|
|
let b = parseInt(hex.substr(4, 2), 16);
|
|
|
|
// Calculate perceived brightness
|
|
let brightness = (r * 299 + g * 587 + b * 114) / 1000;
|
|
|
|
if (isLightMode) {
|
|
// In light mode, the background is white.
|
|
// We need the color (used for text/highlights) to be dark enough.
|
|
// If brightness is too high (> 150), darken it.
|
|
while (brightness > 150) {
|
|
r = Math.floor(r * 0.9);
|
|
g = Math.floor(g * 0.9);
|
|
b = Math.floor(b * 0.9);
|
|
brightness = (r * 299 + g * 587 + b * 114) / 1000;
|
|
}
|
|
} else {
|
|
// In dark mode, the background is dark.
|
|
// We need the color to be light enough.
|
|
// If brightness is too low (< 80), lighten it.
|
|
while (brightness < 80) {
|
|
r = Math.min(255, Math.max(r + 1, Math.floor(r * 1.15)));
|
|
g = Math.min(255, Math.max(g + 1, Math.floor(g * 1.15)));
|
|
b = Math.min(255, Math.max(b + 1, Math.floor(b * 1.15)));
|
|
brightness = (r * 299 + g * 587 + b * 114) / 1000;
|
|
// Break if we hit white or can't get brighter to avoid infinite loop
|
|
if (r >= 255 && g >= 255 && b >= 255) break;
|
|
}
|
|
}
|
|
|
|
const adjustedColor = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
|
|
|
|
// Calculate contrast text color for buttons (text on top of the vibrant color)
|
|
const foreground = brightness > 128 ? '#000000' : '#ffffff';
|
|
|
|
// Set global CSS variables
|
|
root.style.setProperty('--primary', adjustedColor);
|
|
root.style.setProperty('--primary-foreground', foreground);
|
|
root.style.setProperty('--highlight', adjustedColor);
|
|
root.style.setProperty('--highlight-rgb', `${r}, ${g}, ${b}`);
|
|
root.style.setProperty('--active-highlight', adjustedColor);
|
|
root.style.setProperty('--ring', adjustedColor);
|
|
|
|
// Calculate a safe hover color
|
|
let hoverColor;
|
|
if (brightness > 200) {
|
|
const dr = Math.floor(r * 0.85);
|
|
const dg = Math.floor(g * 0.85);
|
|
const db = Math.floor(b * 0.85);
|
|
hoverColor = `rgba(${dr}, ${dg}, ${db}, 0.25)`;
|
|
} else {
|
|
hoverColor = `rgba(${r}, ${g}, ${b}, 0.15)`;
|
|
}
|
|
root.style.setProperty('--track-hover-bg', hoverColor);
|
|
}
|
|
|
|
resetVibrantColor() {
|
|
const root = document.documentElement;
|
|
root.style.removeProperty('--primary');
|
|
root.style.removeProperty('--primary-foreground');
|
|
root.style.removeProperty('--highlight');
|
|
root.style.removeProperty('--highlight-rgb');
|
|
root.style.removeProperty('--active-highlight');
|
|
root.style.removeProperty('--ring');
|
|
root.style.removeProperty('--track-hover-bg');
|
|
}
|
|
|
|
updateFullscreenMetadata(track, nextTrack) {
|
|
if (!track) return;
|
|
const overlay = document.getElementById('fullscreen-cover-overlay');
|
|
const image = document.getElementById('fullscreen-cover-image');
|
|
const videoContainer = document.getElementById('fullscreen-video-container');
|
|
const title = document.getElementById('fullscreen-track-title');
|
|
const artist = document.getElementById('fullscreen-track-artist');
|
|
const nextTrackEl = document.getElementById('fullscreen-next-track');
|
|
|
|
const isRealVideo = track.type === 'video';
|
|
const visualizerContainer = document.getElementById('visualizer-container');
|
|
overlay.classList.toggle('is-video-mode', isRealVideo);
|
|
|
|
const toggleUiBtn = document.getElementById('toggle-ui-btn');
|
|
if (toggleUiBtn) {
|
|
toggleUiBtn.style.display = isRealVideo ? 'none' : 'flex';
|
|
}
|
|
|
|
if (isRealVideo) {
|
|
if (sidePanelManager.isActive('lyrics')) {
|
|
sidePanelManager.close();
|
|
}
|
|
|
|
if (videoContainer) {
|
|
videoContainer.style.display = 'flex';
|
|
const videoPlayer = document.getElementById('video-player');
|
|
if (videoPlayer && videoPlayer.parentElement !== videoContainer) {
|
|
videoContainer.appendChild(videoPlayer);
|
|
videoPlayer.style.display = 'block';
|
|
videoPlayer.style.width = '100%';
|
|
videoPlayer.style.height = '100%';
|
|
videoPlayer.style.objectFit = 'contain';
|
|
}
|
|
}
|
|
if (image) image.style.display = 'none';
|
|
if (visualizerContainer) visualizerContainer.style.display = 'none';
|
|
} else {
|
|
if (videoContainer) {
|
|
videoContainer.style.display = 'none';
|
|
const videoPlayer = document.getElementById('video-player');
|
|
if (videoPlayer && videoPlayer.parentElement === videoContainer) {
|
|
document.body.appendChild(videoPlayer);
|
|
videoPlayer.style.display = 'none';
|
|
}
|
|
}
|
|
if (image) image.style.display = 'block';
|
|
if (visualizerContainer) visualizerContainer.style.display = 'block';
|
|
|
|
const qualityBtn = document.getElementById('fs-quality-btn');
|
|
const qualityMenu = document.getElementById('fs-quality-menu');
|
|
if (qualityBtn) qualityBtn.style.display = 'none';
|
|
if (qualityMenu) qualityMenu.style.display = 'none';
|
|
|
|
const videoCoverUrl = track.videoUrl || track.videoCoverUrl || track.album?.videoCoverUrl || null;
|
|
const coverUrl = videoCoverUrl || this.api.getCoverUrl(track.album?.cover, '1280');
|
|
|
|
const fsLikeBtn = document.getElementById('fs-like-btn');
|
|
if (fsLikeBtn) {
|
|
this.updateLikeState(fsLikeBtn.parentElement, track.type || 'track', track.id);
|
|
}
|
|
|
|
const currentImage = document.getElementById('fullscreen-cover-image');
|
|
|
|
if (videoCoverUrl) {
|
|
if (currentImage.tagName === 'IMG') {
|
|
const video = document.createElement('video');
|
|
video.src = videoCoverUrl;
|
|
video.autoplay = true;
|
|
video.loop = true;
|
|
video.muted = true;
|
|
video.playsInline = true;
|
|
video.preload = 'auto';
|
|
video.className = currentImage.className;
|
|
currentImage.replaceWith(video);
|
|
} else if (currentImage.src !== videoCoverUrl) {
|
|
currentImage.src = videoCoverUrl;
|
|
}
|
|
} else {
|
|
if (currentImage.tagName === 'VIDEO') {
|
|
const img = document.createElement('img');
|
|
img.src = coverUrl;
|
|
img.id = currentImage.id;
|
|
img.className = currentImage.className;
|
|
currentImage.replaceWith(img);
|
|
} else if (currentImage.src !== coverUrl) {
|
|
currentImage.src = coverUrl;
|
|
}
|
|
}
|
|
overlay.style.setProperty('--bg-image', `url('${this.api.getCoverUrl(track.album?.cover, '1280')}')`);
|
|
this.extractAndApplyColor(this.api.getCoverUrl(track.album?.cover, '80'));
|
|
}
|
|
|
|
const qualityBadge = createQualityBadgeHTML(track);
|
|
title.innerHTML = `${escapeHtml(track.title)} ${qualityBadge}`;
|
|
artist.textContent = getTrackArtists(track);
|
|
|
|
if (nextTrack) {
|
|
nextTrackEl.style.display = 'flex';
|
|
nextTrackEl.querySelector('.value').textContent = `${nextTrack.title} • ${getTrackArtists(nextTrack)}`;
|
|
} else {
|
|
nextTrackEl.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
async showFullscreenCover(track, nextTrack, lyricsManager, activeElement) {
|
|
if (!track) return;
|
|
if (window.location.hash !== '#fullscreen') {
|
|
window.history.pushState({ fullscreen: true }, '', '#fullscreen');
|
|
}
|
|
const overlay = document.getElementById('fullscreen-cover-overlay');
|
|
const nextTrackEl = document.getElementById('fullscreen-next-track');
|
|
const lyricsToggleBtn = document.getElementById('toggle-fullscreen-lyrics-btn');
|
|
|
|
this.updateFullscreenMetadata(track, nextTrack);
|
|
|
|
if (nextTrack) {
|
|
nextTrackEl.classList.remove('animate-in');
|
|
void nextTrackEl.offsetWidth;
|
|
nextTrackEl.classList.add('animate-in');
|
|
} else {
|
|
nextTrackEl.classList.remove('animate-in');
|
|
}
|
|
|
|
if (lyricsManager && activeElement) {
|
|
lyricsToggleBtn.style.display = 'flex';
|
|
lyricsToggleBtn.classList.remove('active');
|
|
|
|
const toggleLyrics = () => {
|
|
openLyricsPanel(track, activeElement, lyricsManager);
|
|
lyricsToggleBtn.classList.toggle('active');
|
|
};
|
|
|
|
const newToggleBtn = lyricsToggleBtn.cloneNode(true);
|
|
lyricsToggleBtn.parentNode.replaceChild(newToggleBtn, lyricsToggleBtn);
|
|
newToggleBtn.addEventListener('click', toggleLyrics);
|
|
} else {
|
|
lyricsToggleBtn.style.display = 'none';
|
|
}
|
|
|
|
const playerBar = document.querySelector('.now-playing-bar');
|
|
if (playerBar) playerBar.style.display = 'none';
|
|
|
|
this.setupFullscreenControls();
|
|
|
|
overlay.style.display = 'flex';
|
|
|
|
const startVisualizer = () => {
|
|
if (!visualizerSettings.isEnabled()) {
|
|
if (this.visualizer) this.visualizer.stop();
|
|
return;
|
|
}
|
|
|
|
if (!this.visualizer && activeElement) {
|
|
const canvas = document.getElementById('visualizer-canvas');
|
|
if (canvas) {
|
|
this.visualizer = new Visualizer(canvas, activeElement);
|
|
}
|
|
}
|
|
if (this.visualizer) {
|
|
this.visualizer.start();
|
|
}
|
|
|
|
// Add visualizer-active class for enhanced drop shadow
|
|
overlay.classList.add('visualizer-active');
|
|
};
|
|
|
|
// Setup UI toggle button
|
|
this.setupUIToggleButton(overlay);
|
|
|
|
if (localStorage.getItem('epilepsy-warning-dismissed') === 'true') {
|
|
startVisualizer();
|
|
} else {
|
|
const modal = document.getElementById('epilepsy-warning-modal');
|
|
if (modal) {
|
|
modal.classList.add('active');
|
|
|
|
const acceptBtn = document.getElementById('epilepsy-accept-btn');
|
|
const cancelBtn = document.getElementById('epilepsy-cancel-btn');
|
|
|
|
acceptBtn.onclick = () => {
|
|
modal.classList.remove('active');
|
|
localStorage.setItem('epilepsy-warning-dismissed', 'true');
|
|
startVisualizer();
|
|
};
|
|
cancelBtn.onclick = () => {
|
|
modal.classList.remove('active');
|
|
this.closeFullscreenCover();
|
|
};
|
|
} else {
|
|
startVisualizer();
|
|
}
|
|
}
|
|
}
|
|
|
|
closeFullscreenCover() {
|
|
const overlay = document.getElementById('fullscreen-cover-overlay');
|
|
overlay.style.display = 'none';
|
|
overlay.classList.remove('visualizer-active', 'ui-hidden');
|
|
|
|
const playerBar = document.querySelector('.now-playing-bar');
|
|
if (playerBar) playerBar.style.removeProperty('display');
|
|
|
|
if (this.player?.currentTrack?.type === 'video') {
|
|
const coverContainer = document.querySelector('.now-playing-bar .track-info');
|
|
const videoPlayer = document.getElementById('video-player');
|
|
const imgCover = coverContainer?.querySelector('.cover:not(#audio-player):not(#video-player)');
|
|
|
|
if (videoPlayer && coverContainer) {
|
|
if (imgCover) imgCover.style.display = 'none';
|
|
|
|
videoPlayer.style.display = 'block';
|
|
videoPlayer.classList.add('cover', 'video-cover-mirror');
|
|
videoPlayer.style.width = '56px';
|
|
videoPlayer.style.height = '56px';
|
|
videoPlayer.style.borderRadius = 'var(--radius-sm)';
|
|
videoPlayer.style.objectFit = 'cover';
|
|
videoPlayer.style.gridArea = 'none';
|
|
|
|
if (videoPlayer.parentElement !== coverContainer) {
|
|
coverContainer.insertBefore(videoPlayer, coverContainer.firstChild);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (this.fullscreenUpdateInterval) {
|
|
cancelAnimationFrame(this.fullscreenUpdateInterval);
|
|
this.fullscreenUpdateInterval = null;
|
|
}
|
|
|
|
if (this.visualizer) {
|
|
this.visualizer.stop();
|
|
}
|
|
|
|
// Clear UI toggle button timers
|
|
if (this.uiToggleMouseTimer) {
|
|
clearTimeout(this.uiToggleMouseTimer);
|
|
this.uiToggleMouseTimer = null;
|
|
}
|
|
}
|
|
|
|
setupUIToggleButton(overlay) {
|
|
const toggleBtn = document.getElementById('toggle-ui-btn');
|
|
if (!toggleBtn) return;
|
|
|
|
let isUIHidden = overlay.classList.contains('ui-hidden');
|
|
toggleBtn.classList.toggle('active', isUIHidden);
|
|
toggleBtn.title = isUIHidden ? 'Show UI' : 'Hide UI';
|
|
|
|
// Show button
|
|
const showButton = () => {
|
|
toggleBtn.classList.add('visible');
|
|
};
|
|
|
|
// Hide button
|
|
const hideButton = () => {
|
|
toggleBtn.classList.remove('visible');
|
|
};
|
|
|
|
// Initial state: hide button if UI is hidden
|
|
if (isUIHidden) {
|
|
hideButton();
|
|
} else {
|
|
showButton();
|
|
}
|
|
|
|
const toggleUI = (e) => {
|
|
if (e) e.stopPropagation();
|
|
isUIHidden = !isUIHidden;
|
|
overlay.classList.toggle('ui-hidden', isUIHidden);
|
|
toggleBtn.classList.toggle('active', isUIHidden);
|
|
toggleBtn.title = isUIHidden ? 'Show UI' : 'Hide UI';
|
|
|
|
if (isUIHidden) {
|
|
hideButton();
|
|
} else {
|
|
showButton();
|
|
}
|
|
};
|
|
|
|
// Mouse move handler
|
|
const handleMouseMove = (e) => {
|
|
const rect = overlay.getBoundingClientRect();
|
|
const isNearTopRight = e.clientY < 100 && e.clientX > rect.width - 150;
|
|
|
|
if (isUIHidden) {
|
|
if (overlay.classList.contains('is-video-mode')) {
|
|
if (isNearTopRight) {
|
|
showButton();
|
|
} else {
|
|
hideButton();
|
|
}
|
|
} else if (isNearTopRight) {
|
|
showButton();
|
|
} else {
|
|
hideButton();
|
|
}
|
|
}
|
|
};
|
|
|
|
// Add event listeners
|
|
toggleBtn.addEventListener('click', toggleUI);
|
|
overlay.addEventListener('mousemove', handleMouseMove);
|
|
overlay.addEventListener('mouseleave', () => {
|
|
if (isUIHidden) {
|
|
hideButton();
|
|
}
|
|
});
|
|
|
|
// Store cleanup function
|
|
this.uiToggleCleanup = () => {
|
|
toggleBtn.removeEventListener('click', toggleUI);
|
|
overlay.removeEventListener('mousemove', handleMouseMove);
|
|
};
|
|
}
|
|
|
|
setupFullscreenControls() {
|
|
const playBtn = document.getElementById('fs-play-pause-btn');
|
|
const prevBtn = document.getElementById('fs-prev-btn');
|
|
const nextBtn = document.getElementById('fs-next-btn');
|
|
const shuffleBtn = document.getElementById('fs-shuffle-btn');
|
|
const repeatBtn = document.getElementById('fs-repeat-btn');
|
|
const progressBar = document.getElementById('fs-progress-bar');
|
|
const progressFill = document.getElementById('fs-progress-fill');
|
|
const currentTimeEl = document.getElementById('fs-current-time');
|
|
const totalDurationEl = document.getElementById('fs-total-duration');
|
|
const fsLikeBtn = document.getElementById('fs-like-btn');
|
|
const fsAddPlaylistBtn = document.getElementById('fs-add-playlist-btn');
|
|
const fsDownloadBtn = document.getElementById('fs-download-btn');
|
|
const fsCastBtn = document.getElementById('fs-cast-btn');
|
|
const fsQueueBtn = document.getElementById('fs-queue-btn');
|
|
const artistEl = document.getElementById('fullscreen-track-artist');
|
|
|
|
if (artistEl) {
|
|
artistEl.style.cursor = 'pointer';
|
|
artistEl.onclick = () => {
|
|
if (this.player.currentTrack && this.player.currentTrack.artist) {
|
|
this.closeFullscreenCover();
|
|
navigate(`/artist/${this.player.currentTrack.artist.id}`);
|
|
}
|
|
};
|
|
}
|
|
|
|
let lastPausedState = null;
|
|
const updatePlayBtn = () => {
|
|
const activeEl = this.player.activeElement;
|
|
const isPaused = activeEl.paused;
|
|
if (isPaused === lastPausedState) return;
|
|
lastPausedState = isPaused;
|
|
|
|
if (isPaused) {
|
|
playBtn.innerHTML = SVG_PLAY_LARGE(32);
|
|
} else {
|
|
playBtn.innerHTML = SVG_PAUSE_LARGE(32);
|
|
}
|
|
};
|
|
|
|
updatePlayBtn();
|
|
|
|
playBtn.onclick = () => {
|
|
this.player.handlePlayPause();
|
|
updatePlayBtn();
|
|
};
|
|
|
|
prevBtn.onclick = () => this.player.playPrev();
|
|
nextBtn.onclick = () => this.player.playNext();
|
|
|
|
shuffleBtn.onclick = () => {
|
|
this.player.toggleShuffle();
|
|
shuffleBtn.classList.toggle('active', this.player.shuffleActive);
|
|
};
|
|
|
|
repeatBtn.onclick = () => {
|
|
const mode = this.player.toggleRepeat();
|
|
repeatBtn.classList.toggle('active', mode !== 0);
|
|
if (mode === 2) {
|
|
repeatBtn.innerHTML = SVG_REPEAT_ONE(24);
|
|
} else {
|
|
repeatBtn.innerHTML = SVG_REPEAT(24);
|
|
}
|
|
};
|
|
|
|
// Progress bar with drag support
|
|
let isFsSeeking = false;
|
|
let wasFsPlaying = false;
|
|
let lastFsSeekPosition = 0;
|
|
|
|
const updateFsSeekUI = (position) => {
|
|
const activeEl = this.player.activeElement;
|
|
if (!isNaN(activeEl.duration)) {
|
|
progressFill.style.width = `${position * 100}%`;
|
|
if (currentTimeEl) {
|
|
currentTimeEl.textContent = formatTime(position * activeEl.duration);
|
|
}
|
|
}
|
|
};
|
|
|
|
progressBar.addEventListener('mousedown', (e) => {
|
|
const activeEl = this.player.activeElement;
|
|
isFsSeeking = true;
|
|
wasFsPlaying = !activeEl.paused;
|
|
if (wasFsPlaying) activeEl.pause();
|
|
|
|
const rect = progressBar.getBoundingClientRect();
|
|
const pos = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
|
|
lastFsSeekPosition = pos;
|
|
updateFsSeekUI(pos);
|
|
});
|
|
|
|
progressBar.addEventListener(
|
|
'touchstart',
|
|
(e) => {
|
|
const activeEl = this.player.activeElement;
|
|
e.preventDefault();
|
|
isFsSeeking = true;
|
|
wasFsPlaying = !activeEl.paused;
|
|
if (wasFsPlaying) activeEl.pause();
|
|
|
|
const touch = e.touches[0];
|
|
const rect = progressBar.getBoundingClientRect();
|
|
const pos = Math.max(0, Math.min(1, (touch.clientX - rect.left) / rect.width));
|
|
lastFsSeekPosition = pos;
|
|
updateFsSeekUI(pos);
|
|
},
|
|
{ passive: false }
|
|
);
|
|
|
|
document.addEventListener('mousemove', (e) => {
|
|
if (isFsSeeking) {
|
|
const rect = progressBar.getBoundingClientRect();
|
|
const pos = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
|
|
lastFsSeekPosition = pos;
|
|
updateFsSeekUI(pos);
|
|
}
|
|
});
|
|
|
|
document.addEventListener(
|
|
'touchmove',
|
|
(e) => {
|
|
if (isFsSeeking) {
|
|
const touch = e.touches[0];
|
|
const rect = progressBar.getBoundingClientRect();
|
|
const pos = Math.max(0, Math.min(1, (touch.clientX - rect.left) / rect.width));
|
|
lastFsSeekPosition = pos;
|
|
updateFsSeekUI(pos);
|
|
}
|
|
},
|
|
{ passive: false }
|
|
);
|
|
|
|
document.addEventListener('mouseup', () => {
|
|
if (isFsSeeking) {
|
|
const activeEl = this.player.activeElement;
|
|
if (!isNaN(activeEl.duration)) {
|
|
activeEl.currentTime = lastFsSeekPosition * activeEl.duration;
|
|
if (wasFsPlaying) activeEl.play();
|
|
}
|
|
isFsSeeking = false;
|
|
}
|
|
});
|
|
|
|
document.addEventListener('touchend', () => {
|
|
if (isFsSeeking) {
|
|
const activeEl = this.player.activeElement;
|
|
if (!isNaN(activeEl.duration)) {
|
|
activeEl.currentTime = lastFsSeekPosition * activeEl.duration;
|
|
if (wasFsPlaying) activeEl.play();
|
|
}
|
|
isFsSeeking = false;
|
|
}
|
|
});
|
|
|
|
if (fsLikeBtn) {
|
|
fsLikeBtn.onclick = () => document.getElementById('now-playing-like-btn')?.click();
|
|
}
|
|
if (fsAddPlaylistBtn) {
|
|
fsAddPlaylistBtn.onclick = () => document.getElementById('now-playing-add-playlist-btn')?.click();
|
|
}
|
|
if (fsDownloadBtn) {
|
|
fsDownloadBtn.onclick = () => document.getElementById('download-current-btn')?.click();
|
|
}
|
|
if (fsCastBtn) {
|
|
fsCastBtn.onclick = () => document.getElementById('cast-btn')?.click();
|
|
}
|
|
if (fsQueueBtn) {
|
|
fsQueueBtn.onclick = () => {
|
|
document.getElementById('queue-btn')?.click();
|
|
};
|
|
}
|
|
|
|
shuffleBtn.classList.toggle('active', this.player.shuffleActive);
|
|
const mode = this.player.repeatMode;
|
|
repeatBtn.classList.toggle('active', mode !== 0);
|
|
if (mode === 2) {
|
|
repeatBtn.innerHTML = SVG_REPEAT_ONE(24);
|
|
}
|
|
|
|
// Fullscreen volume controls
|
|
const fsVolumeBtn = document.getElementById('fs-volume-btn');
|
|
const fsVolumeBar = document.getElementById('fs-volume-bar');
|
|
const fsVolumeFill = document.getElementById('fs-volume-fill');
|
|
|
|
if (fsVolumeBtn && fsVolumeBar && fsVolumeFill) {
|
|
const updateFsVolumeUI = () => {
|
|
const activeEl = this.player.activeElement;
|
|
const { muted } = activeEl;
|
|
const volume = this.player.userVolume;
|
|
fsVolumeBtn.innerHTML = muted || volume === 0 ? SVG_MUTE(20) : SVG_VOLUME(20);
|
|
fsVolumeBtn.classList.toggle('muted', muted || volume === 0);
|
|
const effectiveVolume = muted ? 0 : volume * 100;
|
|
fsVolumeFill.style.setProperty('--fs-volume-level', `${effectiveVolume}%`);
|
|
fsVolumeFill.style.width = `${effectiveVolume}%`;
|
|
};
|
|
|
|
fsVolumeBtn.onclick = () => {
|
|
const activeEl = this.player.activeElement;
|
|
activeEl.muted = !activeEl.muted;
|
|
localStorage.setItem('muted', activeEl.muted);
|
|
updateFsVolumeUI();
|
|
};
|
|
|
|
const handleFsVolumeWheel = (e) => {
|
|
e.preventDefault();
|
|
|
|
const delta = e.deltaY > 0 ? -0.05 : 0.05;
|
|
const currentVolume = this.player.userVolume;
|
|
const newVolume = Math.max(0, Math.min(1, currentVolume + delta));
|
|
|
|
const activeEl = this.player.activeElement;
|
|
if (delta > 0 && activeEl.muted) {
|
|
activeEl.muted = false;
|
|
localStorage.setItem('muted', false);
|
|
}
|
|
|
|
this.player.setVolume(newVolume);
|
|
updateFsVolumeUI();
|
|
};
|
|
|
|
[fsVolumeBar, fsVolumeBtn].forEach((el) => {
|
|
if (el._fsVolumeWheelHandler) {
|
|
el.removeEventListener('wheel', el._fsVolumeWheelHandler);
|
|
}
|
|
el._fsVolumeWheelHandler = handleFsVolumeWheel;
|
|
el.addEventListener('wheel', handleFsVolumeWheel, { passive: false });
|
|
});
|
|
|
|
const setFsVolume = (e) => {
|
|
const rect = fsVolumeBar.getBoundingClientRect();
|
|
const position = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
|
|
const newVolume = position;
|
|
this.player.setVolume(newVolume);
|
|
const activeEl = this.player.activeElement;
|
|
if (activeEl.muted && newVolume > 0) {
|
|
activeEl.muted = false;
|
|
localStorage.setItem('muted', false);
|
|
}
|
|
updateFsVolumeUI();
|
|
};
|
|
|
|
let isAdjustingFsVolume = false;
|
|
|
|
fsVolumeBar.addEventListener('mousedown', (e) => {
|
|
isAdjustingFsVolume = true;
|
|
setFsVolume(e);
|
|
});
|
|
|
|
fsVolumeBar.addEventListener(
|
|
'touchstart',
|
|
(e) => {
|
|
e.preventDefault();
|
|
isAdjustingFsVolume = true;
|
|
const touch = e.touches[0];
|
|
setFsVolume({ clientX: touch.clientX });
|
|
},
|
|
{ passive: false }
|
|
);
|
|
|
|
document.addEventListener('mousemove', (e) => {
|
|
if (isAdjustingFsVolume) {
|
|
setFsVolume(e);
|
|
}
|
|
});
|
|
|
|
document.addEventListener(
|
|
'touchmove',
|
|
(e) => {
|
|
if (isAdjustingFsVolume) {
|
|
const touch = e.touches[0];
|
|
setFsVolume({ clientX: touch.clientX });
|
|
}
|
|
},
|
|
{ passive: false }
|
|
);
|
|
|
|
document.addEventListener('mouseup', () => {
|
|
isAdjustingFsVolume = false;
|
|
});
|
|
|
|
document.addEventListener('touchend', () => {
|
|
isAdjustingFsVolume = false;
|
|
});
|
|
|
|
this.player.activeElement.addEventListener('volumechange', updateFsVolumeUI);
|
|
updateFsVolumeUI();
|
|
}
|
|
|
|
const update = () => {
|
|
if (document.getElementById('fullscreen-cover-overlay').style.display === 'none') return;
|
|
|
|
const activeEl = this.player.activeElement;
|
|
const duration = activeEl.duration || 0;
|
|
const current = activeEl.currentTime || 0;
|
|
|
|
if (duration > 0) {
|
|
// Only update progress if not currently seeking (user is dragging)
|
|
if (!isFsSeeking) {
|
|
const percent = (current / duration) * 100;
|
|
progressFill.style.width = `${percent}%`;
|
|
currentTimeEl.textContent = formatTime(current);
|
|
}
|
|
totalDurationEl.textContent = formatTime(duration);
|
|
}
|
|
|
|
updatePlayBtn();
|
|
this.fullscreenUpdateInterval = requestAnimationFrame(update);
|
|
};
|
|
|
|
if (this.fullscreenUpdateInterval) cancelAnimationFrame(this.fullscreenUpdateInterval);
|
|
this.fullscreenUpdateInterval = requestAnimationFrame(update);
|
|
}
|
|
|
|
showPage(pageId) {
|
|
this.currentPage = pageId;
|
|
document.querySelectorAll('.page').forEach((page) => {
|
|
page.classList.toggle('active', page.id === `page-${pageId}`);
|
|
});
|
|
|
|
document.querySelectorAll('.sidebar-nav a').forEach((link) => {
|
|
link.classList.toggle(
|
|
'active',
|
|
link.pathname === `/${pageId}` || (pageId === 'home' && link.pathname === '/')
|
|
);
|
|
});
|
|
|
|
document.querySelector('.main-content').scrollTop = 0;
|
|
|
|
// Clear background and color if not on album, artist, playlist, or mix page
|
|
if (!['album', 'artist', 'playlist', 'mix'].includes(pageId)) {
|
|
this.setPageBackground(null);
|
|
this.updateGlobalTheme();
|
|
}
|
|
|
|
const downloadsdisabled = true;
|
|
if (downloadsdisabled == true) {
|
|
if (pageId === 'download') {
|
|
const maintenanceModal = document.getElementById('maintenance-modal');
|
|
const maintenanceHomeBtn = document.getElementById('maintenance-home-btn');
|
|
if (maintenanceModal) {
|
|
maintenanceModal.classList.add('active');
|
|
if (maintenanceHomeBtn) {
|
|
maintenanceHomeBtn.onclick = () => {
|
|
maintenanceModal.classList.remove('active');
|
|
navigate('/');
|
|
};
|
|
}
|
|
}
|
|
} else {
|
|
const maintenanceModal = document.getElementById('maintenance-modal');
|
|
if (maintenanceModal) {
|
|
maintenanceModal.classList.remove('active');
|
|
}
|
|
}
|
|
}
|
|
if (pageId === 'settings') {
|
|
this.renderApiSettings();
|
|
const savedTabName = settingsUiState.getActiveTab();
|
|
const savedTab = document.querySelector(`.settings-tab[data-tab="${savedTabName}"]`);
|
|
if (savedTab) {
|
|
document.querySelectorAll('.settings-tab').forEach((t) => t.classList.remove('active'));
|
|
document.querySelectorAll('.settings-tab-content').forEach((c) => c.classList.remove('active'));
|
|
savedTab.classList.add('active');
|
|
document.getElementById(`settings-tab-${savedTabName}`)?.classList.add('active');
|
|
}
|
|
} else {
|
|
document.querySelectorAll('.settings-tab').forEach((t) => t.classList.remove('active'));
|
|
document.querySelectorAll('.settings-tab-content').forEach((c) => c.classList.remove('active'));
|
|
}
|
|
}
|
|
|
|
async renderLibraryPage() {
|
|
this.showPage('library');
|
|
|
|
const tracksContainer = document.getElementById('library-tracks-container');
|
|
const videosTabContent = document.getElementById('library-tab-videos');
|
|
const albumsContainer = document.getElementById('library-albums-container');
|
|
const artistsContainer = document.getElementById('library-artists-container');
|
|
const playlistsContainer = document.getElementById('library-playlists-container');
|
|
const localContainer = document.getElementById('library-local-container');
|
|
const foldersContainer = document.getElementById('my-folders-container');
|
|
const myPlaylistsContainer = document.getElementById('my-playlists-container');
|
|
|
|
const likedTracks = await db.getFavorites('track');
|
|
const shuffleBtn = document.getElementById('shuffle-liked-tracks-btn');
|
|
const downloadBtn = document.getElementById('download-liked-tracks-btn');
|
|
|
|
if (likedTracks.length) {
|
|
if (shuffleBtn) shuffleBtn.style.display = 'flex';
|
|
if (downloadBtn) downloadBtn.style.display = 'flex';
|
|
this.renderListWithTracks(tracksContainer, likedTracks, true);
|
|
} else {
|
|
if (shuffleBtn) shuffleBtn.style.display = 'none';
|
|
if (downloadBtn) downloadBtn.style.display = 'none';
|
|
tracksContainer.innerHTML = createPlaceholder('No liked tracks yet.');
|
|
}
|
|
|
|
const likedVideos = await db.getFavorites('video');
|
|
if (videosTabContent) {
|
|
const grid = videosTabContent.querySelector('.card-grid');
|
|
if (likedVideos.length) {
|
|
grid.innerHTML = likedVideos.map((v) => this.createVideoCardHTML(v)).join('');
|
|
likedVideos.forEach((video) => {
|
|
const el = grid.querySelector(`[data-video-id="${video.id}"]`);
|
|
if (el) {
|
|
trackDataStore.set(el, video);
|
|
this.updateLikeState(el, 'video', video.id);
|
|
el.addEventListener('click', (e) => {
|
|
if (e.target.closest('.card-play-btn') || e.target.closest('.card-image-container')) {
|
|
e.stopPropagation();
|
|
this.player.playVideo(video);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
} else {
|
|
grid.innerHTML = createPlaceholder('No liked videos yet.');
|
|
}
|
|
}
|
|
|
|
const likedAlbums = await db.getFavorites('album');
|
|
if (likedAlbums.length) {
|
|
albumsContainer.innerHTML = likedAlbums.map((a) => this.createAlbumCardHTML(a)).join('');
|
|
likedAlbums.forEach((album) => {
|
|
const el = albumsContainer.querySelector(`[data-album-id="${album.id}"]`);
|
|
if (el) {
|
|
trackDataStore.set(el, album);
|
|
this.updateLikeState(el, 'album', album.id);
|
|
}
|
|
});
|
|
} else {
|
|
albumsContainer.innerHTML = createPlaceholder('No liked albums yet.');
|
|
}
|
|
|
|
const likedArtists = await db.getFavorites('artist');
|
|
if (likedArtists.length) {
|
|
artistsContainer.innerHTML = likedArtists.map((a) => this.createArtistCardHTML(a)).join('');
|
|
likedArtists.forEach((artist) => {
|
|
const el = artistsContainer.querySelector(`[data-artist-id="${artist.id}"]`);
|
|
if (el) {
|
|
trackDataStore.set(el, artist);
|
|
this.updateLikeState(el, 'artist', artist.id);
|
|
}
|
|
});
|
|
} else {
|
|
artistsContainer.innerHTML = createPlaceholder('No liked artists yet.');
|
|
}
|
|
|
|
const likedPlaylists = await db.getFavorites('playlist');
|
|
const likedMixes = await db.getFavorites('mix');
|
|
|
|
let mixedContent = [];
|
|
if (likedPlaylists.length) mixedContent.push(...likedPlaylists.map((p) => ({ ...p, _type: 'playlist' })));
|
|
if (likedMixes.length) mixedContent.push(...likedMixes.map((m) => ({ ...m, _type: 'mix' })));
|
|
|
|
// Sort by addedAt descending
|
|
mixedContent.sort((a, b) => b.addedAt - a.addedAt);
|
|
|
|
if (mixedContent.length) {
|
|
playlistsContainer.innerHTML = mixedContent
|
|
.map((item) => {
|
|
return item._type === 'playlist' ? this.createPlaylistCardHTML(item) : this.createMixCardHTML(item);
|
|
})
|
|
.join('');
|
|
|
|
likedPlaylists.forEach((playlist) => {
|
|
const el = playlistsContainer.querySelector(`[data-playlist-id="${playlist.uuid}"]`);
|
|
if (el) {
|
|
trackDataStore.set(el, playlist);
|
|
this.updateLikeState(el, 'playlist', playlist.uuid);
|
|
}
|
|
});
|
|
|
|
likedMixes.forEach((mix) => {
|
|
const el = playlistsContainer.querySelector(`[data-mix-id="${mix.id}"]`);
|
|
if (el) {
|
|
trackDataStore.set(el, mix);
|
|
this.updateLikeState(el, 'mix', mix.id);
|
|
}
|
|
});
|
|
} else {
|
|
playlistsContainer.innerHTML = createPlaceholder('No liked playlists or mixes yet.');
|
|
}
|
|
|
|
const folders = await db.getFolders();
|
|
if (foldersContainer) {
|
|
foldersContainer.innerHTML = folders.map((f) => this.createFolderCardHTML(f)).join('');
|
|
foldersContainer.style.display = folders.length ? 'grid' : 'none';
|
|
}
|
|
|
|
const myPlaylists = await db.getPlaylists();
|
|
const playlistsInFolders = new Set();
|
|
folders.forEach((folder) => {
|
|
if (folder.playlists) {
|
|
folder.playlists.forEach((id) => playlistsInFolders.add(id));
|
|
}
|
|
});
|
|
|
|
const visiblePlaylists = myPlaylists.filter((p) => !playlistsInFolders.has(p.id));
|
|
|
|
if (myPlaylistsContainer) {
|
|
if (visiblePlaylists.length) {
|
|
myPlaylistsContainer.innerHTML = visiblePlaylists
|
|
.map((p) => this.createUserPlaylistCardHTML(p))
|
|
.join('');
|
|
visiblePlaylists.forEach((playlist) => {
|
|
const el = myPlaylistsContainer.querySelector(`[data-user-playlist-id="${playlist.id}"]`);
|
|
if (el) {
|
|
trackDataStore.set(el, playlist);
|
|
}
|
|
});
|
|
} else {
|
|
if (folders.length === 0) {
|
|
myPlaylistsContainer.innerHTML = createPlaceholder('No playlists yet. Create your first playlist!');
|
|
} else {
|
|
myPlaylistsContainer.innerHTML = '';
|
|
}
|
|
}
|
|
}
|
|
|
|
// Render Local Files
|
|
if (localContainer) {
|
|
this.renderLocalFiles(localContainer);
|
|
}
|
|
}
|
|
|
|
async renderLocalFiles(container) {
|
|
if (!container) return;
|
|
|
|
const introDiv = document.getElementById('local-files-intro');
|
|
const headerDiv = document.getElementById('local-files-header');
|
|
const listContainer = document.getElementById('local-files-list');
|
|
const selectBtnText = document.getElementById('select-local-folder-text');
|
|
|
|
const handle = await db.getSetting('local_folder_handle');
|
|
if (handle) {
|
|
if (selectBtnText) selectBtnText.textContent = `Load "${handle.name}"`;
|
|
|
|
if (window.localFilesCache && window.localFilesCache.length > 0) {
|
|
if (introDiv) introDiv.style.display = 'none';
|
|
if (headerDiv) {
|
|
headerDiv.style.display = 'flex';
|
|
headerDiv.querySelector('h3').textContent = `Local Files (${window.localFilesCache.length})`;
|
|
}
|
|
if (listContainer) {
|
|
this.renderListWithTracks(listContainer, window.localFilesCache, true);
|
|
}
|
|
} else {
|
|
if (introDiv) introDiv.style.display = 'block';
|
|
if (headerDiv) headerDiv.style.display = 'none';
|
|
if (listContainer) listContainer.innerHTML = '';
|
|
}
|
|
} else {
|
|
if (selectBtnText) selectBtnText.textContent = 'Select Music Folder';
|
|
if (introDiv) introDiv.style.display = 'block';
|
|
if (headerDiv) headerDiv.style.display = 'none';
|
|
if (listContainer) listContainer.innerHTML = '';
|
|
}
|
|
}
|
|
|
|
async renderHomePage() {
|
|
if (this.renderLock) return;
|
|
this.renderLock = true;
|
|
|
|
try {
|
|
this.showPage('home');
|
|
this.setupHomeTabs();
|
|
|
|
const welcomeEl = document.getElementById('home-welcome');
|
|
const contentEl = document.getElementById('home-content');
|
|
const editorsPicksSectionEmpty = document.getElementById('home-editors-picks-section-empty');
|
|
const editorsPicksSection = document.getElementById('home-editors-picks-section');
|
|
|
|
const history = await db.getHistory();
|
|
const favorites = await db.getFavorites('track');
|
|
const playlists = await db.getPlaylists(true);
|
|
|
|
const hasActivity = history.length > 0 || favorites.length > 0 || playlists.length > 0;
|
|
|
|
// Handle Editor's Picks visibility based on settings
|
|
if (!homePageSettings.shouldShowEditorsPicks()) {
|
|
if (editorsPicksSectionEmpty) editorsPicksSectionEmpty.style.display = 'none';
|
|
if (editorsPicksSection) editorsPicksSection.style.display = 'none';
|
|
} else {
|
|
// Show empty-state section at top when no activity, hide the bottom one
|
|
if (editorsPicksSectionEmpty) editorsPicksSectionEmpty.style.display = hasActivity ? 'none' : '';
|
|
// Show bottom section when has activity, render it
|
|
if (editorsPicksSection) editorsPicksSection.style.display = hasActivity ? '' : 'none';
|
|
}
|
|
|
|
// Render editor's picks in the visible container
|
|
if (hasActivity) {
|
|
this.renderHomeEditorsPicks(false, 'home-editors-picks');
|
|
} else {
|
|
this.renderHomeEditorsPicks(false, 'home-editors-picks-empty');
|
|
}
|
|
|
|
if (!hasActivity) {
|
|
if (welcomeEl) welcomeEl.style.display = 'block';
|
|
if (contentEl) contentEl.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
if (welcomeEl) welcomeEl.style.display = 'none';
|
|
if (contentEl) contentEl.style.display = 'block';
|
|
|
|
const refreshSongsBtn = document.getElementById('refresh-songs-btn');
|
|
const refreshAlbumsBtn = document.getElementById('refresh-albums-btn');
|
|
const refreshArtistsBtn = document.getElementById('refresh-artists-btn');
|
|
const clearRecentBtn = document.getElementById('clear-recent-btn');
|
|
|
|
if (refreshSongsBtn) refreshSongsBtn.onclick = () => this.renderHomeSongs(true);
|
|
if (refreshAlbumsBtn) refreshAlbumsBtn.onclick = () => this.renderHomeAlbums(true);
|
|
if (refreshArtistsBtn) refreshArtistsBtn.onclick = () => this.renderHomeArtists(true);
|
|
if (clearRecentBtn)
|
|
clearRecentBtn.onclick = () => {
|
|
if (confirm('Clear recent activity?')) {
|
|
recentActivityManager.clear();
|
|
this.renderHomeRecent();
|
|
}
|
|
};
|
|
|
|
this.renderHomeRecent();
|
|
|
|
// Load dynamic sections in parallel with pre-fetched seeds
|
|
const seeds = await this.getSeeds();
|
|
await Promise.all([
|
|
this.renderHomeSongs(false, seeds),
|
|
this.renderHomeAlbums(false, seeds),
|
|
this.renderHomeArtists(false, seeds),
|
|
]);
|
|
} finally {
|
|
this.renderLock = false;
|
|
}
|
|
}
|
|
|
|
setupHomeTabs() {
|
|
const tabs = document.querySelectorAll('.home-tab');
|
|
if (tabs.length === 0) return;
|
|
|
|
if (tabs[0].dataset.initialized) return;
|
|
|
|
tabs.forEach((tab) => {
|
|
tab.dataset.initialized = 'true';
|
|
tab.addEventListener('click', () => {
|
|
document.querySelectorAll('.home-tab').forEach((t) => t.classList.remove('active'));
|
|
document.querySelectorAll('.home-view').forEach((v) => {
|
|
v.style.display = 'none';
|
|
v.classList.remove('active');
|
|
});
|
|
|
|
tab.classList.add('active');
|
|
const viewId = `home-view-${tab.dataset.tab}`;
|
|
const view = document.getElementById(viewId);
|
|
if (view) {
|
|
view.style.display = 'block';
|
|
view.classList.add('active');
|
|
}
|
|
|
|
if (tab.dataset.tab === 'explore') {
|
|
this.renderExplorePage();
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
async renderExplorePage() {
|
|
const container = document.getElementById('explore-grid');
|
|
if (!container) return;
|
|
|
|
if (container.children.length > 0) return;
|
|
|
|
container.classList.remove('card-grid');
|
|
|
|
container.innerHTML = `<div class="card-grid">${this.createSkeletonCards(12)}</div>`;
|
|
|
|
try {
|
|
const response = await fetch('https://hot.monochrome.tf/');
|
|
if (!response.ok) throw new Error('Failed to load explore data');
|
|
const data = await response.json();
|
|
|
|
container.innerHTML = '';
|
|
|
|
const GENRES = [
|
|
{ id: 'hip_hop', name: 'Hip-Hop' },
|
|
{ id: 'rnb', name: 'R&B / Soul' },
|
|
{ id: 'blues', name: 'Blues' },
|
|
{ id: 'classical', name: 'Classical' },
|
|
{ id: 'country', name: 'Country' },
|
|
{ id: 'dance_electronic', name: 'Dance & Electronic' },
|
|
{ id: 'americana', name: 'Folk / Americana' },
|
|
{ id: 'world', name: 'Global' },
|
|
{ id: 'gospel', name: 'Gospel / Christian' },
|
|
{ id: 'jazz', name: 'Jazz' },
|
|
{ id: 'kpop', name: 'K-Pop' },
|
|
{ id: 'kids', name: 'Kids' },
|
|
{ id: 'latin', name: 'Latin' },
|
|
{ id: 'metal', name: 'Metal' },
|
|
{ id: 'pop', name: 'Pop' },
|
|
{ id: 'reggae', name: 'Reggae / Dancehall' },
|
|
{ id: 'retro', name: 'Legacy' },
|
|
{ id: 'indierock', name: 'Rock / Indie' },
|
|
];
|
|
|
|
if (GENRES.length > 0) {
|
|
const genresSection = document.createElement('section');
|
|
genresSection.className = 'content-section';
|
|
genresSection.innerHTML = `<h2 class="section-title">Genres</h2>`;
|
|
|
|
const genresGrid = document.createElement('div');
|
|
genresGrid.style.display = 'flex';
|
|
genresGrid.style.flexWrap = 'wrap';
|
|
genresGrid.style.gap = '0.5rem';
|
|
genresGrid.innerHTML = GENRES.map(
|
|
(genre) => `
|
|
<div class="card genre-card" data-genre-id="${genre.id}" data-genre-name="${escapeHtml(genre.name)}" style="cursor: pointer; background: var(--secondary); padding: 0.6rem 1rem; border-radius: var(--radius); border: 1px solid var(--border);">
|
|
<h3 style="margin: 0; font-size: 0.875rem; font-weight: 600;">${escapeHtml(genre.name)}</h3>
|
|
</div>
|
|
`
|
|
).join('');
|
|
|
|
genresSection.appendChild(genresGrid);
|
|
container.appendChild(genresSection);
|
|
|
|
genresGrid.querySelectorAll('.genre-card').forEach((card) => {
|
|
card.addEventListener('click', () => {
|
|
this.renderGenrePage(card.dataset.genreId, card.dataset.genreName);
|
|
});
|
|
});
|
|
}
|
|
|
|
if (data.top_albums && data.top_albums.length > 0) {
|
|
this.renderExploreSection(container, 'Trending Albums', data.top_albums, 'album');
|
|
}
|
|
|
|
if (data.top_tracks && data.top_tracks.length > 0) {
|
|
this.renderExploreSection(container, 'Trending Tracks', data.top_tracks, 'track');
|
|
}
|
|
|
|
if (data.featured_playlists && data.featured_playlists.length > 0) {
|
|
this.renderExploreSection(container, 'Featured Playlists', data.featured_playlists, 'playlist');
|
|
}
|
|
|
|
if (data.sections && data.sections.length > 0) {
|
|
data.sections.forEach((section) => {
|
|
if (section.items && section.items.length > 0) {
|
|
let type = null;
|
|
if (section.type === 'ALBUM_LIST') type = 'album';
|
|
else if (section.type === 'TRACK_LIST') type = 'track';
|
|
else if (section.type === 'PLAYLIST_LIST') type = 'playlist';
|
|
|
|
if (type) {
|
|
this.renderExploreSection(container, section.title, section.items, type);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
if (container.children.length === 0) {
|
|
container.innerHTML = createPlaceholder('No explore content available.');
|
|
}
|
|
} catch (e) {
|
|
console.error(e);
|
|
container.innerHTML = createPlaceholder('Failed to load explore content.');
|
|
}
|
|
}
|
|
|
|
renderExploreSection(container, title, items, type) {
|
|
const section = document.createElement('section');
|
|
section.className = 'content-section';
|
|
section.innerHTML = `<h2 class="section-title">${title}</h2>`;
|
|
|
|
if (type === 'track') {
|
|
const list = document.createElement('div');
|
|
list.className = 'track-list';
|
|
this.renderListWithTracks(list, items, true);
|
|
section.appendChild(list);
|
|
} else {
|
|
const grid = document.createElement('div');
|
|
grid.className = 'card-grid';
|
|
grid.innerHTML = items
|
|
.map((item) => {
|
|
if (type === 'album') return this.createAlbumCardHTML(item);
|
|
if (type === 'playlist') return this.createPlaylistCardHTML(item);
|
|
return '';
|
|
})
|
|
.join('');
|
|
|
|
items.forEach((item) => {
|
|
let selector;
|
|
if (type === 'album') selector = `[data-album-id="${item.id}"]`;
|
|
if (type === 'playlist') selector = `[data-playlist-id="${item.uuid}"]`;
|
|
|
|
if (selector) {
|
|
const el = grid.querySelector(selector);
|
|
if (el) {
|
|
trackDataStore.set(el, item);
|
|
if (type === 'album') this.updateLikeState(el, 'album', item.id);
|
|
if (type === 'playlist') this.updateLikeState(el, 'playlist', item.uuid);
|
|
}
|
|
}
|
|
});
|
|
section.appendChild(grid);
|
|
}
|
|
container.appendChild(section);
|
|
}
|
|
|
|
async renderGenrePage(genreId, genreName) {
|
|
const container = document.getElementById('explore-grid');
|
|
if (!container) return;
|
|
|
|
container.classList.remove('card-grid');
|
|
|
|
container.innerHTML = `
|
|
<div style="margin-bottom: 1.5rem; display: flex; align-items: center; gap: 1rem;">
|
|
<button class="btn-secondary explore-back-btn" style="display: flex; align-items: center; gap: 0.5rem;">
|
|
${SVG_LEFT_ARROW(20)}
|
|
Back
|
|
</button>
|
|
<h2 class="section-title" style="margin: 0;">${escapeHtml(genreName)}</h2>
|
|
</div>
|
|
<div class="card-grid">${this.createSkeletonCards(12)}</div>
|
|
`;
|
|
|
|
container.querySelector('.explore-back-btn').addEventListener('click', () => {
|
|
container.innerHTML = '';
|
|
this.renderExplorePage();
|
|
});
|
|
|
|
try {
|
|
const response = await fetch(`https://hot.monochrome.tf/explore/genre/?id=${genreId}`);
|
|
if (!response.ok) throw new Error('Failed to load genre data');
|
|
const data = await response.json();
|
|
|
|
const header = container.firstElementChild;
|
|
container.innerHTML = '';
|
|
container.appendChild(header);
|
|
|
|
const contentContainer = document.createElement('div');
|
|
container.appendChild(contentContainer);
|
|
|
|
if (data.sections && data.sections.length > 0) {
|
|
data.sections.forEach((section) => {
|
|
if (section.items && section.items.length > 0) {
|
|
let type = null;
|
|
if (section.type === 'ALBUM_LIST') type = 'album';
|
|
else if (section.type === 'TRACK_LIST') type = 'track';
|
|
else if (section.type === 'PLAYLIST_LIST') type = 'playlist';
|
|
|
|
if (type) {
|
|
this.renderExploreSection(contentContainer, section.title, section.items, type);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
if (contentContainer.children.length === 0) {
|
|
contentContainer.innerHTML = createPlaceholder('No content found for this genre.');
|
|
}
|
|
} catch (e) {
|
|
console.error(e);
|
|
const header = container.firstElementChild;
|
|
container.innerHTML = '';
|
|
container.appendChild(header);
|
|
const errorDiv = document.createElement('div');
|
|
errorDiv.innerHTML = createPlaceholder('Failed to load genre content.');
|
|
container.appendChild(errorDiv);
|
|
}
|
|
}
|
|
|
|
async getSeeds() {
|
|
const history = await db.getHistory();
|
|
const favorites = await db.getFavorites('track');
|
|
const playlists = await db.getPlaylists(true);
|
|
const playlistTracks = playlists.flatMap((p) => p.tracks || []);
|
|
|
|
// Prioritize: Playlists > Favorites > History
|
|
// Take random samples from each to form seeds
|
|
const shuffle = (arr) => [...arr].sort(() => Math.random() - 0.5);
|
|
|
|
const seeds = [
|
|
...shuffle(playlistTracks).slice(0, 20),
|
|
...shuffle(favorites).slice(0, 20),
|
|
...shuffle(history).slice(0, 10),
|
|
];
|
|
|
|
return shuffle(seeds);
|
|
}
|
|
|
|
async renderHomeSongs(forceRefresh = false, providedSeeds = null) {
|
|
const songsContainer = document.getElementById('home-recommended-songs');
|
|
const section = songsContainer?.closest('.content-section');
|
|
|
|
if (!homePageSettings.shouldShowRecommendedSongs()) {
|
|
if (section) section.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
if (section) section.style.display = '';
|
|
|
|
if (songsContainer) {
|
|
if (forceRefresh || songsContainer.children.length === 0) {
|
|
songsContainer.innerHTML = this.createSkeletonTracks(10, true);
|
|
} else if (!songsContainer.querySelector('.skeleton')) {
|
|
return; // Already loaded
|
|
}
|
|
|
|
try {
|
|
const seeds = providedSeeds || (await this.getSeeds());
|
|
|
|
const [favorites, playlists, history] = await Promise.all([
|
|
db.getFavorites('track'),
|
|
db.getPlaylists(true),
|
|
db.getHistory(),
|
|
]);
|
|
const knownTrackIds = new Set([
|
|
...favorites.map((t) => t.id),
|
|
...playlists.flatMap((p) => (p.tracks || []).map((t) => t.id)),
|
|
...history.map((t) => t.id),
|
|
]);
|
|
|
|
const recommendedTracks = await this.api.getRecommendedTracksForPlaylist(seeds, 20, {
|
|
skipCache: forceRefresh,
|
|
knownTrackIds: knownTrackIds,
|
|
});
|
|
|
|
const filteredTracks = await this.filterUserContent(recommendedTracks, 'track');
|
|
this.lastRecommendedTracks = filteredTracks;
|
|
|
|
if (filteredTracks.length > 0) {
|
|
this.renderListWithTracks(songsContainer, filteredTracks, true);
|
|
} else {
|
|
songsContainer.innerHTML = createPlaceholder('No song recommendations found.');
|
|
}
|
|
} catch (e) {
|
|
console.error(e);
|
|
songsContainer.innerHTML = createPlaceholder('Failed to load song recommendations.');
|
|
}
|
|
}
|
|
}
|
|
|
|
async renderHomeAlbums(forceRefresh = false, providedSeeds = null, retryCount = 0) {
|
|
const albumsContainer = document.getElementById('home-recommended-albums');
|
|
const section = albumsContainer?.closest('.content-section');
|
|
|
|
if (!homePageSettings.shouldShowRecommendedAlbums()) {
|
|
if (section) section.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
if (section) section.style.display = '';
|
|
|
|
if (albumsContainer) {
|
|
if (forceRefresh || albumsContainer.children.length === 0) {
|
|
albumsContainer.innerHTML = this.createSkeletonCards(5);
|
|
} else if (!albumsContainer.querySelector('.skeleton') && !forceRefresh) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const seeds = providedSeeds || (await this.getSeeds());
|
|
const albumSeed = seeds.find((t) => t.album && t.album.id);
|
|
if (albumSeed) {
|
|
const similarAlbums = await this.api.getSimilarAlbums(albumSeed.album.id);
|
|
const filteredAlbums = await this.filterUserContent(similarAlbums, 'album');
|
|
|
|
if (filteredAlbums.length > 0) {
|
|
albumsContainer.innerHTML = filteredAlbums
|
|
.slice(0, 12)
|
|
.map((a) => this.createAlbumCardHTML(a))
|
|
.join('');
|
|
filteredAlbums.slice(0, 12).forEach((a) => {
|
|
const el = albumsContainer.querySelector(`[data-album-id="${a.id}"]`);
|
|
if (el) {
|
|
trackDataStore.set(el, a);
|
|
this.updateLikeState(el, 'album', a.id);
|
|
}
|
|
});
|
|
} else if (retryCount < 2) {
|
|
await new Promise((resolve) => setTimeout(resolve, 1500));
|
|
return this.renderHomeAlbums(forceRefresh, null, retryCount + 1);
|
|
} else {
|
|
albumsContainer.innerHTML = `<div style="grid-column: 1/-1; padding: 2rem 0;">${createPlaceholder('Tell us more about what you like so we can recommend albums!')}</div>`;
|
|
}
|
|
} else if (retryCount < 2) {
|
|
await new Promise((resolve) => setTimeout(resolve, 1500));
|
|
return this.renderHomeAlbums(forceRefresh, null, retryCount + 1);
|
|
} else {
|
|
albumsContainer.innerHTML = `<div style="grid-column: 1/-1; padding: 2rem 0;">${createPlaceholder('Tell us more about what you like so we can recommend albums!')}</div>`;
|
|
}
|
|
} catch (e) {
|
|
console.error(e);
|
|
if (retryCount < 2) {
|
|
await new Promise((resolve) => setTimeout(resolve, 1500));
|
|
return this.renderHomeAlbums(forceRefresh, null, retryCount + 1);
|
|
}
|
|
albumsContainer.innerHTML = createPlaceholder('Failed to load album recommendations.');
|
|
}
|
|
}
|
|
}
|
|
|
|
createTrackCardHTML(track) {
|
|
const explicitBadge = hasExplicitContent(track) ? this.createExplicitBadge() : '';
|
|
const qualityBadge = createQualityBadgeHTML(track);
|
|
const isCompact = cardSettings.isCompactAlbum();
|
|
|
|
return this.createBaseCardHTML({
|
|
type: 'track',
|
|
id: track.id,
|
|
href: `/track/${track.id}`,
|
|
title: `${escapeHtml(getTrackTitle(track))} ${explicitBadge} ${qualityBadge}`,
|
|
subtitle: escapeHtml(getTrackArtists(track)),
|
|
imageHTML: this.getCoverHTML(
|
|
track.album?.cover,
|
|
escapeHtml(track.title),
|
|
'card-image',
|
|
'lazy',
|
|
track.videoUrl || track.album?.videoCoverUrl
|
|
),
|
|
actionButtonsHTML: `
|
|
<button class="like-btn card-like-btn" data-action="toggle-like" data-type="track" title="Add to Liked">
|
|
${this.createHeartIcon(false)}
|
|
</button>
|
|
`,
|
|
isCompact,
|
|
});
|
|
}
|
|
|
|
async renderHomeEditorsPicks(forceRefresh = false, containerId = 'home-editors-picks') {
|
|
const picksContainer = document.getElementById(containerId);
|
|
|
|
if (picksContainer) {
|
|
if (forceRefresh) picksContainer.innerHTML = this.createSkeletonCards(6);
|
|
else if (picksContainer.children.length > 0 && !picksContainer.querySelector('.skeleton')) return;
|
|
|
|
try {
|
|
const response = await fetch('/editors-picks.json');
|
|
if (!response.ok) throw new Error("Failed to load editor's picks");
|
|
|
|
let items = await response.json();
|
|
|
|
if (!Array.isArray(items) || items.length === 0) {
|
|
picksContainer.innerHTML = createPlaceholder("No editor's picks available.");
|
|
return;
|
|
}
|
|
|
|
// Filter out blocked content
|
|
const { contentBlockingSettings } = await import('./storage.js');
|
|
items = items.filter((item) => {
|
|
if (item.type === 'track') {
|
|
return !contentBlockingSettings.shouldHideTrack(item);
|
|
} else if (item.type === 'album') {
|
|
return !contentBlockingSettings.shouldHideAlbum(item);
|
|
} else if (item.type === 'artist') {
|
|
return !contentBlockingSettings.shouldHideArtist(item);
|
|
}
|
|
return true;
|
|
});
|
|
|
|
// Shuffle items if enabled
|
|
if (homePageSettings.shouldShuffleEditorsPicks()) {
|
|
items = [...items].sort(() => Math.random() - 0.5);
|
|
}
|
|
|
|
// Use cached metadata or fetch details for each item
|
|
const cardsHTML = [];
|
|
const itemsToStore = [];
|
|
|
|
for (const item of items) {
|
|
try {
|
|
if (item.type === 'album') {
|
|
// Check if we have cached metadata
|
|
if (item.title && item.artist) {
|
|
// Use cached data directly
|
|
const album = {
|
|
id: item.id,
|
|
title: item.title,
|
|
artist: item.artist,
|
|
releaseDate: item.releaseDate,
|
|
cover: item.cover,
|
|
explicit: item.explicit,
|
|
audioQuality: item.audioQuality,
|
|
mediaMetadata: item.mediaMetadata,
|
|
type: 'ALBUM',
|
|
};
|
|
cardsHTML.push(this.createAlbumCardHTML(album));
|
|
itemsToStore.push({ el: null, data: album, type: 'album' });
|
|
} else {
|
|
// Fall back to API call for legacy format
|
|
const result = await this.api.getAlbum(item.id);
|
|
if (result && result.album) {
|
|
cardsHTML.push(this.createAlbumCardHTML(result.album));
|
|
itemsToStore.push({ el: null, data: result.album, type: 'album' });
|
|
}
|
|
}
|
|
} else if (item.type === 'artist') {
|
|
if (item.name && item.picture) {
|
|
// Use cached data directly
|
|
const artist = {
|
|
id: item.id,
|
|
name: item.name,
|
|
picture: item.picture,
|
|
};
|
|
cardsHTML.push(this.createArtistCardHTML(artist));
|
|
itemsToStore.push({ el: null, data: artist, type: 'artist' });
|
|
} else {
|
|
// Fall back to API call
|
|
const artist = await this.api.getArtist(item.id);
|
|
if (artist) {
|
|
cardsHTML.push(this.createArtistCardHTML(artist));
|
|
itemsToStore.push({ el: null, data: artist, type: 'artist' });
|
|
}
|
|
}
|
|
} else if (item.type === 'track') {
|
|
if (item.title && item.album) {
|
|
// Use cached data directly
|
|
const track = {
|
|
id: item.id,
|
|
title: item.title,
|
|
artist: item.artist,
|
|
album: item.album,
|
|
explicit: item.explicit,
|
|
audioQuality: item.audioQuality,
|
|
mediaMetadata: item.mediaMetadata,
|
|
duration: item.duration,
|
|
};
|
|
cardsHTML.push(this.createTrackCardHTML(track));
|
|
itemsToStore.push({ el: null, data: track, type: 'track' });
|
|
} else {
|
|
// Fall back to API call
|
|
const track = await this.api.getTrackMetadata(item.id);
|
|
if (track) {
|
|
cardsHTML.push(this.createTrackCardHTML(track));
|
|
itemsToStore.push({ el: null, data: track, type: 'track' });
|
|
}
|
|
}
|
|
} else if (item.type === 'user-playlist') {
|
|
if (item.id && item.name) {
|
|
const playlist = {
|
|
id: item.id,
|
|
name: item.name,
|
|
cover: item.cover,
|
|
tracks: item.tracks || [],
|
|
numberOfTracks: item.numberOfTracks || (item.tracks ? item.tracks.length : 0),
|
|
};
|
|
const subtitle = item.username ? `by ${item.username}` : null;
|
|
cardsHTML.push(this.createUserPlaylistCardHTML(playlist, subtitle));
|
|
itemsToStore.push({ el: null, data: playlist, type: 'user-playlist' });
|
|
} else {
|
|
const playlist = await syncManager.getPublicPlaylist(item.id);
|
|
if (playlist) {
|
|
const subtitle = item.username ? `by ${item.username}` : null;
|
|
cardsHTML.push(this.createUserPlaylistCardHTML(playlist, subtitle));
|
|
itemsToStore.push({ el: null, data: playlist, type: 'user-playlist' });
|
|
}
|
|
}
|
|
}
|
|
} catch (e) {
|
|
console.warn(`Failed to load ${item.type} ${item.id}:`, e);
|
|
}
|
|
}
|
|
|
|
if (cardsHTML.length > 0) {
|
|
picksContainer.innerHTML = cardsHTML.join('');
|
|
itemsToStore.forEach((item, _index) => {
|
|
const type = item.type;
|
|
const id = item.data.id;
|
|
const el = picksContainer.querySelector(`[data-${type}-id="${id}"]`);
|
|
if (el) {
|
|
trackDataStore.set(el, item.data);
|
|
this.updateLikeState(el, type, id);
|
|
}
|
|
});
|
|
} else {
|
|
picksContainer.innerHTML = createPlaceholder("No editor's picks available.");
|
|
}
|
|
} catch (e) {
|
|
console.error("Failed to load editor's picks:", e);
|
|
picksContainer.innerHTML = createPlaceholder("Failed to load editor's picks.");
|
|
}
|
|
}
|
|
}
|
|
|
|
async renderHomeArtists(forceRefresh = false, providedSeeds = null) {
|
|
const artistsContainer = document.getElementById('home-recommended-artists');
|
|
const section = artistsContainer?.closest('.content-section');
|
|
|
|
if (!homePageSettings.shouldShowRecommendedArtists()) {
|
|
if (section) section.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
if (section) section.style.display = '';
|
|
|
|
if (artistsContainer) {
|
|
if (forceRefresh || artistsContainer.children.length === 0) {
|
|
artistsContainer.innerHTML = this.createSkeletonCards(12, true);
|
|
} else if (!artistsContainer.querySelector('.skeleton')) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const seeds = providedSeeds || (await this.getSeeds());
|
|
const artistSeed = seeds.find((t) => (t.artist && t.artist.id) || (t.artists && t.artists.length > 0));
|
|
const artistId = artistSeed ? artistSeed.artist?.id || artistSeed.artists?.[0]?.id : null;
|
|
|
|
if (artistId) {
|
|
const similarArtists = await this.api.getSimilarArtists(artistId);
|
|
const filteredArtists = await this.filterUserContent(similarArtists, 'artist');
|
|
|
|
if (filteredArtists.length > 0) {
|
|
artistsContainer.innerHTML = filteredArtists
|
|
.slice(0, 12)
|
|
.map((a) => this.createArtistCardHTML(a))
|
|
.join('');
|
|
filteredArtists.slice(0, 12).forEach((a) => {
|
|
const el = artistsContainer.querySelector(`[data-artist-id="${a.id}"]`);
|
|
if (el) {
|
|
trackDataStore.set(el, a);
|
|
this.updateLikeState(el, 'artist', a.id);
|
|
}
|
|
});
|
|
} else {
|
|
artistsContainer.innerHTML = createPlaceholder('No artist recommendations found.');
|
|
}
|
|
} else {
|
|
artistsContainer.innerHTML = createPlaceholder(
|
|
'Listen to more music to get artist recommendations.'
|
|
);
|
|
}
|
|
} catch (e) {
|
|
console.error(e);
|
|
artistsContainer.innerHTML = createPlaceholder('Failed to load artist recommendations.');
|
|
}
|
|
}
|
|
}
|
|
|
|
renderHomeRecent() {
|
|
const recentContainer = document.getElementById('home-recent-mixed');
|
|
const section = recentContainer?.closest('.content-section');
|
|
|
|
if (!homePageSettings.shouldShowJumpBackIn()) {
|
|
if (section) section.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
if (section) section.style.display = '';
|
|
|
|
if (recentContainer) {
|
|
const recents = recentActivityManager.getRecents();
|
|
const items = [];
|
|
|
|
if (recents.albums) items.push(...recents.albums.slice(0, 4).map((i) => ({ ...i, _kind: 'album' })));
|
|
if (recents.playlists)
|
|
items.push(...recents.playlists.slice(0, 4).map((i) => ({ ...i, _kind: 'playlist' })));
|
|
if (recents.mixes) items.push(...recents.mixes.slice(0, 4).map((i) => ({ ...i, _kind: 'mix' })));
|
|
|
|
items.sort(() => Math.random() - 0.5);
|
|
const displayItems = items.slice(0, 6);
|
|
|
|
if (displayItems.length > 0) {
|
|
recentContainer.innerHTML = displayItems
|
|
.map((item) => {
|
|
if (item._kind === 'album') return this.createAlbumCardHTML(item);
|
|
if (item._kind === 'playlist') {
|
|
if (item.isUserPlaylist) return this.createUserPlaylistCardHTML(item);
|
|
return this.createPlaylistCardHTML(item);
|
|
}
|
|
if (item._kind === 'mix') return this.createMixCardHTML(item);
|
|
return '';
|
|
})
|
|
.join('');
|
|
|
|
displayItems.forEach((item) => {
|
|
let selector = '';
|
|
if (item._kind === 'album') selector = `[data-album-id="${item.id}"]`;
|
|
else if (item._kind === 'playlist')
|
|
selector = item.isUserPlaylist
|
|
? `[data-user-playlist-id="${item.id}"]`
|
|
: `[data-playlist-id="${item.uuid}"]`;
|
|
else if (item._kind === 'mix') selector = `[data-mix-id="${item.id}"]`;
|
|
|
|
const el = recentContainer.querySelector(selector);
|
|
if (el) {
|
|
trackDataStore.set(el, item);
|
|
if (item._kind === 'album') this.updateLikeState(el, 'album', item.id);
|
|
if (item._kind === 'playlist' && !item.isUserPlaylist)
|
|
this.updateLikeState(el, 'playlist', item.uuid);
|
|
if (item._kind === 'mix') this.updateLikeState(el, 'mix', item.id);
|
|
}
|
|
});
|
|
} else {
|
|
recentContainer.innerHTML = createPlaceholder('No recent items yet...');
|
|
}
|
|
}
|
|
}
|
|
|
|
async filterUserContent(items, type) {
|
|
if (!items || items.length === 0) return [];
|
|
|
|
// Import blocking settings
|
|
const { contentBlockingSettings } = await import('./storage.js');
|
|
|
|
// First filter out blocked content
|
|
if (type === 'track') {
|
|
items = contentBlockingSettings.filterTracks(items);
|
|
} else if (type === 'album') {
|
|
items = contentBlockingSettings.filterAlbums(items);
|
|
} else if (type === 'artist') {
|
|
items = contentBlockingSettings.filterArtists(items);
|
|
}
|
|
|
|
const favorites = await db.getFavorites(type);
|
|
const favoriteIds = new Set(favorites.map((i) => i.id));
|
|
|
|
const likedTracks = await db.getFavorites('track');
|
|
const playlists = await db.getPlaylists(true);
|
|
|
|
const userTracksMap = new Map();
|
|
likedTracks.forEach((t) => userTracksMap.set(t.id, t));
|
|
playlists.forEach((p) => {
|
|
if (p.tracks) p.tracks.forEach((t) => userTracksMap.set(t.id, t));
|
|
});
|
|
|
|
if (type === 'track') {
|
|
return items.filter((item) => !userTracksMap.has(item.id));
|
|
}
|
|
|
|
if (type === 'album') {
|
|
const albumTrackCounts = new Map();
|
|
for (const track of userTracksMap.values()) {
|
|
if (track.album && track.album.id) {
|
|
const aid = track.album.id;
|
|
albumTrackCounts.set(aid, (albumTrackCounts.get(aid) || 0) + 1);
|
|
}
|
|
}
|
|
|
|
return items.filter((item) => {
|
|
if (favoriteIds.has(item.id)) return false;
|
|
|
|
const userCount = albumTrackCounts.get(item.id) || 0;
|
|
const total = item.numberOfTracks;
|
|
|
|
if (total && total > 0) {
|
|
if (userCount / total > 0.5) return false;
|
|
}
|
|
|
|
return true;
|
|
});
|
|
}
|
|
|
|
return items.filter((item) => !favoriteIds.has(item.id));
|
|
}
|
|
|
|
async setupHlsVideo(video, result, fallbackImg) {
|
|
if (!result) return;
|
|
const url = typeof result === 'string' ? result : result.videoUrl || result.hlsUrl;
|
|
if (!url) return;
|
|
|
|
if (url.endsWith('.m3u8')) {
|
|
const Hls = (await import('hls.js')).default;
|
|
if (Hls.isSupported()) {
|
|
const hls = new Hls();
|
|
video._hls = hls;
|
|
hls.loadSource(url);
|
|
hls.attachMedia(video);
|
|
hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
|
video.play().catch((e) => {
|
|
console.warn('Autoplay failed, muted play might be required:', e);
|
|
video.muted = true;
|
|
video.play().catch(() => {});
|
|
});
|
|
});
|
|
hls.on(Hls.Events.ERROR, (event, data) => {
|
|
if (data.fatal) {
|
|
console.warn('HLS fatal error:', data.type);
|
|
video.replaceWith(fallbackImg);
|
|
hls.destroy();
|
|
}
|
|
});
|
|
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
|
|
// safari supports HLS natively
|
|
video.src = url;
|
|
} else {
|
|
video.replaceWith(fallbackImg);
|
|
}
|
|
} else {
|
|
// MP4
|
|
video.src = url;
|
|
video.play().catch((e) => {
|
|
console.warn('MP4 autoplay failed:', e);
|
|
video.muted = true;
|
|
video.play().catch(() => {});
|
|
});
|
|
}
|
|
video.onerror = async () => {
|
|
if (result.hlsUrl) {
|
|
// HLS fallback (for some reason alot of animated covers js dont work on MP4 lol)
|
|
await this.setupHlsVideo(video, { videoUrl: null, hlsUrl: result.hlsUrl }, fallbackImg);
|
|
} else {
|
|
video.replaceWith(fallbackImg);
|
|
}
|
|
};
|
|
}
|
|
|
|
async replaceVideoArtwork(container, type, id, result) {
|
|
const url = result.videoUrl || result.hlsUrl;
|
|
if (!url) return;
|
|
|
|
const card = container.querySelector(`[data-${type}-id="${id}"]`);
|
|
if (!card) return;
|
|
const img = card.querySelector('.card-image');
|
|
if (img && img.tagName !== 'VIDEO') {
|
|
const video = document.createElement('video');
|
|
video.autoplay = true;
|
|
video.loop = true;
|
|
video.muted = true;
|
|
video.playsInline = true;
|
|
video.preload = 'auto';
|
|
video.className = img.className;
|
|
video.id = img.id;
|
|
video.style.objectFit = 'cover';
|
|
|
|
video.poster = img.src;
|
|
|
|
video.onerror = async () => {
|
|
if (video.src === result.videoUrl && result.hlsUrl) {
|
|
await this.setupHlsVideo(video, { videoUrl: null, hlsUrl: result.hlsUrl }, img);
|
|
return;
|
|
}
|
|
video.replaceWith(img);
|
|
};
|
|
|
|
video.addEventListener(
|
|
'error',
|
|
async (e) => {
|
|
if (video.src === result.videoUrl && result.hlsUrl) {
|
|
await this.setupHlsVideo(video, { videoUrl: null, hlsUrl: result.hlsUrl }, img);
|
|
return;
|
|
}
|
|
console.warn('Video decoding error:', e);
|
|
video.replaceWith(img);
|
|
},
|
|
true
|
|
);
|
|
|
|
img.replaceWith(video);
|
|
|
|
await this.setupHlsVideo(video, result, img);
|
|
}
|
|
}
|
|
|
|
async renderSearchPage(query) {
|
|
this.showPage('search');
|
|
document.getElementById('search-results-title').textContent = `Search Results for "${query}"`;
|
|
|
|
const tracksContainer = document.getElementById('search-tracks-container');
|
|
const artistsContainer = document.getElementById('search-artists-container');
|
|
const albumsContainer = document.getElementById('search-albums-container');
|
|
const playlistsContainer = document.getElementById('search-playlists-container');
|
|
|
|
tracksContainer.innerHTML = this.createSkeletonTracks(8, true);
|
|
artistsContainer.innerHTML = this.createSkeletonCards(6, true);
|
|
albumsContainer.innerHTML = this.createSkeletonCards(6, false);
|
|
playlistsContainer.innerHTML = this.createSkeletonCards(6, false);
|
|
|
|
if (this.searchAbortController) {
|
|
this.searchAbortController.abort();
|
|
}
|
|
this.searchAbortController = new AbortController();
|
|
const signal = this.searchAbortController.signal;
|
|
|
|
try {
|
|
const provider = this.api.getCurrentProvider();
|
|
const [tracksResult, videosResult, artistsResult, albumsResult, playlistsResult] = await Promise.all([
|
|
this.api.searchTracks(query, { signal, provider }),
|
|
this.api.searchVideos(query, { signal, provider }),
|
|
this.api.searchArtists(query, { signal, provider }),
|
|
this.api.searchAlbums(query, { signal, provider }),
|
|
this.api.searchPlaylists(query, { signal, provider }),
|
|
]);
|
|
|
|
let finalTracks = tracksResult.items;
|
|
let finalVideos = videosResult.items || [];
|
|
let finalArtists = artistsResult.items;
|
|
let finalAlbums = albumsResult.items;
|
|
let finalPlaylists = playlistsResult.items;
|
|
|
|
if (finalArtists.length === 0 && finalTracks.length > 0) {
|
|
const artistMap = new Map();
|
|
finalTracks.forEach((track) => {
|
|
if (track.artist && !artistMap.has(track.artist.id)) {
|
|
artistMap.set(track.artist.id, track.artist);
|
|
}
|
|
if (track.artists) {
|
|
track.artists.forEach((artist) => {
|
|
if (!artistMap.has(artist.id)) {
|
|
artistMap.set(artist.id, artist);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
finalArtists = Array.from(artistMap.values());
|
|
}
|
|
|
|
if (finalAlbums.length === 0 && finalTracks.length > 0) {
|
|
const albumMap = new Map();
|
|
finalTracks.forEach((track) => {
|
|
if (track.album && !albumMap.has(track.album.id)) {
|
|
albumMap.set(track.album.id, track.album);
|
|
}
|
|
});
|
|
finalAlbums = Array.from(albumMap.values());
|
|
}
|
|
|
|
// Track search with results
|
|
const totalResults = finalTracks.length + finalArtists.length + finalAlbums.length + finalPlaylists.length;
|
|
trackSearch(query, totalResults);
|
|
|
|
if (finalTracks.length) {
|
|
this.renderListWithTracks(tracksContainer, finalTracks, true);
|
|
} else {
|
|
tracksContainer.innerHTML = createPlaceholder('No tracks found.');
|
|
}
|
|
|
|
const videosContainer = document.getElementById('search-videos-container');
|
|
if (videosContainer) {
|
|
videosContainer.innerHTML = finalVideos.length
|
|
? finalVideos.map((video) => this.createVideoCardHTML(video)).join('')
|
|
: createPlaceholder('No videos found.');
|
|
|
|
finalVideos.forEach((video) => {
|
|
const el = videosContainer.querySelector(`[data-video-id="${video.id}"]`);
|
|
if (el) {
|
|
trackDataStore.set(el, video);
|
|
el.addEventListener('click', (e) => {
|
|
if (e.target.closest('.card-play-btn') || e.target.closest('.card-image-container')) {
|
|
e.stopPropagation();
|
|
this.player.playVideo(video);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
artistsContainer.innerHTML = finalArtists.length
|
|
? finalArtists.map((artist) => this.createArtistCardHTML(artist)).join('')
|
|
: createPlaceholder('No artists found.');
|
|
|
|
finalArtists.forEach((artist) => {
|
|
const el = artistsContainer.querySelector(`[data-artist-id="${artist.id}"]`);
|
|
if (el) {
|
|
trackDataStore.set(el, artist);
|
|
this.updateLikeState(el, 'artist', artist.id);
|
|
}
|
|
});
|
|
|
|
albumsContainer.innerHTML = finalAlbums.length
|
|
? finalAlbums.map((album) => this.createAlbumCardHTML(album)).join('')
|
|
: createPlaceholder('No albums found.');
|
|
|
|
finalAlbums.forEach((album) => {
|
|
const el = albumsContainer.querySelector(`[data-album-id="${album.id}"]`);
|
|
if (el) {
|
|
trackDataStore.set(el, album);
|
|
this.updateLikeState(el, 'album', album.id);
|
|
}
|
|
});
|
|
|
|
playlistsContainer.innerHTML = finalPlaylists.length
|
|
? finalPlaylists.map((playlist) => this.createPlaylistCardHTML(playlist)).join('')
|
|
: createPlaceholder('No playlists found.');
|
|
|
|
finalPlaylists.forEach((playlist) => {
|
|
const el = playlistsContainer.querySelector(`[data-playlist-id="${playlist.uuid}"]`);
|
|
if (el) {
|
|
trackDataStore.set(el, playlist);
|
|
this.updateLikeState(el, 'playlist', playlist.uuid);
|
|
}
|
|
});
|
|
} catch (error) {
|
|
if (error.name === 'AbortError') return;
|
|
console.error('Search failed:', error);
|
|
const errorMsg = createPlaceholder(`Error during search. ${error.message}`);
|
|
tracksContainer.innerHTML = errorMsg;
|
|
artistsContainer.innerHTML = errorMsg;
|
|
albumsContainer.innerHTML = errorMsg;
|
|
playlistsContainer.innerHTML = errorMsg;
|
|
}
|
|
}
|
|
|
|
renderSearchHistory() {
|
|
const historyEl = document.getElementById('search-history');
|
|
if (!historyEl) return;
|
|
const history = JSON.parse(localStorage.getItem('search-history') || '[]');
|
|
if (history.length === 0) {
|
|
historyEl.style.display = 'none';
|
|
return;
|
|
}
|
|
historyEl.innerHTML =
|
|
history
|
|
.map(
|
|
(query) => `
|
|
<div class="search-history-item" data-query="${escapeHtml(query)}">
|
|
${SVG_CLOCK(16)}
|
|
<span class="query-text">${escapeHtml(query)}</span>
|
|
<span class="delete-history-btn" title="Remove from history">
|
|
${SVG_CLOSE(14)}
|
|
</span>
|
|
</div>
|
|
`
|
|
)
|
|
.join('') +
|
|
`
|
|
<div class="search-history-clear-all" id="clear-search-history">
|
|
Clear all history
|
|
</div>
|
|
`;
|
|
historyEl.style.display = 'block';
|
|
|
|
historyEl.querySelectorAll('.search-history-item').forEach((item) => {
|
|
item.addEventListener('click', (e) => {
|
|
if (e.target.closest('.delete-history-btn')) {
|
|
e.stopPropagation();
|
|
this.removeFromSearchHistory(item.dataset.query);
|
|
return;
|
|
}
|
|
const query = item.dataset.query;
|
|
const searchInput = document.getElementById('search-input');
|
|
if (searchInput) {
|
|
searchInput.value = query;
|
|
searchInput.dispatchEvent(new Event('input'));
|
|
historyEl.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
|
|
const clearBtn = document.getElementById('clear-search-history');
|
|
if (clearBtn) {
|
|
clearBtn.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
localStorage.removeItem('search-history');
|
|
this.renderSearchHistory();
|
|
});
|
|
}
|
|
}
|
|
|
|
removeFromSearchHistory(query) {
|
|
let history = JSON.parse(localStorage.getItem('search-history') || '[]');
|
|
history = history.filter((q) => q !== query);
|
|
localStorage.setItem('search-history', JSON.stringify(history));
|
|
this.renderSearchHistory();
|
|
}
|
|
|
|
addToSearchHistory(query) {
|
|
if (!query || query.trim().length === 0) return;
|
|
let history = JSON.parse(localStorage.getItem('search-history') || '[]');
|
|
history = history.filter((q) => q !== query);
|
|
history.unshift(query);
|
|
history = history.slice(0, 10);
|
|
localStorage.setItem('search-history', JSON.stringify(history));
|
|
}
|
|
|
|
async renderAlbumPage(albumId, provider = null) {
|
|
this.showPage('album');
|
|
|
|
const imageEl = document.getElementById('album-detail-image');
|
|
const titleEl = document.getElementById('album-detail-title');
|
|
const metaEl = document.getElementById('album-detail-meta');
|
|
const prodEl = document.getElementById('album-detail-producer');
|
|
const tracklistContainer = document.getElementById('album-detail-tracklist');
|
|
const playBtn = document.getElementById('play-album-btn');
|
|
if (playBtn) playBtn.innerHTML = `${SVG_PLAY(20)}<span>Play Album</span>`;
|
|
const dlBtn = document.getElementById('download-album-btn');
|
|
if (dlBtn) dlBtn.innerHTML = `${SVG_DOWNLOAD(20)}<span>Download Album</span>`;
|
|
const mixBtn = document.getElementById('album-mix-btn');
|
|
if (mixBtn) mixBtn.style.display = 'none';
|
|
|
|
imageEl.src = '';
|
|
imageEl.style.backgroundColor = 'var(--muted)';
|
|
titleEl.innerHTML = '<div class="skeleton" style="height: 48px; width: 300px; max-width: 90%;"></div>';
|
|
metaEl.innerHTML = '<div class="skeleton" style="height: 16px; width: 200px; max-width: 80%;"></div>';
|
|
prodEl.innerHTML = '<div class="skeleton" style="height: 16px; width: 200px; max-width: 80%;"></div>';
|
|
tracklistContainer.innerHTML = `
|
|
<div class="track-list-header">
|
|
<span style="width: 40px; text-align: center;">#</span>
|
|
<span>Title</span>
|
|
<span class="duration-header">Duration</span>
|
|
<span style="display: flex; justify-content: flex-end; opacity: 0.8;">Menu</span>
|
|
</div>
|
|
${this.createSkeletonTracks(10, false)}
|
|
`;
|
|
|
|
try {
|
|
const { album, tracks } = await this.api.getAlbum(albumId, provider);
|
|
this.currentAlbumId = albumId;
|
|
|
|
const videoCoverUrl = album.videoCoverUrl || null;
|
|
|
|
if (!videoCoverUrl && tracks.length > 0) {
|
|
const firstTrack = tracks[0];
|
|
this.api.getVideoArtwork(firstTrack.title, getTrackArtists(firstTrack)).then(async (result) => {
|
|
if (result && this.currentPage === 'album' && this.currentAlbumId === albumId) {
|
|
const url = result.videoUrl || result.hlsUrl;
|
|
if (!url) return;
|
|
album.videoCoverUrl = url;
|
|
const currentImageEl = document.getElementById('album-detail-image');
|
|
if (currentImageEl && currentImageEl.tagName !== 'VIDEO') {
|
|
const video = document.createElement('video');
|
|
video.autoplay = true;
|
|
video.loop = true;
|
|
video.muted = true;
|
|
video.playsInline = true;
|
|
video.preload = 'auto';
|
|
video.className = currentImageEl.className;
|
|
video.id = currentImageEl.id;
|
|
video.style.opacity = '1';
|
|
video.poster = currentImageEl.src;
|
|
|
|
await this.setupHlsVideo(video, result, currentImageEl);
|
|
currentImageEl.replaceWith(video);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
const coverUrl = videoCoverUrl || this.api.getCoverUrl(album.cover);
|
|
|
|
if (videoCoverUrl) {
|
|
if (imageEl.tagName !== 'VIDEO') {
|
|
const video = document.createElement('video');
|
|
video.autoplay = true;
|
|
video.loop = true;
|
|
video.muted = true;
|
|
video.playsInline = true;
|
|
video.preload = 'auto';
|
|
video.className = imageEl.className;
|
|
video.id = imageEl.id;
|
|
await this.setupHlsVideo(video, videoCoverUrl, imageEl);
|
|
imageEl.replaceWith(video);
|
|
} else {
|
|
await this.setupHlsVideo(imageEl, videoCoverUrl, null);
|
|
}
|
|
} else {
|
|
if (imageEl.tagName === 'VIDEO') {
|
|
const img = document.createElement('img');
|
|
img.src = coverUrl;
|
|
img.className = imageEl.className;
|
|
img.id = imageEl.id;
|
|
imageEl.replaceWith(img);
|
|
} else {
|
|
imageEl.src = coverUrl;
|
|
}
|
|
}
|
|
imageEl.style.backgroundColor = '';
|
|
|
|
// Set background and vibrant color
|
|
this.setPageBackground(coverUrl);
|
|
if (backgroundSettings.isEnabled() && album.cover) {
|
|
this.extractAndApplyColor(this.api.getCoverUrl(album.cover, '80'));
|
|
}
|
|
|
|
const explicitBadge = hasExplicitContent(album) ? this.createExplicitBadge() : '';
|
|
titleEl.innerHTML = `${escapeHtml(album.title)} ${explicitBadge}`;
|
|
|
|
this.adjustTitleFontSize(titleEl, album.title);
|
|
|
|
const totalDuration = calculateTotalDuration(tracks);
|
|
let dateDisplay = '';
|
|
if (album.releaseDate) {
|
|
const releaseDate = new Date(album.releaseDate);
|
|
if (!isNaN(releaseDate.getTime())) {
|
|
const year = releaseDate.getFullYear();
|
|
dateDisplay =
|
|
window.innerWidth > 768
|
|
? releaseDate.toLocaleDateString('en-US', {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric',
|
|
})
|
|
: year;
|
|
}
|
|
}
|
|
|
|
const firstCopyright = tracks.find((track) => track.copyright)?.copyright;
|
|
|
|
metaEl.innerHTML =
|
|
(dateDisplay ? `${dateDisplay} • ` : '') + `${tracks.length} tracks • ${formatDuration(totalDuration)}`;
|
|
|
|
prodEl.innerHTML =
|
|
`By <a href="/artist/${album.artist.id}">${album.artist.name}</a>` +
|
|
(firstCopyright ? ` • ${firstCopyright}` : '');
|
|
|
|
tracklistContainer.innerHTML = `
|
|
<div class="track-list-header">
|
|
<span style="width: 40px; text-align: center;">#</span>
|
|
<span>Title</span>
|
|
<span class="duration-header">Duration</span>
|
|
<span style="display: flex; justify-content: flex-end; opacity: 0.8;">Menu</span>
|
|
</div>
|
|
`;
|
|
|
|
tracks.sort((a, b) => {
|
|
const discA = a.volumeNumber ?? a.discNumber ?? 1;
|
|
const discB = b.volumeNumber ?? b.discNumber ?? 1;
|
|
if (discA !== discB) return discA - discB;
|
|
return a.trackNumber - b.trackNumber;
|
|
});
|
|
this.renderListWithTracks(tracklistContainer, tracks, false, true);
|
|
|
|
recentActivityManager.addAlbum(album);
|
|
|
|
// Update header like button
|
|
const albumLikeBtn = document.getElementById('like-album-btn');
|
|
if (albumLikeBtn) {
|
|
const isLiked = await db.isFavorite('album', album.id);
|
|
albumLikeBtn.innerHTML = this.createHeartIcon(isLiked);
|
|
albumLikeBtn.classList.toggle('active', isLiked);
|
|
}
|
|
|
|
// Store album data for menu button
|
|
const albumMenuBtn = document.getElementById('album-menu-btn');
|
|
if (albumMenuBtn) {
|
|
albumMenuBtn.dataset.id = album.id;
|
|
trackDataStore.set(albumMenuBtn, album);
|
|
}
|
|
|
|
document.title = `${album.title} - ${album.artist.name}`;
|
|
|
|
// "More from Artist" and Related Sections
|
|
const moreAlbumsSection = document.getElementById('album-section-more-albums');
|
|
const moreAlbumsContainer = document.getElementById('album-detail-more-albums');
|
|
const moreAlbumsTitle = document.getElementById('album-title-more-albums');
|
|
|
|
const epsSection = document.getElementById('album-section-eps');
|
|
const epsContainer = document.getElementById('album-detail-eps');
|
|
const epsTitle = document.getElementById('album-title-eps');
|
|
|
|
const similarArtistsSection = document.getElementById('album-section-similar-artists');
|
|
const similarArtistsContainer = document.getElementById('album-detail-similar-artists');
|
|
|
|
const similarAlbumsSection = document.getElementById('album-section-similar-albums');
|
|
const similarAlbumsContainer = document.getElementById('album-detail-similar-albums');
|
|
|
|
// Hide all initially
|
|
[moreAlbumsSection, epsSection, similarArtistsSection, similarAlbumsSection].forEach((el) => {
|
|
if (el) el.style.display = 'none';
|
|
});
|
|
|
|
try {
|
|
const artistData = await this.api.getArtist(album.artist.id);
|
|
|
|
// Add Mix/Radio Button to header
|
|
const mixBtn = document.getElementById('album-mix-btn');
|
|
if (mixBtn && artistData.mixes && artistData.mixes.ARTIST_MIX) {
|
|
mixBtn.style.display = 'flex';
|
|
mixBtn.onclick = () => navigate(`/mix/${artistData.mixes.ARTIST_MIX}`);
|
|
}
|
|
|
|
const renderSection = (items, container, section, titleEl, titleText) => {
|
|
if (!container || !section) return;
|
|
|
|
const filtered = (items || [])
|
|
.filter((a) => a.id != album.id)
|
|
.filter(
|
|
(a, index, self) => index === self.findIndex((t) => t.title === a.title) // Dedup by title
|
|
)
|
|
.slice(0, 12);
|
|
|
|
if (filtered.length === 0) return;
|
|
|
|
container.innerHTML = filtered.map((a) => this.createAlbumCardHTML(a)).join('');
|
|
if (titleEl && titleText) titleEl.textContent = titleText;
|
|
section.style.display = 'block';
|
|
|
|
filtered.forEach((a) => {
|
|
const el = container.querySelector(`[data-album-id="${a.id}"]`);
|
|
if (el) {
|
|
trackDataStore.set(el, a);
|
|
this.updateLikeState(el, 'album', a.id);
|
|
}
|
|
});
|
|
};
|
|
|
|
renderSection(
|
|
artistData.albums,
|
|
moreAlbumsContainer,
|
|
moreAlbumsSection,
|
|
moreAlbumsTitle,
|
|
`More albums from ${album.artist.name}`
|
|
);
|
|
renderSection(
|
|
artistData.eps,
|
|
epsContainer,
|
|
epsSection,
|
|
epsTitle,
|
|
`EPs and Singles from ${album.artist.name}`
|
|
);
|
|
|
|
// Similar Artists
|
|
this.api
|
|
.getSimilarArtists(album.artist.id)
|
|
.then(async (similar) => {
|
|
// Filter out blocked artists
|
|
const { contentBlockingSettings } = await import('./storage.js');
|
|
const filteredSimilar = contentBlockingSettings.filterArtists(similar || []);
|
|
|
|
if (filteredSimilar.length > 0 && similarArtistsContainer && similarArtistsSection) {
|
|
similarArtistsContainer.innerHTML = filteredSimilar
|
|
.map((a) => this.createArtistCardHTML(a))
|
|
.join('');
|
|
similarArtistsSection.style.display = 'block';
|
|
|
|
filteredSimilar.forEach((a) => {
|
|
const el = similarArtistsContainer.querySelector(`[data-artist-id="${a.id}"]`);
|
|
if (el) {
|
|
trackDataStore.set(el, a);
|
|
this.updateLikeState(el, 'artist', a.id);
|
|
}
|
|
});
|
|
}
|
|
})
|
|
.catch((e) => console.warn('Failed to load similar artists:', e));
|
|
|
|
// Similar Albums
|
|
this.api
|
|
.getSimilarAlbums(albumId)
|
|
.then(async (similar) => {
|
|
// Filter out blocked albums
|
|
const { contentBlockingSettings } = await import('./storage.js');
|
|
const filteredSimilar = contentBlockingSettings.filterAlbums(similar || []);
|
|
|
|
if (filteredSimilar.length > 0 && similarAlbumsContainer && similarAlbumsSection) {
|
|
similarAlbumsContainer.innerHTML = filteredSimilar
|
|
.map((a) => this.createAlbumCardHTML(a))
|
|
.join('');
|
|
similarAlbumsSection.style.display = 'block';
|
|
|
|
filteredSimilar.forEach((a) => {
|
|
const el = similarAlbumsContainer.querySelector(`[data-album-id="${a.id}"]`);
|
|
if (el) {
|
|
trackDataStore.set(el, a);
|
|
this.updateLikeState(el, 'album', a.id);
|
|
}
|
|
});
|
|
}
|
|
})
|
|
.catch((e) => console.warn('Failed to load similar albums:', e));
|
|
} catch (err) {
|
|
console.warn('Failed to load "More from artist":', err);
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to load album:', error);
|
|
tracklistContainer.innerHTML = createPlaceholder(`Could not load album details. ${error.message}`);
|
|
}
|
|
}
|
|
|
|
async loadRecommendedSongsForPlaylist(tracks, forceRefresh = false) {
|
|
const recommendedSection = document.getElementById('playlist-section-recommended');
|
|
const recommendedContainer = document.getElementById('playlist-detail-recommended');
|
|
|
|
if (!recommendedSection || !recommendedContainer) {
|
|
console.warn('Recommended songs section not found in DOM');
|
|
return;
|
|
}
|
|
|
|
if (forceRefresh) {
|
|
recommendedContainer.innerHTML = this.createSkeletonTracks(5, true);
|
|
}
|
|
|
|
try {
|
|
let recommendedTracks = await this.api.getRecommendedTracksForPlaylist(tracks, 20, {
|
|
refresh: forceRefresh,
|
|
});
|
|
|
|
// Filter out blocked tracks
|
|
const { contentBlockingSettings } = await import('./storage.js');
|
|
recommendedTracks = contentBlockingSettings.filterTracks(recommendedTracks);
|
|
|
|
if (recommendedTracks.length > 0) {
|
|
this.renderListWithTracks(recommendedContainer, recommendedTracks, true);
|
|
|
|
const trackItems = recommendedContainer.querySelectorAll('.track-item');
|
|
trackItems.forEach((item) => {
|
|
const actionsDiv = item.querySelector('.track-item-actions');
|
|
if (actionsDiv) {
|
|
const addToPlaylistBtn = document.createElement('button');
|
|
addToPlaylistBtn.className = 'track-action-btn add-to-playlist-btn';
|
|
addToPlaylistBtn.title = 'Add to this playlist';
|
|
addToPlaylistBtn.innerHTML = SVG_MINUS(20);
|
|
addToPlaylistBtn.onclick = async (e) => {
|
|
e.stopPropagation();
|
|
const trackData = trackDataStore.get(item);
|
|
if (trackData) {
|
|
try {
|
|
const path = window.location.pathname;
|
|
const playlistMatch = path.match(/\/userplaylist\/([^/]+)/);
|
|
if (playlistMatch) {
|
|
const playlistId = playlistMatch[1];
|
|
await db.addTrackToPlaylist(playlistId, trackData);
|
|
const updatedPlaylist = await db.getPlaylist(playlistId);
|
|
syncManager.syncUserPlaylist(updatedPlaylist, 'update');
|
|
|
|
const tracklistContainer = document.getElementById('playlist-detail-tracklist');
|
|
if (tracklistContainer && updatedPlaylist.tracks) {
|
|
tracklistContainer.innerHTML = `
|
|
<div class="track-list-header">
|
|
<span style="width: 40px; text-align: center;">#</span>
|
|
<span>Title</span>
|
|
<span class="duration-header">Duration</span>
|
|
<span style="display: flex; justify-content: flex-end; opacity: 0.8;">Menu</span>
|
|
</div> `;
|
|
this.renderListWithTracks(tracklistContainer, updatedPlaylist.tracks, true);
|
|
|
|
if (document.querySelector('.remove-from-playlist-btn')) {
|
|
this.enableTrackReordering(
|
|
tracklistContainer,
|
|
updatedPlaylist.tracks,
|
|
playlistId,
|
|
syncManager
|
|
);
|
|
}
|
|
|
|
// Update the playlist metadata
|
|
const metaEl = document.getElementById('playlist-detail-meta');
|
|
if (metaEl) {
|
|
const totalDuration = calculateTotalDuration(updatedPlaylist.tracks);
|
|
metaEl.textContent = `${updatedPlaylist.tracks.length} tracks • ${formatDuration(totalDuration)}`;
|
|
}
|
|
}
|
|
|
|
showNotification(`Added "${trackData.title}" to playlist`);
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to add track to playlist:', error);
|
|
showNotification('Failed to add track to playlist');
|
|
}
|
|
}
|
|
};
|
|
|
|
const menuBtn = actionsDiv.querySelector('.track-menu-btn');
|
|
if (menuBtn) {
|
|
actionsDiv.insertBefore(addToPlaylistBtn, menuBtn);
|
|
} else {
|
|
actionsDiv.appendChild(addToPlaylistBtn);
|
|
}
|
|
}
|
|
});
|
|
|
|
recommendedSection.style.display = 'block';
|
|
} else {
|
|
recommendedSection.style.display = 'none';
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to load recommended songs:', error);
|
|
recommendedSection.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
async renderPlaylistPage(playlistId, source = null, _provider = null) {
|
|
this.showPage('playlist');
|
|
|
|
// Reset search input for new playlist
|
|
const searchInput = document.getElementById('track-list-search-input');
|
|
if (searchInput) searchInput.value = '';
|
|
|
|
const imageEl = document.getElementById('playlist-detail-image');
|
|
const collageEl = document.getElementById('playlist-detail-collage');
|
|
const titleEl = document.getElementById('playlist-detail-title');
|
|
const metaEl = document.getElementById('playlist-detail-meta');
|
|
const descEl = document.getElementById('playlist-detail-description');
|
|
const tracklistContainer = document.getElementById('playlist-detail-tracklist');
|
|
const playBtn = document.getElementById('play-playlist-btn');
|
|
if (playBtn) playBtn.innerHTML = `${SVG_PLAY(20)}<span>Play</span>`;
|
|
const dlBtn = document.getElementById('download-playlist-btn');
|
|
if (dlBtn) dlBtn.innerHTML = `${SVG_DOWNLOAD(20)}<span>Download</span>`;
|
|
const addPlaylistBtn = document.getElementById('add-playlist-to-playlist-btn');
|
|
|
|
imageEl.src = '';
|
|
imageEl.style.backgroundColor = 'var(--muted)';
|
|
titleEl.innerHTML = '<div class="skeleton" style="height: 48px; width: 300px; max-width: 90%;"></div>';
|
|
metaEl.innerHTML = '<div class="skeleton" style="height: 16px; width: 200px; max-width: 80%;"></div>';
|
|
descEl.innerHTML = '<div class="skeleton" style="height: 16px; width: 100%;"></div>';
|
|
tracklistContainer.innerHTML = `
|
|
<div class="track-list-header">
|
|
<span style="width: 40px; text-align: center;">#</span>
|
|
<span>Title</span>
|
|
<span class="duration-header">Duration</span>
|
|
<span style="display: flex; justify-content: flex-end; opacity: 0.8;">Menu</span>
|
|
</div>
|
|
${this.createSkeletonTracks(10, true)}
|
|
`;
|
|
|
|
try {
|
|
// Check if it's a user playlist (UUID format)
|
|
const isUUID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(playlistId);
|
|
|
|
let playlistData = null;
|
|
let ownedPlaylist = null;
|
|
let currentSort = 'custom';
|
|
|
|
// Priority:
|
|
// 1. If source is 'user', check DB/Sync.
|
|
// 2. If source is 'api', check API.
|
|
// 3. If no source, check DB if UUID, then API.
|
|
|
|
if (source === 'user' || (!source && isUUID)) {
|
|
ownedPlaylist = await db.getPlaylist(playlistId);
|
|
playlistData = ownedPlaylist;
|
|
|
|
// If not in local DB, check if it's a public Pocketbase playlist
|
|
if (!playlistData) {
|
|
try {
|
|
playlistData = await syncManager.getPublicPlaylist(playlistId);
|
|
} catch (e) {
|
|
console.warn('Failed to check public pocketbase playlists:', e);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (playlistData) {
|
|
// ... (rest of the logic)
|
|
if (addPlaylistBtn) addPlaylistBtn.style.display = 'none';
|
|
|
|
if (playlistData.cover) {
|
|
imageEl.src = playlistData.cover;
|
|
imageEl.style.display = 'block';
|
|
if (collageEl) collageEl.style.display = 'none';
|
|
this.setPageBackground(playlistData.cover);
|
|
this.extractAndApplyColor(playlistData.cover);
|
|
} else {
|
|
const tracksWithCovers = (playlistData.tracks || []).filter((t) => t.album && t.album.cover);
|
|
const uniqueCovers = [];
|
|
const seen = new Set();
|
|
for (const t of tracksWithCovers) {
|
|
if (!seen.has(t.album.cover)) {
|
|
seen.add(t.album.cover);
|
|
uniqueCovers.push(t.album.cover);
|
|
if (uniqueCovers.length >= 4) break;
|
|
}
|
|
}
|
|
|
|
if (uniqueCovers.length > 0 && collageEl) {
|
|
imageEl.style.display = 'none';
|
|
collageEl.style.display = 'grid';
|
|
collageEl.innerHTML = '';
|
|
const imagesToRender = [];
|
|
for (let i = 0; i < 4; i++) {
|
|
imagesToRender.push(uniqueCovers[i % uniqueCovers.length]);
|
|
}
|
|
imagesToRender.forEach((cover) => {
|
|
const img = document.createElement('img');
|
|
img.src = this.api.getCoverUrl(cover);
|
|
collageEl.appendChild(img);
|
|
});
|
|
} else {
|
|
imageEl.src = '/assets/appicon.png';
|
|
imageEl.style.display = 'block';
|
|
if (collageEl) collageEl.style.display = 'none';
|
|
}
|
|
this.setPageBackground(null);
|
|
this.resetVibrantColor();
|
|
}
|
|
|
|
titleEl.textContent = playlistData.name || playlistData.title;
|
|
this.adjustTitleFontSize(titleEl, titleEl.textContent);
|
|
|
|
const tracks = playlistData.tracks || [];
|
|
const totalDuration = calculateTotalDuration(tracks);
|
|
|
|
metaEl.textContent = `${tracks.length} tracks • ${formatDuration(totalDuration)}`;
|
|
descEl.textContent = playlistData.description || '';
|
|
|
|
const originalTracks = [...tracks];
|
|
const savedSort = localStorage.getItem(`playlist-sort-${playlistId}`);
|
|
currentSort = savedSort || 'custom';
|
|
let currentTracks = sortTracks(originalTracks, currentSort);
|
|
|
|
const renderTracks = () => {
|
|
// Re-fetch container each time because enableTrackReordering clones it
|
|
const container = document.getElementById('playlist-detail-tracklist');
|
|
container.innerHTML = `
|
|
<div class="track-list-header">
|
|
<span style="width: 40px; text-align: center;">#</span>
|
|
<span>Title</span>
|
|
<span class="duration-header">Duration</span>
|
|
<span style="display: flex; justify-content: flex-end; opacity: 0.8;">Menu</span>
|
|
</div>
|
|
`;
|
|
this.renderListWithTracks(container, currentTracks, true, true);
|
|
|
|
// Add remove buttons and enable reordering ONLY IF OWNED
|
|
if (ownedPlaylist) {
|
|
const trackItems = container.querySelectorAll('.track-item');
|
|
trackItems.forEach((item, index) => {
|
|
const actionsDiv = item.querySelector('.track-item-actions');
|
|
const removeBtn = document.createElement('button');
|
|
removeBtn.className = 'track-action-btn remove-from-playlist-btn';
|
|
removeBtn.title = 'Remove from playlist';
|
|
removeBtn.innerHTML = SVG_BIN(20);
|
|
removeBtn.dataset.trackId = currentTracks[index].id;
|
|
removeBtn.dataset.type = currentTracks[index].type || 'track';
|
|
|
|
const menuBtn = actionsDiv.querySelector('.track-menu-btn');
|
|
actionsDiv.insertBefore(removeBtn, menuBtn);
|
|
});
|
|
|
|
// Always add is-editable class for owned playlists to fix layout
|
|
// This expands the grid columns to accommodate the remove button
|
|
container.classList.add('is-editable');
|
|
|
|
// Only enable drag-and-drop reordering in custom sort mode
|
|
if (currentSort === 'custom') {
|
|
this.enableTrackReordering(container, currentTracks, playlistId, syncManager);
|
|
}
|
|
} else {
|
|
container.classList.remove('is-editable');
|
|
}
|
|
};
|
|
|
|
const applySort = (sortType) => {
|
|
currentSort = sortType;
|
|
localStorage.setItem(`playlist-sort-${playlistId}`, sortType);
|
|
currentTracks = sortTracks(originalTracks, sortType);
|
|
renderTracks();
|
|
};
|
|
|
|
renderTracks();
|
|
|
|
// Update header like button - hide for user playlists
|
|
const playlistLikeBtn = document.getElementById('like-playlist-btn');
|
|
if (playlistLikeBtn) {
|
|
playlistLikeBtn.style.display = 'none';
|
|
}
|
|
|
|
// Load recommended songs thingy
|
|
if (ownedPlaylist) {
|
|
this.loadRecommendedSongsForPlaylist(tracks);
|
|
|
|
const refreshBtn = document.getElementById('refresh-recommended-songs-btn');
|
|
if (refreshBtn) {
|
|
refreshBtn.onclick = async () => {
|
|
const icon = refreshBtn.querySelector('svg');
|
|
if (icon) icon.style.animation = 'spin 1s linear infinite';
|
|
refreshBtn.disabled = true;
|
|
await this.loadRecommendedSongsForPlaylist(tracks, true);
|
|
if (icon) icon.style.animation = '';
|
|
refreshBtn.disabled = false;
|
|
};
|
|
}
|
|
}
|
|
|
|
// Render Actions (Sort, Shuffle, Edit, Delete, Share)
|
|
this.updatePlaylistHeaderActions(
|
|
playlistData,
|
|
!!ownedPlaylist,
|
|
currentTracks,
|
|
false,
|
|
applySort,
|
|
() => currentSort
|
|
);
|
|
|
|
playBtn.onclick = () => {
|
|
this.player.setQueue(currentTracks, 0);
|
|
this.player.playTrackFromQueue();
|
|
};
|
|
|
|
const uniqueCovers = [];
|
|
const seenCovers = new Set();
|
|
const trackList = playlistData.tracks || [];
|
|
for (const track of trackList) {
|
|
const cover = track.album?.cover;
|
|
if (cover && !seenCovers.has(cover)) {
|
|
seenCovers.add(cover);
|
|
uniqueCovers.push(cover);
|
|
if (uniqueCovers.length >= 4) break;
|
|
}
|
|
}
|
|
|
|
recentActivityManager.addPlaylist({
|
|
id: playlistData.id || playlistData.uuid,
|
|
name: playlistData.name || playlistData.title,
|
|
title: playlistData.title || playlistData.name,
|
|
uuid: playlistData.uuid || playlistData.id,
|
|
cover: playlistData.cover,
|
|
images: uniqueCovers,
|
|
numberOfTracks: playlistData.tracks ? playlistData.tracks.length : 0,
|
|
isUserPlaylist: true,
|
|
});
|
|
document.title = `${playlistData.name || playlistData.title} - Monochrome`;
|
|
|
|
// Setup playlist search
|
|
this.setupTracklistSearch();
|
|
} else {
|
|
if (addPlaylistBtn) addPlaylistBtn.style.display = 'flex';
|
|
|
|
// If source was explicitly 'user' and we didn't find it, fail.
|
|
if (source === 'user') {
|
|
throw new Error('Playlist not found. If this is a custom playlist, make sure it is set to Public.');
|
|
}
|
|
|
|
// Render API playlist
|
|
let apiResult = await this.api.getPlaylist(playlistId);
|
|
|
|
const { playlist, tracks } = apiResult;
|
|
|
|
const imageId = playlist.squareImage || playlist.image;
|
|
if (imageId) {
|
|
imageEl.src = this.api.getCoverUrl(imageId, '1080');
|
|
this.setPageBackground(imageEl.src);
|
|
|
|
this.extractAndApplyColor(this.api.getCoverUrl(imageId, '160'));
|
|
} else {
|
|
imageEl.src = '/assets/appicon.png';
|
|
this.setPageBackground(null);
|
|
this.resetVibrantColor();
|
|
}
|
|
|
|
titleEl.textContent = playlist.title;
|
|
this.adjustTitleFontSize(titleEl, playlist.title);
|
|
|
|
const totalDuration = calculateTotalDuration(tracks);
|
|
|
|
metaEl.textContent = `${playlist.numberOfTracks} tracks • ${formatDuration(totalDuration)}`;
|
|
descEl.textContent = playlist.description || '';
|
|
|
|
const originalTracks = [...tracks];
|
|
const savedSort = localStorage.getItem(`playlist-sort-${playlistId}`);
|
|
let currentSort = savedSort || 'custom';
|
|
let currentTracks = sortTracks(originalTracks, currentSort);
|
|
|
|
const renderTracks = () => {
|
|
tracklistContainer.innerHTML = `
|
|
<div class="track-list-header">
|
|
<span style="width: 40px; text-align: center;">#</span>
|
|
<span>Title</span>
|
|
<span class="duration-header">Duration</span>
|
|
<span style="display: flex; justify-content: flex-end; opacity: 0.8;">Menu</span>
|
|
</div>
|
|
`;
|
|
this.renderListWithTracks(tracklistContainer, currentTracks, true, true);
|
|
};
|
|
|
|
const applySort = (sortType) => {
|
|
currentSort = sortType;
|
|
localStorage.setItem(`playlist-sort-${playlistId}`, sortType);
|
|
currentTracks = sortTracks(originalTracks, sortType);
|
|
renderTracks();
|
|
};
|
|
|
|
renderTracks();
|
|
|
|
playBtn.onclick = () => {
|
|
this.player.setQueue(currentTracks, 0);
|
|
this.player.playTrackFromQueue();
|
|
};
|
|
|
|
// Update header like button
|
|
const playlistLikeBtn = document.getElementById('like-playlist-btn');
|
|
if (playlistLikeBtn) {
|
|
const isLiked = await db.isFavorite('playlist', playlist.uuid);
|
|
playlistLikeBtn.innerHTML = this.createHeartIcon(isLiked);
|
|
playlistLikeBtn.classList.toggle('active', isLiked);
|
|
playlistLikeBtn.style.display = 'flex';
|
|
}
|
|
|
|
// Show/hide Delete button
|
|
const deleteBtn = document.getElementById('delete-playlist-btn');
|
|
if (deleteBtn) {
|
|
deleteBtn.style.display = 'none';
|
|
}
|
|
|
|
// Hide recommended songs section for tidal playlists
|
|
const recommendedSection = document.getElementById('playlist-section-recommended');
|
|
if (recommendedSection) {
|
|
recommendedSection.style.display = 'none';
|
|
}
|
|
|
|
// Render Actions (Shuffle + Sort + Share)
|
|
this.updatePlaylistHeaderActions(playlist, false, currentTracks, false, applySort, () => currentSort);
|
|
|
|
recentActivityManager.addPlaylist(playlist);
|
|
document.title = playlist.title || 'Artist Mix';
|
|
}
|
|
|
|
// Setup playlist search
|
|
this.setupTracklistSearch();
|
|
} catch (error) {
|
|
console.error('Failed to load playlist:', error);
|
|
tracklistContainer.innerHTML = createPlaceholder(`Could not load playlist details. ${error.message}`);
|
|
}
|
|
}
|
|
|
|
async renderFolderPage(folderId) {
|
|
this.showPage('folder');
|
|
const imageEl = document.getElementById('folder-detail-image');
|
|
const titleEl = document.getElementById('folder-detail-title');
|
|
const metaEl = document.getElementById('folder-detail-meta');
|
|
const container = document.getElementById('folder-detail-container');
|
|
|
|
imageEl.src = '';
|
|
imageEl.style.backgroundColor = 'var(--muted)';
|
|
titleEl.innerHTML = '<div class="skeleton" style="height: 48px; width: 300px; max-width: 90%;"></div>';
|
|
container.innerHTML = this.createSkeletonCards(4, false);
|
|
|
|
try {
|
|
const folder = await db.getFolder(folderId);
|
|
if (!folder) throw new Error('Folder not found');
|
|
|
|
imageEl.src = folder.cover || '/assets/folder.png';
|
|
imageEl.onerror = () => {
|
|
imageEl.src = '/assets/folder.png';
|
|
};
|
|
imageEl.style.backgroundColor = '';
|
|
|
|
titleEl.textContent = folder.name;
|
|
metaEl.textContent = `Created ${new Date(folder.createdAt).toLocaleDateString()}`;
|
|
|
|
this.setPageBackground(null);
|
|
this.resetVibrantColor();
|
|
|
|
if (folder.playlists?.length > 0) {
|
|
const playlistPromises = folder.playlists.map((id) => db.getPlaylist(id));
|
|
const playlists = (await Promise.all(playlistPromises)).filter(Boolean);
|
|
if (playlists.length > 0) {
|
|
container.innerHTML = playlists.map((p) => this.createUserPlaylistCardHTML(p)).join('');
|
|
playlists.forEach((playlist) => {
|
|
const el = container.querySelector(`[data-user-playlist-id="${playlist.id}"]`);
|
|
if (el) trackDataStore.set(el, playlist);
|
|
});
|
|
} else {
|
|
container.innerHTML = createPlaceholder(
|
|
'This folder is empty. Some playlists may have been deleted.'
|
|
);
|
|
}
|
|
} else {
|
|
container.innerHTML = createPlaceholder('This folder is empty. Drag a playlist here to add it.');
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to load folder:', error);
|
|
container.innerHTML = createPlaceholder('Folder not found.');
|
|
}
|
|
}
|
|
|
|
async renderMixPage(mixId, provider = null) {
|
|
this.showPage('mix');
|
|
|
|
const imageEl = document.getElementById('mix-detail-image');
|
|
const titleEl = document.getElementById('mix-detail-title');
|
|
const metaEl = document.getElementById('mix-detail-meta');
|
|
const descEl = document.getElementById('mix-detail-description');
|
|
const tracklistContainer = document.getElementById('mix-detail-tracklist');
|
|
const playBtn = document.getElementById('play-mix-btn');
|
|
if (playBtn) playBtn.innerHTML = `${SVG_PLAY(20)}<span>Play</span>`;
|
|
const dlBtn = document.getElementById('download-mix-btn');
|
|
if (dlBtn) dlBtn.innerHTML = `${SVG_DOWNLOAD(20)}<span>Download</span>`;
|
|
|
|
// Skeleton loading
|
|
imageEl.src = '';
|
|
imageEl.style.backgroundColor = 'var(--muted)';
|
|
titleEl.innerHTML = '<div class="skeleton" style="height: 48px; width: 300px; max-width: 90%;"></div>';
|
|
metaEl.innerHTML = '<div class="skeleton" style="height: 16px; width: 200px; max-width: 80%;"></div>';
|
|
descEl.innerHTML = '<div class="skeleton" style="height: 16px; width: 100%;"></div>';
|
|
tracklistContainer.innerHTML = `
|
|
<div class="track-list-header">
|
|
<span style="width: 40px; text-align: center;">#</span>
|
|
<span>Title</span>
|
|
<span class="duration-header">Duration</span>
|
|
<span style="display: flex; justify-content: flex-end; opacity: 0.8;">Menu</span>
|
|
</div>
|
|
${this.createSkeletonTracks(10, true)}
|
|
`;
|
|
|
|
try {
|
|
const { mix, tracks } = await this.api.getMix(mixId, provider);
|
|
this.currentMixId = mixId;
|
|
|
|
if (mix.cover) {
|
|
imageEl.src = mix.cover;
|
|
this.setPageBackground(mix.cover);
|
|
this.extractAndApplyColor(mix.cover);
|
|
} else {
|
|
// Try to get cover from first track album
|
|
if (tracks.length > 0 && tracks[0].album?.cover) {
|
|
const firstTrack = tracks[0];
|
|
let videoCoverUrl =
|
|
firstTrack.videoUrl || firstTrack.videoCoverUrl || firstTrack.album?.videoCoverUrl || null;
|
|
|
|
if (!videoCoverUrl && (firstTrack.album || firstTrack.type === 'video')) {
|
|
const fetchArtwork = () => {
|
|
this.api
|
|
.getVideoArtwork(firstTrack.title, getTrackArtists(firstTrack))
|
|
.then(async (result) => {
|
|
if (result && this.currentPage === 'mix' && this.currentMixId === mixId) {
|
|
const url = result.videoUrl || result.hlsUrl;
|
|
if (!url) return;
|
|
firstTrack.album = firstTrack.album || {};
|
|
firstTrack.album.videoCoverUrl = url;
|
|
const currentImageEl = document.getElementById('mix-detail-image');
|
|
if (currentImageEl && currentImageEl.tagName !== 'VIDEO') {
|
|
const video = document.createElement('video');
|
|
video.autoplay = true;
|
|
video.loop = true;
|
|
video.muted = true;
|
|
video.playsInline = true;
|
|
video.preload = 'auto';
|
|
video.className = currentImageEl.className;
|
|
video.id = currentImageEl.id;
|
|
video.style.opacity = '1';
|
|
video.poster = currentImageEl.src;
|
|
|
|
await this.setupHlsVideo(video, result, currentImageEl);
|
|
currentImageEl.replaceWith(video);
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
if (firstTrack.type === 'video') {
|
|
this.api
|
|
.getVideoStreamUrl(firstTrack.id)
|
|
.then((url) => {
|
|
if (url) {
|
|
firstTrack.videoUrl = url;
|
|
this.renderMixPage(mixId);
|
|
} else {
|
|
fetchArtwork();
|
|
}
|
|
})
|
|
.catch(fetchArtwork);
|
|
} else {
|
|
fetchArtwork();
|
|
}
|
|
}
|
|
|
|
const coverUrl = videoCoverUrl || this.api.getCoverUrl(firstTrack.album.cover);
|
|
|
|
if (videoCoverUrl) {
|
|
if (imageEl.tagName === 'IMG') {
|
|
const video = document.createElement('video');
|
|
video.src = videoCoverUrl;
|
|
video.autoplay = true;
|
|
video.loop = true;
|
|
video.muted = true;
|
|
video.playsInline = true;
|
|
video.className = imageEl.className;
|
|
video.id = imageEl.id;
|
|
imageEl.replaceWith(video);
|
|
} else {
|
|
imageEl.src = videoCoverUrl;
|
|
}
|
|
} else {
|
|
if (imageEl.tagName === 'VIDEO') {
|
|
const img = document.createElement('img');
|
|
img.src = coverUrl;
|
|
img.className = imageEl.className;
|
|
img.id = imageEl.id;
|
|
imageEl.replaceWith(img);
|
|
} else {
|
|
imageEl.src = coverUrl;
|
|
}
|
|
}
|
|
this.setPageBackground(coverUrl);
|
|
this.extractAndApplyColor(this.api.getCoverUrl(tracks[0].album.cover, '160'));
|
|
} else {
|
|
imageEl.src = '/assets/appicon.png';
|
|
this.setPageBackground(null);
|
|
this.resetVibrantColor();
|
|
}
|
|
}
|
|
|
|
imageEl.style.backgroundColor = '';
|
|
|
|
// Use title and subtitle from API directly
|
|
const displayTitle = mix.title || 'Mix';
|
|
titleEl.textContent = displayTitle;
|
|
this.adjustTitleFontSize(titleEl, displayTitle);
|
|
|
|
const totalDuration = calculateTotalDuration(tracks);
|
|
metaEl.textContent = `${tracks.length} tracks • ${formatDuration(totalDuration)}`;
|
|
descEl.innerHTML = `${mix.subTitle}`;
|
|
|
|
tracklistContainer.innerHTML = `
|
|
<div class="track-list-header">
|
|
<span style="width: 40px; text-align: center;">#</span>
|
|
<span>Title</span>
|
|
<span class="duration-header">Duration</span>
|
|
<span style="display: flex; justify-content: flex-end; opacity: 0.8;">Menu</span>
|
|
</div>
|
|
`;
|
|
|
|
this.renderListWithTracks(tracklistContainer, tracks, true, true);
|
|
|
|
// Set play button action
|
|
playBtn.onclick = () => {
|
|
this.player.setQueue(tracks, 0);
|
|
this.player.playTrackFromQueue();
|
|
};
|
|
|
|
recentActivityManager.addMix(mix);
|
|
|
|
// Update header like button
|
|
const mixLikeBtn = document.getElementById('like-mix-btn');
|
|
if (mixLikeBtn) {
|
|
mixLikeBtn.style.display = 'flex';
|
|
const isLiked = await db.isFavorite('mix', mix.id);
|
|
mixLikeBtn.innerHTML = this.createHeartIcon(isLiked);
|
|
mixLikeBtn.classList.toggle('active', isLiked);
|
|
}
|
|
|
|
document.title = displayTitle;
|
|
} catch (error) {
|
|
console.error('Failed to load mix:', error);
|
|
tracklistContainer.innerHTML = createPlaceholder(`Could not load mix details. ${error.message}`);
|
|
}
|
|
}
|
|
|
|
async renderArtistPage(artistId, provider = null) {
|
|
this.showPage('artist');
|
|
|
|
const imageEl = document.getElementById('artist-detail-image');
|
|
const nameEl = document.getElementById('artist-detail-name');
|
|
const metaEl = document.getElementById('artist-detail-meta');
|
|
const socialsEl = document.getElementById('artist-detail-socials');
|
|
const bioEl = document.getElementById('artist-detail-bio');
|
|
const tracksContainer = document.getElementById('artist-detail-tracks');
|
|
const albumsContainer = document.getElementById('artist-detail-albums');
|
|
const epsContainer = document.getElementById('artist-detail-eps');
|
|
const epsSection = document.getElementById('artist-section-eps');
|
|
const similarContainer = document.getElementById('artist-detail-similar');
|
|
const similarSection = document.getElementById('artist-section-similar');
|
|
const inLibraryContainer = document.getElementById('artist-detail-in-library');
|
|
const inLibrarySection = document.getElementById('artist-section-in-library');
|
|
const dlBtn = document.getElementById('download-discography-btn');
|
|
if (dlBtn) dlBtn.innerHTML = `${SVG_DOWNLOAD(20)}<span>Download Discography</span>`;
|
|
|
|
imageEl.src = '';
|
|
imageEl.style.backgroundColor = 'var(--muted)';
|
|
nameEl.innerHTML = '<div class="skeleton" style="height: 48px; width: 300px; max-width: 90%;"></div>';
|
|
metaEl.innerHTML = '<div class="skeleton" style="height: 16px; width: 150px;"></div>';
|
|
if (socialsEl) socialsEl.innerHTML = '';
|
|
if (bioEl) {
|
|
bioEl.style.display = 'none';
|
|
bioEl.textContent = '';
|
|
bioEl.classList.remove('expanded');
|
|
}
|
|
tracksContainer.innerHTML = this.createSkeletonTracks(5, true);
|
|
albumsContainer.innerHTML = this.createSkeletonCards(6, false);
|
|
if (epsContainer) epsContainer.innerHTML = this.createSkeletonCards(6, false);
|
|
if (epsSection) epsSection.style.display = 'none';
|
|
const loadUnreleasedSection = document.getElementById('artist-section-load-unreleased');
|
|
if (loadUnreleasedSection) loadUnreleasedSection.style.display = 'none';
|
|
if (similarContainer) similarContainer.innerHTML = this.createSkeletonCards(6, true);
|
|
if (similarSection) similarSection.style.display = 'block';
|
|
if (inLibrarySection) inLibrarySection.style.display = 'none';
|
|
if (inLibraryContainer) {
|
|
inLibraryContainer.innerHTML = '';
|
|
inLibraryContainer.hidden = true;
|
|
}
|
|
// Reset chevron and toggle state
|
|
const chevronEl = document.getElementById('in-library-chevron');
|
|
if (chevronEl) chevronEl.style.transform = 'rotate(0deg)';
|
|
const toggleBtn = document.getElementById('in-library-toggle');
|
|
if (toggleBtn) toggleBtn.setAttribute('aria-expanded', 'false');
|
|
|
|
try {
|
|
const artist = await this.api.getArtist(artistId, provider);
|
|
|
|
// Handle Biography
|
|
if (bioEl) {
|
|
// Pre-define regex patterns for better performance
|
|
const linkTypes = ['artist', 'album', 'track', 'playlist'];
|
|
const regexCache = {
|
|
wimp: linkTypes.reduce((acc, type) => {
|
|
acc[type] = new RegExp(`\\[wimpLink ${type}Id="([a-f\\d-]+)"\\](.*?)\\[\\/wimpLink\\]`, 'g');
|
|
return acc;
|
|
}, {}),
|
|
legacy: linkTypes.reduce((acc, type) => {
|
|
acc[type] = new RegExp(`\\[${type}:([a-f\\d-]+)\\](.*?)\\[\\/${type}\\]`, 'g');
|
|
return acc;
|
|
}, {}),
|
|
doubleBracket: /\[\[(.*?)\|(.*?)\]\]/g,
|
|
};
|
|
|
|
const parseBio = (text) => {
|
|
if (!text) return '';
|
|
|
|
let parsed = text;
|
|
|
|
linkTypes.forEach((type) => {
|
|
parsed = parsed.replace(
|
|
regexCache.wimp[type],
|
|
(_m, id, name) =>
|
|
`<span class="bio-link" data-type="${type}" data-id="${id}">${name}</span>`
|
|
);
|
|
parsed = parsed.replace(
|
|
regexCache.legacy[type],
|
|
(_m, id, name) =>
|
|
`<span class="bio-link" data-type="${type}" data-id="${id}">${name}</span>`
|
|
);
|
|
});
|
|
|
|
parsed = parsed.replace(
|
|
regexCache.doubleBracket,
|
|
(_m, name, id) => `<span class="bio-link" data-type="artist" data-id="${id}">${name}</span>`
|
|
);
|
|
|
|
return parsed.replace(/\n/g, '<br>');
|
|
};
|
|
|
|
// Helper to strip tags for clean preview
|
|
const stripBioTags = (text) => {
|
|
if (!text) return '';
|
|
let clean = text;
|
|
linkTypes.forEach((type) => {
|
|
// [wimpLink artistId="..."]Name[/wimpLink] -> Name
|
|
clean = clean.replace(regexCache.wimp[type], (_m, _id, name) => name);
|
|
// [artist:...]Name[/artist] -> Name
|
|
clean = clean.replace(regexCache.legacy[type], (_m, _id, name) => name);
|
|
});
|
|
// [[Name|ID]] -> Name
|
|
clean = clean.replace(regexCache.doubleBracket, (_m, name, _id) => name);
|
|
return clean;
|
|
};
|
|
|
|
const showBioModal = (bio) => {
|
|
const text = typeof bio === 'string' ? bio : bio.text;
|
|
const source = typeof bio === 'string' ? null : bio.source;
|
|
|
|
const modal = document.createElement('div');
|
|
modal.className = 'modal active bio-modal';
|
|
modal.style.zIndex = '9999'; // Ensure it's on top
|
|
modal.innerHTML = `
|
|
<div class="modal-overlay"></div>
|
|
<div class="modal-content extra-wide" style="display: flex; flex-direction: column;">
|
|
<div class="modal-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); padding-bottom: 1rem;">
|
|
<h3 style="margin: 0;">Artist Biography</h3>
|
|
<button class="btn-close" style="background: none; border: none; font-size: 2rem; cursor: pointer; color: var(--foreground); padding: 0.2rem 0.5rem; line-height: 1;">×</button>
|
|
</div>
|
|
<div class="modal-body" style="max-height: 70vh; overflow-y: auto; line-height: 1.8; font-size: 1.1rem; padding-right: 1rem; color: var(--foreground); cursor: default;">
|
|
${parseBio(text)}
|
|
${source ? `<div class="bio-source">Source: ${source}</div>` : ''}
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
document.body.appendChild(modal);
|
|
|
|
const close = (e) => {
|
|
if (e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}
|
|
modal.remove();
|
|
};
|
|
|
|
modal.querySelector('.modal-overlay').onclick = close;
|
|
modal.querySelector('.btn-close').onclick = close;
|
|
|
|
// Ensure links are clickable by attaching the listener to the modal body
|
|
const modalBody = modal.querySelector('.modal-body');
|
|
modalBody.addEventListener(
|
|
'click',
|
|
(e) => {
|
|
const link = e.target.closest('.bio-link');
|
|
if (link) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
const { type, id } = link.dataset;
|
|
if (type && id) {
|
|
modal.remove();
|
|
navigate(`/${type}/t/${id}`);
|
|
}
|
|
}
|
|
},
|
|
true
|
|
); // Use capture phase to ensure it's hit
|
|
};
|
|
|
|
const renderBioPreview = (bio) => {
|
|
const text = typeof bio === 'string' ? bio : bio.text;
|
|
if (text) {
|
|
// Use stripped text for preview to avoid broken tags/links
|
|
const cleanText = stripBioTags(text);
|
|
const isLong = cleanText.length > 200;
|
|
const previewText = isLong ? cleanText.substring(0, 200).trim() + '...' : cleanText;
|
|
|
|
bioEl.innerHTML = previewText.replace(/\n/g, '<br>');
|
|
bioEl.style.display = 'block';
|
|
bioEl.style.webkitLineClamp = 'unset';
|
|
bioEl.style.cursor = 'default';
|
|
bioEl.onclick = null;
|
|
|
|
if (isLong) {
|
|
bioEl.appendChild(document.createElement('br'));
|
|
const readMore = document.createElement('span');
|
|
readMore.className = 'bio-read-more';
|
|
readMore.textContent = 'Read More';
|
|
readMore.onclick = (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
showBioModal(bio);
|
|
};
|
|
bioEl.appendChild(readMore);
|
|
}
|
|
} else {
|
|
bioEl.style.display = 'none';
|
|
}
|
|
};
|
|
|
|
if (artist.biography) {
|
|
renderBioPreview(artist.biography);
|
|
} else {
|
|
// Try to fetch biography asynchronously
|
|
this.api
|
|
.getArtistBiography(artistId, provider)
|
|
.then((bio) => {
|
|
if (bio) renderBioPreview(bio);
|
|
})
|
|
.catch(() => {
|
|
/* ignore */
|
|
});
|
|
}
|
|
}
|
|
|
|
// Handle Artist Mix Button
|
|
const mixBtn = document.getElementById('artist-mix-btn');
|
|
if (mixBtn) {
|
|
if (artist.mixes && artist.mixes.ARTIST_MIX) {
|
|
mixBtn.style.display = 'flex';
|
|
mixBtn.onclick = () => navigate(`/mix/${artist.mixes.ARTIST_MIX}`);
|
|
} else {
|
|
mixBtn.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
// Similar Artists
|
|
if (similarContainer && similarSection) {
|
|
this.api
|
|
.getSimilarArtists(artistId)
|
|
.then(async (similar) => {
|
|
// Filter out blocked artists
|
|
const { contentBlockingSettings } = await import('./storage.js');
|
|
const filteredSimilar = contentBlockingSettings.filterArtists(similar || []);
|
|
|
|
if (filteredSimilar.length > 0) {
|
|
similarContainer.innerHTML = filteredSimilar
|
|
.map((a) => this.createArtistCardHTML(a))
|
|
.join('');
|
|
similarSection.style.display = 'block';
|
|
|
|
filteredSimilar.forEach((a) => {
|
|
const el = similarContainer.querySelector(`[data-artist-id="${a.id}"]`);
|
|
if (el) {
|
|
trackDataStore.set(el, a);
|
|
this.updateLikeState(el, 'artist', a.id);
|
|
}
|
|
});
|
|
} else {
|
|
similarSection.style.display = 'none';
|
|
}
|
|
})
|
|
.catch(() => {
|
|
similarSection.style.display = 'none';
|
|
});
|
|
}
|
|
|
|
imageEl.src = this.api.getArtistPictureUrl(artist.picture);
|
|
imageEl.style.backgroundColor = '';
|
|
nameEl.textContent = artist.name;
|
|
|
|
// Set background
|
|
this.setPageBackground(imageEl.src);
|
|
|
|
// Extract vibrant color using robust image extraction (160x160 for speed/accuracy balance)
|
|
const artistPic160 = this.api.getArtistPictureUrl(artist.picture, '160');
|
|
this.extractAndApplyColor(artistPic160);
|
|
|
|
this.adjustTitleFontSize(nameEl, artist.name);
|
|
|
|
metaEl.innerHTML = `
|
|
<span>${artist.popularity}% popularity</span>
|
|
<div class="artist-tags">
|
|
${(artist.artistRoles || [])
|
|
.filter((role) => role.category)
|
|
.map((role) => `<span class="artist-tag">${role.category}</span>`)
|
|
.join('')}
|
|
</div>
|
|
`;
|
|
|
|
this.api.getArtistSocials(artist.name).then((links) => {
|
|
if (socialsEl && links.length > 0) {
|
|
socialsEl.innerHTML = links.map((link) => this.createSocialLinkHTML(link)).join('');
|
|
}
|
|
});
|
|
|
|
this.renderListWithTracks(tracksContainer, artist.tracks, true);
|
|
|
|
// "In your library" section: find liked tracks and playlist tracks for this artist
|
|
if (inLibraryContainer && inLibrarySection) {
|
|
const artistNameLower = artist.name.toLowerCase();
|
|
|
|
const isTrackByArtist = (track) => {
|
|
if (track.artists && Array.isArray(track.artists)) {
|
|
return track.artists.some(
|
|
(a) =>
|
|
a &&
|
|
((artist.id && a.id === artist.id) ||
|
|
(a.name && a.name.toLowerCase() === artistNameLower))
|
|
);
|
|
}
|
|
if (track.artist) {
|
|
if (typeof track.artist === 'object') {
|
|
if (artist.id && track.artist.id === artist.id) return true;
|
|
if (track.artist.name && track.artist.name.toLowerCase() === artistNameLower) return true;
|
|
} else if (typeof track.artist === 'string') {
|
|
if (track.artist.toLowerCase() === artistNameLower) return true;
|
|
}
|
|
}
|
|
return false;
|
|
};
|
|
|
|
const refreshInLibrary = async () => {
|
|
try {
|
|
const seenIds = new Set();
|
|
const libraryTracks = [];
|
|
const trackSourceMap = new Map(); // trackId -> Array<{ label, href }>
|
|
|
|
const addSource = (trackId, source) => {
|
|
if (!trackSourceMap.has(trackId)) {
|
|
trackSourceMap.set(trackId, []);
|
|
}
|
|
trackSourceMap.get(trackId).push(source);
|
|
};
|
|
|
|
// Get liked tracks
|
|
const likedTracks = await db.getFavorites('track');
|
|
for (const track of likedTracks) {
|
|
if (isTrackByArtist(track)) {
|
|
if (!seenIds.has(track.id)) {
|
|
seenIds.add(track.id);
|
|
libraryTracks.push(track);
|
|
}
|
|
addSource(track.id, { label: 'Liked Tracks', href: '/library' });
|
|
}
|
|
}
|
|
|
|
// Get tracks from user playlists
|
|
const userPlaylists = await db.getPlaylists(true);
|
|
for (const playlist of userPlaylists) {
|
|
if (playlist.tracks && Array.isArray(playlist.tracks)) {
|
|
for (const track of playlist.tracks) {
|
|
if (isTrackByArtist(track)) {
|
|
if (!seenIds.has(track.id)) {
|
|
seenIds.add(track.id);
|
|
libraryTracks.push(track);
|
|
}
|
|
const label = playlist.name || playlist.title || 'Playlist';
|
|
addSource(track.id, {
|
|
label,
|
|
href: `/userplaylist/${playlist.id}`,
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Sort alphabetically by title
|
|
libraryTracks.sort((a, b) => (a.title || '').localeCompare(b.title || ''));
|
|
|
|
if (libraryTracks.length > 0) {
|
|
inLibrarySection.style.display = 'block';
|
|
this.renderListWithTracks(inLibraryContainer, libraryTracks, true);
|
|
|
|
// Inject source labels into each track's .artist div
|
|
const trackElements = inLibraryContainer.querySelectorAll('.track-item');
|
|
trackElements.forEach((el, idx) => {
|
|
const track = libraryTracks[idx];
|
|
if (!track) return;
|
|
const sources = trackSourceMap.get(track.id);
|
|
if (!sources || sources.length === 0) return;
|
|
const artistDiv = el.querySelector('.track-item-details .artist');
|
|
if (!artistDiv) return;
|
|
|
|
// Extract artist name and year from existing content
|
|
const artistLinks = artistDiv.querySelectorAll('.artist-link');
|
|
const artistNames = Array.from(artistLinks)
|
|
.map((a) => a.textContent)
|
|
.join(', ');
|
|
const truncatedArtist =
|
|
artistNames.length > 15 ? artistNames.slice(0, 20) + '…' : artistNames;
|
|
|
|
// Extract year from text content (pattern: " • 2024")
|
|
const fullText = artistDiv.textContent;
|
|
const yearMatch = fullText.match(/\s•\s(\d{4})/);
|
|
const yearText = yearMatch ? ` • ${yearMatch[1]}` : '';
|
|
|
|
// Build source content
|
|
const sourceSpan = document.createElement('span');
|
|
sourceSpan.className = 'library-source';
|
|
|
|
const labelSpan = document.createElement('span');
|
|
labelSpan.className = 'library-source-label';
|
|
labelSpan.textContent = '· Source:\u00a0';
|
|
|
|
const linkSpan = document.createElement('span');
|
|
linkSpan.className = 'library-source-link';
|
|
|
|
sourceSpan.style.cursor = 'pointer';
|
|
sourceSpan.appendChild(labelSpan);
|
|
sourceSpan.appendChild(linkSpan);
|
|
|
|
if (sources.length === 1) {
|
|
const srcLabel =
|
|
sources[0].label.length > 15
|
|
? sources[0].label.slice(0, 15) + '…'
|
|
: sources[0].label;
|
|
linkSpan.textContent = srcLabel;
|
|
sourceSpan.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
navigate(sources[0].href);
|
|
});
|
|
} else {
|
|
linkSpan.textContent = 'Multiple Playlists';
|
|
sourceSpan.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
const modal = document.getElementById('goto-playlist-modal');
|
|
const list = document.getElementById('goto-playlist-list');
|
|
const cancelBtn = document.getElementById('goto-playlist-cancel');
|
|
const overlay = modal.querySelector('.modal-overlay');
|
|
|
|
list.innerHTML = '';
|
|
sources.forEach((s) => {
|
|
const option = document.createElement('div');
|
|
option.className = 'modal-option';
|
|
option.dataset.href = s.href;
|
|
const span = document.createElement('span');
|
|
span.textContent = s.label;
|
|
option.appendChild(span);
|
|
list.appendChild(option);
|
|
});
|
|
|
|
const closeModal = () => {
|
|
modal.classList.remove('active');
|
|
};
|
|
|
|
list.onclick = (ev) => {
|
|
const option = ev.target.closest('.modal-option');
|
|
if (!option) return;
|
|
const href = option.dataset.href;
|
|
closeModal();
|
|
if (href) navigate(href);
|
|
};
|
|
|
|
cancelBtn.onclick = closeModal;
|
|
overlay.onclick = closeModal;
|
|
modal.classList.add('active');
|
|
});
|
|
}
|
|
|
|
// Rebuild artist div with structured layout
|
|
artistDiv.innerHTML = '';
|
|
artistDiv.classList.add('library-artist-flex');
|
|
|
|
const artistNameSpan = document.createElement('span');
|
|
artistNameSpan.className = 'library-artist-name';
|
|
artistNameSpan.textContent = truncatedArtist;
|
|
|
|
const yearSpan = document.createElement('span');
|
|
yearSpan.className = 'library-year';
|
|
yearSpan.textContent = yearText;
|
|
|
|
artistDiv.appendChild(artistNameSpan);
|
|
artistDiv.appendChild(yearSpan);
|
|
artistDiv.appendChild(sourceSpan);
|
|
});
|
|
} else {
|
|
inLibrarySection.style.display = 'none';
|
|
}
|
|
} catch (err) {
|
|
console.warn('Failed to load library tracks for artist:', err);
|
|
inLibrarySection.style.display = 'none';
|
|
}
|
|
};
|
|
|
|
// Initial load
|
|
refreshInLibrary().then(() => {
|
|
inLibraryContainer.hidden = true;
|
|
});
|
|
|
|
// Setup chevron toggle (once)
|
|
const toggle = document.getElementById('in-library-toggle');
|
|
const chevron = document.getElementById('in-library-chevron');
|
|
if (toggle) {
|
|
toggle.onclick = () => {
|
|
const isOpen = !inLibraryContainer.hidden;
|
|
inLibraryContainer.hidden = isOpen;
|
|
toggle.setAttribute('aria-expanded', String(!isOpen));
|
|
if (chevron) {
|
|
chevron.style.transform = isOpen ? 'rotate(0deg)' : 'rotate(90deg)';
|
|
}
|
|
};
|
|
}
|
|
|
|
// Real-time updates: refresh when favorites or playlists change
|
|
let refreshTimeout;
|
|
const debouncedRefresh = () => {
|
|
clearTimeout(refreshTimeout);
|
|
refreshTimeout = setTimeout(() => refreshInLibrary(), 300);
|
|
};
|
|
|
|
// Cleanup previous listeners before attaching new ones
|
|
const cleanupOnNav = () => {
|
|
window.removeEventListener('favorites-changed', debouncedRefresh);
|
|
window.removeEventListener('playlist-tracks-changed', debouncedRefresh);
|
|
window.removeEventListener('popstate', cleanupOnNav);
|
|
};
|
|
cleanupOnNav();
|
|
|
|
window.addEventListener('favorites-changed', debouncedRefresh);
|
|
window.addEventListener('playlist-tracks-changed', debouncedRefresh);
|
|
window.addEventListener('popstate', cleanupOnNav, { once: true });
|
|
}
|
|
|
|
// Update header like button
|
|
const artistLikeBtn = document.getElementById('like-artist-btn');
|
|
if (artistLikeBtn) {
|
|
const isLiked = await db.isFavorite('artist', artist.id);
|
|
artistLikeBtn.innerHTML = this.createHeartIcon(isLiked);
|
|
artistLikeBtn.classList.toggle('active', isLiked);
|
|
}
|
|
|
|
// Render Albums
|
|
albumsContainer.innerHTML = artist.albums.length
|
|
? artist.albums.map((album) => this.createAlbumCardHTML(album)).join('')
|
|
: createPlaceholder('No albums found.');
|
|
|
|
// Render EPs and Singles
|
|
if (epsContainer && epsSection) {
|
|
if (artist.eps && artist.eps.length > 0) {
|
|
epsContainer.innerHTML = artist.eps.map((album) => this.createAlbumCardHTML(album)).join('');
|
|
epsSection.style.display = 'block';
|
|
|
|
artist.eps.forEach((album) => {
|
|
const el = epsContainer.querySelector(`[data-album-id="${album.id}"]`);
|
|
if (el) {
|
|
trackDataStore.set(el, album);
|
|
this.updateLikeState(el, 'album', album.id);
|
|
}
|
|
});
|
|
} else {
|
|
epsSection.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
artist.albums.forEach((album) => {
|
|
const el = albumsContainer.querySelector(`[data-album-id="${album.id}"]`);
|
|
if (el) {
|
|
trackDataStore.set(el, album);
|
|
this.updateLikeState(el, 'album', album.id);
|
|
}
|
|
});
|
|
|
|
const videosSection = document.getElementById('artist-section-videos');
|
|
const videosContainer = document.getElementById('artist-detail-videos');
|
|
if (videosSection && videosContainer) {
|
|
if (artist.videos && artist.videos.length > 0) {
|
|
videosContainer.innerHTML = artist.videos.map((video) => this.createVideoCardHTML(video)).join('');
|
|
videosSection.style.display = 'block';
|
|
|
|
artist.videos.forEach((video) => {
|
|
const el = videosContainer.querySelector(`[data-video-id="${video.id}"]`);
|
|
if (el) {
|
|
trackDataStore.set(el, video);
|
|
this.updateLikeState(el, 'track', video.id);
|
|
}
|
|
});
|
|
} else {
|
|
videosSection.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
// Check for unreleased projects
|
|
const unreleasedSection = document.getElementById('artist-section-unreleased');
|
|
const unreleasedContainer = document.getElementById('artist-detail-unreleased');
|
|
const loadUnreleasedBtn = document.getElementById('load-unreleased-btn');
|
|
const loadUnreleasedSection = document.getElementById('artist-section-load-unreleased');
|
|
if (unreleasedSection && unreleasedContainer && loadUnreleasedBtn && loadUnreleasedSection) {
|
|
// Initially hide the unreleased section
|
|
unreleasedSection.style.display = 'none';
|
|
loadUnreleasedSection.style.display = 'none';
|
|
|
|
// Check if artist has unreleased projects
|
|
const trackerArtist = findTrackerArtistByName(artist.name);
|
|
if (trackerArtist) {
|
|
// Show the load button section
|
|
loadUnreleasedSection.style.display = 'block';
|
|
|
|
// Add click handler to load and display unreleased projects
|
|
loadUnreleasedBtn.onclick = async () => {
|
|
loadUnreleasedBtn.disabled = true;
|
|
loadUnreleasedBtn.textContent = 'Loading...';
|
|
|
|
try {
|
|
const unreleasedData = await getArtistUnreleasedProjects(artist.name);
|
|
if (unreleasedData && unreleasedData.eras.length > 0) {
|
|
const { artist: trackerArtistData, sheetId, eras } = unreleasedData;
|
|
|
|
unreleasedContainer.innerHTML = eras
|
|
.map((e) => {
|
|
let trackCount = 0;
|
|
if (e.data) {
|
|
Object.values(e.data).forEach((songs) => {
|
|
if (songs && songs.length) trackCount += songs.length;
|
|
});
|
|
}
|
|
return createProjectCardHTML(e, trackerArtistData, sheetId, trackCount);
|
|
})
|
|
.join('');
|
|
|
|
unreleasedSection.style.display = 'block';
|
|
loadUnreleasedBtn.style.display = 'none';
|
|
|
|
// Add click handlers
|
|
const player = this.player;
|
|
unreleasedContainer.querySelectorAll('.card').forEach((card) => {
|
|
const eraName = decodeURIComponent(card.dataset.trackerProjectId);
|
|
const era = eras.find((e) => e.name === eraName);
|
|
if (!era) return;
|
|
|
|
card.onclick = (e) => {
|
|
if (e.target.closest('.card-play-btn')) {
|
|
e.stopPropagation();
|
|
let eraTracks = [];
|
|
if (era.data) {
|
|
Object.values(era.data).forEach((songs) => {
|
|
if (songs && songs.length) {
|
|
songs.forEach((song) => {
|
|
const track = createTrackFromSong(
|
|
song,
|
|
era,
|
|
trackerArtistData.name,
|
|
eraTracks.length,
|
|
sheetId
|
|
);
|
|
eraTracks.push(track);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
const availableTracks = eraTracks.filter((t) => !t.unavailable);
|
|
if (availableTracks.length > 0) {
|
|
player.setQueue(availableTracks, 0);
|
|
player.playTrackFromQueue();
|
|
}
|
|
} else if (e.target.closest('.card-menu-btn')) {
|
|
e.stopPropagation();
|
|
} else {
|
|
navigate(`/unreleased/${sheetId}/${encodeURIComponent(era.name)}`);
|
|
}
|
|
};
|
|
});
|
|
} else {
|
|
loadUnreleasedBtn.textContent = 'No unreleased projects';
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to load unreleased projects:', error);
|
|
loadUnreleasedBtn.textContent = 'Failed to load';
|
|
loadUnreleasedBtn.disabled = false;
|
|
}
|
|
};
|
|
}
|
|
}
|
|
|
|
recentActivityManager.addArtist(artist);
|
|
|
|
document.title = artist.name;
|
|
} catch (error) {
|
|
console.error('Failed to load artist:', error);
|
|
tracksContainer.innerHTML = albumsContainer.innerHTML = createPlaceholder(
|
|
`Could not load artist details. ${error.message}`
|
|
);
|
|
}
|
|
}
|
|
|
|
createSocialLinkHTML(link) {
|
|
const url = link.url;
|
|
|
|
if (url.includes('tidal.com')) return '';
|
|
if (url.includes('qobuz.com')) return '';
|
|
|
|
let icon = SVG_GLOBE(24);
|
|
let title = 'Website';
|
|
|
|
if (url.includes('twitter.com') || url.includes('x.com')) {
|
|
icon = SVG_TWITTER(24);
|
|
title = 'Twitter';
|
|
} else if (url.includes('instagram.com')) {
|
|
icon = SVG_INSTAGRAM(24);
|
|
title = 'Instagram';
|
|
} else if (url.includes('facebook.com')) {
|
|
icon = SVG_FACEBOOK(24);
|
|
title = 'Facebook';
|
|
} else if (url.includes('youtube.com')) {
|
|
icon = SVG_YOUTUBE(24);
|
|
title = 'YouTube';
|
|
} else if (url.includes('spotify.com') || url.includes('open.spotify.com')) {
|
|
icon = SVG_LINK(24);
|
|
title = 'Spotify';
|
|
} else if (url.includes('soundcloud.com')) {
|
|
icon = SVG_SOUNDCLOUD(24);
|
|
title = 'SoundCloud';
|
|
} else if (url.includes('apple.com')) {
|
|
icon = SVG_APPLE(24);
|
|
title = 'Apple Music';
|
|
}
|
|
|
|
return `<a href="${url}" target="_blank" rel="noopener noreferrer" class="social-link" title="${title}">${icon}</a>`;
|
|
}
|
|
|
|
async renderRecentPage() {
|
|
this.showPage('recent');
|
|
const container = document.getElementById('recent-tracks-container');
|
|
const clearBtn = document.getElementById('clear-history-btn');
|
|
container.innerHTML = this.createSkeletonTracks(10, true);
|
|
|
|
try {
|
|
const history = await db.getHistory();
|
|
|
|
// Show/hide clear button based on whether there's history
|
|
if (clearBtn) {
|
|
clearBtn.style.display = history.length > 0 ? 'flex' : 'none';
|
|
}
|
|
|
|
if (history.length === 0) {
|
|
container.innerHTML = createPlaceholder("You haven't played any tracks yet.");
|
|
return;
|
|
}
|
|
|
|
// Group by date
|
|
const groups = {};
|
|
const today = new Date().setHours(0, 0, 0, 0);
|
|
const yesterday = new Date(today - 86400000).setHours(0, 0, 0, 0);
|
|
|
|
history.forEach((item) => {
|
|
const date = new Date(item.timestamp);
|
|
const dayStart = new Date(date).setHours(0, 0, 0, 0);
|
|
|
|
let label;
|
|
if (dayStart === today) label = 'Today';
|
|
else if (dayStart === yesterday) label = 'Yesterday';
|
|
else
|
|
label = date.toLocaleDateString(undefined, {
|
|
weekday: 'long',
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric',
|
|
});
|
|
|
|
if (!groups[label]) groups[label] = [];
|
|
groups[label].push(item);
|
|
});
|
|
|
|
container.innerHTML = '';
|
|
|
|
for (const [label, tracks] of Object.entries(groups)) {
|
|
const header = document.createElement('h3');
|
|
header.className = 'track-list-header-group';
|
|
header.textContent = label;
|
|
header.style.margin = '1.5rem 0 0.5rem 0';
|
|
header.style.fontSize = '1.1rem';
|
|
header.style.fontWeight = '600';
|
|
header.style.color = 'var(--foreground)';
|
|
header.style.paddingLeft = '0.5rem';
|
|
|
|
container.appendChild(header);
|
|
|
|
// Use a temporary container to render tracks and then move them
|
|
const tempContainer = document.createElement('div');
|
|
this.renderListWithTracks(tempContainer, tracks, true);
|
|
|
|
// Move children to main container
|
|
while (tempContainer.firstChild) {
|
|
container.appendChild(tempContainer.firstChild);
|
|
}
|
|
}
|
|
|
|
// Setup clear button handler
|
|
if (clearBtn) {
|
|
clearBtn.onclick = async () => {
|
|
if (confirm('Clear all recently played tracks? This cannot be undone.')) {
|
|
try {
|
|
await db.clearHistory();
|
|
await syncManager.clearHistory();
|
|
container.innerHTML = createPlaceholder("You haven't played any tracks yet.");
|
|
clearBtn.style.display = 'none';
|
|
} catch (err) {
|
|
console.error('Failed to clear history:', err);
|
|
alert('Failed to clear history');
|
|
}
|
|
}
|
|
};
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to load history:', error);
|
|
container.innerHTML = createPlaceholder('Failed to load history.');
|
|
if (clearBtn) clearBtn.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
async renderUnreleasedPage() {
|
|
this.showPage('unreleased');
|
|
const container = document.getElementById('unreleased-content');
|
|
await renderUnreleasedTrackerPage(container);
|
|
}
|
|
|
|
async renderTrackerArtistPage(sheetId) {
|
|
this.showPage('tracker-artist');
|
|
const container = document.getElementById('tracker-artist-projects-container');
|
|
await renderTrackerArtistContent(sheetId, container);
|
|
}
|
|
|
|
async renderTrackerProjectPage(sheetId, projectName) {
|
|
this.showPage('album'); // Use album page template
|
|
const container = document.getElementById('album-detail-tracklist');
|
|
await renderTrackerProjectContent(sheetId, projectName, container, this);
|
|
}
|
|
|
|
async renderTrackerTrackPage(trackId) {
|
|
this.showPage('album'); // Use album page template
|
|
const container = document.getElementById('album-detail-tracklist');
|
|
await renderTrackerTrackContent(trackId, container, this);
|
|
}
|
|
|
|
updatePlaylistHeaderActions(playlist, isOwned, tracks, showShare = false, onSort = null, getCurrentSort = null) {
|
|
const actionsDiv = document.getElementById('page-playlist').querySelector('.detail-header-actions');
|
|
|
|
// Cleanup existing dynamic buttons
|
|
[
|
|
'shuffle-playlist-btn',
|
|
'edit-playlist-btn',
|
|
'delete-playlist-btn',
|
|
'share-playlist-btn',
|
|
'sort-playlist-btn',
|
|
].forEach((id) => {
|
|
const btn = actionsDiv.querySelector(`#${id}`);
|
|
if (btn) btn.remove();
|
|
});
|
|
|
|
const fragment = document.createDocumentFragment();
|
|
|
|
// Shuffle
|
|
const shuffleBtn = document.createElement('button');
|
|
shuffleBtn.id = 'shuffle-playlist-btn';
|
|
shuffleBtn.className = 'btn-primary';
|
|
shuffleBtn.innerHTML = `${SVG_SHUFFLE(20)}<span>Shuffle</span>`;
|
|
shuffleBtn.onclick = () => {
|
|
const shuffledTracks = [...tracks].sort(() => Math.random() - 0.5);
|
|
this.player.setQueue(shuffledTracks, 0);
|
|
this.player.playTrackFromQueue();
|
|
};
|
|
|
|
// Sort button (always available if onSort is provided)
|
|
let sortBtn = null;
|
|
if (onSort) {
|
|
sortBtn = document.createElement('button');
|
|
sortBtn.id = 'sort-playlist-btn';
|
|
sortBtn.className = 'btn-secondary';
|
|
sortBtn.innerHTML = `${SVG_SORT(20)}<span>Sort</span>`;
|
|
|
|
sortBtn.onclick = (e) => {
|
|
e.stopPropagation();
|
|
const menu = document.getElementById('sort-menu');
|
|
|
|
// Show "Date Added" options only if tracks have addedAt
|
|
const hasAddedDate = tracks.some((t) => t.addedAt);
|
|
menu.querySelectorAll('.requires-added-date').forEach((opt) => {
|
|
opt.style.display = hasAddedDate ? '' : 'none';
|
|
});
|
|
|
|
// Highlight current sort option
|
|
const currentSortType = getCurrentSort ? getCurrentSort() : 'custom';
|
|
menu.querySelectorAll('li').forEach((opt) => {
|
|
opt.classList.toggle('sort-active', opt.dataset.sort === currentSortType);
|
|
});
|
|
|
|
const rect = sortBtn.getBoundingClientRect();
|
|
menu.style.top = `${rect.bottom + 5}px`;
|
|
menu.style.left = `${rect.left}px`;
|
|
menu.style.display = 'block';
|
|
|
|
const closeMenu = () => {
|
|
menu.style.display = 'none';
|
|
document.removeEventListener('click', closeMenu);
|
|
};
|
|
|
|
const handleSort = (ev) => {
|
|
const li = ev.target.closest('li');
|
|
if (li && li.dataset.sort) {
|
|
trackChangeSort(li.dataset.sort);
|
|
onSort(li.dataset.sort);
|
|
closeMenu();
|
|
}
|
|
};
|
|
|
|
menu.onclick = handleSort;
|
|
|
|
setTimeout(() => document.addEventListener('click', closeMenu), 0);
|
|
};
|
|
}
|
|
|
|
// Edit/Delete (Owned Only)
|
|
if (isOwned) {
|
|
const editBtn = document.createElement('button');
|
|
editBtn.id = 'edit-playlist-btn';
|
|
editBtn.className = 'btn-secondary';
|
|
editBtn.innerHTML = `${SVG_SQUARE_PEN(24)}<span>Edit</span>`;
|
|
fragment.appendChild(editBtn);
|
|
|
|
const deleteBtn = document.createElement('button');
|
|
deleteBtn.id = 'delete-playlist-btn';
|
|
deleteBtn.className = 'btn-secondary danger';
|
|
deleteBtn.innerHTML = `${SVG_BIN(24)}<span>Delete</span>`;
|
|
fragment.appendChild(deleteBtn);
|
|
}
|
|
|
|
// Share (User Playlists Only)
|
|
if (showShare || (isOwned && playlist.isPublic)) {
|
|
const shareBtn = document.createElement('button');
|
|
shareBtn.id = 'share-playlist-btn';
|
|
shareBtn.className = 'btn-secondary';
|
|
shareBtn.innerHTML = `${SVG_SHARE(20)}<span>Share</span>`;
|
|
|
|
shareBtn.onclick = () => {
|
|
const url = getShareUrl(`/userplaylist/${playlist.id || playlist.uuid}`);
|
|
navigator.clipboard.writeText(url).then(() => alert('Link copied to clipboard!'));
|
|
};
|
|
fragment.appendChild(shareBtn);
|
|
}
|
|
|
|
// Insert buttons in the correct order: Play, Shuffle, Download, Sort, Like, Edit/Delete/Share
|
|
const dlBtn = actionsDiv.querySelector('#download-playlist-btn');
|
|
const likeBtn = actionsDiv.querySelector('#like-playlist-btn');
|
|
|
|
if (dlBtn) {
|
|
// We want Shuffle first, then Edit/Delete/Share.
|
|
// But Download is usually first or second.
|
|
// In renderPlaylistPage: Play, Download, Like.
|
|
// We want Shuffle after Play? Or after Download?
|
|
// Previous code: actionsDiv.insertBefore(shuffleBtn, dlBtn); => Shuffle before Download.
|
|
// Then appended others.
|
|
|
|
// Let's just append everything for now to keep it simple, or insert Shuffle specifically.
|
|
// The Play button is static. Download is static.
|
|
|
|
// If we want Shuffle before Download:
|
|
// fragment has Shuffle, Edit, Delete, Share.
|
|
// If we insert fragment before Download, all go before Download.
|
|
// That might change the order.
|
|
// Previous order: Shuffle (before Download), then Edit/Delete/Share (appended = after Like).
|
|
|
|
// Let's split fragment?
|
|
// Or just use append for all.
|
|
// The user didn't complain about order, but consistency is good.
|
|
// "Fix popup buttons" was the request.
|
|
|
|
// Let's stick to appending for now to minimize visual layout shifts from previous (where Edit/Delete were appended).
|
|
// Shuffle was inserted before Download.
|
|
actionsDiv.insertBefore(shuffleBtn, dlBtn);
|
|
// Insert Sort after Download, before Like
|
|
if (sortBtn && likeBtn) {
|
|
actionsDiv.insertBefore(sortBtn, likeBtn);
|
|
} else if (sortBtn) {
|
|
actionsDiv.appendChild(sortBtn);
|
|
}
|
|
|
|
// Append Edit/Delete/Share buttons after Like
|
|
while (fragment.firstChild) {
|
|
actionsDiv.appendChild(fragment.firstChild);
|
|
}
|
|
} else {
|
|
// If no Download button, just append everything
|
|
actionsDiv.appendChild(shuffleBtn);
|
|
if (sortBtn) actionsDiv.appendChild(sortBtn);
|
|
while (fragment.firstChild) {
|
|
actionsDiv.appendChild(fragment.firstChild);
|
|
}
|
|
}
|
|
}
|
|
|
|
enableTrackReordering(container, tracks, playlistId, syncManager) {
|
|
// Clone to remove old listeners
|
|
const newContainer = container.cloneNode(true);
|
|
if (container.parentNode) {
|
|
container.parentNode.replaceChild(newContainer, container);
|
|
}
|
|
container = newContainer;
|
|
|
|
let draggedElement = null;
|
|
let draggedIndex = -1;
|
|
let trackItems = Array.from(container.querySelectorAll('.track-item'));
|
|
|
|
trackItems.forEach((item, index) => {
|
|
// Re-bind data to cloned elements
|
|
if (tracks[index]) {
|
|
trackDataStore.set(item, tracks[index]);
|
|
}
|
|
item.draggable = true;
|
|
item.dataset.index = index;
|
|
});
|
|
|
|
const dragStart = (e) => {
|
|
draggedElement = e.target.closest('.track-item');
|
|
if (!draggedElement) return;
|
|
|
|
draggedIndex = parseInt(draggedElement.dataset.index);
|
|
e.dataTransfer.effectAllowed = 'move';
|
|
e.dataTransfer.setData('text/plain', draggedIndex);
|
|
draggedElement.classList.add('dragging');
|
|
};
|
|
|
|
const dragEnd = () => {
|
|
if (draggedElement) {
|
|
draggedElement.classList.remove('dragging');
|
|
draggedElement = null;
|
|
}
|
|
};
|
|
|
|
const dragOver = (e) => {
|
|
e.preventDefault();
|
|
e.dataTransfer.dropEffect = 'move';
|
|
|
|
if (!draggedElement) return;
|
|
|
|
const afterElement = getDragAfterElement(container, e.clientY);
|
|
if (afterElement === draggedElement) return;
|
|
|
|
if (afterElement) {
|
|
container.insertBefore(draggedElement, afterElement);
|
|
} else {
|
|
container.appendChild(draggedElement);
|
|
}
|
|
};
|
|
|
|
const drop = async (e) => {
|
|
e.preventDefault();
|
|
|
|
if (!draggedElement) return;
|
|
|
|
try {
|
|
// Get new order from DOM
|
|
const newTrackItems = Array.from(container.querySelectorAll('.track-item'));
|
|
const newTracks = newTrackItems.map((item) => {
|
|
const originalIndex = parseInt(item.dataset.index);
|
|
return tracks[originalIndex];
|
|
});
|
|
|
|
newTrackItems.forEach((item, index) => {
|
|
item.dataset.index = index;
|
|
});
|
|
|
|
tracks.splice(0, tracks.length, ...newTracks);
|
|
|
|
// Save to DB
|
|
const updatedPlaylist = await db.updatePlaylistTracks(playlistId, newTracks);
|
|
syncManager.syncUserPlaylist(updatedPlaylist, 'update');
|
|
|
|
draggedElement = null;
|
|
draggedIndex = -1;
|
|
} catch (error) {
|
|
console.error('Error updating playlist tracks:', error);
|
|
if (draggedElement) {
|
|
draggedElement.classList.remove('dragging');
|
|
draggedElement = null;
|
|
}
|
|
draggedIndex = -1;
|
|
}
|
|
};
|
|
|
|
container.addEventListener('dragstart', dragStart);
|
|
container.addEventListener('dragend', dragEnd);
|
|
container.addEventListener('dragover', dragOver);
|
|
container.addEventListener('drop', drop);
|
|
|
|
// Cache function to avoid recreating
|
|
function getDragAfterElement(container, y) {
|
|
const draggableElements = [...container.querySelectorAll('.track-item:not(.dragging)')];
|
|
|
|
return draggableElements.reduce(
|
|
(closest, child) => {
|
|
const box = child.getBoundingClientRect();
|
|
const offset = y - box.top - box.height / 2;
|
|
if (offset < 0 && offset > closest.offset) {
|
|
return { offset: offset, element: child };
|
|
} else {
|
|
return closest;
|
|
}
|
|
},
|
|
{ offset: Number.NEGATIVE_INFINITY }
|
|
).element;
|
|
}
|
|
}
|
|
|
|
getDragAfterElement(container, y) {
|
|
const draggableElements = [...container.querySelectorAll('.track-item:not(.dragging)')];
|
|
|
|
return draggableElements.reduce(
|
|
(closest, child) => {
|
|
const box = child.getBoundingClientRect();
|
|
const offset = y - box.top - box.height / 2;
|
|
if (offset < 0 && offset > closest.offset) {
|
|
return { offset: offset, element: child };
|
|
} else {
|
|
return closest;
|
|
}
|
|
},
|
|
{ offset: Number.NEGATIVE_INFINITY }
|
|
).element;
|
|
}
|
|
|
|
renderApiSettings() {
|
|
const container = document.getElementById('api-instance-list');
|
|
Promise.all([this.api.settings.getInstances('api'), this.api.settings.getInstances('streaming')]).then(
|
|
([apiInstances, streamingInstances]) => {
|
|
const renderGroup = (instances, type) => {
|
|
if (!instances || instances.length === 0) return '';
|
|
|
|
const listHtml = instances
|
|
.map((instance, index) => {
|
|
const isObject = instance && typeof instance === 'object';
|
|
const instanceUrl = isObject ? instance.url || '' : String(instance || '');
|
|
const instanceName = isObject
|
|
? instance.name || instance.displayName || instance.id || instanceUrl
|
|
: instanceUrl;
|
|
const instanceVersion = isObject && instance.version ? String(instance.version) : '';
|
|
const isUser = isObject && instance.isUser;
|
|
const safeName = escapeHtml(instanceName || 'Unknown instance');
|
|
const safeUrl = escapeHtml(instanceUrl || '');
|
|
const safeVersion = escapeHtml(instanceVersion);
|
|
|
|
return `
|
|
<li data-index="${index}" data-type="${type}" data-url="${safeUrl}">
|
|
<div style="flex: 1; min-width: 0;">
|
|
<div class="instance-url">${safeName} ${isUser ? '<span style="font-size: 0.6rem; opacity: 0.7; background: var(--muted); padding: 1px 4px; border-radius: 3px; margin-left: 4px; vertical-align: middle;">U</span>' : ''}</div>
|
|
${safeUrl && safeUrl !== safeName ? `<div style="font-size: 0.8rem; color: var(--muted-foreground); margin-top: 0.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${safeUrl}</div>` : ''}
|
|
${safeVersion ? `<div style="font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.1rem;">v${safeVersion}</div>` : ''}
|
|
</div>
|
|
<div class="controls">
|
|
${
|
|
isUser
|
|
? `
|
|
<button class="delete-instance" title="Delete Instance">
|
|
${SVG_TRASH(16)}
|
|
</button>`
|
|
: ''
|
|
}
|
|
<button class="move-up" title="Move Up" ${index === 0 ? 'disabled' : ''}>
|
|
${SVG_MOVE_UP(16)}
|
|
</button>
|
|
<button class="move-down" title="Move Down" ${index === instances.length - 1 ? 'disabled' : ''}>
|
|
${SVG_MOVE_DOWN(16)}
|
|
</button>
|
|
</div>
|
|
</li>
|
|
`;
|
|
})
|
|
.join('');
|
|
|
|
return `
|
|
<li class="group-header" style="display: flex; justify-content: space-between; align-items: center; font-weight: bold; padding: 1rem 0 0.5rem; background: transparent; border: none;">
|
|
<span>${type === 'api' ? 'API Instances' : 'Streaming Instances'}</span>
|
|
<button class="add-instance" data-type="${type}" title="Add Custom Instance" style="background: var(--primary); color: var(--primary-foreground); border: none; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.75rem; cursor: pointer; pointer-events: auto;">
|
|
Add
|
|
</button>
|
|
</li>
|
|
${listHtml}
|
|
`;
|
|
};
|
|
|
|
container.innerHTML = renderGroup(apiInstances, 'api') + renderGroup(streamingInstances, 'streaming');
|
|
|
|
const stats = this.api.getCacheStats();
|
|
const cacheInfo = document.getElementById('cache-info');
|
|
if (cacheInfo) {
|
|
cacheInfo.textContent = `Cache: ${stats.memoryEntries}/${stats.maxSize} entries`;
|
|
}
|
|
}
|
|
);
|
|
}
|
|
|
|
async renderTrackPage(trackId, provider = null) {
|
|
this.showPage('track');
|
|
|
|
document.body.classList.add('sidebar-collapsed');
|
|
const toggleBtn = document.getElementById('sidebar-toggle');
|
|
if (toggleBtn) {
|
|
toggleBtn.innerHTML = SVG_RIGHT_ARROW(20);
|
|
}
|
|
|
|
const imageEl = document.getElementById('track-detail-image');
|
|
const titleEl = document.getElementById('track-detail-title');
|
|
const artistEl = document.getElementById('track-detail-artist');
|
|
const albumEl = document.getElementById('track-detail-album');
|
|
const yearEl = document.getElementById('track-detail-year');
|
|
const albumSection = document.getElementById('track-album-section');
|
|
const albumTracksContainer = document.getElementById('track-detail-album-tracks');
|
|
const similarSection = document.getElementById('track-similar-section');
|
|
|
|
const playBtn = document.getElementById('play-track-btn');
|
|
const likeBtn = document.getElementById('like-track-btn');
|
|
|
|
imageEl.src = '';
|
|
imageEl.style.backgroundColor = 'var(--muted)';
|
|
titleEl.innerHTML = '<div class="skeleton" style="height: 48px; width: 300px; max-width: 90%;"></div>';
|
|
artistEl.innerHTML = '<div class="skeleton" style="height: 16px; width: 100px;"></div>';
|
|
albumEl.innerHTML = '';
|
|
yearEl.innerHTML = '';
|
|
albumTracksContainer.innerHTML = this.createSkeletonTracks(5, false);
|
|
albumSection.style.display = 'none';
|
|
similarSection.style.display = 'none';
|
|
|
|
if (!trackId || trackId === 'undefined' || trackId === 'null') {
|
|
titleEl.textContent = 'Invalid Track ID';
|
|
artistEl.innerHTML = '';
|
|
return;
|
|
}
|
|
|
|
try {
|
|
let track;
|
|
try {
|
|
const result = await this.api.getTrack(trackId, provider);
|
|
track = result.track;
|
|
} catch (e) {
|
|
console.warn('getTrack failed, trying getTrackMetadata', e);
|
|
track = await this.api.getTrackMetadata(trackId, provider);
|
|
}
|
|
this.currentTrackPageId = track.id;
|
|
|
|
let videoCoverUrl = track.videoUrl || track.videoCoverUrl || track.album?.videoCoverUrl || null;
|
|
|
|
if (!videoCoverUrl && (track.album || track.type === 'video')) {
|
|
const fetchArtwork = () => {
|
|
this.api.getVideoArtwork(track.title, getTrackArtists(track)).then(async (result) => {
|
|
if (result && this.currentPage === 'track' && this.currentTrackPageId === track.id) {
|
|
const url = result.videoUrl || result.hlsUrl;
|
|
if (!url) return;
|
|
track.album = track.album || {};
|
|
track.album.videoCoverUrl = url;
|
|
const currentImageEl = document.getElementById('track-detail-image');
|
|
if (currentImageEl && currentImageEl.tagName !== 'VIDEO') {
|
|
const video = document.createElement('video');
|
|
video.autoplay = true;
|
|
video.loop = true;
|
|
video.muted = true;
|
|
video.playsInline = true;
|
|
video.preload = 'auto';
|
|
video.className = currentImageEl.className;
|
|
video.id = currentImageEl.id;
|
|
video.style.opacity = '1';
|
|
video.poster = currentImageEl.src;
|
|
|
|
await this.setupHlsVideo(video, result, currentImageEl);
|
|
currentImageEl.replaceWith(video);
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
if (track.type === 'video') {
|
|
this.api
|
|
.getVideoStreamUrl(track.id)
|
|
.then((url) => {
|
|
if (url) {
|
|
track.videoUrl = url;
|
|
this.renderTrackPage(trackId, provider);
|
|
} else {
|
|
fetchArtwork();
|
|
}
|
|
})
|
|
.catch(fetchArtwork);
|
|
} else {
|
|
fetchArtwork();
|
|
}
|
|
}
|
|
|
|
const coverUrl = videoCoverUrl || this.api.getCoverUrl(track.image || track.cover || track.album?.cover);
|
|
|
|
if (videoCoverUrl) {
|
|
if (imageEl.tagName !== 'VIDEO') {
|
|
const video = document.createElement('video');
|
|
video.autoplay = true;
|
|
video.loop = true;
|
|
video.muted = true;
|
|
video.playsInline = true;
|
|
video.preload = 'auto';
|
|
video.className = imageEl.className;
|
|
video.id = imageEl.id;
|
|
await this.setupHlsVideo(video, videoCoverUrl, imageEl);
|
|
imageEl.replaceWith(video);
|
|
} else {
|
|
await this.setupHlsVideo(imageEl, videoCoverUrl, null);
|
|
}
|
|
} else {
|
|
if (imageEl.tagName === 'VIDEO') {
|
|
const img = document.createElement('img');
|
|
img.src = coverUrl;
|
|
img.className = imageEl.className;
|
|
img.id = imageEl.id;
|
|
imageEl.replaceWith(img);
|
|
} else {
|
|
imageEl.src = coverUrl;
|
|
}
|
|
}
|
|
imageEl.style.backgroundColor = '';
|
|
|
|
this.setPageBackground(coverUrl);
|
|
if (backgroundSettings.isEnabled() && track.album?.cover) {
|
|
this.extractAndApplyColor(this.api.getCoverUrl(track.album.cover, '80'));
|
|
}
|
|
|
|
const explicitBadge = hasExplicitContent(track) ? this.createExplicitBadge() : '';
|
|
const qualityBadge = createQualityBadgeHTML(track);
|
|
titleEl.innerHTML = `${escapeHtml(track.title)} ${explicitBadge} ${qualityBadge}`;
|
|
this.adjustTitleFontSize(titleEl, track.title);
|
|
|
|
artistEl.innerHTML = getTrackArtistsHTML(track);
|
|
|
|
if (track.album) {
|
|
albumEl.innerHTML = `<a href="/album/${track.album.id}">${escapeHtml(track.album.title)}</a>`;
|
|
}
|
|
|
|
if (track.album?.releaseDate) {
|
|
const date = new Date(track.album.releaseDate);
|
|
if (!isNaN(date.getTime())) {
|
|
yearEl.textContent = date.getFullYear();
|
|
}
|
|
}
|
|
|
|
playBtn.onclick = () => {
|
|
this.player.setQueue([track], 0);
|
|
this.player.playTrackFromQueue();
|
|
};
|
|
|
|
if (likeBtn) {
|
|
const isLiked = await db.isFavorite('track', track.id);
|
|
likeBtn.innerHTML = this.createHeartIcon(isLiked);
|
|
likeBtn.classList.toggle('active', isLiked);
|
|
}
|
|
|
|
if (track.album?.id) {
|
|
const { tracks } = await this.api.getAlbum(track.album.id);
|
|
if (tracks && tracks.length > 0) {
|
|
albumSection.style.display = 'block';
|
|
this.renderListWithTracks(albumTracksContainer, tracks, false);
|
|
}
|
|
}
|
|
|
|
document.title = `${track.title} - ${getTrackArtists(track)}`;
|
|
} catch (error) {
|
|
console.error('Failed to load track:', error);
|
|
titleEl.textContent = 'Track not found';
|
|
artistEl.innerHTML = '';
|
|
}
|
|
}
|
|
}
|