vndangkhoa/kv-music
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: music videos

Browse source
This commit is contained in:
Samidy 2026-03-09 03:03:29 +03:00
parent e3f781d588
commit 75d16e6ce4
16 changed files with 1189 additions and 448 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
functions/album/[id].js
View file

@ -84,7 +84,7 @@ class ServerAPI {
getCoverUrl(id, size = '1280') {
if (!id) return '';
const formattedId = id.replace(/-/g, '/');
const formattedId = String(id).replace(/-/g, '/');
return `https://resources.tidal.com/images/${formattedId}/${size}x${size}.jpg`;
}
}

2
functions/playlist/[id].js
View file

@ -85,7 +85,7 @@ class ServerAPI {
getCoverUrl(id, size = '1080') {
if (!id) return '';
const formattedId = id.replace(/-/g, '/');
const formattedId = String(id).replace(/-/g, '/');
return `https://resources.tidal.com/images/${formattedId}/${size}x${size}.jpg`;
}
}

2
functions/track/[id].js
View file

@ -98,7 +98,7 @@ class ServerAPI {
getCoverUrl(id, size = '1280') {
if (!id) return '';
const formattedId = id.replace(/-/g, '/');
const formattedId = String(id).replace(/-/g, '/');
return `https://resources.tidal.com/images/${formattedId}/${size}x${size}.jpg`;
}

31
index.html
View file

@ -36,13 +36,13 @@
</head>
<body>
<audio id="audio-player" crossorigin="anonymous"></audio>
<video id="audio-player" crossorigin="anonymous" style="display: none"></video>
<div id="context-menu">
<ul>
<li data-action="shuffle-play-card" data-type-filter="album,playlist,mix,user-playlist">
Shuffle play
</li>
<li data-action="start-mix" data-type-filter="album,track">Start mix</li>
<li data-action="start-mix" data-type-filter="album,track,video">Start mix</li>
<li data-action="play-next">Play next</li>
<li data-action="add-to-queue">Add to queue</li>
<li
@ -53,18 +53,20 @@
data-label-unlike-album="Remove album from library"
data-label-playlist="Save playlist to library"
data-label-unlike-playlist="Remove playlist from library"
data-label-video="Like"
data-label-unlike-video="Unlike"
>
Like
</li>
<li data-action="toggle-pin" data-type-filter="album,artist,playlist,user-playlist">Pin</li>
<li data-action="add-to-playlist" data-type-filter="track">Add to playlist</li>
<li data-action="go-to-artist" data-type-filter="track,album">Go to artist</li>
<li data-action="go-to-album" data-type-filter="track">Go to album</li>
<li data-action="add-to-playlist" data-type-filter="track,video">Add to playlist</li>
<li data-action="go-to-artist" data-type-filter="track,album,video">Go to artist</li>
<li data-action="go-to-album" data-type-filter="track,video">Go to album</li>
<li data-action="copy-link">Copy link</li>
<li data-action="open-in-new-tab">Open in new tab</li>
<li data-action="open-in-harmony" data-type-filter="album">Open in Harmony</li>
<li data-action="track-info" data-type-filter="track">Track info</li>
<li data-action="open-original-url" data-type-filter="track">Open original URL</li>
<li data-action="track-info" data-type-filter="track,video">Track info</li>
<li data-action="open-original-url" data-type-filter="track,video">Open original URL</li>
<li data-action="download">Download</li>
<li class="separator"></li>
<li
@ -122,6 +124,7 @@
<div id="visualizer-container">
<canvas id="visualizer-canvas"></canvas>
</div>
<div id="fullscreen-video-container" style="display: none; position: absolute; inset: 0; width: 100%; height: 100%; justify-content: center; align-items: center; background: black; z-index: 0;"></div>
<button id="toggle-ui-btn" class="fullscreen-ui-toggle" title="Toggle UI">
<svg
xmlns="http://www.w3.org/2000/svg"
@ -163,7 +166,9 @@
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
alt="Album Cover"
/>
<div class="fullscreen-track-info">
<h2 id="fullscreen-track-title"></h2>
<h3 id="fullscreen-track-artist"></h3>
<div class="fullscreen-actions">
@ -2358,6 +2363,7 @@
<h2 class="section-title" id="search-results-title">Search Results</h2>
<div class="search-tabs">
<button class="search-tab active" data-tab="tracks">Tracks</button>
<button class="search-tab" data-tab="videos">Videos</button>
<button class="search-tab" data-tab="albums">Albums</button>
<button class="search-tab" data-tab="artists">Artists</button>
<button class="search-tab" data-tab="playlists">Playlists</button>
@ -2365,6 +2371,9 @@
<div class="search-tab-content active" id="search-tab-tracks">
<div class="track-list" id="search-tracks-container"></div>
</div>
<div class="search-tab-content" id="search-tab-videos">
<div class="card-grid" id="search-videos-container"></div>
</div>
<div class="search-tab-content" id="search-tab-albums">
<div class="card-grid" id="search-albums-container"></div>
</div>
@ -2403,6 +2412,7 @@
<h2 class="section-title">Favorites</h2>
<div class="search-tabs">
<button class="search-tab active" data-tab="tracks">Liked Tracks</button>
<button class="search-tab" data-tab="videos">Videos</button>
<button class="search-tab" data-tab="albums">Albums</button>
<button class="search-tab" data-tab="artists">Artists</button>
<button class="search-tab" data-tab="playlists">Playlists and Mixes</button>
@ -2475,6 +2485,9 @@
</div>
<div class="track-list" id="library-tracks-container"></div>
</div>
<div class="search-tab-content" id="library-tab-videos">
<div class="card-grid" id="library-videos-container"></div>
</div>
<div class="search-tab-content" id="library-tab-albums">
<div class="card-grid" id="library-albums-container"></div>
</div>
@ -3177,6 +3190,10 @@
<h2 class="section-title">Albums</h2>
<div class="card-grid" id="artist-detail-albums"></div>
</section>
<section class="content-section" id="artist-section-videos" style="display: none">
<h2 class="section-title">Videos</h2>
<div class="card-grid" id="artist-detail-videos"></div>
</section>
<section class="content-section" id="artist-section-eps" style="display: none">
<h2 class="section-title">EPs and Singles</h2>
<div class="card-grid" id="artist-detail-eps"></div>

17
js/accounts/pocketbase.js
View file

@ -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,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,

359
js/api.js
View file

@ -10,6 +10,7 @@ import { trackDateSettings, losslessContainerSettings } from './storage.js';
import { APICache } from './cache.js';
import { addMetadataToAudio } from './metadata.js';
import { DashDownloader } from './dash-downloader.js';
import { HlsDownloader } from './hls-downloader.js';
import { encodeToMp3, MP3EncodingError } from './mp3-encoder.js';
import { ffmpeg } 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('<MPD')) {
@ -414,6 +458,53 @@ export class LosslessAPI {
}
}
async searchVideos(query, options = {}) {
const cached = await this.cache.get('search_videos', query);
if (cached) return cached;
try {
const response = await this.fetchWithRetry(`/search/?v=${encodeURIComponent(query)}`, {
...options,
allowedDomains: ['api.monochrome.tf', 'arran.monochrome.tf'],
});
const data = await response.json();
const normalized = this.normalizeSearchResponse(data, 'videos');
const result = {
...normalized,
items: normalized.items.map((v) => 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);
const matchesArtist =
itemArtistId === numericArtistId ||
(Array.isArray(item.artists) && item.artists.some(a => a.id === numericArtistId));
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,13 @@ 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,21 +1203,93 @@ 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 = {}) {
const { onProgress, track } = options;
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');
}
@ -1138,6 +1305,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.');
@ -1145,8 +1314,18 @@ export class LosslessAPI {
}
throw dashError;
}
} else {
const response = await fetch(streamUrl, {
} 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',
signal: options.signal,
});
@ -1155,7 +1334,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;
@ -1181,7 +1359,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) {
@ -1194,78 +1373,80 @@ export class LosslessAPI {
}
}
// 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}`,
});
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':
if ((await getExtensionFromBlob(blob)) != 'flac') {
blob = await ffmpeg(
blob,
{ args: ['-c:a', 'copy'] },
'output.flac',
'audio/flac',
onProgress,
options.signal
);
}
break;
case 'alac':
blob = await ffmpeg(
blob,
{ args: ['-c:a', 'copy'] },
'output.flac',
'audio/flac',
{ args: ['-c:a', 'alac'] },
'output.m4a',
'audio/mp4',
onProgress,
options.signal
);
}
break;
case 'alac':
blob = await ffmpeg(
blob,
{ args: ['-c:a', 'alac'] },
'output.m4a',
'audio/mp4',
onProgress,
options.signal
);
break;
default:
break;
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);
}
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);
}
// Detect actual format and fix filename extension if needed
@ -1279,6 +1460,7 @@ export class LosslessAPI {
}
this.triggerDownload(blob, finalFilename);
return blob;
} catch (error) {
if (error.name === 'AbortError') {
throw error;
@ -1314,23 +1496,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}`;
@ -1340,7 +1509,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`;
}

