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

introducing floating bar with toggle

Browse Source
This commit is contained in:
kveld9
2026-04-19 13:01:31 -03:00
parent f53f724e1c
commit ffffe268ab
9 changed files with 174 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+31 -2
View File
@@ -1,12 +1,12 @@
{
"name": "psysonic",
"version": "1.41.0",
"version": "1.42.1",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "psysonic",
"version": "1.41.0",
"version": "1.42.1",
"dependencies": {
"@fontsource-variable/dm-sans": "^5.2.8",
"@fontsource-variable/figtree": "^5.2.10",
@@ -33,6 +33,7 @@
"@tauri-apps/plugin-updater": "^2.10.0",
"@tauri-apps/plugin-window-state": "^2.4.1",
"axios": "^1.7.7",
"colorthief": "^3.3.1",
"i18next": "^25.8.16",
"lucide-react": "^0.462.0",
"md5": "^2.3.0",
@@ -45,6 +46,7 @@
},
"devDependencies": {
"@tauri-apps/cli": "^2",
"@types/colorthief": "^2.6.1",
"@types/md5": "^2.3.5",
"@types/node": "^25.3.5",
"@types/papaparse": "^5.5.2",
@@ -1720,6 +1722,16 @@
"assertion-error": "^2.0.1"
}
},
"node_modules/@types/colorthief": {
"version": "2.6.1",
"resolved": "https://registry.npmjs.org/@types/colorthief/-/colorthief-2.6.1.tgz",
"integrity": "sha512-3hlRky7ybPuQDNx3RV29P/CTvuC7zkk//Xt/NyOwNg5RhL/y54a0q4aW7MNMkvBkGJqX2g2igNCoCh3ZtK4gZQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/node": "*"
}
},
"node_modules/@types/deep-eql": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
@@ -2050,6 +2062,23 @@
"node": "*"
}
},
"node_modules/colorthief": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/colorthief/-/colorthief-3.3.1.tgz",
"integrity": "sha512-a3qzYXy51h6p3725pV8rnJwUBGTtvYQge2pVhKJwL+vETUD5pCi6VKmQyu51pBHdUbu/BPEXbwFLS0GnxXNhGA==",
"license": "MIT",
"bin": {
"colorthief": "dist/cli.js"
},
"peerDependencies": {
"sharp": ">=0.33.0"
},
"peerDependenciesMeta": {
"sharp": {
"optional": true
}
}
},
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
package.json
+2
View File
@@ -37,6 +37,7 @@
"@tauri-apps/plugin-updater": "^2.10.0",
"@tauri-apps/plugin-window-state": "^2.4.1",
"axios": "^1.7.7",
"colorthief": "^3.3.1",
"i18next": "^25.8.16",
"lucide-react": "^0.462.0",
"md5": "^2.3.0",
@@ -49,6 +50,7 @@
},
"devDependencies": {
"@tauri-apps/cli": "^2",
"@types/colorthief": "^2.6.1",
"@types/md5": "^2.3.5",
"@types/node": "^25.3.5",
"@types/papaparse": "^5.5.2",
src/App.tsx
+2 -1
View File
@@ -145,6 +145,7 @@ function AppShell() {
const setEntityRatingSupport = useAuthStore(s => s.setEntityRatingSupport);
const offlineAlbums = useOfflineStore(s => s.albums);
const hasOfflineContent = Object.values(offlineAlbums).some(a => a.serverId === serverId);
const { floatingPlayerBar } = useThemeStore();
// Mini player → main: route requests dispatched as `psy:navigate`
// CustomEvents from the bridge land here so React Router can take over.
@@ -351,7 +352,7 @@ function AppShell() {
return (
<div
className="app-shell"
className={`app-shell ${floatingPlayerBar ? 'floating-player' : ''}`}
data-mobile={isMobile || undefined}
data-mobile-player={isMobilePlayer || undefined}
data-titlebar={(IS_LINUX && useCustomTitlebar && !isWindowFullscreen && !isTilingWm) || undefined}
src/components/PlayerBar.tsx
+47 -2
View File
@@ -101,6 +101,40 @@ export default function PlayerBar() {
setUserRatingOverride: s.setUserRatingOverride,
})));
const { lastfmSessionKey } = useAuthStore();
const { floatingPlayerBar } = useThemeStore();
const [floatingStyle, setFloatingStyle] = useState<React.CSSProperties>({});
useEffect(() => {
if (!floatingPlayerBar) return;
const updatePosition = () => {
const sidebar = document.querySelector('.sidebar') as HTMLElement;
const queue = document.querySelector('.queue-panel') as HTMLElement;
const leftOffset = sidebar ? sidebar.getBoundingClientRect().right : 0;
const rightOffset = queue ? window.innerWidth - queue.getBoundingClientRect().left : 0;
setFloatingStyle({
left: leftOffset + 24,
right: rightOffset + 24,
width: 'auto',
});
};
updatePosition();
const observer = new ResizeObserver(updatePosition);
const sidebar = document.querySelector('.sidebar');
const queue = document.querySelector('.queue-panel');
if (sidebar) observer.observe(sidebar);
if (queue) observer.observe(queue);
window.addEventListener('resize', updatePosition);
return () => {
observer.disconnect();
window.removeEventListener('resize', updatePosition);
};
}, [floatingPlayerBar]);
const isRadio = !!currentRadio;
@@ -150,8 +184,13 @@ export default function PlayerBar() {
background: `linear-gradient(to right, var(--volume-accent, var(--accent)) ${volume * 100}%, var(--ctp-surface2) ${volume * 100}%)`,
};
return (
<footer className="player-bar" role="region" aria-label={t('player.regionLabel')}>
const playerBarContent = (
<footer
className={`player-bar ${floatingPlayerBar ? 'floating' : ''}`}
style={floatingPlayerBar ? floatingStyle : undefined}
role="region"
aria-label={t('player.regionLabel')}
>
{/* Track Info */}
<div className="player-track-info">
@@ -410,4 +449,10 @@ export default function PlayerBar() {
</footer>
);
if (floatingPlayerBar) {
return createPortal(playerBarContent, document.body);
}
return playerBarContent;
}
src/locales/en.ts
+2
View File
@@ -738,6 +738,8 @@ export const enTranslation = {
playlistCoverPhotoSub: 'Show cover photo grid in playlist detail view',
showBitrate: 'Show Bitrate',
showBitrateSub: 'Display audio bitrate in track listings',
floatingPlayerBar: 'Floating Player Bar',
floatingPlayerBarSub: 'Keep the player bar floating above content',
uiScaleTitle: 'Interface Scale',
uiScaleLabel: 'Zoom',
},
src/locales/es.ts
+2
View File
@@ -729,6 +729,8 @@ export const esTranslation = {
playlistCoverPhotoSub: 'Mostrar cuadrícula de fotos de portada en la vista detallada de playlists',
showBitrate: 'Mostrar Bitrate',
showBitrateSub: 'Mostrar bitrate de audio en las listas de pistas',
floatingPlayerBar: 'Barra del Reproductor Flotante',
floatingPlayerBarSub: 'Mantener la barra del reproductor flotando sobre el contenido',
uiScaleTitle: 'Escala de Interfaz',
uiScaleLabel: 'Zoom',
},
src/pages/Settings.tsx
+11
View File
@@ -1774,6 +1774,17 @@ export default function Settings() {
<span className="toggle-track" />
</label>
</div>
<div className="settings-section-divider" />
<div className="settings-toggle-row">
<div>
<div style={{ fontWeight: 500 }}>{t('settings.floatingPlayerBar')}</div>
<div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{t('settings.floatingPlayerBarSub')}</div>
</div>
<label className="toggle-switch">
<input type="checkbox" checked={theme.floatingPlayerBar} onChange={e => theme.setFloatingPlayerBar(e.target.checked)} />
<span className="toggle-track" />
</label>
</div>
</div>
</section>
src/store/themeStore.ts
+4
View File
@@ -26,6 +26,8 @@ interface ThemeState {
setShowRemainingTime: (v: boolean) => void;
expandReplayGain: boolean;
setExpandReplayGain: (v: boolean) => void;
floatingPlayerBar: boolean;
setFloatingPlayerBar: (v: boolean) => void;
}
export function getScheduledTheme(state: Pick<ThemeState, 'enableThemeScheduler' | 'theme' | 'themeDay' | 'themeNight' | 'timeDayStart' | 'timeNightStart'>): string {
@@ -67,6 +69,8 @@ export const useThemeStore = create<ThemeState>()(
setShowRemainingTime: (v) => set({ showRemainingTime: v }),
expandReplayGain: false,
setExpandReplayGain: (v) => set({ expandReplayGain: v }),
floatingPlayerBar: false,
setFloatingPlayerBar: (v) => set({ floatingPlayerBar: v }),
}),
{
name: 'psysonic_theme',
src/styles/layout.css
+73
View File
@@ -33,6 +33,13 @@
background: var(--bg-app);
}
/* When player bar is floating, content extends to bottom */
.app-shell.floating-player {
grid-template-rows: minmax(0, 1fr);
grid-template-areas:
"sidebar main queue";
}
/* ─── Custom title bar (Linux only — decorations: false) ─── */
:root {
--titlebar-height: 32px;
@@ -46,6 +53,14 @@
"player player player";
}
/* When player bar is floating with titlebar, content extends to bottom */
.app-shell[data-titlebar].floating-player {
grid-template-rows: var(--titlebar-height) minmax(0, 1fr);
grid-template-areas:
"titlebar titlebar titlebar"
"sidebar main queue";
}
/* Resize grips — replace the native GTK grips lost when decorations: false */
.app-shell[data-titlebar]::before,
.app-shell[data-titlebar]::after {
@@ -1152,6 +1167,61 @@
contain: layout paint;
}
/* Floating player bar styles - positioning handled by ResizeObserver */
.player-bar.floating {
position: fixed;
bottom: 12px;
/* left/right handled dynamically by JS */
z-index: 1000;
border-radius: 50px;
width: auto;
min-width: 100px;
max-width: none;
grid-area: unset;
padding: 0 24px 0 8px;
gap: 16px;
background: var(--bg-player);
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.8),
0 0 0 1px rgba(255, 255, 255, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* Internal element adjustments for floating mode */
.player-bar.floating .player-track-info {
flex: 0 0 auto;
min-width: 240px;
max-width: 320px;
}
.player-bar.floating .player-album-art-wrap {
border-radius: 50%;
}
.player-bar.floating .player-album-art,
.player-bar.floating .player-album-art-placeholder {
border-radius: 0;
}
.player-bar.floating .player-buttons {
flex-shrink: 0;
gap: 16px;
}
.player-bar.floating .player-waveform-section {
flex: 1;
min-width: 200px;
}
.player-bar.floating .player-volume-section {
flex: 0 0 auto;
min-width: 120px;
display: flex;
align-items: center;
gap: 8px;
}
.player-track-info {
display: flex;
align-items: center;
@@ -1394,6 +1464,9 @@
.player-volume-slider {
width: 100%;
display: block;
margin: 0;
vertical-align: middle;
}
.player-volume-pct {