cache playlist

Author: mebtte

apps/pwa/src/pages/player/constants.ts

@@ -27,6 +27,8 @@ export interface MusicWithSingerAliases extends Omit<Music, 'singers'> {
   singers: SingerWithAliases[];
 }
 
+export type PlaylistMusic = MusicWithSingerAliases & { index: number };
+
 export interface QueueMusic extends MusicWithSingerAliases {
   index: number;
   pid: string;

apps/pwa/src/pages/player/index.tsx

@@ -84,10 +84,10 @@ function Wrapper() {
 
   useKeyboard({ paused: audioPaused, queueMusic, musicbillList });
   useMediaSession(queueMusic);
-
-  useEffect(() => {
-    e.emit(EventType.CURRENT_MUSIC_CHANGE, { queueMusic });
-  }, [queueMusic]);
+  useEffect(
+    () => e.emit(EventType.CURRENT_MUSIC_CHANGE, { queueMusic }),
+    [queueMusic],
+  );
 
   const contextValue = useMemo(
     () => ({

apps/pwa/src/pages/player/musicbill_music_drawer/musicbill.tsx

@@ -82,7 +82,7 @@ function Musicbill({
             PlayerEventType.ADD_MUSIC_TO_MUSICBILL,
             {
               musicbill,
-              music: music!,
+              music,
             },
           );
         }

apps/pwa/src/pages/player/storage.ts

@@ -0,0 +1,18 @@
+import Storage from '@/utils/storage';
+import { MusicWithSingerAliases } from './constants';
+
+export enum Key {
+  PLAYLIST = 'playlist',
+}
+
+const storage = new Storage<
+  Key,
+  {
+    [Key.PLAYLIST]: {
+      userId: string;
+      musicList: MusicWithSingerAliases[];
+    };
+  }
+>('player');
+
+export default storage;

apps/pwa/src/pages/player/use_playlist.ts

@@ -3,14 +3,30 @@ import notice from '@/utils/notice';
 import getMusic from '@/server/api/get_music';
 import logger from '@/utils/logger';
 import { t } from '@/i18n';
-import { MusicWithSingerAliases } from './constants';
+import { PlaylistMusic } from './constants';
 import eventemitter, { EventType } from './eventemitter';
-
-type PlaylistMusic = MusicWithSingerAliases & { index: number };
+import storage, { Key } from './storage';
+import {
+  getSelectedServer,
+  getSelectedUser,
+  useServer,
+} from '@/global_states/server';
 
 export default () => {
   const [playlist, setPlaylist] = useState<PlaylistMusic[]>([]);
 
+  useEffect(
+    () =>
+      playlist && playlist.length > 0
+        ? void storage.setItem(Key.PLAYLIST, {
+            userId: getSelectedUser(getSelectedServer(useServer.getState())!)!
+              .id,
+            musicList: playlist,
+          })
+        : undefined,
+    [playlist],
+  );
+
   useEffect(() => {
     const unlistenActionPlayMusic = eventemitter.listen(
       EventType.ACTION_PLAY_MUSIC,