itlxrd/psysonic
1
0
Fork 0
mirror of https://github.com/kilyabin/psysonic.git synced 2026-07-22 06:25:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Gapless playback, seek recovery, buffered indicator, and UI polish (v1.0.9)

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Psychotoxical
2026-03-13 23:54:32 +01:00
parent c9b4bc091e
commit 32571a2986
17 changed files with 271 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/components.css
+19 -11
View File
@@ -4,14 +4,14 @@
.hero {
position: relative;
width: 100%;
height: 300px;
height: 360px;
overflow: hidden;
flex-shrink: 0;
}
.hero-placeholder {
width: 100%;
height: 300px;
height: 360px;
background: linear-gradient(135deg, var(--ctp-surface0), var(--ctp-mantle));
flex-shrink: 0;
}
@@ -74,8 +74,8 @@
}
.hero-cover {
width: 180px;
height: 180px;
width: 220px;
height: 220px;
border-radius: var(--radius-md);
box-shadow: 0 4px 20px rgba(0,0,0,0.6);
object-fit: cover;
@@ -930,13 +930,22 @@
50% { transform: scale(1.018); }
}
@keyframes ken-burns {
0% { transform: scale(1.08) translate(0%, 0%); }
25% { transform: scale(1.12) translate(-1.5%, 1%); }
50% { transform: scale(1.10) translate(1%, -1.5%); }
75% { transform: scale(1.13) translate(1.5%, 0.5%); }
100% { transform: scale(1.08) translate(0%, 0%); }
}
/* ── Blurred background ── */
.fs-bg {
position: absolute;
inset: -10%;
inset: -15%;
background-size: cover;
background-position: center;
filter: blur(6px) brightness(0.25) saturate(1.6);
animation: ken-burns 40s ease-in-out infinite;
transform: scale(1.2);
z-index: 0;
will-change: opacity;
@@ -1036,10 +1045,7 @@
aspect-ratio: 1 / 1;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow:
0 30px 90px rgba(0, 0, 0, 0.75),
0 0 0 1px rgba(255, 255, 255, 0.07),
0 0 80px rgba(0, 0, 0, 0.4);
box-shadow: none;
flex-shrink: 0;
animation: cover-breathe 9s ease-in-out infinite;
}
@@ -1119,8 +1125,10 @@
height: 3px;
background: linear-gradient(
to right,
rgba(255,255,255,0.85) var(--pct),
rgba(255,255,255,0.15) var(--pct)
rgba(255,255,255,0.85) var(--pct, 0%),
rgba(255,255,255,0.32) var(--pct, 0%),
rgba(255,255,255,0.32) var(--buf, 0%),
rgba(255,255,255,0.15) var(--buf, 0%)
);
border-radius: 2px;
cursor: pointer;
src/styles/layout.css
+14 -8
View File
@@ -370,7 +370,8 @@
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
gap: 2px;
padding: 12px 0;
}
.player-buttons {
@@ -507,23 +508,26 @@
}
.queue-current-track {
padding: var(--space-4);
padding: var(--space-3) var(--space-4);
display: flex;
flex-direction: column;
flex-direction: row;
align-items: center;
gap: var(--space-3);
flex-shrink: 0;
border-bottom: 1px solid var(--border-subtle);
}
.queue-current-cover {
width: 100%;
aspect-ratio: 1 / 1;
width: 72px;
height: 72px;
flex-shrink: 0;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--bg-surface);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.queue-current-cover img {
@@ -540,10 +544,12 @@
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1;
}
.queue-current-info h3 {
font-size: 16px;
font-size: 13px;
font-weight: 700;
margin: 0;
color: var(--text-primary);
@@ -567,7 +573,7 @@
}
.queue-divider {
padding: var(--space-4) var(--space-5) 0;
padding: var(--space-3) var(--space-4) 0;
flex-shrink: 0;
}