37 |
40 |
41 |
42 | Tracks
38 | 39 |
43 |
45 |
46 | Loading...
44 |  }})
51 |
52 |
55 |
56 |
57 |  }})
58 |
59 |
60 |
69 |
70 |
71 |
72 |
--------------------------------------------------------------------------------
/static/html/track.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
50 |
51 |
54 |
55 |
56 |
57 |
58 |
59 |
68 |
69 |
70 |
71 |
72 |
73 |
--------------------------------------------------------------------------------
/static/html/watch.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
48 |
49 |
50 |  }})
51 |
52 |
53 |
54 |
55 |
56 |
57 |
66 |
67 |
68 |
69 |
70 |
71 |
--------------------------------------------------------------------------------
/static/html/artist.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
56 |
57 |
60 |
61 |
62 |
63 |
64 |
65 |
74 |
75 |
76 |
77 |
78 |
--------------------------------------------------------------------------------
/static/html/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |  }})
50 | Find and download your favorite tracks, albums, playlists or artists
52 |
64 |
65 |
66 |  }})
67 |
68 |
69 |
70 |
71 |
72 |
73 |
82 |
83 |
84 |
85 |
86 |
--------------------------------------------------------------------------------
/static/html/history.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | | Name | 47 |Artist | 48 |Type | 49 |Status | 50 |Date Added | 51 |Date Completed/Ended | 52 |Details | 53 |
|---|
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
--------------------------------------------------------------------------------
/static/html/playlist.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
63 |
64 |
67 |
68 |
69 |
70 |
71 |
72 |
81 |
82 |
83 |
84 |
85 |
--------------------------------------------------------------------------------
/routes/credentials.py:
--------------------------------------------------------------------------------
1 | from flask import Blueprint, request, jsonify
2 | from routes.utils.credentials import (
3 | get_credential,
4 | list_credentials,
5 | create_credential,
6 | delete_credential,
7 | edit_credential
8 | )
9 | from pathlib import Path
10 |
11 | credentials_bp = Blueprint('credentials', __name__)
12 |
13 | @credentials_bp.route('/
`;
77 | detailsButton.className = 'details-btn btn-icon';
78 | detailsButton.title = 'Show Details';
79 | detailsButton.onclick = () => showDetailsModal(entry);
80 | detailsCell.appendChild(detailsButton);
81 |
82 | if (entry.status_final === 'ERROR' && entry.error_message) {
83 | const errorSpan = document.createElement('span');
84 | errorSpan.textContent = ' (Show Error)';
85 | errorSpan.className = 'error-message-toggle';
86 | errorSpan.style.marginLeft = '5px';
87 | errorSpan.onclick = (e) => {
88 | e.stopPropagation(); // Prevent click on row if any
89 | let errorDetailsDiv = row.querySelector('.error-details') as HTMLElement | null;
90 | if (!errorDetailsDiv) {
91 | errorDetailsDiv = document.createElement('div');
92 | errorDetailsDiv.className = 'error-details';
93 | const newCell = row.insertCell(); // This will append to the end of the row
94 | newCell.colSpan = 7; // Span across all columns
95 | newCell.appendChild(errorDetailsDiv);
96 | // Visually, this new cell will be after the 'Details' button cell.
97 | // To make it appear as part of the status cell or below the row, more complex DOM manipulation or CSS would be needed.
98 | }
99 | errorDetailsDiv.textContent = entry.error_message;
100 | // Toggle display by directly manipulating the style of the details div
101 | errorDetailsDiv.style.display = errorDetailsDiv.style.display === 'none' ? 'block' : 'none';
102 | };
103 | statusCell.appendChild(errorSpan);
104 | }
105 | });
106 | }
107 |
108 | function updatePagination() {
109 | if (!pageInfo || !prevButton || !nextButton) return;
110 |
111 | const totalPages = Math.ceil(totalEntries / limit) || 1;
112 | pageInfo.textContent = `Page ${currentPage} of ${totalPages}`;
113 | prevButton.disabled = currentPage === 1;
114 | nextButton.disabled = currentPage === totalPages;
115 | }
116 |
117 | function showDetailsModal(entry: any) {
118 | const details = `Task ID: ${entry.task_id}\n` +
119 | `Type: ${entry.download_type}\n` +
120 | `Name: ${entry.item_name}\n` +
121 | `Artist: ${entry.item_artist}\n` +
122 | `Album: ${entry.item_album || 'N/A'}\n` +
123 | `URL: ${entry.item_url}\n` +
124 | `Spotify ID: ${entry.spotify_id || 'N/A'}\n` +
125 | `Status: ${entry.status_final}\n` +
126 | `Error: ${entry.error_message || 'None'}\n` +
127 | `Added: ${new Date(entry.timestamp_added * 1000).toLocaleString()}\n` +
128 | `Completed/Ended: ${new Date(entry.timestamp_completed * 1000).toLocaleString()}\n\n` +
129 | `Original Request: ${JSON.stringify(JSON.parse(entry.original_request_json || '{}'), null, 2)}\n\n` +
130 | `Last Status Object: ${JSON.stringify(JSON.parse(entry.last_status_obj_json || '{}'), null, 2)}`;
131 | alert(details);
132 | }
133 |
134 | document.querySelectorAll('th[data-sort]').forEach(headerCell => {
135 | headerCell.addEventListener('click', () => {
136 | const sortField = (headerCell as HTMLElement).dataset.sort;
137 | if (!sortField) return;
138 |
139 | if (currentSortBy === sortField) {
140 | currentSortOrder = currentSortOrder === 'ASC' ? 'DESC' : 'ASC';
141 | } else {
142 | currentSortBy = sortField;
143 | currentSortOrder = 'DESC';
144 | }
145 | fetchHistory(1);
146 | });
147 | });
148 |
149 | prevButton?.addEventListener('click', () => fetchHistory(currentPage - 1));
150 | nextButton?.addEventListener('click', () => fetchHistory(currentPage + 1));
151 | limitSelect?.addEventListener('change', (e) => {
152 | limit = parseInt((e.target as HTMLSelectElement).value, 10);
153 | fetchHistory(1);
154 | });
155 | statusFilter?.addEventListener('change', () => fetchHistory(1));
156 | typeFilter?.addEventListener('change', () => fetchHistory(1));
157 |
158 | // Initial fetch
159 | fetchHistory();
160 | });
--------------------------------------------------------------------------------
/static/css/track/track.css:
--------------------------------------------------------------------------------
1 | /* Base Styles */
2 | * {
3 | margin: 0;
4 | padding: 0;
5 | box-sizing: border-box;
6 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
7 | }
8 |
9 | body {
10 | background: linear-gradient(135deg, #121212, #1e1e1e);
11 | color: #ffffff;
12 | min-height: 100vh;
13 | line-height: 1.4;
14 | }
15 |
16 | /* App Container */
17 | #app {
18 | max-width: 1200px;
19 | margin: 0 auto;
20 | padding: 20px;
21 | position: relative;
22 | z-index: 1;
23 | }
24 |
25 | /* Track Header:
26 | We assume an HTML structure like:
27 | This track contains explicit content and has been filtered based on your settings.
55 |The explicit content filter is controlled by environment variables.
56 |
`;
114 | // Prepend the home button into the header.
115 | const trackHeader = document.getElementById('track-header');
116 | if (trackHeader) {
117 | trackHeader.insertBefore(homeButton, trackHeader.firstChild);
118 | }
119 | }
120 | homeButton.addEventListener('click', () => {
121 | window.location.href = window.location.origin;
122 | });
123 |
124 | // --- Move the Download Button from #actions into #track-header ---
125 | let downloadBtn = document.getElementById('downloadTrackBtn') as HTMLButtonElement;
126 | if (downloadBtn) {
127 | // Remove the parent container (#actions) if needed.
128 | const actionsContainer = document.getElementById('actions');
129 | if (actionsContainer) {
130 | actionsContainer.parentNode?.removeChild(actionsContainer);
131 | }
132 | // Set the inner HTML to use the download.svg icon.
133 | downloadBtn.innerHTML = `
`;
134 | // Append the download button to the track header so it appears at the right.
135 | const trackHeader = document.getElementById('track-header');
136 | if (trackHeader) {
137 | trackHeader.appendChild(downloadBtn);
138 | }
139 | }
140 |
141 | if (downloadBtn) {
142 | downloadBtn.addEventListener('click', () => {
143 | downloadBtn.disabled = true;
144 | downloadBtn.innerHTML = `Queueing...`;
145 |
146 | const trackUrl = track.external_urls?.spotify || '';
147 | if (!trackUrl) {
148 | showError('Missing track URL');
149 | downloadBtn.disabled = false;
150 | downloadBtn.innerHTML = ``;
151 | return;
152 | }
153 | const trackIdToDownload = track.id || '';
154 | if (!trackIdToDownload) {
155 | showError('Missing track ID for download');
156 | downloadBtn.disabled = false;
157 | downloadBtn.innerHTML = ``;
158 | return;
159 | }
160 |
161 | // Use the centralized downloadQueue.download method
162 | downloadQueue.download(trackIdToDownload, 'track', { name: track.name || 'Unknown Track', artist: track.artists?.[0]?.name })
163 | .then(() => {
164 | downloadBtn.innerHTML = `Queued!`;
165 | // Make the queue visible to show the download
166 | downloadQueue.toggleVisibility(true);
167 | })
168 | .catch((err: any) => {
169 | showError('Failed to queue track download: ' + (err?.message || 'Unknown error'));
170 | downloadBtn.disabled = false;
171 | downloadBtn.innerHTML = ``;
172 | });
173 | });
174 | }
175 |
176 | // Reveal the header now that track info is loaded.
177 | const trackHeaderEl = document.getElementById('track-header');
178 | if (trackHeaderEl) trackHeaderEl.classList.remove('hidden');
179 | }
180 |
181 | /**
182 | * Converts milliseconds to minutes:seconds.
183 | */
184 | function msToTime(duration: number) {
185 | if (!duration || isNaN(duration)) return '0:00';
186 |
187 | const minutes = Math.floor(duration / 60000);
188 | const seconds = Math.floor((duration % 60000) / 1000);
189 | return `${minutes}:${seconds.toString().padStart(2, '0')}`;
190 | }
191 |
192 | /**
193 | * Displays an error message in the UI.
194 | */
195 | function showError(message: string) {
196 | const errorEl = document.getElementById('error');
197 | if (errorEl) {
198 | errorEl.textContent = message || 'An error occurred';
199 | errorEl.classList.remove('hidden');
200 | }
201 | }
202 |
203 | /**
204 | * Starts the download process by calling the centralized downloadQueue method
205 | */
206 | async function startDownload(itemId: string, type: string, item: any) {
207 | if (!itemId || !type) {
208 | showError('Missing ID or type for download');
209 | return;
210 | }
211 |
212 | try {
213 | // Use the centralized downloadQueue.download method
214 | await downloadQueue.download(itemId, type, item);
215 |
216 | // Make the queue visible after queueing
217 | downloadQueue.toggleVisibility(true);
218 | } catch (error: any) {
219 | showError('Download failed: ' + (error?.message || 'Unknown error'));
220 | throw error;
221 | }
222 | }
223 |
--------------------------------------------------------------------------------
/static/css/album/album.css:
--------------------------------------------------------------------------------
1 | /* Base Styles */
2 | * {
3 | margin: 0;
4 | padding: 0;
5 | box-sizing: border-box;
6 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
7 | }
8 |
9 | body {
10 | background: linear-gradient(135deg, #121212, #1e1e1e);
11 | color: #ffffff;
12 | min-height: 100vh;
13 | line-height: 1.4;
14 | }
15 |
16 | /* Main App Container */
17 | #app {
18 | max-width: 1200px;
19 | margin: 0 auto;
20 | padding: 20px;
21 | position: relative;
22 | z-index: 1;
23 | }
24 |
25 | /* Album Header */
26 | #album-header {
27 | display: flex;
28 | gap: 20px;
29 | margin-bottom: 2rem;
30 | align-items: center;
31 | padding-bottom: 1.5rem;
32 | border-bottom: 1px solid #2a2a2a;
33 | flex-wrap: wrap;
34 | transition: all 0.3s ease;
35 | }
36 |
37 | #album-image {
38 | width: 200px;
39 | height: 200px;
40 | object-fit: cover;
41 | border-radius: 8px;
42 | flex-shrink: 0;
43 | box-shadow: 0 4px 8px rgba(0,0,0,0.3);
44 | transition: transform 0.3s ease;
45 | }
46 | #album-image:hover {
47 | transform: scale(1.02);
48 | }
49 |
50 | #album-info {
51 | flex: 1;
52 | min-width: 0;
53 | }
54 |
55 | #album-name {
56 | font-size: 2.5rem;
57 | margin-bottom: 0.5rem;
58 | background: linear-gradient(90deg, #1db954, #17a44b);
59 | -webkit-background-clip: text;
60 | -webkit-text-fill-color: transparent;
61 | }
62 |
63 | #album-artist,
64 | #album-stats {
65 | font-size: 1.1rem;
66 | color: #b3b3b3;
67 | margin-bottom: 0.5rem;
68 | }
69 |
70 | #album-copyright {
71 | font-size: 0.9rem;
72 | color: #b3b3b3;
73 | opacity: 0.8;
74 | margin-bottom: 0.5rem;
75 | }
76 |
77 | /* Tracks Container */
78 | #tracks-container {
79 | margin-top: 2rem;
80 | }
81 |
82 | #tracks-container h2 {
83 | font-size: 1.75rem;
84 | margin-bottom: 1rem;
85 | border-bottom: 1px solid #2a2a2a;
86 | padding-bottom: 0.5rem;
87 | }
88 |
89 | /* Tracks List */
90 | #tracks-list {
91 | display: flex;
92 | flex-direction: column;
93 | gap: 1rem;
94 | }
95 |
96 | /* Individual Track Styling */
97 | .track {
98 | display: grid;
99 | grid-template-columns: 40px 1fr auto auto;
100 | align-items: center;
101 | padding: 0.75rem 1rem;
102 | border-radius: var(--radius-sm);
103 | background-color: var(--color-surface);
104 | margin-bottom: 0.5rem;
105 | transition: background-color 0.2s ease;
106 | }
107 |
108 | .track:hover {
109 | background-color: var(--color-surface-hover);
110 | }
111 |
112 | .track-number {
113 | display: flex;
114 | align-items: center;
115 | justify-content: center;
116 | font-size: 0.9rem;
117 | color: var(--color-text-secondary);
118 | width: 24px;
119 | }
120 |
121 | .track-info {
122 | padding: 0 1rem;
123 | flex: 1;
124 | min-width: 0;
125 | }
126 |
127 | .track-name {
128 | font-weight: 500;
129 | margin-bottom: 0.25rem;
130 | white-space: nowrap;
131 | overflow: hidden;
132 | text-overflow: ellipsis;
133 | }
134 |
135 | .track-artist {
136 | font-size: 0.9rem;
137 | color: var(--color-text-secondary);
138 | }
139 |
140 | .track-duration {
141 | color: var(--color-text-tertiary);
142 | font-size: 0.9rem;
143 | margin-right: 1rem;
144 | }
145 |
146 | /* Loading and Error States */
147 | .loading,
148 | .error {
149 | width: 100%;
150 | text-align: center;
151 | font-size: 1rem;
152 | padding: 1rem;
153 | }
154 |
155 | .error {
156 | color: #c0392b;
157 | }
158 |
159 | /* Utility Classes */
160 | .hidden {
161 | display: none !important;
162 | }
163 |
164 | /* Unified Download Button Base Style */
165 | .download-btn {
166 | background-color: #1db954;
167 | color: #fff;
168 | border: none;
169 | border-radius: 4px;
170 | padding: 0.6rem 1.2rem;
171 | font-size: 1rem;
172 | cursor: pointer;
173 | transition: background-color 0.2s ease, transform 0.2s ease;
174 | display: inline-flex;
175 | align-items: center;
176 | justify-content: center;
177 | margin: 0.5rem;
178 | }
179 |
180 | .download-btn:hover {
181 | background-color: #17a44b;
182 | }
183 |
184 | .download-btn:active {
185 | transform: scale(0.98);
186 | }
187 |
188 | /* Circular Variant for Compact Areas */
189 | .download-btn--circle {
190 | width: 32px;
191 | height: 32px;
192 | padding: 0;
193 | border-radius: 50%;
194 | font-size: 0; /* Hide any text */
195 | background-color: #1db954;
196 | border: none;
197 | display: inline-flex;
198 | align-items: center;
199 | justify-content: center;
200 | cursor: pointer;
201 | transition: background-color 0.2s ease, transform 0.2s ease;
202 | margin: 0.5rem;
203 | }
204 |
205 | .download-btn--circle img {
206 | width: 20px;
207 | height: 20px;
208 | filter: brightness(0) invert(1);
209 | display: block;
210 | }
211 |
212 | .download-btn--circle:hover {
213 | background-color: #17a44b;
214 | transform: scale(1.05);
215 | }
216 |
217 | .download-btn--circle:active {
218 | transform: scale(0.98);
219 | }
220 |
221 | /* Home Button Styling */
222 | .home-btn {
223 | background-color: transparent;
224 | border: none;
225 | cursor: pointer;
226 | margin-right: 1rem;
227 | padding: 0;
228 | }
229 |
230 | .home-btn img {
231 | width: 32px;
232 | height: 32px;
233 | filter: invert(1);
234 | transition: transform 0.2s ease;
235 | }
236 |
237 | .home-btn:hover img {
238 | transform: scale(1.05);
239 | }
240 |
241 | .home-btn:active img {
242 | transform: scale(0.98);
243 | }
244 |
245 | /* Queue Toggle Button */
246 | .queue-toggle {
247 | background: #1db954;
248 | color: #fff;
249 | border: none;
250 | border-radius: 50%;
251 | width: 56px;
252 | height: 56px;
253 | cursor: pointer;
254 | font-size: 1rem;
255 | font-weight: bold;
256 | box-shadow: 0 2px 8px rgba(0,0,0,0.3);
257 | transition: background-color 0.3s ease, transform 0.2s ease;
258 | z-index: 1002;
259 | /* Remove any fixed positioning by default for mobile; fixed positioning remains for larger screens */
260 | }
261 |
262 | /* Actions Container for Small Screens */
263 | #album-actions {
264 | display: flex;
265 | width: 100%;
266 | justify-content: space-between;
267 | align-items: center;
268 | margin-top: 1rem;
269 | }
270 |
271 | /* Responsive Styles */
272 |
273 | /* Medium Devices (Tablets) */
274 | @media (max-width: 768px) {
275 | #album-header {
276 | flex-direction: column;
277 | align-items: center;
278 | text-align: center;
279 | }
280 |
281 | #album-image {
282 | width: 180px;
283 | height: 180px;
284 | margin-bottom: 1rem;
285 | }
286 |
287 | #album-name {
288 | font-size: 2rem;
289 | }
290 |
291 | #album-artist,
292 | #album-stats {
293 | font-size: 1rem;
294 | }
295 |
296 | .track {
297 | grid-template-columns: 30px 1fr auto auto;
298 | padding: 0.6rem 0.8rem;
299 | }
300 |
301 | .track-duration {
302 | margin-right: 0.5rem;
303 | }
304 | }
305 |
306 | /* Small Devices (Mobile Phones) */
307 | @media (max-width: 480px) {
308 | #app {
309 | padding: 10px;
310 | }
311 |
312 | #album-header {
313 | flex-direction: column;
314 | align-items: center;
315 | text-align: center;
316 | }
317 |
318 | /* Center the album cover */
319 | #album-image {
320 | margin: 0 auto;
321 | }
322 |
323 | #album-name {
324 | font-size: 1.75rem;
325 | }
326 |
327 | #album-artist,
328 | #album-stats,
329 | #album-copyright {
330 | font-size: 0.9rem;
331 | }
332 |
333 | .track {
334 | grid-template-columns: 30px 1fr auto;
335 | }
336 |
337 | .track-info {
338 | padding: 0 0.5rem;
339 | }
340 |
341 | .track-name, .track-artist {
342 | max-width: 200px;
343 | }
344 |
345 | .section-title {
346 | font-size: 1.25rem;
347 | }
348 |
349 | /* Ensure the actions container lays out buttons properly */
350 | #album-actions {
351 | flex-direction: row;
352 | justify-content: space-between;
353 | }
354 |
355 | /* Remove extra margins from the queue toggle */
356 | .queue-toggle {
357 | position: static;
358 | margin: 0;
359 | }
360 | }
361 |
362 | /* Prevent anchor links from appearing all blue */
363 | a {
364 | color: inherit;
365 | text-decoration: none;
366 | transition: color 0.2s ease;
367 | }
368 |
369 | a:hover,
370 | a:focus {
371 | color: #1db954;
372 | text-decoration: underline;
373 | }
374 |
375 | /* (Optional) Override for circular download button pseudo-element */
376 | .download-btn--circle::before {
377 | content: none;
378 | }
379 |
380 | /* Album page specific styles */
381 |
382 | /* Add some context styles for the album copyright */
383 | .album-copyright {
384 | font-size: 0.85rem;
385 | color: var(--color-text-tertiary);
386 | margin-top: 0.5rem;
387 | font-style: italic;
388 | }
389 |
390 | /* Section title styling */
391 | .section-title {
392 | font-size: 1.5rem;
393 | margin-bottom: 1rem;
394 | position: relative;
395 | padding-bottom: 0.5rem;
396 | }
397 |
398 | .section-title:after {
399 | content: '';
400 | position: absolute;
401 | left: 0;
402 | bottom: 0;
403 | width: 50px;
404 | height: 2px;
405 | background-color: var(--color-primary);
406 | }
407 |
--------------------------------------------------------------------------------
/routes/prgs.py:
--------------------------------------------------------------------------------
1 | from flask import Blueprint, abort, jsonify, Response, stream_with_context, request
2 | import os
3 | import json
4 | import logging
5 | import time
6 |
7 | from routes.utils.celery_tasks import (
8 | get_task_info,
9 | get_task_status,
10 | get_last_task_status,
11 | get_all_tasks,
12 | cancel_task,
13 | retry_task,
14 | ProgressState,
15 | redis_client
16 | )
17 |
18 | # Configure logging
19 | logger = logging.getLogger(__name__)
20 |
21 | prgs_bp = Blueprint('prgs', __name__, url_prefix='/api/prgs')
22 |
23 | # (Old .prg file system removed. Using new task system only.)
24 |
25 | @prgs_bp.route('/