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
with:
fetch-depth: 1
ref: ${{ github.head_ref || github.ref }}
- name: Setup Bun
uses: oven-sh/setup-bun@v1
@ -55,7 +56,6 @@ jobs:
commit_message: 'style: auto-fix linting issues'
commit_user_name: 'github-actions[bot]'
commit_user_email: 'github-actions[bot]@users.noreply.github.com'
only_if_changed: true
- name: Run HTML Lint
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');
const modal = document.getElementById('playlist-modal');
document.getElementById('playlist-modal-title').textContent = 'Create Playlist';
@ -1434,7 +1434,7 @@ document.addEventListener('DOMContentLoaded', async () => {
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');
const modal = document.getElementById('folder-modal');
document.getElementById('folder-name-input').value = '';
@ -1463,6 +1463,19 @@ document.addEventListener('DOMContentLoaded', async () => {
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')) {
const folderId = window.location.pathname.split('/')[2];
if (folderId && confirm('Are you sure you want to delete this folder?')) {
@ -2926,7 +2939,7 @@ document.addEventListener('DOMContentLoaded', async () => {
}
}
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
if (window.location.hash === '#library') {
if (window.location.pathname.split('/').filter(Boolean)[0] === 'library') {
const itemSelector =
type === 'track'
? `.track-item[data-track-id="${id}"]`
? `.track-item[data-track-id="${id}"], .card[data-track-id="${id}"]`
: type === 'video'
? `.video-card[data-video-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');
if (placeholder) placeholder.remove();
const index = tracksContainer.children.length;
const trackHTML = ui.createTrackItemHTML(item, index, true, false);
const layout = localStorage.getItem('libraryLikedTracksView') || 'list';
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;
if (newEl) {
tracksContainer.appendChild(newEl);
trackDataStore.set(newEl, item);
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') {
@ -2145,7 +2159,8 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
trackItem &&
!trackItem.dataset.queueIndex &&
!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 isSearch = window.location.pathname.startsWith('/search/');
@ -2234,6 +2249,34 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
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;
if (href) {
// 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
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 emailInput = document.getElementById('auth-email');
const passwordInput = document.getElementById('auth-password');
@ -77,14 +77,10 @@ export async function initializeSettings(scrobbler, player, api, ui) {
});
}
if (cancelEmailBtn && authModal) {
cancelEmailBtn.addEventListener('click', () => {
authModal.classList.remove('active');
});
authModal.querySelector('.modal-overlay').addEventListener('click', () => {
authModal.classList.remove('active');
});
if (authModal) {
const closeAuthModal = () => authModal.classList.remove('active');
authModalCloseBtn?.addEventListener('click', closeAuthModal);
authModal.querySelector('.modal-overlay')?.addEventListener('click', closeAuthModal);
}
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 {
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 isBlocked = contentBlockingSettings?.shouldHideTrack(track);
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'}"`
: '';
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 = [
'track-item',
isVideo ? 'video-track-item' : '',
isCurrentTrack ? 'playing' : '',
isUnavailable ? 'unavailable' : '',
isBlocked ? 'blocked' : '',
showRowLike ? 'track-item--inline-like' : '',
]
.filter(Boolean)
.join(' ');
@ -470,6 +498,7 @@ export class UIRenderer {
<div class="artist">${getTrackArtistsHTML(track)}${yearDisplay}</div>
</div>
</div>
${inlineLikeHTML}
<div class="track-item-duration">${isUnavailable || isBlocked ? '--:--' : track.duration ? formatTime(track.duration) : '--:--'}</div>
<div class="track-item-actions">
${actionsHTML}
@ -704,14 +733,23 @@ export class UIRenderer {
const duration = formatTime(video.duration);
const artistName = getTrackArtists(video);
const videoCoverUrl = this.api.getVideoCoverUrl(video.imageId);
const cover = video.image || video.cover;
const videoCoverCandidate = video.imageId || video.image || video.cover || null;
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;
if (videoCoverUrl) {
imageHTML = `<img src="${videoCoverUrl}" alt="${escapeHtml(video.title)}" class="card-image" loading="lazy">`;
} else if (cover) {
imageHTML = this.getCoverHTML(cover, escapeHtml(video.title));
} else if (coverPrimitive) {
imageHTML = this.getCoverHTML(coverPrimitive, 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_PLAY(48, { style: 'opacity: 0.7;' })}</div>`;
}
@ -810,18 +848,20 @@ export class UIRenderer {
const oldListener = clearBtn._clearListener;
if (oldListener) clearBtn.removeEventListener('click', oldListener);
// Toggle visibility based on input value
const oldToggle = inputElement._searchClearToggleListener;
if (oldToggle) inputElement.removeEventListener('input', oldToggle);
const toggleVisibility = () => {
clearBtn.style.display = inputElement.value.trim() ? 'flex' : 'none';
};
// Clear input on click
const clearListener = () => {
inputElement.value = '';
inputElement.dispatchEvent(new Event('input'));
inputElement.focus();
};
inputElement._searchClearToggleListener = toggleVisibility;
inputElement.addEventListener('input', toggleVisibility);
clearBtn._clearListener = clearListener;
clearBtn.addEventListener('click', clearListener);
@ -870,7 +910,52 @@ export class UIRenderer {
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 tempDiv = document.createElement('div');
@ -878,7 +963,9 @@ export class UIRenderer {
const hasMultipleDiscs = tracks.some((t) => (t.volumeNumber || t.discNumber || 1) > 1);
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('');
// Bind data to elements immediately using index, avoiding selector ambiguity
@ -1024,6 +1111,11 @@ export class UIRenderer {
sidePanelManager.close();
}
const fsLikeBtn = document.getElementById('fs-like-btn');
if (fsLikeBtn) {
this.updateLikeState(fsLikeBtn.parentElement, 'video', track.id);
}
if (videoContainer) {
videoContainer.style.display = 'flex';
const videoPlayer = document.getElementById('video-player');
@ -1633,6 +1725,7 @@ export class UIRenderer {
}
showPage(pageId) {
const previousPage = this.currentPage;
this.currentPage = pageId;
document.querySelectorAll('.page').forEach((page) => {
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
if (pageId !== 'artist') {
@ -1711,14 +1807,42 @@ export class UIRenderer {
const likedTracks = await db.getFavorites('track');
const shuffleBtn = document.getElementById('shuffle-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 (likedToolbar) likedToolbar.style.display = 'flex';
if (shuffleBtn) shuffleBtn.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 {
if (likedToolbar) likedToolbar.style.display = 'none';
if (shuffleBtn) shuffleBtn.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.');
}
@ -1733,6 +1857,10 @@ export class UIRenderer {
trackDataStore.set(el, video);
this.updateLikeState(el, 'video', video.id);
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')) {
e.stopPropagation();
this.player.playVideo(video);
@ -1826,22 +1954,20 @@ export class UIRenderer {
const visiblePlaylists = myPlaylists.filter((p) => !playlistsInFolders.has(p.id));
if (myPlaylistsContainer) {
myPlaylistsContainer.querySelectorAll('.user-playlist').forEach((el) => el.remove());
myPlaylistsContainer.querySelectorAll('.placeholder-text').forEach((el) => el.remove());
if (visiblePlaylists.length) {
myPlaylistsContainer.innerHTML = visiblePlaylists
.map((p) => this.createUserPlaylistCardHTML(p))
.join('');
myPlaylistsContainer.insertAdjacentHTML(
'beforeend',
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!');
} else {
myPlaylistsContainer.innerHTML = '';
}
}
}
@ -2268,7 +2394,7 @@ export class UIRenderer {
this.lastRecommendedTracks = filteredTracks;
if (filteredTracks.length > 0) {
this.renderListWithTracks(songsContainer, filteredTracks, true);
this.renderListWithTracks(songsContainer, filteredTracks, true, false, false, true);
} else {
songsContainer.innerHTML = createPlaceholder('No song recommendations found.');
}
@ -2343,6 +2469,7 @@ export class UIRenderer {
const explicitBadge = hasExplicitContent(track) ? this.createExplicitBadge() : '';
const qualityBadge = createQualityBadgeHTML(track);
const isCompact = cardSettings.isCompactAlbum();
const likeType = track.type === 'video' ? 'video' : 'track';
return this.createBaseCardHTML({
type: 'track',
@ -2358,7 +2485,7 @@ export class UIRenderer {
track.videoUrl || track.album?.videoCoverUrl
),
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)}
</button>
`,
@ -2854,7 +2981,7 @@ export class UIRenderer {
trackSearch(query, totalResults);
if (finalTracks.length) {
this.renderListWithTracks(tracksContainer, finalTracks, true);
this.renderListWithTracks(tracksContainer, finalTracks, true, false, false, true);
} else {
tracksContainer.innerHTML = createPlaceholder('No tracks found.');
}
@ -2869,7 +2996,12 @@ export class UIRenderer {
const el = videosContainer.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('.like-btn')) {
e.stopPropagation();
return;
}
if (e.target.closest('.card-play-btn') || e.target.closest('.card-image-container')) {
e.stopPropagation();
this.player.playVideo(video);
@ -3318,7 +3450,7 @@ export class UIRenderer {
recommendedTracks = contentBlockingSettings.filterTracks(recommendedTracks);
if (recommendedTracks.length > 0) {
this.renderListWithTracks(recommendedContainer, recommendedTracks, true);
this.renderListWithTracks(recommendedContainer, recommendedTracks, true, false, false, true);
const trackItems = recommendedContainer.querySelectorAll('.track-item');
trackItems.forEach((item) => {
@ -3343,14 +3475,15 @@ export class UIRenderer {
const tracklistContainer = document.getElementById('playlist-detail-tracklist');
if (tracklistContainer && updatedPlaylist.tracks) {
tracklistContainer.innerHTML = `
<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, updatedPlaylist.tracks, true);
tracklistContainer.innerHTML = TRACKLIST_HEADER_WITH_LIKE_COL_HTML;
this.renderListWithTracks(
tracklistContainer,
updatedPlaylist.tracks,
true,
true,
false,
true
);
if (document.querySelector('.remove-from-playlist-btn')) {
this.enableTrackReordering(
@ -3421,15 +3554,7 @@ export class UIRenderer {
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>';
descEl.innerHTML = '<div class="skeleton" style="height: 16px; width: 100%;"></div>';
tracklistContainer.innerHTML = `
<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)}
`;
tracklistContainer.innerHTML = `${TRACKLIST_HEADER_WITH_LIKE_COL_HTML}${this.createSkeletonTracks(10, true)}`;
try {
// Check if it's a user playlist (UUID format)
@ -3519,15 +3644,8 @@ export class UIRenderer {
const renderTracks = () => {
// Re-fetch container each time because enableTrackReordering clones it
const container = document.getElementById('playlist-detail-tracklist');
container.innerHTML = `
<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(container, currentTracks, true, true);
container.innerHTML = TRACKLIST_HEADER_WITH_LIKE_COL_HTML;
this.renderListWithTracks(container, currentTracks, true, true, false, true);
// Add remove buttons and enable reordering ONLY IF OWNED
if (ownedPlaylist) {
@ -3670,15 +3788,8 @@ export class UIRenderer {
let currentTracks = sortTracks(originalTracks, currentSort);
const renderTracks = () => {
tracklistContainer.innerHTML = `
<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, currentTracks, true, true);
tracklistContainer.innerHTML = TRACKLIST_HEADER_WITH_LIKE_COL_HTML;
this.renderListWithTracks(tracklistContainer, currentTracks, true, true, false, true);
};
const applySort = (sortType) => {
@ -3801,15 +3912,7 @@ export class UIRenderer {
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>';
descEl.innerHTML = '<div class="skeleton" style="height: 16px; width: 100%;"></div>';
tracklistContainer.innerHTML = `
<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)}
`;
tracklistContainer.innerHTML = `${TRACKLIST_HEADER_WITH_LIKE_COL_HTML}${this.createSkeletonTracks(10, true)}`;
try {
const { mix, tracks } = await this.api.getMix(mixId, provider);
@ -3920,16 +4023,9 @@ export class UIRenderer {
metaEl.textContent = `${tracks.length} tracks • ${formatDuration(totalDuration)}`;
descEl.innerHTML = `${mix.subTitle}`;
tracklistContainer.innerHTML = `
<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>
`;
tracklistContainer.innerHTML = TRACKLIST_HEADER_WITH_LIKE_COL_HTML;
this.renderListWithTracks(tracklistContainer, tracks, true, true);
this.renderListWithTracks(tracklistContainer, tracks, true, true, false, true);
// Set play button action
playBtn.onclick = () => {

298
styles.css
View file

@ -1264,12 +1264,38 @@ ul {
.main-header {
display: flex;
justify-content: center;
justify-content: flex-start;
align-items: center;
margin-bottom: var(--spacing-xl);
gap: var(--spacing-md);
position: relative;
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 {
@ -1326,7 +1352,7 @@ ul {
}
.search-bar {
width: 80%;
width: auto;
max-width: 100%;
min-width: 0;
flex: 1;
@ -2362,6 +2388,40 @@ body.multi-select-mode .track-item:hover {
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 {
color: var(--muted-foreground);
justify-self: flex-end;
@ -5171,9 +5231,10 @@ input:checked + .slider::before {
gap: 2px;
}
#playlist-detail-tracklist .track-list-header {
#playlist-detail-tracklist .track-list-header,
#mix-detail-tracklist .track-list-header {
display: grid;
grid-template-columns: 40px 1fr 80px auto;
grid-template-columns: 40px 1fr 3.25rem 80px auto;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-sm);
@ -5183,7 +5244,8 @@ input:checked + .slider::before {
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;
}
@ -5653,22 +5715,27 @@ img[src=''] {
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 {
justify-content: flex-end;
align-items: flex-start;
padding: 2rem 2rem 6rem;
align-items: center;
width: 100%;
padding: 2rem 2rem max(1.5rem, env(safe-area-inset-bottom));
pointer-events: none;
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 {
text-align: left;
text-align: center;
background: none !important;
backdrop-filter: none !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
max-width: 40%;
max-width: min(500px, 90vw);
margin: 0;
pointer-events: auto;
}
@ -5687,12 +5754,13 @@ img[src=''] {
}
#fullscreen-cover-overlay.is-video-mode .fullscreen-controls {
position: absolute;
bottom: 1.5rem;
left: 2rem;
right: 2rem;
position: relative;
bottom: auto;
left: auto;
right: auto;
width: 100%;
max-width: 500px;
margin: 0 auto;
margin: 0.75rem auto 0;
background: transparent;
backdrop-filter: none;
padding: 0.6rem 1rem;
@ -5885,6 +5953,189 @@ img[src=''] {
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 {
margin: 1rem 0;
max-height: 200px;
@ -6376,7 +6627,7 @@ img[src=''] {
flex-wrap: wrap;
}
#page-library .library-header button {
#page-library .library-create-dashed-card {
margin: 0 !important;
}
@ -6570,6 +6821,10 @@ img[src=''] {
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 {
gap: var(--spacing-sm);
min-width: 0;
@ -6775,11 +7030,8 @@ img[src=''] {
margin-bottom: var(--spacing-sm);
}
#page-library .library-header button {
#page-library .library-create-dashed-card {
margin: 0 !important;
flex: 1;
min-width: auto;
white-space: nowrap;
}
.detail-header-info .title {
@ -6840,6 +7092,10 @@ img[src=''] {
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 {
width: 32px;
}
@ -7006,6 +7262,10 @@ img[src=''] {
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 {
min-height: 36px;
min-width: 36px;