Senko-san
ceee9b9d12
Three tiers of offline support, all scoped to the active backend's localStorage namespace (mirroring the auth slice): Tier 1 — persist client state. queue + player slices are saved (queue entries/index/source; player track/position/volume/repeat/shuffle) and rehydrated on load, so a reload with no backend restores where the user left off. Playback never auto-resumes (browsers block autoplay). Retires the DEMO_QUEUE and isQueueOpen:true stubs. Tier 2 — persist the RTK Query cache. Last-seen library/albums/artists are snapshotted (fulfilled queries only) and replayed via RTKQ's extractRehydrationInfo at startup, so the library renders read-only when the backend is down. ConnectionStatus tooltip flags cached data offline. No server data is copied into a slice — the cache feeds itself back. Tier 3 — service worker audio + cover cache (PWA). Audio streams are cached keyed by content id (token stripped), range-aware (synthetic 206 slicing), with a 500MB LRU cap, so already-played tracks play fully offline. Cover art uses stale-while-revalidate in its own bounded cache. Module worker (ESM); pure helpers split into sw-core.js and unit-tested. Web app manifest enables "Install app". Player source badge now reflects real cached state. tsc clean, lint clean, 19 new tests pass, production build verified. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
31 lines
928 B
TypeScript
31 lines
928 B
TypeScript
import { useEffect, useState } from 'react';
|
|
import { useAppSelector } from './useAppDispatch';
|
|
import { isStreamCached } from '../lib/sw';
|
|
import { getStreamUrl } from '../api/endpoints/streaming';
|
|
|
|
/**
|
|
* Whether the given track is available from the offline audio cache (Tier 3).
|
|
* Drives the player-bar source indicator (local vs streaming). Returns false
|
|
* until the service worker is controlling and confirms a hit.
|
|
*/
|
|
export function useStreamCached(trackId: string | undefined): boolean {
|
|
const token = useAppSelector((s) => s.auth.accessToken);
|
|
const [cached, setCached] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!trackId || !token) {
|
|
setCached(false);
|
|
return;
|
|
}
|
|
let active = true;
|
|
void isStreamCached(getStreamUrl(trackId, token)).then((hit) => {
|
|
if (active) setCached(hit);
|
|
});
|
|
return () => {
|
|
active = false;
|
|
};
|
|
}, [trackId, token]);
|
|
|
|
return cached;
|
|
}
|