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

Merge pull request #442 from ubyss/fix/ui-ux-video-library-fullscreen

Browse source 
Fix(ui): video library cards, fullscreen layout, and search UX
This commit is contained in:
edidealt 2026-03-28 11:41:33 +02:00 committed by GitHub
commit 926fa0ee6d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 3840 additions and 4383 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.github/workflows/lint.yml vendored
View file

@ -19,6 +19,7 @@ jobs:
uses: actions/checkout@v4 uses: actions/checkout@v4
with: with:
fetch-depth: 1 fetch-depth: 1
ref: ${{ github.head_ref || github.ref }}
- name: Setup Bun - name: Setup Bun
uses: oven-sh/setup-bun@v1 uses: oven-sh/setup-bun@v1
@ -55,7 +56,6 @@ jobs:
commit_message: 'style: auto-fix linting issues' commit_message: 'style: auto-fix linting issues'
commit_user_name: 'github-actions[bot]' commit_user_name: 'github-actions[bot]'
commit_user_email: 'github-actions[bot]@users.noreply.github.com' commit_user_email: 'github-actions[bot]@users.noreply.github.com'
only_if_changed: true
- name: Run HTML Lint - name: Run HTML Lint
run: bun run lint:html run: bun run lint:html

7583
index.html
View file

File diff suppressed because it is too large Load diff

19
js/app.js
View file

@ -1380,7 +1380,7 @@ document.addEventListener('DOMContentLoaded', async () => {
} }
} }
if (e.target.closest('#create-playlist-btn')) { if (e.target.closest('#create-playlist-btn') || e.target.closest('#library-create-playlist-card')) {
trackOpenModal('Create Playlist'); trackOpenModal('Create Playlist');
const modal = document.getElementById('playlist-modal'); const modal = document.getElementById('playlist-modal');
document.getElementById('playlist-modal-title').textContent = 'Create Playlist'; document.getElementById('playlist-modal-title').textContent = 'Create Playlist';
@ -1434,7 +1434,7 @@ document.addEventListener('DOMContentLoaded', async () => {
document.getElementById('playlist-name-input').focus(); document.getElementById('playlist-name-input').focus();
} }
if (e.target.closest('#create-folder-btn')) { if (e.target.closest('#create-folder-btn') || e.target.closest('#library-create-folder-card')) {
trackOpenModal('Create Folder'); trackOpenModal('Create Folder');
const modal = document.getElementById('folder-modal'); const modal = document.getElementById('folder-modal');
document.getElementById('folder-name-input').value = ''; document.getElementById('folder-name-input').value = '';
@ -1463,6 +1463,19 @@ document.addEventListener('DOMContentLoaded', async () => {
document.getElementById('folder-modal').classList.remove('active'); document.getElementById('folder-modal').classList.remove('active');
} }
if (e.target.closest('#library-liked-tracks-view-list')) {
localStorage.setItem('libraryLikedTracksView', 'list');
if (window.location.pathname.split('/').filter(Boolean)[0] === 'library') {
await UIRenderer.instance.renderLibraryPage();
}
}
if (e.target.closest('#library-liked-tracks-view-grid')) {
localStorage.setItem('libraryLikedTracksView', 'grid');
if (window.location.pathname.split('/').filter(Boolean)[0] === 'library') {
await UIRenderer.instance.renderLibraryPage();
}
}
if (e.target.closest('#delete-folder-btn')) { if (e.target.closest('#delete-folder-btn')) {
const folderId = window.location.pathname.split('/')[2]; const folderId = window.location.pathname.split('/')[2];
if (folderId && confirm('Are you sure you want to delete this folder?')) { if (folderId && confirm('Are you sure you want to delete this folder?')) {
@ -2926,7 +2939,7 @@ document.addEventListener('DOMContentLoaded', async () => {
} }
} }
headerAccountImg.style.display = 'none'; headerAccountImg.style.display = 'none';
headerAccountIcon.style.display = 'block'; headerAccountIcon.style.display = 'flex';
}); });
} }
}); });

57
js/events.js
View file

