diff --git a/src/view/com/modals/CreateOrEditMuteList.tsx b/src/view/com/modals/CreateOrEditMuteList.tsx
index 3f3cfc5f..4a440afe 100644
--- a/src/view/com/modals/CreateOrEditMuteList.tsx
+++ b/src/view/com/modals/CreateOrEditMuteList.tsx
@@ -18,7 +18,7 @@ import {ListModel} from 'state/models/content/list'
import {s, colors, gradients} from 'lib/styles'
import {enforceLen} from 'lib/strings/helpers'
import {compressIfNeeded} from 'lib/media/manip'
-import {UserAvatar} from '../util/UserAvatar'
+import {EditableUserAvatar} from '../util/UserAvatar'
import {usePalette} from 'lib/hooks/usePalette'
import {useTheme} from 'lib/ThemeContext'
import {useAnalytics} from 'lib/analytics/analytics'
@@ -148,7 +148,7 @@ export function Component({
)}
List Avatar
-
- void
+ moderation?: ModerationUI
+}
+
+interface EditableUserAvatarProps extends BaseUserAvatarProps {
+ onSelectNewAvatar: (img: RNImage | null) => void
}
interface PreviewableUserAvatarProps extends BaseUserAvatarProps {
+ moderation?: ModerationUI
did: string
handle: string
}
@@ -106,8 +110,65 @@ export function UserAvatar({
size,
avatar,
moderation,
- onSelectNewAvatar,
}: UserAvatarProps) {
+ const pal = usePalette('default')
+
+ const aviStyle = useMemo(() => {
+ if (type === 'algo' || type === 'list') {
+ return {
+ width: size,
+ height: size,
+ borderRadius: size > 32 ? 8 : 3,
+ }
+ }
+ return {
+ width: size,
+ height: size,
+ borderRadius: Math.floor(size / 2),
+ }
+ }, [type, size])
+
+ const alert = useMemo(() => {
+ if (!moderation?.alert) {
+ return null
+ }
+ return (
+
+
+
+ )
+ }, [moderation?.alert, size, pal])
+
+ return avatar &&
+ !((moderation?.blur && isAndroid) /* android crashes with blur */) ? (
+
+
+ {alert}
+
+ ) : (
+
+
+ {alert}
+
+ )
+}
+
+export function EditableUserAvatar({
+ type = 'user',
+ size,
+ avatar,
+ onSelectNewAvatar,
+}: EditableUserAvatarProps) {
const store = useStores()
const pal = usePalette('default')
const {requestCameraAccessIfNeeded} = useCameraPermission()
@@ -146,7 +207,7 @@ export function UserAvatar({
return
}
- onSelectNewAvatar?.(
+ onSelectNewAvatar(
await openCamera(store, {
width: 1000,
height: 1000,
@@ -186,7 +247,7 @@ export function UserAvatar({
path: item.path,
})
- onSelectNewAvatar?.(croppedImage)
+ onSelectNewAvatar(croppedImage)
},
},
!!avatar && {
@@ -203,7 +264,7 @@ export function UserAvatar({
web: 'trash',
},
onPress: async () => {
- onSelectNewAvatar?.(null)
+ onSelectNewAvatar(null)
},
},
].filter(Boolean) as DropdownItem[],
@@ -216,23 +277,7 @@ export function UserAvatar({
],
)
- const alert = useMemo(() => {
- if (!moderation?.alert) {
- return null
- }
- return (
-
-
-
- )
- }, [moderation?.alert, size, pal])
-
- // onSelectNewAvatar is only passed as prop on the EditProfile component
- return onSelectNewAvatar ? (
+ return (
- ) : avatar &&
- !((moderation?.blur && isAndroid) /* android crashes with blur */) ? (
-
-
- {alert}
-
- ) : (
-
-
- {alert}
-
)
}