fix error report when creating music

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/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/i18n/en_us.ts

@@ -121,4 +121,11 @@ export default {
   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

@@ -119,6 +119,13 @@ const zhCN: {
   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/pages/player/pages/my_music/create_music_dialog/index.tsx

@@ -11,11 +11,11 @@ import Button, { Variant } from '@/components/button';
 import Input from '@/components/input';
 import Label from '@/components/label';
 import Select, { Option as SelectOption } from '@/components/select';
+import { t } from '@/i18n';
 import {
   AllowUpdateKey,
   MusicType,
   MUSIC_TYPES,
-  MUSIC_TYPE_MAP,
   NAME_MAX_LENGTH,
 } from '#/constants/music';
 import FileSelect from '@/components/file_select';
@@ -34,6 +34,8 @@ import getMusicFileMetadata, {
   base64ToCover,
 } from '@/utils/get_music_file_metadata';
 import logger from '@/utils/logger';
+import { MUSIC_TYPE_MAP } from '@/constants/music';
+import capitalize from '#/utils/capitalize';
 import { ZIndex } from '../../../constants';
 import useOpen from './use_open';
 import e, { EventType } from '../eventemitter';
@@ -45,9 +47,9 @@ import playerEventemitter, {
 const maskProps: { style: CSSProperties } = {
   style: { zIndex: ZIndex.DIALOG },
 };
-const MUSIC_TYPE_OPTIONS: SelectOption<MusicType>[] = MUSIC_TYPES.map((t) => ({
-  label: MUSIC_TYPE_MAP[t].label,
-  value: t,
+const MUSIC_TYPE_OPTIONS: SelectOption<MusicType>[] = MUSIC_TYPES.map((mt) => ({
+  label: capitalize(MUSIC_TYPE_MAP[mt].label),
+  value: mt,
 }));
 interface Singer {
   id: string;
@@ -95,11 +97,11 @@ function CreateMusicDialog() {
   const onMusicTypeChange = (option: SelectOption<MusicType>) =>
     setMusicType(option.value);
 
-  const [sq, setSq] = useState<File | null>(null);
-  const onSqChange = (s) => {
-    setSq(s);
+  const [asset, setAsset] = useState<File | null>(null);
+  const onAssetChange = (a) => {
+    setAsset(a);
 
-    getMusicFileMetadata(s)
+    getMusicFileMetadata(a)
       .then((metadata) => {
         const { title, artist } = metadata;
         if (!name && title) {
@@ -117,39 +119,41 @@ function CreateMusicDialog() {
                 setSingerList(data.singerList);
               }
             })
-            .catch((error) => logger.error(error, '搜索歌手列表失败'));
+            .catch((error) => logger.error(error, 'Failed to search singers'));
         }
       })
-      .catch((error) => logger.error(error, '解析音乐文件 metadata 失败'));
+      .catch((error) =>
+        logger.error(error, "Failed to parse music's metadata"),
+      );
   };
 
   const [loading, setLoading] = useState(false);
   const onCreate = useEvent(async () => {
-    if (!singerList) {
-      return notice.error('请选择歌手');
+    if (!singerList.length) {
+      return notice.error(t('please_select_singers'));
     }
 
     const trimmedName = name.trim();
     if (!trimmedName) {
-      return notice.error('请输入名字');
+      return notice.error(t('please_enter_the_name'));
     }
 
-    if (!sq) {
-      return notice.error('请选择标准音质文件');
+    if (!asset) {
+      return notice.error(t('please_select_the_music_file'));
     }
 
     setLoading(true);
     try {
-      const asset = await uploadAsset(sq, AssetType.MUSIC);
+      const { id: musicAssetId } = await uploadAsset(asset, AssetType.MUSIC);
       const id = await createMusic({
         name: trimmedName,
         singerIds: singerList.map((s) => s.id),
         type: musicType,
-        asset: asset.id,
+        asset: musicAssetId,
       });
 
       try {
-        const { lyric, pictureBase64 } = await getMusicFileMetadata(sq);
+        const { lyric, pictureBase64 } = await getMusicFileMetadata(asset);
         const updateCover = async (pb: string) => {
           const coverBlob = await base64ToCover(pb);
           const { id: assetId } = await uploadAsset(
@@ -176,15 +180,15 @@ function CreateMusicDialog() {
           pictureBase64 ? updateCover(pictureBase64) : null,
         ]);
       } catch (error) {
-        logger.error(error, '从音乐文件解析 metadata 失败');
+        logger.error(error, "Failed to parse music's metadata");
       }
 
       e.emit(EventType.RELOAD_MUSIC_LIST, null);
       playerEventemitter.emit(PlayerEventType.OPEN_MUSIC_DRAWER, { id });
 
       onClose();
     } catch (error) {
-      logger.error(error, '创建音乐失败');
+      logger.error(error, 'Failed to create music');
       notice.error(error.message);
     }
     setLoading(false);
@@ -195,19 +199,19 @@ function CreateMusicDialog() {
       setName('');
       setSingerList([]);
       setMusicType(MusicType.SONG);
-      setSq(null);
+      setAsset(null);
     }
   }, [open]);
 
   return (
     <Dialog open={open} maskProps={maskProps}>
       <Container>
-        <Title>创建音乐</Title>
+        <Title>{t('create_music')}</Title>
         <StyledContent>
-          <Label label="类型">
+          <Label label={t('music_type_short')}>
             <Select<MusicType>
               value={{
-                label: MUSIC_TYPE_MAP[musicType].label,
+                label: capitalize(MUSIC_TYPE_MAP[musicType].label),
                 value: musicType,
               }}
               onChange={onMusicTypeChange}
@@ -216,25 +220,25 @@ function CreateMusicDialog() {
             />
           </Label>
           <FileSelect
-            label="标准音质文件"
-            value={sq}
-            onChange={onSqChange}
+            label={t('music_file')}
+            value={asset}
+            onChange={onAssetChange}
             disabled={loading}
             acceptTypes={ASSET_TYPE_MAP[AssetType.MUSIC].acceptTypes}
-            placeholder={`选择文件, 支持以下格式 ${ASSET_TYPE_MAP[
-              AssetType.MUSIC
-            ].acceptTypes.join(', ')}`}
+            placeholder={`${t('please_select_the_music_file')}, ${t(
+              'supported_formats',
+            )} ${ASSET_TYPE_MAP[AssetType.MUSIC].acceptTypes.join(', ')}`}
           />
           <MultipleSelect<Singer>
-            label="歌手列表"
+            label={t('singer_list')}
             value={singerList.map(formatSingerToMultipleSelectOption)}
             onChange={onSingerListChange}
             optionsGetter={searchSinger}
             disabled={loading}
             addon={<MissingSinger />}
           />
           <Input
-            label="音乐名字"
+            label={t('name')}
             inputProps={{
               value: name,
               onChange: onNameChange,
@@ -245,14 +249,14 @@ function CreateMusicDialog() {
         </StyledContent>
         <Action>
           <Button onClick={onClose} disabled={loading}>
-            取消
+            {t('cancel')}
           </Button>
           <Button
             variant={Variant.PRIMARY}
             onClick={onCreate}
             loading={loading}
           >
-            创建
+            {t('create')}
           </Button>
         </Action>
       </Container>

apps/pwa/src/utils/dialog/textarea_list.tsx

@@ -24,6 +24,11 @@ const StyledContent = styled(Content)`
     flex-shrink: 0;
   }
 `;
+const Addon = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+`;
 
 function TextareaListContent({
   onClose,
@@ -116,7 +121,7 @@ function TextareaListContent({
             key={value.id}
             label={`${textareaList.label} ${index + 1}`}
             addon={
-              <>
+              <Addon>
                 <IconButton
                   size={ComponentSize.SMALL}
                   onClick={() => onOpenFile(value.id)}
@@ -131,7 +136,7 @@ function TextareaListContent({
                 >
                   <MdDelete />
                 </IconButton>
-              </>
+              </Addon>
             }
             textareaProps={{
               value: value.content,

shared/constants/music.ts

@@ -16,11 +16,6 @@ export const MUSIC_TYPES = Object.values(MusicType).filter(
   (mt) => typeof mt === 'number',
 ) as MusicType[];
 
-export const MUSIC_TYPE_MAP: Record<MusicType, { label: string }> = {
-  [MusicType.SONG]: { label: '歌曲' },
-  [MusicType.INSTRUMENTAL]: { label: '乐曲' },
-};
-
 export const NAME_MAX_LENGTH = 128;
 
 export const MUSIC_MAX_ALIAS_COUNT = 5;