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

style: auto-fix linting issues

Browse source
This commit is contained in:
EduardPrigoana 2026-02-01 12:48:19 +00:00 committed by github-actions[bot]
parent db777a7923
commit 9d12693fec
4 changed files with 96 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
index.html
View file

@ -1362,7 +1362,7 @@
</div> </div>
<div id="page-unreleased" class="page"> <div id="page-unreleased" class="page">
<div id="unreleased-content" style="padding: 1rem 0;"></div> <div id="unreleased-content" style="padding: 1rem 0"></div>
</div> </div>
<div id="page-tracker-artist" class="page"> <div id="page-tracker-artist" class="page">
@ -1756,7 +1756,11 @@
<h2 class="section-title">EPs and Singles</h2> <h2 class="section-title">EPs and Singles</h2>
<div class="card-grid" id="artist-detail-eps"></div> <div class="card-grid" id="artist-detail-eps"></div>
</section> </section>
<section class="content-section" id="artist-section-load-unreleased" style="display: none; margin: 1.5rem 0;"> <section
class="content-section"
id="artist-section-load-unreleased"
style="display: none; margin: 1.5rem 0"
>
<button id="load-unreleased-btn" class="btn-primary">Load Unreleased Projects</button> <button id="load-unreleased-btn" class="btn-primary">Load Unreleased Projects</button>
</section> </section>
<section class="content-section" id="artist-section-unreleased" style="display: none"> <section class="content-section" id="artist-section-unreleased" style="display: none">

61
js/events.js
View file

