feat(AlbumDescription): 将描述属性更改为接收完整专辑对象，并在对话框中显示专辑名称

thoulee21 · Dec 14, 2024 · bfd4574 · bfd4574
1 parent d9e9390
commit bfd4574
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 36 deletions.
diff --git a/src/components/AlbumDescription.tsx b/src/components/AlbumDescription.tsx
@@ -1,16 +1,19 @@
 import React, { useCallback, useState } from 'react';
 import { ScrollView, StyleSheet, TouchableOpacity } from 'react-native';
 import { Button, Dialog, Portal, Text, useTheme } from 'react-native-paper';
+import type { MainAlbum } from '../types/albumDetail';
 
 export const AlbumDescription = (
-  { description }: { description?: string }
+  { album }: { album: MainAlbum }
 ) => {
   const appTheme = useTheme();
   const [
     dialogVisible,
     setDialogVisible,
   ] = useState(false);
 
+  const { description } = album;
+
   const showDialog = useCallback(() => {
     if (description) {
       setDialogVisible(true);
@@ -40,7 +43,7 @@ export const AlbumDescription = (
           onDismiss={hideDialog}
           style={styles.dialog}
         >
-          <Dialog.Title>Album Description</Dialog.Title>
+          <Dialog.Title>{album.name}</Dialog.Title>
           <ScrollView
             contentContainerStyle={styles.biggerPadding}
           >

diff --git a/src/pages/album.tsx b/src/pages/album.tsx
@@ -17,44 +17,49 @@ import { Main } from '../types/albumDetail';
 import { songToTrack } from '../utils/songToTrack';
 
 export function AlbumDetail() {
-    const insets = useSafeAreaInsets();
-    const dispatch = useAppDispatch();
-    const { album } = (useRoute().params as { album: HotAlbum });
+  const insets = useSafeAreaInsets();
+  const dispatch = useAppDispatch();
+  const { album } = (useRoute().params as { album: HotAlbum });
 
-    const { data, error } = useSWRInfinite<Main>((index) =>
-        `http://music.163.com/api/album/${album.id}?ext=true&offset=${index * 10}&total=true&limit=10`,
-    );
+  const { data, error } = useSWRInfinite<Main>((index) =>
+    `http://music.163.com/api/album/${album.id}?ext=true&offset=${index * 10}&total=true&limit=10`,
+  );
 
-    const playAll = async () => {
-        const tracksData = data?.flatMap(d => d.album.songs)
-            .map(songToTrack) as TrackType[];
-        await dispatch(setQueueAsync(tracksData));
-        await TrackPlayer.play();
-    };
+  const playAll = async () => {
+    const tracksData = data?.flatMap(d => d.album.songs)
+      .map(songToTrack) as TrackType[];
+    await dispatch(setQueueAsync(tracksData));
+    await TrackPlayer.play();
+  };
 
-    return (
-        <BlurBackground style={[
-            styles.container,
-            { paddingTop: insets.top }]
-        }>
-            <AlbumHeaderCard album={album} />
-            <AlbumDescription
-                description={data && data[0].album.description}
-            />
-            {!error ? <TracksHeader
-                onPress={playAll}
-                length={data?.flatMap(
-                    (d) => d.album.songs
-                ).length || 0}
-            /> : null}
-            <AlbumContent album={album} />
-        </BlurBackground>
-    );
+  return (
+    <BlurBackground style={[
+      styles.container,
+      { paddingTop: insets.top }]
+    }>
+      <AlbumHeaderCard album={album} />
+      {data && data[0].album && (
+        <AlbumDescription
+          album={data[0].album}
+        />
+      )}
+
+      {!error && (
+        <TracksHeader
+          onPress={playAll}
+          length={data?.flatMap(
+            (d) => d.album.songs
+          ).length || 0}
+        />
+      )}
+      <AlbumContent album={album} />
+    </BlurBackground>
+  );
 }
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        alignContent: 'center',
-    },
+  container: {
+    flex: 1,
+    alignContent: 'center',
+  },
 });