forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Make profile banners clickable (#4)
+67
-15
+67
-15
src/view/com/util/UserBanner.tsx
+67
-15
src/view/com/util/UserBanner.tsx
···
1
1
import React from 'react'
2
-
import {Pressable, StyleSheet, View} from 'react-native'
3
-
import {Image as RNImage} from 'react-native-image-crop-picker'
2
+
import {
3
+
Pressable,
4
+
StyleSheet,
5
+
TouchableWithoutFeedback,
6
+
View,
7
+
} from 'react-native'
8
+
import {type Image as RNImage} from 'react-native-image-crop-picker'
9
+
import {
10
+
type MeasuredDimensions,
11
+
runOnJS,
12
+
runOnUI,
13
+
} from 'react-native-reanimated'
4
14
import {Image} from 'expo-image'
5
-
import {ModerationUI} from '@atproto/api'
15
+
import {type ModerationUI} from '@atproto/api'
6
16
import {msg, Trans} from '@lingui/macro'
7
17
import {useLingui} from '@lingui/react'
8
18
19
+
import {measureHandle, useHandleRef} from '#/lib/hooks/useHandleRef'
9
20
import {usePalette} from '#/lib/hooks/usePalette'
10
21
import {
11
22
useCameraPermission,
···
15
26
import {useTheme} from '#/lib/ThemeContext'
16
27
import {logger} from '#/logger'
17
28
import {isAndroid, isNative} from '#/platform/detection'
29
+
import {useLightboxControls} from '#/state/lightbox'
18
30
import {EventStopper} from '#/view/com/util/EventStopper'
19
31
import {tokens, useTheme as useAlfTheme} from '#/alf'
20
32
import {useSheetWrapper} from '#/components/Dialog/sheet-wrapper'
···
45
57
const {requestCameraAccessIfNeeded} = useCameraPermission()
46
58
const {requestPhotoAccessIfNeeded} = usePhotoLibraryPermission()
47
59
const sheetWrapper = useSheetWrapper()
60
+
const {openLightbox} = useLightboxControls()
61
+
62
+
const bannerRef = useHandleRef()
48
63
49
64
const onOpenCamera = React.useCallback(async () => {
50
65
if (!(await requestCameraAccessIfNeeded())) {
···
88
103
onSelectNewBanner?.(null)
89
104
}, [onSelectNewBanner])
90
105
106
+
const _openLightbox = React.useCallback(
107
+
(uri: string, thumbRect: MeasuredDimensions | null) => {
108
+
openLightbox({
109
+
images: [
110
+
{
111
+
uri,
112
+
thumbUri: uri,
113
+
thumbRect,
114
+
dimensions: thumbRect,
115
+
thumbDimensions: null,
116
+
type: 'image',
117
+
},
118
+
],
119
+
index: 0,
120
+
})
121
+
},
122
+
[openLightbox],
123
+
)
124
+
125
+
const onPressBanner = React.useCallback(() => {
126
+
if (banner && !(moderation?.blur && moderation?.noOverride)) {
127
+
const bannerHandle = bannerRef.current
128
+
runOnUI(() => {
129
+
'worklet'
130
+
const rect = measureHandle(bannerHandle)
131
+
runOnJS(_openLightbox)(banner, rect)
132
+
})()
133
+
}
134
+
}, [banner, moderation, _openLightbox, bannerRef])
135
+
91
136
// setUserBanner is only passed as prop on the EditProfile component
92
137
return onSelectNewBanner ? (
93
138
<EventStopper onKeyDown={true}>
···
164
209
</EventStopper>
165
210
) : banner &&
166
211
!((moderation?.blur && isAndroid) /* android crashes with blur */) ? (
167
-
<Image
168
-
testID="userBannerImage"
169
-
style={[
170
-
styles.bannerImage,
171
-
{backgroundColor: theme.palette.default.backgroundLight},
172
-
]}
173
-
contentFit="cover"
174
-
source={{uri: banner}}
175
-
blurRadius={moderation?.blur ? 100 : 0}
176
-
accessible={true}
177
-
accessibilityIgnoresInvertColors
178
-
/>
212
+
<TouchableWithoutFeedback
213
+
testID="profileHeaderAviButton"
214
+
onPress={onPressBanner}
215
+
accessibilityRole="image"
216
+
accessibilityLabel={_(msg`View profile banner`)}
217
+
accessibilityHint="">
218
+
<Image
219
+
testID="userBannerImage"
220
+
style={[
221
+
styles.bannerImage,
222
+
{backgroundColor: theme.palette.default.backgroundLight},
223
+
]}
224
+
contentFit="cover"
225
+
source={{uri: banner}}
226
+
blurRadius={moderation?.blur ? 100 : 0}
227
+
accessible={true}
228
+
accessibilityIgnoresInvertColors
229
+
/>
230
+
</TouchableWithoutFeedback>
179
231
) : (
180
232
<View
181
233
testID="userBannerFallback"