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

fix(ui): video library cards, fullscreen layout, and search UX

Browse source 
Made-with: Cursor
This commit is contained in:
Thiago Vinícius 2026-03-27 16:26:21 -03:00
parent 61611720a8
commit 520c778f84
6 changed files with 3772 additions and 4395 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7601
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';
});
}
});

29
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,29 @@ 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.className = 'card-grid';
tempDiv.innerHTML = ui.createTrackCardHTML(item);
} else {
tracksContainer.className = '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);
ui.updateLikeState(newEl, item.type === 'video' ? 'video' : '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 +2157,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/');

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) {

222
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,7 +733,11 @@ export class UIRenderer {
const duration = formatTime(video.duration);
const artistName = getTrackArtists(video);
const videoCoverUrl = this.api.getVideoCoverUrl(video.imageId);
const videoCoverCandidate = video.imageId || video.image || video.cover || null;
const videoCoverUrl =
videoCoverCandidate && (typeof videoCoverCandidate === 'string' || typeof videoCoverCandidate === 'number')
? this.api.getVideoCoverUrl(videoCoverCandidate)
: null;
const cover = video.image || video.cover;
let imageHTML;
@ -870,7 +903,51 @@ 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);
}
renderListWithTracks(
container,
tracks,
showCover,
append = false,
useTrackNumber = false,
inlineLike = false
) {
const fragment = document.createDocumentFragment();
const tempDiv = document.createElement('div');
@ -878,7 +955,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 +1103,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');
@ -1711,14 +1795,39 @@ 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.className = '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.className = '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.className = 'track-list';
tracksContainer.innerHTML = createPlaceholder('No liked tracks yet.');
}
@ -1733,6 +1842,7 @@ export class UIRenderer {
trackDataStore.set(el, video);
this.updateLikeState(el, 'video', video.id);
el.addEventListener('click', (e) => {
if (e.target.closest('.like-btn')) return;
if (e.target.closest('.card-play-btn') || e.target.closest('.card-image-container')) {
e.stopPropagation();
this.player.playVideo(video);
@ -1826,22 +1936,25 @@ 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(
'afterbegin',
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 = '';
}
} else if (folders.length === 0) {
myPlaylistsContainer.insertAdjacentHTML(
'afterbegin',
createPlaceholder('No playlists yet. Create your first playlist!')
);
}
}
@ -2268,7 +2381,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 +2456,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 +2472,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 +2968,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 +2983,9 @@ 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')) return;
if (e.target.closest('.card-play-btn') || e.target.closest('.card-image-container')) {
e.stopPropagation();
this.player.playVideo(video);
@ -3318,7 +3434,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 +3459,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 +3538,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 +3628,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 +3772,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 +3896,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 +4007,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 = () => {

282
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: var(--highlight);
}
.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,185 @@ 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 .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 +6623,7 @@ img[src=''] {
flex-wrap: wrap;
}
#page-library .library-header button {
#page-library .library-create-dashed-card {
margin: 0 !important;
}
@ -6775,11 +7022,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 {