and update its tooltip.
*/
function rebuildQualityPicker() {
const select = $("quality-select");
if (!select) return;
const current = select.value || getTrackQuality();
select.innerHTML = qualityOptions(current, true);
// Ensure selected value is still valid; fall back to saved or HIGH
const validOptions = visibleQualityOptions();
if (!validOptions.includes(select.value)) {
select.value = validOptions.includes(getTrackQuality()) ? getTrackQuality() : "HIGH";
}
// Sync pill-style colouring
updateQualitySelectStyle(select);
// Update the tooltip title attribute
select.title = qualityPickerTip();
// Update the associated tip element if present
const tipEl = select.closest(".quality-picker-wrap")?.querySelector("[data-tip]");
if (tipEl) tipEl.dataset.tip = qualityPickerTip();
// Reflect which quality tiers are actually available for the current queue
updateQualityPickerAvailability();
}
function syncQualityPicker() {
const select = $("quality-select");
if (!select) return;
rebuildQualityPicker();
select.value = getTrackQuality();
updateQualitySelectStyle(select);
}
/**
* Returns the quality that will actually be used for a queue item given the
* requested quality. When the item has a known `maxQuality` that is lower than
* the requested quality, the item's max quality is returned instead.
* @param {{maxQuality?: string|null}} item
* @param {string} requestedQuality
* @returns {string}
*/
function effectiveDownloadQuality(item, requestedQuality) {
if (!item.maxQuality) return requestedQuality;
const reqIdx = QUALITY_ORDER.indexOf(requestedQuality);
const maxIdx = QUALITY_ORDER.indexOf(item.maxQuality);
if (reqIdx === -1 || maxIdx === -1) return requestedQuality;
// QUALITY_ORDER is highest-first; a larger index means a lower quality tier.
// Cap the requested quality at the item's max by taking the larger (lower-quality) index.
return QUALITY_ORDER[Math.max(reqIdx, maxIdx)];
}
/**
* Enable or disable the HI_RES_LOSSLESS option in the global quality picker
* based on how many queued items with a known max quality actually support it.
* Items whose max quality is unknown (e.g. albums/playlists pasted by URL) are
* excluded from the count so they don't incorrectly suppress the option.
*/
function updateQualityPickerAvailability() {
const select = $("quality-select");
if (!select) return;
const knownItems = downloadQueue.filter((q) => q.maxQuality);
const anySupportsMax = knownItems.some((q) => q.maxQuality === "HI_RES_LOSSLESS");
const disableMax = knownItems.length > 0 && !anySupportsMax;
const maxOpt = select.querySelector('option[value="HI_RES_LOSSLESS"]');
if (!maxOpt) return;
if (disableMax) {
maxOpt.disabled = true;
maxOpt.textContent = "Max \u2014 not available";
if (select.value === "HI_RES_LOSSLESS") {
// Silently fall back to the next best tier without persisting the change
// so the preference is restored when Max becomes available again.
const fallback = QUALITY_ORDER.find((q) => q !== "HI_RES_LOSSLESS") ?? "LOSSLESS";
select.value = fallback;
updateQualitySelectStyle(select);
}
} else {
maxOpt.disabled = false;
maxOpt.textContent = QUALITY_DESCRIPTIONS.HI_RES_LOSSLESS || "Max \u2014 FLAC 24-bit";
}
}
function initQualityPicker() {
const select = $("quality-select");
if (!select) return;
rebuildQualityPicker();
select.value = getTrackQuality();
updateQualitySelectStyle(select);
select.addEventListener("change", () => {
const q = select.value;
setTrackQuality(q);
updateQualitySelectStyle(select);
const advanced = getAdvancedMode();
if (advanced && downloadQueue.length > 0) {
if (confirm(`Apply "${QUALITY_LABELS[q] || q}" quality to all ${downloadQueue.length} item(s) in queue?`)) {
downloadQueue.forEach((item) => { item.quality = q; });
renderQueue();
}
} else {
// Normal mode: quality is read dynamically from the select for all items
renderQueue();
}
});
}
/**
* Sync the downloads-panel UI to reflect the current all-qualities mode state.
* - Disables/re-enables the main quality picker.
* - Shows or hides the all-qualities info banner.
* - Re-renders the queue to update per-item quality indicators.
*/
function updateAllQualitiesUI() {
const on = getAllQualitiesMode();
const select = $("quality-select");
const banner = $("all-qualities-banner");
const qualityWrap = select?.closest(".quality-picker-wrap");
if (select) {
select.disabled = on;
if (on) {
select.dataset.quality = "";
} else {
updateQualitySelectStyle(select);
}
}
if (qualityWrap) {
qualityWrap.classList.toggle("quality-picker-disabled", on);
}
if (banner) {
banner.classList.toggle("hidden", !on);
}
renderQueue();
}
// ─── Download queue ───────────────────────────────────────────────────────────
const downloadQueue = [];
const CARD_QUEUE_BTN_PLUS = `
`;
const q = item.quality || getSelectedQuality();
let qualityHtml;
if (allQualities) {
// In all-qualities mode, show a pill indicating all tiers will be downloaded
qualityHtml = `All Qualities `;
} else if (advanced) {
qualityHtml = `
${qualityOptions(q, false, item.maxQuality || null)}
`;
} else {
// In normal mode, show the quality that will actually be downloaded.
// When the global quality exceeds the item's known max, cap it.
const displayQ = effectiveDownloadQuality(item, q);
qualityHtml = `${escHtml(QUALITY_LABELS[displayQ] || displayQ)} `;
}
return `
${thumbHtml}
${escHtml(item.title)}
${escHtml(item.sub)}
${escHtml(item.type)}
${qualityHtml}
${escHtml(label)}
`;
pill.querySelector(".url-pill-remove").addEventListener("click", () => {
if (isValid && resource) {
const idx = downloadQueue.findIndex(
(q) => q.type === resource.type && String(q.id) === String(resource.id)
);
if (idx !== -1) removeFromQueue(idx);
}
pill.remove();
});
pillBox.insertBefore(pill, input);
if (!isValid) {
appendLog(`Could not parse "${trimmed}" as a Tidal URL.`, "warn");
}
return isValid;
}
/**
* After adding a URL-based queue item, asynchronously fetch its real metadata
* (title, artist, cover) from the API and update the queue display.
*/
async function enrichQueueItemFromUrl(type, id) {
if (!isLoggedIn()) return;
try {
let title = "", sub = "", cover = "", coverRound = false, maxQuality = null;
if (type === "track") {
const data = await getTrack(id);
title = data.title || "";
sub = data.artist?.name || "";
cover = coverUrl(data.album?.cover);
maxQuality = effectiveQuality(data) || null;
} else if (type === "album") {
const data = await getAlbum(id);
title = data.title || "";
sub = data.artist?.name || "";
cover = coverUrl(data.cover);
maxQuality = effectiveQuality(data) || null;
} else if (type === "playlist") {
const data = await getPlaylist(id);
title = data.title || "";
sub = data.creator?.name || "Tidal";
cover = coverUrl(data.image || data.squareImage);
} else if (type === "artist") {
const data = await getArtist(id);
title = data.name || "";
sub = "Artist";
cover = coverUrl(data.picture);
coverRound = true;
} else if (type === "video") {
const data = await getVideo(id);
title = data.title || "";
sub = data.artist?.name || "";
cover = coverUrl(data.imageId || data.album?.cover);
} else {
return; // mix — no direct metadata endpoint
}
if (!title) return;
const item = downloadQueue.find(
(q) => q.type === type && String(q.id) === String(id) && q.fromUrl
);
if (item) {
item.title = title;
item.sub = sub;
item.cover = cover;
item.coverRound = coverRound;
if (maxQuality) item.maxQuality = maxQuality;
renderQueue();
}
// Also update the URL pill label so it shows the real title instead of type/id
const pillEl = document.querySelector(`.url-pill[data-type="${CSS.escape(type)}"][data-id="${CSS.escape(String(id))}"]`);
if (pillEl) {
const labelEl = pillEl.querySelector(".url-pill-label");
if (labelEl) {
labelEl.textContent = sub ? `${title} — ${sub}` : title;
labelEl.title = sub ? `${title} — ${sub}` : title;
}
}
} catch {
// Silently fail — the URL/ID placeholder remains visible
}
}
function initUrlPillInput() {
const input = $("url-pill-input");
const pillBox = $("url-pill-box");
if (!input || !pillBox) return;
pillBox.addEventListener("click", (e) => {
if (!e.target.closest(".url-pill")) input.focus();
});
input.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === ",") {
e.preventDefault();
const val = input.value.trim();
if (val) { addUrlPill(val); input.value = ""; }
} else if (e.key === "Backspace" && !input.value) {
const pills = pillBox.querySelectorAll(".url-pill");
if (pills.length) {
const last = pills[pills.length - 1];
const type = last.dataset.type;
const id = last.dataset.id;
if (type && id) {
const idx = downloadQueue.findIndex(
(q) => q.type === type && String(q.id) === String(id)
);
if (idx !== -1) removeFromQueue(idx);
}
last.remove();
}
}
});
input.addEventListener("paste", (e) => {
const text = (e.clipboardData || window.clipboardData)?.getData("text");
if (!text) return;
const lines = text.split(/[\n\r,]+/).map((l) => l.trim()).filter(Boolean);
if (lines.length > 1) {
e.preventDefault();
lines.forEach((line) => addUrlPill(line));
input.value = "";
}
});
// File import
const fileInput = $("url-file-input");
const importBtn = $("btn-import-file");
importBtn?.addEventListener("click", () => fileInput?.click());
fileInput?.addEventListener("change", () => {
const file = fileInput.files[0];
if (!file) return;
const ext = (file.name.split(".").pop() || "").toLowerCase();
const reader = new FileReader();
reader.onerror = () => {
appendLog(`Could not read "${escHtml(file.name)}".`, "error");
fileInput.value = "";
};
reader.onload = (ev) => {
const text = ev.target.result || "";
const tokens = extractTidalTokens(text, ext);
let added = 0;
tokens.forEach((token) => { if (addUrlPill(token)) added++; });
if (added > 0) {
appendLog(`Imported ${added} URL(s) from "${escHtml(file.name)}".`, "info");
} else if (BINARY_OFFICE_EXTS.has(ext)) {
appendLog(
`No Tidal URLs found in "${escHtml(file.name)}". ` +
`.${ext} is a binary format — text extraction may be unreliable. ` +
`Try saving the file as plain text (.txt) first and import again.`,
"warn"
);
} else {
appendLog(`No Tidal URLs found in "${escHtml(file.name)}".`, "warn");
}
fileInput.value = "";
};
reader.readAsText(file, "utf-8");
});
}
// ─── Search ───────────────────────────────────────────────────────────────────
let lastSearchData = null;
let activeTypeFilter = "all";
const INITIAL_LIMIT = 8;
function updateSearchClearBtn() {
const input = $("search-input");
const btn = $("btn-clear-search");
if (!btn || !input) return;
btn.classList.toggle("hidden", !input.value);
}
function showSearchHistory() {
const history = loadSearchHistory();
const histEl = $("search-history");
const listEl = $("search-history-list");
if (!histEl || !listEl) return;
if (!history.length) { hide(histEl); return; }
listEl.innerHTML = history.map((q) =>
`
`
).join("");
listEl.querySelectorAll(".search-history-item").forEach((btn) => {
btn.addEventListener("click", () => {
const input = $("search-input");
if (input) input.value = btn.dataset.query;
updateSearchClearBtn();
hide(histEl);
handleSearch();
});
});
show(histEl);
}
function buildResultCard(resourceType, id, title, sub, cover, round, quality = null) {
const inQueue = downloadQueue.some(
(q) => q.type === resourceType && String(q.id) === String(id)
);
const isTrack = resourceType === "track";
const imgHtml = cover
? `
`;
const overlayHtml = isTrack
? ``
: ``;
return `
${imgHtml}${overlayHtml}
${escHtml(title)}
${escHtml(sub)}
${quality ? qualityPill(quality) : ""}
`;
}
function buildResultGrid(items, type, shownCount, totalCount) {
if (!items.length) return "";
const typeLabel = type.charAt(0).toUpperCase() + type.slice(1);
let html = `
${typeLabel}
`;
for (const item of items.slice(0, shownCount)) {
let id, title, sub, cover, round = false, quality = null;
if (type === "tracks") {
id = item.id; title = formatTrackTitle(item); sub = item.artist?.name || "";
cover = coverUrl(item.album?.cover); quality = effectiveQuality(item);
} else if (type === "albums") {
id = item.id; title = item.title; sub = item.artist?.name || "";
cover = coverUrl(item.cover); quality = effectiveQuality(item);
} else if (type === "artists") {
id = item.id; title = item.name; sub = "Artist";
cover = coverUrl(item.picture); round = true;
} else if (type === "playlists") {
id = item.uuid; title = item.title; sub = item.creator?.name || "Tidal";
cover = coverUrl(item.image || item.squareImage);
}
const resourceType = type === "tracks" ? "track"
: type === "albums" ? "album"
: type === "artists" ? "artist"
: "playlist";
html += buildResultCard(resourceType, id, title, sub, cover, round, quality);
}
html += `
`;
if (totalCount > shownCount) {
html += `
View more (${totalCount - shownCount} more)
`;
}
html += `
`;
return html;
}
/**
* Build a horizontally-scrollable single-row section for a set of items.
* Used in "From your library" suggestions and artist detail panels.
* @param {Array} items - Array of Tidal resource objects
* @param {string} type - "tracks" | "albums" | "artists" | "playlists"
* @param {string} heading - Display heading text
* @param {string} viewAllKey - Unique key written to data-viewall on the button
*/
function buildResultRowSection(items, type, heading, viewAllKey) {
if (!items.length) return "";
let cardsHtml = "";
for (const item of items) {
let id, title, sub, cover, round = false, quality = null;
if (type === "tracks") {
id = item.id; title = formatTrackTitle(item); sub = item.artist?.name || "";
cover = coverUrl(item.album?.cover); quality = effectiveQuality(item);
} else if (type === "albums") {
id = item.id; title = item.title; sub = item.artist?.name || "";
cover = coverUrl(item.cover); quality = effectiveQuality(item);
} else if (type === "artists") {
id = item.id; title = item.name; sub = "Artist";
cover = coverUrl(item.picture); round = true;
} else if (type === "playlists") {
id = item.uuid; title = item.title; sub = item.creator?.name || "Tidal";
cover = coverUrl(item.image || item.squareImage);
}
const resourceType = type === "tracks" ? "track"
: type === "albums" ? "album"
: type === "artists" ? "artist"
: "playlist";
cardsHtml += buildResultCard(resourceType, id, title, sub, cover, round, quality);
}
return ``;
}
function renderSearchResults(data, filter = "all") {
const container = $("search-results");
if (!container) return;
const tracks = data?.tracks?.items || [];
const albums = data?.albums?.items || [];
const artists = data?.artists?.items || [];
const playlists = data?.playlists?.items || [];
if (!tracks.length && !albums.length && !artists.length && !playlists.length) {
container.innerHTML = 'No results found.
';
return;
}
let html = "";
const showType = (t) => filter === "all" || filter === t;
if (showType("tracks")) html += buildResultGrid(tracks, "tracks", INITIAL_LIMIT, tracks.length);
if (showType("albums")) html += buildResultGrid(albums, "albums", INITIAL_LIMIT, albums.length);
if (showType("artists")) html += buildResultGrid(artists, "artists", INITIAL_LIMIT, artists.length);
if (showType("playlists")) html += buildResultGrid(playlists, "playlists", INITIAL_LIMIT, playlists.length);
container.innerHTML = html || 'No results for this category.
';
attachResultHandlers(container);
}
function attachResultHandlers(container) {
container.querySelectorAll(".result-card").forEach((card) => {
const isTrack = card.dataset.type === "track";
if (isTrack) {
card.addEventListener("click", () => toggleResultInQueue(card));
card.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggleResultInQueue(card); }
});
} else {
// Main card click -> detail
card.addEventListener("click", (e) => {
if (e.target.closest(".card-queue-btn")) return;
navigateToDetail(card.dataset.type, card.dataset.id,
card.dataset.title, card.dataset.sub, card.dataset.cover, "search",
card.dataset.quality || null);
});
card.addEventListener("keydown", (e) => {
if (e.key === "Enter") {
navigateToDetail(card.dataset.type, card.dataset.id,
card.dataset.title, card.dataset.sub, card.dataset.cover, "search",
card.dataset.quality || null);
}
});
// Quick-add button
const qaBtn = card.querySelector(".card-queue-btn");
if (qaBtn) {
qaBtn.addEventListener("click", (e) => {
e.stopPropagation();
toggleResultInQueue(card);
});
}
}
});
container.querySelectorAll(".btn-view-more").forEach((btn) => {
btn.addEventListener("click", () => {
const type = btn.dataset.type;
const shown = parseInt(btn.dataset.shown, 10);
const items = lastSearchData?.[type]?.items || [];
const newShown = shown + INITIAL_LIMIT;
const sectionEl = container.querySelector(`.result-section[data-section="${type}"]`);
if (sectionEl) {
const tmp = document.createElement("div");
tmp.innerHTML = buildResultGrid(items, type, newShown, items.length);
sectionEl.replaceWith(tmp.firstElementChild);
attachResultHandlers(container);
}
});
});
}
function toggleResultInQueue(card) {
const type = card.dataset.type;
const id = card.dataset.id;
const title = card.dataset.title;
const sub = card.dataset.sub;
const cover = card.dataset.cover;
const round = card.dataset.round === "true";
const maxQuality = card.dataset.quality || null;
const existing = downloadQueue.findIndex(
(q) => q.type === type && String(q.id) === String(id)
);
if (existing !== -1) {
removeFromQueue(existing);
} else {
addToQueue({ type, id, title, sub, cover, coverRound: round, maxQuality });
card.classList.add("selected");
card.setAttribute("aria-pressed", "true");
// Update quick-add button
const qaBtn = card.querySelector(".card-queue-btn");
if (qaBtn) {
qaBtn.classList.add("in-queue");
qaBtn.innerHTML = `
';
try {
const data = await search(query, 20);
lastSearchData = data;
renderSearchResults(data, activeTypeFilter);
} catch (err) {
if (container)
container.innerHTML = `Search failed: ${escHtml(err.message)}
`;
} finally {
searchBtn.disabled = false;
}
}
async function showSearchSuggestions() {
if (!isLoggedIn()) return;
const container = $("search-results");
if (!container || container.children.length) return; // already has content
container.innerHTML = '
';
try {
const [tracksData, albumsData] = await Promise.all([
getUserFavoriteTracks(8, 0).catch(() => ({ items: [] })),
getUserFavoriteAlbums(8, 0).catch(() => ({ items: [] })),
]);
const tracks = (tracksData.items || []).map((i) => i.item || i);
const albums = (albumsData.items || []).map((i) => i.item || i);
if (!tracks.length && !albums.length) {
container.innerHTML = 'Search for tracks, albums, artists or playlists above.
';
return;
}
let html = 'From your library ';
if (tracks.length) html += buildResultRowSection(tracks, "tracks", "Tracks", "lib-tracks");
if (albums.length) html += buildResultRowSection(albums, "albums", "Albums", "lib-albums");
container.innerHTML = html;
attachResultHandlers(container);
// "View all" navigates to the Library tab with the matching section
const goToLibrarySection = (section) => {
_librarySection = section;
document.querySelectorAll("#library-section-pills .type-pill").forEach((p) =>
p.classList.toggle("active", p.dataset.section === section)
);
activateTab("library");
loadLibraryIfNeeded();
};
container.querySelector('[data-viewall="lib-tracks"]')?.addEventListener("click", () => goToLibrarySection("tracks"));
container.querySelector('[data-viewall="lib-albums"]')?.addEventListener("click", () => goToLibrarySection("albums"));
} catch {
container.innerHTML = 'Search for tracks, albums, artists or playlists above.
';
}
}
// ─── Detail panel ─────────────────────────────────────────────────────────────
/** Build the inner HTML for the detail queue button, reflecting current queue state. */
function _detailQueueBtnHtml(typeLabel, isInQueue) {
if (isInQueue) {
return `
${largerCover
? `
`
: `
`}
';
try {
if (type === "artist") {
await renderArtistDetail(id, title, body);
} else if (type === "album") {
await renderAlbumDetail(id, body, hintQuality);
} else if (type === "playlist") {
await renderPlaylistDetail(id, body);
}
} catch (err) {
body.innerHTML = `Failed to load: ${escHtml(err.message)}
`;
}
}
async function renderArtistDetail(artistId, artistName, body) {
const [albumsData, singlesData] = await Promise.all([
getArtistAlbums(artistId, 20, 0).catch(() => ({ items: [] })),
getArtistSingles(artistId, 20, 0).catch(() => ({ items: [] })),
]);
const albums = albumsData.items || [];
const singles = singlesData.items || [];
function makeAlbumCards(items) {
return items.map((album) => {
const c = coverUrl(album.cover);
return buildResultCard("album", album.id, album.title, album.releaseDate?.slice(0,4) || "", c, false, effectiveQuality(album));
}).join("");
}
function buildArtistSection(items, heading, sectionKey) {
if (!items.length) return "";
const cardsHtml = makeAlbumCards(items);
return `
${cardsHtml}
${cardsHtml}
`;
}
let html = "";
if (albums.length) html += buildArtistSection(albums, "Albums", "albums");
if (singles.length) html += buildArtistSection(singles, "Singles & EPs", "singles");
if (!html) html = `No releases found for this artist.
`;
body.innerHTML = html;
// "View all" swaps the horizontal row for the full grid
body.querySelectorAll(".artist-release-section .btn-view-all").forEach((btn) => {
btn.addEventListener("click", () => {
const section = btn.closest(".artist-release-section");
if (!section) return;
section.querySelector(".result-row")?.classList.add("hidden");
section.querySelector(".detail-album-grid")?.classList.remove("hidden");
btn.remove();
});
});
attachResultHandlers(body);
}
async function renderAlbumDetail(albumId, body, hintQuality = null) {
const [albumMeta, allItems] = await Promise.all([
getAlbum(albumId),
getAllAlbumItems(albumId),
]);
const tracks = (allItems || []).filter((i) => i.type === "track").map((i) => i.item);
// Determine the best available quality from all sources: album metadata,
// individual track qualities, and the hint carried from the search result or
// library card that opened this view (search/library endpoints sometimes
// return more accurate quality data than the album endpoint itself).
const albumMetaQuality = effectiveQuality(albumMeta);
const trackQualities = new Set(tracks.map((t) => effectiveQuality(t)).filter(Boolean));
const bestTrackQuality = QUALITY_ORDER.find((q) => trackQualities.has(q)) || null;
const albumQuality = QUALITY_ORDER.find((q) =>
q === albumMetaQuality || q === bestTrackQuality || q === hintQuality
) || null;
// Make the artist name in the header a link to the artist's detail page
const artistId = albumMeta.artist?.id;
const artistName = albumMeta.artist?.name || "";
const artistCover = coverUrl(albumMeta.artist?.picture);
const subEl = $("detail-sub");
if (subEl && artistId) {
subEl.innerHTML = "";
const btn = document.createElement("button");
btn.className = "detail-artist-link";
btn.textContent = artistName;
btn.addEventListener("click", (e) => {
e.stopPropagation();
navigateToDetail("artist", artistId, artistName, "", artistCover, _detailOriginTab);
});
subEl.appendChild(btn);
}
// Update the detail header quality pill with the album's best quality
const headerQualityEl = $("detail-header-quality");
if (headerQualityEl) headerQualityEl.innerHTML = qualityPill(albumQuality);
// Populate the metadata row: track count, duration, year
const headerMetaEl = $("detail-header-meta");
if (headerMetaEl) {
const year = albumMeta.releaseDate ? albumMeta.releaseDate.slice(0, 4) : null;
const trackCount = albumMeta.numberOfTracks || tracks.length;
const totalDuration = albumMeta.duration
? formatDuration(albumMeta.duration)
: tracks.reduce((sum, t) => sum + (t.duration || 0), 0) > 0
? formatDuration(tracks.reduce((sum, t) => sum + (t.duration || 0), 0))
: null;
const parts = [];
if (trackCount) parts.push(`${trackCount} track${trackCount > 1 ? "s" : ""}`);
if (totalDuration) parts.push(totalDuration);
if (year) parts.push(year);
headerMetaEl.innerHTML = parts.length
? `${escHtml(parts.join(" \u00b7 "))} ${qualityPill(albumQuality)}`
: qualityPill(albumQuality);
// Hide the type-row quality span to avoid duplication when meta row is shown
if (parts.length && headerQualityEl) headerQualityEl.innerHTML = "";
}
body.innerHTML = `${tracks.map((t, i) => {
const inQ = downloadQueue.some((q) => q.type === "track" && String(q.id) === String(t.id));
const coverArt = coverUrl(albumMeta.cover);
const displayTitle = formatTrackTitle(t);
// Use the highest of the track's own reported quality and the album quality,
// since all tracks in a Hi-Res album should be Hi-Res even when the items
// endpoint reports a lower tier.
const tq = effectiveQuality(t);
const trackQuality = QUALITY_ORDER.find((q) => q === tq || q === albumQuality) || null;
return `
${i + 1}
${escHtml(displayTitle)}
${escHtml(t.artist?.name || "")}
${qualityPill(trackQuality)}
${inQ ? "\u2713 Added" : "+ Add"}
`;
}).join("")}
${escHtml(parts.join(" \u00b7 "))} ${qualityPill(maxPlaylistQuality)}`
: qualityPill(maxPlaylistQuality);
if (parts.length && headerQualityEl) headerQualityEl.innerHTML = "";
}
body.innerHTML = `${tracks.map((t, i) => {
const inQ = downloadQueue.some((q) => q.type === "track" && String(q.id) === String(t.id));
const coverArt = coverUrl(t.album?.cover);
const displayTitle = formatTrackTitle(t);
const tq = effectiveQuality(t);
return `
${i + 1}
${escHtml(displayTitle)}
${escHtml(t.artist?.name || "")}
${qualityPill(tq)}
${inQ ? "\u2713 Added" : "+ Add"}
`;
}).join("")}
Sign in to see your library.
';
return;
}
// Show welcome message if just logged in
if (sessionStorage.getItem("tiddl_session_welcome")) {
sessionStorage.removeItem("tiddl_session_welcome");
const auth = loadAuth();
const welcome = $("library-welcome");
const name = $("library-welcome-name");
if (welcome) {
if (name) name.textContent = `Welcome, ${auth?.username || "friend"}!`;
show(welcome);
setTimeout(() => hide(welcome), 5000);
}
}
if (!_libraryLoaded[_librarySection]) {
renderLibraryContent(null);
try {
if (_librarySection === "tracks") {
const items = await getAllUserFavoriteTracks();
_libraryData.tracks = items.map((i) => ({ ...(i.item || i), _dateAdded: i.created || i.dateAdded || "" }));
} else if (_librarySection === "albums") {
const items = await getAllUserFavoriteAlbums();
_libraryData.albums = items.map((i) => ({ ...(i.item || i), _dateAdded: i.created || i.dateAdded || "" }));
} else if (_librarySection === "playlists") {
const [favItems, ownItems] = await Promise.all([
getAllUserFavoritePlaylists().catch(() => []),
getAllUserPlaylists().catch(() => []),
]);
const favMapped = favItems.map((i) => ({ ...(i.item || i), _dateAdded: i.created || i.dateAdded || "" }));
const ownMapped = ownItems.map((i) => ({ ...(i.item || i), _dateAdded: i.created || i.dateAdded || "" }));
// Deduplicate by uuid
const seen = new Set();
_libraryData.playlists = [...ownMapped, ...favMapped].filter((p) => {
const key = p.uuid || p.id;
if (seen.has(key)) return false;
seen.add(key); return true;
});
}
_libraryLoaded[_librarySection] = true;
renderLibraryContent(_libraryData[_librarySection]);
} catch (err) {
const content = $("library-content");
if (content) content.innerHTML = `Failed to load library: ${escHtml(err.message)}
`;
}
} else {
renderLibraryContent(_libraryData[_librarySection]);
}
}
function renderLibraryContent(items) {
const content = $("library-content");
if (!content) return;
if (items === null) {
content.innerHTML = '
';
return;
}
if (!items.length) {
content.innerHTML = 'Nothing here yet.
';
return;
}
// Apply sort
const sorted = [...items].sort((a, b) => {
let cmp = 0;
if (_librarySort === "title") {
cmp = (a.title || a.name || "").localeCompare(b.title || b.name || "");
} else if (_librarySort === "artist") {
cmp = (a.artist?.name || a.creator?.name || "").localeCompare(b.artist?.name || b.creator?.name || "");
} else {
// dateAdded — compare a to b (asc = oldest first, desc = newest first)
cmp = (a._dateAdded || "").localeCompare(b._dateAdded || "");
}
return _librarySortDir === "asc" ? cmp : -cmp;
});
// Apply filter
const filterTerm = _libraryFilter.toLowerCase().trim();
const filtered = filterTerm
? sorted.filter((item) => {
const title = (item.title || item.name || "").toLowerCase();
const artist = (item.artist?.name || item.creator?.name || "").toLowerCase();
return title.includes(filterTerm) || artist.includes(filterTerm);
})
: sorted;
if (!filtered.length) {
content.innerHTML = `No results for “${escHtml(_libraryFilter)}”.
`;
return;
}
if (_librarySection === "tracks") {
content.innerHTML = `
${filtered.map((t) => {
const inQ = downloadQueue.some((q) => q.type === "track" && String(q.id) === String(t.id));
const cover = coverUrl(t.album?.cover, 80);
const dateLabel = _librarySort === "dateAdded" && t._dateAdded
? (t._dateAdded.length >= 10 ? t._dateAdded.slice(0, 10) : t._dateAdded)
: "";
const displayTitle = formatTrackTitle(t);
const tq = effectiveQuality(t);
return `
${cover ? `
` : `
`}
${escHtml(displayTitle)}
${escHtml(t.artist?.name || "")}
${qualityPill(tq)}
${dateLabel ? `
${escHtml(dateLabel)} ` : ""}
${inQ ? "\u2713 Added" : "+ Add"}
`;
}).join("")}
`;
for (const item of filtered) {
const id = type === "album" ? item.id : (item.uuid || item.id);
const title = item.title || item.name || "";
const sub = type === "album" ? (item.artist?.name || "") : (item.creator?.name || "Tidal");
const cover = coverUrl(type === "album" ? item.cover : (item.image || item.squareImage));
const quality = type === "album" ? effectiveQuality(item) : null;
html += buildResultCard(type, id, title, sub, cover, false, quality);
}
html += `
`;
content.innerHTML = html;
attachLibraryCardHandlers(content);
}
}
function attachLibraryCardHandlers(container) {
container.querySelectorAll(".result-card").forEach((card) => {
const isTrack = card.dataset.type === "track";
if (isTrack) {
card.addEventListener("click", () => toggleResultInQueue(card));
} else {
card.addEventListener("click", (e) => {
if (e.target.closest(".card-queue-btn")) return;
navigateToDetail(card.dataset.type, card.dataset.id,
card.dataset.title, card.dataset.sub, card.dataset.cover, "library",
card.dataset.quality || null);
});
const qaBtn = card.querySelector(".card-queue-btn");
if (qaBtn) qaBtn.addEventListener("click", (e) => { e.stopPropagation(); toggleResultInQueue(card); });
}
});
}
// ─── Settings ─────────────────────────────────────────────────────────────────
function handleSaveSettings() {
saveSettingsForm(appendLog);
// Re-render queue in case advanced mode changed
renderQueue();
// Sync quality picker with saved setting (without re-attaching event listeners)
syncQualityPicker();
// Sync all-qualities mode UI (banner, disabled state of picker)
updateAllQualitiesUI();
const msg = $("settings-save-msg");
if (msg) {
msg.classList.add("visible");
setTimeout(() => msg.classList.remove("visible"), 2500);
}
}
// ─── Theme icon ───────────────────────────────────────────────────────────────
const THEME_ICONS = {
dark: ` elements from toggling their checkbox.
// The capture phase intercepts the click before it bubbles to the label.
document.addEventListener("click", (e) => {
if (e.target.closest(".tip")) { e.preventDefault(); e.stopPropagation(); }
}, true);
}
export function init() {
initTooltips();
// Apply stored appearance
const theme = getTheme();
applyTheme(theme);
applyAccentColor(getAccentColor());
updateThemeIcon();
initBrowserChrome();
// Nav tabs
document.querySelectorAll(".tab-btn").forEach((btn) =>
btn.addEventListener("click", () => {
const tab = btn.dataset.tab;
activateTab(tab);
if (tab === "library") loadLibraryIfNeeded();
if (tab === "search" && !lastSearchData && isLoggedIn()) showSearchSuggestions();
})
);
// Detail back button
$("btn-detail-back")?.addEventListener("click", backFromDetail);
// Auth
$("btn-login")?.addEventListener("click", startLogin);
$("btn-logout")?.addEventListener("click", handleLogout);
// Download status panel tab switching
$("dl-tab-progress-btn")?.addEventListener("click", () => switchDlTab("progress"));
$("dl-tab-log-btn")?.addEventListener("click", () => switchDlTab("log"));
$("btn-clear-log")?.addEventListener("click", clearLog);
$("btn-export-log")?.addEventListener("click", exportLog);
// Toggle collapse/expand of the pinned status bar
$("btn-toggle-status-bar")?.addEventListener("click", () => {
const bar = $("dl-status-bar");
const btn = $("btn-toggle-status-bar");
if (!bar) return;
const nowCollapsed = bar.classList.toggle("collapsed");
if (btn) {
btn.setAttribute("aria-expanded", String(!nowCollapsed));
btn.setAttribute("aria-label", nowCollapsed ? "Expand status bar" : "Collapse status bar");
}
});
// Download
$("btn-download")?.addEventListener("click", handleDownload);
$("btn-clear-queue")?.addEventListener("click", clearQueue);
// URL pill input + file import
initUrlPillInput();
// Quality picker
initQualityPicker();
// Search
$("btn-search")?.addEventListener("click", handleSearch);
const searchInput = $("search-input");
searchInput?.addEventListener("keydown", (e) => { if (e.key === "Enter") handleSearch(); });
searchInput?.addEventListener("input", () => {
updateSearchClearBtn();
const container = $("search-results");
if (!searchInput.value && container && lastSearchData) {
lastSearchData = null;
container.innerHTML = "";
if (isLoggedIn()) showSearchSuggestions();
}
});
searchInput?.addEventListener("focus", () => showSearchHistory());
searchInput?.addEventListener("blur", () => setTimeout(() => hide($("search-history")), 150));
$("btn-clear-search")?.addEventListener("click", () => {
if (searchInput) searchInput.value = "";
updateSearchClearBtn();
const container = $("search-results");
if (container) container.innerHTML = "";
lastSearchData = null;
hide($("search-history"));
if (isLoggedIn()) showSearchSuggestions();
});
$("btn-clear-history")?.addEventListener("click", () => {
clearSearchHistory();
hide($("search-history"));
});
$("btn-go-downloads")?.addEventListener("click", () => activateTab("download"));
// Search type pills — also trigger search if query is present but no results yet
document.querySelectorAll(".type-pill").forEach((pill) => {
if (!pill.closest("#search-type-pills")) return;
pill.addEventListener("click", () => {
activeTypeFilter = pill.dataset.type;
document.querySelectorAll("#search-type-pills .type-pill").forEach((p) =>
p.classList.toggle("active", p.dataset.type === activeTypeFilter)
);
if (lastSearchData) {
renderSearchResults(lastSearchData, activeTypeFilter);
} else if ($("search-input")?.value?.trim()) {
handleSearch();
}
});
});
// Library section pills
document.querySelectorAll("#library-section-pills .type-pill").forEach((pill) => {
pill.addEventListener("click", () => {
_librarySection = pill.dataset.section;
_libraryFilter = "";
const filterInput = $("library-filter-input");
if (filterInput) { filterInput.value = ""; }
hide($("btn-clear-library-filter"));
document.querySelectorAll("#library-section-pills .type-pill").forEach((p) =>
p.classList.toggle("active", p.dataset.section === _librarySection)
);
loadLibraryIfNeeded();
});
});
// Library sort select
$("library-sort-select")?.addEventListener("change", (e) => {
const [field, dir] = e.target.value.split("-");
_librarySort = field;
_librarySortDir = dir || "asc";
if (_libraryLoaded[_librarySection]) {
renderLibraryContent(_libraryData[_librarySection]);
}
});
// Library filter input
const libraryFilterInput = $("library-filter-input");
const btnClearLibFilter = $("btn-clear-library-filter");
libraryFilterInput?.addEventListener("input", () => {
_libraryFilter = libraryFilterInput.value;
btnClearLibFilter?.classList.toggle("hidden", !libraryFilterInput.value);
if (_libraryLoaded[_librarySection]) {
renderLibraryContent(_libraryData[_librarySection]);
}
});
btnClearLibFilter?.addEventListener("click", () => {
libraryFilterInput.value = "";
_libraryFilter = "";
hide(btnClearLibFilter);
if (_libraryLoaded[_librarySection]) {
renderLibraryContent(_libraryData[_librarySection]);
}
});
// Account page logged-in buttons
$("btn-go-library-from-auth")?.addEventListener("click", () => {
activateTab("library");
loadLibraryIfNeeded();
});
$("btn-go-download-from-auth")?.addEventListener("click", () => activateTab("download"));
$("btn-logout-account")?.addEventListener("click", handleLogout);
// Help page side nav
document.querySelectorAll(".help-nav-btn").forEach((btn) => {
btn.addEventListener("click", () => {
const sectionId = btn.dataset.section;
document.querySelectorAll(".help-nav-btn").forEach((b) =>
b.classList.toggle("active", b.dataset.section === sectionId)
);
document.querySelectorAll(".help-section").forEach((s) =>
s.classList.toggle("active", s.id === `help-${sectionId}`)
);
});
});
// Settings
$("btn-save-settings")?.addEventListener("click", handleSaveSettings);
// Theme toggle
$("theme-toggle")?.addEventListener("click", () => { cycleTheme(); updateThemeIcon(); });
initThemeUI();
initAccentColorUI(appendLog);
initUiEffectsUI();
initTemplateBuilders();
initExperimentalSettingUI();
// Initial state
updateAuthBadge();
loadSettingsForm();
updateAllQualitiesUI();
if (!isLoggedIn()) {
activateTab("auth");
} else {
activateTab("download");
// Preload search suggestions in background
showSearchSuggestions();
}
}