xref: /MusicFree/src/pages/downloading/downloadingList.tsx (revision ff8df87d57e83e088b940b56f6ce4e9c615a1ed2)
12d2302c5S猫头猫import React from 'react';
22d2302c5S猫头猫import {FlatList, StyleSheet, Text, View} from 'react-native';
32d2302c5S猫头猫import rpx from '@/utils/rpx';
42d2302c5S猫头猫import DownloadManager from '@/common/downloadManager';
52d2302c5S猫头猫import ListItem from '@/components/base/listItem';
6*ff8df87dS猫头猫import {sizeFormatter} from '@/utils/fileUtils';
72d2302c5S猫头猫
82d2302c5S猫头猫interface IDownloadingListProps {}
92d2302c5S猫头猫export default function DownloadingList(props: IDownloadingListProps) {
102d2302c5S猫头猫  const downloading = DownloadManager.useDownloadingMusic();
112d2302c5S猫头猫  const pending = DownloadManager.usePendingMusic();
12*ff8df87dS猫头猫  const progress = DownloadManager.useDownloadingProgress(); // progress没有更新同步
132d2302c5S猫头猫  return (
142d2302c5S猫头猫    <View style={style.wrapper}>
152d2302c5S猫头猫      <FlatList
16*ff8df87dS猫头猫        style={style.downloading}
172d2302c5S猫头猫        data={downloading}
182d2302c5S猫头猫        keyExtractor={_ => `dl${_.filename}`}
19*ff8df87dS猫头猫        renderItem={({item}) => {
20*ff8df87dS猫头猫          const prog = progress[item.filename];
21*ff8df87dS猫头猫          return (
222d2302c5S猫头猫            <ListItem
232d2302c5S猫头猫              title={item.musicItem.title}
24*ff8df87dS猫头猫              desc={`${prog?.progress ? sizeFormatter(prog.progress) : '-'} / ${
25*ff8df87dS猫头猫                prog?.size ? sizeFormatter(prog.size) : '-'
262d2302c5S猫头猫              }`}></ListItem>
27*ff8df87dS猫头猫          );
28*ff8df87dS猫头猫        }}></FlatList>
292d2302c5S猫头猫      <FlatList
302d2302c5S猫头猫        data={pending}
312d2302c5S猫头猫        keyExtractor={_ => `pd${_.filename}`}
322d2302c5S猫头猫        renderItem={({item}) => (
332d2302c5S猫头猫          <ListItem title={item.musicItem.title} desc="等待下载"></ListItem>
342d2302c5S猫头猫        )}></FlatList>
352d2302c5S猫头猫    </View>
362d2302c5S猫头猫  );
372d2302c5S猫头猫}
382d2302c5S猫头猫
392d2302c5S猫头猫const style = StyleSheet.create({
402d2302c5S猫头猫  wrapper: {
412d2302c5S猫头猫    width: rpx(750),
422d2302c5S猫头猫    flex: 1,
432d2302c5S猫头猫  },
44*ff8df87dS猫头猫  downloading: {
45*ff8df87dS猫头猫    flexGrow: 0,
46*ff8df87dS猫头猫  },
472d2302c5S猫头猫});
48