jollywhoppers.com
Bluesky app fork with some witchin' additions 💫
witchsky.app
bluesky
fork
client
Speculative fix to Android camera roll issue (#8397)
samuel.fm
+5
-3
src/components/StarterPack/QrCodeDialog.tsx
+5
-3
src/components/StarterPack/QrCodeDialog.tsx
···
4
import {requestMediaLibraryPermissionsAsync} from 'expo-image-picker'
5
import {createAssetAsync} from 'expo-media-library'
6
import * as Sharing from 'expo-sharing'
7
-
import {AppBskyGraphDefs, AppBskyGraphStarterpack} from '@atproto/api'
8
import {msg, Trans} from '@lingui/macro'
9
import {useLingui} from '@lingui/react'
10
···
15
import {atoms as a} from '#/alf'
16
import {Button, ButtonText} from '#/components/Button'
17
import * as Dialog from '#/components/Dialog'
18
-
import {DialogControlProps} from '#/components/Dialog'
19
import {Loader} from '#/components/Loader'
20
import {QrCode} from '#/components/StarterPack/QrCode'
21
import * as bsky from '#/types/bsky'
···
55
if (isNative) {
56
const res = await requestMediaLibraryPermissionsAsync()
57
58
-
if (!res) {
59
Toast.show(
60
_(
61
msg`You must grant access to your photo library to save a QR code`,
···
155
156
return (
157
<Dialog.Outer control={control}>
158
<Dialog.ScrollableInner
159
label={_(msg`Create a QR code for a starter pack`)}>
160
<View style={[a.flex_1, a.align_center, a.gap_5xl]}>
···
197
)}
198
</React.Suspense>
199
</View>
200
</Dialog.ScrollableInner>
201
</Dialog.Outer>
202
)
···
4
import {requestMediaLibraryPermissionsAsync} from 'expo-image-picker'
5
import {createAssetAsync} from 'expo-media-library'
6
import * as Sharing from 'expo-sharing'
7
+
import {type AppBskyGraphDefs, AppBskyGraphStarterpack} from '@atproto/api'
8
import {msg, Trans} from '@lingui/macro'
9
import {useLingui} from '@lingui/react'
10
···
15
import {atoms as a} from '#/alf'
16
import {Button, ButtonText} from '#/components/Button'
17
import * as Dialog from '#/components/Dialog'
18
+
import {type DialogControlProps} from '#/components/Dialog'
19
import {Loader} from '#/components/Loader'
20
import {QrCode} from '#/components/StarterPack/QrCode'
21
import * as bsky from '#/types/bsky'
···
55
if (isNative) {
56
const res = await requestMediaLibraryPermissionsAsync()
57
58
+
if (!res.granted) {
59
Toast.show(
60
_(
61
msg`You must grant access to your photo library to save a QR code`,
···
155
156
return (
157
<Dialog.Outer control={control}>
158
+
<Dialog.Handle />
159
<Dialog.ScrollableInner
160
label={_(msg`Create a QR code for a starter pack`)}>
161
<View style={[a.flex_1, a.align_center, a.gap_5xl]}>
···
198
)}
199
</React.Suspense>
200
</View>
201
+
<Dialog.Close />
202
</Dialog.ScrollableInner>
203
</Dialog.Outer>
204
)
+59
src/lib/media/save-image.ts
+59
src/lib/media/save-image.ts
···
···
1
+
import {useCallback} from 'react'
2
+
import * as MediaLibrary from 'expo-media-library'
3
+
import {t} from '@lingui/macro'
4
+
5
+
import {isNative} from '#/platform/detection'
6
+
import * as Toast from '#/view/com/util/Toast'
7
+
import {saveImageToMediaLibrary} from './manip'
8
+
9
+
/**
10
+
* Same as `saveImageToMediaLibrary`, but also handles permissions and toasts
11
+
*/
12
+
export function useSaveImageToMediaLibrary() {
13
+
const [permissionResponse, requestPermission, getPermission] =
14
+
MediaLibrary.usePermissions({
15
+
granularPermissions: ['photo'],
16
+
})
17
+
return useCallback(
18
+
async (uri: string) => {
19
+
if (!isNative) {
20
+
throw new Error('useSaveImageToMediaLibrary is native only')
21
+
}
22
+
23
+
async function save() {
24
+
try {
25
+
await saveImageToMediaLibrary({uri})
26
+
Toast.show(t`Image saved`)
27
+
} catch (e: any) {
28
+
Toast.show(t`Failed to save image: ${String(e)}`, 'xmark')
29
+
}
30
+
}
31
+
32
+
const permission = permissionResponse ?? (await getPermission())
33
+
34
+
if (permission.granted) {
35
+
await save()
36
+
} else {
37
+
if (permission.canAskAgain) {
38
+
// request again once
39
+
const askAgain = await requestPermission()
40
+
if (askAgain.granted) {
41
+
await save()
42
+
} else {
43
+
// since we've been explicitly denied, show a toast.
44
+
Toast.show(
45
+
t`Images cannot be saved unless permission is granted to access your photo library.`,
46
+
'xmark',
47
+
)
48
+
}
49
+
} else {
50
+
Toast.show(
51
+
t`Permission to access your photo library was denied. Please enable it in your system settings.`,
52
+
'xmark',
53
+
)
54
+
}
55
+
}
56
+
},
57
+
[permissionResponse, requestPermission, getPermission],
58
+
)
59
+
}
+6
-40
src/view/com/lightbox/Lightbox.tsx
+6
-40
src/view/com/lightbox/Lightbox.tsx
···
1
-
import React from 'react'
2
-
import * as MediaLibrary from 'expo-media-library'
3
-
import {msg} from '@lingui/macro'
4
-
import {useLingui} from '@lingui/react'
5
6
-
import {saveImageToMediaLibrary, shareImageModal} from '#/lib/media/manip'
7
import {useLightbox, useLightboxControls} from '#/state/lightbox'
8
-
import * as Toast from '../util/Toast'
9
import ImageView from './ImageViewing'
10
11
export function Lightbox() {
12
const {activeLightbox} = useLightbox()
13
const {closeLightbox} = useLightboxControls()
14
15
-
const onClose = React.useCallback(() => {
16
closeLightbox()
17
}, [closeLightbox])
18
19
-
const {_} = useLingui()
20
-
const [permissionResponse, requestPermission] = MediaLibrary.usePermissions({
21
-
granularPermissions: ['photo'],
22
-
})
23
-
const saveImageToAlbumWithToasts = React.useCallback(
24
-
async (uri: string) => {
25
-
if (!permissionResponse || permissionResponse.granted === false) {
26
-
Toast.show(
27
-
_(msg`Permission to access camera roll is required.`),
28
-
'info',
29
-
)
30
-
if (permissionResponse?.canAskAgain) {
31
-
requestPermission()
32
-
} else {
33
-
Toast.show(
34
-
_(
35
-
msg`Permission to access camera roll was denied. Please enable it in your system settings.`,
36
-
),
37
-
'xmark',
38
-
)
39
-
}
40
-
return
41
-
}
42
-
try {
43
-
await saveImageToMediaLibrary({uri})
44
-
Toast.show(_(msg`Image saved`))
45
-
} catch (e: any) {
46
-
Toast.show(_(msg`Failed to save image: ${String(e)}`), 'xmark')
47
-
}
48
-
},
49
-
[permissionResponse, requestPermission, _],
50
-
)
51
52
return (
53
<ImageView
54
lightbox={activeLightbox}
55
onRequestClose={onClose}
56
-
onPressSave={saveImageToAlbumWithToasts}
57
onPressShare={uri => shareImageModal({uri})}
58
/>
59
)
···
1
+
import {useCallback} from 'react'
2
3
+
import {shareImageModal} from '#/lib/media/manip'
4
+
import {useSaveImageToMediaLibrary} from '#/lib/media/save-image'
5
import {useLightbox, useLightboxControls} from '#/state/lightbox'
6
import ImageView from './ImageViewing'
7
8
export function Lightbox() {
9
const {activeLightbox} = useLightbox()
10
const {closeLightbox} = useLightboxControls()
11
12
+
const onClose = useCallback(() => {
13
closeLightbox()
14
}, [closeLightbox])
15
16
+
const saveImageToAlbum = useSaveImageToMediaLibrary()
17
18
return (
19
<ImageView
20
lightbox={activeLightbox}
21
onRequestClose={onClose}
22
+
onPressSave={saveImageToAlbum}
23
onPressShare={uri => shareImageModal({uri})}
24
/>
25
)