5
js/app.js
View file

@ -1960,20 +1960,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');

39
js/db.js
View file

@ -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));

2
js/desktop/discord-rpc.js
View file

@ -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`;
}

118
js/events.js
View file

@ -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,60 @@ 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 = `<div class="placeholder-text">${msg}</div>`;
}
} 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 +1096,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);
}
}
@ -1645,7 +1687,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);
@ -1670,15 +1712,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');
@ -1763,7 +1809,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);
}
@ -1919,7 +1965,7 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
player,
api,
lyricsManager,
'track',
player.currentTrack.type || 'track',
ui,
scrobbler
);
@ -1957,7 +2003,7 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
player,
api,
lyricsManager,
'track',
player.currentTrack.type || 'track',
ui,
scrobbler
);
@ -1978,7 +2024,7 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
player,
api,
lyricsManager,
'track',
player.currentTrack.type || 'track',
ui,
scrobbler
);

107
js/hls-downloader.js Normal file
View file

@ -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;
}
}
}

29
js/music-api.js
View file

@ -48,6 +48,11 @@ export class MusicAPI {
return this.tidalAPI.searchPlaylists(query, options);
}
async searchVideos(query, options = {}) {
const provider = options.provider || this.getCurrentProvider();
return this.tidalAPI.searchVideos(query, options);
}
// Get methods
async getTrack(id, quality, provider = null) {
const p = provider || this.getProviderFromId(id) || this.getCurrentProvider();
@ -89,6 +94,22 @@ export class MusicAPI {
return null;
}
async getVideo(id, provider = null) {
const p = provider || this.getProviderFromId(id) || this.getCurrentProvider();
const api = this.getAPI(p);
const cleanId = this.stripProviderPrefix(id);
return api.getVideo(cleanId);
}
async getVideoStreamUrl(id, provider = null) {
const p = provider || this.getProviderFromId(id) || this.getCurrentProvider();
const api = this.getAPI(p);
const cleanId = this.stripProviderPrefix(id);
if (typeof api.getVideoStreamUrl === 'function') {
return api.getVideoStreamUrl(cleanId);
}
}
async getArtistSocials(artistName) {
return this.tidalAPI.getArtistSocials(artistName);
}
@ -132,14 +153,6 @@ export class MusicAPI {
return this.tidalAPI.getCoverUrl(id, size);
}
getVideoCoverUrl(videoCoverId, fallbackCoverId, size = '1280') {
if (videoCoverId) {
const videoUrl = this.tidalAPI.getVideoCoverUrl(videoCoverId, size);
if (videoUrl) return videoUrl;
}
return this.getCoverUrl(fallbackCoverId, size);
}
async getVideoArtwork(title, artist) {
const cacheKey = `${title}-${artist}`.toLowerCase();
if (this.videoArtworkCache.has(cacheKey)) {

195
js/player.js
View file

@ -43,6 +43,7 @@ export class Player {
typeof window !== 'undefined' &&
(window.matchMedia?.('(display-mode: standalone)')?.matches || window.navigator?.standalone === true);
this.hls = null;
// Sleep timer properties
this.sleepTimer = null;
this.sleepTimerEndTime = null;
@ -201,10 +202,8 @@ export class Player {
const artistEl = document.querySelector('.now-playing-bar .artist');
if (coverEl) {
const videoCoverUrl = track.album?.videoCover
? this.api.tidalAPI.getVideoCoverUrl(track.album.videoCover)
: null;
const coverUrl = videoCoverUrl || this.api.getCoverUrl(track.album?.cover);
const videoCoverUrl = track.videoUrl || track.videoCoverUrl || track.album?.videoCoverUrl || null;
const coverUrl = videoCoverUrl || this.api.getCoverUrl(track.image || track.cover || track.album?.cover);
if (videoCoverUrl) {
if (coverEl.tagName === 'IMG') {
@ -216,7 +215,10 @@ export class Player {
video.playsInline = true;
video.className = coverEl.className;
video.id = coverEl.id;
video.style.objectFit = 'cover';
coverEl.replaceWith(video);
} else if (coverEl.tagName === 'VIDEO' && coverEl.src !== videoCoverUrl) {
coverEl.src = videoCoverUrl;
}
} else {
if (coverEl.tagName === 'VIDEO') {
@ -404,41 +406,59 @@ export class Player {
}
setupHlsVideo(video, result, fallbackImg) {
const url = result.videoUrl || result.hlsUrl;
const url = result.videoUrl || result.hlsUrl || result; // Allow passing just the URL
if (!url) return;
if (url.endsWith('.m3u8')) {
if (this.hls) {
this.hls.destroy();
this.hls = null;
}
if (typeof url === 'string' && (url.includes('.m3u8') || url.includes('application/vnd.apple.mpegurl'))) {
if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource(url);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, () => {
this.hls = new Hls();
this.hls.loadSource(url);
this.hls.attachMedia(video);
this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
video.play().catch(() => {});
});
hls.on(Hls.Events.ERROR, (event, data) => {
this.hls.on(Hls.Events.ERROR, (event, data) => {
if (data.fatal) {
console.warn('HLS fatal error:', data.type);
video.replaceWith(fallbackImg);
hls.destroy();
if (fallbackImg) video.replaceWith(fallbackImg);
this.hls.destroy();
this.hls = null;
}
});
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = url;
} else {
video.replaceWith(fallbackImg);
if (fallbackImg) video.replaceWith(fallbackImg);
}
} else {
video.src = url;
video.onerror = () => {
if (result.hlsUrl) {
if (result && result.hlsUrl) {
this.setupHlsVideo(video, { videoUrl: null, hlsUrl: result.hlsUrl }, fallbackImg);
} else {
} else if (fallbackImg) {
video.replaceWith(fallbackImg);
}
};
}
}
async playVideo(video) {
if (!video) return;
const videoTrack = {
...video,
type: 'video',
artist: video.artist || (video.artists && video.artists[0]) || 'Unknown Artist',
album: video.album || { title: 'Video', cover: video.image || video.cover }
};
this.setQueue([videoTrack], 0);
await this.playTrackFromQueue();
}
async playTrackFromQueue(startTime = 0, recursiveCount = 0) {
const currentQueue = this.shuffleActive ? this.shuffledQueue : this.queue;
if (this.currentQueueIndex < 0 || this.currentQueueIndex >= currentQueue.length) {
@ -468,79 +488,42 @@ export class Player {
const trackArtistsHTML = getTrackArtistsHTML(track);
const yearDisplay = getTrackYearDisplay(track);
const coverEl = document.querySelector('.now-playing-bar .cover');
if (coverEl) {
let videoCoverUrl = track.album?.videoCover
? this.api.tidalAPI.getVideoCoverUrl(track.album.videoCover)
: track.album?.videoCoverUrl || null;
const trackInfo = document.querySelector('.now-playing-bar .track-info');
const coverEl = trackInfo?.querySelector('.cover:not(#audio-player)');
if (track.type === 'video') {
if (coverEl) coverEl.style.display = 'none';
if (this.audio) {
const isInFullscreen = document.getElementById('fullscreen-cover-overlay')?.style.display === 'flex';
if (!isInFullscreen) {
this.audio.style.display = 'block';
this.audio.className = 'cover video-cover-mirror';
this.audio.style.width = '56px';
this.audio.style.height = '56px';
this.audio.style.borderRadius = 'var(--radius-sm)';
this.audio.style.objectFit = 'cover';
this.audio.style.gridArea = 'none';
this.audio.muted = false;
if (!videoCoverUrl && track.album) {
this.api.getVideoArtwork(track.title, getTrackArtists(track)).then((result) => {
if (result && this.currentTrack?.id === track.id) {
const url = result.videoUrl || result.hlsUrl;
if (!url) return;
track.album.videoCoverUrl = url;
const currentCoverEl = document.querySelector('.now-playing-bar .cover');
if (currentCoverEl && currentCoverEl.tagName !== 'VIDEO') {
const video = document.createElement('video');
video.autoplay = true;
video.loop = true;
video.muted = true;
video.playsInline = true;
video.preload = 'auto';
video.className = currentCoverEl.className;
video.id = currentCoverEl.id;
video.style.opacity = '1';
video.style.zIndex = '1';
video.style.objectFit = 'cover';
video.poster = currentCoverEl.src;
this.setupHlsVideo(video, result, currentCoverEl);
currentCoverEl.replaceWith(video);
}
if (trackInfo && this.audio.parentElement !== trackInfo) {
trackInfo.insertBefore(this.audio, trackInfo.firstChild);
}
});
}
const coverUrl = videoCoverUrl || this.api.getCoverUrl(track.album?.cover);
if (videoCoverUrl) {
if (coverEl.tagName === 'IMG') {
const video = document.createElement('video');
video.src = videoCoverUrl;
video.poster = this.api.getCoverUrl(track.album?.cover);
video.autoplay = true;
video.loop = true;
video.muted = true;
video.playsInline = true;
video.preload = 'auto';
video.className = coverEl.className;
video.id = coverEl.id;
video.style.objectFit = 'cover';
video.style.gridArea = '1 / 1';
video.onerror = () => {
const img = document.createElement('img');
img.src = this.api.getCoverUrl(track.album?.cover);
img.className = video.className;
img.id = video.id;
video.replaceWith(img);
};
coverEl.replaceWith(video);
} else if (coverEl.tagName === 'VIDEO' && coverEl.src !== videoCoverUrl) {
coverEl.src = videoCoverUrl;
coverEl.poster = this.api.getCoverUrl(track.album?.cover);
coverEl.style.objectFit = 'cover';
}
} else {
if (coverEl.tagName === 'VIDEO') {
const img = document.createElement('img');
img.src = coverUrl;
img.className = coverEl.className;
img.id = coverEl.id;
coverEl.replaceWith(img);
} else {
coverEl.src = coverUrl;
}
} else {
if (coverEl) {
coverEl.style.display = 'block';
const coverUrl = this.api.getCoverUrl(track.image || track.cover || track.album?.cover);
if (coverEl.src !== coverUrl) coverEl.src = coverUrl;
}
if (this.audio) {
const isInFullscreen = document.getElementById('fullscreen-cover-overlay')?.style.display === 'flex';
if (!isInFullscreen) {
this.audio.style.display = 'none';
if (this.audio.parentElement !== document.body) {
document.body.appendChild(this.audio);
}
}
}
}
@ -650,7 +633,47 @@ export class Player {
}
const played = await this.safePlay();
if (!played) return;
} else if (track.type === 'video') {
if (this.dashInitialized) {
this.dashPlayer.reset();
this.dashInitialized = false;
}
if (this.hls) {
this.hls.destroy();
this.hls = null;
}
streamUrl = await this.api.getVideoStreamUrl(track.id);
if (streamUrl.includes('.m3u8') || streamUrl.includes('application/vnd.apple.mpegurl')) {
this.setupHlsVideo(this.audio, streamUrl, null);
} else if (streamUrl.startsWith('blob:') || streamUrl.includes('.mpd')) {
this.dashPlayer.initialize(this.audio, streamUrl, true);
this.dashInitialized = true;
} else {
this.audio.src = streamUrl;
}
this.applyAudioEffects();
if (window.monochromeUi) {
const lyricsManager = window.monochromeUi.lyricsManager;
window.monochromeUi.showFullscreenCover(track, this.getNextTrack(), lyricsManager, this.audio);
}
const canPlay = await this.waitForCanPlayOrTimeout();
if (!canPlay) return;
if (startTime > 0) {
this.audio.currentTime = startTime;
}
await this.safePlay();
} else {
if (this.hls) {
this.hls.destroy();
this.hls = null;
}
const isQobuz = String(track.id).startsWith('q:');
if (isQobuz) {

547
js/ui.js
View file

@ -38,6 +38,7 @@ import { getVibrantColorFromImage } from './vibrant-color.js';
import { syncManager } from './accounts/pocketbase.js';
import { Visualizer } from './visualizer.js';
import { navigate } from './router.js';
import { sidePanelManager } from './side-panel.js';
import {
renderUnreleasedPage as renderUnreleasedTrackerPage,
renderTrackerArtistPage as renderTrackerArtistContent,
@ -260,7 +261,7 @@ export class UIRenderer {
likeBtn.style.display = 'none';
} else {
likeBtn.style.display = 'flex';
this.updateLikeState(likeBtn.parentElement, 'track', track.id);
this.updateLikeState(likeBtn.parentElement, track.type || 'track', track.id);
}
}
@ -290,7 +291,7 @@ export class UIRenderer {
fsLikeBtn.style.display = 'none';
} else {
fsLikeBtn.style.display = 'flex';
this.updateLikeState(fsLikeBtn.parentElement, 'track', track.id);
this.updateLikeState(fsLikeBtn.parentElement, track.type || 'track', track.id);
}
}
if (fsAddPlaylistBtn) {
@ -341,9 +342,18 @@ export class UIRenderer {
createTrackItemHTML(track, index, showCover = false, hasMultipleDiscs = false, useTrackNumber = false) {
const isUnavailable = track.isUnavailable;
const isBlocked = contentBlockingSettings?.shouldHideTrack(track);
const trackImageHTML = showCover
? this.getCoverHTML(track.album?.videoCover, track.album?.cover, 'Track Cover', 'track-item-cover')
: '';
const isVideo = track.type === 'video';
let trackImageHTML = '';
if (showCover) {
if (isVideo && this.currentPage === 'playlist') {
trackImageHTML = `<div class="track-item-cover video-icon-placeholder" style="display: flex; align-items: center; justify-content: center; background: var(--secondary);"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="opacity: 0.7;"><path d="m22 8-6 4 6 4V8Z"/><rect width="14" height="12" x="2" y="6" rx="2" ry="2"/></svg></div>`;
} else if (isVideo && (this.currentPage === 'search' || this.currentPage === 'library')) {
trackImageHTML = `<div class="track-item-cover video-icon-placeholder" style="display: flex; align-items: center; justify-content: center; background: var(--secondary);"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="opacity: 0.7;"><path d="M8 5v14l11-7z"/></svg></div>`;
} else {
trackImageHTML = this.getCoverHTML(track.image || track.cover || track.album?.cover, 'Track Cover', 'track-item-cover', 'lazy');
}
}
let displayIndex;
if (hasMultipleDiscs && !showCover) {
@ -355,6 +365,7 @@ export class UIRenderer {
displayIndex = index + 1;
}
const videoIcon = isVideo ? '<span class="video-item-icon" title="Music Video" style="display: inline-flex; align-items: center; margin-right: 4px; color: var(--muted-foreground);"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 8-6 4 6 4V8Z"/><rect width="14" height="12" x="2" y="6" rx="2" ry="2"/></svg></span>' : '';
const trackNumberHTML = `<div class="track-number">${showCover ? trackImageHTML : displayIndex}</div>`;
const explicitBadge = hasExplicitContent(track) ? this.createExplicitBadge() : '';
const qualityBadge = createQualityBadgeHTML(track);
@ -381,6 +392,7 @@ export class UIRenderer {
const classList = [
'track-item',
isVideo ? 'video-track-item' : '',
isCurrentTrack ? 'playing' : '',
isUnavailable ? 'unavailable' : '',
isBlocked ? 'blocked' : '',
@ -391,6 +403,7 @@ export class UIRenderer {
return `
<div class="${classList}"
data-track-id="${track.id}"
${isVideo ? 'data-type="video"' : 'data-type="track"'}
${track.isLocal ? 'data-is-local="true"' : ''}
${isUnavailable ? 'title="This track is currently unavailable"' : ''}
${blockedTitle}>
@ -398,6 +411,7 @@ export class UIRenderer {
<div class="track-item-info">
<div class="track-item-details">
<div class="title">
${videoIcon}
${escapeHtml(trackTitle)}
${explicitBadge}
${qualityBadge}
@ -413,11 +427,10 @@ export class UIRenderer {
`;
}
getCoverHTML(videoCover, cover, alt, className = 'card-image', loading = 'lazy', videoCoverUrl = null) {
const videoUrl = (videoCover ? this.api.tidalAPI.getVideoCoverUrl(videoCover) : null) || videoCoverUrl;
getCoverHTML(cover, alt, className = 'card-image', loading = 'lazy', videoCoverUrl = null) {
const imageUrl = this.api.getCoverUrl(cover);
if (videoUrl) {
return `<video src="${videoUrl}" poster="${imageUrl}" class="${className}" alt="${alt}" autoplay loop muted playsinline preload="auto" onerror="this.onerror=null; this.outerHTML='<img src=&quot;${imageUrl}&quot; class=&quot;${className}&quot; alt=&quot;${alt}&quot; loading=&quot;${loading}&quot;>';"></video>`;
if (videoCoverUrl) {
return `<video src="${videoCoverUrl}" poster="${imageUrl}" class="${className}" alt="${alt}" preload="metadata" playsinline muted></video>`;
}
return `<img src="${imageUrl}" class="${className}" alt="${alt}" loading="${loading}">`;
}
@ -625,7 +638,7 @@ export class UIRenderer {
href: `/album/${album.id}`,
title: `${escapeHtml(album.title)} ${explicitBadge} ${qualityBadge}`,
subtitle: `${escapeHtml(artistName)} • ${yearDisplay}${typeLabel}`,
imageHTML: this.getCoverHTML(album.videoCover, album.cover, escapeHtml(album.title), 'card-image', 'lazy', album.videoCoverUrl),
imageHTML: this.getCoverHTML(album.cover, escapeHtml(album.title), 'card-image', 'lazy', album.videoCoverUrl),
actionButtonsHTML: `
<button class="like-btn card-like-btn" data-action="toggle-like" data-type="album" title="Add to Liked">
${this.createHeartIcon(false)}
@ -639,6 +652,41 @@ export class UIRenderer {
});
}
createVideoCardHTML(video) {
const duration = formatTime(video.duration);
const artistName = getTrackArtists(video);
const cover = video.image || video.cover;
let imageHTML;
if (cover) {
imageHTML = this.getCoverHTML(cover, escapeHtml(video.title));
} else {
imageHTML = `<div class="card-image video-icon-placeholder" style="display: flex; align-items: center; justify-content: center; background: var(--secondary); aspect-ratio: 16/9; width: 100%;"><svg width="48" height="48" viewBox="0 0 24 24" fill="currentColor" style="opacity: 0.7;"><path d="M8 5v14l11-7z"/></svg></div>`;
}
return `
<div class="card video-card" data-video-id="${video.id}" data-type="video" draggable="true">
<div class="card-image-container">
${imageHTML}
<div class="card-overlay">
<button class="card-play-btn" title="Play video">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
</button>
</div>
<button class="like-btn card-like-btn" data-action="toggle-like" data-type="video" title="Add to Liked">
${this.createHeartIcon(false)}
</button>
<div class="video-duration-badge" style="position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.7); color: white; padding: 2px 6px; border-radius: 4px; font-size: 12px; font-weight: 500;">${duration}</div>
</div>
<div class="card-info">
<div class="card-title" title="${escapeHtml(video.title)}">${escapeHtml(video.title)}</div>
<div class="card-subtitle">${escapeHtml(artistName)}</div>
</div>
</div>
`;
}
createArtistCardHTML(artist) {
const isCompact = cardSettings.isCompactArtist();
const isBlocked = contentBlockingSettings?.shouldHideArtist(artist);
@ -788,7 +836,7 @@ export class UIRenderer {
if (element && track) {
trackDataStore.set(element, track);
// Async update for like button
this.updateLikeState(element, 'track', track.id);
this.updateLikeState(element, track.type || 'track', track.id);
}
});
@ -906,48 +954,87 @@ export class UIRenderer {
if (!track) return;
const overlay = document.getElementById('fullscreen-cover-overlay');
const image = document.getElementById('fullscreen-cover-image');
const videoContainer = document.getElementById('fullscreen-video-container');
const title = document.getElementById('fullscreen-track-title');
const artist = document.getElementById('fullscreen-track-artist');
const nextTrackEl = document.getElementById('fullscreen-next-track');
const videoCoverUrl = track.album?.videoCover
? this.api.tidalAPI.getVideoCoverUrl(track.album.videoCover, '1280')
: (track.album?.videoCoverUrl || null);
const coverUrl = videoCoverUrl || this.api.getCoverUrl(track.album?.cover, '1280');
const isRealVideo = track.type === 'video';
const visualizerContainer = document.getElementById('visualizer-container');
overlay.classList.toggle('is-video-mode', isRealVideo);
const fsLikeBtn = document.getElementById('fs-like-btn');
if (fsLikeBtn) {
this.updateLikeState(fsLikeBtn.parentElement, 'track', track.id);
const toggleUiBtn = document.getElementById('toggle-ui-btn');
if (toggleUiBtn) {
toggleUiBtn.style.display = isRealVideo ? 'none' : 'flex';
}
if (videoCoverUrl) {
if (image.tagName === 'IMG') {
const video = document.createElement('video');
video.src = videoCoverUrl;
video.autoplay = true;
video.loop = true;
video.muted = true;
video.playsInline = true;
video.id = image.id;
video.className = image.className;
image.replaceWith(video);
if (isRealVideo) {
if (sidePanelManager.isActive('lyrics')) {
sidePanelManager.close();
}
if (videoContainer) {
videoContainer.style.display = 'flex';
const audioPlayer = document.getElementById('audio-player');
if (audioPlayer && audioPlayer.parentElement !== videoContainer) {
videoContainer.appendChild(audioPlayer);
audioPlayer.style.display = 'block';
audioPlayer.style.width = '100%';
audioPlayer.style.height = '100%';
audioPlayer.style.objectFit = 'contain';
}
}
if (image) image.style.display = 'none';
if (visualizerContainer) visualizerContainer.style.display = 'none';
} else {
if (image.tagName === 'VIDEO') {
const img = document.createElement('img');
img.src = coverUrl;
img.id = image.id;
img.className = image.className;
image.replaceWith(img);
if (videoContainer) {
videoContainer.style.display = 'none';
const audioPlayer = document.getElementById('audio-player');
if (audioPlayer && audioPlayer.parentElement === videoContainer) {
document.body.appendChild(audioPlayer);
audioPlayer.style.display = 'none';
}
}
}
if (image) image.style.display = 'block';
if (visualizerContainer) visualizerContainer.style.display = 'block';
const currentImage = document.getElementById('fullscreen-cover-image');
if (currentImage.src !== coverUrl || !videoCoverUrl) {
currentImage.src = coverUrl;
const videoCoverUrl = track.videoUrl || track.videoCoverUrl || track.album?.videoCoverUrl || null; const coverUrl = videoCoverUrl || this.api.getCoverUrl(track.album?.cover, '1280');
const fsLikeBtn = document.getElementById('fs-like-btn');
if (fsLikeBtn) {
this.updateLikeState(fsLikeBtn.parentElement, track.type || 'track', track.id);
}
const currentImage = document.getElementById('fullscreen-cover-image');
if (videoCoverUrl) {
if (currentImage.tagName === 'IMG') {
const video = document.createElement('video');
video.src = videoCoverUrl;
video.autoplay = false;
video.loop = false;
video.muted = true;
video.playsInline = true;
video.preload = 'metadata';
video.className = currentImage.className;
currentImage.replaceWith(video);
} else if (currentImage.src !== videoCoverUrl) {
currentImage.src = videoCoverUrl;
}
} else {
if (currentImage.tagName === 'VIDEO') {
const img = document.createElement('img');
img.src = coverUrl;
img.id = currentImage.id;
img.className = currentImage.className;
currentImage.replaceWith(img);
} else if (currentImage.src !== coverUrl) {
currentImage.src = coverUrl;
}
}
overlay.style.setProperty('--bg-image', `url('${this.api.getCoverUrl(track.album?.cover, '1280')}')`);
this.extractAndApplyColor(this.api.getCoverUrl(track.album?.cover, '80'));
}
overlay.style.setProperty('--bg-image', `url('${coverUrl}')`);
this.extractAndApplyColor(this.api.getCoverUrl(track.album?.cover, '80'));
const qualityBadge = createQualityBadgeHTML(track);
title.innerHTML = `${escapeHtml(track.title)} ${qualityBadge}`;
@ -1059,6 +1146,28 @@ export class UIRenderer {
const playerBar = document.querySelector('.now-playing-bar');
if (playerBar) playerBar.style.removeProperty('display');
if (this.player?.currentTrack?.type === 'video') {
const coverContainer = document.querySelector('.now-playing-bar .track-info');
const audioPlayer = document.getElementById('audio-player');
const imgCover = coverContainer?.querySelector('.cover:not(#audio-player)');
if (audioPlayer && coverContainer) {
if (imgCover) imgCover.style.display = 'none';
audioPlayer.style.display = 'block';
audioPlayer.classList.add('cover', 'video-cover-mirror');
audioPlayer.style.width = '56px';
audioPlayer.style.height = '56px';
audioPlayer.style.borderRadius = 'var(--radius-sm)';
audioPlayer.style.objectFit = 'cover';
audioPlayer.style.gridArea = 'none';
if (audioPlayer.parentElement !== coverContainer) {
coverContainer.insertBefore(audioPlayer, coverContainer.firstChild);
}
}
}
if (this.fullscreenUpdateInterval) {
cancelAnimationFrame(this.fullscreenUpdateInterval);
this.fullscreenUpdateInterval = null;
@ -1107,16 +1216,32 @@ export class UIRenderer {
const isNearTopRight = e.clientY < 100 && e.clientX > rect.width - 150;
if (isUIHidden) {
// When UI is hidden, only show button when mouse is near top-right
if (isNearTopRight) {
if (overlay.classList.contains('is-video-mode')) {
toggleUI();
} else if (isNearTopRight) {
showButton();
} else {
hideButton();
}
} else if (overlay.classList.contains('is-video-mode')) {
resetVideoHideTimer();
}
// When UI is visible, button stays visible (no auto-hide)
};
let videoHideTimer = null;
const resetVideoHideTimer = () => {
if (videoHideTimer) clearTimeout(videoHideTimer);
if (!overlay.classList.contains('is-video-mode') || isUIHidden) return;
videoHideTimer = setTimeout(() => {
if (!isUIHidden && overlay.classList.contains('is-video-mode')) {
toggleUI();
}
}, 3000);
};
resetVideoHideTimer();
// Toggle UI visibility
const toggleUI = () => {
isUIHidden = !isUIHidden;
@ -1476,11 +1601,13 @@ export class UIRenderer {
this.showPage('library');
const tracksContainer = document.getElementById('library-tracks-container');
const videosTabContent = document.getElementById('library-tab-videos');
const albumsContainer = document.getElementById('library-albums-container');
const artistsContainer = document.getElementById('library-artists-container');
const playlistsContainer = document.getElementById('library-playlists-container');
const localContainer = document.getElementById('library-local-container');
const foldersContainer = document.getElementById('my-folders-container');
const myPlaylistsContainer = document.getElementById('my-playlists-container');
const likedTracks = await db.getFavorites('track');
const shuffleBtn = document.getElementById('shuffle-liked-tracks-btn');
@ -1496,6 +1623,29 @@ export class UIRenderer {
tracksContainer.innerHTML = createPlaceholder('No liked tracks yet.');
}
const likedVideos = await db.getFavorites('video');
if (videosTabContent) {
const grid = videosTabContent.querySelector('.card-grid');
if (likedVideos.length) {
grid.innerHTML = likedVideos.map((v) => this.createVideoCardHTML(v)).join('');
likedVideos.forEach((video) => {
const el = grid.querySelector(`[data-video-id="${video.id}"]`);
if (el) {
trackDataStore.set(el, video);
this.updateLikeState(el, 'video', video.id);
el.addEventListener('click', (e) => {
if (e.target.closest('.card-play-btn') || e.target.closest('.card-image-container')) {
e.stopPropagation();
this.player.playVideo(video);
}
});
}
});
} else {
grid.innerHTML = createPlaceholder('No liked videos yet.');
}
}
const likedAlbums = await db.getFavorites('album');
if (likedAlbums.length) {
albumsContainer.innerHTML = likedAlbums.map((a) => this.createAlbumCardHTML(a)).join('');
@ -1527,38 +1677,6 @@ export class UIRenderer {
const likedPlaylists = await db.getFavorites('playlist');
const likedMixes = await db.getFavorites('mix');
if (likedTracks.length > 0) {
likedTracks.slice(0, 2).forEach((track) => {
if (!track.album?.videoCover && !track.album?.videoCoverUrl) {
this.api.getVideoArtwork(track.title, getTrackArtists(track)).then((result) => {
if (result && this.currentPage === 'library') {
const url = result.videoUrl || result.hlsUrl;
if (!url) return;
track.album = track.album || {};
track.album.videoCoverUrl = url;
this.replaceVideoArtwork(tracksContainer, 'track', track.id, result);
}
});
}
});
}
if (likedAlbums.length > 0) {
likedAlbums.slice(0, 2).forEach((album) => {
if (!album.videoCover && !album.videoCoverUrl) {
this.api.getVideoArtwork(album.title, typeof album.artist === 'string' ? album.artist : (album.artist?.name || '')).then((result) => {
if (result && this.currentPage === 'library') {
const url = result.videoUrl || result.hlsUrl;
if (!url) return;
album.videoCoverUrl = url;
this.replaceVideoArtwork(albumsContainer, 'album', album.id, result);
}
});
}
});
}
let mixedContent = [];
if (likedPlaylists.length) mixedContent.push(...likedPlaylists.map((p) => ({ ...p, _type: 'playlist' })));
if (likedMixes.length) mixedContent.push(...likedMixes.map((m) => ({ ...m, _type: 'mix' })));
@ -1598,9 +1716,7 @@ export class UIRenderer {
foldersContainer.style.display = folders.length ? 'grid' : 'none';
}
const myPlaylistsContainer = document.getElementById('my-playlists-container');
const myPlaylists = await db.getPlaylists();
const playlistsInFolders = new Set();
folders.forEach((folder) => {
if (folder.playlists) {
@ -1610,24 +1726,28 @@ export class UIRenderer {
const visiblePlaylists = myPlaylists.filter((p) => !playlistsInFolders.has(p.id));
if (visiblePlaylists.length) {
myPlaylistsContainer.innerHTML = visiblePlaylists.map((p) => this.createUserPlaylistCardHTML(p)).join('');
visiblePlaylists.forEach((playlist) => {
const el = myPlaylistsContainer.querySelector(`[data-user-playlist-id="${playlist.id}"]`);
if (el) {
trackDataStore.set(el, playlist);
}
});
} else {
if (folders.length === 0) {
myPlaylistsContainer.innerHTML = createPlaceholder('No playlists yet. Create your first playlist!');
if (myPlaylistsContainer) {
if (visiblePlaylists.length) {
myPlaylistsContainer.innerHTML = visiblePlaylists.map((p) => this.createUserPlaylistCardHTML(p)).join('');
visiblePlaylists.forEach((playlist) => {
const el = myPlaylistsContainer.querySelector(`[data-user-playlist-id="${playlist.id}"]`);
if (el) {
trackDataStore.set(el, playlist);
}
});
} else {
myPlaylistsContainer.innerHTML = '';
if (folders.length === 0) {
myPlaylistsContainer.innerHTML = createPlaceholder('No playlists yet. Create your first playlist!');
} else {
myPlaylistsContainer.innerHTML = '';
}
}
}
// Render Local Files
this.renderLocalFiles(localContainer);
if (localContainer) {
this.renderLocalFiles(localContainer);
}
}
async renderLocalFiles(container) {
@ -2087,7 +2207,7 @@ export class UIRenderer {
href: `/track/${track.id}`,
title: `${escapeHtml(getTrackTitle(track))} ${explicitBadge} ${qualityBadge}`,
subtitle: escapeHtml(getTrackArtists(track)),
imageHTML: this.getCoverHTML(track.album?.videoCover, track.album?.cover, escapeHtml(track.title)),
imageHTML: this.getCoverHTML(track.album?.cover, escapeHtml(track.title), 'card-image', 'lazy', track.videoUrl || track.album?.videoCoverUrl),
actionButtonsHTML: `
<button class="like-btn card-like-btn" data-action="toggle-like" data-type="track" title="Add to Liked">
${this.createHeartIcon(false)}
@ -2471,11 +2591,11 @@ export class UIRenderer {
const img = card.querySelector('.card-image');
if (img && img.tagName !== 'VIDEO') {
const video = document.createElement('video');
video.autoplay = true;
video.loop = true;
video.autoplay = false;
video.loop = false;
video.muted = true;
video.playsInline = true;
video.preload = 'auto';
video.preload = 'metadata';
video.className = img.className;
video.id = img.id;
video.style.objectFit = 'cover';
@ -2502,6 +2622,16 @@ export class UIRenderer {
img.replaceWith(video);
this.setupHlsVideo(video, result, img);
// If HLS, dont play
const hls = video._hls;
if (hls) {
hls.on(Hls.Events.MANIFEST_PARSED, () => {
// Dont play
});
} else {
video.src = url;
}
}
}
@ -2527,14 +2657,16 @@ export class UIRenderer {
try {
const provider = this.api.getCurrentProvider();
const [tracksResult, artistsResult, albumsResult, playlistsResult] = await Promise.all([
const [tracksResult, videosResult, artistsResult, albumsResult, playlistsResult] = await Promise.all([
this.api.searchTracks(query, { signal, provider }),
this.api.searchVideos(query, { signal, provider }),
this.api.searchArtists(query, { signal, provider }),
this.api.searchAlbums(query, { signal, provider }),
this.api.searchPlaylists(query, { signal, provider }),
]);
let finalTracks = tracksResult.items;
let finalVideos = videosResult.items || [];
let finalArtists = artistsResult.items;
let finalAlbums = albumsResult.items;
let finalPlaylists = playlistsResult.items;
@ -2576,6 +2708,26 @@ export class UIRenderer {
tracksContainer.innerHTML = createPlaceholder('No tracks found.');
}
const videosContainer = document.getElementById('search-videos-container');
if (videosContainer) {
videosContainer.innerHTML = finalVideos.length
? finalVideos.map((video) => this.createVideoCardHTML(video)).join('')
: createPlaceholder('No videos found.');
finalVideos.forEach((video) => {
const el = videosContainer.querySelector(`[data-video-id="${video.id}"]`);
if (el) {
trackDataStore.set(el, video);
el.addEventListener('click', (e) => {
if (e.target.closest('.card-play-btn') || e.target.closest('.card-image-container')) {
e.stopPropagation();
this.player.playVideo(video);
}
});
}
});
}
artistsContainer.innerHTML = finalArtists.length
? finalArtists.map((artist) => this.createArtistCardHTML(artist)).join('')
: createPlaceholder('No artists found.');
@ -2611,35 +2763,6 @@ export class UIRenderer {
this.updateLikeState(el, 'playlist', playlist.uuid);
}
});
if (finalTracks.length > 0) {
const track = finalTracks[0];
if (!track.album?.videoCover && !track.album?.videoCoverUrl) {
this.api.getVideoArtwork(track.title, getTrackArtists(track)).then((result) => {
if (result && this.currentPage === 'search') {
const url = result.videoUrl || result.hlsUrl;
if (!url) return;
track.album = track.album || {};
track.album.videoCoverUrl = url;
this.replaceVideoArtwork(tracksContainer, 'track', track.id, result);
}
});
}
}
if (finalAlbums.length > 0) {
const album = finalAlbums[0];
if (!album.videoCover && !album.videoCoverUrl) {
this.api.getVideoArtwork(album.title, typeof album.artist === 'string' ? album.artist : (album.artist?.name || '')).then((result) => {
if (result && this.currentPage === 'search') {
const url = result.videoUrl || result.hlsUrl;
if (!url) return;
album.videoCoverUrl = url;
this.replaceVideoArtwork(albumsContainer, 'album', album.id, result);
}
});
}
}
} catch (error) {
if (error.name === 'AbortError') return;
console.error('Search failed:', error);
@ -2761,9 +2884,7 @@ export class UIRenderer {
const { album, tracks } = await this.api.getAlbum(albumId, provider);
this.currentAlbumId = albumId;
let videoCoverUrl = album.videoCover
? this.api.tidalAPI.getVideoCoverUrl(album.videoCover)
: (album.videoCoverUrl || null);
const videoCoverUrl = album.videoCoverUrl || null;
if (!videoCoverUrl && tracks.length > 0) {
const firstTrack = tracks[0];
@ -2775,20 +2896,19 @@ export class UIRenderer {
const currentImageEl = document.getElementById('album-detail-image');
if (currentImageEl && currentImageEl.tagName !== 'VIDEO') {
const video = document.createElement('video');
video.autoplay = true;
video.loop = true;
video.autoplay = false;
video.loop = false;
video.muted = true;
video.playsInline = true;
video.preload = 'auto';
video.preload = 'metadata';
video.className = currentImageEl.className;
video.id = currentImageEl.id;
video.style.objectFit = 'cover';
video.style.opacity = '1';
video.poster = currentImageEl.src;
this.setupHlsVideo(video, result, currentImageEl);
currentImageEl.replaceWith(video);
}
}
} }
});
}
@ -3268,6 +3388,7 @@ export class UIRenderer {
removeBtn.innerHTML =
'<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>';
removeBtn.dataset.trackId = currentTracks[index].id;
removeBtn.dataset.type = currentTracks[index].type || 'track';
const menuBtn = actionsDiv.querySelector('.track-menu-btn');
actionsDiv.insertBefore(removeBtn, menuBtn);
@ -3551,43 +3672,48 @@ export class UIRenderer {
// Try to get cover from first track album
if (tracks.length > 0 && tracks[0].album?.cover) {
const firstTrack = tracks[0];
let videoCoverUrl = firstTrack.album?.videoCover
? this.api.tidalAPI.getVideoCoverUrl(firstTrack.album.videoCover)
: (firstTrack.album?.videoCoverUrl || null);
let videoCoverUrl = firstTrack.videoUrl || firstTrack.videoCoverUrl || firstTrack.album?.videoCoverUrl || null;
if (!videoCoverUrl && firstTrack.album) {
this.api.getVideoArtwork(firstTrack.title, getTrackArtists(firstTrack)).then((result) => {
if (result && this.currentPage === 'mix' && this.currentMixId === mixId) {
const url = result.videoUrl || result.hlsUrl;
if (!url) return;
firstTrack.album.videoCoverUrl = url;
const currentImageEl = document.getElementById('mix-detail-image');
if (currentImageEl && currentImageEl.tagName !== 'VIDEO') {
const video = document.createElement('video');
video.autoplay = true;
video.loop = true;
video.muted = true;
video.playsInline = true;
video.preload = 'auto';
video.className = currentImageEl.className;
video.id = currentImageEl.id;
video.style.opacity = '0';
video.style.transition = 'opacity 0.3s ease-in-out';
video.oncanplay = () => {
if (!videoCoverUrl && (firstTrack.album || firstTrack.type === 'video')) {
const fetchArtwork = () => {
this.api.getVideoArtwork(firstTrack.title, getTrackArtists(firstTrack)).then((result) => {
if (result && this.currentPage === 'mix' && this.currentMixId === mixId) {
const url = result.videoUrl || result.hlsUrl;
if (!url) return;
firstTrack.album = firstTrack.album || {};
firstTrack.album.videoCoverUrl = url;
const currentImageEl = document.getElementById('mix-detail-image');
if (currentImageEl && currentImageEl.tagName !== 'VIDEO') {
const video = document.createElement('video');
video.autoplay = false;
video.loop = false;
video.muted = true;
video.playsInline = true;
video.preload = 'metadata';
video.className = currentImageEl.className;
video.id = currentImageEl.id;
video.style.opacity = '1';
setTimeout(() => {
if (currentImageEl.parentNode) {
currentImageEl.style.display = 'none';
}
}, 300);
};
video.poster = currentImageEl.src;
this.setupHlsVideo(video, result, currentImageEl);
currentImageEl.parentNode.insertBefore(video, currentImageEl);
this.setupHlsVideo(video, result, currentImageEl);
currentImageEl.replaceWith(video);
}
}
}
});
});
};
if (firstTrack.type === 'video') {
this.api.getVideoStreamUrl(firstTrack.id).then((url) => {
if (url) {
firstTrack.videoUrl = url;
this.renderMixPage(mixId);
} else {
fetchArtwork();
}
}).catch(fetchArtwork);
} else {
fetchArtwork();
}
}
const coverUrl = videoCoverUrl || this.api.getCoverUrl(firstTrack.album.cover);
@ -3980,6 +4106,25 @@ export class UIRenderer {
}
});
const videosSection = document.getElementById('artist-section-videos');
const videosContainer = document.getElementById('artist-detail-videos');
if (videosSection && videosContainer) {
if (artist.videos && artist.videos.length > 0) {
videosContainer.innerHTML = artist.videos.map((video) => this.createVideoCardHTML(video)).join('');
videosSection.style.display = 'block';
artist.videos.forEach((video) => {
const el = videosContainer.querySelector(`[data-video-id="${video.id}"]`);
if (el) {
trackDataStore.set(el, video);
this.updateLikeState(el, 'track', video.id);
}
});
} else {
videosSection.style.display = 'none';
}
}
// Check for unreleased projects
const unreleasedSection = document.getElementById('artist-section-unreleased');
const unreleasedContainer = document.getElementById('artist-detail-unreleased');
@ -4633,39 +4778,51 @@ export class UIRenderer {
}
this.currentTrackPageId = track.id;
let videoCoverUrl = track.album?.videoCover
? this.api.tidalAPI.getVideoCoverUrl(track.album.videoCover)
: (track.album?.videoCoverUrl || null);
let videoCoverUrl = track.videoUrl || track.videoCoverUrl || track.album?.videoCoverUrl || null;
if (!videoCoverUrl && track.album) {
this.api.getVideoArtwork(track.title, getTrackArtists(track)).then((result) => {
if (result && this.currentPage === 'track' && this.currentTrackPageId === track.id) {
const url = result.videoUrl || result.hlsUrl;
if (!url) return;
track.album.videoCoverUrl = url;
const currentImageEl = document.getElementById('track-detail-image');
if (currentImageEl && currentImageEl.tagName !== 'VIDEO') {
const video = document.createElement('video');
video.autoplay = true;
video.loop = true;
video.muted = true;
video.playsInline = true;
video.preload = 'auto';
video.className = currentImageEl.className;
video.id = currentImageEl.id;
video.style.opacity = '0';
video.style.transition = 'opacity 0.3s ease-in-out';
if (!videoCoverUrl && (track.album || track.type === 'video')) {
const fetchArtwork = () => {
this.api.getVideoArtwork(track.title, getTrackArtists(track)).then((result) => {
if (result && this.currentPage === 'track' && this.currentTrackPageId === track.id) {
const url = result.videoUrl || result.hlsUrl;
if (!url) return;
track.album = track.album || {};
track.album.videoCoverUrl = url;
const currentImageEl = document.getElementById('track-detail-image');
if (currentImageEl && currentImageEl.tagName !== 'VIDEO') {
const video = document.createElement('video');
video.autoplay = false;
video.loop = false;
video.muted = true;
video.playsInline = true;
video.preload = 'metadata';
video.className = currentImageEl.className;
video.id = currentImageEl.id;
video.style.opacity = '1';
video.poster = currentImageEl.src;
video.poster = currentImageEl.src;
this.setupHlsVideo(video, result, currentImageEl);
currentImageEl.replaceWith(video);
this.setupHlsVideo(video, result, currentImageEl);
currentImageEl.replaceWith(video);
}
}
}
});
});
};
if (track.type === 'video') {
this.api.getVideoStreamUrl(track.id).then((url) => {
if (url) {
track.videoUrl = url;
this.renderTrackPage(trackId, provider);
} else {
fetchArtwork();
}
}).catch(fetchArtwork);
} else {
fetchArtwork();
}
}
const coverUrl = videoCoverUrl || this.api.getCoverUrl(track.album?.cover);
const coverUrl = videoCoverUrl || this.api.getCoverUrl(track.image || track.cover || track.album?.cover);
if (videoCoverUrl) {
if (imageEl.tagName === 'IMG') {

27
js/utils.js
View file

@ -134,6 +134,23 @@ export const detectAudioFormat = (view, mimeType = '') => {
return 'mp3';
}
if (
view.byteLength >= 7 &&
view.getUint8(0) === 0x23 &&
view.getUint8(1) === 0x45 &&
view.getUint8(2) === 0x58 &&
view.getUint8(3) === 0x54 &&
view.getUint8(4) === 0x4d &&
view.getUint8(5) === 0x33 &&
view.getUint8(6) === 0x55
) {
return 'm3u8';
}
if (view.byteLength >= 188 && view.getUint8(0) === 0x47 && view.getUint8(188) === 0x47) {
return 'ts';
}
// Fallback to MIME type
if (mimeType === 'audio/flac') return 'flac';
if (mimeType === 'audio/mp4' || mimeType === 'audio/x-m4a') return 'mp4';
@ -153,10 +170,16 @@ export const getExtensionFromBlob = async (blob) => {
const format = detectAudioFormat(view, blob.type);
if (format === 'mp4') return 'm4a';
if (format === 'mp4') {
if (blob.type.includes('video')) return 'mp4';
return 'm4a';
}
if (format) return format;
// Default fallback
if (blob.type.includes('video')) return 'mp4';
if (blob.type === 'audio/mp4' || blob.type === 'audio/x-m4a') return 'm4a';
if (blob.type === 'audio/mpeg' || blob.type === 'audio/mp3') return 'mp3';
return 'flac';
};

155
styles.css
View file

@ -5227,10 +5227,110 @@ img[src=''] {
align-items: center;
justify-content: center;
padding: 6rem 2rem 2rem;
transition:
flex 0.3s ease,
padding-right 0.3s ease,
margin-right 0.3s ease;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
#fullscreen-cover-overlay.is-video-mode .fullscreen-main-view {
justify-content: flex-end;
align-items: flex-start;
padding: 2rem 2rem 6rem;
pointer-events: none;
background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 15%, transparent 40%);
}
#fullscreen-cover-overlay.is-video-mode .fullscreen-track-info {
text-align: left;
background: none !important;
backdrop-filter: none !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
max-width: 40%;
margin: 0;
pointer-events: auto;
}
#fullscreen-cover-overlay.is-video-mode #fullscreen-track-title {
font-size: 1.1rem;
font-weight: 600;
text-shadow: 0 1px 3px rgba(0,0,0,0.8);
margin-bottom: 0.1rem;
}
#fullscreen-cover-overlay.is-video-mode #fullscreen-track-artist {
font-size: 0.9rem;
text-shadow: 0 1px 2px rgba(0,0,0,0.8);
opacity: 0.7;
}
#fullscreen-cover-overlay.is-video-mode .fullscreen-controls {
position: absolute;
bottom: 1.5rem;
left: 2rem;
right: 2rem;
max-width: 500px;
margin: 0 auto;
background: rgba(15, 15, 15, 0.5);
backdrop-filter: blur(12px);
padding: 0.6rem 1rem;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: 0 4px 20px rgba(0,0,0,0.4);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
pointer-events: auto;
z-index: 100;
}
#fullscreen-cover-overlay.is-video-mode .fullscreen-buttons {
gap: 1.25rem;
}
#fullscreen-cover-overlay.is-video-mode .fullscreen-buttons button {
width: 28px;
height: 28px;
padding: 0.25rem;
}
#fullscreen-cover-overlay.is-video-mode .fullscreen-buttons button svg {
width: 18px;
height: 18px;
}
#fullscreen-cover-overlay.is-video-mode .fullscreen-buttons #fs-play-pause-btn {
width: 40px;
height: 40px;
}
#fullscreen-cover-overlay.is-video-mode .fullscreen-progress-container {
gap: 0.75rem;
font-size: 0.75rem;
}
#fullscreen-cover-overlay.is-video-mode .fullscreen-volume-container {
display: none;
}
#fullscreen-cover-overlay.is-video-mode .fullscreen-volume-container {
margin-top: 0.5rem;
}
#fullscreen-cover-overlay.ui-hidden .fullscreen-main-view,
#fullscreen-cover-overlay.ui-hidden .fullscreen-controls,
#fullscreen-cover-overlay.ui-hidden #fullscreen-next-track,
#fullscreen-cover-overlay.ui-hidden .fullscreen-lyrics-toggle,
#fullscreen-cover-overlay.ui-hidden #close-fullscreen-cover-btn {
opacity: 0;
pointer-events: none;
transform: translateY(20px);
}
#fullscreen-cover-overlay.is-video-mode.ui-hidden .fullscreen-controls {
transform: translateY(100px);
}
#fullscreen-cover-overlay.is-video-mode.ui-hidden .fullscreen-main-view {
transform: translateY(0);
}
/* Modals */
@ -7941,3 +8041,50 @@ textarea:focus {
font-size: 0.85rem;
color: var(--muted-foreground);
}
.video-card .card-image-container {
aspect-ratio: 16 / 9 !important;
}
.video-card .card-image {
aspect-ratio: 16 / 9 !important;
object-fit: cover !important;
}
.video-duration-badge {
position: absolute;
bottom: 8px;
right: 8px;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 2px 6px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
pointer-events: none;
z-index: 5;
}
#fullscreen-video-container {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
background: black;
display: none;
justify-content: center;
align-items: center;
}
#fullscreen-video-container video {
width: 100%;
height: 100%;
object-fit: contain;
}
.search-tab[data-tab="videos"] {
display: flex;
align-items: center;
gap: 0.5rem;
}