diff --git a/src/components/Button.tsx b/src/components/Button.tsx index bd7d606..0f2e5bf 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -38,6 +38,7 @@ const ButtonText = styled.Text<{ active?: boolean, size: ButtonSize }>` color: ${THEME_COLOR}; font-weight: 500; font-size: 14px; + flex-shrink: 1; ${(props) => props.size === 'small' && css` font-size: 12px; @@ -78,7 +79,13 @@ const Button = React.forwardRef(function Button(props, ref) { /> } {title ? ( - {title} + + {title} + ) : undefined} ); diff --git a/src/localisation/lang/en/locale.json b/src/localisation/lang/en/locale.json index e189a96..de3d2b5 100644 --- a/src/localisation/lang/en/locale.json +++ b/src/localisation/lang/en/locale.json @@ -52,6 +52,7 @@ "no-downloads": "You have not yet downloaded any tracks", "delete-track": "Delete Track", "delete-all-tracks": "Delete All Tracks", + "confirm-delete-all-tracks": "Are you sure you want to delete all currently downloaded tracks?", "delete-album": "Delete Album", "delete-playlist": "Delete Playlist", "total-download-size": "Total Download Size", @@ -71,5 +72,7 @@ "color-scheme-dark": "Dark Mode", "artists": "Artists", "privacy-policy": "Privacy Policy", - "sleep-timer": "Sleep timer" + "sleep-timer": "Sleep timer", + "delete": "Delete", + "cancel": "Cancel" } diff --git a/src/localisation/lang/nl/locale.json b/src/localisation/lang/nl/locale.json index 93c630b..08715f4 100644 --- a/src/localisation/lang/nl/locale.json +++ b/src/localisation/lang/nl/locale.json @@ -52,6 +52,7 @@ "no-downloads": "Je hebt nog geen nummers gedownload", "delete-track": "Verwijder Track", "delete-all-tracks": "Verwijder alle nummers", + "confirm-delete-all-tracks": "Weet je zeker dat je alle eerdere gedownloadede tracks wil verwijderen?", "delete-album": "Verwijder Album", "delete-playlist": "Verwijder Playlist", "total-download-size": "Totale grootte downloads", @@ -71,5 +72,7 @@ "color-scheme-light": "Lichte modus", "color-scheme-dark": "Donkere modus", "privacy-policy": "Privacybeleid", - "sleep-timer": "Slaaptimer" + "sleep-timer": "Slaaptimer", + "delete": "Verwijder", + "cancel": "Annuleer" } diff --git a/src/localisation/types.ts b/src/localisation/types.ts index 7d36c89..2739f56 100644 --- a/src/localisation/types.ts +++ b/src/localisation/types.ts @@ -52,6 +52,7 @@ export type LocaleKeys = 'play-next' | 'delete-playlist' | 'delete-track' | 'delete-all-tracks' +| 'confirm-delete-all-tracks' | 'total-download-size' | 'no-downloads' | 'retry-failed-downloads' @@ -70,4 +71,6 @@ export type LocaleKeys = 'play-next' | 'color-scheme-dark' | 'artists' | 'privacy-policy' -| 'sleep-timer' \ No newline at end of file +| 'sleep-timer' +| 'delete' +| 'cancel' \ No newline at end of file diff --git a/src/screens/Downloads/index.tsx b/src/screens/Downloads/index.tsx index 50106c4..545297a 100644 --- a/src/screens/Downloads/index.tsx +++ b/src/screens/Downloads/index.tsx @@ -1,6 +1,6 @@ import useDefaultStyles from '@/components/Colors'; import React, { useCallback, useMemo } from 'react'; -import { FlatListProps, View } from 'react-native'; +import { Alert, FlatListProps, View } from 'react-native'; import { SafeAreaView } from 'react-native-safe-area-context'; import { useAppDispatch, useTypedSelector } from '@/store'; import formatBytes from '@/utility/formatBytes'; @@ -59,7 +59,22 @@ function Downloads() { }, [dispatch]); // Delete all downloaded tracks - const handleDeleteAllTracks = useCallback(() => ids.forEach(handleDelete), [handleDelete, ids]); + const handleDeleteAllTracks = useCallback(() => { + Alert.alert( + t('delete-all-tracks'), + t('confirm-delete-all-tracks'), + [{ + text: t('delete'), + style: 'destructive', + onPress() { + ids.forEach(handleDelete); + } + }, { + text: t('cancel'), + style: 'cancel', + }] + ); + }, [handleDelete, ids]); // Retry a single failed track const retryTrack = useCallback((id: string) => { @@ -78,23 +93,31 @@ function Downloads() { const ListHeaderComponent = useMemo(() => ( - - - {t('total-download-size')}{': '}{formatBytes(totalDownloadSize)} - + + + + {formatBytes(totalDownloadSize)} + + + {t('total-download-size')} + +