From 4e8605cae6741e931fe2c0a41eb9da8eda6f3f00 Mon Sep 17 00:00:00 2001
From: lyswhut <lyswhut@qq.com>
Date: Thu, 3 Jun 2021 15:25:15 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BF=98=E5=8E=9F=E9=9A=90=E8=97=8F=E7=9A=84?=
 =?UTF-8?q?=E6=92=AD=E6=94=BE=E6=95=B0=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/screens/SonglistDetail/Header.js | 28 ++++++++++++++++++++--------
 src/screens/SonglistDetail/List.js   |  2 +-
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/screens/SonglistDetail/Header.js b/src/screens/SonglistDetail/Header.js
index b78cee3..ba3187e 100644
--- a/src/screens/SonglistDetail/Header.js
+++ b/src/screens/SonglistDetail/Header.js
@@ -4,7 +4,7 @@ import { AppColors, BorderWidths } from '@/theme'
 import { useGetter } from '@/store'
 import ButtonBar from './ActionBar'
 
-const Header = memo(() => {
+const Header = memo(({ animatePlayed }) => {
   const selectListInfo = useGetter('songList', 'selectListInfo')
   const { info: listDetailDataInfo = {} } = useGetter('songList', 'listDetailData')
   const playCount = selectListInfo.play_count || listDetailDataInfo.play_count
@@ -13,16 +13,15 @@ const Header = memo(() => {
     <View style={{ ...styles.container, borderBottomColor: AppColors.borderColor }}>
       <View style={{ flexDirection: 'row', flexGrow: 0, flexShrink: 0, padding: 10 }}>
         <View style={{ ...styles.listItemImg, backgroundColor: AppColors.primary }}>
-          <Image nativeID={`pic${selectListInfo.id}Dest`} source={{ uri: selectListInfo.img || listDetailDataInfo.img || null }} borderRadius={4} style={{ flex: 1, resizeMode: 'cover', justifyContent: 'flex-end' }}>
-            {/* {
-              playCount
-                ? <Text style={{ fontSize: 12, paddingLeft: 3, paddingRight: 3, backgroundColor: 'rgba(0, 0, 0, 0.5)', color: AppColors.primary, borderBottomLeftRadius: 4, borderBottomRightRadius: 4 }} numberOfLines={ 1 }>{playCount}</Text>
+          <Image nativeID={`pic${selectListInfo.id}Dest`} source={{ uri: selectListInfo.img || listDetailDataInfo.img || null }} borderRadius={4} style={{ flex: 1, resizeMode: 'cover', justifyContent: 'flex-end' }} />
+            {
+              playCount && animatePlayed
+                ? <Text style={styles.playCount} numberOfLines={ 1 }>{playCount}</Text>
                 : null
-            } */}
-          </Image>
+            }
         </View>
         <View style={{ flexDirection: 'column', flexGrow: 1, flexShrink: 1, paddingLeft: 5 }} nativeID="title">
-          <Text style={{ fontSize: 13, color: AppColors.normal }} numberOfLines={ 1 }>{selectListInfo.name}</Text>
+          <Text style={{ fontSize: 13, color: AppColors.normal }} numberOfLines={ 1 }>{selectListInfo.name || listDetailDataInfo.name}</Text>
           <View style={{ flexGrow: 0, flexShrink: 1 }}>
             <Text style={{ fontSize: 10, color: AppColors.normal40 }} numberOfLines={ 4 }>{selectListInfo.desc || listDetailDataInfo.desc}</Text>
           </View>
@@ -66,6 +65,19 @@ const styles = StyleSheet.create({
     //   },
     // }),
   },
+  playCount: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    width: '100%',
+    fontSize: 12,
+    paddingLeft: 3,
+    paddingRight: 3,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    color: '#fff',
+    borderBottomLeftRadius: 4,
+    borderBottomRightRadius: 4,
+  },
 })
 
 export default Header
diff --git a/src/screens/SonglistDetail/List.js b/src/screens/SonglistDetail/List.js
index c153208..43a32c6 100644
--- a/src/screens/SonglistDetail/List.js
+++ b/src/screens/SonglistDetail/List.js
@@ -37,7 +37,7 @@ export default ({ animatePlayed }) => {
         onRefresh={handleListRefresh}
         onLoadMore={handleListLoadMore}
         isLoading={listDetailData.isLoading}
-        ListHeaderComponent={<ListDetailHeader />}
+        ListHeaderComponent={<ListDetailHeader animatePlayed={animatePlayed} />}
       />
 
       { isGetListDetailFailed ? <Failed /> : null }