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>
47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
import '@olly/modern-sk/styles.css';
|
|
import '@olly/modern-sk/fonts.css';
|
|
import './styles/global.css';
|
|
import './styles/shell.css';
|
|
import './i18n';
|
|
import React from 'react';
|
|
import ReactDOM from 'react-dom/client';
|
|
import { Provider } from 'react-redux';
|
|
import { BrowserRouter } from 'react-router';
|
|
import { ThemeProvider, TooltipProvider } from '@olly/modern-sk';
|
|
import { store } from './store';
|
|
import { AppRoutes } from './routes';
|
|
import { registerServiceWorker } from './lib/sw';
|
|
|
|
// Import all endpoint injections to ensure they are registered
|
|
import './api/endpoints/auth';
|
|
import './api/endpoints/library';
|
|
import './api/endpoints/playlists';
|
|
import './api/endpoints/downloads';
|
|
import './api/endpoints/likes';
|
|
import './api/endpoints/storage';
|
|
import './api/endpoints/admin';
|
|
import './api/endpoints/upload';
|
|
|
|
// Tier 3 offline: register the audio-caching service worker (no-op if the
|
|
// browser/origin doesn't support it).
|
|
registerServiceWorker();
|
|
|
|
const rootEl = document.getElementById('root');
|
|
if (rootEl) {
|
|
// grained black-ish background + base text color from modern-sk
|
|
rootEl.classList.add('modern-sk-felt');
|
|
ReactDOM.createRoot(rootEl).render(
|
|
<React.StrictMode>
|
|
<Provider store={store}>
|
|
<BrowserRouter>
|
|
<ThemeProvider>
|
|
<TooltipProvider delayDuration={200}>
|
|
<AppRoutes />
|
|
</TooltipProvider>
|
|
</ThemeProvider>
|
|
</BrowserRouter>
|
|
</Provider>
|
|
</React.StrictMode>,
|
|
);
|
|
}
|