mirror of
https://github.com/kilyabin/psysonic.git
synced 2026-07-22 14:35:41 +00:00
Psychotoxical
7263d93d42
Incorporates PRs #38 (nisarg-78), #42 #43 #44 (JulianNymark) with fixes: Audio / Playback - Artist Radio starts immediately from fast getTopSongs (local library); getSimilarSongs2 (Last.fm) enriches queue in background — no more wait - Fix seek audio glitch: EqualPowerFadeIn only resets to zero-gain on seeks to track start (<100 ms); all other seeks resume at unity gain - OGG/Vorbis container support via symphonia-format-ogg (PR #42) - Human-readable audio error messages in SizedDecoder (PR #44) - Audio playback errors shown as themed toast notifications (PR #43) Queue / Radio - Infinite Queue: proactive load of 5 tracks (was 25) when ≤2 remain - Radio: proactive reload at ≤2 remaining tracks, independent of Infinite Queue setting — radio no longer stops at last track - Fix: clicking Start Radio multiple times no longer stacks duplicates - Fix: Start Radio on artist keeps current song playing - Manual tracks always appear before Radio, Radio before Auto-added - Queue separators: "— Radio —" and "— Auto —" dividers - Fix: radio proactive load now works even when songs lack artistId (uses currentRadioArtistId module var as fallback) UI / UX - Click synced lyrics lines to seek (PR #38) - Volume scroll wheel on volume slider (PR #38) - Lyrics: active / completed / upcoming visual states (PR #38) - Shared toast utility (src/utils/toast.ts) replaces inline toast fn - Auto-updater: relaunch_after_update Rust command exits first to release single-instance lock before spawning new process About / Credits - nisarg-78 and JulianNymark added to contributors (since v1.29.0) - netherguy4 added as Special Thanks for feature ideas and feedback - i18n: aboutSpecialThanksLabel in all 5 languages Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
88 lines
2.4 KiB
TypeScript
88 lines
2.4 KiB
TypeScript
/**
|
||
* Lightweight DOM-based toast notification.
|
||
* Uses the app's CSS custom properties so it respects the active theme.
|
||
* Multiple toasts stack vertically above each other.
|
||
*/
|
||
|
||
const TOAST_GAP = 8;
|
||
const TOAST_BOTTOM_ANCHOR = 100;
|
||
|
||
function getActiveToasts(): HTMLElement[] {
|
||
return Array.from(document.querySelectorAll<HTMLElement>('.psysonic-toast'));
|
||
}
|
||
|
||
function reflow(): void {
|
||
const toasts = getActiveToasts();
|
||
let bottom = TOAST_BOTTOM_ANCHOR;
|
||
for (let i = toasts.length - 1; i >= 0; i--) {
|
||
toasts[i].style.bottom = `${bottom}px`;
|
||
bottom += toasts[i].offsetHeight + TOAST_GAP;
|
||
}
|
||
}
|
||
|
||
export type ToastVariant = 'error' | 'info';
|
||
|
||
export function showToast(text: string, durationMs = 4000, variant: ToastVariant = 'info'): void {
|
||
const isError = variant === 'error';
|
||
|
||
const toast = document.createElement('div');
|
||
toast.className = 'psysonic-toast';
|
||
|
||
const icon = document.createElement('span');
|
||
icon.textContent = isError ? '✕' : 'ℹ';
|
||
icon.style.cssText = `
|
||
flex-shrink: 0;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
width: 18px;
|
||
height: 18px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: ${isError ? 'var(--danger)' : 'var(--accent)'};
|
||
color: var(--bg-app);
|
||
line-height: 1;
|
||
`;
|
||
|
||
const msg = document.createElement('span');
|
||
msg.textContent = text;
|
||
msg.style.cssText = `flex: 1; min-width: 0;`;
|
||
|
||
toast.style.cssText = `
|
||
position: fixed;
|
||
bottom: ${TOAST_BOTTOM_ANCHOR}px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
background: var(--bg-card);
|
||
color: var(--text-primary);
|
||
border: 1px solid ${isError ? 'var(--danger)' : 'var(--border)'};
|
||
border-left: 3px solid ${isError ? 'var(--danger)' : 'var(--accent)'};
|
||
padding: 10px 16px;
|
||
border-radius: 8px;
|
||
font-size: 13.5px;
|
||
font-weight: 500;
|
||
z-index: 999999;
|
||
pointer-events: none;
|
||
box-shadow: 0 4px 24px rgba(0,0,0,0.45)${isError ? ', 0 0 0 1px color-mix(in srgb, var(--danger) 20%, transparent)' : ''};
|
||
white-space: normal;
|
||
word-break: break-word;
|
||
transition: bottom 150ms ease;
|
||
max-width: 480px;
|
||
width: max-content;
|
||
`;
|
||
|
||
toast.appendChild(icon);
|
||
toast.appendChild(msg);
|
||
document.body.appendChild(toast);
|
||
reflow();
|
||
|
||
setTimeout(() => {
|
||
toast.remove();
|
||
reflow();
|
||
}, durationMs);
|
||
}
|