Artists: ${item.artists.join(', ')}
` : ''} + ${item.owner ? `Owner: ${item.owner}
` : ''} + ${item.total_tracks ? `Total Tracks: ${item.total_tracks}
` : ''} +
`;
+ btn.classList.add('loading');
+ btn.style.pointerEvents = 'none';
+
+ const statusLine = document.createElement('div');
+ statusLine.className = 'status-line';
+ card.appendChild(statusLine);
+
+ const response = await fetch(
+ `/api/download?account=${encodeURIComponent(account)}&type=${type}&id=${spotifyId}`
+ );
+
+ const reader = response.body
+ .pipeThrough(new TextDecoderStream())
+ .getReader();
+
+ let buffer = '';
+ let lastPercentage = -1;
+ let totalTracks = 0;
+ let completedTracks = 0;
+ let isArtistDownload = type === 'artist';
+ let firstAlbumStart = isArtistDownload;
+
+ while (true) {
+ const { done, value } = await reader.read();
+ if (done) {
+ // Update to checkmark and stop animation
+ btn.innerHTML = `
`;
+ btn.classList.remove('loading');
+ btn.classList.add('completed');
+ btn.style.pointerEvents = 'none';
+
+ if (isArtistDownload) {
+ statusLine.textContent = 'Artist download complete!';
+ statusLine.classList.add('completed');
+ }
+ break;
+ }
+
+ buffer += value;
+ const lines = buffer.split('\n');
+ buffer = lines.pop() || '';
+
+ for (const line of lines) {
+ if (!line.trim()) continue;
+ try {
+ const data = JSON.parse(line);
+
+ switch(data.type) {
+ case 'track_start':
+ statusLine.textContent = 'Starting track download...';
+ break;
+
+ case 'album_start':
+ totalTracks = data.total_tracks;
+ if (isArtistDownload && firstAlbumStart) {
+ statusLine.textContent = `Downloading ${data.artist}`;
+ firstAlbumStart = false;
+ } else {
+ statusLine.textContent = `Downloading album: ${data.album}`;
+ }
+ break;
+
+ case 'playlist_start':
+ statusLine.textContent = `Starting playlist: ${data.name}`;
+ break;
+
+ case 'metadata':
+ if (type === 'track') {
+ statusLine.textContent = `Downloading: ${data.name} by ${data.artists[0]}`;
+ }
+ break;
+
+ case 'download_start':
+ statusLine.textContent += ` (${formatBytes(data.total_size)})`;
+ break;
+
+ case 'download_progress':
+ if (Math.floor(data.percentage) > lastPercentage) {
+ lastPercentage = Math.floor(data.percentage);
+ const progress = `${lastPercentage}% of ${formatBytes(data.total)}`;
+ statusLine.textContent = type === 'track'
+ ? `Downloading: ${progress}`
+ : `Downloading track ${completedTracks + 1}: ${progress}`;
+ }
+ break;
+
+ case 'album_track_start':
+ statusLine.textContent = `Downloading track ${data.number}/${totalTracks}: ${data.track}`;
+ break;
+
+ case 'playlist_track_start':
+ statusLine.textContent = `Downloading track ${data.position}: ${data.track}`;
+ break;
+
+ case 'conversion_start':
+ statusLine.textContent = `Converting to ${data.format}...`;
+ break;
+
+ case 'track_complete':
+ completedTracks++;
+ statusLine.textContent = `Completed: ${data.output_path.split('/').pop()}`;
+ statusLine.classList.add('completed');
+ break;
+
+ case 'track_skip':
+ completedTracks++;
+ statusLine.textContent = `Skipped: ${data.reason === 'already_exists' ? 'Already exists' : data.reason}`;
+ statusLine.classList.add('warning');
+ break;
+
+ case 'album_complete':
+ statusLine.textContent = `Album complete! ${data.successful}/${data.total} tracks`;
+ statusLine.classList.add('completed');
+ break;
+
+ case 'playlist_complete':
+ statusLine.textContent = `Playlist complete! ${data.downloaded} tracks`;
+ statusLine.classList.add('completed');
+ break;
+ }
+
+ } catch (e) {
+ console.error('Error parsing JSON:', e);
+ }
+ }
+ }
+
+ } catch (error) {
+ console.error('Download failed:', error);
+ // Restore original button state
+ btn.innerHTML = originalBtnHTML;
+ btn.classList.remove('loading', 'completed');
+ btn.style.pointerEvents = 'auto';
+
+ const statusLine = card.querySelector('.status-line');
+ statusLine.textContent = `Download failed: ${error.message}`;
+ statusLine.classList.add('error');
+ }
+ }
+ });
+}
\ No newline at end of file
diff --git a/frontend/js/components/load.js b/frontend/js/components/load.js
new file mode 100644
index 0000000..c3166cf
--- /dev/null
+++ b/frontend/js/components/load.js
@@ -0,0 +1,14 @@
+// Account loading functionality
+export async function loadAccounts() {
+ try {
+ const response = await fetch('/api/check');
+ const data = await response.json();
+ const select = document.getElementById('accountSelect');
+
+ select.innerHTML = data.accounts.length
+ ? data.accounts.map(acc => ``).join('')
+ : '';
+ } catch (error) {
+ console.error('Error loading accounts:', error);
+ }
+}
\ No newline at end of file
diff --git a/frontend/js/components/search.js b/frontend/js/components/search.js
new file mode 100644
index 0000000..fdfb62e
--- /dev/null
+++ b/frontend/js/components/search.js
@@ -0,0 +1,75 @@
+export function initSearch() {
+ document.getElementById('searchForm').addEventListener('submit', handleSearch);
+}
+
+async function handleSearch(e) {
+ e.preventDefault();
+ const account = document.getElementById('accountSelect').value;
+ const query = document.getElementById('searchQuery').value;
+
+ if (!account || !query) return;
+
+ const container = document.getElementById('resultsContainer');
+ container.innerHTML = '
';
+
+ try {
+ const response = await fetch(`/api/search?account=${encodeURIComponent(account)}&query=${encodeURIComponent(query)}`);
+ const data = await response.json();
+ displayResults(data);
+ } catch (error) {
+ console.error('Search failed:', error);
+ container.innerHTML = 'Artists: ${item.artists.join(', ')}
` : ''} + ${item.owner ? `Owner: ${item.owner}
` : ''} + ${item.total_tracks ? `Total Tracks: ${item.total_tracks}
` : ''} +