itlxrd/psysonic
1
0
Fork 0
mirror of https://github.com/kilyabin/psysonic.git synced 2026-07-21 22:15:40 +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;