itlxrd/Psychotoxical-psysonic
1
0
Fork 0
mirror of https://github.com/Psychotoxical/psysonic.git synced 2026-07-21 23:05:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Waveform seekbar, MilkDrop visualizer, EQ bars, in-app browser, and UX improvements (v1.3.0)

Browse Source 
- PlayerBar redesigned: canvas waveform seekbar (500 bars, blue→mauve gradient + glow) replaces thin slider; new flex layout; queue toggle moved to content header (consistent with sidebar pattern)
- MilkDrop visualizer in Ambient Stage via Butterchurn; hidden audio analysis, preset shuffle, smooth blend transitions
- Tracklist: animated EQ bars for playing track, play icon when paused, align-items: center fix
- Artist pages: Last.fm + Wikipedia open in native Tauri WebviewWindow (in-app browser)
- Hero/Discover deduplication: single fetch of 20 random albums split between sections
- Update checker: runs every 10 minutes during runtime; version shown without v-prefix
- Settings version: now read from package.json instead of hardcoded
- Help page: new Random Mix section, updated Playback + Library sections, improved accordion styling
- Bump version to 1.3.0

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Psychotoxical
2026-03-15 21:24:00 +01:00
parent 9bdd433a4b
commit c91fdd7e1d
28 changed files with 800 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/components.css
+47 -15
View File
@@ -570,7 +570,7 @@
.tracklist { padding: 0 var(--space-6) var(--space-6); }
.tracklist-header {
display: grid;
grid-template-columns: 36px minmax(100px, 3fr) 70px 80px 60px auto;
grid-template-columns: 36px minmax(100px, 3fr) 70px 80px 60px 120px;
gap: var(--space-3);
align-items: center;
padding: var(--space-2) var(--space-3);
@@ -583,33 +583,33 @@
margin-bottom: var(--space-2);
}
.tracklist-header.tracklist-va {
grid-template-columns: 36px minmax(100px, 2fr) minmax(80px, 1.2fr) 70px 80px 60px auto;
grid-template-columns: 36px minmax(100px, 2fr) minmax(80px, 1.2fr) 70px 80px 60px 120px;
}
.track-row {
display: grid;
grid-template-columns: 36px minmax(100px, 3fr) 70px 80px 60px auto;
grid-template-columns: 36px minmax(100px, 3fr) 70px 80px 60px 120px;
gap: var(--space-3);
align-items: start;
align-items: center;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
cursor: pointer;
transition: background var(--transition-fast);
}
.track-row.track-row-va {
grid-template-columns: 36px minmax(100px, 2fr) minmax(80px, 1.2fr) 70px 80px 60px auto;
grid-template-columns: 36px minmax(100px, 2fr) minmax(80px, 1.2fr) 70px 80px 60px 120px;
}
.tracklist-total {
display: grid;
grid-template-columns: 36px minmax(100px, 3fr) 70px 80px 60px auto;
grid-template-columns: 36px minmax(100px, 3fr) 70px 80px 60px 120px;
gap: var(--space-3);
border-top: 1px solid var(--border-subtle);
padding: var(--space-2) var(--space-3);
margin-top: var(--space-1);
}
.tracklist-total.tracklist-va {
grid-template-columns: 36px minmax(100px, 2fr) minmax(80px, 1.2fr) 70px 80px 60px auto;
grid-template-columns: 36px minmax(100px, 2fr) minmax(80px, 1.2fr) 70px 80px 60px 120px;
}
.tracklist-total-label {
grid-column: 1 / 5;
@@ -622,7 +622,7 @@
}
.tracklist-total-value {
grid-column: 5 / 6;
text-align: right;
text-align: center;
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
@@ -631,14 +631,46 @@
.tracklist-total.tracklist-va .tracklist-total-label { grid-column: 1 / 6; }
.tracklist-total.tracklist-va .tracklist-total-value { grid-column: 6 / 7; }
.track-row:hover { background: var(--bg-hover); }
.track-row.active { background: var(--accent-dim); animation: track-pulse 2.5s ease-in-out infinite; }
.track-row.active { background: var(--accent-dim); animation: track-pulse 3s ease-in-out infinite; }
.track-row.active:hover { background: var(--accent-dim); animation: none; }
@keyframes track-pulse {
0%, 100% { background: var(--accent-dim); }
50% { background: transparent; }
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
.track-row > * { padding-top: 6px; padding-bottom: 6px; }
.track-num {
display: flex;
align-items: center;
justify-content: center;
}
/* Equalizer bars — shown for the currently playing track */
.eq-bars {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 2px;
width: 14px;
height: 13px;
}
.eq-bar {
flex: 1;
height: 100%;
background: var(--accent);
border-radius: 1px;
transform-origin: bottom;
transform: scaleY(0.25);
animation: eq-bounce 1.1s ease-in-out infinite;
}
.eq-bar:nth-child(1) { animation-delay: 0s; animation-duration: 1.0s; }
.eq-bar:nth-child(2) { animation-delay: 0.18s; animation-duration: 1.3s; }
.eq-bar:nth-child(3) { animation-delay: 0.35s; animation-duration: 0.9s; }
@keyframes eq-bounce {
0%, 100% { transform: scaleY(0.25); }
50% { transform: scaleY(1); }
}
/* CD / Disc separator */
.disc-header {
display: flex;
@@ -657,7 +689,7 @@
.disc-header:first-child { border-top: none; margin-top: 0; }
.disc-icon { font-size: 16px; }
.track-num { font-size: 13px; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
.track-num { font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.track-info { min-width: 0; }
.track-title { font-size: 13px; font-weight: 500; color: var(--text-primary); overflow-wrap: break-word; word-break: break-word; }
.track-artist-cell { min-width: 0; display: flex; align-items: flex-start; }
@@ -799,12 +831,12 @@
.help-list { display: flex; flex-direction: column; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; }
.help-item { border-bottom: 1px solid var(--border-subtle); }
.help-item:last-child { border-bottom: none; }
.help-question { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; padding: var(--space-4) var(--space-5); text-align: left; font-size: 14px; font-weight: 500; color: var(--text-primary); background: var(--bg-card); transition: background var(--transition-fast); }
.help-question { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; padding: var(--space-4) var(--space-5); text-align: left; font-size: 14px; font-weight: 500; color: var(--text-primary); background: var(--bg-card); border-left: 3px solid transparent; transition: background var(--transition-fast), border-color var(--transition-fast); }
.help-question:hover { background: var(--bg-hover); }
.help-item-open .help-question { color: var(--accent); background: var(--bg-hover); }
.help-item-open .help-question { color: var(--accent); background: var(--bg-hover); border-left: 3px solid var(--accent); padding-left: calc(var(--space-5) + 3px); }
.help-chevron { flex-shrink: 0; color: var(--text-muted); transition: transform 0.2s ease; }
.help-item-open .help-chevron { transform: rotate(180deg); color: var(--accent); }
.help-answer { padding: var(--space-3) var(--space-5) var(--space-5); font-size: 13px; color: var(--text-secondary); line-height: 1.65; background: var(--bg-hover); border-top: 1px solid var(--border-subtle); }
.help-answer { padding: var(--space-4) var(--space-5) var(--space-5) calc(var(--space-5) + 3px); font-size: 13px; color: var(--text-secondary); line-height: 1.65; background: var(--bg-app); border-top: 1px solid var(--border-subtle); border-left: 3px solid var(--accent); }
.settings-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.settings-about { display: flex; flex-direction: column; }
.settings-about-header { display: flex; align-items: center; gap: var(--space-4); }