restore last playlist

Author: mebtte

apps/pwa/src/i18n/en.ts

@@ -231,4 +231,5 @@ export default {
   remove_stop_timer_question: 'are you sure to remove stop-timer',
   timeout_while_fetching_data: 'timeout while fetching data',
   timeout: 'timeout of %s1 milliseconds',
+  question_restore_playlist: 'do you want to restore last playlist ?',
 };

apps/pwa/src/i18n/zh_hans.ts

@@ -219,6 +219,7 @@ const zhCN: {
   remove_stop_timer_question: '确定移除停止定时器?',
   timeout_while_fetching_data: '获取数据超时',
   timeout: '超时 %s1 毫秒',
+  question_restore_playlist: '是否恢复上一次的播放列表',
 };
 
 export default zhCN;

apps/pwa/src/index.tsx

@@ -1,25 +1,8 @@
-import './polyfill'; // make sure that polyfill is first
+import './polyfill'; // make sure that polyfill is at first
 import './updater';
 import './devtool';
 import { createRoot } from 'react-dom/client';
 import 'cropperjs/dist/cropper.min.css';
 import App from './app';
-import Unsupported from './unsupported';
 
-function findUnsupportedList(): string[] {
-  const unsupportedList: string[] = [];
-
-  if (!window.CSS.supports('height', '1dvb')) {
-    unsupportedList.push('https://caniuse.com/viewport-unit-variants');
-  }
-
-  return unsupportedList;
-}
-
-const unsupportedList = findUnsupportedList();
-const root = createRoot(document.querySelector('#root')!);
-if (unsupportedList.length) {
-  root.render(<Unsupported unsupportedList={unsupportedList} />);
-} else {
-  root.render(<App />);
-}
+createRoot(document.querySelector('#root')!).render(<App />);

apps/pwa/src/pages/player/use_playlist.ts renamed to apps/pwa/src/pages/player/use_playlist/index.ts

@@ -3,20 +3,13 @@ import notice from '@/utils/notice';
 import getMusic from '@/server/api/get_music';
 import logger from '@/utils/logger';
 import { t } from '@/i18n';
-import { PlaylistMusic } from './constants';
-import eventemitter, { EventType } from './eventemitter';
-import storage, { Key } from './storage';
+import { PlaylistMusic } from '../constants';
+import eventemitter, { EventType } from '../eventemitter';
+import usePlaylistRestore from './use_playlist_restore';
 
 export default () => {
   const [playlist, setPlaylist] = useState<PlaylistMusic[]>([]);
-
-  useEffect(
-    () =>
-      playlist && playlist.length > 0
-        ? void storage.setItem(Key.PLAYLIST, playlist)
-        : undefined,
-    [playlist],
-  );
+  usePlaylistRestore(playlist);
 
   useEffect(() => {
     const unlistenActionPlayMusic = eventemitter.listen(
@@ -116,7 +109,15 @@ export default () => {
     );
     const unlistenMusicDeleted = eventemitter.listen(
       EventType.MUSIC_DELETED,
-      (data) => setPlaylist((pl) => pl.filter((m) => m.id !== data.id)),
+      (data) =>
+        setPlaylist((pl) =>
+          pl
+            .filter((m) => m.id !== data.id)
+            .map((music, index, { length }) => ({
+              ...music,
+              index: length - index,
+            })),
+        ),
     );
     return () => {
       unlistenActionPlayMusic();

apps/pwa/src/pages/player/use_playlist/use_playlist_restore.tsx

@@ -0,0 +1,106 @@
+import { useEffect } from 'react';
+import { PlaylistMusic } from '../constants';
+import storage, { Key } from '../storage';
+import logger from '@/utils/logger';
+import notice from '@/utils/notice';
+import styled from 'styled-components';
+import IconButton from '@/components/icon_button';
+import { MdCheck, MdClose } from 'react-icons/md';
+import upperCaseFirstLetter from '@/style/upper_case_first_letter';
+import eventemitter, { EventType } from '../eventemitter';
+import { t } from '@/i18n';
+
+const Restore = styled.div`
+  > .text {
+    padding-top: 10px;
+    ${upperCaseFirstLetter}
+  }
+
+  > .actions {
+    margin-top: 5px;
+
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 5px;
+
+    > .action {
+      color: #fff;
+    }
+  }
+`;
+
+function usePlaylistRestore(playlist: PlaylistMusic[]) {
+  useEffect(
+    () =>
+      playlist && playlist.length > 0
+        ? void storage.setItem(Key.PLAYLIST, playlist)
+        : undefined,
+    [playlist],
+  );
+
+  useEffect(() => {
+    let noticeId: string | undefined;
+    storage
+      .getItem(Key.PLAYLIST)
+      .then((cachedPlaylist) => {
+        if (cachedPlaylist && cachedPlaylist.length > 0) {
+          noticeId = notice.info(
+            <Restore>
+              <div className="text">{t('question_restore_playlist')}</div>
+              <div className="actions">
+                <IconButton
+                  className="action"
+                  onClick={() => {
+                    notice.close(noticeId!);
+                    return eventemitter.emit(
+                      EventType.ACTION_ADD_MUSIC_LIST_TO_PLAYLIST,
+                      {
+                        musicList: cachedPlaylist,
+                      },
+                    );
+                  }}
+                >
+                  <MdCheck />
+                </IconButton>
+                <IconButton
+                  className="action"
+                  onClick={() => notice.close(noticeId!)}
+                >
+                  <MdClose />
+                </IconButton>
+              </div>
+            </Restore>,
+            { duration: 0, closable: false },
+          );
+        }
+      })
+      .catch((error) => logger.error(error, 'Failed to get cached playlist'));
+
+    const closeNotice = () => {
+      if (noticeId) {
+        notice.close(noticeId);
+        noticeId = undefined;
+      }
+    };
+    const unlistenActionPlayMusic = eventemitter.listen(
+      EventType.ACTION_PLAY_MUSIC,
+      closeNotice,
+    );
+    const unlistenActionAddMusicListToPlaylist = eventemitter.listen(
+      EventType.ACTION_ADD_MUSIC_LIST_TO_PLAYLIST,
+      closeNotice,
+    );
+    const unlistenActionInsertMusicToPlayqueue = eventemitter.listen(
+      EventType.ACTION_INSERT_MUSIC_TO_PLAYQUEUE,
+      closeNotice,
+    );
+    return () => {
+      unlistenActionPlayMusic();
+      unlistenActionAddMusicListToPlaylist();
+      unlistenActionInsertMusicToPlayqueue();
+    };
+  }, []);
+}
+
+export default usePlaylistRestore;