From b605c1a711d2cf7569535bb3ef46a60f222b5328 Mon Sep 17 00:00:00 2001 From: mebtte Date: Sat, 16 Sep 2023 17:16:40 +0800 Subject: [PATCH] fix error report when creating music --- apps/pwa/src/components/select/select.tsx | 11 +-- apps/pwa/src/constants/music.ts | 7 ++ apps/pwa/src/i18n/en_us.ts | 7 ++ apps/pwa/src/i18n/zh_hans.ts | 7 ++ .../my_music/create_music_dialog/index.tsx | 72 ++++++++++--------- apps/pwa/src/utils/dialog/textarea_list.tsx | 9 ++- shared/constants/music.ts | 5 -- 7 files changed, 72 insertions(+), 46 deletions(-) create mode 100644 apps/pwa/src/constants/music.ts diff --git a/apps/pwa/src/components/select/select.tsx b/apps/pwa/src/components/select/select.tsx index 4677d953..4d3748db 100644 --- a/apps/pwa/src/components/select/select.tsx +++ b/apps/pwa/src/components/select/select.tsx @@ -38,13 +38,14 @@ function Wrapper({ ...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, diff --git a/apps/pwa/src/constants/music.ts b/apps/pwa/src/constants/music.ts new file mode 100644 index 00000000..1a75192f --- /dev/null +++ b/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.SONG]: { label: t('music_type_song') }, + [MusicType.INSTRUMENTAL]: { label: t('music_type_instrument') }, +}; diff --git a/apps/pwa/src/i18n/en_us.ts b/apps/pwa/src/i18n/en_us.ts index 5d19c9ad..8fd1a55d 100644 --- a/apps/pwa/src/i18n/en_us.ts +++ b/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', }; diff --git a/apps/pwa/src/i18n/zh_hans.ts b/apps/pwa/src/i18n/zh_hans.ts index 6951258d..0664e144 100644 --- a/apps/pwa/src/i18n/zh_hans.ts +++ b/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; 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 index 2e2e6926..a4c3d312 100644 --- 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 @@ -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[] = MUSIC_TYPES.map((t) => ({ - label: MUSIC_TYPE_MAP[t].label, - value: t, +const MUSIC_TYPE_OPTIONS: SelectOption[] = 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) => setMusicType(option.value); - const [sq, setSq] = useState(null); - const onSqChange = (s) => { - setSq(s); + const [asset, setAsset] = useState(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,7 +180,7 @@ 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); @@ -184,7 +188,7 @@ function CreateMusicDialog() { 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 ( - 创建音乐 + {t('create_music')} - diff --git a/apps/pwa/src/utils/dialog/textarea_list.tsx b/apps/pwa/src/utils/dialog/textarea_list.tsx index 05cd911a..1c40adb6 100644 --- a/apps/pwa/src/utils/dialog/textarea_list.tsx +++ b/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={ - <> + onOpenFile(value.id)} @@ -131,7 +136,7 @@ function TextareaListContent({ > - + } textareaProps={{ value: value.content, diff --git a/shared/constants/music.ts b/shared/constants/music.ts index f5cc8b04..a4ff7113 100644 --- a/shared/constants/music.ts +++ b/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.SONG]: { label: '歌曲' }, - [MusicType.INSTRUMENTAL]: { label: '乐曲' }, -}; - export const NAME_MAX_LENGTH = 128; export const MUSIC_MAX_ALIAS_COUNT = 5;