Merge pull request #89 from mebtte/refactor/audio

Refactor/audio
mebtte · Sep 7, 2023 · 710f27c · 710f27c
2 parents ebad0a2 + 0a9d23f
commit 710f27c
Show file tree

Hide file tree

Showing 33 changed files with 6,909 additions and 10,408 deletions.
diff --git a/apps/cli/tsconfig.json b/apps/cli/tsconfig.json
@@ -3,8 +3,7 @@
 
   "compilerOptions": {
     "module": "CommonJS",
-    "target": "ES2015",
-    "lib": ["ES2015.Promise"],
+    "lib": ["ESNext"],
     "allowJs": true,
 
     "baseUrl": ".",

diff --git a/apps/pwa/src/constants/debug_setting.ts b/apps/pwa/src/constants/debug_setting.ts
@@ -0,0 +1,3 @@
+export interface DebugSetting {
+  audioLogEnabled: boolean;
+}
diff --git a/apps/pwa/src/debug/index.tsx b/apps/pwa/src/debug/index.tsx
@@ -0,0 +1,3 @@
+import ReactDOM from 'react-dom';
+
+console.log('debug');
diff --git a/apps/pwa/src/global_states/debug_setting.ts b/apps/pwa/src/global_states/debug_setting.ts
@@ -0,0 +1,23 @@
+import { DebugSetting } from '@/constants/debug_setting';
+import definition from '@/definition';
+import storage, { Key } from '@/storage';
+import parseSearch from '@/utils/parse_search';
+import XState from '@/utils/x_state';
+
+const query = parseSearch<'debug'>(window.location.search);
+const enable = Boolean(definition.DEVELOPMENT || query.debug);
+let initialDebugSetting: DebugSetting = {
+  audioLogEnabled: false,
+};
+if (enable) {
+  const debugSettingFromStorage = await storage.getItem(Key.DEBUG_SETTING);
+  if (debugSettingFromStorage) {
+    initialDebugSetting = debugSettingFromStorage;
+  }
+}
+
+const debugSetting = new XState(initialDebugSetting);
+debugSetting.onChange((ds) => storage.setItem(Key.DEBUG_SETTING, ds));
+
+export { enable };
+export default debugSetting;
diff --git a/apps/pwa/src/i18n/en_us.ts b/apps/pwa/src/i18n/en_us.ts
@@ -115,4 +115,10 @@ export default {
   pick_from_playlist_randomly: 'pick from playlist randomly',
   relocate_to_here: 'relocate to here',
   empty_playqueue: 'empty playqueue',
+  empty_playlist: 'empty playlist',
+  next_music: 'next music',
+  failed_to_play: 'failed to play',
+  auto_play_next_after_seconds: 'audo play next after %s1 seconds',
+  can_not_connect_to_server_temporarily:
+    'can not connect to server temporarily',
 };
diff --git a/apps/pwa/src/i18n/zh_hans.ts b/apps/pwa/src/i18n/zh_hans.ts
@@ -114,6 +114,11 @@ const zhCN: {
   pick_from_playlist_randomly: '随机从播放列表选取',
   relocate_to_here: '重定位到此处',
   empty_playqueue: '空的播放队列',
+  empty_playlist: '空的播放列表',
+  next_music: '下一首',
+  failed_to_play: '播放发生错误',
+  auto_play_next_after_seconds: '%s1 秒后自动播放下一首',
+  can_not_connect_to_server_temporarily: '暂时无法连接到服务器',
 };
 
 export default zhCN;
diff --git a/apps/pwa/src/index.html b/apps/pwa/src/index.html
@@ -13,7 +13,7 @@
     <link rel="shortcut icon" href="/logo.png" />
     <link
       rel="apple-touch-icon-precomposed"
-      href="/app_icon_maskable_180.png"
+      href="/app_icon_maskable_512.png"
     />
   </head>
   <body>

diff --git a/apps/pwa/src/index.tsx b/apps/pwa/src/index.tsx
@@ -1,17 +1,12 @@
 import './polyfill'; // 需要保证 polyfill 在第一个
+import './updater';
 import { createRoot } from 'react-dom/client';
 import { HashRouter } from 'react-router-dom';
 import 'cropperjs/dist/cropper.min.css';
-import notice from '@/utils/notice';
-import styled from 'styled-components';
-import IconButton from '@/components/icon_button';
-import { MdCheck, MdClose } from 'react-icons/md';
-import sleep from '#/utils/sleep';
 import App from './app';
-import definition from './definition';
 import Unsupported from './unsupported';
-import { t } from './i18n';
-import upperCaseFirstLetter from './style/upper_case_first_letter';
+import { enable as debugEnable } from './global_states/debug_setting';
+import logger from './utils/logger';
 
 function findUnsupportedList(): string[] {
   return [];
@@ -29,88 +24,8 @@ if (unsupportedList.length) {
   );
 }
 
-const VersionUpdater = styled.div`
-  > .text {
-    padding-top: 10px;
-    ${upperCaseFirstLetter}
-  }
-
-  > .action-box {
-    margin-top: 5px;
-
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 5px;
-
-    > .action {
-      color: #fff;
-    }
-  }
-`;
-if ('serviceWorker' in navigator) {
-  if (definition.WITH_SW) {
-    window.requestIdleCallback(() =>
-      import('workbox-window').then(({ Workbox }) => {
-        const wb = new Workbox('/service_worker.js');
-        wb.register();
-
-        /**
-         * 生产模式下询问是否升级
-         * 开发模式下默认升级
-         * @author mebtte<hi@mebtte.com>
-         */
-        if (process.env.NODE_ENV === 'production') {
-          let updateNoticeId: string = '';
-          wb.addEventListener('waiting', () => {
-            updateNoticeId = notice.info(
-              <VersionUpdater>
-                <div className="text">{t('pwa_update_question')}</div>
-                <div className="action-box">
-                  <IconButton
-                    className="action"
-                    onClick={() => {
-                      wb.messageSkipWaiting();
-                      return Promise.race([
-                        new Promise((resolve) =>
-                          wb.addEventListener('controlling', resolve),
-                        ),
-                        sleep(5000),
-                      ]).then(() => window.location.reload());
-                    }}
-                  >
-                    <MdCheck />
-                  </IconButton>
-                  <IconButton
-                    className="action"
-                    onClick={() => notice.close(updateNoticeId)}
-                  >
-                    <MdClose />
-                  </IconButton>
-                </div>
-              </VersionUpdater>,
-              { duration: 0, closable: false },
-            );
-          });
-
-          /**
-           * 定时检查更新
-           * @author mebtte<hi@mebtte.com>
-           */
-          window.setInterval(() => {
-            notice.close(updateNoticeId);
-            return wb.update();
-          }, 1000 * 60 * 60);
-        }
-      }),
-    );
-  } else {
-    window.requestIdleCallback(() => {
-      window.navigator.serviceWorker
-        .getRegistrations()
-        .then((registrations) =>
-          registrations.forEach((registration) => registration.unregister()),
-        );
-    });
-  }
+if (debugEnable) {
+  import('./debug').catch((error) =>
+    logger.error(error, 'Failed to load debug module'),
+  );
 }
diff --git a/apps/pwa/src/pages/player/audio/index.tsx b/apps/pwa/src/pages/player/audio/index.tsx