@ -1424,10 +1424,10 @@ export async function handleTrackAction(
}); });
// Handle Library Page Update // Handle Library Page Update
if (window.location.hash === '#library') { if (window.location.pathname.split('/').filter(Boolean)[0] === 'library') {
const itemSelector = const itemSelector =
type === 'track' type === 'track'
? `.track-item[data-track-id="${id}"]` ? `.track-item[data-track-id="${id}"], .card[data-track-id="${id}"]`
: type === 'video' : type === 'video'
? `.video-card[data-video-id="${id}"]` ? `.video-card[data-video-id="${id}"]`
: `.card[data-${type}-id="${id}"], .card[data-playlist-id="${id}"]`; : `.card[data-${type}-id="${id}"], .card[data-playlist-id="${id}"]`;
@ -1455,17 +1455,31 @@ export async function handleTrackAction(
const placeholder = tracksContainer.querySelector('.placeholder-text'); const placeholder = tracksContainer.querySelector('.placeholder-text');
if (placeholder) placeholder.remove(); if (placeholder) placeholder.remove();
const index = tracksContainer.children.length; const layout = localStorage.getItem('libraryLikedTracksView') || 'list';
const trackHTML = ui.createTrackItemHTML(item, index, true, false);
const tempDiv = document.createElement('div'); const tempDiv = document.createElement('div');
tempDiv.innerHTML = trackHTML; if (layout === 'grid') {
tracksContainer.classList.remove('track-list');
tracksContainer.classList.add('card-grid');
tempDiv.innerHTML = ui.createTrackCardHTML(item);
} else {
tracksContainer.classList.remove('card-grid');
tracksContainer.classList.add('track-list');
const index = tracksContainer.children.length;
tempDiv.innerHTML = ui.createTrackItemHTML(item, index, true, false, false, true);
}
const newEl = tempDiv.firstElementChild; const newEl = tempDiv.firstElementChild;
if (newEl) { if (newEl) {
tracksContainer.appendChild(newEl); tracksContainer.appendChild(newEl);
trackDataStore.set(newEl, item); trackDataStore.set(newEl, item);
ui.updateLikeState(newEl, 'track', item.id); ui.updateLikeState(newEl, 'track', item.id);
const likedToolbar = document.getElementById('library-liked-tracks-toolbar');
if (likedToolbar) likedToolbar.style.display = 'flex';
const shuffleBtn = document.getElementById('shuffle-liked-tracks-btn');
const downloadBtn = document.getElementById('download-liked-tracks-btn');
if (shuffleBtn) shuffleBtn.style.display = 'flex';
if (downloadBtn) downloadBtn.style.display = 'flex';
ui.setupLibraryLikedTracksSearch(tracksContainer);
} }
} }
} else if (type === 'video') { } else if (type === 'video') {
@ -2145,7 +2159,8 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
trackItem && trackItem &&
!trackItem.dataset.queueIndex && !trackItem.dataset.queueIndex &&
!e.target.closest('.remove-from-playlist-btn') && !e.target.closest('.remove-from-playlist-btn') &&
!e.target.closest('.artist-link') !e.target.closest('.artist-link') &&
!e.target.closest('.like-btn')
) { ) {
const clickedTrackId = trackItem.dataset.trackId; const clickedTrackId = trackItem.dataset.trackId;
const isSearch = window.location.pathname.startsWith('/search/'); const isSearch = window.location.pathname.startsWith('/search/');
@ -2234,6 +2249,34 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
return; return;
} }
const libraryTracksContainer = card.closest('#library-tracks-container');
if (libraryTracksContainer && card.dataset.trackId) {
if (
e.target.closest('.like-btn') ||
e.target.closest('.card-play-btn') ||
e.target.closest('.card-menu-btn')
) {
return;
}
e.preventDefault();
const clickedTrackId = card.dataset.trackId;
const clickedTrack = trackDataStore.get(card);
if (!clickedTrack) return;
const allTrackElements = Array.from(
libraryTracksContainer.querySelectorAll('.card[data-track-id]')
);
const trackList = allTrackElements.map((el) => trackDataStore.get(el)).filter(Boolean);
if (trackList.length === 0) return;
const startIndex = trackList.findIndex((t) => t.id == clickedTrackId);
player.setQueue(trackList, startIndex);
if (ui.currentPage === 'artist' && ui.currentArtistId) {
player.setArtistPopularTracksContext(ui.currentArtistId, trackList, trackList.length, true);
}
document.getElementById('shuffle-btn').classList.remove('active');
player.playTrackFromQueue();
return;
}
const href = card.dataset.href; const href = card.dataset.href;
if (href) { if (href) {
// Allow native links inside card to work if any exist // Allow native links inside card to work if any exist

14
js/settings.js
View file

@ -63,7 +63,7 @@ export async function initializeSettings(scrobbler, player, api, ui) {
// Email Auth UI Logic // Email Auth UI Logic
const toggleEmailBtn = document.getElementById('toggle-email-auth-btn'); const toggleEmailBtn = document.getElementById('toggle-email-auth-btn');
const cancelEmailBtn = document.getElementById('cancel-email-auth-btn'); const authModalCloseBtn = document.getElementById('email-auth-modal-close');
const authModal = document.getElementById('email-auth-modal'); const authModal = document.getElementById('email-auth-modal');
const emailInput = document.getElementById('auth-email'); const emailInput = document.getElementById('auth-email');
const passwordInput = document.getElementById('auth-password'); const passwordInput = document.getElementById('auth-password');
@ -77,14 +77,10 @@ export async function initializeSettings(scrobbler, player, api, ui) {
}); });
} }
if (cancelEmailBtn && authModal) { if (authModal) {
cancelEmailBtn.addEventListener('click', () => { const closeAuthModal = () => authModal.classList.remove('active');
authModal.classList.remove('active'); authModalCloseBtn?.addEventListener('click', closeAuthModal);
}); authModal.querySelector('.modal-overlay')?.addEventListener('click', closeAuthModal);
authModal.querySelector('.modal-overlay').addEventListener('click', () => {
authModal.classList.remove('active');
});
} }
if (signInBtn) { if (signInBtn) {

250
js/ui.js
View file

@ -116,6 +116,16 @@ function sortTracks(tracks, sortType) {
} }
} }
const TRACKLIST_HEADER_WITH_LIKE_COL_HTML = `
<div class="track-list-header">
<span style="width: 40px; text-align: center;">#</span>
<span>Title</span>
<span class="track-list-header-spacer" aria-hidden="true"></span>
<span class="duration-header">Duration</span>
<span style="display: flex; justify-content: flex-end; opacity: 0.8;">Menu</span>
</div>
`;
export class UIRenderer { export class UIRenderer {
static #instance = null; static #instance = null;
@ -371,7 +381,14 @@ export class UIRenderer {
} }
} }
createTrackItemHTML(track, index, showCover = false, hasMultipleDiscs = false, useTrackNumber = false) { createTrackItemHTML(
track,
index,
showCover = false,
hasMultipleDiscs = false,
useTrackNumber = false,
inlineLike = false
) {
const isUnavailable = track.isUnavailable; const isUnavailable = track.isUnavailable;
const isBlocked = contentBlockingSettings?.shouldHideTrack(track); const isBlocked = contentBlockingSettings?.shouldHideTrack(track);
const isVideo = track.type === 'video'; const isVideo = track.type === 'video';
@ -440,12 +457,23 @@ export class UIRenderer {
? `title="Blocked: ${contentBlockingSettings.isTrackBlocked(track.id) ? 'Track blocked' : contentBlockingSettings.isArtistBlocked(track.artist?.id) ? 'Artist blocked' : 'Album blocked'}"` ? `title="Blocked: ${contentBlockingSettings.isTrackBlocked(track.id) ? 'Track blocked' : contentBlockingSettings.isArtistBlocked(track.artist?.id) ? 'Artist blocked' : 'Album blocked'}"`
: ''; : '';
const likeType = isVideo ? 'video' : 'track';
const showRowLike = inlineLike && !isUnavailable && !isBlocked;
const inlineLikeHTML = showRowLike
? `<div class="track-item-inline-like">
<button type="button" class="like-btn track-row-like-btn" data-action="toggle-like" data-type="${likeType}" title="Add to Liked">
${this.createHeartIcon(false)}
</button>
</div>`
: '';
const classList = [ const classList = [
'track-item', 'track-item',
isVideo ? 'video-track-item' : '', isVideo ? 'video-track-item' : '',
isCurrentTrack ? 'playing' : '', isCurrentTrack ? 'playing' : '',
isUnavailable ? 'unavailable' : '', isUnavailable ? 'unavailable' : '',
isBlocked ? 'blocked' : '', isBlocked ? 'blocked' : '',
showRowLike ? 'track-item--inline-like' : '',
] ]
.filter(Boolean) .filter(Boolean)
.join(' '); .join(' ');
@ -470,6 +498,7 @@ export class UIRenderer {
<div class="artist">${getTrackArtistsHTML(track)}${yearDisplay}</div> <div class="artist">${getTrackArtistsHTML(track)}${yearDisplay}</div>
</div> </div>
</div> </div>
${inlineLikeHTML}
<div class="track-item-duration">${isUnavailable || isBlocked ? '--:--' : track.duration ? formatTime(track.duration) : '--:--'}</div> <div class="track-item-duration">${isUnavailable || isBlocked ? '--:--' : track.duration ? formatTime(track.duration) : '--:--'}</div>
<div class="track-item-actions"> <div class="track-item-actions">
${actionsHTML} ${actionsHTML}
@ -704,14 +733,23 @@ export class UIRenderer {
const duration = formatTime(video.duration); const duration = formatTime(video.duration);
const artistName = getTrackArtists(video); const artistName = getTrackArtists(video);
const videoCoverUrl = this.api.getVideoCoverUrl(video.imageId); const videoCoverCandidate = video.imageId || video.image || video.cover || null;
const cover = video.image || video.cover; const videoCoverUrl =
videoCoverCandidate && (typeof videoCoverCandidate === 'string' || typeof videoCoverCandidate === 'number')
? this.api.getVideoCoverUrl(videoCoverCandidate)
: null;
const coverFallback = video.image || video.cover;
const coverPrimitive =
coverFallback != null &&
(typeof coverFallback === 'string' || typeof coverFallback === 'number')
? coverFallback
: null;
let imageHTML; let imageHTML;
if (videoCoverUrl) { if (videoCoverUrl) {
imageHTML = `<img src="${videoCoverUrl}" alt="${escapeHtml(video.title)}" class="card-image" loading="lazy">`; imageHTML = `<img src="${videoCoverUrl}" alt="${escapeHtml(video.title)}" class="card-image" loading="lazy">`;
} else if (cover) { } else if (coverPrimitive) {
imageHTML = this.getCoverHTML(cover, escapeHtml(video.title)); imageHTML = this.getCoverHTML(coverPrimitive, escapeHtml(video.title));
} else { } 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_PLAY(48, { style: 'opacity: 0.7;' })}</div>`; 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_PLAY(48, { style: 'opacity: 0.7;' })}</div>`;
} }
@ -810,18 +848,20 @@ export class UIRenderer {
const oldListener = clearBtn._clearListener; const oldListener = clearBtn._clearListener;
if (oldListener) clearBtn.removeEventListener('click', oldListener); if (oldListener) clearBtn.removeEventListener('click', oldListener);
// Toggle visibility based on input value const oldToggle = inputElement._searchClearToggleListener;
if (oldToggle) inputElement.removeEventListener('input', oldToggle);
const toggleVisibility = () => { const toggleVisibility = () => {
clearBtn.style.display = inputElement.value.trim() ? 'flex' : 'none'; clearBtn.style.display = inputElement.value.trim() ? 'flex' : 'none';
}; };
// Clear input on click
const clearListener = () => { const clearListener = () => {
inputElement.value = ''; inputElement.value = '';
inputElement.dispatchEvent(new Event('input')); inputElement.dispatchEvent(new Event('input'));
inputElement.focus(); inputElement.focus();
}; };
inputElement._searchClearToggleListener = toggleVisibility;
inputElement.addEventListener('input', toggleVisibility); inputElement.addEventListener('input', toggleVisibility);
clearBtn._clearListener = clearListener; clearBtn._clearListener = clearListener;
clearBtn.addEventListener('click', clearListener); clearBtn.addEventListener('click', clearListener);
@ -870,7 +910,52 @@ export class UIRenderer {
searchInput.addEventListener('input', listener); searchInput.addEventListener('input', listener);
} }
renderListWithTracks(container, tracks, showCover, append = false, useTrackNumber = false) { setupLibraryLikedTracksSearch(container) {
const searchInput = document.getElementById('library-liked-tracks-search');
if (!searchInput || !container) return;
this.setupSearchClearButton(searchInput);
const oldListener = searchInput._libraryLikedSearchListener;
if (oldListener) {
searchInput.removeEventListener('input', oldListener);
}
const listener = () => {
const query = searchInput.value.toLowerCase().trim();
const selector = container.classList.contains('card-grid')
? '.card[data-track-id]'
: '.track-item';
container.querySelectorAll(selector).forEach((item) => {
const track = trackDataStore.get(item);
if (!track) {
item.style.display = '';
return;
}
const title = (getTrackTitle(track) || '').toLowerCase();
const artist = (
track.artist?.name ||
track.artists?.[0]?.name ||
''
).toLowerCase();
const matches = !query || title.includes(query) || artist.includes(query);
item.style.display = matches ? '' : 'none';
});
};
searchInput._libraryLikedSearchListener = listener;
searchInput.addEventListener('input', listener);
listener();
}
renderListWithTracks(
container,
tracks,
showCover,
append = false,
useTrackNumber = false,
inlineLike = false
) {
const fragment = document.createDocumentFragment(); const fragment = document.createDocumentFragment();
const tempDiv = document.createElement('div'); const tempDiv = document.createElement('div');
@ -878,7 +963,9 @@ export class UIRenderer {
const hasMultipleDiscs = tracks.some((t) => (t.volumeNumber || t.discNumber || 1) > 1); const hasMultipleDiscs = tracks.some((t) => (t.volumeNumber || t.discNumber || 1) > 1);
tempDiv.innerHTML = tracks tempDiv.innerHTML = tracks
.map((track, i) => this.createTrackItemHTML(track, i, showCover, hasMultipleDiscs, useTrackNumber)) .map((track, i) =>
this.createTrackItemHTML(track, i, showCover, hasMultipleDiscs, useTrackNumber, inlineLike)
)
.join(''); .join('');
// Bind data to elements immediately using index, avoiding selector ambiguity // Bind data to elements immediately using index, avoiding selector ambiguity
@ -1024,6 +1111,11 @@ export class UIRenderer {
sidePanelManager.close(); sidePanelManager.close();
} }
const fsLikeBtn = document.getElementById('fs-like-btn');
if (fsLikeBtn) {
this.updateLikeState(fsLikeBtn.parentElement, 'video', track.id);
}
if (videoContainer) { if (videoContainer) {
videoContainer.style.display = 'flex'; videoContainer.style.display = 'flex';
const videoPlayer = document.getElementById('video-player'); const videoPlayer = document.getElementById('video-player');
@ -1633,6 +1725,7 @@ export class UIRenderer {
} }
showPage(pageId) { showPage(pageId) {
const previousPage = this.currentPage;
this.currentPage = pageId; this.currentPage = pageId;
document.querySelectorAll('.page').forEach((page) => { document.querySelectorAll('.page').forEach((page) => {
page.classList.toggle('active', page.id === `page-${pageId}`); page.classList.toggle('active', page.id === `page-${pageId}`);
@ -1645,7 +1738,10 @@ export class UIRenderer {
); );
}); });
document.querySelector('.main-content').scrollTop = 0; const mainContent = document.querySelector('.main-content');
if (mainContent && previousPage !== pageId) {
mainContent.scrollTop = 0;
}
// Clear artist context when navigating away from artist page // Clear artist context when navigating away from artist page
if (pageId !== 'artist') { if (pageId !== 'artist') {
@ -1711,14 +1807,42 @@ export class UIRenderer {
const likedTracks = await db.getFavorites('track'); const likedTracks = await db.getFavorites('track');
const shuffleBtn = document.getElementById('shuffle-liked-tracks-btn'); const shuffleBtn = document.getElementById('shuffle-liked-tracks-btn');
const downloadBtn = document.getElementById('download-liked-tracks-btn'); const downloadBtn = document.getElementById('download-liked-tracks-btn');
const likedToolbar = document.getElementById('library-liked-tracks-toolbar');
const viewListBtn = document.getElementById('library-liked-tracks-view-list');
const viewGridBtn = document.getElementById('library-liked-tracks-view-grid');
const likedViewLayout = localStorage.getItem('libraryLikedTracksView') || 'list';
if (likedTracks.length) { if (likedTracks.length) {
if (likedToolbar) likedToolbar.style.display = 'flex';
if (shuffleBtn) shuffleBtn.style.display = 'flex'; if (shuffleBtn) shuffleBtn.style.display = 'flex';
if (downloadBtn) downloadBtn.style.display = 'flex'; if (downloadBtn) downloadBtn.style.display = 'flex';
this.renderListWithTracks(tracksContainer, likedTracks, true); if (viewListBtn) viewListBtn.classList.toggle('active', likedViewLayout === 'list');
if (viewGridBtn) viewGridBtn.classList.toggle('active', likedViewLayout === 'grid');
if (likedViewLayout === 'grid') {
tracksContainer.classList.remove('track-list');
tracksContainer.classList.add('card-grid');
tracksContainer.innerHTML = likedTracks.map((t) => this.createTrackCardHTML(t)).join('');
likedTracks.forEach((track) => {
const el = tracksContainer.querySelector(`[data-track-id="${track.id}"]`);
if (el) {
trackDataStore.set(el, track);
const lt = track.type === 'video' ? 'video' : 'track';
this.updateLikeState(el, lt, track.id);
}
});
} else {
tracksContainer.classList.remove('card-grid');
tracksContainer.classList.add('track-list');
this.renderListWithTracks(tracksContainer, likedTracks, true, false, false, true);
}
this.setupLibraryLikedTracksSearch(tracksContainer);
} else { } else {
if (likedToolbar) likedToolbar.style.display = 'none';
if (shuffleBtn) shuffleBtn.style.display = 'none'; if (shuffleBtn) shuffleBtn.style.display = 'none';
if (downloadBtn) downloadBtn.style.display = 'none'; if (downloadBtn) downloadBtn.style.display = 'none';
tracksContainer.classList.remove('card-grid');
tracksContainer.classList.add('track-list');
tracksContainer.innerHTML = createPlaceholder('No liked tracks yet.'); tracksContainer.innerHTML = createPlaceholder('No liked tracks yet.');
} }
@ -1733,6 +1857,10 @@ export class UIRenderer {
trackDataStore.set(el, video); trackDataStore.set(el, video);
this.updateLikeState(el, 'video', video.id); this.updateLikeState(el, 'video', video.id);
el.addEventListener('click', (e) => { el.addEventListener('click', (e) => {
if (e.target.closest('.like-btn')) {
e.stopPropagation();
return;
}
if (e.target.closest('.card-play-btn') || e.target.closest('.card-image-container')) { if (e.target.closest('.card-play-btn') || e.target.closest('.card-image-container')) {
e.stopPropagation(); e.stopPropagation();
this.player.playVideo(video); this.player.playVideo(video);
@ -1826,22 +1954,20 @@ export class UIRenderer {
const visiblePlaylists = myPlaylists.filter((p) => !playlistsInFolders.has(p.id)); const visiblePlaylists = myPlaylists.filter((p) => !playlistsInFolders.has(p.id));
if (myPlaylistsContainer) { if (myPlaylistsContainer) {
myPlaylistsContainer.querySelectorAll('.user-playlist').forEach((el) => el.remove());
myPlaylistsContainer.querySelectorAll('.placeholder-text').forEach((el) => el.remove());
if (visiblePlaylists.length) { if (visiblePlaylists.length) {
myPlaylistsContainer.innerHTML = visiblePlaylists myPlaylistsContainer.insertAdjacentHTML(
.map((p) => this.createUserPlaylistCardHTML(p)) 'beforeend',
.join(''); visiblePlaylists.map((p) => this.createUserPlaylistCardHTML(p)).join('')
);
visiblePlaylists.forEach((playlist) => { visiblePlaylists.forEach((playlist) => {
const el = myPlaylistsContainer.querySelector(`[data-user-playlist-id="${playlist.id}"]`); const el = myPlaylistsContainer.querySelector(`[data-user-playlist-id="${playlist.id}"]`);
if (el) { if (el) {
trackDataStore.set(el, playlist); trackDataStore.set(el, playlist);
} }
}); });
} else {
if (folders.length === 0) {
myPlaylistsContainer.innerHTML = createPlaceholder('No playlists yet. Create your first playlist!');
} else {
myPlaylistsContainer.innerHTML = '';
}
} }
} }
@ -2268,7 +2394,7 @@ export class UIRenderer {
this.lastRecommendedTracks = filteredTracks; this.lastRecommendedTracks = filteredTracks;
if (filteredTracks.length > 0) { if (filteredTracks.length > 0) {
this.renderListWithTracks(songsContainer, filteredTracks, true); this.renderListWithTracks(songsContainer, filteredTracks, true, false, false, true);
} else { } else {
songsContainer.innerHTML = createPlaceholder('No song recommendations found.'); songsContainer.innerHTML = createPlaceholder('No song recommendations found.');
} }
@ -2343,6 +2469,7 @@ export class UIRenderer {
const explicitBadge = hasExplicitContent(track) ? this.createExplicitBadge() : ''; const explicitBadge = hasExplicitContent(track) ? this.createExplicitBadge() : '';
const qualityBadge = createQualityBadgeHTML(track); const qualityBadge = createQualityBadgeHTML(track);
const isCompact = cardSettings.isCompactAlbum(); const isCompact = cardSettings.isCompactAlbum();
const likeType = track.type === 'video' ? 'video' : 'track';
return this.createBaseCardHTML({ return this.createBaseCardHTML({
type: 'track', type: 'track',
@ -2358,7 +2485,7 @@ export class UIRenderer {
track.videoUrl || track.album?.videoCoverUrl track.videoUrl || track.album?.videoCoverUrl
), ),
actionButtonsHTML: ` actionButtonsHTML: `
<button class="like-btn card-like-btn" data-action="toggle-like" data-type="track" title="Add to Liked"> <button class="like-btn card-like-btn" data-action="toggle-like" data-type="${likeType}" title="Add to Liked">
${this.createHeartIcon(false)} ${this.createHeartIcon(false)}
</button> </button>
`, `,
@ -2854,7 +2981,7 @@ export class UIRenderer {
trackSearch(query, totalResults); trackSearch(query, totalResults);
if (finalTracks.length) { if (finalTracks.length) {
this.renderListWithTracks(tracksContainer, finalTracks, true); this.renderListWithTracks(tracksContainer, finalTracks, true, false, false, true);
} else { } else {
tracksContainer.innerHTML = createPlaceholder('No tracks found.'); tracksContainer.innerHTML = createPlaceholder('No tracks found.');
} }
@ -2869,7 +2996,12 @@ export class UIRenderer {
const el = videosContainer.querySelector(`[data-video-id="${video.id}"]`); const el = videosContainer.querySelector(`[data-video-id="${video.id}"]`);
if (el) { if (el) {
trackDataStore.set(el, video); trackDataStore.set(el, video);
this.updateLikeState(el, 'video', video.id);
el.addEventListener('click', (e) => { el.addEventListener('click', (e) => {
if (e.target.closest('.like-btn')) {
e.stopPropagation();
return;
}
if (e.target.closest('.card-play-btn') || e.target.closest('.card-image-container')) { if (e.target.closest('.card-play-btn') || e.target.closest('.card-image-container')) {
e.stopPropagation(); e.stopPropagation();
this.player.playVideo(video); this.player.playVideo(video);
@ -3318,7 +3450,7 @@ export class UIRenderer {
recommendedTracks = contentBlockingSettings.filterTracks(recommendedTracks); recommendedTracks = contentBlockingSettings.filterTracks(recommendedTracks);
if (recommendedTracks.length > 0) { if (recommendedTracks.length > 0) {
this.renderListWithTracks(recommendedContainer, recommendedTracks, true); this.renderListWithTracks(recommendedContainer, recommendedTracks, true, false, false, true);
const trackItems = recommendedContainer.querySelectorAll('.track-item'); const trackItems = recommendedContainer.querySelectorAll('.track-item');
trackItems.forEach((item) => { trackItems.forEach((item) => {
@ -3343,14 +3475,15 @@ export class UIRenderer {
const tracklistContainer = document.getElementById('playlist-detail-tracklist'); const tracklistContainer = document.getElementById('playlist-detail-tracklist');
if (tracklistContainer && updatedPlaylist.tracks) { if (tracklistContainer && updatedPlaylist.tracks) {
tracklistContainer.innerHTML = ` tracklistContainer.innerHTML = TRACKLIST_HEADER_WITH_LIKE_COL_HTML;
<div class="track-list-header"> this.renderListWithTracks(
<span style="width: 40px; text-align: center;">#</span> tracklistContainer,
<span>Title</span> updatedPlaylist.tracks,
<span class="duration-header">Duration</span> true,
<span style="display: flex; justify-content: flex-end; opacity: 0.8;">Menu</span> true,
</div> `; false,
this.renderListWithTracks(tracklistContainer, updatedPlaylist.tracks, true); true
);
if (document.querySelector('.remove-from-playlist-btn')) { if (document.querySelector('.remove-from-playlist-btn')) {
this.enableTrackReordering( this.enableTrackReordering(
@ -3421,15 +3554,7 @@ export class UIRenderer {
titleEl.innerHTML = '<div class="skeleton" style="height: 48px; width: 300px; max-width: 90%;"></div>'; titleEl.innerHTML = '<div class="skeleton" style="height: 48px; width: 300px; max-width: 90%;"></div>';
metaEl.innerHTML = '<div class="skeleton" style="height: 16px; width: 200px; max-width: 80%;"></div>'; metaEl.innerHTML = '<div class="skeleton" style="height: 16px; width: 200px; max-width: 80%;"></div>';
descEl.innerHTML = '<div class="skeleton" style="height: 16px; width: 100%;"></div>'; descEl.innerHTML = '<div class="skeleton" style="height: 16px; width: 100%;"></div>';
tracklistContainer.innerHTML = ` tracklistContainer.innerHTML = `${TRACKLIST_HEADER_WITH_LIKE_COL_HTML}${this.createSkeletonTracks(10, true)}`;
<div class="track-list-header">
<span style="width: 40px; text-align: center;">#</span>
<span>Title</span>
<span class="duration-header">Duration</span>
<span style="display: flex; justify-content: flex-end; opacity: 0.8;">Menu</span>
</div>
${this.createSkeletonTracks(10, true)}
`;
try { try {
// Check if it's a user playlist (UUID format) // Check if it's a user playlist (UUID format)
@ -3519,15 +3644,8 @@ export class UIRenderer {
const renderTracks = () => { const renderTracks = () => {
// Re-fetch container each time because enableTrackReordering clones it // Re-fetch container each time because enableTrackReordering clones it
const container = document.getElementById('playlist-detail-tracklist'); const container = document.getElementById('playlist-detail-tracklist');
container.innerHTML = ` container.innerHTML = TRACKLIST_HEADER_WITH_LIKE_COL_HTML;
<div class="track-list-header"> this.renderListWithTracks(container, currentTracks, true, true, false, true);
<span style="width: 40px; text-align: center;">#</span>
<span>Title</span>
<span class="duration-header">Duration</span>
<span style="display: flex; justify-content: flex-end; opacity: 0.8;">Menu</span>
</div>
`;
this.renderListWithTracks(container, currentTracks, true, true);
// Add remove buttons and enable reordering ONLY IF OWNED // Add remove buttons and enable reordering ONLY IF OWNED
if (ownedPlaylist) { if (ownedPlaylist) {
@ -3670,15 +3788,8 @@ export class UIRenderer {
let currentTracks = sortTracks(originalTracks, currentSort); let currentTracks = sortTracks(originalTracks, currentSort);
const renderTracks = () => { const renderTracks = () => {
tracklistContainer.innerHTML = ` tracklistContainer.innerHTML = TRACKLIST_HEADER_WITH_LIKE_COL_HTML;
<div class="track-list-header"> this.renderListWithTracks(tracklistContainer, currentTracks, true, true, false, true);
<span style="width: 40px; text-align: center;">#</span>
<span>Title</span>
<span class="duration-header">Duration</span>
<span style="display: flex; justify-content: flex-end; opacity: 0.8;">Menu</span>
</div>
`;
this.renderListWithTracks(tracklistContainer, currentTracks, true, true);
}; };
const applySort = (sortType) => { const applySort = (sortType) => {
@ -3801,15 +3912,7 @@ export class UIRenderer {
titleEl.innerHTML = '<div class="skeleton" style="height: 48px; width: 300px; max-width: 90%;"></div>'; titleEl.innerHTML = '<div class="skeleton" style="height: 48px; width: 300px; max-width: 90%;"></div>';
metaEl.innerHTML = '<div class="skeleton" style="height: 16px; width: 200px; max-width: 80%;"></div>'; metaEl.innerHTML = '<div class="skeleton" style="height: 16px; width: 200px; max-width: 80%;"></div>';
descEl.innerHTML = '<div class="skeleton" style="height: 16px; width: 100%;"></div>'; descEl.innerHTML = '<div class="skeleton" style="height: 16px; width: 100%;"></div>';
tracklistContainer.innerHTML = ` tracklistContainer.innerHTML = `${TRACKLIST_HEADER_WITH_LIKE_COL_HTML}${this.createSkeletonTracks(10, true)}`;
<div class="track-list-header">
<span style="width: 40px; text-align: center;">#</span>
<span>Title</span>
<span class="duration-header">Duration</span>
<span style="display: flex; justify-content: flex-end; opacity: 0.8;">Menu</span>
</div>
${this.createSkeletonTracks(10, true)}
`;
try { try {
const { mix, tracks } = await this.api.getMix(mixId, provider); const { mix, tracks } = await this.api.getMix(mixId, provider);
@ -3920,16 +4023,9 @@ export class UIRenderer {
metaEl.textContent = `${tracks.length} tracks • ${formatDuration(totalDuration)}`; metaEl.textContent = `${tracks.length} tracks • ${formatDuration(totalDuration)}`;
descEl.innerHTML = `${mix.subTitle}`; descEl.innerHTML = `${mix.subTitle}`;
tracklistContainer.innerHTML = ` tracklistContainer.innerHTML = TRACKLIST_HEADER_WITH_LIKE_COL_HTML;
<div class="track-list-header">
<span style="width: 40px; text-align: center;">#</span>
<span>Title</span>
<span class="duration-header">Duration</span>
<span style="display: flex; justify-content: flex-end; opacity: 0.8;">Menu</span>
</div>
`;
this.renderListWithTracks(tracklistContainer, tracks, true, true); this.renderListWithTracks(tracklistContainer, tracks, true, true, false, true);
// Set play button action // Set play button action
playBtn.onclick = () => { playBtn.onclick = () => {

298
styles.css
View file

@ -1264,12 +1264,38 @@ ul {
.main-header { .main-header {
display: flex; display: flex;
justify-content: center; justify-content: flex-start;
align-items: center; align-items: center;
margin-bottom: var(--spacing-xl); margin-bottom: var(--spacing-xl);
gap: var(--spacing-md); gap: var(--spacing-md);
position: relative; position: relative;
z-index: 1000; z-index: 1000;
width: 100%;
}
.header-account-control {
position: relative;
flex-shrink: 0;
margin-left: auto;
}
#header-account-dropdown {
left: auto;
right: 0;
}
#header-account-btn {
display: flex;
align-items: center;
justify-content: center;
}
.header-account-icon-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
} }
.navigation-controls { .navigation-controls {
@ -1326,7 +1352,7 @@ ul {
} }
.search-bar { .search-bar {
width: 80%; width: auto;
max-width: 100%; max-width: 100%;
min-width: 0; min-width: 0;
flex: 1; flex: 1;
@ -2362,6 +2388,40 @@ body.multi-select-mode .track-item:hover {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.track-item--inline-like {
grid-template-columns: 40px 1fr auto 3.25rem auto;
}
.track-item-inline-like {
display: flex;
align-items: center;
justify-content: center;
}
.track-row-like-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 0.25rem;
background: transparent;
border: none;
color: var(--muted-foreground);
cursor: pointer;
border-radius: var(--radius-sm);
transition:
color var(--transition-fast),
transform var(--transition-fast);
}
.track-row-like-btn:hover {
color: var(--foreground);
transform: scale(1.08);
}
.track-row-like-btn.active {
color: #ef4444;
}
.track-item-duration { .track-item-duration {
color: var(--muted-foreground); color: var(--muted-foreground);
justify-self: flex-end; justify-self: flex-end;
@ -5171,9 +5231,10 @@ input:checked + .slider::before {
gap: 2px; gap: 2px;
} }
#playlist-detail-tracklist .track-list-header { #playlist-detail-tracklist .track-list-header,
#mix-detail-tracklist .track-list-header {
display: grid; display: grid;
grid-template-columns: 40px 1fr 80px auto; grid-template-columns: 40px 1fr 3.25rem 80px auto;
align-items: center; align-items: center;
gap: var(--spacing-md); gap: var(--spacing-md);
padding: var(--spacing-sm); padding: var(--spacing-sm);
@ -5183,7 +5244,8 @@ input:checked + .slider::before {
margin-bottom: var(--spacing-xs); margin-bottom: var(--spacing-xs);
} }
#playlist-detail-tracklist .track-list-header .duration-header { #playlist-detail-tracklist .track-list-header .duration-header,
#mix-detail-tracklist .track-list-header .duration-header {
justify-self: flex-end; justify-self: flex-end;
} }
@ -5653,22 +5715,27 @@ img[src=''] {
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
} }
#fullscreen-cover-overlay.is-video-mode .fullscreen-cover-content {
align-items: stretch;
}
#fullscreen-cover-overlay.is-video-mode .fullscreen-main-view { #fullscreen-cover-overlay.is-video-mode .fullscreen-main-view {
justify-content: flex-end; justify-content: flex-end;
align-items: flex-start; align-items: center;
padding: 2rem 2rem 6rem; width: 100%;
padding: 2rem 2rem max(1.5rem, env(safe-area-inset-bottom));
pointer-events: none; pointer-events: none;
background: linear-gradient(to top, rgb(0, 0, 0, 0.6) 0%, rgb(0, 0, 0, 0.2) 15%, transparent 40%); background: linear-gradient(to top, rgb(0, 0, 0, 0.6) 0%, rgb(0, 0, 0, 0.2) 15%, transparent 40%);
} }
#fullscreen-cover-overlay.is-video-mode .fullscreen-track-info { #fullscreen-cover-overlay.is-video-mode .fullscreen-track-info {
text-align: left; text-align: center;
background: none !important; background: none !important;
backdrop-filter: none !important; backdrop-filter: none !important;
border: none !important; border: none !important;
box-shadow: none !important; box-shadow: none !important;
padding: 0 !important; padding: 0 !important;
max-width: 40%; max-width: min(500px, 90vw);
margin: 0; margin: 0;
pointer-events: auto; pointer-events: auto;
} }
@ -5687,12 +5754,13 @@ img[src=''] {
} }
#fullscreen-cover-overlay.is-video-mode .fullscreen-controls { #fullscreen-cover-overlay.is-video-mode .fullscreen-controls {
position: absolute; position: relative;
bottom: 1.5rem; bottom: auto;
left: 2rem; left: auto;
right: 2rem; right: auto;
width: 100%;
max-width: 500px; max-width: 500px;
margin: 0 auto; margin: 0.75rem auto 0;
background: transparent; background: transparent;
backdrop-filter: none; backdrop-filter: none;
padding: 0.6rem 1rem; padding: 0.6rem 1rem;
@ -5885,6 +5953,189 @@ img[src=''] {
max-width: 500px; max-width: 500px;
} }
.email-auth-modal-content {
padding: 1.5rem;
}
.email-auth-modal-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.25rem;
}
.email-auth-modal-header h3 {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
}
.email-auth-modal-close {
flex-shrink: 0;
}
.email-auth-input {
width: 100%;
margin-bottom: 0.65rem;
}
.email-auth-password-block {
margin-bottom: 0.65rem;
}
.email-auth-password-block .email-auth-input {
margin-bottom: 0;
}
.email-auth-actions {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 1.25rem;
}
.email-auth-actions .email-auth-submit {
width: 100%;
min-height: 2.75rem;
padding: 0.75rem 1.5rem;
border-radius: var(--radius-md);
font-size: 0.95rem;
font-weight: 600;
box-sizing: border-box;
}
.email-auth-actions .btn-primary.email-auth-submit {
border: 1px solid var(--primary);
}
.email-auth-actions .btn-secondary.email-auth-submit {
border: 1px solid var(--border);
background-color: var(--secondary);
color: var(--foreground);
}
.email-auth-forgot-link {
display: block;
width: fit-content;
max-width: 100%;
margin-top: 0.35rem;
margin-left: 0;
padding: 0;
background: none;
border: none;
color: var(--muted-foreground);
font-size: 0.8125rem;
text-align: left;
text-decoration: underline;
cursor: pointer;
}
.email-auth-forgot-link:hover {
color: var(--foreground);
}
#page-library .library-header {
margin-bottom: var(--spacing-xl);
}
#page-library .library-header h2 {
margin: 0;
}
#page-library #my-playlists-container {
margin-bottom: var(--spacing-lg);
}
#page-library #my-playlists-container .library-create-dashed-card {
order: 1;
}
#page-library .library-create-dashed-card {
display: block;
width: 100%;
min-width: 0;
padding: var(--spacing-md);
margin: 0;
text-align: left;
font: inherit;
color: inherit;
cursor: pointer;
border: 1px solid transparent;
background-color: var(--card);
-webkit-tap-highlight-color: transparent;
}
#page-library .library-create-dashed-art {
position: relative;
margin-bottom: var(--spacing-md);
border-radius: var(--radius);
overflow: hidden;
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
border: 2px dashed var(--border);
background: var(--secondary);
box-shadow: var(--shadow-md);
transition:
border-color var(--transition-fast),
box-shadow var(--transition-normal);
}
#page-library .library-create-dashed-card:hover .library-create-dashed-art {
border-color: var(--highlight);
box-shadow: var(--shadow-xl);
}
#page-library .library-create-dashed-card .card-info {
padding: 0;
}
#page-library .library-create-dashed-card .card-title {
margin-bottom: 0;
}
.library-liked-tracks-toolbar {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-md);
}
.library-liked-search.track-list-search-container {
width: 100%;
}
.library-liked-tracks-toolbar-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.library-liked-tracks-toolbar-actions .btn-secondary {
display: flex;
}
.library-liked-view-btn.active {
color: var(--highlight);
background: rgb(var(--highlight-rgb) / 0.12);
}
@media (min-width: 720px) {
.library-liked-tracks-toolbar {
flex-direction: row;
align-items: center;
}
.library-liked-search.track-list-search-container {
flex: 1;
min-width: 200px;
max-width: 420px;
}
}
.modal-list { .modal-list {
margin: 1rem 0; margin: 1rem 0;
max-height: 200px; max-height: 200px;
@ -6376,7 +6627,7 @@ img[src=''] {
flex-wrap: wrap; flex-wrap: wrap;
} }
#page-library .library-header button { #page-library .library-create-dashed-card {
margin: 0 !important; margin: 0 !important;
} }
@ -6570,6 +6821,10 @@ img[src=''] {
padding: var(--spacing-sm); padding: var(--spacing-sm);
} }
.track-item.track-item--inline-like {
grid-template-columns: 36px minmax(0, 1fr) auto minmax(2.5rem, auto) auto;
}
.track-item-info { .track-item-info {
gap: var(--spacing-sm); gap: var(--spacing-sm);
min-width: 0; min-width: 0;
@ -6775,11 +7030,8 @@ img[src=''] {
margin-bottom: var(--spacing-sm); margin-bottom: var(--spacing-sm);
} }
#page-library .library-header button { #page-library .library-create-dashed-card {
margin: 0 !important; margin: 0 !important;
flex: 1;
min-width: auto;
white-space: nowrap;
} }
.detail-header-info .title { .detail-header-info .title {
@ -6840,6 +7092,10 @@ img[src=''] {
padding: var(--spacing-xs); padding: var(--spacing-xs);
} }
.track-item.track-item--inline-like {
grid-template-columns: 32px minmax(0, 1fr) auto minmax(2.25rem, auto) auto;
}
.track-number { .track-number {
width: 32px; width: 32px;
} }
@ -7006,6 +7262,10 @@ img[src=''] {
grid-template-columns: 32px 1fr 32px auto; grid-template-columns: 32px 1fr 32px auto;
} }
.track-item.track-item--inline-like {
grid-template-columns: 32px minmax(0, 1fr) auto minmax(2.25rem, auto) auto;
}
.player-controls .buttons button { .player-controls .buttons button {
min-height: 36px; min-height: 36px;
min-width: 36px; min-width: 36px;