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

feat: fix UI freezes in ZIP and offline cache downloads

Browse Source 
ZIP downloads (PlaylistDetail, Albums, NewReleases, RandomAlbums) now use
invoke('download_zip') via Rust streaming instead of fetch+blob+arrayBuffer,
eliminating JS heap saturation on large files. Progress shown in ZipDownloadOverlay.

Offline cache downloads (600+ songs) no longer freeze the UI: transient job
state moved to a separate non-persisted offlineJobStore, reducing localStorage
writes from ~1200 down to 2 for an entire download. Also adds playlist offline
toggle — clicking the cache button when already cached removes it from cache.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Psychotoxical
2026-04-08 22:33:23 +02:00
parent c1e57b4c06
commit ba670bd1e8
25 changed files with 771 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/components.css
+122
View File
@@ -6887,3 +6887,125 @@
color: var(--text-muted);
margin-left: auto;
}
/* ─── ZIP Download Overlay ─── */
.zip-dl-overlay {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 9000;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
}
.zip-dl-item {
pointer-events: all;
width: 280px;
padding: 10px 12px;
border-radius: var(--radius-md);
background: var(--bg-sidebar);
border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
display: flex;
flex-direction: column;
gap: 6px;
animation: zip-dl-slide-in 0.2s ease;
}
@keyframes zip-dl-slide-in {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
.zip-dl-item.zip-dl-done {
border-color: color-mix(in srgb, var(--accent) 20%, transparent);
opacity: 0.8;
}
.zip-dl-item.zip-dl-error {
border-color: color-mix(in srgb, var(--danger, #e05555) 40%, transparent);
opacity: 0.85;
}
.zip-dl-header {
display: flex;
align-items: center;
gap: 7px;
color: var(--accent);
font-size: 12px;
}
.zip-dl-item.zip-dl-error .zip-dl-header {
color: var(--danger, #e05555);
}
.zip-dl-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text-primary);
font-size: 12px;
}
.zip-dl-close {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border: none;
background: transparent;
color: var(--text-muted);
cursor: pointer;
padding: 0;
border-radius: 50%;
transition: color 0.15s, background 0.15s;
}
.zip-dl-close:hover {
color: var(--text-primary);
background: var(--bg-hover);
}
.zip-dl-info {
font-size: 11px;
color: var(--text-muted);
padding-left: 20px;
}
.zip-dl-track {
height: 3px;
border-radius: 2px;
background: var(--bg-hover);
overflow: hidden;
position: relative;
}
.zip-dl-fill {
height: 100%;
border-radius: 2px;
background: var(--accent);
transition: width 0.4s linear;
}
/* Indeterminate sliding animation */
.zip-dl-indeterminate::after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 40%;
border-radius: 2px;
background: var(--accent);
animation: zip-dl-shimmer 1.4s ease-in-out infinite;
}
@keyframes zip-dl-shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(350%); }
}
src/styles/layout.css
+22
View File
@@ -729,6 +729,28 @@
padding: 6px;
}
.sidebar-offline-cancel {
margin-left: auto;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 50%;
border: none;
background: transparent;
color: var(--accent);
cursor: pointer;
opacity: 0.6;
padding: 0;
transition: opacity 0.15s, background 0.15s;
}
.sidebar-offline-cancel:hover {
opacity: 1;
background: color-mix(in srgb, var(--accent) 20%, transparent);
}
@keyframes spin-slow {
to { transform: rotate(360deg); }
}