feat(offline): make the web UI usable without a reachable backend
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>
This commit is contained in:
@@ -1,8 +1,8 @@
|
||||
import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
|
||||
|
||||
type RepeatMode = 'none' | 'one' | 'all';
|
||||
export type RepeatMode = 'none' | 'one' | 'all';
|
||||
|
||||
interface PlayerState {
|
||||
export interface PlayerState {
|
||||
currentTrackId: string | null;
|
||||
isPlaying: boolean;
|
||||
position: number;
|
||||
@@ -15,7 +15,7 @@ interface PlayerState {
|
||||
isQueueOpen: boolean;
|
||||
}
|
||||
|
||||
const initialState: PlayerState = {
|
||||
export const playerInitialState: PlayerState = {
|
||||
currentTrackId: null,
|
||||
isPlaying: false,
|
||||
position: 0,
|
||||
@@ -25,14 +25,12 @@ const initialState: PlayerState = {
|
||||
repeat: 'none',
|
||||
shuffle: false,
|
||||
isNowPlayingOpen: false,
|
||||
// STUB: open by default so the queue drawer look is visible before a backend
|
||||
// exists (pairs with DEMO_QUEUE). Default to false once real playback lands.
|
||||
isQueueOpen: true,
|
||||
isQueueOpen: false,
|
||||
};
|
||||
|
||||
export const playerSlice = createSlice({
|
||||
name: 'player',
|
||||
initialState,
|
||||
initialState: playerInitialState,
|
||||
reducers: {
|
||||
play(state, action: PayloadAction<string>) {
|
||||
state.currentTrackId = action.payload;
|
||||
|
||||
Reference in New Issue
Block a user