feat: persist player state across browser reloads

web/src/modules/auth/AuthProvider.tsx

@@ -20,6 +20,8 @@ export function AuthProvider({
 
   const logout = async () => {
     await makeApiPostRequest('auth/logout');
+
+    localStorage.clear();
     setUser(null);
   };
 

web/src/modules/player/PlayerProvider.tsx

@@ -20,6 +20,7 @@ import {
   updateMediaSessionPlayState,
   updateMediaSessionPositionState,
 } from './mediaSession';
+import { LocalStoragePlayerPersistor } from './persistence/LocalStoragePlayerPersistor';
 import {
   loadAlbumSongsFromAPI,
   loadArtistSongsFromAPI,
@@ -211,6 +212,51 @@ export function PlayerProvider({
     }
   }, [canSkipPrevious, hasPassedSkipThreshold, setSeek]);
 
+  useEffect(() => {
+    const persistor = new LocalStoragePlayerPersistor();
+
+    persistor
+      .retrieve()
+      .then(state => {
+        if (state !== null) {
+          dispatch({
+            type: 'setState',
+            state: {
+              ...state,
+              ...state.settings,
+            },
+          });
+        }
+      })
+      .catch(e =>
+        console.error(`could not retrieve persisted player state: ${e}`),
+      );
+  }, []);
+
+  useEffect(() => {
+    const persistor = new LocalStoragePlayerPersistor();
+
+    window.onbeforeunload = () => {
+      persistor
+        .persist({
+          current,
+          history,
+          queue,
+          settings: {
+            isMuted,
+            repeatMode,
+            shuffle,
+            volume,
+          },
+        })
+        .catch(e => `could not persist player state: ${e}`);
+    };
+
+    return () => {
+      window.onbeforeunload = null;
+    };
+  }, [current, history, isMuted, queue, repeatMode, shuffle, volume]);
+
   useEffect(() => {
     updateMediaSessionPlayState(playbackState);
   }, [playbackState]);

web/src/modules/player/persistence/LocalStoragePlayerPersistor.ts

@@ -0,0 +1,39 @@
+import { PlayerPersistor, PlayerPersistState } from './PlayerPersistor';
+
+const LOCAL_STORAGE_KEY = 'lp_player_state';
+
+export class LocalStoragePlayerPersistor implements PlayerPersistor {
+  clear(): Promise<void> {
+    localStorage.removeItem(LOCAL_STORAGE_KEY);
+
+    return Promise.resolve();
+  }
+
+  persist(state: PlayerPersistState): Promise<void> {
+    const content = JSON.stringify(state);
+
+    try {
+      localStorage.setItem(LOCAL_STORAGE_KEY, content);
+
+      return Promise.resolve();
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }
+
+  retrieve(): Promise<PlayerPersistState | null> {
+    try {
+      const content = localStorage.getItem(LOCAL_STORAGE_KEY);
+
+      if (content === null) {
+        return Promise.resolve(null);
+      }
+
+      const state = JSON.parse(content) as PlayerPersistState;
+
+      return Promise.resolve(state);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }
+}

web/src/modules/player/persistence/PlayerPersistor.ts

@@ -0,0 +1,19 @@
+import { PlayerRepeatMode, QueueItem } from '../types';
+
+export type PlayerPersistState = {
+  queue: QueueItem[];
+  history: QueueItem[];
+  current: QueueItem | null;
+  settings: {
+    volume: number;
+    isMuted: boolean;
+    shuffle: boolean;
+    repeatMode: PlayerRepeatMode;
+  };
+};
+
+export interface PlayerPersistor {
+  persist(state: PlayerPersistState): Promise<void>;
+  retrieve(): Promise<PlayerPersistState | null>;
+  clear(): Promise<void>;
+}

web/src/modules/player/reducer.ts

@@ -68,7 +68,8 @@ type Action =
   | { type: 'removeQueueItem'; index: number }
   | { type: 'goToQueueIndex'; index: number }
   | { type: 'playbackError' }
-  | { type: 'setBuffered'; to: number };
+  | { type: 'setBuffered'; to: number }
+  | { type: 'setState'; state: Partial<State> };
 
 export function playerReducer(state: State, action: Action): State {
   switch (action.type) {
@@ -226,6 +227,14 @@ export function playerReducer(state: State, action: Action): State {
         bufferedTo: to,
       };
     }
+    case 'setState': {
+      const { state: newState } = action;
+
+      return {
+        ...state,
+        ...newState,
+      };
+    }
   }
 }