Audio Quality
- Set to LOSSLESS by default.
+ Quality for streaming and downloads.
+
@@ -239,22 +276,6 @@
-
Technology Stack
Vanilla JavaScript • ES6 Modules • IndexedDB • Service Workers • Media Session API
Version 1.0.0
This is an independent client and is not affiliated with or endorsed by TIDAL or any music streaming service.
diff --git a/js/api.js b/js/api.js index aa6324f..0da9209 100644 --- a/js/api.js +++ b/js/api.js @@ -1,6 +1,8 @@ -//js/api.js import { RATE_LIMIT_ERROR_MESSAGE, deriveTrackQuality, delay } from './utils.js'; import { APICache } from './cache.js'; +import { MetadataEmbedder } from './metadata.js'; + +export const DASH_MANIFEST_UNAVAILABLE_CODE = 'DASH_MANIFEST_UNAVAILABLE'; export class LosslessAPI { constructor(settings) { @@ -9,78 +11,88 @@ export class LosslessAPI { maxSize: 200, ttl: 1000 * 60 * 30 }); + this.streamCache = new Map(); + this.metadataEmbedder = new MetadataEmbedder(); setInterval(() => { this.cache.clearExpired(); + this.pruneStreamCache(); }, 1000 * 60 * 5); } -async fetchWithRetry(relativePath, options = {}) { - const instances = this.settings.getInstances(); - if (instances.length === 0) { - throw new Error("No API instances configured."); - } - - const maxRetries = 1; - let lastError = null; - - for (const baseUrl of instances) { - const url = baseUrl.endsWith('/') - ? `${baseUrl}${relativePath.substring(1)}` - : `${baseUrl}${relativePath}`; - - for (let attempt = 1; attempt <= maxRetries; attempt++) { - try { - const response = await fetch(url, { signal: options.signal }); - - if (response.status === 429) { - throw new Error(RATE_LIMIT_ERROR_MESSAGE); - } - - if (response.ok) { - return response; - } - - if (response.status === 401) { - let errorData; - try { - errorData = await response.clone().json(); - } catch {} - - if (errorData?.subStatus === 11002) { - lastError = new Error(errorData?.userMessage || 'Authentication failed'); - if (attempt < maxRetries) { - await delay(200); - continue; - } - } - } - - if (response.status >= 500 && attempt < maxRetries) { - await delay(200); - continue; - } - - lastError = new Error(`Request failed with status ${response.status}`); - break; - - } catch (error) { - if (error.name === 'AbortError') { - throw error; - } - - lastError = error; - console.log(`Failed for ${baseUrl}: ${error.message}`); - - if (attempt < maxRetries) { - await delay(200); - } - } + pruneStreamCache() { + if (this.streamCache.size > 50) { + const entries = Array.from(this.streamCache.entries()); + const toDelete = entries.slice(0, entries.length - 50); + toDelete.forEach(([key]) => this.streamCache.delete(key)); } } - throw lastError || new Error(`All API instances failed for: ${relativePath}`); -} + async fetchWithRetry(relativePath, options = {}) { + const instances = this.settings.getInstances(); + if (instances.length === 0) { + throw new Error("No API instances configured."); + } + + const maxRetries = 3; + let lastError = null; + + for (const baseUrl of instances) { + const url = baseUrl.endsWith('/') + ? `${baseUrl}${relativePath.substring(1)}` + : `${baseUrl}${relativePath}`; + + for (let attempt = 1; attempt <= maxRetries; attempt++) { + try { + const response = await fetch(url, { signal: options.signal }); + + if (response.status === 429) { + throw new Error(RATE_LIMIT_ERROR_MESSAGE); + } + + if (response.ok) { + return response; + } + + if (response.status === 401) { + let errorData; + try { + errorData = await response.clone().json(); + } catch {} + + if (errorData?.subStatus === 11002) { + lastError = new Error(errorData?.userMessage || 'Authentication failed'); + if (attempt < maxRetries) { + await delay(200 * attempt); + continue; + } + } + } + + if (response.status >= 500 && attempt < maxRetries) { + await delay(200 * attempt); + continue; + } + + lastError = new Error(`Request failed with status ${response.status}`); + break; + + } catch (error) { + if (error.name === 'AbortError') { + throw error; + } + + lastError = error; + + if (attempt < maxRetries) { + await delay(200 * attempt); + } + } + } + } + + throw lastError || new Error(`All API instances failed for: ${relativePath}`); + } findSearchSection(source, key, visited) { if (!source || typeof source !== 'object') return; @@ -124,25 +136,21 @@ async fetchWithRetry(relativePath, options = {}) { return this.buildSearchResponse(section); } -prepareTrack(track) { - let normalized = track; - - if (!track.artist && Array.isArray(track.artists) && track.artists.length > 0) { - normalized = { ...track, artist: track.artists[0] }; - } + prepareTrack(track) { + let normalized = track; + + if (!track.artist && Array.isArray(track.artists) && track.artists.length > 0) { + normalized = { ...track, artist: track.artists[0] }; + } - if (normalized.album && !normalized.album.cover && normalized.album.id) { - console.warn('Track missing album cover, attempting to use album ID'); - } + const derivedQuality = deriveTrackQuality(normalized); + if (derivedQuality && normalized.audioQuality !== derivedQuality) { + normalized = { ...normalized, audioQuality: derivedQuality }; + } - const derivedQuality = deriveTrackQuality(normalized); - if (derivedQuality && normalized.audioQuality !== derivedQuality) { - normalized = { ...normalized, audioQuality: derivedQuality }; + return normalized; } - return normalized; -} - prepareAlbum(album) { if (!album.artist && Array.isArray(album.artists) && album.artists.length > 0) { return { ...album, artist: album.artists[0] }; @@ -207,68 +215,69 @@ prepareTrack(track) { return null; } } -async searchTracks(query) { - const cached = await this.cache.get('search_tracks', query); - if (cached) return cached; - try { - const response = await this.fetchWithRetry(`/search/?s=${encodeURIComponent(query)}`); - const data = await response.json(); - const normalized = this.normalizeSearchResponse(data, 'tracks'); - const result = { - ...normalized, - items: normalized.items.map(t => this.prepareTrack(t)) - }; + async searchTracks(query) { + const cached = await this.cache.get('search_tracks', query); + if (cached) return cached; - await this.cache.set('search_tracks', query, result); - return result; - } catch (error) { - console.error('Track search failed:', error); - return { items: [], limit: 0, offset: 0, totalNumberOfItems: 0 }; + try { + const response = await this.fetchWithRetry(`/search/?s=${encodeURIComponent(query)}`); + const data = await response.json(); + const normalized = this.normalizeSearchResponse(data, 'tracks'); + const result = { + ...normalized, + items: normalized.items.map(t => this.prepareTrack(t)) + }; + + await this.cache.set('search_tracks', query, result); + return result; + } catch (error) { + console.error('Track search failed:', error); + return { items: [], limit: 0, offset: 0, totalNumberOfItems: 0 }; + } } -} -async searchArtists(query) { - const cached = await this.cache.get('search_artists', query); - if (cached) return cached; + async searchArtists(query) { + const cached = await this.cache.get('search_artists', query); + if (cached) return cached; - try { - const response = await this.fetchWithRetry(`/search/?a=${encodeURIComponent(query)}`); - const data = await response.json(); - const normalized = this.normalizeSearchResponse(data, 'artists'); - const result = { - ...normalized, - items: normalized.items.map(a => this.prepareArtist(a)) - }; + try { + const response = await this.fetchWithRetry(`/search/?a=${encodeURIComponent(query)}`); + const data = await response.json(); + const normalized = this.normalizeSearchResponse(data, 'artists'); + const result = { + ...normalized, + items: normalized.items.map(a => this.prepareArtist(a)) + }; - await this.cache.set('search_artists', query, result); - return result; - } catch (error) { - console.error('Artist search failed:', error); - return { items: [], limit: 0, offset: 0, totalNumberOfItems: 0 }; + await this.cache.set('search_artists', query, result); + return result; + } catch (error) { + console.error('Artist search failed:', error); + return { items: [], limit: 0, offset: 0, totalNumberOfItems: 0 }; + } } -} -async searchAlbums(query) { - const cached = await this.cache.get('search_albums', query); - if (cached) return cached; + async searchAlbums(query) { + const cached = await this.cache.get('search_albums', query); + if (cached) return cached; - try { - const response = await this.fetchWithRetry(`/search/?al=${encodeURIComponent(query)}`); - const data = await response.json(); - const normalized = this.normalizeSearchResponse(data, 'albums'); - const result = { - ...normalized, - items: normalized.items.map(a => this.prepareAlbum(a)) - }; + try { + const response = await this.fetchWithRetry(`/search/?al=${encodeURIComponent(query)}`); + const data = await response.json(); + const normalized = this.normalizeSearchResponse(data, 'albums'); + const result = { + ...normalized, + items: normalized.items.map(a => this.prepareAlbum(a)) + }; - await this.cache.set('search_albums', query, result); - return result; - } catch (error) { - console.error('Album search failed:', error); - return { items: [], limit: 0, offset: 0, totalNumberOfItems: 0 }; + await this.cache.set('search_albums', query, result); + return result; + } catch (error) { + console.error('Album search failed:', error); + return { items: [], limit: 0, offset: 0, totalNumberOfItems: 0 }; + } } -} async getAlbum(id) { const cached = await this.cache.get('album', id); @@ -369,19 +378,31 @@ async searchAlbums(query) { } async getStreamUrl(id, quality = 'LOSSLESS') { - const lookup = await this.getTrack(id, quality); + const cacheKey = `stream_${id}_${quality}`; - if (lookup.originalTrackUrl) { - return lookup.originalTrackUrl; + if (this.streamCache.has(cacheKey)) { + return this.streamCache.get(cacheKey); } - const url = this.extractStreamUrlFromManifest(lookup.info.manifest); - if (url) return url; + const lookup = await this.getTrack(id, quality); + + let streamUrl; + if (lookup.originalTrackUrl) { + streamUrl = lookup.originalTrackUrl; + } else { + streamUrl = this.extractStreamUrlFromManifest(lookup.info.manifest); + if (!streamUrl) { + throw new Error('Could not resolve stream URL'); + } + } - throw new Error('Could not resolve stream URL'); + this.streamCache.set(cacheKey, streamUrl); + return streamUrl; } - async downloadTrack(id, quality = 'LOSSLESS', filename) { + async downloadTrack(id, quality = 'LOSSLESS', filename, options = {}) { + const { onProgress, embedMetadata = true, track, coverUrl } = options; + try { const lookup = await this.getTrack(id, quality); let streamUrl; @@ -395,23 +416,74 @@ async searchAlbums(query) { } } - const response = await fetch(streamUrl, { cache: 'no-store' }); + const response = await fetch(streamUrl, { + cache: 'no-store', + signal: options.signal + }); if (!response.ok) { throw new Error(`Fetch failed: ${response.status}`); } - const blob = await response.blob(); - const url = URL.createObjectURL(blob); + const contentLength = response.headers.get('Content-Length'); + const totalBytes = contentLength ? parseInt(contentLength, 10) : 0; - const a = document.createElement('a'); - a.href = url; - a.download = filename; - document.body.appendChild(a); - a.click(); - document.body.removeChild(a); - URL.revokeObjectURL(url); + let receivedBytes = 0; + + if (response.body && onProgress) { + const reader = response.body.getReader(); + const chunks = []; + + while (true) { + const { done, value } = await reader.read(); + if (done) break; + + if (value) { + chunks.push(value); + receivedBytes += value.byteLength; + + onProgress({ + stage: 'downloading', + receivedBytes, + totalBytes: totalBytes || undefined + }); + } + } + + let blob = new Blob(chunks, { type: response.headers.get('Content-Type') || 'audio/flac' }); + + if (embedMetadata && track && quality === 'LOSSLESS' && coverUrl) { + if (onProgress) { + onProgress({ stage: 'metadata', progress: 0 }); + } + + try { + blob = await this.metadataEmbedder.embedMetadata(blob, track, coverUrl, (progress) => { + if (onProgress) { + onProgress({ stage: 'metadata', progress }); + } + }); + } catch (metaError) { + console.warn('Metadata embedding failed, downloading without metadata:', metaError); + } + } + + this.triggerDownload(blob, filename); + } else { + const blob = await response.blob(); + if (onProgress) { + onProgress({ + stage: 'downloading', + receivedBytes: blob.size, + totalBytes: blob.size + }); + } + this.triggerDownload(blob, filename); + } } catch (error) { + if (error.name === 'AbortError') { + throw error; + } console.error("Download failed:", error); if (error.message === RATE_LIMIT_ERROR_MESSAGE) { throw error; @@ -420,6 +492,17 @@ async searchAlbums(query) { } } + triggerDownload(blob, filename) { + const url = URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = filename; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + URL.revokeObjectURL(url); + } + getCoverUrl(id, size = '1280') { if (!id) { return `https://picsum.photos/seed/${Math.random()}/${size}`; @@ -440,9 +523,13 @@ async searchAlbums(query) { async clearCache() { await this.cache.clear(); + this.streamCache.clear(); } getCacheStats() { - return this.cache.getCacheStats(); + return { + ...this.cache.getCacheStats(), + streamUrls: this.streamCache.size + }; } } \ No newline at end of file diff --git a/js/app.js b/js/app.js index 1e9057a..c72851b 100644 --- a/js/app.js +++ b/js/app.js @@ -3,17 +3,445 @@ import { apiSettings } from './storage.js'; import { UIRenderer } from './ui.js'; import { Player } from './player.js'; import { - QUALITY, REPEAT_MODE, SVG_PLAY, SVG_PAUSE, + REPEAT_MODE, SVG_PLAY, SVG_PAUSE, SVG_VOLUME, SVG_MUTE, formatTime, trackDataStore, - buildTrackFilename, RATE_LIMIT_ERROR_MESSAGE, debounce + buildTrackFilename, RATE_LIMIT_ERROR_MESSAGE, debounce, + sanitizeForFilename } from './utils.js'; +const downloadTasks = new Map(); +let downloadNotificationContainer = null; + +async function loadJSZip() { + try { + const module = await import('https://cdn.jsdelivr.net/npm/jszip@3.10.1/+esm'); + return module.default; + } catch (error) { + console.error('Failed to load JSZip:', error); + throw new Error('Failed to load ZIP library'); + } +} + +function createDownloadNotification() { + if (!downloadNotificationContainer) { + downloadNotificationContainer = document.createElement('div'); + downloadNotificationContainer.id = 'download-notifications'; + downloadNotificationContainer.style.cssText = ` + position: fixed; + bottom: 120px; + right: 20px; + z-index: 9999; + max-width: 350px; + display: flex; + flex-direction: column; + gap: 0.5rem; + `; + document.body.appendChild(downloadNotificationContainer); + } + return downloadNotificationContainer; +} + +function addDownloadTask(trackId, track, filename, api) { + const container = createDownloadNotification(); + + const taskEl = document.createElement('div'); + taskEl.className = 'download-task'; + taskEl.dataset.trackId = trackId; + taskEl.style.cssText = ` + background: var(--card); + border: 1px solid var(--border); + border-radius: var(--radius); + padding: 1rem; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); + animation: slideIn 0.3s ease; + `; + + taskEl.innerHTML = ` +
+ })
+
+ `;
+
+ container.appendChild(taskEl);
+
+ const abortController = new AbortController();
+ downloadTasks.set(trackId, { taskEl, abortController });
+
+ taskEl.querySelector('.download-cancel').addEventListener('click', () => {
+ abortController.abort();
+ removeDownloadTask(trackId);
+ });
+
+ return { taskEl, abortController };
+}
+
+function updateDownloadProgress(trackId, progress) {
+ const task = downloadTasks.get(trackId);
+ if (!task) return;
+
+ const { taskEl } = task;
+ const progressFill = taskEl.querySelector('.download-progress-fill');
+ const statusEl = taskEl.querySelector('.download-status');
+
+ if (progress.stage === 'downloading') {
+ const percent = progress.totalBytes
+ ? Math.round((progress.receivedBytes / progress.totalBytes) * 100)
+ : 0;
+
+ progressFill.style.width = `${percent}%`;
+
+ const receivedMB = (progress.receivedBytes / (1024 * 1024)).toFixed(1);
+ const totalMB = progress.totalBytes
+ ? (progress.totalBytes / (1024 * 1024)).toFixed(1)
+ : '?';
+
+ statusEl.textContent = `Downloading: ${receivedMB}MB / ${totalMB}MB (${percent}%)`;
+ } else if (progress.stage === 'metadata') {
+ const percent = Math.round(progress.progress * 100);
+ progressFill.style.width = `${percent}%`;
+ progressFill.style.background = '#a855f7';
+ statusEl.textContent = `Embedding metadata: ${percent}%`;
+ }
+}
+
+function completeDownloadTask(trackId, success = true, message = null) {
+ const task = downloadTasks.get(trackId);
+ if (!task) return;
+
+ const { taskEl } = task;
+ const progressFill = taskEl.querySelector('.download-progress-fill');
+ const statusEl = taskEl.querySelector('.download-status');
+ const cancelBtn = taskEl.querySelector('.download-cancel');
+
+ if (success) {
+ progressFill.style.width = '100%';
+ progressFill.style.background = '#10b981';
+ statusEl.textContent = '✓ Downloaded';
+ statusEl.style.color = '#10b981';
+ cancelBtn.remove();
+
+ setTimeout(() => removeDownloadTask(trackId), 3000);
+ } else {
+ progressFill.style.background = '#ef4444';
+ statusEl.textContent = message || '✗ Download failed';
+ statusEl.style.color = '#ef4444';
+ cancelBtn.innerHTML = `
+
+ `;
+ cancelBtn.onclick = () => removeDownloadTask(trackId);
+
+ setTimeout(() => removeDownloadTask(trackId), 5000);
+ }
+}
+
+function removeDownloadTask(trackId) {
+ const task = downloadTasks.get(trackId);
+ if (!task) return;
+
+ const { taskEl } = task;
+ taskEl.style.animation = 'slideOut 0.3s ease';
+
+ setTimeout(() => {
+ taskEl.remove();
+ downloadTasks.delete(trackId);
+
+ if (downloadNotificationContainer && downloadNotificationContainer.children.length === 0) {
+ downloadNotificationContainer.remove();
+ downloadNotificationContainer = null;
+ }
+ }, 300);
+}
+
+async function downloadTrackBlob(track, quality, api, coverUrl = null) {
+ console.log('[Download] Starting download for:', track.title, 'Quality:', quality);
+ console.log('[Download] Cover URL:', coverUrl);
+
+ const lookup = await api.getTrack(track.id, quality);
+ let streamUrl;
+
+ if (lookup.originalTrackUrl) {
+ streamUrl = lookup.originalTrackUrl;
+ } else {
+ streamUrl = api.extractStreamUrlFromManifest(lookup.info.manifest);
+ if (!streamUrl) {
+ throw new Error('Could not resolve stream URL');
+ }
+ }
+
+ console.log('[Download] Fetching from:', streamUrl);
+ const response = await fetch(streamUrl);
+ if (!response.ok) {
+ throw new Error(`Failed to fetch track: ${response.status}`);
+ }
+
+ let blob = await response.blob();
+ console.log('[Download] Downloaded blob size:', blob.size, 'type:', blob.type);
+
+ if (quality === 'LOSSLESS' && coverUrl) {
+ console.log('[Download] Attempting to embed metadata...');
+ try {
+ const processedBlob = await api.metadataEmbedder.embedMetadata(blob, track, coverUrl, null);
+ console.log('[Download] Metadata embedded. New size:', processedBlob.size);
+ blob = processedBlob;
+ } catch (error) {
+ console.error('[Download] Metadata embedding failed:', error);
+ }
+ } else {
+ console.log('[Download] Skipping metadata - Quality:', quality, 'Has cover:', !!coverUrl);
+ }
+
+ return blob;
+}
+
+async function downloadAlbumAsZip(album, tracks, api, quality) {
+ const JSZip = await loadJSZip();
+ const zip = new JSZip();
+
+ const artistName = sanitizeForFilename(album.artist?.name || 'Unknown Artist');
+ const albumTitle = sanitizeForFilename(album.title || 'Unknown Album');
+ const folderName = `${albumTitle} - ${artistName} - monochrome.tf`;
+
+ const coverUrl = album.cover ? api.getCoverUrl(album.cover, '1280') : null;
+
+ const notification = createBulkDownloadNotification('album', album.title, tracks.length);
+
+ try {
+ for (let i = 0; i < tracks.length; i++) {
+ const track = tracks[i];
+ const filename = buildTrackFilename(track, quality);
+
+ updateBulkDownloadProgress(notification, i, tracks.length, track.title);
+
+ const blob = await downloadTrackBlob(track, quality, api, coverUrl);
+ zip.file(`${folderName}/${filename}`, blob);
+ }
+
+ updateBulkDownloadProgress(notification, tracks.length, tracks.length, 'Creating ZIP...');
+
+ const zipBlob = await zip.generateAsync({
+ type: 'blob',
+ compression: 'DEFLATE',
+ compressionOptions: { level: 6 }
+ });
+
+ const url = URL.createObjectURL(zipBlob);
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = `${folderName}.zip`;
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ URL.revokeObjectURL(url);
+
+ completeBulkDownload(notification, true);
+ } catch (error) {
+ completeBulkDownload(notification, false, error.message);
+ throw error;
+ }
+}
+
+async function downloadDiscography(artist, api, quality) {
+ const JSZip = await loadJSZip();
+ const zip = new JSZip();
+
+ const artistName = sanitizeForFilename(artist.name || 'Unknown Artist');
+ const rootFolder = `${artistName} discography - monochrome.tf`;
+
+ const totalAlbums = artist.albums.length;
+ const notification = createBulkDownloadNotification('discography', artist.name, totalAlbums);
+
+ try {
+ for (let albumIndex = 0; albumIndex < artist.albums.length; albumIndex++) {
+ const album = artist.albums[albumIndex];
+
+ updateBulkDownloadProgress(notification, albumIndex, totalAlbums, album.title);
+
+ try {
+ const { album: fullAlbum, tracks } = await api.getAlbum(album.id);
+ const albumTitle = sanitizeForFilename(fullAlbum.title || 'Unknown Album');
+ const albumFolder = `${rootFolder}/${albumTitle}`;
+
+ const coverUrl = fullAlbum.cover ? api.getCoverUrl(fullAlbum.cover, '1280') : null;
+
+ for (const track of tracks) {
+ const filename = buildTrackFilename(track, quality);
+ const blob = await downloadTrackBlob(track, quality, api, coverUrl);
+ zip.file(`${albumFolder}/${filename}`, blob);
+ }
+ } catch (error) {
+ console.error(`Failed to download album ${album.title}:`, error);
+ }
+ }
+
+ updateBulkDownloadProgress(notification, totalAlbums, totalAlbums, 'Creating ZIP...');
+
+ const zipBlob = await zip.generateAsync({
+ type: 'blob',
+ compression: 'DEFLATE',
+ compressionOptions: { level: 6 }
+ });
+
+ const url = URL.createObjectURL(zipBlob);
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = `${rootFolder}.zip`;
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ URL.revokeObjectURL(url);
+
+ completeBulkDownload(notification, true);
+ } catch (error) {
+ completeBulkDownload(notification, false, error.message);
+ throw error;
+ }
+}
+
+function createBulkDownloadNotification(type, name, totalItems) {
+ const container = createDownloadNotification();
+
+ const notifEl = document.createElement('div');
+ notifEl.className = 'download-task bulk-download';
+ notifEl.style.cssText = `
+ background: var(--card);
+ border: 1px solid var(--border);
+ border-radius: var(--radius);
+ padding: 1rem;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+ animation: slideIn 0.3s ease;
+ `;
+
+ notifEl.innerHTML = `
+
+
+
+
+ ${track.artist?.name || 'Unknown'}
+
+ Starting...
+
+
+ `;
+
+ container.appendChild(notifEl);
+ return notifEl;
+}
+
+function updateBulkDownloadProgress(notifEl, current, total, currentItem) {
+ const progressFill = notifEl.querySelector('.download-progress-fill');
+ const statusEl = notifEl.querySelector('.download-status');
+
+ const percent = total > 0 ? Math.round((current / total) * 100) : 0;
+ progressFill.style.width = `${percent}%`;
+ statusEl.textContent = `${current}/${total} - ${currentItem}`;
+}
+
+function completeBulkDownload(notifEl, success = true, message = null) {
+ const progressFill = notifEl.querySelector('.download-progress-fill');
+ const statusEl = notifEl.querySelector('.download-status');
+
+ if (success) {
+ progressFill.style.width = '100%';
+ progressFill.style.background = '#10b981';
+ statusEl.textContent = '✓ Download complete';
+ statusEl.style.color = '#10b981';
+
+ setTimeout(() => {
+ notifEl.style.animation = 'slideOut 0.3s ease';
+ setTimeout(() => notifEl.remove(), 300);
+ }, 3000);
+ } else {
+ progressFill.style.background = '#ef4444';
+ statusEl.textContent = message || '✗ Download failed';
+ statusEl.style.color = '#ef4444';
+
+ setTimeout(() => {
+ notifEl.style.animation = 'slideOut 0.3s ease';
+ setTimeout(() => notifEl.remove(), 300);
+ }, 5000);
+ }
+}
+
+const style = document.createElement('style');
+style.textContent = `
+ @keyframes slideIn {
+ from {
+ transform: translateX(100%);
+ opacity: 0;
+ }
+ to {
+ transform: translateX(0);
+ opacity: 1;
+ }
+ }
+
+ @keyframes slideOut {
+ from {
+ transform: translateX(0);
+ opacity: 1;
+ }
+ to {
+ transform: translateX(100%);
+ opacity: 0;
+ }
+ }
+
+ @keyframes spin {
+ from { transform: rotate(0deg); }
+ to { transform: rotate(360deg); }
+ }
+
+ .animate-spin {
+ animation: spin 1s linear infinite;
+ }
+
+ .download-cancel:hover {
+ background: var(--secondary) !important;
+ color: var(--foreground) !important;
+ }
+
+ .now-playing-bar .title,
+ .now-playing-bar .artist {
+ cursor: pointer;
+ transition: color 0.2s;
+ }
+
+ .now-playing-bar .title:hover,
+ .now-playing-bar .artist:hover {
+ color: var(--highlight);
+ text-decoration: underline;
+ }
+`;
+document.head.appendChild(style);
+
document.addEventListener('DOMContentLoaded', () => {
const api = new LosslessAPI(apiSettings);
const ui = new UIRenderer(api);
const audioPlayer = document.getElementById('audio-player');
- const player = new Player(audioPlayer, api, QUALITY);
+ const currentQuality = localStorage.getItem('playback-quality') || 'LOSSLESS';
+ const player = new Player(audioPlayer, api, currentQuality);
const mainContent = document.querySelector('.main-content');
const playPauseBtn = document.querySelector('.play-pause-btn');
@@ -41,6 +469,81 @@ document.addEventListener('DOMContentLoaded', () => {
let contextTrack = null;
+ const qualitySetting = document.getElementById('quality-setting');
+ if (qualitySetting) {
+ const savedQuality = localStorage.getItem('playback-quality') || 'LOSSLESS';
+ qualitySetting.value = savedQuality;
+ player.setQuality(savedQuality);
+
+ qualitySetting.addEventListener('change', (e) => {
+ const newQuality = e.target.value;
+ player.setQuality(newQuality);
+ localStorage.setItem('playback-quality', newQuality);
+ });
+ }
+
+ document.querySelector('.now-playing-bar .title').addEventListener('click', () => {
+ const track = player.currentTrack;
+ if (track?.album?.id) {
+ window.location.hash = `#album/${track.album.id}`;
+ }
+ });
+
+ document.querySelector('.now-playing-bar .artist').addEventListener('click', () => {
+ const track = player.currentTrack;
+ if (track?.artist?.id) {
+ window.location.hash = `#artist/${track.artist.id}`;
+ }
+ });
+
+ document.addEventListener('click', async (e) => {
+ if (e.target.closest('#download-album-btn')) {
+ const btn = e.target.closest('#download-album-btn');
+ if (btn.disabled) return;
+
+ const albumId = window.location.hash.split('/')[1];
+ if (!albumId) return;
+
+ btn.disabled = true;
+ const originalHTML = btn.innerHTML;
+ btn.innerHTML = 'Downloading...';
+
+ try {
+ const { album, tracks } = await api.getAlbum(albumId);
+ await downloadAlbumAsZip(album, tracks, api, player.quality);
+ } catch (error) {
+ console.error('Album download failed:', error);
+ alert('Failed to download album: ' + error.message);
+ } finally {
+ btn.disabled = false;
+ btn.innerHTML = originalHTML;
+ }
+ }
+
+ if (e.target.closest('#download-discography-btn')) {
+ const btn = e.target.closest('#download-discography-btn');
+ if (btn.disabled) return;
+
+ const artistId = window.location.hash.split('/')[1];
+ if (!artistId) return;
+
+ btn.disabled = true;
+ const originalHTML = btn.innerHTML;
+ btn.innerHTML = 'Downloading...';
+
+ try {
+ const artist = await api.getArtist(artistId);
+ await downloadDiscography(artist, api, player.quality);
+ } catch (error) {
+ console.error('Discography download failed:', error);
+ alert('Failed to download discography: ' + error.message);
+ } finally {
+ btn.disabled = false;
+ btn.innerHTML = originalHTML;
+ }
+ }
+ });
+
document.querySelectorAll('.search-tab').forEach(tab => {
tab.addEventListener('click', () => {
document.querySelectorAll('.search-tab').forEach(t => t.classList.remove('active'));
@@ -91,7 +594,7 @@ document.addEventListener('DOMContentLoaded', () => {
track.id === (currentQueue[player.currentQueueIndex] || {}).id;
return `
-
+
+
+ Downloading ${type === 'album' ? 'Album' : 'Discography'}
+
+
+
+ Starting...
+
+
{
}).join('');
queueList.innerHTML = html;
+
+ queueList.querySelectorAll('.track-item').forEach((item, index) => {
+ item.addEventListener('click', () => {
+ player.playAtIndex(index);
+ player.updatePlayingTrackIndicator();
+ renderQueue();
+ });
+ });
+
player.updatePlayingTrackIndicator();
};
mainContent.addEventListener('click', e => {
const trackItem = e.target.closest('.track-item');
- if (trackItem) {
+ if (trackItem && !trackItem.dataset.queueIndex) {
const parentList = trackItem.closest('.track-list');
const allTrackElements = Array.from(parentList.querySelectorAll('.track-item'));
const trackList = allTrackElements.map(el => trackDataStore.get(el)).filter(Boolean);
@@ -154,23 +666,39 @@ document.addEventListener('DOMContentLoaded', () => {
player.addToQueue(contextTrack);
renderQueue();
} else if (action === 'download' && contextTrack) {
- const filename = buildTrackFilename(contextTrack, QUALITY);
+ const quality = player.quality;
+ const filename = buildTrackFilename(contextTrack, quality);
try {
- const tempEl = document.createElement('div');
- tempEl.textContent = `Downloading: ${contextTrack.title}...`;
- tempEl.style.cssText = 'position:fixed;bottom:100px;right:20px;background:var(--card);padding:1rem 1.5rem;border-radius:var(--radius);border:1px solid var(--border);z-index:9999;box-shadow:0 4px 12px rgba(0,0,0,0.5);';
- document.body.appendChild(tempEl);
+ const { taskEl, abortController } = addDownloadTask(
+ contextTrack.id,
+ contextTrack,
+ filename,
+ api
+ );
- await api.downloadTrack(contextTrack.id, QUALITY, filename);
+ const coverUrl = contextTrack.album?.cover
+ ? api.getCoverUrl(contextTrack.album.cover, '1280')
+ : null;
- tempEl.textContent = `✓ Downloaded: ${contextTrack.title}`;
- setTimeout(() => tempEl.remove(), 3000);
+ await api.downloadTrack(contextTrack.id, quality, filename, {
+ signal: abortController.signal,
+ track: contextTrack,
+ coverUrl: coverUrl,
+ embedMetadata: true,
+ onProgress: (progress) => {
+ updateDownloadProgress(contextTrack.id, progress);
+ }
+ });
+
+ completeDownloadTask(contextTrack.id, true);
} catch (error) {
- const errorMsg = error.message === RATE_LIMIT_ERROR_MESSAGE
- ? error.message
- : 'Download failed. Please try again.';
- alert(errorMsg);
+ if (error.name !== 'AbortError') {
+ const errorMsg = error.message === RATE_LIMIT_ERROR_MESSAGE
+ ? error.message
+ : 'Download failed. Please try again.';
+ completeDownloadTask(contextTrack.id, false, errorMsg);
+ }
}
}
@@ -217,6 +745,7 @@ document.addEventListener('DOMContentLoaded', () => {
if (duration) {
progressFill.style.width = `${(currentTime / duration) * 100}%`;
currentTimeEl.textContent = formatTime(currentTime);
+ player.updateMediaSessionPositionState();
}
});
@@ -251,6 +780,7 @@ document.addEventListener('DOMContentLoaded', () => {
seek(progressBar, progressFill, e, position => {
if (!isNaN(audioPlayer.duration)) {
audioPlayer.currentTime = position * audioPlayer.duration;
+ player.updateMediaSessionPositionState();
if (wasPlaying) audioPlayer.play();
}
});
@@ -263,6 +793,7 @@ document.addEventListener('DOMContentLoaded', () => {
seek(progressBar, progressFill, e, position => {
if (!isNaN(audioPlayer.duration)) {
audioPlayer.currentTime = position * audioPlayer.duration;
+ player.updateMediaSessionPositionState();
}
});
}
@@ -418,48 +949,6 @@ document.addEventListener('DOMContentLoaded', () => {
router();
window.addEventListener('hashchange', router);
- if ('mediaSession' in navigator) {
- navigator.mediaSession.setActionHandler('play', () => {
- player.handlePlayPause();
- });
-
- navigator.mediaSession.setActionHandler('pause', () => {
- player.handlePlayPause();
- });
-
- navigator.mediaSession.setActionHandler('previoustrack', () => {
- player.playPrev();
- });
-
- navigator.mediaSession.setActionHandler('nexttrack', () => {
- player.playNext();
- });
-
- navigator.mediaSession.setActionHandler('seekbackward', (details) => {
- const skipTime = details.seekOffset || 10;
- player.seekBackward(skipTime);
- });
-
- navigator.mediaSession.setActionHandler('seekforward', (details) => {
- const skipTime = details.seekOffset || 10;
- player.seekForward(skipTime);
- });
-
- navigator.mediaSession.setActionHandler('seekto', (details) => {
- if (details.fastSeek && 'fastSeek' in audioPlayer) {
- audioPlayer.fastSeek(details.seekTime);
- } else {
- audioPlayer.currentTime = details.seekTime;
- }
- player.updateMediaSessionPositionState();
- });
-
- navigator.mediaSession.setActionHandler('stop', () => {
- audioPlayer.pause();
- audioPlayer.currentTime = 0;
- });
- }
-
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('./sw.js')
diff --git a/js/metadata.js b/js/metadata.js
new file mode 100644
index 0000000..6edbb52
--- /dev/null
+++ b/js/metadata.js
@@ -0,0 +1,210 @@
+export class MetadataEmbedder {
+ constructor() {
+ this.ffmpegLoaded = false;
+ this.ffmpeg = null;
+ this.fetchFile = null;
+ }
+
+ async loadFFmpeg() {
+ if (this.ffmpegLoaded) return;
+
+ try {
+ console.log('[FFmpeg] Loading FFmpeg...');
+
+ if (typeof FFmpegWASM === 'undefined' || typeof FFmpegUtil === 'undefined') {
+ throw new Error('FFmpeg libraries not loaded. Please check your internet connection.');
+ }
+
+ const { FFmpeg } = FFmpegWASM;
+ const { toBlobURL, fetchFile } = FFmpegUtil;
+
+ this.ffmpeg = new FFmpeg();
+ this.fetchFile = fetchFile;
+
+ const baseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.6/dist/umd';
+
+ this.ffmpeg.on('log', ({ message }) => {
+ console.log('[FFmpeg]', message);
+ });
+
+ await this.ffmpeg.load({
+ coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
+ wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm')
+ });
+
+ this.ffmpegLoaded = true;
+ console.log('[FFmpeg] Loaded successfully');
+ } catch (error) {
+ console.error('[FFmpeg] Failed to load:', error);
+ throw error;
+ }
+ }
+
+ async embedMetadata(audioBlob, track, coverImageUrl, onProgress) {
+ console.log('[Metadata] Starting embedding for:', track.title);
+
+ if (!this.ffmpegLoaded) {
+ try {
+ await this.loadFFmpeg();
+ } catch (error) {
+ console.error('[Metadata] Cannot load FFmpeg, skipping metadata:', error);
+ return audioBlob;
+ }
+ }
+
+ if (!this.ffmpeg || !this.fetchFile) {
+ console.error('[Metadata] FFmpeg not properly initialized');
+ return audioBlob;
+ }
+
+ const inputName = 'input.flac';
+ const coverName = 'cover.jpg';
+ const outputName = 'output.flac';
+
+ try {
+ const arrayBuffer = await audioBlob.arrayBuffer();
+ await this.ffmpeg.writeFile(inputName, new Uint8Array(arrayBuffer));
+ console.log('[Metadata] Wrote input file:', inputName, 'size:', arrayBuffer.byteLength);
+
+ let hasCover = false;
+ if (coverImageUrl) {
+ try {
+ console.log('[Metadata] Fetching cover from:', coverImageUrl);
+ const coverData = await this.fetchFile(coverImageUrl);
+ await this.ffmpeg.writeFile(coverName, coverData);
+ hasCover = true;
+ console.log('[Metadata] Cover image written successfully, size:', coverData.length);
+ } catch (coverError) {
+ console.warn('[Metadata] Failed to fetch cover image:', coverError);
+ }
+ }
+
+ const metadata = this.buildMetadataArgs(track);
+ console.log('[Metadata] Metadata tags:', metadata.length / 2, 'fields');
+
+ let args;
+ if (hasCover) {
+ args = [
+ '-i', inputName,
+ '-i', coverName,
+ '-map', '0:a',
+ '-map', '1',
+ '-c:a', 'copy',
+ '-c:v', 'copy',
+ ...metadata,
+ '-metadata:s:v', 'title=Album cover',
+ '-metadata:s:v', 'comment=Cover (front)',
+ '-disposition:v', 'attached_pic',
+ outputName
+ ];
+ } else {
+ args = [
+ '-i', inputName,
+ ...metadata,
+ '-c:a', 'copy',
+ outputName
+ ];
+ }
+
+ console.log('[Metadata] Executing FFmpeg with', args.length, 'arguments');
+
+ if (onProgress) {
+ this.ffmpeg.on('progress', ({ progress }) => {
+ onProgress(progress);
+ });
+ }
+
+ await this.ffmpeg.exec(args);
+ console.log('[Metadata] FFmpeg exec completed');
+
+ const outputData = await this.ffmpeg.readFile(outputName);
+ const outputBlob = new Blob([outputData], { type: 'audio/flac' });
+ console.log('[Metadata] Output blob created - Input:', arrayBuffer.byteLength, 'Output:', outputBlob.size);
+
+ await this.ffmpeg.deleteFile(inputName);
+ await this.ffmpeg.deleteFile(outputName);
+ if (hasCover) {
+ await this.ffmpeg.deleteFile(coverName);
+ }
+ console.log('[Metadata] Cleanup complete');
+
+ return outputBlob;
+ } catch (error) {
+ console.error('[Metadata] Embedding failed:', error);
+ console.error('[Metadata] Error details:', {
+ name: error.name,
+ message: error.message,
+ stack: error.stack
+ });
+ return audioBlob;
+ }
+ }
+
+ buildMetadataArgs(track) {
+ const args = [];
+
+ if (track.title) {
+ args.push('-metadata', `title=${this.escapeMetadata(track.title)}`);
+ }
+
+ if (track.artist?.name) {
+ args.push('-metadata', `artist=${this.escapeMetadata(track.artist.name)}`);
+ }
+
+ if (track.album?.title) {
+ args.push('-metadata', `album=${this.escapeMetadata(track.album.title)}`);
+ }
+
+ if (track.album?.artist?.name) {
+ args.push('-metadata', `album_artist=${this.escapeMetadata(track.album.artist.name)}`);
+ }
+
+ if (track.trackNumber) {
+ const trackNum = Number(track.trackNumber);
+ if (Number.isFinite(trackNum) && trackNum > 0) {
+ const totalTracks = track.album?.numberOfTracks;
+ if (totalTracks && Number.isFinite(totalTracks) && totalTracks > 0) {
+ args.push('-metadata', `track=${trackNum}/${totalTracks}`);
+ } else {
+ args.push('-metadata', `track=${trackNum}`);
+ }
+ }
+ }
+
+ if (track.volumeNumber) {
+ const discNum = Number(track.volumeNumber);
+ if (Number.isFinite(discNum) && discNum > 0) {
+ const totalDiscs = track.album?.numberOfVolumes;
+ if (totalDiscs && Number.isFinite(totalDiscs) && totalDiscs > 0) {
+ args.push('-metadata', `disc=${discNum}/${totalDiscs}`);
+ } else {
+ args.push('-metadata', `disc=${discNum}`);
+ }
+ }
+ }
+
+ if (track.album?.releaseDate) {
+ const year = new Date(track.album.releaseDate).getFullYear();
+ if (!isNaN(year)) {
+ args.push('-metadata', `date=${year}`);
+ args.push('-metadata', `year=${year}`);
+ }
+ }
+
+ if (track.album?.upc) {
+ args.push('-metadata', `barcode=${track.album.upc}`);
+ }
+
+ if (track.isrc) {
+ args.push('-metadata', `isrc=${track.isrc}`);
+ }
+
+ args.push('-metadata', 'comment=https://monochrome.tf/');
+
+ return args;
+ }
+
+ escapeMetadata(value) {
+ return String(value).replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+ }
+}
\ No newline at end of file
diff --git a/js/player.js b/js/player.js
index 5365cab..63d17ad 100644
--- a/js/player.js
+++ b/js/player.js
@@ -1,4 +1,4 @@
-import { REPEAT_MODE, SVG_PLAY, SVG_PAUSE, formatTime } from './utils.js';
+import { REPEAT_MODE, formatTime } from './utils.js';
export class Player {
constructor(audioElement, api, quality = 'LOSSLESS') {
@@ -13,6 +13,52 @@ export class Player {
this.repeatMode = REPEAT_MODE.OFF;
this.preloadCache = new Map();
this.preloadAbortController = null;
+ this.currentTrack = null;
+
+ this.setupMediaSession();
+ }
+
+ setupMediaSession() {
+ if (!('mediaSession' in navigator)) return;
+
+ navigator.mediaSession.setActionHandler('play', () => {
+ this.audio.play().catch(console.error);
+ });
+
+ navigator.mediaSession.setActionHandler('pause', () => {
+ this.audio.pause();
+ });
+
+ navigator.mediaSession.setActionHandler('previoustrack', () => {
+ this.playPrev();
+ });
+
+ navigator.mediaSession.setActionHandler('nexttrack', () => {
+ this.playNext();
+ });
+
+ navigator.mediaSession.setActionHandler('seekbackward', (details) => {
+ const skipTime = details.seekOffset || 10;
+ this.seekBackward(skipTime);
+ });
+
+ navigator.mediaSession.setActionHandler('seekforward', (details) => {
+ const skipTime = details.seekOffset || 10;
+ this.seekForward(skipTime);
+ });
+
+ navigator.mediaSession.setActionHandler('seekto', (details) => {
+ if (details.seekTime !== undefined) {
+ this.audio.currentTime = Math.max(0, details.seekTime);
+ this.updateMediaSessionPositionState();
+ }
+ });
+
+ navigator.mediaSession.setActionHandler('stop', () => {
+ this.audio.pause();
+ this.audio.currentTime = 0;
+ this.updateMediaSessionPlaybackState();
+ });
}
setQuality(quality) {
@@ -35,7 +81,7 @@ export class Player {
}
}
- for (const { track, index } of tracksToPreload) {
+ for (const { track } of tracksToPreload) {
if (this.preloadCache.has(track.id)) continue;
try {
@@ -45,13 +91,11 @@ export class Player {
fetch(streamUrl, {
signal: this.preloadAbortController.signal,
- method: 'GET',
+ method: 'HEAD',
mode: 'cors',
cache: 'default'
- }).then(response => {
- if (response.ok) {
- this.preloadCache.set(track.id, streamUrl);
- }
+ }).then(() => {
+ this.preloadCache.set(track.id, streamUrl);
}).catch(err => {
if (err.name !== 'AbortError') {
console.debug('Preload failed for:', track.title);
@@ -73,6 +117,7 @@ export class Player {
}
const track = currentQueue[this.currentQueueIndex];
+ this.currentTrack = track;
document.querySelector('.now-playing-bar .cover').src =
this.api.getCoverUrl(track.album?.cover, '160');
@@ -95,13 +140,21 @@ export class Player {
this.audio.src = streamUrl;
await this.audio.play();
+ this.updateMediaSessionPlaybackState();
this.preloadNextTracks();
} catch (error) {
- console.error(`Could not get track URL for: ${track.title}`, error);
+ console.error(`Could not play track: ${track.title}`, error);
document.querySelector('.now-playing-bar .title').textContent = `Error: ${track.title}`;
document.querySelector('.now-playing-bar .artist').textContent = error.message || 'Could not load track';
- document.querySelector('.play-pause-btn').innerHTML = SVG_PLAY;
+ }
+ }
+
+ playAtIndex(index) {
+ const currentQueue = this.shuffleActive ? this.shuffledQueue : this.queue;
+ if (index >= 0 && index < currentQueue.length) {
+ this.currentQueueIndex = index;
+ this.playTrackFromQueue();
}
}
@@ -129,6 +182,7 @@ export class Player {
playPrev() {
if (this.audio.currentTime > 3) {
this.audio.currentTime = 0;
+ this.updateMediaSessionPositionState();
} else if (this.currentQueueIndex > 0) {
this.currentQueueIndex--;
this.playTrackFromQueue();
@@ -137,18 +191,25 @@ export class Player {
handlePlayPause() {
if (!this.audio.src) return;
- this.audio.paused ? this.audio.play() : this.audio.pause();
+
+ if (this.audio.paused) {
+ this.audio.play().catch(console.error);
+ } else {
+ this.audio.pause();
+ }
}
seekBackward(seconds = 10) {
const newTime = Math.max(0, this.audio.currentTime - seconds);
this.audio.currentTime = newTime;
+ this.updateMediaSessionPositionState();
}
seekForward(seconds = 10) {
const duration = this.audio.duration || 0;
const newTime = Math.min(duration, this.audio.currentTime + seconds);
this.audio.currentTime = newTime;
+ this.updateMediaSessionPositionState();
}
toggleShuffle() {
@@ -188,6 +249,11 @@ export class Player {
addToQueue(track) {
this.queue.push(track);
+
+ if (!this.currentTrack || this.currentQueueIndex === -1) {
+ this.currentQueueIndex = this.queue.length - 1;
+ this.playTrackFromQueue();
+ }
}
getCurrentQueue() {
@@ -208,14 +274,12 @@ export class Player {
const artwork = [];
const sizes = ['96', '128', '192', '256', '384', '512'];
-
const coverId = track.album?.cover;
if (coverId) {
sizes.forEach(size => {
- const url = this.api.getCoverUrl(coverId, size);
artwork.push({
- src: url,
+ src: this.api.getCoverUrl(coverId, size),
sizes: `${size}x${size}`,
type: 'image/jpeg'
});
@@ -229,28 +293,33 @@ export class Player {
artwork: artwork.length > 0 ? artwork : undefined
});
- navigator.mediaSession.playbackState = this.audio.paused ? 'paused' : 'playing';
+ this.updateMediaSessionPlaybackState();
+ this.updateMediaSessionPositionState();
}
updateMediaSessionPlaybackState() {
- if ('mediaSession' in navigator) {
- navigator.mediaSession.playbackState = this.audio.paused ? 'paused' : 'playing';
- }
+ if (!('mediaSession' in navigator)) return;
+ navigator.mediaSession.playbackState = this.audio.paused ? 'paused' : 'playing';
}
updateMediaSessionPositionState() {
- if ('mediaSession' in navigator && 'setPositionState' in navigator.mediaSession) {
- if (this.audio.duration && !isNaN(this.audio.duration)) {
- try {
- navigator.mediaSession.setPositionState({
- duration: this.audio.duration,
- playbackRate: this.audio.playbackRate,
- position: this.audio.currentTime
- });
- } catch (error) {
- console.debug('Failed to update position state:', error);
- }
- }
+ if (!('mediaSession' in navigator)) return;
+ if (!('setPositionState' in navigator.mediaSession)) return;
+
+ const duration = this.audio.duration;
+
+ if (!duration || isNaN(duration) || !isFinite(duration)) {
+ return;
+ }
+
+ try {
+ navigator.mediaSession.setPositionState({
+ duration: duration,
+ playbackRate: this.audio.playbackRate || 1,
+ position: Math.min(this.audio.currentTime, duration)
+ });
+ } catch (error) {
+ console.debug('Failed to update Media Session position:', error);
}
}
}
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 1738929..4c2b690 100644
--- a/styles.css
+++ b/styles.css
@@ -1392,4 +1392,32 @@ input:checked + .slider:before {
padding: var(--spacing-sm) var(--spacing-md);
font-size: 0.9rem;
}
+}
+.btn-download {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.75rem 1.5rem;
+ background-color: var(--primary);
+ color: var(--primary-foreground);
+ border: none;
+ border-radius: var(--radius);
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.btn-download:hover {
+ opacity: 0.9;
+ transform: translateY(-1px);
+}
+
+.btn-download:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ transform: none;
+}
+
+.btn-download svg {
+ flex-shrink: 0;
}
\ No newline at end of file
${index + 1}