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

fix: font switching, layout scaling, embedded lyrics, folder opening

Browse Source 
- fix(fonts): update CSS var declarations to @fontsource-variable naming
  ('Inter Variable', 'Outfit Variable', etc.) so dynamic font switching works
- fix(layout): 100vh → 100% on .app-shell to fix Windows WebView2 playerbar drift;
  1fr → minmax(0,1fr) in all grid-template-rows + remove min-height: 720px to fix
  Linux playerbar disappearing at high zoom or small window sizes
- fix(updater): replace shell open() with Rust open_folder command to bypass
  shell:allow-open capability scope blocking local paths on Windows
- fix(lyrics): add get_embedded_lyrics Tauri command (id3 crate for MP3 SYLT/USLT,
  lofty for FLAC SYNCEDLYRICS/LYRICS); fix parseLrc regex for LRC without fractional
  seconds; fix SubsonicStructuredLyrics to accept both synced and issynced fields

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Psychotoxical
2026-04-09 16:52:27 +02:00
parent 9c57d4f887
commit a78c0fe9ac
9 changed files with 296 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/layout.css
+17 -11
View File
@@ -13,16 +13,22 @@
position: relative;
display: grid;
grid-template-columns: var(--sidebar-width) 1fr var(--queue-width);
grid-template-rows: 1fr var(--player-height);
/* minmax(0, 1fr) instead of plain 1fr: CSS Grid spec treats 1fr as
minmax(auto, 1fr), meaning the row won't shrink below its min-content
size. With minmax(0, 1fr) the row can collapse to zero, keeping the
player bar row always visible regardless of content size or zoom level. */
grid-template-rows: minmax(0, 1fr) var(--player-height);
grid-template-areas:
"sidebar main queue"
"player player player";
height: 100vh;
/* overflow: hidden keeps the player bar pinned at the bottom even when the
window is dragged below the OS minHeight constraint (ignored on some
Linux WMs/compositors). Without this, the 1fr row's implicit auto
min-height can push the grid taller than 100vh, scrolling the player
bar out of view. */
/* height: 100% inherits from html/body/#root (all 100%) so the grid
tracks actual window resize events on every platform.
100vh was used previously but WebView2 (Windows) does not update the
CSS viewport synchronously on resize, causing the player-bar grid row
to drift off-screen. overflow: hidden still prevents the 1fr row from
pushing the grid taller than the window on Linux WMs that ignore
the OS minHeight constraint. */
height: 100%;
overflow: hidden;
background: var(--bg-app);
}
@@ -33,7 +39,7 @@
}
.app-shell[data-titlebar] {
grid-template-rows: var(--titlebar-height) 1fr var(--player-height);
grid-template-rows: var(--titlebar-height) minmax(0, 1fr) var(--player-height);
grid-template-areas:
"titlebar titlebar titlebar"
"sidebar main queue"
@@ -1748,7 +1754,7 @@
/* ─── Grid Overrides ─── */
.app-shell[data-mobile] {
grid-template-columns: 1fr;
grid-template-rows: 1fr auto auto;
grid-template-rows: minmax(0, 1fr) auto auto;
grid-template-areas:
"main"
"bottomnav"
@@ -1758,7 +1764,7 @@
}
.app-shell[data-mobile][data-titlebar] {
grid-template-rows: var(--titlebar-height) 1fr auto auto;
grid-template-rows: var(--titlebar-height) minmax(0, 1fr) auto auto;
grid-template-areas:
"titlebar"
"main"
@@ -1833,7 +1839,7 @@
/* When the mobile player is active, the app-shell becomes a single full-screen
area with no BottomNav or PlayerBar — just the main content. */
.app-shell[data-mobile-player] {
grid-template-rows: 1fr;
grid-template-rows: minmax(0, 1fr);
grid-template-areas: "main";
}
src/styles/theme.css
+28 -22
View File
@@ -3144,8 +3144,8 @@
/* ─── Global Base Settings ─── */
:root {
/* Typography */
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
--font-display: 'Space Grotesk', 'Inter', sans-serif;
--font-sans: 'Inter Variable', system-ui, -apple-system, sans-serif;
--font-display: 'Space Grotesk Variable', 'Inter Variable', sans-serif;
/* Spacing */
--space-1: 4px;
@@ -3514,8 +3514,9 @@ html,
body,
#root {
height: 100%;
min-width: 1280px;
min-height: 720px;
/* min-height removed: Tauri enforces the real window minimum (minHeight: 480).
A CSS min-height larger than the effective CSS viewport (which shrinks at
zoom > 1) pushes html taller than the window, clipping the player bar. */
overflow: hidden;
}
@@ -6318,49 +6319,54 @@ input[type="range"]:hover::-webkit-slider-thumb {
}
/* ─── Font overrides ─── */
[data-font='inter'] {
--font-sans: 'Inter Variable', system-ui, -apple-system, sans-serif;
--font-display: 'Inter Variable', sans-serif;
}
[data-font='outfit'] {
--font-sans: 'Outfit', system-ui, sans-serif;
--font-display: 'Outfit', sans-serif;
--font-sans: 'Outfit Variable', system-ui, sans-serif;
--font-display: 'Outfit Variable', sans-serif;
}
[data-font='dm-sans'] {
--font-sans: 'DM Sans', system-ui, sans-serif;
--font-display: 'DM Sans', sans-serif;
--font-sans: 'DM Sans Variable', system-ui, sans-serif;
--font-display: 'DM Sans Variable', sans-serif;
}
[data-font='nunito'] {
--font-sans: 'Nunito', system-ui, sans-serif;
--font-display: 'Nunito', sans-serif;
--font-sans: 'Nunito Variable', system-ui, sans-serif;
--font-display: 'Nunito Variable', sans-serif;
}
[data-font='rubik'] {
--font-sans: 'Rubik', system-ui, sans-serif;
--font-display: 'Rubik', sans-serif;
--font-sans: 'Rubik Variable', system-ui, sans-serif;
--font-display: 'Rubik Variable', sans-serif;
}
[data-font='space-grotesk'] {
--font-sans: 'Space Grotesk', system-ui, sans-serif;
--font-display: 'Space Grotesk', sans-serif;
--font-sans: 'Space Grotesk Variable', system-ui, sans-serif;
--font-display: 'Space Grotesk Variable', sans-serif;
}
[data-font='figtree'] {
--font-sans: 'Figtree', system-ui, sans-serif;
--font-display: 'Figtree', sans-serif;
--font-sans: 'Figtree Variable', system-ui, sans-serif;
--font-display: 'Figtree Variable', sans-serif;
}
[data-font='manrope'] {
--font-sans: 'Manrope', system-ui, sans-serif;
--font-display: 'Manrope', sans-serif;
--font-sans: 'Manrope Variable', system-ui, sans-serif;
--font-display: 'Manrope Variable', sans-serif;
}
[data-font='plus-jakarta-sans'] {
--font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
--font-display: 'Plus Jakarta Sans', sans-serif;
--font-sans: 'Plus Jakarta Sans Variable', system-ui, sans-serif;
--font-display: 'Plus Jakarta Sans Variable', sans-serif;
}
[data-font='lexend'] {
--font-sans: 'Lexend', system-ui, sans-serif;
--font-display: 'Lexend', sans-serif;
--font-sans: 'Lexend Variable', system-ui, sans-serif;
--font-display: 'Lexend Variable', sans-serif;
}
/* ─── Equalizer bars animation ─── */