jeanmachine.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
xan.lol
1import {memo, useCallback, useMemo, useState} from 'react'
2import {
3 Image as RNImage,
4 Pressable,
5 type StyleProp,
6 StyleSheet,
7 View,
8 type ViewStyle,
9} from 'react-native'
10import Svg, {Circle, Path, Rect} from 'react-native-svg'
11import {Image as ExpoImage} from 'expo-image'
12import {type ModerationUI} from '@atproto/api'
13import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
14import {msg} from '@lingui/core/macro'
15import {useLingui} from '@lingui/react'
16import {Trans} from '@lingui/react/macro'
17import {useQueryClient} from '@tanstack/react-query'
18
19import {useHaptics} from '#/lib/haptics'
20import {
21 useCameraPermission,
22 usePhotoLibraryPermission,
23} from '#/lib/hooks/usePermissions'
24import {compressIfNeeded} from '#/lib/media/manip'
25import {openCamera, openCropper, openPicker} from '#/lib/media/picker'
26import {type PickerImage} from '#/lib/media/picker.shared'
27import {makeProfileLink} from '#/lib/routes/links'
28import {sanitizeDisplayName} from '#/lib/strings/display-names'
29import {isCancelledError} from '#/lib/strings/errors'
30import {sanitizeHandle} from '#/lib/strings/handles'
31import {logger} from '#/logger'
32import {
33 type ComposerImage,
34 compressImage,
35 createComposerImage,
36} from '#/state/gallery'
37import {useEnableSquareAvatars} from '#/state/preferences/enable-square-avatars'
38import {
39 maybeModifyHighQualityImage,
40 useHighQualityImages,
41} from '#/state/preferences/high-quality-images'
42import {unstableCacheProfileView} from '#/state/queries/unstable-profile-cache'
43import {EditImageDialog} from '#/view/com/composer/photos/EditImageDialog'
44import {atoms as a, tokens, useTheme} from '#/alf'
45import {Button} from '#/components/Button'
46import {useDialogControl} from '#/components/Dialog'
47import {useSheetWrapper} from '#/components/Dialog/sheet-wrapper'
48import {
49 Camera_Filled_Stroke2_Corner0_Rounded as CameraFilledIcon,
50 Camera_Stroke2_Corner0_Rounded as CameraIcon,
51} from '#/components/icons/Camera'
52import {StreamingLive_Stroke2_Corner0_Rounded as LibraryIcon} from '#/components/icons/StreamingLive'
53import {Trash_Stroke2_Corner0_Rounded as TrashIcon} from '#/components/icons/Trash'
54import {Link} from '#/components/Link'
55import {MediaInsetBorder} from '#/components/MediaInsetBorder'
56import * as Menu from '#/components/Menu'
57import {ProfileHoverCard} from '#/components/ProfileHoverCard'
58import {useAnalytics} from '#/analytics'
59import {IS_ANDROID, IS_NATIVE, IS_WEB, IS_WEB_TOUCH_DEVICE} from '#/env'
60import {useActorStatus} from '#/features/liveNow'
61import {LiveIndicator} from '#/features/liveNow/components/LiveIndicator'
62import {LiveStatusDialog} from '#/features/liveNow/components/LiveStatusDialog'
63import type * as bsky from '#/types/bsky'
64
65export type UserAvatarType = 'user' | 'algo' | 'list' | 'labeler'
66
67interface BaseUserAvatarProps {
68 type?: UserAvatarType
69 shape?: 'circle' | 'square'
70 size: number
71 avatar?: string | null
72 live?: boolean
73 hideLiveBadge?: boolean
74}
75
76interface UserAvatarProps extends BaseUserAvatarProps {
77 type: UserAvatarType
78 moderation?: ModerationUI
79 usePlainRNImage?: boolean
80 noBorder?: boolean
81 onLoad?: () => void
82 style?: StyleProp<ViewStyle>
83}
84
85interface EditableUserAvatarProps extends BaseUserAvatarProps {
86 onSelectNewAvatar: (img: PickerImage | null) => void
87}
88
89interface PreviewableUserAvatarProps extends BaseUserAvatarProps {
90 moderation?: ModerationUI
91 profile: bsky.profile.AnyProfileView
92 disableHoverCard?: boolean
93 disableNavigation?: boolean
94 onBeforePress?: () => void
95}
96
97const BLUR_AMOUNT = IS_WEB ? 5 : 100
98
99let DefaultAvatar = ({
100 type,
101 shape: overrideShape,
102 size,
103}: {
104 type: UserAvatarType
105 shape?: 'square' | 'circle'
106 size: number
107}): React.ReactNode => {
108 const finalShape = overrideShape ?? (type === 'user' ? 'circle' : 'square')
109 const t = useTheme()
110
111 const enableSquareAvatars = useEnableSquareAvatars()
112
113 const aviStyle = useMemo(() => {
114 if (finalShape === 'square') {
115 return {borderRadius: size > 32 ? 8 : 3, overflow: 'hidden'} as const
116 }
117 }, [finalShape, size])
118
119 if (type === 'algo') {
120 // TODO: shape=circle
121 // Font Awesome Pro 6.4.0 by @fontawesome -https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.
122 return (
123 <Svg
124 testID="userAvatarFallback"
125 width={size}
126 height={size}
127 viewBox="0 0 32 32"
128 fill="none"
129 stroke="none"
130 style={aviStyle}>
131 <Rect width="32" height="32" rx="4" fill={t.palette.primary_500} />
132 <Path
133 d="M13.5 7.25C13.5 6.55859 14.0586 6 14.75 6C20.9648 6 26 11.0352 26 17.25C26 17.9414 25.4414 18.5 24.75 18.5C24.0586 18.5 23.5 17.9414 23.5 17.25C23.5 12.418 19.582 8.5 14.75 8.5C14.0586 8.5 13.5 7.94141 13.5 7.25ZM8.36719 14.6172L12.4336 18.6836L13.543 17.5742C13.5156 17.4727 13.5 17.3633 13.5 17.25C13.5 16.5586 14.0586 16 14.75 16C15.4414 16 16 16.5586 16 17.25C16 17.9414 15.4414 18.5 14.75 18.5C14.6367 18.5 14.5312 18.4844 14.4258 18.457L13.3164 19.5664L17.3828 23.6328C17.9492 24.1992 17.8438 25.1484 17.0977 25.4414C16.1758 25.8008 15.1758 26 14.125 26C9.63672 26 6 22.3633 6 17.875C6 16.8242 6.19922 15.8242 6.5625 14.9023C6.85547 14.1602 7.80469 14.0508 8.37109 14.6172H8.36719ZM14.75 9.75C18.8906 9.75 22.25 13.1094 22.25 17.25C22.25 17.9414 21.6914 18.5 21 18.5C20.3086 18.5 19.75 17.9414 19.75 17.25C19.75 14.4883 17.5117 12.25 14.75 12.25C14.0586 12.25 13.5 11.6914 13.5 11C13.5 10.3086 14.0586 9.75 14.75 9.75Z"
134 fill="white"
135 />
136 </Svg>
137 )
138 }
139 if (type === 'list') {
140 // TODO: shape=circle
141 // Font Awesome Pro 6.4.0 by @fontawesome -https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.
142 return (
143 <Svg
144 testID="userAvatarFallback"
145 width={size}
146 height={size}
147 viewBox="0 0 32 32"
148 fill="none"
149 stroke="none"
150 style={aviStyle}>
151 <Path
152 d="M28 0H4C1.79086 0 0 1.79086 0 4V28C0 30.2091 1.79086 32 4 32H28C30.2091 32 32 30.2091 32 28V4C32 1.79086 30.2091 0 28 0Z"
153 fill={t.palette.primary_500}
154 />
155 <Path
156 d="M22.1529 22.3542C23.4522 22.4603 24.7593 22.293 25.9899 21.8629C26.0369 21.2838 25.919 20.7032 25.6497 20.1884C25.3805 19.6735 24.9711 19.2454 24.4687 18.9535C23.9663 18.6617 23.3916 18.518 22.8109 18.5392C22.2303 18.5603 21.6676 18.7454 21.1878 19.0731M22.1529 22.3542C22.1489 21.1917 21.8142 20.0534 21.1878 19.0741ZM10.8111 19.0741C10.3313 18.7468 9.7687 18.5619 9.18826 18.5409C8.60781 18.5199 8.03327 18.6636 7.53107 18.9554C7.02888 19.2472 6.61953 19.6752 6.35036 20.1899C6.08119 20.7046 5.96319 21.285 6.01001 21.8639C7.23969 22.2964 8.5461 22.4632 9.84497 22.3531M10.8111 19.0741C10.1851 20.0535 9.84865 21.1908 9.84497 22.3531ZM19.0759 10.077C19.0759 10.8931 18.7518 11.6757 18.1747 12.2527C17.5977 12.8298 16.815 13.154 15.9989 13.154C15.1829 13.154 14.4002 12.8298 13.8232 12.2527C13.2461 11.6757 12.922 10.8931 12.922 10.077C12.922 9.26092 13.2461 8.47828 13.8232 7.90123C14.4002 7.32418 15.1829 7 15.9989 7C16.815 7 17.5977 7.32418 18.1747 7.90123C18.7518 8.47828 19.0759 9.26092 19.0759 10.077ZM25.2299 13.154C25.2299 13.457 25.1702 13.7571 25.0542 14.0371C24.9383 14.3171 24.7683 14.5715 24.554 14.7858C24.3397 15.0001 24.0853 15.1701 23.8053 15.2861C23.5253 15.402 23.2252 15.4617 22.9222 15.4617C22.6191 15.4617 22.319 15.402 22.039 15.2861C21.759 15.1701 21.5046 15.0001 21.2903 14.7858C21.0761 14.5715 20.9061 14.3171 20.7901 14.0371C20.6741 13.7571 20.6144 13.457 20.6144 13.154C20.6144 12.5419 20.8576 11.9549 21.2903 11.5222C21.7231 11.0894 22.3101 10.8462 22.9222 10.8462C23.5342 10.8462 24.1212 11.0894 24.554 11.5222C24.9868 11.9549 25.2299 12.5419 25.2299 13.154ZM11.3835 13.154C11.3835 13.457 11.3238 13.7571 11.2078 14.0371C11.0918 14.3171 10.9218 14.5715 10.7075 14.7858C10.4932 15.0001 10.2388 15.1701 9.95886 15.2861C9.67887 15.402 9.37878 15.4617 9.07572 15.4617C8.77266 15.4617 8.47257 15.402 8.19259 15.2861C7.9126 15.1701 7.6582 15.0001 7.4439 14.7858C7.22961 14.5715 7.05962 14.3171 6.94365 14.0371C6.82767 13.7571 6.76798 13.457 6.76798 13.154C6.76798 12.5419 7.01112 11.9549 7.4439 11.5222C7.87669 11.0894 8.46367 10.8462 9.07572 10.8462C9.68777 10.8462 10.2748 11.0894 10.7075 11.5222C11.1403 11.9549 11.3835 12.5419 11.3835 13.154Z"
157 fill="white"
158 />
159 <Path
160 d="M22 22C22 25.3137 19.3137 25.5 16 25.5C12.6863 25.5 10 25.3137 10 22C10 18.6863 12.6863 16 16 16C19.3137 16 22 18.6863 22 22Z"
161 fill="white"
162 />
163 </Svg>
164 )
165 }
166 if (type === 'labeler') {
167 return (
168 <Svg
169 testID="userAvatarFallback"
170 width={size}
171 height={size}
172 viewBox="0 0 32 32"
173 fill="none"
174 stroke="none"
175 style={aviStyle}>
176 {finalShape === 'square' ? (
177 <Rect
178 x="0"
179 y="0"
180 width="32"
181 height="32"
182 rx="3"
183 fill={tokens.color.temp_purple}
184 />
185 ) : (
186 <Circle cx="16" cy="16" r="16" fill={tokens.color.temp_purple} />
187 )}
188 <Path
189 d="M24 9.75L16 7L8 9.75V15.9123C8 20.8848 12 23 16 25.1579C20 23 24 20.8848 24 15.9123V9.75Z"
190 stroke="white"
191 strokeWidth="2"
192 strokeLinecap="square"
193 strokeLinejoin="round"
194 />
195 </Svg>
196 )
197 }
198 return (
199 <Svg
200 testID="userAvatarFallback"
201 width={size}
202 height={size}
203 viewBox="0 0 24 24"
204 fill="none"
205 stroke="none"
206 style={aviStyle}>
207 {enableSquareAvatars ? (
208 <Rect
209 x="0"
210 y="0"
211 width="24"
212 height="24"
213 rx="3"
214 fill={t.palette.primary_500}
215 />
216 ) : (
217 <Circle cx="12" cy="12" r="12" fill={t.palette.primary_500} />
218 )}
219 <Circle cx="12" cy="9.5" r="3.5" fill="#fff" />
220 <Path
221 strokeLinecap="round"
222 strokeLinejoin="round"
223 fill="#fff"
224 d="M 12.058 22.784 C 9.422 22.784 7.007 21.836 5.137 20.262 C 5.667 17.988 8.534 16.25 11.99 16.25 C 15.494 16.25 18.391 18.036 18.864 20.357 C 17.01 21.874 14.64 22.784 12.058 22.784 Z"
225 />
226 </Svg>
227 )
228}
229DefaultAvatar = memo(DefaultAvatar)
230export {DefaultAvatar}
231
232let UserAvatar = ({
233 type = 'user',
234 shape: overrideShape,
235 size,
236 avatar,
237 moderation,
238 usePlainRNImage = false,
239 onLoad,
240 style,
241 live,
242 hideLiveBadge,
243 noBorder,
244}: UserAvatarProps): React.ReactNode => {
245 const t = useTheme()
246
247 const enableSquareAvatars = useEnableSquareAvatars()
248 const avishapeforce = enableSquareAvatars ? 'square' : 'circle'
249
250 const finalShape =
251 overrideShape ?? (type === 'user' ? avishapeforce : 'square')
252 const highQualityImages = useHighQualityImages()
253
254 const aviStyle = useMemo(() => {
255 let borderRadius
256
257 if (finalShape === 'square') {
258 borderRadius = size > 32 ? 8 : 3
259 } else {
260 borderRadius = Math.floor(size / 2)
261 }
262
263 return {
264 width: size,
265 height: size,
266 borderRadius,
267 backgroundColor: t.palette.contrast_25,
268 }
269 }, [finalShape, size, t])
270
271 const borderStyle = useMemo(() => {
272 return [
273 {borderRadius: aviStyle.borderRadius},
274 live && {
275 borderColor: t.palette.negative_500,
276 borderWidth: size > 16 ? 2 : 1,
277 opacity: 1,
278 },
279 ]
280 }, [aviStyle.borderRadius, live, t, size])
281
282 const alert = useMemo(() => {
283 if (!moderation?.alert) {
284 return null
285 }
286 return (
287 <View
288 style={[
289 a.absolute,
290 a.right_0,
291 a.bottom_0,
292 a.rounded_full,
293 {backgroundColor: t.palette.white},
294 ]}>
295 <FontAwesomeIcon
296 icon="exclamation-circle"
297 style={{color: t.palette.negative_400}}
298 size={Math.floor(size / 3)}
299 />
300 </View>
301 )
302 }, [moderation?.alert, size, t])
303
304 const containerStyle = useMemo(() => {
305 return [
306 {
307 width: size,
308 height: size,
309 },
310 style,
311 ]
312 }, [size, style])
313
314 return avatar &&
315 !((moderation?.blur && IS_ANDROID) /* android crashes with blur */) ? (
316 <View style={containerStyle}>
317 {usePlainRNImage ? (
318 <RNImage
319 accessibilityIgnoresInvertColors
320 testID="userAvatarImage"
321 style={aviStyle}
322 resizeMode="cover"
323 source={{
324 uri: maybeModifyHighQualityImage(
325 hackModifyThumbnailPath(avatar, size < 90),
326 highQualityImages,
327 ),
328 }}
329 blurRadius={moderation?.blur ? BLUR_AMOUNT : 0}
330 onLoad={onLoad}
331 />
332 ) : (
333 <ExpoImage
334 testID="userAvatarImage"
335 style={aviStyle}
336 contentFit="cover"
337 source={{
338 uri: maybeModifyHighQualityImage(
339 hackModifyThumbnailPath(avatar, size < 90),
340 highQualityImages,
341 ),
342 }}
343 blurRadius={moderation?.blur ? BLUR_AMOUNT : 0}
344 onLoad={onLoad}
345 />
346 )}
347 {!noBorder && <MediaInsetBorder style={borderStyle} />}
348 {live && size > 16 && !hideLiveBadge && (
349 <LiveIndicator size={size > 32 ? 'small' : 'tiny'} />
350 )}
351 {alert}
352 </View>
353 ) : (
354 <View style={containerStyle}>
355 <DefaultAvatar type={type} shape={finalShape} size={size} />
356 {!noBorder && <MediaInsetBorder style={borderStyle} />}
357 {live && size > 16 && !hideLiveBadge && (
358 <LiveIndicator size={size > 32 ? 'small' : 'tiny'} />
359 )}
360 {alert}
361 </View>
362 )
363}
364UserAvatar = memo(UserAvatar)
365export {UserAvatar}
366
367let EditableUserAvatar = ({
368 type = 'user',
369 size,
370 avatar,
371 onSelectNewAvatar,
372}: EditableUserAvatarProps): React.ReactNode => {
373 const t = useTheme()
374 const {_} = useLingui()
375 const {requestCameraAccessIfNeeded} = useCameraPermission()
376 const {requestPhotoAccessIfNeeded} = usePhotoLibraryPermission()
377 const [rawImage, setRawImage] = useState<ComposerImage | undefined>()
378 const editImageDialogControl = useDialogControl()
379
380 const sheetWrapper = useSheetWrapper()
381 const highQualityImages = useHighQualityImages()
382
383 const enableSquareAvatars = useEnableSquareAvatars()
384
385 const circular = type !== 'algo' && type !== 'list' && !enableSquareAvatars
386
387 const aviStyle = useMemo(() => {
388 if (!circular) {
389 return {
390 width: size,
391 height: size,
392 borderRadius: size > 32 ? 8 : 3,
393 }
394 }
395 return {
396 width: size,
397 height: size,
398 borderRadius: Math.floor(size / 2),
399 }
400 }, [circular, size])
401
402 const onOpenCamera = useCallback(async () => {
403 if (!(await requestCameraAccessIfNeeded())) {
404 return
405 }
406
407 onSelectNewAvatar(
408 await compressIfNeeded(
409 await openCamera({
410 aspect: [1, 1],
411 }),
412 ),
413 )
414 }, [onSelectNewAvatar, requestCameraAccessIfNeeded])
415
416 const onOpenLibrary = useCallback(async () => {
417 if (!(await requestPhotoAccessIfNeeded())) {
418 return
419 }
420
421 const items = await sheetWrapper(
422 openPicker({
423 aspect: [1, 1],
424 }),
425 )
426 const item = items[0]
427 if (!item) {
428 return
429 }
430
431 try {
432 if (IS_NATIVE) {
433 onSelectNewAvatar(
434 await compressIfNeeded(
435 await openCropper({
436 imageUri: item.path,
437 shape: circular ? 'circle' : 'rectangle',
438 aspectRatio: 1,
439 }),
440 ),
441 )
442 } else {
443 setRawImage(await createComposerImage(item))
444 editImageDialogControl.open()
445 }
446 } catch (e) {
447 // Don't log errors for cancelling selection to sentry on ios or android
448 if (!isCancelledError(e)) {
449 logger.error('Failed to crop avatar', {error: e})
450 }
451 }
452 }, [
453 onSelectNewAvatar,
454 requestPhotoAccessIfNeeded,
455 sheetWrapper,
456 editImageDialogControl,
457 circular,
458 ])
459
460 const onRemoveAvatar = useCallback(() => {
461 onSelectNewAvatar(null)
462 }, [onSelectNewAvatar])
463
464 const onChangeEditImage = useCallback(
465 async (image: ComposerImage) => {
466 const compressed = await compressImage(image)
467 onSelectNewAvatar(compressed)
468 },
469 [onSelectNewAvatar],
470 )
471
472 return (
473 <>
474 <Menu.Root>
475 <Menu.Trigger label={_(msg`Edit avatar`)}>
476 {({props}) => (
477 <Pressable {...props} testID="changeAvatarBtn">
478 {avatar ? (
479 <ExpoImage
480 testID="userAvatarImage"
481 style={aviStyle}
482 source={{
483 uri: maybeModifyHighQualityImage(avatar, highQualityImages),
484 }}
485 accessibilityRole="image"
486 />
487 ) : (
488 <DefaultAvatar type={type} size={size} />
489 )}
490 <View
491 style={[
492 styles.editButtonContainer,
493 t.atoms.bg_contrast_25,
494 a.border,
495 t.atoms.border_contrast_low,
496 ]}>
497 <CameraFilledIcon height={14} width={14} style={t.atoms.text} />
498 </View>
499 </Pressable>
500 )}
501 </Menu.Trigger>
502 <Menu.Outer showCancel>
503 <Menu.Group>
504 {IS_NATIVE && (
505 <Menu.Item
506 testID="changeAvatarCameraBtn"
507 label={_(msg`Upload from Camera`)}
508 onPress={onOpenCamera}>
509 <Menu.ItemText>
510 <Trans>Upload from Camera</Trans>
511 </Menu.ItemText>
512 <Menu.ItemIcon icon={CameraIcon} />
513 </Menu.Item>
514 )}
515
516 <Menu.Item
517 testID="changeAvatarLibraryBtn"
518 label={_(msg`Upload from Library`)}
519 onPress={onOpenLibrary}>
520 <Menu.ItemText>
521 {IS_NATIVE ? (
522 <Trans>Upload from Library</Trans>
523 ) : (
524 <Trans>Upload from Files</Trans>
525 )}
526 </Menu.ItemText>
527 <Menu.ItemIcon icon={LibraryIcon} />
528 </Menu.Item>
529 </Menu.Group>
530 {!!avatar && (
531 <>
532 <Menu.Divider />
533 <Menu.Group>
534 <Menu.Item
535 testID="changeAvatarRemoveBtn"
536 label={_(msg`Remove Avatar`)}
537 onPress={onRemoveAvatar}>
538 <Menu.ItemText>
539 <Trans>Remove Avatar</Trans>
540 </Menu.ItemText>
541 <Menu.ItemIcon icon={TrashIcon} />
542 </Menu.Item>
543 </Menu.Group>
544 </>
545 )}
546 </Menu.Outer>
547 </Menu.Root>
548
549 <EditImageDialog
550 control={editImageDialogControl}
551 image={rawImage}
552 onChange={onChangeEditImage}
553 aspectRatio={1}
554 circularCrop={circular}
555 />
556 </>
557 )
558}
559EditableUserAvatar = memo(EditableUserAvatar)
560export {EditableUserAvatar}
561
562let PreviewableUserAvatar = ({
563 moderation,
564 profile,
565 disableHoverCard,
566 disableNavigation,
567 onBeforePress,
568 live,
569 ...props
570}: PreviewableUserAvatarProps): React.ReactNode => {
571 const ax = useAnalytics()
572 const {_} = useLingui()
573 const queryClient = useQueryClient()
574 const status = useActorStatus(profile)
575 const liveControl = useDialogControl()
576 const playHaptic = useHaptics()
577
578 const onPress = useCallback(() => {
579 onBeforePress?.()
580 unstableCacheProfileView(queryClient, profile)
581 }, [profile, queryClient, onBeforePress])
582
583 const onOpenLiveStatus = useCallback(() => {
584 playHaptic('Light')
585 ax.metric('live:card:open', {subject: profile.did, from: 'post'})
586 liveControl.open()
587 }, [liveControl, playHaptic, profile.did])
588
589 const avatarEl = (
590 <UserAvatar
591 avatar={profile.avatar}
592 moderation={moderation}
593 type={profile.associated?.labeler ? 'labeler' : 'user'}
594 live={status.isActive || live}
595 {...props}
596 />
597 )
598
599 const linkStyle =
600 props.type !== 'algo' && props.type !== 'list'
601 ? a.rounded_full
602 : {borderRadius: props.size > 32 ? 8 : 3}
603
604 return (
605 <ProfileHoverCard did={profile.did} disable={disableHoverCard}>
606 {disableNavigation ? (
607 avatarEl
608 ) : status.isActive && (IS_NATIVE || IS_WEB_TOUCH_DEVICE) ? (
609 <>
610 <Button
611 label={_(
612 msg`${sanitizeDisplayName(
613 profile.displayName || sanitizeHandle(profile.handle),
614 )}'s avatar`,
615 )}
616 accessibilityHint={_(msg`Opens live status dialog`)}
617 onPress={onOpenLiveStatus}>
618 {avatarEl}
619 </Button>
620 <LiveStatusDialog
621 control={liveControl}
622 profile={profile}
623 status={status}
624 embed={status.embed}
625 />
626 </>
627 ) : (
628 <Link
629 label={_(
630 msg`${sanitizeDisplayName(
631 profile.displayName || sanitizeHandle(profile.handle),
632 )}'s avatar`,
633 )}
634 accessibilityHint={_(msg`Opens this profile`)}
635 to={makeProfileLink({
636 did: profile.did,
637 handle: profile.handle,
638 })}
639 onPress={onPress}
640 style={linkStyle}>
641 {avatarEl}
642 </Link>
643 )}
644 </ProfileHoverCard>
645 )
646}
647PreviewableUserAvatar = memo(PreviewableUserAvatar)
648export {PreviewableUserAvatar}
649
650// HACK
651// We have started serving smaller avis but haven't updated lexicons to give the data properly
652// manually string-replace to use the smaller ones
653// -prf
654function hackModifyThumbnailPath(uri: string, isEnabled: boolean): string {
655 return isEnabled
656 ? uri.replace('/img/avatar/plain/', '/img/avatar_thumbnail/plain/')
657 : uri
658}
659
660const styles = StyleSheet.create({
661 editButtonContainer: {
662 position: 'absolute',
663 width: 24,
664 height: 24,
665 bottom: 0,
666 right: 0,
667 borderRadius: 12,
668 alignItems: 'center',
669 justifyContent: 'center',
670 },
671})