86 lines
3.6 KiB
TypeScript
86 lines
3.6 KiB
TypeScript
|
import useDefaultStyles from 'components/Colors';
|
||
|
|
import React, { useCallback, useMemo } from 'react';
|
||
|
|
import { Pressable, Text, View } from 'react-native';
|
||
|
|
import { FlatList } from 'react-native-gesture-handler';
|
||
|
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
||
|
|
import { useTypedSelector } from 'store';
|
||
|
|
import formatBytes from 'utility/formatBytes';
|
||
|
|
import TrashIcon from 'assets/trash.svg';
|
||
|
|
import { THEME_COLOR } from 'CONSTANTS';
|
||
|
|
import { useDispatch } from 'react-redux';
|
||
|
|
import { EntityId } from '@reduxjs/toolkit';
|
||
|
|
import { removeDownloadedTrack } from 'store/downloads/actions';
|
||
|
|
import Button from 'components/Button';
|
||
|
|
import { t } from 'i18n-js';
|
||
|
|
|
||
|
|
function Downloads() {
|
||
|
|
const defaultStyles = useDefaultStyles();
|
||
|
|
const dispatch = useDispatch();
|
||
|
|
|
||
|
|
const { entities, ids } = useTypedSelector((state) => state.downloads);
|
||
|
|
const tracks = useTypedSelector((state) => state.music.tracks.entities);
|
||
|
|
|
||
|
|
// Calculate the total download size
|
||
|
|
const totalDownloadSize = useMemo(() => (
|
||
|
|
ids?.reduce<number>((sum, id) => sum + (entities[id]?.size || 0), 0)
|
||
|
|
), [ids, entities]);
|
||
|
|
|
||
|
|
const handleDelete = useCallback((id: EntityId) => {
|
||
|
|
dispatch(removeDownloadedTrack(id));
|
||
|
|
}, [dispatch]);
|
||
|
|
const handleDeleteAllTracks = useCallback(() => {
|
||
|
|
ids.forEach((id) => dispatch(removeDownloadedTrack(id)));
|
||
|
|
}, [dispatch, ids]);
|
||
|
|
|
||
|
|
if (!ids.length) {
|
||
|
|
return (
|
||
|
|
<View style={{ margin: 24, flex: 1, alignItems: 'center', justifyContent: 'center' }}>
|
||
|
|
<Text style={[{ textAlign: 'center'}, defaultStyles.textHalfOpacity]}>
|
||
|
|
{t('no-downloads')}
|
||
|
|
</Text>
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<SafeAreaView style={{ flex: 1, marginHorizontal: 24 }}>
|
||
|
|
<FlatList
|
||
|
|
style={{ flex: 1 }}
|
||
|
|
ListHeaderComponent={
|
||
|
|
<Text style={[{ textAlign: 'center', marginVertical: 6 }, defaultStyles.textHalfOpacity]}>
|
||
|
|
{t('total-download-size')}: {formatBytes(totalDownloadSize)}
|
||
|
|
</Text>
|
||
|
|
}
|
||
|
|
ListFooterComponent={
|
||
|
|
<Button
|
||
|
|
icon={TrashIcon}
|
||
|
|
title={t('delete-all-tracks')}
|
||
|
|
onPress={handleDeleteAllTracks}
|
||
|
|
disabled={!ids.length}
|
||
|
|
style={{ marginTop: 8 }}
|
||
|
|
/>
|
||
|
|
}
|
||
|
|
data={ids}
|
||
|
|
renderItem={({ item }) => (
|
||
|
|
<View style={{ flex: 1, flexDirection: 'row', paddingVertical: 8, alignItems: 'center' }}>
|
||
|
|
<View>
|
||
|
|
<Text style={{ fontSize: 16, marginBottom: 4 }} numberOfLines={1}>{tracks[item]?.Name}</Text>
|
||
|
|
<Text style={[{ flexShrink: 1, fontSize: 11 }, defaultStyles.textHalfOpacity]} numberOfLines={1}>{tracks[item]?.AlbumArtist} ({tracks[item]?.Album})</Text>
|
||
|
|
</View>
|
||
|
|
<View style={{ marginLeft: 'auto', flexDirection: 'row', alignItems: 'center' }}>
|
||
|
|
<Text style={[defaultStyles.textHalfOpacity, { marginRight: 6 }]}>
|
||
|
|
{formatBytes(entities[item]?.size || 0)}
|
||
|
|
</Text>
|
||
|
|
<Pressable onPress={() => handleDelete(item)}>
|
||
|
|
<TrashIcon height={24} width={24} fill={THEME_COLOR} />
|
||
|
|
</Pressable>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
</SafeAreaView>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Downloads;
|