feat: ui improvement, working audio preview
This commit is contained in:
parent
8ab267019c
commit
b99590908e
@ -4,4 +4,5 @@ export enum DECRYPTION_WORKER_ACTION_NAME {
|
||||
|
||||
export interface DecryptionResult {
|
||||
decrypted: string; // blob uri
|
||||
ext: string;
|
||||
}
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
107
src/features/file-listing/FileRow.tsx
Normal file
107
src/features/file-listing/FileRow.tsx
Normal file
@ -0,0 +1,107 @@
|
||||
import {
|
||||
Avatar,
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
CardBody,
|
||||
Center,
|
||||
Grid,
|
||||
GridItem,
|
||||
Link,
|
||||
Text,
|
||||
VStack,
|
||||
Wrap,
|
||||
WrapItem,
|
||||
} from '@chakra-ui/react';
|
||||
import { DecryptedAudioFile, ProcessState } from './fileListingSlice';
|
||||
import { useRef } from 'react';
|
||||
|
||||
interface FileRowProps {
|
||||
id: string;
|
||||
file: DecryptedAudioFile;
|
||||
}
|
||||
|
||||
export function FileRow({ id, file }: FileRowProps) {
|
||||
const isDecrypted = file.state === ProcessState.COMPLETE;
|
||||
|
||||
const decryptedName = file.fileName.replace(/\.[a-z\d]{3,6}$/, '') + '.' + file.ext;
|
||||
|
||||
const audioPlayerRef = useRef<HTMLAudioElement>(null);
|
||||
const togglePlay = () => {
|
||||
const player = audioPlayerRef.current;
|
||||
if (!player) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (player.paused) {
|
||||
player.play();
|
||||
} else {
|
||||
player.pause();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card w="full">
|
||||
<CardBody>
|
||||
<Grid
|
||||
templateAreas={`
|
||||
"cover title title"
|
||||
"cover meta action"
|
||||
`}
|
||||
gridTemplateRows={'min-content 1fr'}
|
||||
gridTemplateColumns={'160px 1fr'}
|
||||
gap="1"
|
||||
>
|
||||
<GridItem area="cover">
|
||||
<Center w="160px" h="160px">
|
||||
{file.metadata.cover && <Avatar size="sm" name="专辑封面" src={file.metadata.cover} />}
|
||||
{!file.metadata.cover && <Text>暂无封面</Text>}
|
||||
</Center>
|
||||
</GridItem>
|
||||
<GridItem area="title">
|
||||
<Box w="full" as="h4" fontWeight="semibold" mt="1">
|
||||
{file.metadata.name || file.fileName}
|
||||
</Box>
|
||||
</GridItem>
|
||||
<GridItem area="meta">
|
||||
{isDecrypted && (
|
||||
<Box>
|
||||
<Text>专辑: {file.metadata.album}</Text>
|
||||
<Text>艺术家: {file.metadata.artist}</Text>
|
||||
<Text>专辑艺术家: {file.metadata.albumArtist}</Text>
|
||||
</Box>
|
||||
)}
|
||||
</GridItem>
|
||||
<GridItem area="action">
|
||||
<VStack>
|
||||
{file.decrypted && <audio controls autoPlay={false} src={file.decrypted} ref={audioPlayerRef} />}
|
||||
|
||||
<Wrap>
|
||||
{isDecrypted && (
|
||||
<WrapItem>
|
||||
<Button type="button" onClick={togglePlay}>
|
||||
播放/暂停
|
||||
</Button>
|
||||
</WrapItem>
|
||||
)}
|
||||
<WrapItem>
|
||||
{/* TODO: Use correct file name */}
|
||||
{file.decrypted && (
|
||||
<Link type="button" as={Button} isExternal href={file.decrypted} download={decryptedName}>
|
||||
下载
|
||||
</Link>
|
||||
)}
|
||||
</WrapItem>
|
||||
<WrapItem>
|
||||
<Button type="button" onClick={() => alert('todo')}>
|
||||
删除
|
||||
</Button>
|
||||
</WrapItem>
|
||||
</Wrap>
|
||||
</VStack>
|
||||
</GridItem>
|
||||
</Grid>
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
}
|
@ -27,6 +27,7 @@ export interface AudioMetadata {
|
||||
export interface DecryptedAudioFile {
|
||||
fileName: string;
|
||||
raw: string; // blob uri
|
||||
ext: string;
|
||||
decrypted: string; // blob uri
|
||||
state: ProcessState;
|
||||
errorMessage: null | string;
|
||||
@ -65,6 +66,7 @@ export const fileListingSlice = createSlice({
|
||||
fileName: payload.fileName,
|
||||
raw: payload.blobURI,
|
||||
decrypted: '',
|
||||
ext: '',
|
||||
state: ProcessState.UNTOUCHED,
|
||||
errorMessage: null,
|
||||
metadata: {
|
||||
@ -91,6 +93,7 @@ export const fileListingSlice = createSlice({
|
||||
|
||||
file.state = ProcessState.COMPLETE;
|
||||
file.decrypted = action.payload.decrypted;
|
||||
file.ext = action.payload.ext;
|
||||
// TODO: populate file metadata
|
||||
});
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user