diff --git a/src/lib/media/manip.ts b/src/lib/media/manip.ts index 423a65e86b..c955fe3857 100644 --- a/src/lib/media/manip.ts +++ b/src/lib/media/manip.ts @@ -157,7 +157,7 @@ export async function saveImageToMediaLibrary({uri}: {uri: string}) { ) } } else { - await MediaLibrary.createAssetAsync(imagePath) + await MediaLibrary.saveToLibraryAsync(imagePath) } } catch (err) { logger.error(err instanceof Error ? err : String(err), { diff --git a/src/lib/media/save-image.ios.ts b/src/lib/media/save-image.ios.ts new file mode 100644 index 0000000000..eae962a239 --- /dev/null +++ b/src/lib/media/save-image.ios.ts @@ -0,0 +1,32 @@ +import {useCallback} from 'react' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' + +import {isNative} from '#/platform/detection' +import * as Toast from '#/components/Toast' +import {saveImageToMediaLibrary} from './manip' + +/** + * Same as `saveImageToMediaLibrary`, but also handles permissions and toasts + * + * iOS doesn't not require permissions to save images to the media library, + * so this file is platform-split as it's much simpler than the Android version. + */ +export function useSaveImageToMediaLibrary() { + const {_} = useLingui() + return useCallback( + async (uri: string) => { + if (!isNative) { + throw new Error('useSaveImageToMediaLibrary is native only') + } + + try { + await saveImageToMediaLibrary({uri}) + Toast.show(_(msg`Image saved`)) + } catch (e: any) { + Toast.show(_(msg`Failed to save image: ${String(e)}`), {type: 'error'}) + } + }, + [_], + ) +} diff --git a/src/lib/media/save-image.ts b/src/lib/media/save-image.ts index 47955b15cc..174d33a285 100644 --- a/src/lib/media/save-image.ts +++ b/src/lib/media/save-image.ts @@ -1,15 +1,17 @@ import {useCallback} from 'react' import * as MediaLibrary from 'expo-media-library' -import {t} from '@lingui/macro' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {isNative} from '#/platform/detection' -import * as Toast from '#/view/com/util/Toast' +import * as Toast from '#/components/Toast' import {saveImageToMediaLibrary} from './manip' /** * Same as `saveImageToMediaLibrary`, but also handles permissions and toasts */ export function useSaveImageToMediaLibrary() { + const {_} = useLingui() const [permissionResponse, requestPermission, getPermission] = MediaLibrary.usePermissions({ granularPermissions: ['photo'], @@ -23,9 +25,12 @@ export function useSaveImageToMediaLibrary() { async function save() { try { await saveImageToMediaLibrary({uri}) - Toast.show(t`Image saved`) + + Toast.show(_(msg`Image saved`)) } catch (e: any) { - Toast.show(t`Failed to save image: ${String(e)}`, 'xmark') + Toast.show(_(msg`Failed to save image: ${String(e)}`), { + type: 'error', + }) } } @@ -42,18 +47,22 @@ export function useSaveImageToMediaLibrary() { } else { // since we've been explicitly denied, show a toast. Toast.show( - t`Images cannot be saved unless permission is granted to access your photo library.`, - 'xmark', + _( + msg`Images cannot be saved unless permission is granted to access your photo library.`, + ), + {type: 'error'}, ) } } else { Toast.show( - t`Permission to access your photo library was denied. Please enable it in your system settings.`, - 'xmark', + _( + msg`Permission to access your photo library was denied. Please enable it in your system settings.`, + ), + {type: 'error'}, ) } } }, - [permissionResponse, requestPermission, getPermission], + [permissionResponse, requestPermission, getPermission, _], ) }