@ -1058,7 +1058,9 @@ export async function handleTrackAction(
// Detailed unreleased/tracker track info // Detailed unreleased/tracker track info
const releaseDate = item.trackerInfo.releaseDate || item.streamStartDate; const releaseDate = item.trackerInfo.releaseDate || item.streamStartDate;
const dateDisplay = releaseDate ? new Date(releaseDate).toLocaleDateString() : 'Unknown'; const dateDisplay = releaseDate ? new Date(releaseDate).toLocaleDateString() : 'Unknown';
const addedDate = item.trackerInfo.addedDate ? new Date(item.trackerInfo.addedDate).toLocaleDateString() : 'Unknown'; const addedDate = item.trackerInfo.addedDate
? new Date(item.trackerInfo.addedDate).toLocaleDateString()
: 'Unknown';
infoHTML = ` infoHTML = `
<div style="padding: 1.5rem; max-width: 500px; max-height: 80vh; overflow-y: auto;"> <div style="padding: 1.5rem; max-width: 500px; max-height: 80vh; overflow-y: auto;">
@ -1069,7 +1071,7 @@ export async function handleTrackAction(
</div> </div>
<div style="display: grid; gap: 0.5rem;"> <div style="display: grid; gap: 0.5rem;">
${item.artists ? `<p><strong style="color: var(--foreground);">Artist:</strong> ${Array.isArray(item.artists) ? item.artists.map(a => a.name || a).join(', ') : item.artists}</p>` : ''} ${item.artists ? `<p><strong style="color: var(--foreground);">Artist:</strong> ${Array.isArray(item.artists) ? item.artists.map((a) => a.name || a).join(', ') : item.artists}</p>` : ''}
${item.trackerInfo.artist ? `<p><strong style="color: var(--foreground);">Tracked Artist:</strong> ${item.trackerInfo.artist}</p>` : ''} ${item.trackerInfo.artist ? `<p><strong style="color: var(--foreground);">Tracked Artist:</strong> ${item.trackerInfo.artist}</p>` : ''}
${item.trackerInfo.project ? `<p><strong style="color: var(--foreground);">Project:</strong> ${item.trackerInfo.project}</p>` : ''} ${item.trackerInfo.project ? `<p><strong style="color: var(--foreground);">Project:</strong> ${item.trackerInfo.project}</p>` : ''}
${item.trackerInfo.era ? `<p><strong style="color: var(--foreground);">Era:</strong> ${item.trackerInfo.era}</p>` : ''} ${item.trackerInfo.era ? `<p><strong style="color: var(--foreground);">Era:</strong> ${item.trackerInfo.era}</p>` : ''}
@ -1083,28 +1085,40 @@ export async function handleTrackAction(
${item.trackerInfo.recordingDate ? `<p><strong style="color: var(--foreground);">Recording Date:</strong> ${new Date(item.trackerInfo.recordingDate).toLocaleDateString()}</p>` : ''} ${item.trackerInfo.recordingDate ? `<p><strong style="color: var(--foreground);">Recording Date:</strong> ${new Date(item.trackerInfo.recordingDate).toLocaleDateString()}</p>` : ''}
</div> </div>
${item.trackerInfo.description ? ` ${
item.trackerInfo.description
? `
<div style="margin-top: 1rem; padding: 0.75rem; background: var(--accent); border-radius: 8px;"> <div style="margin-top: 1rem; padding: 0.75rem; background: var(--accent); border-radius: 8px;">
<p style="color: var(--foreground); font-weight: 500; margin-bottom: 0.5rem;">Description</p> <p style="color: var(--foreground); font-weight: 500; margin-bottom: 0.5rem;">Description</p>
<p style="font-size: 0.85rem; line-height: 1.6;">${item.trackerInfo.description}</p> <p style="font-size: 0.85rem; line-height: 1.6;">${item.trackerInfo.description}</p>
</div> </div>
` : ''} `
: ''
}
${item.trackerInfo.notes ? ` ${
item.trackerInfo.notes
? `
<div style="margin-top: 1rem; padding: 0.75rem; background: var(--accent); border-radius: 8px;"> <div style="margin-top: 1rem; padding: 0.75rem; background: var(--accent); border-radius: 8px;">
<p style="color: var(--foreground); font-weight: 500; margin-bottom: 0.5rem;">Notes</p> <p style="color: var(--foreground); font-weight: 500; margin-bottom: 0.5rem;">Notes</p>
<p style="font-size: 0.85rem; line-height: 1.6;">${item.trackerInfo.notes}</p> <p style="font-size: 0.85rem; line-height: 1.6;">${item.trackerInfo.notes}</p>
</div> </div>
` : ''} `
: ''
}
${item.trackerInfo.sourceUrl ? ` ${
item.trackerInfo.sourceUrl
? `
<div style="margin-top: 1rem;"> <div style="margin-top: 1rem;">
<p style="margin-bottom: 0.5rem;"><strong style="color: var(--foreground);">Source URL:</strong></p> <p style="margin-bottom: 0.5rem;"><strong style="color: var(--foreground);">Source URL:</strong></p>
<a href="${item.trackerInfo.sourceUrl}" target="_blank" style="color: var(--primary); word-break: break-all; font-size: 0.85rem; display: block; padding: 0.5rem; background: var(--accent); border-radius: 6px; text-decoration: none;"> <a href="${item.trackerInfo.sourceUrl}" target="_blank" style="color: var(--primary); word-break: break-all; font-size: 0.85rem; display: block; padding: 0.5rem; background: var(--accent); border-radius: 6px; text-decoration: none;">
${item.trackerInfo.sourceUrl} ${item.trackerInfo.sourceUrl}
</a> </a>
</div> </div>
` : ''} `
: ''
}
${item.id ? `<p style="margin-top: 1rem; font-size: 0.8rem; color: var(--muted);"><strong>Track ID:</strong> ${item.id}</p>` : ''} ${item.id ? `<p style="margin-top: 1rem; font-size: 0.8rem; color: var(--muted);"><strong>Track ID:</strong> ${item.id}</p>` : ''}
</div> </div>
@ -1135,24 +1149,36 @@ export async function handleTrackAction(
<p><strong style="color: var(--foreground);">Quality:</strong> ${quality} ${bitrate ? `(${bitrate})` : ''}</p> <p><strong style="color: var(--foreground);">Quality:</strong> ${quality} ${bitrate ? `(${bitrate})` : ''}</p>
</div> </div>
${item.credits && item.credits.length > 0 ? ` ${
item.credits && item.credits.length > 0
? `
<div style="margin-top: 1rem; padding: 0.75rem; background: var(--accent); border-radius: 8px;"> <div style="margin-top: 1rem; padding: 0.75rem; background: var(--accent); border-radius: 8px;">
<p style="color: var(--foreground); font-weight: 500; margin-bottom: 0.5rem;">Credits</p> <p style="color: var(--foreground); font-weight: 500; margin-bottom: 0.5rem;">Credits</p>
<div style="font-size: 0.85rem; line-height: 1.6;"> <div style="font-size: 0.85rem; line-height: 1.6;">
${item.credits.map(c => `<p>${c.type}: ${c.name}</p>`).join('')} ${item.credits.map((c) => `<p>${c.type}: ${c.name}</p>`).join('')}
</div> </div>
</div> </div>
` : ''} `
: ''
}
${item.composers && item.composers.length > 0 ? ` ${
<p style="margin-top: 0.5rem;"><strong style="color: var(--foreground);">Composers:</strong> ${item.composers.map(c => c.name).join(', ')}</p> item.composers && item.composers.length > 0
` : ''} ? `
<p style="margin-top: 0.5rem;"><strong style="color: var(--foreground);">Composers:</strong> ${item.composers.map((c) => c.name).join(', ')}</p>
`
: ''
}
${item.lyrics?.text ? ` ${
item.lyrics?.text
? `
<div style="margin-top: 1rem; padding: 0.75rem; background: var(--accent); border-radius: 8px;"> <div style="margin-top: 1rem; padding: 0.75rem; background: var(--accent); border-radius: 8px;">
<p style="color: var(--foreground); font-weight: 500; margin-bottom: 0.5rem;">Has Lyrics</p> <p style="color: var(--foreground); font-weight: 500; margin-bottom: 0.5rem;">Has Lyrics</p>
</div> </div>
` : ''} `
: ''
}
${item.id ? `<p style="margin-top: 1rem; font-size: 0.8rem; color: var(--muted);"><strong>Track ID:</strong> ${item.id}</p>` : ''} ${item.id ? `<p style="margin-top: 1rem; font-size: 0.8rem; color: var(--muted);"><strong>Track ID:</strong> ${item.id}</p>` : ''}
${item.album?.id ? `<p style="font-size: 0.8rem; color: var(--muted);"><strong>Album ID:</strong> ${item.album.id}</p>` : ''} ${item.album?.id ? `<p style="font-size: 0.8rem; color: var(--muted);"><strong>Album ID:</strong> ${item.album.id}</p>` : ''}
@ -1165,7 +1191,8 @@ export async function handleTrackAction(
// Create and show modal // Create and show modal
const modal = document.createElement('div'); const modal = document.createElement('div');
modal.className = 'modal-overlay'; modal.className = 'modal-overlay';
modal.style.cssText = 'position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 10000;'; modal.style.cssText =
'position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 10000;';
modal.innerHTML = infoHTML; modal.innerHTML = infoHTML;
modal.onclick = (e) => { modal.onclick = (e) => {
if (e.target === modal) modal.remove(); if (e.target === modal) modal.remove();

42
js/ui.js
View file

@ -23,7 +23,15 @@ import { getVibrantColorFromImage } from './vibrant-color.js';
import { syncManager } from './accounts/pocketbase.js'; import { syncManager } from './accounts/pocketbase.js';
import { Visualizer } from './visualizer.js'; import { Visualizer } from './visualizer.js';
import { navigate } from './router.js'; import { navigate } from './router.js';
import { renderUnreleasedPage as renderUnreleasedTrackerPage, renderTrackerArtistPage as renderTrackerArtistContent, renderTrackerProjectPage as renderTrackerProjectContent, renderTrackerTrackPage as renderTrackerTrackContent, findTrackerArtistByName, getArtistUnreleasedProjects, createProjectCardHTML } from './tracker.js'; import {
renderUnreleasedPage as renderUnreleasedTrackerPage,
renderTrackerArtistPage as renderTrackerArtistContent,
renderTrackerProjectPage as renderTrackerProjectContent,
renderTrackerTrackPage as renderTrackerTrackContent,
findTrackerArtistByName,
getArtistUnreleasedProjects,
createProjectCardHTML,
} from './tracker.js';
export class UIRenderer { export class UIRenderer {
constructor(api, player) { constructor(api, player) {
@ -2339,15 +2347,17 @@ export class UIRenderer {
if (unreleasedData && unreleasedData.eras.length > 0) { if (unreleasedData && unreleasedData.eras.length > 0) {
const { artist: trackerArtistData, sheetId, eras } = unreleasedData; const { artist: trackerArtistData, sheetId, eras } = unreleasedData;
unreleasedContainer.innerHTML = eras.map(e => { unreleasedContainer.innerHTML = eras
let trackCount = 0; .map((e) => {
if (e.data) { let trackCount = 0;
Object.values(e.data).forEach((songs) => { if (e.data) {
if (songs && songs.length) trackCount += songs.length; Object.values(e.data).forEach((songs) => {
}); if (songs && songs.length) trackCount += songs.length;
} });
return createProjectCardHTML(e, trackerArtistData, sheetId, trackCount); }
}).join(''); return createProjectCardHTML(e, trackerArtistData, sheetId, trackCount);
})
.join('');
unreleasedSection.style.display = 'block'; unreleasedSection.style.display = 'block';
loadUnreleasedBtn.style.display = 'none'; loadUnreleasedBtn.style.display = 'none';
@ -2355,7 +2365,7 @@ export class UIRenderer {
// Add click handlers // Add click handlers
unreleasedContainer.querySelectorAll('.card').forEach((card) => { unreleasedContainer.querySelectorAll('.card').forEach((card) => {
const eraName = decodeURIComponent(card.dataset.trackerProjectId); const eraName = decodeURIComponent(card.dataset.trackerProjectId);
const era = eras.find(e => e.name === eraName); const era = eras.find((e) => e.name === eraName);
if (!era) return; if (!era) return;
card.onclick = (e) => { card.onclick = (e) => {
@ -2366,13 +2376,19 @@ export class UIRenderer {
Object.values(era.data).forEach((songs) => { Object.values(era.data).forEach((songs) => {
if (songs && songs.length) { if (songs && songs.length) {
songs.forEach((song, index) => { songs.forEach((song, index) => {
const track = createTrackFromSong(song, era, trackerArtistData.name, eraTracks.length, sheetId); const track = createTrackFromSong(
song,
era,
trackerArtistData.name,
eraTracks.length,
sheetId
);
eraTracks.push(track); eraTracks.push(track);
}); });
} }
}); });
} }
const availableTracks = eraTracks.filter(t => !t.unavailable); const availableTracks = eraTracks.filter((t) => !t.unavailable);
if (availableTracks.length > 0) { if (availableTracks.length > 0) {
globalPlayer.setQueue(availableTracks, 0); globalPlayer.setQueue(availableTracks, 0);
globalPlayer.playTrackFromQueue(); globalPlayer.playTrackFromQueue();