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

cc

Browse source
This commit is contained in:
Eduard Prigoana 2025-10-12 17:10:45 +03:00
parent 30d843db3b
commit 23fe06fdf2
6 changed files with 1556 additions and 1406 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
js/app.js
View file

@ -1,4 +1,3 @@
//js/app.js
import { LosslessAPI } from './api.js'; import { LosslessAPI } from './api.js';
import { apiSettings } from './storage.js'; import { apiSettings } from './storage.js';
import { UIRenderer } from './ui.js'; import { UIRenderer } from './ui.js';
@ -6,7 +5,7 @@ import { Player } from './player.js';
import { import {
QUALITY, REPEAT_MODE, SVG_PLAY, SVG_PAUSE, QUALITY, REPEAT_MODE, SVG_PLAY, SVG_PAUSE,
SVG_VOLUME, SVG_MUTE, formatTime, trackDataStore, SVG_VOLUME, SVG_MUTE, formatTime, trackDataStore,
buildTrackFilename, RATE_LIMIT_ERROR_MESSAGE buildTrackFilename, RATE_LIMIT_ERROR_MESSAGE, debounce
} from './utils.js'; } from './utils.js';
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
@ -95,7 +94,7 @@ document.addEventListener('DOMContentLoaded', () => {
<div class="track-item ${isPlaying ? 'playing' : ''}" data-queue-index="${index}"> <div class="track-item ${isPlaying ? 'playing' : ''}" data-queue-index="${index}">
<div class="track-number">${index + 1}</div> <div class="track-number">${index + 1}</div>
<div class="track-item-info"> <div class="track-item-info">
<img src="${api.getCoverUrl(track.album?.cover, '40')}" <img src="${api.getCoverUrl(track.album?.cover, '80')}"
class="track-item-cover" loading="lazy"> class="track-item-cover" loading="lazy">
<div class="track-item-details"> <div class="track-item-details">
<div class="title">${track.title}</div> <div class="title">${track.title}</div>
@ -160,12 +159,12 @@ document.addEventListener('DOMContentLoaded', () => {
try { try {
const tempEl = document.createElement('div'); const tempEl = document.createElement('div');
tempEl.textContent = `Downloading: ${contextTrack.title}...`; tempEl.textContent = `Downloading: ${contextTrack.title}...`;
tempEl.style.cssText = 'position:fixed;bottom:20px;right:20px;background:var(--card);padding:1rem;border-radius:var(--radius);border:1px solid var(--border);z-index:9999;'; tempEl.style.cssText = 'position:fixed;bottom:100px;right:20px;background:var(--card);padding:1rem 1.5rem;border-radius:var(--radius);border:1px solid var(--border);z-index:9999;box-shadow:0 4px 12px rgba(0,0,0,0.5);';
document.body.appendChild(tempEl); document.body.appendChild(tempEl);
await api.downloadTrack(contextTrack.id, QUALITY, filename); await api.downloadTrack(contextTrack.id, QUALITY, filename);
tempEl.textContent = `Downloaded: ${contextTrack.title}`; tempEl.textContent = `✓ Downloaded: ${contextTrack.title}`;
setTimeout(() => tempEl.remove(), 3000); setTimeout(() => tempEl.remove(), 3000);
} catch (error) { } catch (error) {
const errorMsg = error.message === RATE_LIMIT_ERROR_MESSAGE const errorMsg = error.message === RATE_LIMIT_ERROR_MESSAGE
@ -178,6 +177,19 @@ document.addEventListener('DOMContentLoaded', () => {
contextMenu.style.display = 'none'; contextMenu.style.display = 'none';
}); });
const performSearch = debounce((query) => {
if (query) {
window.location.hash = `#search/${encodeURIComponent(query)}`;
}
}, 300);
searchInput.addEventListener('input', (e) => {
const query = e.target.value.trim();
if (query.length > 2) {
performSearch(query);
}
});
searchForm.addEventListener('submit', e => { searchForm.addEventListener('submit', e => {
e.preventDefault(); e.preventDefault();
const query = searchInput.value.trim(); const query = searchInput.value.trim();
@ -219,18 +231,41 @@ document.addEventListener('DOMContentLoaded', () => {
playPauseBtn.innerHTML = SVG_PLAY; playPauseBtn.innerHTML = SVG_PLAY;
}); });
let isSeeking = false;
let wasPlaying = false;
const seek = (bar, fill, event, setter) => { const seek = (bar, fill, event, setter) => {
const rect = bar.getBoundingClientRect(); const rect = bar.getBoundingClientRect();
const position = Math.max(0, Math.min(1, (event.clientX - rect.left) / rect.width)); const position = Math.max(0, Math.min(1, (event.clientX - rect.left) / rect.width));
setter(position); setter(position);
}; };
progressBar.addEventListener('mousedown', () => {
isSeeking = true;
wasPlaying = !audioPlayer.paused;
if (wasPlaying) audioPlayer.pause();
});
document.addEventListener('mouseup', (e) => {
if (isSeeking) {
seek(progressBar, progressFill, e, position => {
if (!isNaN(audioPlayer.duration)) {
audioPlayer.currentTime = position * audioPlayer.duration;
if (wasPlaying) audioPlayer.play();
}
});
isSeeking = false;
}
});
progressBar.addEventListener('click', e => { progressBar.addEventListener('click', e => {
seek(progressBar, progressFill, e, position => { if (!isSeeking) {
if (!isNaN(audioPlayer.duration)) { seek(progressBar, progressFill, e, position => {
audioPlayer.currentTime = position * audioPlayer.duration; if (!isNaN(audioPlayer.duration)) {
} audioPlayer.currentTime = position * audioPlayer.duration;
}); }
});
}
}); });
volumeBar.addEventListener('click', e => { volumeBar.addEventListener('click', e => {

118
js/player.js
View file

@ -1,4 +1,3 @@
//js/player.js
import { REPEAT_MODE, SVG_PLAY, SVG_PAUSE, formatTime } from './utils.js'; import { REPEAT_MODE, SVG_PLAY, SVG_PAUSE, formatTime } from './utils.js';
export class Player { export class Player {
@ -12,12 +11,61 @@ export class Player {
this.currentQueueIndex = -1; this.currentQueueIndex = -1;
this.shuffleActive = false; this.shuffleActive = false;
this.repeatMode = REPEAT_MODE.OFF; this.repeatMode = REPEAT_MODE.OFF;
this.preloadCache = new Map();
this.preloadAbortController = null;
} }
setQuality(quality) { setQuality(quality) {
this.quality = quality; this.quality = quality;
} }
async preloadNextTracks() {
if (this.preloadAbortController) {
this.preloadAbortController.abort();
}
this.preloadAbortController = new AbortController();
const currentQueue = this.shuffleActive ? this.shuffledQueue : this.queue;
const tracksToPreload = [];
for (let i = 1; i <= 2; i++) {
const nextIndex = this.currentQueueIndex + i;
if (nextIndex < currentQueue.length) {
tracksToPreload.push({ track: currentQueue[nextIndex], index: nextIndex });
}
}
for (const { track, index } of tracksToPreload) {
if (this.preloadCache.has(track.id)) continue;
try {
const streamUrl = await this.api.getStreamUrl(track.id, this.quality);
if (this.preloadAbortController.signal.aborted) break;
fetch(streamUrl, {
signal: this.preloadAbortController.signal,
method: 'GET',
mode: 'cors',
cache: 'default'
}).then(response => {
if (response.ok) {
this.preloadCache.set(track.id, streamUrl);
}
}).catch(err => {
if (err.name !== 'AbortError') {
console.debug('Preload failed for:', track.title);
}
});
} catch (error) {
if (error.name !== 'AbortError') {
console.debug('Failed to get stream URL for preload:', track.title);
}
}
}
}
async playTrackFromQueue() { async playTrackFromQueue() {
const currentQueue = this.shuffleActive ? this.shuffledQueue : this.queue; const currentQueue = this.shuffleActive ? this.shuffledQueue : this.queue;
if (this.currentQueueIndex < 0 || this.currentQueueIndex >= currentQueue.length) { if (this.currentQueueIndex < 0 || this.currentQueueIndex >= currentQueue.length) {
@ -27,7 +75,7 @@ export class Player {
const track = currentQueue[this.currentQueueIndex]; const track = currentQueue[this.currentQueueIndex];
document.querySelector('.now-playing-bar .cover').src = document.querySelector('.now-playing-bar .cover').src =
this.api.getCoverUrl(track.album?.cover, '1280'); this.api.getCoverUrl(track.album?.cover, '160');
document.querySelector('.now-playing-bar .title').textContent = track.title; document.querySelector('.now-playing-bar .title').textContent = track.title;
document.querySelector('.now-playing-bar .artist').textContent = track.artist?.name || 'Unknown Artist'; document.querySelector('.now-playing-bar .artist').textContent = track.artist?.name || 'Unknown Artist';
document.title = `${track.title} • ${track.artist?.name || 'Unknown'}`; document.title = `${track.title} • ${track.artist?.name || 'Unknown'}`;
@ -36,9 +84,19 @@ export class Player {
this.updateMediaSession(track); this.updateMediaSession(track);
try { try {
const streamUrl = await this.api.getStreamUrl(track.id, this.quality); let streamUrl;
if (this.preloadCache.has(track.id)) {
streamUrl = this.preloadCache.get(track.id);
} else {
streamUrl = await this.api.getStreamUrl(track.id, this.quality);
}
this.audio.src = streamUrl; this.audio.src = streamUrl;
await this.audio.play(); await this.audio.play();
this.preloadNextTracks();
} catch (error) { } catch (error) {
console.error(`Could not get track URL for: ${track.title}`, error); console.error(`Could not get track URL for: ${track.title}`, error);
document.querySelector('.now-playing-bar .title').textContent = `Error: ${track.title}`; document.querySelector('.now-playing-bar .title').textContent = `Error: ${track.title}`;
@ -111,6 +169,9 @@ export class Player {
this.queue = [...this.originalQueueBeforeShuffle]; this.queue = [...this.originalQueueBeforeShuffle];
this.currentQueueIndex = this.queue.findIndex(t => t.id === currentTrack?.id); this.currentQueueIndex = this.queue.findIndex(t => t.id === currentTrack?.id);
} }
this.preloadCache.clear();
this.preloadNextTracks();
} }
toggleRepeat() { toggleRepeat() {
@ -122,6 +183,7 @@ export class Player {
this.queue = tracks; this.queue = tracks;
this.currentQueueIndex = startIndex; this.currentQueueIndex = startIndex;
this.shuffleActive = false; this.shuffleActive = false;
this.preloadCache.clear();
} }
addToQueue(track) { addToQueue(track) {
@ -141,34 +203,34 @@ export class Player {
}); });
} }
updateMediaSession(track) { updateMediaSession(track) {
if (!('mediaSession' in navigator)) return; if (!('mediaSession' in navigator)) return;
const artwork = []; const artwork = [];
const sizes = ['1280']; const sizes = ['96', '128', '192', '256', '384', '512'];
const coverId = track.album?.cover; const coverId = track.album?.cover;
if (coverId) { if (coverId) {
sizes.forEach(size => { sizes.forEach(size => {
const url = this.api.getCoverUrl(coverId, size); const url = this.api.getCoverUrl(coverId, size);
artwork.push({ artwork.push({
src: url, src: url,
sizes: `${size}x${size}`, sizes: `${size}x${size}`,
type: 'image/jpeg' type: 'image/jpeg'
});
}); });
}
navigator.mediaSession.metadata = new MediaMetadata({
title: track.title || 'Unknown Title',
artist: track.artist?.name || 'Unknown Artist',
album: track.album?.title || 'Unknown Album',
artwork: artwork.length > 0 ? artwork : undefined
}); });
}
navigator.mediaSession.metadata = new MediaMetadata({
title: track.title || 'Unknown Title',
artist: track.artist?.name || 'Unknown Artist',
album: track.album?.title || 'Unknown Album',
artwork: artwork.length > 0 ? artwork : undefined
});
navigator.mediaSession.playbackState = this.audio.paused ? 'paused' : 'playing'; navigator.mediaSession.playbackState = this.audio.paused ? 'paused' : 'playing';
} }
updateMediaSessionPlaybackState() { updateMediaSessionPlaybackState() {
if ('mediaSession' in navigator) { if ('mediaSession' in navigator) {

4
js/storage.js
View file

@ -3,12 +3,12 @@ export const apiSettings = {
STORAGE_KEY: 'monochrome-api-instances', STORAGE_KEY: 'monochrome-api-instances',
defaultInstances: [ defaultInstances: [
'https://hifi.prigoana.com', 'https://hifi.prigoana.com',
'https://tidal.401658.xyz',
'https://hund.qqdl.site', 'https://hund.qqdl.site',
'https://katze.qqdl.site', 'https://katze.qqdl.site',
'https://maus.qqdl.site', 'https://maus.qqdl.site',
'https://vogel.qqdl.site', 'https://vogel.qqdl.site',
'https://wolf.qqdl.site' 'https://wolf.qqdl.site',
'https://tidal.401658.xyz'
], ],
getInstances() { getInstances() {

63
js/ui.js
View file

@ -1,4 +1,4 @@
import { formatTime, createPlaceholder, trackDataStore } from './utils.js'; import { formatTime, createPlaceholder, trackDataStore, hasExplicitContent } from './utils.js';
import { recentActivityManager } from './storage.js'; import { recentActivityManager } from './storage.js';
export class UIRenderer { export class UIRenderer {
@ -6,17 +6,25 @@ export class UIRenderer {
this.api = api; this.api = api;
} }
createExplicitBadge() {
return '<span class="explicit-badge" title="Explicit">E</span>';
}
createTrackItemHTML(track, index, showCover = false) { createTrackItemHTML(track, index, showCover = false) {
const playIconSmall = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>'; const playIconSmall = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>';
const trackNumberHTML = `<div class="track-number" style="font-size: 1.1em; display: flex; align-items: center; justify-content: center;">${showCover ? playIconSmall : index + 1}</div>`; const trackNumberHTML = `<div class="track-number">${showCover ? playIconSmall : index + 1}</div>`;
const explicitBadge = hasExplicitContent(track) ? this.createExplicitBadge() : '';
return ` return `
<div class="track-item" data-track-id="${track.id}"> <div class="track-item" data-track-id="${track.id}">
${trackNumberHTML} ${trackNumberHTML}
<div class="track-item-info"> <div class="track-item-info">
${showCover ? `<img src="${this.api.getCoverUrl(track.album?.cover, '1280')}" alt="Track Cover" class="track-item-cover" loading="lazy">` : ''} ${showCover ? `<img src="${this.api.getCoverUrl(track.album?.cover, '80')}" alt="Track Cover" class="track-item-cover" loading="lazy">` : ''}
<div class="track-item-details"> <div class="track-item-details">
<div class="title">${track.title}</div> <div class="title">
${track.title}
${explicitBadge}
</div>
<div class="artist">${track.artist?.name ?? 'Unknown Artist'}</div> <div class="artist">${track.artist?.name ?? 'Unknown Artist'}</div>
</div> </div>
</div> </div>
@ -26,10 +34,13 @@ export class UIRenderer {
} }
createAlbumCardHTML(album) { createAlbumCardHTML(album) {
const explicitBadge = hasExplicitContent(album) ? this.createExplicitBadge() : '';
return ` return `
<a href="#album/${album.id}" class="card"> <a href="#album/${album.id}" class="card">
<img src="${this.api.getCoverUrl(album.cover)}" alt="${album.title}" class="card-image" loading="lazy"> <div class="card-image-wrapper">
<h3 class="card-title">${album.title}</h3> <img src="${this.api.getCoverUrl(album.cover, '320')}" alt="${album.title}" class="card-image" loading="lazy">
</div>
<h3 class="card-title">${album.title} ${explicitBadge}</h3>
<p class="card-subtitle">Album • ${album.artist?.name ?? ''}</p> <p class="card-subtitle">Album • ${album.artist?.name ?? ''}</p>
</a> </a>
`; `;
@ -38,7 +49,9 @@ export class UIRenderer {
createArtistCardHTML(artist) { createArtistCardHTML(artist) {
return ` return `
<a href="#artist/${artist.id}" class="card artist"> <a href="#artist/${artist.id}" class="card artist">
<img src="${this.api.getArtistPictureUrl(artist.picture, '750')}" alt="${artist.name}" class="card-image" loading="lazy"> <div class="card-image-wrapper">
<img src="${this.api.getArtistPictureUrl(artist.picture, '320')}" alt="${artist.name}" class="card-image" loading="lazy">
</div>
<h3 class="card-title">${artist.name}</h3> <h3 class="card-title">${artist.name}</h3>
<p class="card-subtitle">Artist</p> <p class="card-subtitle">Artist</p>
</a> </a>
@ -71,19 +84,6 @@ export class UIRenderer {
`; `;
} }
createSkeletonDetailHeader(isArtist = false) {
return `
<div class="skeleton-detail-header">
<div class="skeleton skeleton-detail-image ${isArtist ? 'artist' : ''}"></div>
<div class="skeleton-detail-info">
<div class="skeleton skeleton-detail-type"></div>
<div class="skeleton skeleton-detail-title"></div>
<div class="skeleton skeleton-detail-meta"></div>
</div>
</div>
`;
}
createSkeletonTracks(count = 5, showCover = false) { createSkeletonTracks(count = 5, showCover = false) {
return `<div class="skeleton-container">${Array(count).fill(0).map(() => this.createSkeletonTrack(showCover)).join('')}</div>`; return `<div class="skeleton-container">${Array(count).fill(0).map(() => this.createSkeletonTrack(showCover)).join('')}</div>`;
} }
@ -93,10 +93,20 @@ export class UIRenderer {
} }
renderListWithTracks(container, tracks, showCover) { renderListWithTracks(container, tracks, showCover) {
container.innerHTML = tracks.map((track, i) => const fragment = document.createDocumentFragment();
const tempDiv = document.createElement('div');
tempDiv.innerHTML = tracks.map((track, i) =>
this.createTrackItemHTML(track, i, showCover) this.createTrackItemHTML(track, i, showCover)
).join(''); ).join('');
while (tempDiv.firstChild) {
fragment.appendChild(tempDiv.firstChild);
}
container.innerHTML = '';
container.appendChild(fragment);
tracks.forEach(track => { tracks.forEach(track => {
const element = container.querySelector(`[data-track-id="${track.id}"]`); const element = container.querySelector(`[data-track-id="${track.id}"]`);
if (element) trackDataStore.set(element, track); if (element) trackDataStore.set(element, track);
@ -156,7 +166,6 @@ export class UIRenderer {
let finalAlbums = albumsResult.items; let finalAlbums = albumsResult.items;
if (finalArtists.length === 0 && finalTracks.length > 0) { if (finalArtists.length === 0 && finalTracks.length > 0) {
console.log('Using fallback: extracting artists from tracks');
const artistMap = new Map(); const artistMap = new Map();
finalTracks.forEach(track => { finalTracks.forEach(track => {
if (track.artist && !artistMap.has(track.artist.id)) { if (track.artist && !artistMap.has(track.artist.id)) {
@ -174,7 +183,6 @@ export class UIRenderer {
} }
if (finalAlbums.length === 0 && finalTracks.length > 0) { if (finalAlbums.length === 0 && finalTracks.length > 0) {
console.log('Using fallback: extracting albums from tracks');
const albumMap = new Map(); const albumMap = new Map();
finalTracks.forEach(track => { finalTracks.forEach(track => {
if (track.album && !albumMap.has(track.album.id)) { if (track.album && !albumMap.has(track.album.id)) {
@ -231,9 +239,12 @@ export class UIRenderer {
try { try {
const { album, tracks } = await this.api.getAlbum(albumId); const { album, tracks } = await this.api.getAlbum(albumId);
imageEl.src = this.api.getCoverUrl(album.cover); imageEl.src = this.api.getCoverUrl(album.cover, '640');
imageEl.style.backgroundColor = ''; imageEl.style.backgroundColor = '';
titleEl.textContent = album.title;
const explicitBadge = hasExplicitContent(album) ? this.createExplicitBadge() : '';
titleEl.innerHTML = `${album.title} ${explicitBadge}`;
metaEl.innerHTML = metaEl.innerHTML =
`By <a href="#artist/${album.artist.id}">${album.artist.name}</a> • ${new Date(album.releaseDate).getFullYear()}`; `By <a href="#artist/${album.artist.id}">${album.artist.name}</a> • ${new Date(album.releaseDate).getFullYear()}`;
@ -274,7 +285,7 @@ export class UIRenderer {
try { try {
const artist = await this.api.getArtist(artistId); const artist = await this.api.getArtist(artistId);
imageEl.src = this.api.getArtistPictureUrl(artist.picture, '750'); imageEl.src = this.api.getArtistPictureUrl(artist.picture, '640');
imageEl.style.backgroundColor = ''; imageEl.style.backgroundColor = '';
nameEl.textContent = artist.name; nameEl.textContent = artist.name;
metaEl.textContent = `${artist.popularity} popularity`; metaEl.textContent = `${artist.popularity} popularity`;

19
js/utils.js
View file

@ -1,4 +1,3 @@
//js/utils.js
export const QUALITY = 'LOSSLESS'; export const QUALITY = 'LOSSLESS';
export const REPEAT_MODE = { export const REPEAT_MODE = {
@ -139,4 +138,20 @@ export const deriveTrackQuality = (track) => {
return pickBestQuality(candidates); return pickBestQuality(candidates);
}; };
export const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms)); export const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
export const hasExplicitContent = (item) => {
return item?.explicit === true || item?.explicitLyrics === true;
};
export const debounce = (func, wait) => {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
};

2703
styles.css
View file

File diff suppressed because it is too large Load diff