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>
48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
import { defineConfig } from '@rsbuild/core';
|
|
import { pluginBabel } from '@rsbuild/plugin-babel';
|
|
import { pluginReact } from '@rsbuild/plugin-react';
|
|
|
|
// In docker dev the container binds 0.0.0.0:3000 and the browser reaches it
|
|
// through nginx on :80 — so HMR must be told the client-facing port. All three
|
|
// vars are unset for a plain `npm run dev`, where the defaults apply.
|
|
const { RSBUILD_HOST, RSBUILD_PORT, RSBUILD_HMR_CLIENT_PORT } = process.env;
|
|
|
|
export default defineConfig({
|
|
server: {
|
|
host: RSBUILD_HOST ?? 'localhost',
|
|
port: RSBUILD_PORT ? Number(RSBUILD_PORT) : 3000,
|
|
},
|
|
dev: {
|
|
client: RSBUILD_HMR_CLIENT_PORT
|
|
? { port: Number(RSBUILD_HMR_CLIENT_PORT) }
|
|
: undefined,
|
|
},
|
|
plugins: [
|
|
pluginReact(),
|
|
pluginBabel({
|
|
include: /\.[jt]sx?$/,
|
|
exclude: [/[\\/]node_modules[\\/]/],
|
|
babelLoaderOptions(opts) {
|
|
opts.plugins?.unshift('babel-plugin-react-compiler');
|
|
},
|
|
}),
|
|
],
|
|
// PUBLIC_-prefixed env vars (e.g. PUBLIC_API_BASE_URL) are exposed natively
|
|
// by rsbuild on both import.meta.env and process.env from .env files —
|
|
// no manual source.define needed. See src/config/env.ts.
|
|
html: {
|
|
title: 'MCMA',
|
|
// PWA: link the manifest + declare theme/icon so the browser offers
|
|
// "Install app". The service worker (audio offline cache) is registered
|
|
// from src/index.tsx, not here.
|
|
tags: [
|
|
{
|
|
tag: 'link',
|
|
attrs: { rel: 'manifest', href: '/manifest.webmanifest' },
|
|
},
|
|
{ tag: 'meta', attrs: { name: 'theme-color', content: '#0b0b0b' } },
|
|
{ tag: 'link', attrs: { rel: 'apple-touch-icon', href: '/favicon.png' } },
|
|
],
|
|
},
|
|
});
|