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

feat(player): display version beside track title

Browse source
This commit is contained in:
Dazly Gonsalves 2025-10-22 20:53:48 +05:30
parent 43a96d8407
commit e2b5217f3a
4 changed files with 25 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
js/app.js
View file

@ -7,7 +7,8 @@ import {
REPEAT_MODE, SVG_PLAY, SVG_PAUSE, REPEAT_MODE, SVG_PLAY, SVG_PAUSE,
SVG_VOLUME, SVG_MUTE, formatTime, trackDataStore, SVG_VOLUME, SVG_MUTE, formatTime, trackDataStore,
buildTrackFilename, RATE_LIMIT_ERROR_MESSAGE, debounce, buildTrackFilename, RATE_LIMIT_ERROR_MESSAGE, debounce,
sanitizeForFilename sanitizeForFilename,
getTrackTitle
} from './utils.js'; } from './utils.js';
const downloadTasks = new Map(); const downloadTasks = new Map();
@ -38,13 +39,15 @@ function addDownloadTask(trackId, track, filename, api) {
const taskEl = document.createElement('div'); const taskEl = document.createElement('div');
taskEl.className = 'download-task'; taskEl.className = 'download-task';
taskEl.dataset.trackId = trackId; taskEl.dataset.trackId = trackId;
const trackTitle = getTrackTitle(track);
taskEl.innerHTML = ` taskEl.innerHTML = `
<div style="display: flex; align-items: start; gap: 0.75rem;"> <div style="display: flex; align-items: start; gap: 0.75rem;">
<img src="${api.getCoverUrl(track.album?.cover, '80')}" <img src="${api.getCoverUrl(track.album?.cover, '80')}"
style="width: 40px; height: 40px; border-radius: 4px; flex-shrink: 0;"> style="width: 40px; height: 40px; border-radius: 4px; flex-shrink: 0;">
<div style="flex: 1; min-width: 0;"> <div style="flex: 1; min-width: 0;">
<div style="font-weight: 500; font-size: 0.9rem; margin-bottom: 0.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${track.title}</div> <div style="font-weight: 500; font-size: 0.9rem; margin-bottom: 0.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${trackTitle}</div>
<div style="font-size: 0.8rem; color: var(--muted-foreground); margin-bottom: 0.5rem;">${track.artist?.name || 'Unknown'}</div> <div style="font-size: 0.8rem; color: var(--muted-foreground); margin-bottom: 0.5rem;">${track.artist?.name || 'Unknown'}</div>
<div class="download-progress-bar" style="height: 4px; background: var(--secondary); border-radius: 2px; overflow: hidden;"> <div class="download-progress-bar" style="height: 4px; background: var(--secondary); border-radius: 2px; overflow: hidden;">
<div class="download-progress-fill" style="width: 0%; height: 100%; background: var(--highlight); transition: width 0.2s;"></div> <div class="download-progress-fill" style="width: 0%; height: 100%; background: var(--highlight); transition: width 0.2s;"></div>
@ -184,8 +187,9 @@ async function downloadAlbumAsZip(album, tracks, api, quality) {
for (let i = 0; i < tracks.length; i++) { for (let i = 0; i < tracks.length; i++) {
const track = tracks[i]; const track = tracks[i];
const filename = buildTrackFilename(track, quality); const filename = buildTrackFilename(track, quality);
const trackTitle = getTrackTitle(track);
updateBulkDownloadProgress(notification, i, tracks.length, track.title); updateBulkDownloadProgress(notification, i, tracks.length, trackTitle);
const blob = await downloadTrackBlob(track, quality, api); const blob = await downloadTrackBlob(track, quality, api);
zip.file(`${folderName}/${filename}`, blob); zip.file(`${folderName}/${filename}`, blob);
@ -735,7 +739,7 @@ document.addEventListener('DOMContentLoaded', async () => {
const html = currentQueue.map((track, index) => { const html = currentQueue.map((track, index) => {
const isPlaying = index === player.currentQueueIndex; const isPlaying = index === player.currentQueueIndex;
const trackTitle = track?.version ? `${track.title} (${track.version})` : track?.title; const trackTitle = getTrackTitle(track);
return ` return `
<div class="queue-track-item ${isPlaying ? 'playing' : ''}" data-queue-index="${index}" data-track-id="${track.id}" draggable="true"> <div class="queue-track-item ${isPlaying ? 'playing' : ''}" data-queue-index="${index}" data-track-id="${track.id}" draggable="true">

14
js/player.js
View file

@ -1,5 +1,5 @@
//player.js //player.js
import { REPEAT_MODE, formatTime } from './utils.js'; import { REPEAT_MODE, formatTime, getTrackTitle } from './utils.js';
export class Player { export class Player {
constructor(audioElement, api, quality = 'LOSSLESS') { constructor(audioElement, api, quality = 'LOSSLESS') {
@ -99,6 +99,7 @@ export class Player {
for (const { track, index } of tracksToPreload) { for (const { track, index } of tracksToPreload) {
if (this.preloadCache.has(track.id)) continue; if (this.preloadCache.has(track.id)) continue;
const trackTitle = getTrackTitle(track);
try { try {
const streamUrl = await this.api.getStreamUrl(track.id, this.quality); const streamUrl = await this.api.getStreamUrl(track.id, this.quality);
@ -113,7 +114,7 @@ export class Player {
} catch (error) { } catch (error) {
if (error.name !== 'AbortError') { if (error.name !== 'AbortError') {
console.debug('Failed to get stream URL for preload:', track.title); console.debug('Failed to get stream URL for preload:', trackTitle);
} }
} }
} }
@ -128,7 +129,7 @@ async playTrackFromQueue() {
const track = currentQueue[this.currentQueueIndex]; const track = currentQueue[this.currentQueueIndex];
this.currentTrack = track; this.currentTrack = track;
const trackTitle = track?.version ? `${track.title} (${track.version})` : track?.title; const trackTitle = getTrackTitle(track);
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, '1280');
@ -183,8 +184,8 @@ async playTrackFromQueue() {
this.setupCrossfadeListener(); this.setupCrossfadeListener();
} catch (error) { } catch (error) {
console.error(`Could not play track: ${track.title}`, error); console.error(`Could not play track: ${trackTitle}`, error);
document.querySelector('.now-playing-bar .title').textContent = `Error: ${track.title}`; document.querySelector('.now-playing-bar .title').textContent = `Error: ${trackTitle}`;
document.querySelector('.now-playing-bar .artist').textContent = error.message || 'Could not load track'; document.querySelector('.now-playing-bar .artist').textContent = error.message || 'Could not load track';
} }
} }
@ -412,6 +413,7 @@ async playTrackFromQueue() {
const artwork = []; const artwork = [];
const sizes = ['1280']; const sizes = ['1280'];
const coverId = track.album?.cover; const coverId = track.album?.cover;
const trackTitle = getTrackTitle(track);
if (coverId) { if (coverId) {
sizes.forEach(size => { sizes.forEach(size => {
@ -424,7 +426,7 @@ async playTrackFromQueue() {
} }
navigator.mediaSession.metadata = new MediaMetadata({ navigator.mediaSession.metadata = new MediaMetadata({
title: track.title || 'Unknown Title', title: trackTitle,
artist: track.artist?.name || 'Unknown Artist', artist: track.artist?.name || 'Unknown Artist',
album: track.album?.title || 'Unknown Album', album: track.album?.title || 'Unknown Album',
artwork: artwork.length > 0 ? artwork : undefined artwork: artwork.length > 0 ? artwork : undefined

4
js/ui.js
View file

@ -1,5 +1,5 @@
//ui.js //ui.js
import { formatTime, createPlaceholder, trackDataStore, hasExplicitContent } from './utils.js'; import { formatTime, createPlaceholder, trackDataStore, hasExplicitContent, getTrackTitle } from './utils.js';
import { recentActivityManager } from './storage.js'; import { recentActivityManager } from './storage.js';
export class UIRenderer { export class UIRenderer {
@ -26,7 +26,7 @@ export class UIRenderer {
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">${showCover ? playIconSmall : index + 1}</div>`; const trackNumberHTML = `<div class="track-number">${showCover ? playIconSmall : index + 1}</div>`;
const explicitBadge = !hasExplicitContent(track) ? this.createExplicitBadge() : ''; const explicitBadge = !hasExplicitContent(track) ? this.createExplicitBadge() : '';
const trackTitle = track?.version ? `${track.title} (${track.version})` : track?.title; const trackTitle = getTrackTitle(track);
return ` return `
<div class="track-item" data-track-id="${track.id}"> <div class="track-item" data-track-id="${track.id}">

9
js/utils.js
View file

@ -70,7 +70,7 @@ export const buildTrackFilename = (track, quality) => {
const artistName = sanitizeForFilename(track.artist?.name); const artistName = sanitizeForFilename(track.artist?.name);
const albumTitle = sanitizeForFilename(track.album?.title); const albumTitle = sanitizeForFilename(track.album?.title);
const trackTitle = sanitizeForFilename(track.title); const trackTitle = sanitizeForFilename(getTrackTitle(track));
return `${artistName} - ${albumTitle} - ${padded} ${trackTitle}.${extension}`; return `${artistName} - ${albumTitle} - ${padded} ${trackTitle}.${extension}`;
}; };
@ -155,4 +155,9 @@ export const debounce = (func, wait) => {
clearTimeout(timeout); clearTimeout(timeout);
timeout = setTimeout(later, wait); timeout = setTimeout(later, wait);
}; };
}; };
export const getTrackTitle = (track, { fallback = 'Unknown Title' } = {}) => {
if (!track?.title) return fallback;
return track?.version ? `${track.title} (${track.version})` : track.title;
};