Merge pull request #90 from mebtte/beta

show audio buffered percent

.github/workflows/build_and_release.yaml

@@ -12,7 +12,7 @@ jobs:
       - uses: actions/checkout@main
       - uses: actions/setup-node@main
         with:
-          node-version: 16
+          node-version: 18
 
       - run: npm run build
 

.nvmrc

@@ -1 +1 @@
-16
+18

apps/cli/tsconfig.json

@@ -3,8 +3,7 @@
 
   "compilerOptions": {
     "module": "CommonJS",
-    "target": "ES2015",
-    "lib": ["ES2015.Promise"],
+    "lib": ["ESNext"],
     "allowJs": true,
 
     "baseUrl": ".",

apps/pwa/src/components/select/select.tsx

@@ -38,13 +38,14 @@ function Wrapper<Value>({
           ...baseStyles,
           ...style,
         }),
-        control: (baseStyles, { menuIsOpen, isFocused }) => ({
+        control: (baseStyles, { menuIsOpen, isFocused, isDisabled }) => ({
           ...baseStyles,
           color: CSSVariable.TEXT_COLOR_PRIMARY,
-          borderColor:
-            menuIsOpen || isFocused
-              ? `${CSSVariable.COLOR_PRIMARY} !important`
-              : `${CSSVariable.COLOR_BORDER} !important`,
+          borderColor: isDisabled
+            ? `${CSSVariable.TEXT_COLOR_DISABLED} !important`
+            : menuIsOpen || isFocused
+            ? `${CSSVariable.COLOR_PRIMARY} !important`
+            : `${CSSVariable.COLOR_BORDER} !important`,
         }),
         menu: (baseStyles) => ({
           ...baseStyles,

apps/pwa/src/components/slider.tsx

@@ -3,27 +3,29 @@ import {
   HtmlHTMLAttributes,
   PointerEvent,
   PointerEventHandler,
+  ReactNode,
   useRef,
   useState,
 } from 'react';
 import styled from 'styled-components';
 import classnames from 'classnames';
 import { IS_TOUCHABLE } from '@/constants/browser';
 import { flexCenter } from '@/style/flexbox';
+import absoluteFullSize from '@/style/absolute_full_size';
 
 const THUMB_SIZE = 24;
 const Style = styled.div`
   position: relative;
 
   height: 5px;
-  background-color: rgb(145 222 202);
+  background-color: ${CSSVariable.BACKGROUND_COLOR_LEVEL_THREE};
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
-
+  touch-action: none;
   transition: 100ms;
 
   > .progress {
-    height: 100%;
+    ${absoluteFullSize}
 
     background-color: ${CSSVariable.COLOR_PRIMARY};
     transform-origin: left;
@@ -67,11 +69,13 @@ function Slider({
   onChange,
   max = 1,
   className,
+  secondTrack,
   ...props
 }: Omit<HtmlHTMLAttributes<HTMLDivElement>, 'onChange'> & {
   current: number;
   onChange?: (v: number) => void;
   max?: number;
+  secondTrack?: ReactNode;
 }) {
   const pointerDownRef = useRef(false);
 
@@ -117,6 +121,7 @@ function Slider({
       onPointerUp={onPointerUp}
       onPointerMove={onPointerMove}
     >
+      {secondTrack}
       <div
         className="progress"
         style={{

apps/pwa/src/components/tab_list.tsx

@@ -1,5 +1,6 @@
 import { HtmlHTMLAttributes } from 'react';
 import styled, { css } from 'styled-components';
+import capitalize from '@/style/capitalize';
 import { CSSVariable } from '../global_style';
 
 const Style = styled.div`
@@ -16,10 +17,10 @@ const Tab = styled.div<{ active: boolean }>`
   > .label {
     padding: 8px 0 5px 0;
 
-    letter-spacing: 1px;
     font-weight: bold;
     font-size: 14px;
     transition: inherit;
+    ${capitalize}
   }
 
   > .indicator {

apps/pwa/src/constants/music.ts

@@ -0,0 +1,7 @@
+import { MusicType } from '#/constants/music';
+import { t } from '@/i18n';
+
+export const MUSIC_TYPE_MAP: Record<MusicType, { label: string }> = {
+  [MusicType.SONG]: { label: t('music_type_song') },
+  [MusicType.INSTRUMENTAL]: { label: t('music_type_instrument') },
+};

apps/pwa/src/global_style.ts

@@ -19,6 +19,8 @@ export enum CSSVariable {
   BACKGROUND_COLOR_LEVEL_ONE = 'var(--background-color-level-one)',
   BACKGROUND_COLOR_LEVEL_TWO = 'var(--background-color-level-two)',
   BACKGROUND_COLOR_LEVEL_THREE = 'var(--background-color-level-three)',
+  BACKGROUND_COLOR_LEVEL_FOUR = 'var(--background-color-level-four)',
+  BACKGROUND_COLOR_LEVEL_FIVE = 'var(--background-color-level-five)',
 }
 
 const CSS_VARIABLE_MAP_VALUE: Record<CSSVariable, string> = {
@@ -40,6 +42,8 @@ const CSS_VARIABLE_MAP_VALUE: Record<CSSVariable, string> = {
   [CSSVariable.BACKGROUND_COLOR_LEVEL_ONE]: 'rgb(44 182 125 / 0.06)',
   [CSSVariable.BACKGROUND_COLOR_LEVEL_TWO]: 'rgb(44 182 125 / 0.1)',
   [CSSVariable.BACKGROUND_COLOR_LEVEL_THREE]: 'rgb(44 182 125 / 0.14)',
+  [CSSVariable.BACKGROUND_COLOR_LEVEL_FOUR]: 'rgb(44 182 125 / 0.18)',
+  [CSSVariable.BACKGROUND_COLOR_LEVEL_FIVE]: 'rgb(44 182 125 / 0.22)',
 };
 
 export const GlobalStyle = createGlobalStyle`

apps/pwa/src/i18n/en_us.ts

@@ -112,4 +112,20 @@ export default {
   pwa_update_question: 'do you want to reload to switch new version now ?',
   music: 'music',
   public_musicbill: 'public musicbill',
+  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',
+  please_select_the_music_file: 'please select the music file',
+  music_type_short: 'type',
+  music_type_song: 'song',
+  music_type_instrument: 'instrument',
+  music_file: 'music file',
+  singer_list: 'singer list',
+  supported_formats: 'supported formats',
 };

apps/pwa/src/i18n/zh_hans.ts

@@ -111,6 +111,21 @@ const zhCN: {
   pwa_update_question: '检查到新版本, 是否马上加载?',
   music: '音乐',
   public_musicbill: '公开乐单',
+  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: '暂时无法连接到服务器',
+  please_select_the_music_file: '请选择音乐文件',
+  music_type_short: '类型',
+  music_type_song: '歌曲',
+  music_type_instrument: '乐曲',
+  music_file: '音乐文件',
+  singer_list: '歌手列表',
+  supported_formats: '支持的格式',
 };
 
 export default zhCN;

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>

apps/pwa/src/index.tsx

@@ -1,17 +1,10 @@
 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';
 
 function findUnsupportedList(): string[] {
   return [];
@@ -28,89 +21,3 @@ if (unsupportedList.length) {
     </HashRouter>,
   );
 }
-
-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()),
-        );
-    });
-  }
-}