feat: ui improvement, working audio preview

src/decrypt-worker/constants.ts

@@ -4,4 +4,5 @@ export enum DECRYPTION_WORKER_ACTION_NAME {
 
 export interface DecryptionResult {
   decrypted: string; // blob uri
+  ext: string;
 }

src/features/file-listing/FileListing.tsx

@@ -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>
   );
 }

src/features/file-listing/FileRow.tsx

@@ -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>
+  );
+}

src/features/file-listing/fileListingSlice.ts

@@ -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
     });