ahdoawhfo/um-react
1
0
Fork 0
mirror of https://git.um-react.app/um/um-react.git synced 2025-11-28 03:23:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: ui improvement, working audio preview

Browse Source
This commit is contained in:
鲁树人
2023-05-14 23:47:56 +01:00
parent 8ab267019c
commit b99590908e
4 changed files with 119 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/features/file-listing/FileListing.tsx
View File

@@ -1,72 +1,17 @@
import {
Avatar,
Box,
Link,
Table,
TableContainer,
Tbody,
Td,
Text,
Th,
Thead,
Tr,
Wrap,
WrapItem,
} from '@chakra-ui/react';
import { VStack } from '@chakra-ui/react';
import { ProcessState, selectFiles } from './fileListingSlice';
import { selectFiles } from './fileListingSlice';
import { useAppSelector } from '../../hooks';
import { FileRow } from './FileRow';
export function FileListing() {
const files = useAppSelector(selectFiles);
return (
<TableContainer>
<Table variant="striped">
<Thead>
<Tr>
<Th w="1%">封面</Th>
<Th>元信息</Th>
<Th>操作</Th>
</Tr>
</Thead>
<Tbody>
{Object.entries(files).map(([id, file]) => (
<Tr key={id}>
<Td>
{file.metadata.cover && <Avatar size="sm" name="专辑封面" src={file.metadata.cover} />}
{!file.metadata.cover && <Text>暂无封面</Text>}
</Td>
<Td>
<Box as="h4" fontWeight="semibold" mt="1">
{file.metadata.name || file.fileName}
</Box>
{file.state === ProcessState.COMPLETE && (
<>
<Text>专辑: {file.metadata.album}</Text>
<Text>艺术家: {file.metadata.artist}</Text>
<Text>专辑艺术家: {file.metadata.albumArtist}</Text>
</>
)}
</Td>
<Td>
<Wrap>
<WrapItem>播放</WrapItem>
<WrapItem>
{/* TODO: Use correct file name */}
{file.decrypted && (
<Link isExternal href={file.decrypted} download="test.flac">
下载
</Link>
)}
</WrapItem>
<WrapItem>删除</WrapItem>
</Wrap>
</Td>
</Tr>
))}
</Tbody>
</Table>
</TableContainer>
<VStack>
{Object.entries(files).map(([id, file]) => (
<FileRow key={id} id={id} file={file} />
))}
</VStack>
);
}