mirror of
https://github.com/Psychotoxical/psysonic.git
synced 2026-07-22 07:15:47 +00:00
Merge branch 'main' into feat/waveform-loudness-cache
This commit is contained in:
Psychotoxical
+2
-1
@@ -309,7 +309,8 @@ export async function pingWithCredentials(
|
||||
serverVersion: typeof data?.serverVersion === 'string' ? data.serverVersion : undefined,
|
||||
openSubsonic: data?.openSubsonic === true,
|
||||
};
|
||||
} catch {
|
||||
} catch (err) {
|
||||
console.warn('[psysonic] pingWithCredentials failed:', serverUrl, err);
|
||||
return { ok: false };
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,12 +1,24 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { getCachedUrl } from '../utils/imageCache';
|
||||
import { getCachedBlob } from '../utils/imageCache';
|
||||
|
||||
interface CachedImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
|
||||
src: string;
|
||||
cacheKey: string;
|
||||
}
|
||||
|
||||
// Delay between the consumer dropping a cached URL and the actual revoke,
|
||||
// giving the DOM <img> time to finish its decode of the URL we just took
|
||||
// away. 500 ms is comfortably above any realistic decode latency without
|
||||
// being long enough to leak meaningful memory.
|
||||
const URL_REVOKE_DELAY_MS = 500;
|
||||
|
||||
/**
|
||||
* Returns an object URL for a cached image. Each call owns its own URL: it
|
||||
* is created when the blob arrives and revoked (after a small grace delay)
|
||||
* on cleanup. There is no shared URL pool — the previous global LRU caused
|
||||
* "Failed to load resource" errors when an in-use URL got revoked because a
|
||||
* different consumer pushed it out of the cache.
|
||||
*
|
||||
* @param fallbackToFetch If true (default), returns the raw fetchUrl while the
|
||||
* blob is still resolving — useful for <img> tags so the browser starts
|
||||
* loading immediately. Pass false for CSS background-image consumers that
|
||||
@@ -17,11 +29,22 @@ export function useCachedUrl(fetchUrl: string, cacheKey: string, fallbackToFetch
|
||||
useEffect(() => {
|
||||
if (!fetchUrl) { setResolved(''); return; }
|
||||
const controller = new AbortController();
|
||||
let createdUrl: string | null = null;
|
||||
setResolved('');
|
||||
getCachedUrl(fetchUrl, cacheKey, controller.signal).then(url => {
|
||||
if (!controller.signal.aborted) setResolved(url);
|
||||
getCachedBlob(fetchUrl, cacheKey, controller.signal).then(blob => {
|
||||
if (controller.signal.aborted) return;
|
||||
if (blob) {
|
||||
createdUrl = URL.createObjectURL(blob);
|
||||
setResolved(createdUrl);
|
||||
}
|
||||
});
|
||||
return () => { controller.abort(); };
|
||||
return () => {
|
||||
controller.abort();
|
||||
if (createdUrl) {
|
||||
const url = createdUrl;
|
||||
setTimeout(() => URL.revokeObjectURL(url), URL_REVOKE_DELAY_MS);
|
||||
}
|
||||
};
|
||||
}, [fetchUrl, cacheKey]);
|
||||
return fallbackToFetch ? (resolved || fetchUrl) : resolved;
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@ import {
|
||||
import { usePlayerStore } from '../store/playerStore';
|
||||
import { buildCoverArtUrl, coverArtCacheKey, getArtistInfo, star, unstar } from '../api/subsonic';
|
||||
import { useCachedUrl } from './CachedImage';
|
||||
import { getCachedUrl } from '../utils/imageCache';
|
||||
import { getCachedBlob } from '../utils/imageCache';
|
||||
import { extractCoverColors } from '../utils/dynamicColors';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useLyrics, type WordLyricsLine } from '../hooks/useLyrics';
|
||||
@@ -740,7 +740,7 @@ export default function FullscreenPlayer({ onClose }: FullscreenPlayerProps) {
|
||||
if (!nextCoverArt) return;
|
||||
const url = buildCoverArtUrl(nextCoverArt, 300);
|
||||
const key = coverArtCacheKey(nextCoverArt, 300);
|
||||
getCachedUrl(url, key).catch(() => {});
|
||||
getCachedBlob(url, key).catch(() => {});
|
||||
}, [nextCoverArt]);
|
||||
|
||||
// Lyrics settings popover state
|
||||
|
||||
@@ -298,6 +298,12 @@ function QueuePanelHostOrSolo() {
|
||||
const enqueueAt = usePlayerStore(s => s.enqueueAt);
|
||||
const contextMenu = usePlayerStore(s => s.contextMenu);
|
||||
|
||||
// When the user picks a track *from* the queue list, suppress the
|
||||
// upcoming auto-scroll so their click target stays in view instead of
|
||||
// the list rebasing onto the next track. Auto-advance (natural playback)
|
||||
// never sets this flag, so it keeps its original "show what's next" behavior.
|
||||
const suppressNextAutoScrollRef = useRef(false);
|
||||
|
||||
const playbackSource = usePlayerStore(s => s.currentPlaybackSource);
|
||||
const normalizationNowDb = usePlayerStore(s => s.normalizationNowDb);
|
||||
const normalizationTargetLufs = usePlayerStore(s => s.normalizationTargetLufs);
|
||||
@@ -478,6 +484,10 @@ function QueuePanelHostOrSolo() {
|
||||
}, [enqueueAt]);
|
||||
|
||||
useEffect(function queueAutoScroll() {
|
||||
if (suppressNextAutoScrollRef.current) {
|
||||
suppressNextAutoScrollRef.current = false;
|
||||
return;
|
||||
}
|
||||
if (!queueListRef.current || queueIndex < 0) return;
|
||||
if (activeTab !== 'queue') return;
|
||||
const songs = queueListRef.current!.querySelectorAll<HTMLElement>('[data-queue-idx]');
|
||||
@@ -916,7 +926,10 @@ function QueuePanelHostOrSolo() {
|
||||
<div
|
||||
data-queue-idx={idx}
|
||||
className={`queue-item ${isPlaying ? 'active' : ''} ${contextMenu.isOpen && contextMenu.type === 'queue-item' && contextMenu.queueIndex === idx ? 'context-active' : ''}`}
|
||||
onClick={() => playTrack(track, queue)}
|
||||
onClick={() => {
|
||||
suppressNextAutoScrollRef.current = true;
|
||||
playTrack(track, queue);
|
||||
}}
|
||||
onContextMenu={(e) => {
|
||||
e.preventDefault();
|
||||
usePlayerStore.getState().openContextMenu(e.clientX, e.clientY, track, 'queue-item', idx);
|
||||
|
||||
+35
-95
@@ -1,36 +1,10 @@
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
Headphones, Zap, Music2, Music, Cpu, Mic, Radio, Cloud,
|
||||
Leaf, Heart, Sun, Flame, Film, Globe, BookOpen, Podcast, Star,
|
||||
Tags, type LucideIcon,
|
||||
} from 'lucide-react';
|
||||
import { Tags } from 'lucide-react';
|
||||
import { getGenres, SubsonicGenre } from '../api/subsonic';
|
||||
import { APP_MAIN_SCROLL_VIEWPORT_ID } from '../constants/appScroll';
|
||||
|
||||
function getGenreIcon(name: string): LucideIcon {
|
||||
const n = name.toLowerCase();
|
||||
if (/ambient|drone|new age/.test(n)) return Cloud;
|
||||
if (/metal|hardcore|thrash|death|grind|doom/.test(n)) return Zap;
|
||||
if (/rock/.test(n)) return Radio;
|
||||
if (/jazz/.test(n)) return Music2;
|
||||
if (/classical|orchestra|chamber|baroque|opera|symphon/.test(n)) return Music;
|
||||
if (/electronic|techno|edm|house|trance|electro|synth/.test(n)) return Cpu;
|
||||
if (/hip.?hop|rap/.test(n)) return Mic;
|
||||
if (/pop/.test(n)) return Star;
|
||||
if (/folk|country|bluegrass|americana/.test(n)) return Leaf;
|
||||
if (/blues/.test(n)) return Music2;
|
||||
if (/soul|r.?b|funk|gospel/.test(n)) return Heart;
|
||||
if (/reggae|ska|dub/.test(n)) return Sun;
|
||||
if (/punk/.test(n)) return Flame;
|
||||
if (/soundtrack|score|ost|film|movie|cinema/.test(n)) return Film;
|
||||
if (/world|latin|afro|celtic|tribal|traditional/.test(n)) return Globe;
|
||||
if (/audiobook|spoken|hörbuch|speech|comedy/.test(n)) return BookOpen;
|
||||
if (/podcast/.test(n)) return Podcast;
|
||||
return Headphones;
|
||||
}
|
||||
|
||||
const CTP_COLORS = [
|
||||
'var(--ctp-rosewater)', 'var(--ctp-flamingo)', 'var(--ctp-pink)', 'var(--ctp-mauve)',
|
||||
'var(--ctp-red)', 'var(--ctp-maroon)', 'var(--ctp-peach)', 'var(--ctp-yellow)',
|
||||
@@ -45,63 +19,39 @@ function genreColor(name: string): string {
|
||||
}
|
||||
|
||||
const SCROLL_KEY = 'genres-scroll';
|
||||
const VISIBLE_KEY = 'genres-visible';
|
||||
const PAGE_SIZE = 60;
|
||||
const FONT_MIN_REM = 0.78;
|
||||
const FONT_MAX_REM = 1.7;
|
||||
|
||||
export default function Genres() {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
const [rawGenres, setRawGenres] = useState<SubsonicGenre[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [visibleCount, setVisibleCount] = useState(() => {
|
||||
// Restore the previous visibleCount when navigating back from a detail
|
||||
// page so scroll position lines up with rendered cards.
|
||||
const saved = sessionStorage.getItem(VISIBLE_KEY);
|
||||
return saved ? Math.max(PAGE_SIZE, parseInt(saved, 10)) : PAGE_SIZE;
|
||||
});
|
||||
const observerTarget = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
getGenres()
|
||||
.then(data => setRawGenres(data))
|
||||
.finally(() => setLoading(false));
|
||||
}, []); // getGenres is not folder-scoped — no dep on musicLibraryFilterVersion
|
||||
}, []);
|
||||
|
||||
// Memoised sort — without this the page re-sorted 500+ entries on every
|
||||
// unrelated re-render (e.g. theme change, sidebar toggle).
|
||||
const genres = useMemo(
|
||||
() => [...rawGenres].sort((a, b) => b.albumCount - a.albumCount),
|
||||
[rawGenres],
|
||||
);
|
||||
|
||||
const visible = useMemo(() => genres.slice(0, visibleCount), [genres, visibleCount]);
|
||||
const hasMore = visibleCount < genres.length;
|
||||
// Log-scale font sizing — flattens the long tail (a 1000-album genre and a
|
||||
// 50-album genre look distinct, but a 1-album genre still has a readable size).
|
||||
const maxLog = useMemo(() => {
|
||||
if (genres.length === 0) return 1;
|
||||
return Math.log(Math.max(2, genres[0].albumCount));
|
||||
}, [genres]);
|
||||
|
||||
// Infinite scroll — render the next batch when the user is ~1.5 screens
|
||||
// away from the sentinel, so the rest of the watermarks never block first
|
||||
// paint of the page.
|
||||
useEffect(() => {
|
||||
if (!hasMore) return;
|
||||
const root = document.getElementById(APP_MAIN_SCROLL_VIEWPORT_ID);
|
||||
const observer = new IntersectionObserver(
|
||||
entries => { if (entries[0].isIntersecting) setVisibleCount(c => c + PAGE_SIZE); },
|
||||
{
|
||||
root: root instanceof HTMLElement ? root : null,
|
||||
rootMargin: '1500px',
|
||||
},
|
||||
);
|
||||
if (observerTarget.current) observer.observe(observerTarget.current);
|
||||
return () => observer.disconnect();
|
||||
}, [hasMore]);
|
||||
|
||||
// Restore scroll position after genres are rendered
|
||||
useEffect(() => {
|
||||
if (loading || genres.length === 0) return;
|
||||
const saved = sessionStorage.getItem(SCROLL_KEY);
|
||||
if (!saved) return;
|
||||
const pos = parseInt(saved, 10);
|
||||
sessionStorage.removeItem(SCROLL_KEY);
|
||||
sessionStorage.removeItem(VISIBLE_KEY);
|
||||
requestAnimationFrame(() => {
|
||||
const el = document.getElementById(APP_MAIN_SCROLL_VIEWPORT_ID);
|
||||
if (el) el.scrollTop = pos;
|
||||
@@ -110,10 +60,7 @@ export default function Genres() {
|
||||
|
||||
const handleGenreClick = (genreValue: string) => {
|
||||
const el = document.getElementById(APP_MAIN_SCROLL_VIEWPORT_ID);
|
||||
if (el) {
|
||||
sessionStorage.setItem(SCROLL_KEY, String(el.scrollTop));
|
||||
sessionStorage.setItem(VISIBLE_KEY, String(visibleCount));
|
||||
}
|
||||
if (el) sessionStorage.setItem(SCROLL_KEY, String(el.scrollTop));
|
||||
navigate(`/genres/${encodeURIComponent(genreValue)}`);
|
||||
};
|
||||
|
||||
@@ -132,36 +79,29 @@ export default function Genres() {
|
||||
{loading && <p className="loading-text">{t('genres.loading')}</p>}
|
||||
{!loading && genres.length === 0 && <p className="loading-text">{t('genres.empty')}</p>}
|
||||
|
||||
{!loading && visible.length > 0 && (
|
||||
<>
|
||||
<div className="album-grid-wrap">
|
||||
{visible.map(genre => {
|
||||
const Icon = getGenreIcon(genre.value);
|
||||
const color = genreColor(genre.value);
|
||||
return (
|
||||
<div
|
||||
key={genre.value}
|
||||
className="genre-card"
|
||||
style={{ '--genre-color': color } as React.CSSProperties}
|
||||
onClick={() => handleGenreClick(genre.value)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onKeyDown={e => e.key === 'Enter' && handleGenreClick(genre.value)}
|
||||
data-tooltip={genre.value}
|
||||
>
|
||||
<div className="genre-card-watermark">
|
||||
<Icon size={80} strokeWidth={1.2} />
|
||||
</div>
|
||||
<p className="genre-card-name">{genre.value}</p>
|
||||
<p className="genre-card-count">
|
||||
{t('genres.albumCount', { count: genre.albumCount })}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{hasMore && <div ref={observerTarget} style={{ height: 1 }} />}
|
||||
</>
|
||||
{!loading && genres.length > 0 && (
|
||||
<div className="genre-cloud">
|
||||
{genres.map(genre => {
|
||||
const ratio = Math.log(Math.max(2, genre.albumCount)) / maxLog;
|
||||
const fontRem = FONT_MIN_REM + ratio * (FONT_MAX_REM - FONT_MIN_REM);
|
||||
const color = genreColor(genre.value);
|
||||
return (
|
||||
<button
|
||||
key={genre.value}
|
||||
type="button"
|
||||
className="genre-pill"
|
||||
style={{
|
||||
'--genre-color': color,
|
||||
fontSize: `${fontRem.toFixed(3)}rem`,
|
||||
} as React.CSSProperties}
|
||||
onClick={() => handleGenreClick(genre.value)}
|
||||
data-tooltip={t('genres.albumCount', { count: genre.albumCount })}
|
||||
>
|
||||
{genre.value}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
+29
-43
@@ -7144,55 +7144,41 @@ html.no-compositing .fs-seekbar-played {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* ─ Genre Cards ─ */
|
||||
.genre-card {
|
||||
aspect-ratio: 1;
|
||||
border-radius: 12px;
|
||||
padding: 0.9rem;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
/* ─ Genre Tag Cloud ─ */
|
||||
.genre-cloud {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
background:
|
||||
linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 45%, transparent 70%),
|
||||
var(--genre-color, var(--accent));
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.55rem 0.6rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.genre-pill {
|
||||
appearance: none;
|
||||
border: 1px solid color-mix(in srgb, var(--genre-color, var(--accent)) 22%, transparent);
|
||||
background: color-mix(in srgb, var(--genre-color, var(--accent)) 6%, transparent);
|
||||
color: var(--text-primary);
|
||||
border-radius: 999px;
|
||||
padding: 0.28em 0.78em;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
line-height: 1.15;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
font-family: inherit;
|
||||
transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.12s ease;
|
||||
}
|
||||
|
||||
.genre-card:hover {
|
||||
transform: translateY(-3px) scale(1.02);
|
||||
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32);
|
||||
.genre-pill:hover {
|
||||
background: color-mix(in srgb, var(--genre-color, var(--accent)) 14%, transparent);
|
||||
border-color: color-mix(in srgb, var(--genre-color, var(--accent)) 45%, transparent);
|
||||
color: var(--genre-color, var(--accent));
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.genre-card-watermark {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -10px;
|
||||
transform: translateY(-55%);
|
||||
opacity: 0.22;
|
||||
color: #fff;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.genre-card-name {
|
||||
font-size: 0.86rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
line-height: 1.25;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.genre-card-count {
|
||||
font-size: 0.72rem;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
margin: 0.2rem 0 0;
|
||||
.genre-pill:focus-visible {
|
||||
outline: 2px solid var(--genre-color, var(--accent));
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* ─ Random Landing ─ */
|
||||
|
||||
+44
-74
@@ -3,22 +3,18 @@ import { useAuthStore } from '../store/authStore';
|
||||
const DB_NAME = 'psysonic-img-cache';
|
||||
const STORE_NAME = 'images';
|
||||
const MAX_AGE_MS = 30 * 24 * 60 * 60 * 1000; // 30 days
|
||||
const MAX_MEMORY_CACHE = 150; // max object URLs kept in RAM
|
||||
const MAX_BLOB_CACHE = 200; // hot in-memory blob entries (LRU)
|
||||
const MAX_CONCURRENT_FETCHES = 5;
|
||||
|
||||
// In-memory map: cacheKey → object URL (insertion-order = LRU approximation)
|
||||
const objectUrlCache = new Map<string, string>();
|
||||
// In-memory blob cache: cacheKey → Blob (insertion-order = LRU approximation).
|
||||
// Only the Map entry is dropped on overflow — the underlying Blob is freed by
|
||||
// the GC once no <img>/<canvas>/object URL still references it. Each consumer
|
||||
// is responsible for its own URL.createObjectURL lifecycle.
|
||||
const blobCache = new Map<string, Blob>();
|
||||
|
||||
// Concurrency limiter for network fetches.
|
||||
// Each queue entry is a resolver that signals "slot acquired".
|
||||
let activeFetches = 0;
|
||||
const fetchQueue: Array<() => void> = [];
|
||||
|
||||
/**
|
||||
* Acquires a fetch slot. Returns true if a slot was granted, false if the
|
||||
* provided AbortSignal fired while the call was waiting in the queue (in that
|
||||
* case no slot is held and the caller must NOT call releaseFetchSlot).
|
||||
*/
|
||||
function acquireFetchSlot(signal?: AbortSignal): Promise<boolean> {
|
||||
if (signal?.aborted) return Promise.resolve(false);
|
||||
if (activeFetches < MAX_CONCURRENT_FETCHES) {
|
||||
@@ -31,7 +27,6 @@ function acquireFetchSlot(signal?: AbortSignal): Promise<boolean> {
|
||||
resolve(true);
|
||||
};
|
||||
const onAbort = () => {
|
||||
// Remove from queue without consuming a slot — no releaseFetchSlot needed.
|
||||
const idx = fetchQueue.indexOf(onGrant);
|
||||
if (idx !== -1) fetchQueue.splice(idx, 1);
|
||||
resolve(false);
|
||||
@@ -47,12 +42,13 @@ function releaseFetchSlot(): void {
|
||||
if (next) { activeFetches++; next(); }
|
||||
}
|
||||
|
||||
function evictMemoryIfNeeded(): void {
|
||||
while (objectUrlCache.size > MAX_MEMORY_CACHE) {
|
||||
const oldestKey = objectUrlCache.keys().next().value;
|
||||
if (!oldestKey) break;
|
||||
URL.revokeObjectURL(objectUrlCache.get(oldestKey)!);
|
||||
objectUrlCache.delete(oldestKey);
|
||||
function rememberBlob(key: string, blob: Blob): void {
|
||||
blobCache.delete(key); // re-insert at end → marks as recently used
|
||||
blobCache.set(key, blob);
|
||||
while (blobCache.size > MAX_BLOB_CACHE) {
|
||||
const oldest = blobCache.keys().next().value;
|
||||
if (!oldest) break;
|
||||
blobCache.delete(oldest);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -79,7 +75,7 @@ function openDB(): Promise<IDBDatabase> {
|
||||
return dbPromise;
|
||||
}
|
||||
|
||||
async function getBlob(key: string): Promise<Blob | null> {
|
||||
async function getBlobFromIDB(key: string): Promise<Blob | null> {
|
||||
try {
|
||||
const database = await openDB();
|
||||
return new Promise(resolve => {
|
||||
@@ -95,7 +91,6 @@ async function getBlob(key: string): Promise<Blob | null> {
|
||||
}
|
||||
}
|
||||
|
||||
/** Evicts oldest IDB entries until total blob size is below maxBytes. Fire-and-forget. */
|
||||
async function evictDiskIfNeeded(maxBytes: number): Promise<void> {
|
||||
try {
|
||||
const database = await openDB();
|
||||
@@ -116,7 +111,6 @@ async function evictDiskIfNeeded(maxBytes: number): Promise<void> {
|
||||
let total = entries.reduce((acc, e) => acc + e.size, 0);
|
||||
if (total <= maxBytes) return;
|
||||
|
||||
// Oldest first
|
||||
entries.sort((a, b) => a.timestamp - b.timestamp);
|
||||
|
||||
const tx = database.transaction(STORE_NAME, 'readwrite');
|
||||
@@ -124,12 +118,7 @@ async function evictDiskIfNeeded(maxBytes: number): Promise<void> {
|
||||
for (const entry of entries) {
|
||||
if (total <= maxBytes) break;
|
||||
store.delete(entry.key);
|
||||
// Also purge from memory cache
|
||||
const objUrl = objectUrlCache.get(entry.key);
|
||||
if (objUrl) {
|
||||
URL.revokeObjectURL(objUrl);
|
||||
objectUrlCache.delete(entry.key);
|
||||
}
|
||||
blobCache.delete(entry.key);
|
||||
total -= entry.size;
|
||||
}
|
||||
} catch {
|
||||
@@ -146,7 +135,6 @@ async function putBlob(key: string, blob: Blob): Promise<void> {
|
||||
tx.oncomplete = () => resolve();
|
||||
tx.onerror = () => resolve();
|
||||
});
|
||||
// Enforce disk limit after write (fire-and-forget)
|
||||
const maxBytes = useAuthStore.getState().maxCacheMb * 1024 * 1024;
|
||||
evictDiskIfNeeded(maxBytes);
|
||||
} catch {
|
||||
@@ -154,7 +142,6 @@ async function putBlob(key: string, blob: Blob): Promise<void> {
|
||||
}
|
||||
}
|
||||
|
||||
/** Returns the total size in bytes of all blobs stored in IndexedDB. */
|
||||
export async function getImageCacheSize(): Promise<number> {
|
||||
try {
|
||||
const database = await openDB();
|
||||
@@ -171,13 +158,8 @@ export async function getImageCacheSize(): Promise<number> {
|
||||
}
|
||||
}
|
||||
|
||||
/** Removes a single cache entry from both in-memory and IndexedDB caches. */
|
||||
export async function invalidateCacheKey(cacheKey: string): Promise<void> {
|
||||
const existing = objectUrlCache.get(cacheKey);
|
||||
if (existing) {
|
||||
URL.revokeObjectURL(existing);
|
||||
objectUrlCache.delete(cacheKey);
|
||||
}
|
||||
blobCache.delete(cacheKey);
|
||||
try {
|
||||
const database = await openDB();
|
||||
await new Promise<void>(resolve => {
|
||||
@@ -191,22 +173,14 @@ export async function invalidateCacheKey(cacheKey: string): Promise<void> {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Invalidates all cached sizes for a given cover art entity (artist, radio, playlist, album).
|
||||
* Call this after uploading or deleting a cover image so the UI re-fetches from the server.
|
||||
*/
|
||||
export async function invalidateCoverArt(entityId: string): Promise<void> {
|
||||
const serverId = useAuthStore.getState().getActiveServer()?.id ?? '_';
|
||||
const sizes = [40, 64, 128, 200, 256, 300, 500, 2000];
|
||||
await Promise.all(sizes.map(size => invalidateCacheKey(`${serverId}:cover:${entityId}:${size}`)));
|
||||
}
|
||||
|
||||
/** Clears all entries from IndexedDB and revokes all in-memory object URLs. */
|
||||
export async function clearImageCache(): Promise<void> {
|
||||
for (const url of objectUrlCache.values()) {
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
objectUrlCache.clear();
|
||||
blobCache.clear();
|
||||
try {
|
||||
const database = await openDB();
|
||||
await new Promise<void>(resolve => {
|
||||
@@ -221,49 +195,45 @@ export async function clearImageCache(): Promise<void> {
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a cached object URL for an image.
|
||||
* Returns the cached Blob for an image, fetching it if necessary. Callers own
|
||||
* any object URL they create from the returned blob and must revoke it when
|
||||
* done — there is no shared URL pool.
|
||||
*
|
||||
* @param fetchUrl The actual URL to fetch from (may contain ephemeral auth params).
|
||||
* @param cacheKey A stable key that identifies the image across sessions.
|
||||
* @param signal Optional AbortSignal — aborts queue-waiting and in-flight fetches
|
||||
* so navigating away does not leave zombie fetches draining I/O.
|
||||
* @param signal Optional AbortSignal — aborts queue-waiting and in-flight fetches.
|
||||
*/
|
||||
export async function getCachedUrl(fetchUrl: string, cacheKey: string, signal?: AbortSignal): Promise<string> {
|
||||
if (!fetchUrl || signal?.aborted) return '';
|
||||
export async function getCachedBlob(fetchUrl: string, cacheKey: string, signal?: AbortSignal): Promise<Blob | null> {
|
||||
if (!fetchUrl || signal?.aborted) return null;
|
||||
|
||||
// 1. In-memory hit (same session)
|
||||
const existing = objectUrlCache.get(cacheKey);
|
||||
if (existing) return existing;
|
||||
|
||||
// 2. IndexedDB hit (persisted from previous session)
|
||||
const blob = await getBlob(cacheKey);
|
||||
if (signal?.aborted) return '';
|
||||
if (blob) {
|
||||
const objUrl = URL.createObjectURL(blob);
|
||||
objectUrlCache.set(cacheKey, objUrl);
|
||||
evictMemoryIfNeeded();
|
||||
return objUrl;
|
||||
const memHit = blobCache.get(cacheKey);
|
||||
if (memHit) {
|
||||
rememberBlob(cacheKey, memHit); // refresh LRU position
|
||||
return memHit;
|
||||
}
|
||||
|
||||
const idbHit = await getBlobFromIDB(cacheKey);
|
||||
if (signal?.aborted) return null;
|
||||
if (idbHit) {
|
||||
rememberBlob(cacheKey, idbHit);
|
||||
return idbHit;
|
||||
}
|
||||
|
||||
// 3. Network fetch with concurrency limit → store in IDB → return object URL.
|
||||
// acquireFetchSlot returns false (without holding a slot) when aborted in queue.
|
||||
const acquired = await acquireFetchSlot(signal);
|
||||
if (!acquired || signal?.aborted) {
|
||||
if (acquired) releaseFetchSlot();
|
||||
return '';
|
||||
return null;
|
||||
}
|
||||
try {
|
||||
const resp = await fetch(fetchUrl);
|
||||
if (!resp.ok) return fetchUrl;
|
||||
const resp = await fetch(fetchUrl, { signal });
|
||||
if (!resp.ok) return null;
|
||||
const newBlob = await resp.blob();
|
||||
if (signal?.aborted) return '';
|
||||
putBlob(cacheKey, newBlob); // fire-and-forget (includes disk eviction)
|
||||
const objUrl = URL.createObjectURL(newBlob);
|
||||
objectUrlCache.set(cacheKey, objUrl);
|
||||
evictMemoryIfNeeded();
|
||||
return objUrl;
|
||||
} catch (e) {
|
||||
// AbortError → return '' (component is gone). Other errors → return raw URL.
|
||||
return e instanceof DOMException && e.name === 'AbortError' ? '' : fetchUrl;
|
||||
if (signal?.aborted) return null;
|
||||
putBlob(cacheKey, newBlob); // fire-and-forget
|
||||
rememberBlob(cacheKey, newBlob);
|
||||
return newBlob;
|
||||
} catch {
|
||||
return null;
|
||||
} finally {
|
||||
releaseFetchSlot();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user