cc
This commit is contained in:
Eduard Prigoana
parent
30d843db3b
commit
23fe06fdf2
6 changed files with 1556 additions and 1406 deletions
45
js/app.js
45
js/app.js
|
|
@ -1,4 +1,3 @@
|
|||
//js/app.js
|
||||
import { LosslessAPI } from './api.js';
|
||||
import { apiSettings } from './storage.js';
|
||||
import { UIRenderer } from './ui.js';
|
||||
|
|
@ -6,7 +5,7 @@ import { Player } from './player.js';
|
|||
import {
|
||||
QUALITY, REPEAT_MODE, SVG_PLAY, SVG_PAUSE,
|
||||
SVG_VOLUME, SVG_MUTE, formatTime, trackDataStore,
|
||||
buildTrackFilename, RATE_LIMIT_ERROR_MESSAGE
|
||||
buildTrackFilename, RATE_LIMIT_ERROR_MESSAGE, debounce
|
||||
} from './utils.js';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
|
|
@ -95,7 +94,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
<div class="track-item ${isPlaying ? 'playing' : ''}" data-queue-index="${index}">
|
||||
<div class="track-number">${index + 1}</div>
|
||||
<div class="track-item-info">
|
||||
<img src="${api.getCoverUrl(track.album?.cover, '40')}"
|
||||
<img src="${api.getCoverUrl(track.album?.cover, '80')}"
|
||||
class="track-item-cover" loading="lazy">
|
||||
<div class="track-item-details">
|
||||
<div class="title">${track.title}</div>
|
||||
|
|
@ -160,12 +159,12 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
try {
|
||||
const tempEl = document.createElement('div');
|
||||
tempEl.textContent = `Downloading: ${contextTrack.title}...`;
|
||||
tempEl.style.cssText = 'position:fixed;bottom:20px;right:20px;background:var(--card);padding:1rem;border-radius:var(--radius);border:1px solid var(--border);z-index:9999;';
|
||||
tempEl.style.cssText = 'position:fixed;bottom:100px;right:20px;background:var(--card);padding:1rem 1.5rem;border-radius:var(--radius);border:1px solid var(--border);z-index:9999;box-shadow:0 4px 12px rgba(0,0,0,0.5);';
|
||||
document.body.appendChild(tempEl);
|
||||
|
||||
await api.downloadTrack(contextTrack.id, QUALITY, filename);
|
||||
|
||||
tempEl.textContent = `Downloaded: ${contextTrack.title}`;
|
||||
tempEl.textContent = `✓ Downloaded: ${contextTrack.title}`;
|
||||
setTimeout(() => tempEl.remove(), 3000);
|
||||
} catch (error) {
|
||||
const errorMsg = error.message === RATE_LIMIT_ERROR_MESSAGE
|
||||
|
|
@ -178,6 +177,19 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
contextMenu.style.display = 'none';
|
||||
});
|
||||
|
||||
const performSearch = debounce((query) => {
|
||||
if (query) {
|
||||
window.location.hash = `#search/${encodeURIComponent(query)}`;
|
||||
}
|
||||
}, 300);
|
||||
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
const query = e.target.value.trim();
|
||||
if (query.length > 2) {
|
||||
performSearch(query);
|
||||
}
|
||||
});
|
||||
|
||||
searchForm.addEventListener('submit', e => {
|
||||
e.preventDefault();
|
||||
const query = searchInput.value.trim();
|
||||
|
|
@ -219,18 +231,41 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
playPauseBtn.innerHTML = SVG_PLAY;
|
||||
});
|
||||
|
||||
let isSeeking = false;
|
||||
let wasPlaying = false;
|
||||
|
||||
const seek = (bar, fill, event, setter) => {
|
||||
const rect = bar.getBoundingClientRect();
|
||||
const position = Math.max(0, Math.min(1, (event.clientX - rect.left) / rect.width));
|
||||
setter(position);
|
||||
};
|
||||
|
||||
progressBar.addEventListener('mousedown', () => {
|
||||
isSeeking = true;
|
||||
wasPlaying = !audioPlayer.paused;
|
||||
if (wasPlaying) audioPlayer.pause();
|
||||
});
|
||||
|
||||
document.addEventListener('mouseup', (e) => {
|
||||
if (isSeeking) {
|
||||
seek(progressBar, progressFill, e, position => {
|
||||
if (!isNaN(audioPlayer.duration)) {
|
||||
audioPlayer.currentTime = position * audioPlayer.duration;
|
||||
if (wasPlaying) audioPlayer.play();
|
||||
}
|
||||
});
|
||||
isSeeking = false;
|
||||
}
|
||||
});
|
||||
|
||||
progressBar.addEventListener('click', e => {
|
||||
if (!isSeeking) {
|
||||
seek(progressBar, progressFill, e, position => {
|
||||
if (!isNaN(audioPlayer.duration)) {
|
||||
audioPlayer.currentTime = position * audioPlayer.duration;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
volumeBar.addEventListener('click', e => {
|
||||
|
|
|
|||
70
js/player.js
70
js/player.js
|
|
@ -1,4 +1,3 @@
|
|||
//js/player.js
|
||||
import { REPEAT_MODE, SVG_PLAY, SVG_PAUSE, formatTime } from './utils.js';
|
||||
|
||||
export class Player {
|
||||
|
|
@ -12,12 +11,61 @@ export class Player {
|
|||
this.currentQueueIndex = -1;
|
||||
this.shuffleActive = false;
|
||||
this.repeatMode = REPEAT_MODE.OFF;
|
||||
this.preloadCache = new Map();
|
||||
this.preloadAbortController = null;
|
||||
}
|
||||
|
||||
setQuality(quality) {
|
||||
this.quality = quality;
|
||||
}
|
||||
|
||||
async preloadNextTracks() {
|
||||
if (this.preloadAbortController) {
|
||||
this.preloadAbortController.abort();
|
||||
}
|
||||
|
||||
this.preloadAbortController = new AbortController();
|
||||
const currentQueue = this.shuffleActive ? this.shuffledQueue : this.queue;
|
||||
const tracksToPreload = [];
|
||||
|
||||
for (let i = 1; i <= 2; i++) {
|
||||
const nextIndex = this.currentQueueIndex + i;
|
||||
if (nextIndex < currentQueue.length) {
|
||||
tracksToPreload.push({ track: currentQueue[nextIndex], index: nextIndex });
|
||||
}
|
||||
}
|
||||
|
||||
for (const { track, index } of tracksToPreload) {
|
||||
if (this.preloadCache.has(track.id)) continue;
|
||||
|
||||
try {
|
||||
const streamUrl = await this.api.getStreamUrl(track.id, this.quality);
|
||||
|
||||
if (this.preloadAbortController.signal.aborted) break;
|
||||
|
||||
fetch(streamUrl, {
|
||||
signal: this.preloadAbortController.signal,
|
||||
method: 'GET',
|
||||
mode: 'cors',
|
||||
cache: 'default'
|
||||
}).then(response => {
|
||||
if (response.ok) {
|
||||
this.preloadCache.set(track.id, streamUrl);
|
||||
}
|
||||
}).catch(err => {
|
||||
if (err.name !== 'AbortError') {
|
||||
console.debug('Preload failed for:', track.title);
|
||||
}
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
if (error.name !== 'AbortError') {
|
||||
console.debug('Failed to get stream URL for preload:', track.title);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async playTrackFromQueue() {
|
||||
const currentQueue = this.shuffleActive ? this.shuffledQueue : this.queue;
|
||||
if (this.currentQueueIndex < 0 || this.currentQueueIndex >= currentQueue.length) {
|
||||
|
|
@ -27,7 +75,7 @@ export class Player {
|
|||
const track = currentQueue[this.currentQueueIndex];
|
||||
|
||||
document.querySelector('.now-playing-bar .cover').src =
|
||||
this.api.getCoverUrl(track.album?.cover, '1280');
|
||||
this.api.getCoverUrl(track.album?.cover, '160');
|
||||
document.querySelector('.now-playing-bar .title').textContent = track.title;
|
||||
document.querySelector('.now-playing-bar .artist').textContent = track.artist?.name || 'Unknown Artist';
|
||||
document.title = `${track.title} • ${track.artist?.name || 'Unknown'}`;
|
||||
|
|
@ -36,9 +84,19 @@ export class Player {
|
|||
this.updateMediaSession(track);
|
||||
|
||||
try {
|
||||
const streamUrl = await this.api.getStreamUrl(track.id, this.quality);
|
||||
let streamUrl;
|
||||
|
||||
if (this.preloadCache.has(track.id)) {
|
||||
streamUrl = this.preloadCache.get(track.id);
|
||||
} else {
|
||||
streamUrl = await this.api.getStreamUrl(track.id, this.quality);
|
||||
}
|
||||
|
||||
this.audio.src = streamUrl;
|
||||
await this.audio.play();
|
||||
|
||||
this.preloadNextTracks();
|
||||
|
||||
} catch (error) {
|
||||
console.error(`Could not get track URL for: ${track.title}`, error);
|
||||
document.querySelector('.now-playing-bar .title').textContent = `Error: ${track.title}`;
|
||||
|
|
@ -111,6 +169,9 @@ export class Player {
|
|||
this.queue = [...this.originalQueueBeforeShuffle];
|
||||
this.currentQueueIndex = this.queue.findIndex(t => t.id === currentTrack?.id);
|
||||
}
|
||||
|
||||
this.preloadCache.clear();
|
||||
this.preloadNextTracks();
|
||||
}
|
||||
|
||||
toggleRepeat() {
|
||||
|
|
@ -122,6 +183,7 @@ export class Player {
|
|||
this.queue = tracks;
|
||||
this.currentQueueIndex = startIndex;
|
||||
this.shuffleActive = false;
|
||||
this.preloadCache.clear();
|
||||
}
|
||||
|
||||
addToQueue(track) {
|
||||
|
|
@ -145,7 +207,7 @@ updateMediaSession(track) {
|
|||
if (!('mediaSession' in navigator)) return;
|
||||
|
||||
const artwork = [];
|
||||
const sizes = ['1280'];
|
||||
const sizes = ['96', '128', '192', '256', '384', '512'];
|
||||
|
||||
const coverId = track.album?.cover;
|
||||
|
||||
|
|
|
|||
|
|
@ -3,12 +3,12 @@ export const apiSettings = {
|
|||
STORAGE_KEY: 'monochrome-api-instances',
|
||||
defaultInstances: [
|
||||
'https://hifi.prigoana.com',
|
||||
'https://tidal.401658.xyz',
|
||||
'https://hund.qqdl.site',
|
||||
'https://katze.qqdl.site',
|
||||
'https://maus.qqdl.site',
|
||||
'https://vogel.qqdl.site',
|
||||
'https://wolf.qqdl.site'
|
||||
'https://wolf.qqdl.site',
|
||||
'https://tidal.401658.xyz'
|
||||
],
|
||||
|
||||
getInstances() {
|
||||
|
|
|
|||
63
js/ui.js
63
js/ui.js
|
|
@ -1,4 +1,4 @@
|
|||
import { formatTime, createPlaceholder, trackDataStore } from './utils.js';
|
||||
import { formatTime, createPlaceholder, trackDataStore, hasExplicitContent } from './utils.js';
|
||||
import { recentActivityManager } from './storage.js';
|
||||
|
||||
export class UIRenderer {
|
||||
|
|
@ -6,17 +6,25 @@ export class UIRenderer {
|
|||
this.api = api;
|
||||
}
|
||||
|
||||
createExplicitBadge() {
|
||||
return '<span class="explicit-badge" title="Explicit">E</span>';
|
||||
}
|
||||
|
||||
createTrackItemHTML(track, index, showCover = false) {
|
||||
const playIconSmall = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>';
|
||||
const trackNumberHTML = `<div class="track-number" style="font-size: 1.1em; display: flex; align-items: center; justify-content: center;">${showCover ? playIconSmall : index + 1}</div>`;
|
||||
const trackNumberHTML = `<div class="track-number">${showCover ? playIconSmall : index + 1}</div>`;
|
||||
const explicitBadge = hasExplicitContent(track) ? this.createExplicitBadge() : '';
|
||||
|
||||
return `
|
||||
<div class="track-item" data-track-id="${track.id}">
|
||||
${trackNumberHTML}
|
||||
<div class="track-item-info">
|
||||
${showCover ? `<img src="${this.api.getCoverUrl(track.album?.cover, '1280')}" alt="Track Cover" class="track-item-cover" loading="lazy">` : ''}
|
||||
${showCover ? `<img src="${this.api.getCoverUrl(track.album?.cover, '80')}" alt="Track Cover" class="track-item-cover" loading="lazy">` : ''}
|
||||
<div class="track-item-details">
|
||||
<div class="title">${track.title}</div>
|
||||
<div class="title">
|
||||
${track.title}
|
||||
${explicitBadge}
|
||||
</div>
|
||||
<div class="artist">${track.artist?.name ?? 'Unknown Artist'}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -26,10 +34,13 @@ export class UIRenderer {
|
|||
}
|
||||
|
||||
createAlbumCardHTML(album) {
|
||||
const explicitBadge = hasExplicitContent(album) ? this.createExplicitBadge() : '';
|
||||
return `
|
||||
<a href="#album/${album.id}" class="card">
|
||||
<img src="${this.api.getCoverUrl(album.cover)}" alt="${album.title}" class="card-image" loading="lazy">
|
||||
<h3 class="card-title">${album.title}</h3>
|
||||
<div class="card-image-wrapper">
|
||||
<img src="${this.api.getCoverUrl(album.cover, '320')}" alt="${album.title}" class="card-image" loading="lazy">
|
||||
</div>
|
||||
<h3 class="card-title">${album.title} ${explicitBadge}</h3>
|
||||
<p class="card-subtitle">Album • ${album.artist?.name ?? ''}</p>
|
||||
</a>
|
||||
`;
|
||||
|
|
@ -38,7 +49,9 @@ export class UIRenderer {
|
|||
createArtistCardHTML(artist) {
|
||||
return `
|
||||
<a href="#artist/${artist.id}" class="card artist">
|
||||
<img src="${this.api.getArtistPictureUrl(artist.picture, '750')}" alt="${artist.name}" class="card-image" loading="lazy">
|
||||
<div class="card-image-wrapper">
|
||||
<img src="${this.api.getArtistPictureUrl(artist.picture, '320')}" alt="${artist.name}" class="card-image" loading="lazy">
|
||||
</div>
|
||||
<h3 class="card-title">${artist.name}</h3>
|
||||
<p class="card-subtitle">Artist</p>
|
||||
</a>
|
||||
|
|
@ -71,19 +84,6 @@ export class UIRenderer {
|
|||
`;
|
||||
}
|
||||
|
||||
createSkeletonDetailHeader(isArtist = false) {
|
||||
return `
|
||||
<div class="skeleton-detail-header">
|
||||
<div class="skeleton skeleton-detail-image ${isArtist ? 'artist' : ''}"></div>
|
||||
<div class="skeleton-detail-info">
|
||||
<div class="skeleton skeleton-detail-type"></div>
|
||||
<div class="skeleton skeleton-detail-title"></div>
|
||||
<div class="skeleton skeleton-detail-meta"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
createSkeletonTracks(count = 5, showCover = false) {
|
||||
return `<div class="skeleton-container">${Array(count).fill(0).map(() => this.createSkeletonTrack(showCover)).join('')}</div>`;
|
||||
}
|
||||
|
|
@ -93,10 +93,20 @@ export class UIRenderer {
|
|||
}
|
||||
|
||||
renderListWithTracks(container, tracks, showCover) {
|
||||
container.innerHTML = tracks.map((track, i) =>
|
||||
const fragment = document.createDocumentFragment();
|
||||
const tempDiv = document.createElement('div');
|
||||
|
||||
tempDiv.innerHTML = tracks.map((track, i) =>
|
||||
this.createTrackItemHTML(track, i, showCover)
|
||||
).join('');
|
||||
|
||||
while (tempDiv.firstChild) {
|
||||
fragment.appendChild(tempDiv.firstChild);
|
||||
}
|
||||
|
||||
container.innerHTML = '';
|
||||
container.appendChild(fragment);
|
||||
|
||||
tracks.forEach(track => {
|
||||
const element = container.querySelector(`[data-track-id="${track.id}"]`);
|
||||
if (element) trackDataStore.set(element, track);
|
||||
|
|
@ -156,7 +166,6 @@ export class UIRenderer {
|
|||
let finalAlbums = albumsResult.items;
|
||||
|
||||
if (finalArtists.length === 0 && finalTracks.length > 0) {
|
||||
console.log('Using fallback: extracting artists from tracks');
|
||||
const artistMap = new Map();
|
||||
finalTracks.forEach(track => {
|
||||
if (track.artist && !artistMap.has(track.artist.id)) {
|
||||
|
|
@ -174,7 +183,6 @@ export class UIRenderer {
|
|||
}
|
||||
|
||||
if (finalAlbums.length === 0 && finalTracks.length > 0) {
|
||||
console.log('Using fallback: extracting albums from tracks');
|
||||
const albumMap = new Map();
|
||||
finalTracks.forEach(track => {
|
||||
if (track.album && !albumMap.has(track.album.id)) {
|
||||
|
|
@ -231,9 +239,12 @@ export class UIRenderer {
|
|||
try {
|
||||
const { album, tracks } = await this.api.getAlbum(albumId);
|
||||
|
||||
imageEl.src = this.api.getCoverUrl(album.cover);
|
||||
imageEl.src = this.api.getCoverUrl(album.cover, '640');
|
||||
imageEl.style.backgroundColor = '';
|
||||
titleEl.textContent = album.title;
|
||||
|
||||
const explicitBadge = hasExplicitContent(album) ? this.createExplicitBadge() : '';
|
||||
titleEl.innerHTML = `${album.title} ${explicitBadge}`;
|
||||
|
||||
metaEl.innerHTML =
|
||||
`By <a href="#artist/${album.artist.id}">${album.artist.name}</a> • ${new Date(album.releaseDate).getFullYear()}`;
|
||||
|
||||
|
|
@ -274,7 +285,7 @@ export class UIRenderer {
|
|||
try {
|
||||
const artist = await this.api.getArtist(artistId);
|
||||
|
||||
imageEl.src = this.api.getArtistPictureUrl(artist.picture, '750');
|
||||
imageEl.src = this.api.getArtistPictureUrl(artist.picture, '640');
|
||||
imageEl.style.backgroundColor = '';
|
||||
nameEl.textContent = artist.name;
|
||||
metaEl.textContent = `${artist.popularity} popularity`;
|
||||
|
|
|
|||
17
js/utils.js
17
js/utils.js
|
|
@ -1,4 +1,3 @@
|
|||
//js/utils.js
|
||||
export const QUALITY = 'LOSSLESS';
|
||||
|
||||
export const REPEAT_MODE = {
|
||||
|
|
@ -140,3 +139,19 @@ export const deriveTrackQuality = (track) => {
|
|||
};
|
||||
|
||||
export const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
|
||||
|
||||
export const hasExplicitContent = (item) => {
|
||||
return item?.explicit === true || item?.explicitLyrics === true;
|
||||
};
|
||||
|
||||
export const debounce = (func, wait) => {
|
||||
let timeout;
|
||||
return function executedFunction(...args) {
|
||||
const later = () => {
|
||||
clearTimeout(timeout);
|
||||
func(...args);
|
||||
};
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
};
|
||||
};
|
||||
221
styles.css
221
styles.css
|
|
@ -1,4 +1,3 @@
|
|||
/*styles.css*/
|
||||
:root {
|
||||
--background: #000;
|
||||
--foreground: #fafafa;
|
||||
|
|
@ -14,8 +13,9 @@
|
|||
--input: #27272a;
|
||||
--ring: #fafafa;
|
||||
--radius: .5rem;
|
||||
--highlight: #4ade80;
|
||||
--highlight: #ffffff;
|
||||
--active-highlight: var(--highlight);
|
||||
--explicit-badge: #fafafa;
|
||||
--spacing-xs: 0.5rem;
|
||||
--spacing-sm: 0.75rem;
|
||||
--spacing-md: 1rem;
|
||||
|
|
@ -41,6 +41,7 @@
|
|||
font-family: 'Inter', sans-serif;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
|
|
@ -73,7 +74,7 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
transition: transform .3s ease-in-out;
|
||||
transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
|
|
@ -81,6 +82,7 @@
|
|||
grid-area: main;
|
||||
overflow-y: auto;
|
||||
padding: var(--spacing-xl);
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.now-playing-bar {
|
||||
|
|
@ -121,7 +123,7 @@
|
|||
color: var(--muted-foreground);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: all .2s ease-in-out;
|
||||
transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -146,13 +148,13 @@
|
|||
|
||||
.page.active {
|
||||
display: block;
|
||||
animation: fadeIn .3s ease-in-out;
|
||||
animation: fadeIn .25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
transform: translateY(4px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
|
|
@ -175,6 +177,12 @@
|
|||
color: var(--foreground);
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
border-radius: var(--radius);
|
||||
transition: background-color .2s;
|
||||
}
|
||||
|
||||
.hamburger-menu:hover {
|
||||
background-color: var(--secondary);
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
|
|
@ -191,6 +199,7 @@
|
|||
color: var(--muted-foreground);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.search-bar input {
|
||||
|
|
@ -201,6 +210,7 @@
|
|||
border-radius: var(--radius);
|
||||
color: var(--foreground);
|
||||
font-size: 1rem;
|
||||
transition: border-color .2s;
|
||||
}
|
||||
|
||||
.search-bar input:focus {
|
||||
|
|
@ -234,7 +244,7 @@
|
|||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all 0.2s;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.search-tab:hover {
|
||||
|
|
@ -252,7 +262,7 @@
|
|||
|
||||
.search-tab-content.active {
|
||||
display: block;
|
||||
animation: fadeIn 0.3s ease-in-out;
|
||||
animation: fadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
|
|
@ -266,11 +276,18 @@
|
|||
background-color: var(--card);
|
||||
border-radius: var(--radius);
|
||||
padding: 1rem;
|
||||
transition: background-color .2s ease-in-out;
|
||||
transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
background-color: var(--secondary);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.card-image-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
|
|
@ -278,7 +295,6 @@
|
|||
aspect-ratio: 1/1;
|
||||
background-color: var(--muted);
|
||||
border-radius: calc(var(--radius) - 4px);
|
||||
margin-bottom: 1rem;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
|
|
@ -286,6 +302,12 @@
|
|||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.card-image-wrapper .explicit-badge {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-weight: 600;
|
||||
margin-bottom: .25rem;
|
||||
|
|
@ -302,6 +324,21 @@
|
|||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.explicit-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--explicit-badge);
|
||||
color: rgb(0, 0, 0);
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
padding: 0.15rem 0.35rem;
|
||||
border-radius: 2px;
|
||||
margin-left: 0.5rem;
|
||||
vertical-align: middle;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.track-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -332,7 +369,7 @@
|
|||
padding: var(--spacing-sm);
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
transition: background-color .2s ease-in-out;
|
||||
transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.track-item:hover {
|
||||
|
|
@ -343,6 +380,9 @@
|
|||
color: var(--muted-foreground);
|
||||
text-align: center;
|
||||
font-size: .9rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.track-item-info {
|
||||
|
|
@ -370,6 +410,8 @@
|
|||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.track-item-details .artist {
|
||||
|
|
@ -427,6 +469,9 @@
|
|||
font-size: 4rem;
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.detail-header-info .meta {
|
||||
|
|
@ -490,7 +535,7 @@
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--secondary);
|
||||
transition: .4s;
|
||||
transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
|
|
@ -502,7 +547,7 @@
|
|||
left: 4px;
|
||||
bottom: 4px;
|
||||
background-color: var(--foreground);
|
||||
transition: .4s;
|
||||
transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
|
@ -523,7 +568,7 @@
|
|||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: background-color 0.2s;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
|
|
@ -588,7 +633,7 @@
|
|||
border: none;
|
||||
color: var(--muted-foreground);
|
||||
cursor: pointer;
|
||||
transition: all .2s;
|
||||
transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -649,6 +694,7 @@
|
|||
background-color: var(--secondary);
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.progress-bar .progress-fill {
|
||||
|
|
@ -657,12 +703,25 @@
|
|||
background-color: var(--foreground);
|
||||
border-radius: 2px;
|
||||
transition: width .1s linear;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.progress-bar:hover .progress-fill {
|
||||
background-color: var(--highlight);
|
||||
}
|
||||
|
||||
.progress-bar:hover .progress-fill::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: var(--highlight);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.volume-controls {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
|
@ -676,10 +735,13 @@
|
|||
color: var(--muted-foreground);
|
||||
cursor: pointer;
|
||||
transition: color .2s;
|
||||
padding: 0.5rem;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.volume-controls button:hover {
|
||||
color: var(--foreground);
|
||||
background-color: var(--secondary);
|
||||
}
|
||||
|
||||
.volume-controls .volume-bar {
|
||||
|
|
@ -688,6 +750,7 @@
|
|||
background-color: var(--secondary);
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.volume-controls .volume-bar .volume-fill {
|
||||
|
|
@ -701,6 +764,18 @@
|
|||
background-color: var(--highlight);
|
||||
}
|
||||
|
||||
.volume-controls .volume-bar:hover .volume-fill::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: var(--highlight);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#context-menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
|
|
@ -710,6 +785,7 @@
|
|||
padding: .5rem;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
|
||||
z-index: 1000;
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
#context-menu ul {
|
||||
|
|
@ -720,7 +796,8 @@
|
|||
padding: .5rem .75rem;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
transition: background-color .2s ease-in-out;
|
||||
transition: background-color .2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
#context-menu li:hover {
|
||||
|
|
@ -735,9 +812,11 @@
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, .7);
|
||||
backdrop-filter: blur(4px);
|
||||
z-index: 1000;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
animation: fadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
#queue-modal {
|
||||
|
|
@ -748,6 +827,19 @@
|
|||
border-radius: var(--radius);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, .8);
|
||||
animation: scaleIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
transform: scale(0.95);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#queue-modal-header {
|
||||
|
|
@ -768,6 +860,18 @@
|
|||
color: var(--muted-foreground);
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius);
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
#queue-modal-header button:hover {
|
||||
background-color: var(--secondary);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
#queue-list {
|
||||
|
|
@ -776,7 +880,7 @@
|
|||
}
|
||||
|
||||
.placeholder-text {
|
||||
padding: 1rem;
|
||||
padding: 2rem 1rem;
|
||||
color: var(--muted-foreground);
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -834,7 +938,7 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
transition: all .2s ease-in-out;
|
||||
transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
#api-instance-list li button:hover {
|
||||
|
|
@ -885,6 +989,7 @@
|
|||
height: 100%;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
z-index: 1999;
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
#about-section {
|
||||
|
|
@ -961,7 +1066,7 @@
|
|||
color: var(--foreground);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.github-link:hover {
|
||||
|
|
@ -1108,66 +1213,10 @@
|
|||
width: 60%;
|
||||
}
|
||||
|
||||
.skeleton-detail-header {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: var(--spacing-xl);
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
padding-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.skeleton-detail-image {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
flex-shrink: 0;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.skeleton-detail-image.artist {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.skeleton-detail-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.skeleton-detail-type {
|
||||
height: 16px;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.skeleton-detail-title {
|
||||
height: 48px;
|
||||
width: 70%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.skeleton-detail-meta {
|
||||
height: 16px;
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.skeleton-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content-loaded {
|
||||
animation: contentFadeIn 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes contentFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.app-container {
|
||||
grid-template-columns: 240px 1fr;
|
||||
|
|
@ -1265,29 +1314,12 @@
|
|||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.skeleton-detail-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.skeleton-detail-image {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.skeleton-detail-title {
|
||||
height: 40px;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.now-playing-bar {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
gap: var(--spacing-md);
|
||||
padding: var(--spacing-md);
|
||||
height: auto;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.now-playing-bar .track-info {
|
||||
|
|
@ -1306,10 +1338,6 @@
|
|||
max-width: calc(100% - 64px);
|
||||
}
|
||||
|
||||
.track-info .details .artist {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.now-playing-bar .player-controls {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
|
|
@ -1319,7 +1347,6 @@
|
|||
}
|
||||
|
||||
.player-controls .progress-container {
|
||||
display: flex;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue