Basic download implementation

2022-01-02 02:28:52 +01:00
parent 464747d0c4
commit d2fb4a4aea
30 changed files with 605 additions and 102 deletions
--- a/src/screens/Downloads/index.tsx
+++ b/src/screens/Downloads/index.tsx
@@ -0,0 +1,85 @@
+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;