Merge pull request #126 from mebtte/beta

MEBTTE · web-flow · commit 9409f2a7d8b0 · 2024-04-14T18:01:19.000+08:00
check usability of music file
diff --git a/apps/cli/src/commands/start_server/form_app/controllers/upload_asset.ts b/apps/cli/src/commands/start_server/form_app/controllers/upload_asset.ts
@@ -66,7 +66,7 @@ const ASSET_TYPE_MAP_OPTION: Record<
 
 export default async (ctx: Context) => {
   const { field, file } = await parseFormdata<'assetType', 'asset'>(ctx.req);
-  // @ts-expect-error
+  // @ts-expect-error: known type
   const assetType: AssetType | undefined = field.assetType
     ? field.assetType[0]
     : undefined;
@@ -75,12 +75,12 @@ export default async (ctx: Context) => {
     return ctx.except(ExceptionCode.WRONG_PARAMETER);
   }
 
-  const { maxSize, acceptTypes } = ASSET_TYPE_MAP[assetType];
+  const { maxSize, acceptType } = ASSET_TYPE_MAP[assetType];
   if (asset.size > maxSize) {
     return ctx.except(ExceptionCode.ASSET_OVERSIZE);
   }
   const ft = await fileType.fromFile(asset.path);
-  if (!ft || !acceptTypes.includes(ft.mime)) {
+  if (!ft || !new Set(Object.values(acceptType).flat()).has(ft.mime)) {
     return ctx.except(ExceptionCode.WRONG_ASSET_TYPE);
   }
 
diff --git a/apps/pwa/src/components/file_select.tsx b/apps/pwa/src/components/file_select.tsx
@@ -1,5 +1,4 @@
 import styled, { css } from 'styled-components';
-import upperCaseFirstLetter from '@/style/upper_case_first_letter';
 import { CSSVariable } from '../global_style';
 import useEvent from '../utils/use_event';
 import selectFile from '../utils/select_file';
@@ -16,6 +15,10 @@ const Style = styled.div<{ disabled: boolean }>`
   user-select: none;
   word-break: break-all;
 
+  > .placeholder {
+    color: ${CSSVariable.TEXT_COLOR_SECONDARY};
+  }
+
   &:active {
     border-color: ${CSSVariable.COLOR_PRIMARY};
     border-style: solid;
@@ -60,7 +63,7 @@ function FileSelect({
 
   return (
     <Style onClick={onSelectFile} disabled={disabled}>
-      {value ? value.name : placeholder}
+      {value ? value.name : <span className="placeholder">{placeholder}</span>}
     </Style>
   );
 }
diff --git a/apps/pwa/src/i18n/en_us.ts b/apps/pwa/src/i18n/en_us.ts
@@ -223,4 +223,5 @@ export default {
   feedback: 'feedback',
   fork_from_these_musics: 'fork from these musics',
   forked_by_these_musics: 'forked by these musics',
+  can_not_play_audio_file: 'this file can not be played',
 };
diff --git a/apps/pwa/src/i18n/zh_hans.ts b/apps/pwa/src/i18n/zh_hans.ts
@@ -211,6 +211,7 @@ const zhCN: {
   feedback: '反馈',
   fork_from_these_musics: '二次创作自以下音乐',
   forked_by_these_musics: '被以下音乐二次创作',
+  can_not_play_audio_file: '音乐文件无法被播放',
 };
 
 export default zhCN;
diff --git a/apps/pwa/src/pages/player/music_drawer/edit_menu.tsx b/apps/pwa/src/pages/player/music_drawer/edit_menu.tsx
@@ -57,6 +57,7 @@ import playerEventemitter, {
 } from '../eventemitter';
 import MusicInfo from '../components/music_info';
 import MissingSinger from '../components/missing_singer';
+import upperCaseFirstLetter from '#/utils/upper_case_first_letter';
 
 interface Singer {
   id: string;
@@ -378,10 +379,16 @@ function EditMenu({ music }: { music: MusicDetail }) {
             dialog.fileSelect({
               title: t('modify_file_of_music'),
               label: t('file_of_music'),
-              acceptTypes: ASSET_TYPE_MAP[AssetType.MUSIC].acceptTypes,
-              placeholder: t(
-                'one_of_formats',
-                ASSET_TYPE_MAP[AssetType.MUSIC].acceptTypes.join(','),
+              acceptTypes: Object.values(
+                ASSET_TYPE_MAP[AssetType.MUSIC].acceptType,
+              ).flat(),
+              placeholder: upperCaseFirstLetter(
+                t(
+                  'one_of_formats',
+                  Object.keys(ASSET_TYPE_MAP[AssetType.MUSIC].acceptType).join(
+                    '/',
+                  ),
+                ),
               ),
               onConfirm: async (file) => {
                 if (!file) {
diff --git a/apps/pwa/src/pages/player/pages/my_music/create_music_dialog/index.tsx b/apps/pwa/src/pages/player/pages/my_music/create_music_dialog/index.tsx
@@ -40,7 +40,7 @@ import playerEventemitter, {
 } from '../../../eventemitter';
 import { Singer } from './constants';
 import upperCaseFirstLetter from '#/utils/upper_case_first_letter';
-import { base64ToCover } from './utils';
+import { base64ToCover, canAudioPlay } from './utils';
 
 const maskProps: { style: CSSProperties } = {
   style: { zIndex: ZIndex.DIALOG },
@@ -90,33 +90,43 @@ function CreateMusicDialog() {
     setMusicType(option.actualValue);
 
   const [asset, setAsset] = useState<File | null>(null);
-  const onAssetChange = (a) => {
+  const onAssetChange = (a: File | null) => {
     setAsset(a);
 
-    getMusicFileMetadata(a)
-      .then((metadata) => {
-        const { title, artist } = metadata;
-        if (!name && title) {
-          setName(title);
+    if (a) {
+      canAudioPlay(a).then((canPlay) => {
+        if (!canPlay) {
+          setAsset(null);
+          return notice.error(t('can_not_play_audio_file'));
         }
-        if (!singerList.length && artist) {
-          searchSingerRequest({
-            keyword: artist,
-            page: 1,
-            pageSize: 10,
-            requestMinimalDuration: 0,
-          })
-            .then((data) => {
-              if (!singerList.length) {
-                setSingerList(data.singerList);
-              }
+      });
+      getMusicFileMetadata(a)
+        .then((metadata) => {
+          const { title, artist } = metadata;
+          if (!name && title) {
+            setName(title);
+          }
+          if (!singerList.length && artist) {
+            searchSingerRequest({
+              keyword: artist,
+              page: 1,
+              pageSize: 10,
+              requestMinimalDuration: 0,
             })
-            .catch((error) => logger.error(error, 'Failed to search singers'));
-        }
-      })
-      .catch((error) =>
-        logger.error(error, "Failed to parse music's metadata"),
-      );
+              .then((data) => {
+                if (!singerList.length) {
+                  setSingerList(data.singerList);
+                }
+              })
+              .catch((error) =>
+                logger.error(error, 'Failed to search singers'),
+              );
+          }
+        })
+        .catch((error) =>
+          logger.error(error, "Failed to parse music's metadata"),
+        );
+    }
   };
 
   const [loading, setLoading] = useState(false);
@@ -229,11 +239,13 @@ function CreateMusicDialog() {
               value={asset}
               onChange={onAssetChange}
               disabled={loading}
-              acceptTypes={ASSET_TYPE_MAP[AssetType.MUSIC].acceptTypes}
+              acceptTypes={Object.values(
+                ASSET_TYPE_MAP[AssetType.MUSIC].acceptType,
+              ).flat()}
               placeholder={upperCaseFirstLetter(
-                `${t('empty_file_warning')}, ${t(
-                  'supported_formats',
-                )} ${ASSET_TYPE_MAP[AssetType.MUSIC].acceptTypes.join(', ')}`,
+                `${t('supported_formats')}: ${Object.keys(
+                  ASSET_TYPE_MAP[AssetType.MUSIC].acceptType,
+                ).join('/')}`,
               )}
             />
           </Label>
diff --git a/apps/pwa/src/pages/player/pages/my_music/create_music_dialog/utils.ts b/apps/pwa/src/pages/player/pages/my_music/create_music_dialog/utils.ts
@@ -25,3 +25,18 @@ export async function base64ToCover(base64: string) {
     canvas.toBlob((blob) => resolve(blob!), 'image/jpeg', 0.8),
   );
 }
+
+export function canAudioPlay(file: File) {
+  const url = URL.createObjectURL(file);
+  const audio = new Audio();
+  return new Promise<boolean>((resolve) => {
+    audio.muted = true;
+    audio.autoplay = true;
+    audio.onplay = () => resolve(true);
+    audio.onerror = () => resolve(false);
+    audio.src = url;
+  }).finally(() => {
+    audio.pause();
+    URL.revokeObjectURL(url);
+  });
+}
diff --git a/shared/constants/index.ts b/shared/constants/index.ts
@@ -25,35 +25,45 @@ export const ASSET_TYPES = Object.values(AssetType);
 export const ASSET_TYPE_MAP: Record<
   AssetType,
   {
-    acceptTypes: string[];
+    acceptType: Record<string, string[]>;
     maxSize: number;
   }
 > = {
   [AssetType.SINGER_AVATAR]: {
-    acceptTypes: ['image/jpeg'],
+    acceptType: {
+      jpg: ['image/jpeg'],
+      jpeg: ['image/jpeg'],
+    },
     maxSize: 1024 * 1024 * 2,
   },
   [AssetType.MUSICBILL_COVER]: {
-    acceptTypes: ['image/jpeg'],
+    acceptType: {
+      jpg: ['image/jpeg'],
+      jpeg: ['image/jpeg'],
+    },
     maxSize: 1024 * 1024 * 2,
   },
   [AssetType.MUSIC_COVER]: {
-    acceptTypes: ['image/jpeg'],
+    acceptType: {
+      jpg: ['image/jpeg'],
+      jpeg: ['image/jpeg'],
+    },
     maxSize: 1024 * 1024 * 2,
   },
   [AssetType.USER_AVATAR]: {
-    acceptTypes: ['image/jpeg'],
+    acceptType: {
+      jpg: ['image/jpeg'],
+      jpeg: ['image/jpeg'],
+    },
     maxSize: 1024 * 1024 * 2,
   },
   [AssetType.MUSIC]: {
-    acceptTypes: [
-      'audio/mpeg', // .mp3
-      'audio/mp4', // .mp4
-      'audio/flac', // .flac
-      'audio/x-flac', // .flac
-      'audio/m4a', // .m4a
-      'audio/x-m4a', // .m4a
-    ],
+    acceptType: {
+      mp3: ['audio/mpeg'],
+      flac: ['audio/flac', 'audio/x-flac'],
+      m4a: ['audio/m4a', 'audio/x-m4a'],
+      mp4: ['audio/mp4', 'video/mp4'],
+    },
     maxSize: 1024 * 1024 * 200,
   },
 };
