+
+
+ Backup & Restore
+ Export or import your library and history as JSON
+
+
+
+
+
+
-
-
- Blocked Albums
-
-
+
+
+ Export All Settings
+ Export all app settings as JSON
+
+
+
+
+
+
-
-
- No blocked content
+
+
+
+
+
+ Blocked Content
+ Manage artists, albums, and tracks you've blocked from
+ recommendations
+
+
+
+
+
diff --git a/js/accounts/auth.js b/js/accounts/auth.js
index 27fb1bd..8a422f6 100644
--- a/js/accounts/auth.js
+++ b/js/accounts/auth.js
@@ -31,7 +31,7 @@ export class AuthManager {
this.user = await auth.get();
this.updateUI(this.user);
this.authListeners.forEach((listener) => listener(this.user));
- } catch (error) {
+ } catch {
this.user = null;
this.updateUI(null);
}
diff --git a/js/accounts/pocketbase.js b/js/accounts/pocketbase.js
index 55d2008..67a2f08 100644
--- a/js/accounts/pocketbase.js
+++ b/js/accounts/pocketbase.js
@@ -200,6 +200,19 @@ const syncManager = {
};
}
+ if (type === 'video') {
+ return {
+ ...base,
+ type: 'video',
+ title: item.title || null,
+ duration: item.duration || null,
+ image: item.image || item.cover || null,
+ artist: item.artist || (item.artists && item.artists.length > 0 ? item.artists[0] : null) || null,
+ artists: item.artists?.map((a) => ({ id: a.id, name: a.name || null })) || [],
+ album: item.album || { title: 'Video', cover: item.image || item.cover },
+ };
+ }
+
if (type === 'album') {
return {
...base,
@@ -280,7 +293,7 @@ const syncManager = {
id: playlist.id,
name: playlist.name,
cover: playlist.cover || null,
- tracks: playlist.tracks ? playlist.tracks.map((t) => this._minifyItem('track', t)) : [],
+ tracks: playlist.tracks ? playlist.tracks.map((t) => this._minifyItem(t.type || 'track', t)) : [],
createdAt: playlist.createdAt || Date.now(),
updatedAt: playlist.updatedAt || Date.now(),
numberOfTracks: playlist.tracks ? playlist.tracks.length : 0,
@@ -572,7 +585,9 @@ const syncManager = {
id: playlist.id,
name: playlist.name,
cover: playlist.cover || null,
- tracks: playlist.tracks ? playlist.tracks.map((t) => this._minifyItem('track', t)) : [],
+ tracks: playlist.tracks
+ ? playlist.tracks.map((t) => this._minifyItem(t.type || 'track', t))
+ : [],
createdAt: playlist.createdAt || Date.now(),
updatedAt: playlist.updatedAt || Date.now(),
numberOfTracks: playlist.tracks ? playlist.tracks.length : 0,
diff --git a/js/api.js b/js/api.js
index 0ea7b1a..cc8e0e3 100644
--- a/js/api.js
+++ b/js/api.js
@@ -10,6 +10,7 @@ import { trackDateSettings, losslessContainerSettings } from './storage.js';
import { APICache } from './cache.js';
import { addMetadataToAudio, prefetchMetadataObjects } from './metadata.js';
import { DashDownloader } from './dash-downloader.js';
+import { HlsDownloader } from './hls-downloader.js';
import { encodeToMp3, MP3EncodingError } from './mp3-encoder.js';
import { ffmpeg, loadFfmpeg } from './ffmpeg.js';
@@ -59,6 +60,18 @@ export class LosslessAPI {
}
}
+ if (options.allowedDomains) {
+ instances = instances.filter((instance) => {
+ const url = typeof instance === 'string' ? instance : instance.url;
+ return options.allowedDomains.some((domain) => url.includes(domain));
+ });
+ if (instances.length === 0) {
+ throw new Error(
+ `No API instances configured for type: ${type} matching allowedDomains: ${options.allowedDomains.join(', ')}`
+ );
+ }
+ }
+
const maxTotalAttempts = instances.length * 2; // Allow some retries across instances
let lastError = null;
let instanceIndex = Math.floor(Math.random() * instances.length);
@@ -156,8 +169,15 @@ export class LosslessAPI {
prepareTrack(track) {
let normalized = track;
+ if (track.type && typeof track.type === 'string') {
+ const lowType = track.type.toLowerCase();
+ if (lowType === 'video' || lowType === 'track') {
+ normalized = { ...track, type: lowType };
+ }
+ }
+
if (!track.artist && Array.isArray(track.artists) && track.artists.length > 0) {
- normalized = { ...track, artist: track.artists[0] };
+ normalized = { ...normalized, artist: track.artists[0] };
}
const derivedQuality = deriveTrackQuality(normalized);
@@ -181,6 +201,16 @@ export class LosslessAPI {
return playlist;
}
+ prepareVideo(video) {
+ let normalized = { ...video, type: 'video' };
+
+ if (!video.artist && Array.isArray(video.artists) && video.artists.length > 0) {
+ normalized.artist = video.artists[0];
+ }
+
+ return normalized;
+ }
+
prepareArtist(artist) {
if (!artist.type && Array.isArray(artist.artistTypes) && artist.artistTypes.length > 0) {
return { ...artist, type: artist.artistTypes[0] };
@@ -264,8 +294,22 @@ export class LosslessAPI {
}
extractStreamUrlFromManifest(manifest) {
+ if (!manifest) return null;
+
try {
- const decoded = atob(manifest);
+ let decoded;
+ if (typeof manifest === 'string') {
+ try {
+ decoded = atob(manifest);
+ } catch {
+ decoded = manifest;
+ }
+ } else if (typeof manifest === 'object') {
+ if (manifest.urls?.[0]) return manifest.urls[0];
+ return null;
+ } else {
+ return null;
+ }
// Check if it's a DASH manifest (XML)
if (decoded.includes('
this.prepareVideo(v)),
+ };
+
+ await this.cache.set('search_videos', query, result);
+ return result;
+ } catch (error) {
+ if (error.name === 'AbortError') throw error;
+ console.error('Video search failed:', error);
+ return { items: [], limit: 0, offset: 0, totalNumberOfItems: 0 };
+ }
+ }
+
+ async getVideo(id) {
+ const cached = await this.cache.get('video', id);
+ if (cached) return cached;
+
+ const response = await this.fetchWithRetry(`/video/?id=${id}`, {
+ type: 'streaming',
+ allowedDomains: ['api.monochrome.tf', 'arran.monochrome.tf'],
+ });
+ const jsonResponse = await response.json();
+
+ const data = jsonResponse.data || jsonResponse;
+
+ const result = {
+ track: data,
+ info: data,
+ originalTrackUrl: data.OriginalTrackUrl || null,
+ };
+
+ await this.cache.set('video', id, result);
+ return result;
+ }
+
async getAlbum(id) {
const cached = await this.cache.get('album', id);
if (cached) return cached;
@@ -769,9 +860,11 @@ export class LosslessAPI {
const albumMap = new Map();
const trackMap = new Map();
+ const videoMap = new Map();
const isTrack = (v) => v?.id && v.duration && v.album;
const isAlbum = (v) => v?.id && 'numberOfTracks' in v;
+ const isVideo = (v) => v?.id && v.type === 'VIDEO';
const scan = (value, visited = new Set()) => {
if (!value || typeof value !== 'object' || visited.has(value)) return;
@@ -785,6 +878,7 @@ export class LosslessAPI {
const item = value.item || value;
if (isAlbum(item)) albumMap.set(item.id, this.prepareAlbum(item));
if (isTrack(item)) trackMap.set(item.id, this.prepareTrack(item));
+ if (isVideo(item)) videoMap.set(item.id, this.prepareVideo(item));
Object.values(value).forEach((nested) => scan(nested, visited));
};
@@ -792,25 +886,23 @@ export class LosslessAPI {
entries.forEach((entry) => scan(entry));
if (!options.lightweight) {
- // Attempt to find more albums/EPs via search since the direct feed might be limited
try {
- const searchResults = await this.searchAlbums(artist.name);
- if (searchResults && searchResults.items) {
+ const videoSearch = await this.searchVideos(artist.name);
+ if (videoSearch && videoSearch.items) {
const numericArtistId = Number(artistId);
-
- for (const item of searchResults.items) {
+ for (const item of videoSearch.items) {
const itemArtistId = item.artist?.id;
const matchesArtist =
itemArtistId === numericArtistId ||
(Array.isArray(item.artists) && item.artists.some((a) => a.id === numericArtistId));
- if (matchesArtist && !albumMap.has(item.id)) {
- albumMap.set(item.id, item);
+ if (matchesArtist && !videoMap.has(item.id)) {
+ videoMap.set(item.id, item);
}
}
}
} catch (e) {
- console.warn('Failed to fetch additional albums via search:', e);
+ console.warn('Failed to fetch additional videos via search:', e);
}
}
@@ -826,10 +918,14 @@ export class LosslessAPI {
.sort((a, b) => (b.popularity || 0) - (a.popularity || 0))
.slice(0, 15);
+ const videos = Array.from(videoMap.values()).sort(
+ (a, b) => new Date(b.releaseDate || 0) - new Date(a.releaseDate || 0)
+ );
+
// Enrich tracks with album release dates
const tracks = options.lightweight ? topTracks : await this.enrichTracksWithAlbumDates(topTracks);
- const result = { ...artist, albums, eps, tracks };
+ const result = { ...artist, albums, eps, tracks, videos };
await this.cache.set('artist', cacheKey, result);
return result;
@@ -1108,25 +1204,97 @@ export class LosslessAPI {
return streamUrl;
}
+ async getVideoStreamUrl(id) {
+ const cacheKey = `video_stream_${id}`;
+
+ if (this.streamCache.has(cacheKey)) {
+ return this.streamCache.get(cacheKey);
+ }
+
+ const lookup = await this.getVideo(id);
+
+ let streamUrl;
+
+ const findValue = (obj, key) => {
+ if (!obj || typeof obj !== 'object') return null;
+ if (obj[key]) return obj[key];
+ for (const v of Object.values(obj)) {
+ if (v && typeof v === 'object') {
+ const f = findValue(v, key);
+ if (f) return f;
+ }
+ }
+ return null;
+ };
+
+ const manifest = findValue(lookup, 'manifest') || findValue(lookup, 'Manifest');
+ if (manifest) {
+ streamUrl = this.extractStreamUrlFromManifest(manifest);
+ }
+
+ if (!streamUrl) {
+ streamUrl =
+ findValue(lookup, 'OriginalTrackUrl') ||
+ findValue(lookup, 'originalTrackUrl') ||
+ findValue(lookup, 'url') ||
+ findValue(lookup, 'streamUrl') ||
+ findValue(lookup, 'manifestUrl');
+ }
+
+ if (!streamUrl) {
+ throw new Error(`Could not resolve video stream URL for ID: ${id}`);
+ }
+
+ this.streamCache.set(cacheKey, streamUrl);
+ return streamUrl;
+ }
+
async downloadTrack(id, quality = 'HI_RES_LOSSLESS', filename, options = {}) {
// Load ffmpeg in the background.
loadFfmpeg().catch(console.error);
const { onProgress, track } = options;
const prefetchPromises = prefetchMetadataObjects(track, this);
+ const isVideo = track?.type === 'video';
try {
// MP3_320 is not a native TIDAL quality, we download LOSSLESS and convert
const downloadQuality = quality === 'MP3_320' ? 'LOSSLESS' : quality;
- const lookup = await this.getTrack(id, downloadQuality);
+ let lookup;
+ if (isVideo) {
+ lookup = await this.getVideo(id);
+ } else {
+ lookup = await this.getTrack(id, downloadQuality);
+ }
+
let streamUrl;
let blob;
if (lookup.originalTrackUrl) {
streamUrl = lookup.originalTrackUrl;
} else {
- streamUrl = this.extractStreamUrlFromManifest(lookup.info.manifest);
+ const findValue = (obj, key) => {
+ if (!obj || typeof obj !== 'object') return null;
+ if (obj[key]) return obj[key];
+ for (const v of Object.values(obj)) {
+ if (v && typeof v === 'object') {
+ const f = findValue(v, key);
+ if (f) return f;
+ }
+ }
+ return null;
+ };
+
+ const manifest = isVideo
+ ? findValue(lookup, 'manifest') || findValue(lookup, 'Manifest')
+ : lookup.info?.manifest;
+
+ if (!manifest) {
+ throw new Error('Could not resolve manifest');
+ }
+
+ streamUrl = this.extractStreamUrlFromManifest(manifest);
if (!streamUrl) {
throw new Error('Could not resolve stream URL');
}
@@ -1142,6 +1310,8 @@ export class LosslessAPI {
});
} catch (dashError) {
console.error('DASH download failed:', dashError);
+ if (isVideo) throw dashError;
+
// Fallback to LOSSLESS if DASH fails, but not if we're already downloading LOSSLESS
if (downloadQuality !== 'LOSSLESS') {
console.warn('Falling back to LOSSLESS (16-bit) download.');
@@ -1149,6 +1319,17 @@ export class LosslessAPI {
}
throw dashError;
}
+ } else if (streamUrl.includes('.m3u8') || streamUrl.includes('application/vnd.apple.mpegurl')) {
+ try {
+ const downloader = new HlsDownloader();
+ blob = await downloader.downloadHlsStream(streamUrl, {
+ signal: options.signal,
+ onProgress: options.onProgress,
+ });
+ } catch (hlsError) {
+ console.error('HLS download failed:', hlsError);
+ throw hlsError;
+ }
} else {
const response = await fetch(streamUrl, {
cache: 'no-store',
@@ -1159,7 +1340,6 @@ export class LosslessAPI {
throw new Error(`Fetch failed: ${response.status}`);
}
- // ... (standard handling for Content-Length and body reader)
const contentLength = response.headers.get('Content-Length');
const totalBytes = contentLength ? parseInt(contentLength, 10) : 0;
@@ -1185,7 +1365,8 @@ export class LosslessAPI {
}
}
- blob = new Blob(chunks, { type: response.headers.get('Content-Type') || 'audio/flac' });
+ const defaultMime = isVideo ? 'video/mp4' : 'audio/flac';
+ blob = new Blob(chunks, { type: response.headers.get('Content-Type') || defaultMime });
} else {
blob = await response.blob();
if (onProgress) {
@@ -1198,91 +1379,78 @@ export class LosslessAPI {
}
}
- // Convert to MP3 320kbps if requested
- if (quality === 'MP3_320') {
- try {
- blob = await encodeToMp3(
- blob,
- (progress) => {
- console.log(progress);
- onProgress?.(progress);
- },
- options.signal
- );
- } catch (encodingError) {
- if (onProgress) {
- onProgress({
- stage: 'error',
- message: `Encoding failed: ${encodingError.message}`,
- });
+ if (!isVideo) {
+ // Convert to MP3 320kbps if requested
+ if (quality === 'MP3_320') {
+ try {
+ blob = await encodeToMp3(blob, onProgress, options.signal);
+ } catch (encodingError) {
+ if (onProgress) {
+ onProgress({
+ stage: 'error',
+ message: `Encoding failed: ${encodingError.message}`,
+ });
+ }
+ throw encodingError;
}
- throw encodingError;
}
- }
- if (quality.endsWith('LOSSLESS')) {
- try {
- switch (losslessContainerSettings.getContainer()) {
- case 'flac':
- if ((await getExtensionFromBlob(blob)) != 'flac') {
+ if (quality.endsWith('LOSSLESS')) {
+ try {
+ switch (losslessContainerSettings.getContainer()) {
+ case 'flac':
blob = await ffmpeg(
blob,
- { args: ['-c:a', 'copy'] },
+ { args: ['-vn', '-map_metadata', '-1', '-map', '0:a', '-c:a', 'flac'] },
'output.flac',
'audio/flac',
- (progress) => {
- console.log(progress);
- onProgress?.(progress);
- },
+ onProgress,
options.signal
);
- }
- break;
- case 'alac':
- blob = await ffmpeg(
- blob,
- { args: ['-c:a', 'alac'] },
- 'output.m4a',
- 'audio/mp4',
- (progress) => {
- console.log(progress);
- onProgress?.(progress);
- },
- options.signal
- );
- break;
- default:
- break;
+ break;
+ case 'alac':
+ blob = await ffmpeg(
+ blob,
+ { args: ['-c:a', 'alac'] },
+ 'output.m4a',
+ 'audio/mp4',
+ onProgress,
+ options.signal
+ );
+ break;
+ default:
+ break;
+ }
+ } catch (error) {
+ if (error?.name === 'AbortError') {
+ throw error;
+ }
+
+ console.error('Lossless container conversion failed:', error);
}
- } catch (error) {
- if (error?.name === 'AbortError') {
- throw error;
+ }
+
+ // Add metadata if track information is provided
+ if (track) {
+ if (onProgress) {
+ onProgress({
+ stage: 'processing',
+ message: 'Adding metadata...',
+ });
}
- console.error('Lossless container conversion failed:', error);
- }
- }
+ const enrichedTrack = { ...track };
+ if (lookup.info) {
+ enrichedTrack.replayGain = {
+ trackReplayGain: lookup.info.trackReplayGain,
+ trackPeakAmplitude: lookup.info.trackPeakAmplitude,
+ albumReplayGain: lookup.info.albumReplayGain,
+ albumPeakAmplitude: lookup.info.albumPeakAmplitude,
+ };
+ }
- // Add metadata if track information is provided
- if (track) {
- if (onProgress) {
- onProgress({
- stage: 'processing',
- message: 'Adding metadata...',
- });
+ blob = await addMetadataToAudio(blob, enrichedTrack, this, quality, prefetchPromises);
}
-
- const enrichedTrack = { ...track };
- if (lookup.info) {
- enrichedTrack.replayGain = {
- trackReplayGain: lookup.info.trackReplayGain,
- trackPeakAmplitude: lookup.info.trackPeakAmplitude,
- albumReplayGain: lookup.info.albumReplayGain,
- albumPeakAmplitude: lookup.info.albumPeakAmplitude,
- };
- }
-
- blob = await addMetadataToAudio(blob, enrichedTrack, this, quality, prefetchPromises);
}
// Detect actual format and fix filename extension if needed
@@ -1296,6 +1464,7 @@ export class LosslessAPI {
}
this.triggerDownload(blob, finalFilename);
+ return blob;
} catch (error) {
if (error.name === 'AbortError') {
throw error;
@@ -1331,23 +1500,10 @@ export class LosslessAPI {
return id;
}
- const formattedId = id.replace(/-/g, '/');
+ const formattedId = String(id).replace(/-/g, '/');
return `https://resources.tidal.com/images/${formattedId}/${size}x${size}.jpg`;
}
- getVideoCoverUrl(id, size = '1280') {
- if (!id) {
- return null;
- }
-
- const parts = id.split('-');
- if (parts.length !== 5) {
- return null;
- }
-
- return `https://resources.tidal.com/videos/${parts[0]}/${parts[1]}/${parts[2]}/${parts[3]}/${parts[4]}/${size}x${size}.mp4`;
- }
-
getArtistPictureUrl(id, size = '320') {
if (!id) {
return `https://picsum.photos/seed/${Math.random()}/${size}`;
@@ -1357,7 +1513,7 @@ export class LosslessAPI {
return id;
}
- const formattedId = id.replace(/-/g, '/');
+ const formattedId = String(id).replace(/-/g, '/');
return `https://resources.tidal.com/images/${formattedId}/${size}x${size}.jpg`;
}
diff --git a/js/app.js b/js/app.js
index ddf454d..eed389d 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1963,20 +1963,23 @@ document.addEventListener('DOMContentLoaded', async () => {
db.getPlaylist(playlistId).then(async (playlist) => {
let trackId = null;
+ let trackType = null;
// Prefer ID if available (from sorted view)
if (btn.dataset.trackId) {
trackId = btn.dataset.trackId;
+ trackType = btn.dataset.type || 'track';
} else if (btn.dataset.trackIndex) {
// Fallback to index (legacy/unsorted)
const index = parseInt(btn.dataset.trackIndex);
if (playlist && playlist.tracks[index]) {
trackId = playlist.tracks[index].id;
+ trackType = playlist.tracks[index].type || 'track';
}
}
if (trackId) {
- const updatedPlaylist = await db.removeTrackFromPlaylist(playlistId, trackId);
+ const updatedPlaylist = await db.removeTrackFromPlaylist(playlistId, trackId, trackType);
syncManager.syncUserPlaylist(updatedPlaylist, 'update');
const scrollTop = document.querySelector('.main-content').scrollTop;
await ui.renderPlaylistPage(playlistId, 'user');
@@ -2986,8 +2989,6 @@ function showCustomizeShortcutsModal() {
let recordingAction = null;
let recordingTimeout = null;
- const shortcuts = keyboardShortcuts.getShortcuts();
-
const formatKey = (key) => {
if (!key) return 'none';
const keyMap = {
diff --git a/js/db.js b/js/db.js
index eab226a..643328f 100644
--- a/js/db.js
+++ b/js/db.js
@@ -1,7 +1,7 @@
export class MusicDatabase {
constructor() {
this.dbName = 'MonochromeDB';
- this.version = 8;
+ this.version = 9;
this.db = null;
}
@@ -29,6 +29,10 @@ export class MusicDatabase {
const store = db.createObjectStore('favorites_tracks', { keyPath: 'id' });
store.createIndex('addedAt', 'addedAt', { unique: false });
}
+ if (!db.objectStoreNames.contains('favorites_videos')) {
+ const store = db.createObjectStore('favorites_videos', { keyPath: 'id' });
+ store.createIndex('addedAt', 'addedAt', { unique: false });
+ }
if (!db.objectStoreNames.contains('favorites_albums')) {
const store = db.createObjectStore('favorites_albums', { keyPath: 'id' });
store.createIndex('addedAt', 'addedAt', { unique: false });
@@ -88,7 +92,7 @@ export class MusicDatabase {
// History API
async addToHistory(track) {
const storeName = 'history_tracks';
- const minified = this._minifyItem('track', track);
+ const minified = this._minifyItem(track.type || 'track', track);
const timestamp = Date.now();
const entry = { ...minified, timestamp };
@@ -209,6 +213,7 @@ export class MusicDatabase {
_minifyItem(type, item) {
if (!item) return item;
+ const normalizedType = (type || '').toLowerCase();
// Base properties to keep
const base = {
@@ -216,7 +221,7 @@ export class MusicDatabase {
addedAt: item.addedAt || null,
};
- if (type === 'track') {
+ if (normalizedType === 'track') {
return {
...base,
title: item.title || null,
@@ -256,6 +261,19 @@ export class MusicDatabase {
};
}
+ if (normalizedType === 'video') {
+ return {
+ ...base,
+ type: 'video',
+ title: item.title || null,
+ duration: item.duration || null,
+ image: item.image || item.cover || null,
+ artist: item.artist || (item.artists && item.artists.length > 0 ? item.artists[0] : null) || null,
+ artists: item.artists?.map((a) => ({ id: a.id, name: a.name || null })) || [],
+ album: item.album || { title: 'Video', cover: item.image || item.cover },
+ };
+ }
+
if (type === 'album') {
return {
...base,
@@ -548,7 +566,7 @@ export class MusicDatabase {
const playlist = {
id: id,
name: name,
- tracks: tracks.map((t) => this._minifyItem('track', { ...t, addedAt: Date.now() })),
+ tracks: tracks.map((t) => this._minifyItem(t.type || 'track', { ...t, addedAt: Date.now() })),
cover: cover,
description: description,
createdAt: Date.now(),
@@ -570,7 +588,7 @@ export class MusicDatabase {
if (!playlist) throw new Error('Playlist not found');
playlist.tracks = playlist.tracks || [];
const trackWithDate = { ...track, addedAt: Date.now() };
- const minifiedTrack = this._minifyItem('track', trackWithDate);
+ const minifiedTrack = this._minifyItem(track.type || 'track', trackWithDate);
if (playlist.tracks.some((t) => t.id === track.id)) return;
playlist.tracks.push(minifiedTrack);
playlist.updatedAt = Date.now();
@@ -591,7 +609,7 @@ export class MusicDatabase {
for (const track of tracks) {
if (!playlist.tracks.some((t) => t.id === track.id)) {
const trackWithDate = { ...track, addedAt: Date.now() };
- playlist.tracks.push(this._minifyItem('track', trackWithDate));
+ playlist.tracks.push(this._minifyItem(track.type || 'track', trackWithDate));
addedCount++;
}
}
@@ -606,11 +624,16 @@ export class MusicDatabase {
return playlist;
}
- async removeTrackFromPlaylist(playlistId, trackId) {
+ async removeTrackFromPlaylist(playlistId, trackId, trackType = null) {
const playlist = await this.performTransaction('user_playlists', 'readonly', (store) => store.get(playlistId));
if (!playlist) throw new Error('Playlist not found');
playlist.tracks = playlist.tracks || [];
- playlist.tracks = playlist.tracks.filter((t) => t.id != trackId);
+ playlist.tracks = playlist.tracks.filter((t) => {
+ if (trackType) {
+ return !(t.id == trackId && (t.type || 'track') === trackType);
+ }
+ return t.id != trackId;
+ });
playlist.updatedAt = Date.now();
this._updatePlaylistMetadata(playlist);
await this.performTransaction('user_playlists', 'readwrite', (store) => store.put(playlist));
diff --git a/js/desktop/discord-rpc.js b/js/desktop/discord-rpc.js
index 40c8d3f..a1d8c6f 100644
--- a/js/desktop/discord-rpc.js
+++ b/js/desktop/discord-rpc.js
@@ -9,7 +9,7 @@ export function initializeDiscordRPC(player) {
let coverUrl = 'monochrome';
if (track.album?.cover) {
- const coverId = track.album.cover.replace(/-/g, '/');
+ const coverId = String(track.album.cover).replace(/-/g, '/');
coverUrl = `https://resources.tidal.com/images/${coverId}/320x320.jpg`;
}
diff --git a/js/downloads.js b/js/downloads.js
index 3f34e2c..cb437ce 100644
--- a/js/downloads.js
+++ b/js/downloads.js
@@ -195,11 +195,21 @@ export function updateDownloadProgress(trackId, progress) {
const percent = progress.totalBytes ? Math.round((progress.receivedBytes / progress.totalBytes) * 100) : 0;
progressFill.style.width = `${percent}%`;
+ progressFill.style.background = 'var(--highlight)';
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 === 'encoding') {
+ const percent = progress.progress ? Math.round(progress.progress) : 0;
+ progressFill.style.width = `${percent}%`;
+ progressFill.style.background = '#3b82f6'; // Blue for encoding
+ statusEl.textContent = `Converting: ${percent}%`;
+ } else if (progress.stage === 'finalizing' || progress.stage === 'processing') {
+ progressFill.style.width = '100%';
+ progressFill.style.background = '#3b82f6';
+ statusEl.textContent = progress.message || 'Processing...';
}
}
@@ -268,7 +278,7 @@ function removeBulkDownloadTask(notifEl) {
}, 300);
}
-async function downloadTrackBlob(track, quality, api, lyricsManager = null, signal = null) {
+async function downloadTrackBlob(track, quality, api, lyricsManager = null, signal = null, onProgress = null) {
// Load ffmpeg in the background.
loadFfmpeg().catch(console.error);
@@ -348,7 +358,7 @@ async function downloadTrackBlob(track, quality, api, lyricsManager = null, sign
// Fallback
if (downloadQuality !== 'LOSSLESS') {
console.warn('Falling back to LOSSLESS (16-bit) download.');
- return downloadTrackBlob(track, 'LOSSLESS', api, lyricsManager, signal);
+ return downloadTrackBlob(track, 'LOSSLESS', api, lyricsManager, signal, onProgress);
}
throw dashError;
}
@@ -362,23 +372,21 @@ async function downloadTrackBlob(track, quality, api, lyricsManager = null, sign
// Convert to MP3 320kbps if requested
if (quality === 'MP3_320') {
- blob = await encodeToMp3(blob, console.log, signal);
+ blob = await encodeToMp3(blob, onProgress || (() => undefined), signal);
}
if (quality.endsWith('LOSSLESS')) {
try {
switch (losslessContainerSettings.getContainer()) {
case 'flac':
- if ((await getExtensionFromBlob(blob)) != 'flac') {
- blob = await ffmpeg(
- blob,
- { args: ['-c:a', 'copy'] },
- 'output.flac',
- 'audio/flac',
- console.log,
- signal
- );
- }
+ blob = await ffmpeg(
+ blob,
+ { args: ['-vn', '-map_metadata', '-1', '-map', '0:a', '-c:a', 'flac'] },
+ 'output.flac',
+ 'audio/flac',
+ onProgress,
+ signal
+ );
break;
case 'alac':
blob = await ffmpeg(
@@ -386,7 +394,7 @@ async function downloadTrackBlob(track, quality, api, lyricsManager = null, sign
{ args: ['-c:a', 'alac'] },
'output.m4a',
'audio/mp4',
- console.log,
+ onProgress,
signal
);
break;
@@ -561,7 +569,9 @@ async function bulkDownloadToZipStream(
updateBulkDownloadProgress(notification, i, tracks.length, trackTitle);
try {
- const { blob, extension } = await downloadTrackBlob(track, quality, api, null, signal);
+ const { blob, extension } = await downloadTrackBlob(track, quality, api, null, signal, (p) => {
+ updateBulkDownloadProgress(notification, i, tracks.length, trackTitle, p);
+ });
const filename = buildTrackFilename(track, quality, extension);
const discNumber = discLayout.resolveDiscNumber(i);
yield {
@@ -703,7 +713,9 @@ async function bulkDownloadToZipBlob(
updateBulkDownloadProgress(notification, i, tracks.length, trackTitle);
try {
- const { blob, extension } = await downloadTrackBlob(track, quality, api, null, signal);
+ const { blob, extension } = await downloadTrackBlob(track, quality, api, null, signal, (p) => {
+ updateBulkDownloadProgress(notification, i, tracks.length, trackTitle, p);
+ });
const filename = buildTrackFilename(track, quality, extension);
const discNumber = discLayout.resolveDiscNumber(i);
yield {
@@ -846,7 +858,9 @@ async function bulkDownloadToZipNeutralino(
updateBulkDownloadProgress(notification, i, tracks.length, trackTitle);
try {
- const { blob, extension } = await downloadTrackBlob(track, quality, api, null, signal);
+ const { blob, extension } = await downloadTrackBlob(track, quality, api, null, signal, (p) => {
+ updateBulkDownloadProgress(notification, i, tracks.length, trackTitle, p);
+ });
const filename = buildTrackFilename(track, quality, extension);
const discNumber = discLayout.resolveDiscNumber(i);
yield {
@@ -1308,12 +1322,21 @@ function createBulkDownloadNotification(type, name, _totalItems) {
return notifEl;
}
-function updateBulkDownloadProgress(notifEl, current, total, currentItem) {
+function updateBulkDownloadProgress(notifEl, current, total, currentItem, ffmpegProgress = null) {
const progressFill = notifEl.querySelector('.download-progress-fill');
const statusEl = notifEl.querySelector('.download-status');
+ if (ffmpegProgress && (ffmpegProgress.stage === 'encoding' || ffmpegProgress.stage === 'finalizing')) {
+ const percent = ffmpegProgress.progress ? Math.round(ffmpegProgress.progress) : 100;
+ progressFill.style.width = `${percent}%`;
+ progressFill.style.background = '#3b82f6'; // Blue for encoding
+ statusEl.textContent = `Converting ${current}/${total}: ${percent}%`;
+ return;
+ }
+
const percent = total > 0 ? Math.round((current / total) * 100) : 0;
progressFill.style.width = `${percent}%`;
+ progressFill.style.background = 'var(--highlight)';
statusEl.textContent = `${current}/${total} - ${currentItem}`;
}
diff --git a/js/events.js b/js/events.js
index 5a8af19..c2f9b2d 100644
--- a/js/events.js
+++ b/js/events.js
@@ -50,6 +50,7 @@ import {
trackSetSleepTimer,
trackCancelSleepTimer,
trackStartMix,
+ trackEvent,
} from './analytics.js';
let currentTrackIdForWaveform = null;
@@ -952,11 +953,13 @@ export async function handleTrackAction(
// Track like/unlike
if (added) {
if (type === 'track') trackLikeTrack(item);
+ else if (type === 'video') trackEvent('Like Video', { title: item.title });
else if (type === 'album') trackLikeAlbum(item);
else if (type === 'artist') trackLikeArtist(item);
else if (type === 'playlist' || type === 'user-playlist') trackLikePlaylist(item);
} else {
if (type === 'track') trackUnlikeTrack(item);
+ else if (type === 'video') trackEvent('Unlike Video', { title: item.title });
else if (type === 'album') trackUnlikeAlbum(item);
else if (type === 'artist') trackUnlikeArtist(item);
else if (type === 'playlist' || type === 'user-playlist') trackUnlikePlaylist(item);
@@ -976,7 +979,9 @@ export async function handleTrackAction(
const selector =
type === 'track'
? `[data-track-id="${id}"] .like-btn`
- : `.card[data-${type}-id="${id}"] .like-btn, .card[data-playlist-id="${id}"] .like-btn`;
+ : type === 'video'
+ ? `.card[data-video-id="${id}"] .like-btn`
+ : `.card[data-${type}-id="${id}"] .like-btn, .card[data-playlist-id="${id}"] .like-btn`;
// Also check header buttons
const headerBtn = document.getElementById(`like-${type}-btn`);
@@ -985,12 +990,12 @@ export async function handleTrackAction(
if (headerBtn) elementsToUpdate.push(headerBtn);
const nowPlayingLikeBtn = document.getElementById('now-playing-like-btn');
- if (nowPlayingLikeBtn && type === 'track' && player?.currentTrack?.id === item.id) {
+ if (nowPlayingLikeBtn && (type === 'track' || type === 'video') && player?.currentTrack?.id === item.id) {
elementsToUpdate.push(nowPlayingLikeBtn);
}
const fsLikeBtn = document.getElementById('fs-like-btn');
- if (fsLikeBtn && type === 'track' && player?.currentTrack?.id === item.id) {
+ if (fsLikeBtn && (type === 'track' || type === 'video') && player?.currentTrack?.id === item.id) {
elementsToUpdate.push(fsLikeBtn);
}
@@ -1011,7 +1016,9 @@ export async function handleTrackAction(
const itemSelector =
type === 'track'
? `.track-item[data-track-id="${id}"]`
- : `.card[data-${type}-id="${id}"], .card[data-playlist-id="${id}"]`;
+ : type === 'video'
+ ? `.video-card[data-video-id="${id}"]`
+ : `.card[data-${type}-id="${id}"], .card[data-playlist-id="${id}"]`;
const itemEl = document.querySelector(itemSelector);
@@ -1020,29 +1027,63 @@ export async function handleTrackAction(
const container = itemEl.parentElement;
itemEl.remove();
if (container && container.children.length === 0) {
- const msg = type === 'track' ? 'No liked tracks yet.' : `No liked ${type}s yet.`;
+ const msg =
+ type === 'track'
+ ? 'No liked tracks yet.'
+ : type === 'video'
+ ? 'No liked videos yet.'
+ : `No liked ${type}s yet.`;
container.innerHTML = `${msg}
`;
}
- } else if (added && !itemEl && ui && type === 'track') {
- // Add item (specifically for tracks currently)
- const tracksContainer = document.getElementById('library-tracks-container');
- if (tracksContainer) {
- // Remove placeholder if it exists
- const placeholder = tracksContainer.querySelector('.placeholder-text');
- if (placeholder) placeholder.remove();
+ } else if (added && !itemEl && ui && (type === 'track' || type === 'video')) {
+ // Add item
+ if (type === 'track') {
+ const tracksContainer = document.getElementById('library-tracks-container');
+ if (tracksContainer) {
+ const placeholder = tracksContainer.querySelector('.placeholder-text');
+ if (placeholder) placeholder.remove();
- // Create track element
- const index = tracksContainer.children.length;
- const trackHTML = ui.createTrackItemHTML(item, index, true, false);
+ const index = tracksContainer.children.length;
+ const trackHTML = ui.createTrackItemHTML(item, index, true, false);
- const tempDiv = document.createElement('div');
- tempDiv.innerHTML = trackHTML;
- const newEl = tempDiv.firstElementChild;
+ const tempDiv = document.createElement('div');
+ tempDiv.innerHTML = trackHTML;
+ const newEl = tempDiv.firstElementChild;
- if (newEl) {
- tracksContainer.appendChild(newEl);
- trackDataStore.set(newEl, item);
- ui.updateLikeState(newEl, 'track', item.id);
+ if (newEl) {
+ tracksContainer.appendChild(newEl);
+ trackDataStore.set(newEl, item);
+ ui.updateLikeState(newEl, 'track', item.id);
+ }
+ }
+ } else if (type === 'video') {
+ const videosTabContent = document.getElementById('library-tab-videos');
+ if (videosTabContent) {
+ const grid = videosTabContent.querySelector('.card-grid');
+ if (grid) {
+ const placeholder = grid.querySelector('.placeholder-text');
+ if (placeholder) grid.innerHTML = '';
+
+ const videoHTML = ui.createVideoCardHTML(item);
+ const tempDiv = document.createElement('div');
+ tempDiv.innerHTML = videoHTML;
+ const newEl = tempDiv.firstElementChild;
+
+ if (newEl) {
+ grid.appendChild(newEl);
+ trackDataStore.set(newEl, item);
+ ui.updateLikeState(newEl, 'video', item.id);
+ newEl.addEventListener('click', (e) => {
+ if (
+ e.target.closest('.card-play-btn') ||
+ e.target.closest('.card-image-container')
+ ) {
+ e.stopPropagation();
+ player.playVideo(item);
+ }
+ });
+ }
+ }
}
}
}
@@ -1058,10 +1099,14 @@ export async function handleTrackAction(
// Removed empty check to allow creating new playlist
const trackId = item.id;
+ const trackType = item.type || 'track';
const playlistsWithTrack = new Set();
for (const playlist of playlists) {
- if (playlist.tracks && playlist.tracks.some((track) => track.id == trackId)) {
+ if (
+ playlist.tracks &&
+ playlist.tracks.some((t) => t.id == trackId && (t.type || 'track') === trackType)
+ ) {
playlistsWithTrack.add(playlist.id);
}
}
@@ -1435,9 +1480,10 @@ async function updateContextMenuLikeState(contextMenu, contextTrack) {
const type = contextMenu._contextType || 'track';
const likeItem = contextMenu.querySelector('li[data-action="toggle-like"]');
+ let isLiked = false;
if (likeItem) {
- const isLiked = await db.isFavorite(type, contextTrack.id);
- likeItem.textContent = isLiked ? 'Unlike' : 'Like';
+ const key = type === 'playlist' ? contextTrack.uuid : contextTrack.id;
+ isLiked = await db.isFavorite(type, key);
}
const pinItem = contextMenu.querySelector('li[data-action="toggle-pin"]');
@@ -1500,8 +1546,10 @@ async function updateContextMenuLikeState(contextMenu, contextTrack) {
// Update labels for Like/Save
if (item.dataset.action === 'toggle-like') {
- const labelKey = `label${type.charAt(0).toUpperCase() + type.slice(1).replace('User-playlist', 'Playlist')}`;
- const label = item.dataset[labelKey] || item.dataset.labelTrack || 'Like';
+ const labelPrefix = isLiked ? 'labelUnlike' : 'label';
+ const labelKey = `${labelPrefix}${type.charAt(0).toUpperCase() + type.slice(1).replace('User-playlist', 'Playlist')}`;
+ const fallbackKey = isLiked ? 'labelUnlikeTrack' : 'labelTrack';
+ const label = item.dataset[labelKey] || item.dataset[fallbackKey] || (isLiked ? 'Unlike' : 'Like');
item.textContent = label;
}
});
@@ -1642,7 +1690,7 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
contextMenu._originalHTML = null;
}
contextMenu._contextTrack = contextTrack;
- contextMenu._contextType = 'track';
+ contextMenu._contextType = menuBtn.dataset.type || trackItem.dataset.type || 'track';
await updateContextMenuLikeState(contextMenu, contextTrack);
const rect = menuBtn.getBoundingClientRect();
positionMenu(contextMenu, rect.left, rect.bottom + 5, rect);
@@ -1667,15 +1715,19 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
if (isSearch) {
const clickedTrack = trackDataStore.get(trackItem);
if (clickedTrack) {
- player.setQueue([clickedTrack], 0);
- document.getElementById('shuffle-btn').classList.remove('active');
- player.playTrackFromQueue();
+ if (trackItem.dataset.type === 'video') {
+ player.playVideo(clickedTrack);
+ } else {
+ player.setQueue([clickedTrack], 0);
+ document.getElementById('shuffle-btn').classList.remove('active');
+ player.playTrackFromQueue();
- api.getTrackRecommendations(clickedTrack.id).then((recs) => {
- if (recs && recs.length > 0) {
- player.addToQueue(recs);
- }
- });
+ api.getTrackRecommendations(clickedTrack.id).then((recs) => {
+ if (recs && recs.length > 0) {
+ player.addToQueue(recs);
+ }
+ });
+ }
}
} else {
const parentList = trackItem.closest('.track-list');
@@ -1760,7 +1812,7 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
});
contextMenu._contextTrack = contextTrack;
- contextMenu._contextType = 'track';
+ contextMenu._contextType = contextTrack.type || 'track';
await updateContextMenuLikeState(contextMenu, contextTrack);
positionMenu(contextMenu, e.clientX, e.clientY);
}
@@ -1916,7 +1968,7 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
player,
api,
lyricsManager,
- 'track',
+ player.currentTrack.type || 'track',
ui,
scrobbler
);
@@ -1954,7 +2006,7 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
player,
api,
lyricsManager,
- 'track',
+ player.currentTrack.type || 'track',
ui,
scrobbler
);
@@ -1975,7 +2027,7 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
player,
api,
lyricsManager,
- 'track',
+ player.currentTrack.type || 'track',
ui,
scrobbler
);
diff --git a/js/hls-downloader.js b/js/hls-downloader.js
new file mode 100644
index 0000000..a05aa1e
--- /dev/null
+++ b/js/hls-downloader.js
@@ -0,0 +1,107 @@
+export class HlsDownloader {
+ constructor() {}
+
+ async downloadHlsStream(masterUrl, options = {}) {
+ const { onProgress, signal } = options;
+
+ const response = await fetch(masterUrl, { signal });
+ const masterText = await response.text();
+
+ const variantUrl = this.getBestVariantUrl(masterUrl, masterText);
+
+ const mediaResponse = await fetch(variantUrl, { signal });
+ const mediaText = await mediaResponse.text();
+
+ const segments = this.parseMediaPlaylist(variantUrl, mediaText);
+ if (segments.length === 0) {
+ throw new Error('No segments found in HLS playlist');
+ }
+
+ const chunks = [];
+ let downloadedBytes = 0;
+ const totalSegments = segments.length;
+
+ for (let i = 0; i < totalSegments; i++) {
+ if (signal?.aborted) throw new Error('AbortError');
+
+ const segmentUrl = segments[i];
+ const segmentResponse = await fetch(segmentUrl, { signal });
+
+ if (!segmentResponse.ok) {
+ throw new Error(`Failed to fetch segment ${i}: ${segmentResponse.status}`);
+ }
+
+ const chunk = await segmentResponse.arrayBuffer();
+ chunks.push(chunk);
+ downloadedBytes += chunk.byteLength;
+
+ if (onProgress) {
+ onProgress({
+ stage: 'downloading',
+ receivedBytes: downloadedBytes,
+ totalBytes: undefined,
+ currentSegment: i + 1,
+ totalSegments: totalSegments,
+ });
+ }
+ }
+
+ const mimeType = segments[0].endsWith('.m4s') || segments[0].includes('mp4') ? 'video/mp4' : 'video/mp2t';
+ return new Blob(chunks, { type: mimeType });
+ }
+
+ getBestVariantUrl(masterUrl, masterText) {
+ if (!masterText.includes('#EXT-X-STREAM-INF')) {
+ return masterUrl;
+ }
+
+ const lines = masterText.split('\n');
+ const variants = [];
+ let currentVariant = null;
+
+ for (const line of lines) {
+ const trimmed = line.trim();
+ if (trimmed.startsWith('#EXT-X-STREAM-INF:')) {
+ const bandwidthMatch = trimmed.match(/BANDWIDTH=(\d+)/);
+ const resolutionMatch = trimmed.match(/RESOLUTION=(\d+x\d+)/);
+ currentVariant = {
+ bandwidth: bandwidthMatch ? parseInt(bandwidthMatch[1], 10) : 0,
+ resolution: resolutionMatch ? resolutionMatch[1] : 'unknown',
+ };
+ } else if (trimmed && !trimmed.startsWith('#')) {
+ if (currentVariant) {
+ currentVariant.url = this.resolveUrl(masterUrl, trimmed);
+ variants.push(currentVariant);
+ currentVariant = null;
+ }
+ }
+ }
+
+ if (variants.length === 0) return masterUrl;
+
+ variants.sort((a, b) => b.bandwidth - a.bandwidth);
+ return variants[0].url;
+ }
+
+ parseMediaPlaylist(mediaUrl, mediaText) {
+ const lines = mediaText.split('\n');
+ const segments = [];
+
+ for (const line of lines) {
+ const trimmed = line.trim();
+ if (trimmed && !trimmed.startsWith('#')) {
+ segments.push(this.resolveUrl(mediaUrl, trimmed));
+ }
+ }
+
+ return segments;
+ }
+
+ resolveUrl(baseUrl, relativeUrl) {
+ try {
+ return new URL(relativeUrl, baseUrl).href;
+ } catch {
+ return relativeUrl;
+ }
+ }
+}
diff --git a/js/lyrics.js b/js/lyrics.js
index 922b2eb..8cdf87f 100644
--- a/js/lyrics.js
+++ b/js/lyrics.js
@@ -779,9 +779,6 @@ export function openLyricsPanel(track, audioPlayer, lyricsManager, forceOpen = f
const offsetDisplay = manager.getOffsetDisplayString(manager.timingOffset);
container.innerHTML = `
-