- ${track.name}
+
- ${index + 1}
+
+
-
+ ${track.name}
+
+
+ ${track.artists.map(a => `${a.name}`).join(', ')}
+
- ${track.artists.map(a => `${a.name}`).join(', ')}
-
- ${msToTime(track.duration_ms)}
-
- `;
-
+ ${msToTime(track.duration_ms)}
+
+ `;
tracksList.appendChild(trackElement);
});
+ // Reveal header and track list.
document.getElementById('album-header').classList.remove('hidden');
document.getElementById('tracks-container').classList.remove('hidden');
attachDownloadListeners();
+
+ // If on a small screen, re-arrange the action buttons.
+ if (window.innerWidth <= 480) {
+ let actionsContainer = document.getElementById('album-actions');
+ if (!actionsContainer) {
+ actionsContainer = document.createElement('div');
+ actionsContainer.id = 'album-actions';
+ document.getElementById('album-header').appendChild(actionsContainer);
+ }
+ // Append in the desired order: Home, Download, then Queue Toggle (if exists).
+ actionsContainer.innerHTML = ''; // Clear any previous content
+ actionsContainer.appendChild(document.getElementById('homeButton'));
+ actionsContainer.appendChild(document.getElementById('downloadAlbumBtn'));
+ const queueToggle = document.querySelector('.queue-toggle');
+ if (queueToggle) {
+ actionsContainer.appendChild(queueToggle);
+ }
+ }
}
async function downloadWholeAlbum(album) {
const url = album.external_urls.spotify;
- startDownload(url, 'album', { name: album.name });
+ return startDownload(url, 'album', { name: album.name });
}
function msToTime(duration) {
@@ -160,19 +179,14 @@ function attachDownloadListeners() {
const url = e.currentTarget.dataset.url;
const type = e.currentTarget.dataset.type;
const name = e.currentTarget.dataset.name || extractName(url);
- const albumType = e.currentTarget.dataset.albumType;
-
- // Remove the button after click
+ // Remove the button immediately after click.
e.currentTarget.remove();
-
- // Start the download for this track.
- startDownload(url, type, { name }, albumType);
+ startDownload(url, type, { name });
});
});
}
async function startDownload(url, type, item, albumType) {
- // Retrieve configuration (if any) from localStorage
const config = JSON.parse(localStorage.getItem('activeConfig')) || {};
const {
fallback = false,
@@ -186,17 +200,14 @@ async function startDownload(url, type, item, albumType) {
const service = url.includes('open.spotify.com') ? 'spotify' : 'deezer';
let apiUrl = '';
- // Build API URL based on the download type.
if (type === 'album') {
apiUrl = `/api/album/download?service=${service}&url=${encodeURIComponent(url)}`;
} else if (type === 'artist') {
apiUrl = `/api/artist/download?service=${service}&artist_url=${encodeURIComponent(url)}&album_type=${encodeURIComponent(albumType || 'album,single,compilation')}`;
} else {
- // Default is track download.
apiUrl = `/api/${type}/download?service=${service}&url=${encodeURIComponent(url)}`;
}
- // Append account and quality details.
if (fallback && service === 'spotify') {
apiUrl += `&main=${deezer}&fallback=${spotify}`;
apiUrl += `&quality=${deezerQuality}&fall_quality=${spotifyQuality}`;
@@ -212,9 +223,12 @@ async function startDownload(url, type, item, albumType) {
try {
const response = await fetch(apiUrl);
const data = await response.json();
- // Add the download to the queue using the working queue implementation.
downloadQueue.addDownload(item, type, data.prg_file);
} catch (error) {
showError('Download failed: ' + error.message);
}
}
+
+function extractName(url) {
+ return url;
+}
diff --git a/static/js/artist.js b/static/js/artist.js
index 72c73d5..77eb563 100644
--- a/static/js/artist.js
+++ b/static/js/artist.js
@@ -85,12 +85,14 @@ function renderArtist(artistData, artistId) {
downloadArtistBtn.disabled = true;
downloadArtistBtn.textContent = 'Queueing...';
- downloadWholeArtist(artistData).then(() => {
- downloadArtistBtn.textContent = 'Queued!';
- }).catch(err => {
- showError('Failed to queue artist download: ' + err.message);
- downloadArtistBtn.disabled = false;
- });
+ downloadWholeArtist(artistData)
+ .then(() => {
+ downloadArtistBtn.textContent = 'Queued!';
+ })
+ .catch(err => {
+ showError('Failed to queue artist download: ' + err.message);
+ downloadArtistBtn.disabled = false;
+ });
});
// Group albums by album type.
@@ -128,24 +130,20 @@ function renderArtist(artistData, artistId) {
// Container for individual albums in this group.
const albumsContainer = document.createElement('div');
albumsContainer.className = 'albums-list';
- albums.forEach((album, index) => {
+ albums.forEach(album => {
const albumElement = document.createElement('div');
- albumElement.className = 'track'; // reusing styling from the playlist view
-
- // Use an around the album image and name.
+ // Build a unified album card markup that works for both desktop and mobile.
+ albumElement.className = 'album-card';
albumElement.innerHTML = `
- ${index + 1}
- 
+ class="album-cover">
-
- ${album.name}
-
+
+
- ${album.name}
+ ${album.artists.map(a => a.name).join(', ')}
${album.release_date}
- ${album.total_tracks} tracks