diff options
Diffstat (limited to 'src/view')
22 files changed, 89 insertions, 52 deletions
diff --git a/src/view/com/composer/ComposePost.tsx b/src/view/com/composer/ComposePost.tsx index d53d04abf..fb21b9f9d 100644 --- a/src/view/com/composer/ComposePost.tsx +++ b/src/view/com/composer/ComposePost.tsx @@ -205,6 +205,7 @@ export const ComposePost = observer(function ComposePost({ <UserAvatar handle={replyTo.author.handle} displayName={replyTo.author.displayName} + avatar={replyTo.author.avatar} size={50} /> <View style={styles.replyToPost}> @@ -223,6 +224,7 @@ export const ComposePost = observer(function ComposePost({ <UserAvatar handle={store.me.handle || ''} displayName={store.me.displayName} + avatar={store.me.avatar} size={50} /> <TextInput diff --git a/src/view/com/composer/Prompt.tsx b/src/view/com/composer/Prompt.tsx index 7805e00dd..55730dc70 100644 --- a/src/view/com/composer/Prompt.tsx +++ b/src/view/com/composer/Prompt.tsx @@ -29,6 +29,7 @@ export function ComposePrompt({ size={50} handle={store.me.handle || ''} displayName={store.me.displayName} + avatar={store.me.avatar} /> </TouchableOpacity> ) : undefined} diff --git a/src/view/com/discover/SuggestedFollows.tsx b/src/view/com/discover/SuggestedFollows.tsx index d5875f0f7..315249159 100644 --- a/src/view/com/discover/SuggestedFollows.tsx +++ b/src/view/com/discover/SuggestedFollows.tsx @@ -149,6 +149,7 @@ const User = ({ size={40} displayName={item.displayName} handle={item.handle} + avatar={item.avatar} /> </View> <View style={styles.actorContent}> diff --git a/src/view/com/modals/EditProfile.tsx b/src/view/com/modals/EditProfile.tsx index 895fb05a7..5130fa2d7 100644 --- a/src/view/com/modals/EditProfile.tsx +++ b/src/view/com/modals/EditProfile.tsx @@ -1,8 +1,10 @@ import React, {useState} from 'react' +import {ComAtprotoBlobUpload} from '../../../third-party/api/index' import * as Toast from '../util/Toast' import {StyleSheet, Text, TouchableOpacity, View} from 'react-native' import LinearGradient from 'react-native-linear-gradient' import {BottomSheetScrollView, BottomSheetTextInput} from '@gorhom/bottom-sheet' +import {Image as PickedImage} from 'react-native-image-crop-picker' import {ErrorMessage} from '../util/ErrorMessage' import {useStores} from '../../../state' import {ProfileViewModel} from '../../../state/models/profile-view' @@ -12,7 +14,6 @@ import { MAX_DISPLAY_NAME, MAX_DESCRIPTION, } from '../../../lib/strings' -import * as Profile from '../../../third-party/api/src/client/types/app/bsky/actor/profile' import {UserBanner} from '../util/UserBanner' import {UserAvatar} from '../util/UserAvatar' @@ -36,40 +37,44 @@ export function Component({ const [userBanner, setUserBanner] = useState<string | null>( profileView.userBanner, ) - const [userAvatar, setUserAvatar] = useState<string | null>( - profileView.userAvatar, + const [userAvatar, setUserAvatar] = useState<string | undefined>( + profileView.avatar, ) + const [newUserAvatar, setNewUserAvatar] = useState<PickedImage | undefined>() const onPressCancel = () => { store.shell.closeModal() } + const onSelectNewAvatar = (img: PickedImage) => { + console.log(img) + setNewUserAvatar(img) + setUserAvatar(img.path) + } const onPressSave = async () => { if (error) { setError('') } try { await profileView.updateProfile( - (existing?: Profile.Record): Profile.Record => { - if (existing) { - existing.displayName = displayName - existing.description = description - return existing - } - return { - displayName, - description, - } + { + displayName, + description, }, - userAvatar, // TEMP + newUserAvatar, userBanner, // TEMP ) Toast.show('Profile updated') onUpdate?.() store.shell.closeModal() } catch (e: any) { - console.error(e) - setError( - 'Failed to save your profile. Check your internet connection and try again.', - ) + if (e instanceof ComAtprotoBlobUpload.InvalidBlobError) { + setError(e.message) + } else { + // TODO replace when error detection is correct + setError(e.message) + // setError( + // 'Failed to save your profile. Check your internet connection and try again.', + // ) + } } } @@ -86,15 +91,15 @@ export function Component({ <View style={styles.avi}> <UserAvatar size={80} - userAvatar={userAvatar} + avatar={userAvatar} handle={profileView.handle} - setUserAvatar={setUserAvatar} + onSelectNewAvatar={onSelectNewAvatar} displayName={profileView.displayName} /> </View> </View> {error !== '' && ( - <View style={s.mb10}> + <View style={{marginTop: 20}}> <ErrorMessage message={error} /> </View> )} diff --git a/src/view/com/modals/InviteToScene.tsx b/src/view/com/modals/InviteToScene.tsx index 8df38daf0..95ae087a9 100644 --- a/src/view/com/modals/InviteToScene.tsx +++ b/src/view/com/modals/InviteToScene.tsx @@ -130,6 +130,7 @@ export const Component = observer(function Component({ did={item.did} handle={item.handle} displayName={item.displayName} + avatar={item.avatar} renderButton={() => !createdInvite ? ( <> @@ -162,6 +163,7 @@ export const Component = observer(function Component({ did={item.subject.did} handle={item.subject.handle} displayName={item.subject.displayName} + avatar={item.subject.avatar} renderButton={() => ( <> <FontAwesomeIcon icon="x" style={[s.mr5]} size={14} /> diff --git a/src/view/com/notifications/FeedItem.tsx b/src/view/com/notifications/FeedItem.tsx index c36cc34b7..c61159c72 100644 --- a/src/view/com/notifications/FeedItem.tsx +++ b/src/view/com/notifications/FeedItem.tsx @@ -139,6 +139,7 @@ export const FeedItem = observer(function FeedItem({ size={30} displayName={author.displayName} handle={author.handle} + avatar={author.avatar} /> </Link> ))} diff --git a/src/view/com/notifications/InviteAccepter.tsx b/src/view/com/notifications/InviteAccepter.tsx index 72bc06764..852744006 100644 --- a/src/view/com/notifications/InviteAccepter.tsx +++ b/src/view/com/notifications/InviteAccepter.tsx @@ -26,6 +26,7 @@ export function InviteAccepter({item}: {item: NotificationsViewItemModel}) { did={item.author.did} handle={item.author.handle} displayName={item.author.displayName} + avatar={item.author.avatar} /> </View> </View> diff --git a/src/view/com/post-thread/PostRepostedBy.tsx b/src/view/com/post-thread/PostRepostedBy.tsx index ca5cc476a..1f238f5b3 100644 --- a/src/view/com/post-thread/PostRepostedBy.tsx +++ b/src/view/com/post-thread/PostRepostedBy.tsx @@ -93,6 +93,7 @@ const RepostedByItem = ({item}: {item: RepostedByViewItemModel}) => { size={40} displayName={item.displayName} handle={item.handle} + avatar={item.avatar} /> </View> <View style={styles.layoutContent}> diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx index a90990b5a..8408eb6c0 100644 --- a/src/view/com/post-thread/PostThreadItem.tsx +++ b/src/view/com/post-thread/PostThreadItem.tsx @@ -61,6 +61,7 @@ export const PostThreadItem = observer(function PostThreadItem({ author: { handle: item.author.handle, displayName: item.author.displayName, + avatar: item.author.avatar, }, }, onPost: onPostReply, @@ -113,6 +114,7 @@ export const PostThreadItem = observer(function PostThreadItem({ size={50} displayName={item.author.displayName} handle={item.author.handle} + avatar={item.author.avatar} /> </Link> </View> @@ -236,6 +238,7 @@ export const PostThreadItem = observer(function PostThreadItem({ <UserAvatar handle={item.replyingTo.author.handle} displayName={item.replyingTo.author.displayName} + avatar={item.replyingTo.author.avatar} size={30} /> </View> @@ -251,6 +254,7 @@ export const PostThreadItem = observer(function PostThreadItem({ size={50} displayName={item.author.displayName} handle={item.author.handle} + avatar={item.author.avatar} /> </Link> </View> diff --git a/src/view/com/post-thread/PostVotedBy.tsx b/src/view/com/post-thread/PostVotedBy.tsx index ad85d077f..7b798482a 100644 --- a/src/view/com/post-thread/PostVotedBy.tsx +++ b/src/view/com/post-thread/PostVotedBy.tsx @@ -93,6 +93,7 @@ const LikedByItem = ({item}: {item: VotesViewItemModel}) => { size={40} displayName={item.actor.displayName} handle={item.actor.handle} + avatar={item.actor.avatar} /> </View> <View style={styles.layoutContent}> diff --git a/src/view/com/post/Post.tsx b/src/view/com/post/Post.tsx index 23ec44c6b..97bec92ea 100644 --- a/src/view/com/post/Post.tsx +++ b/src/view/com/post/Post.tsx @@ -97,6 +97,7 @@ export const Post = observer(function Post({ author: { handle: item.author.handle, displayName: item.author.displayName, + avatar: item.author.avatar, }, }, }) @@ -137,6 +138,7 @@ export const Post = observer(function Post({ size={50} displayName={item.author.displayName} handle={item.author.handle} + avatar={item.author.avatar} /> </Link> </View> diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx index 0e3a58090..62f199673 100644 --- a/src/view/com/posts/FeedItem.tsx +++ b/src/view/com/posts/FeedItem.tsx @@ -54,6 +54,7 @@ export const FeedItem = observer(function FeedItem({ author: { handle: item.author.handle, displayName: item.author.displayName, + avatar: item.author.avatar, }, }, }) @@ -139,6 +140,7 @@ export const FeedItem = observer(function FeedItem({ displayName={ item.additionalParentPost?.thread?.author.displayName } + avatar={item.additionalParentPost?.thread?.author.avatar} size={32} /> </View> @@ -159,6 +161,7 @@ export const FeedItem = observer(function FeedItem({ size={item._isThreadChild ? 30 : 50} displayName={item.author.displayName} handle={item.author.handle} + avatar={item.author.avatar} /> </Link> </View> diff --git a/src/view/com/profile/ProfileCard.tsx b/src/view/com/profile/ProfileCard.tsx index fc8104937..22b8bbdea 100644 --- a/src/view/com/profile/ProfileCard.tsx +++ b/src/view/com/profile/ProfileCard.tsx @@ -8,14 +8,14 @@ export function ProfileCard({ did, handle, displayName, - description, + avatar, renderButton, onPressButton, }: { did: string handle: string displayName?: string - description?: string + avatar?: string renderButton?: () => JSX.Element onPressButton?: () => void }) { @@ -23,7 +23,12 @@ export function ProfileCard({ <Link style={styles.outer} href={`/profile/${handle}`} title={handle}> <View style={styles.layout}> <View style={styles.layoutAvi}> - <UserAvatar size={40} displayName={displayName} handle={handle} /> + <UserAvatar + size={40} + displayName={displayName} + handle={handle} + avatar={avatar} + /> </View> <View style={styles.layoutContent}> <Text style={[s.f16, s.bold]} numberOfLines={1}> diff --git a/src/view/com/profile/ProfileFollowers.tsx b/src/view/com/profile/ProfileFollowers.tsx index c4e9435d6..6801ba161 100644 --- a/src/view/com/profile/ProfileFollowers.tsx +++ b/src/view/com/profile/ProfileFollowers.tsx @@ -91,6 +91,7 @@ const User = ({item}: {item: FollowerItem}) => { size={40} displayName={item.displayName} handle={item.handle} + avatar={item.avatar} /> </View> <View style={styles.layoutContent}> diff --git a/src/view/com/profile/ProfileFollows.tsx b/src/view/com/profile/ProfileFollows.tsx index 9efd58f8c..a705cf467 100644 --- a/src/view/com/profile/ProfileFollows.tsx +++ b/src/view/com/profile/ProfileFollows.tsx @@ -91,6 +91,7 @@ const User = ({item}: {item: FollowItem}) => { size={40} displayName={item.displayName} handle={item.handle} + avatar={item.avatar} /> </View> <View style={styles.layoutContent}> diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx index d23be65a3..fb31c1847 100644 --- a/src/view/com/profile/ProfileHeader.tsx +++ b/src/view/com/profile/ProfileHeader.tsx @@ -158,7 +158,7 @@ export const ProfileHeader = observer(function ProfileHeader({ size={80} handle={view.handle} displayName={view.displayName} - userAvatar={view.userAvatar} + avatar={view.avatar} /> </View> <View style={styles.content}> diff --git a/src/view/com/profile/ProfileMembers.tsx b/src/view/com/profile/ProfileMembers.tsx index 75ef18caa..251ece41a 100644 --- a/src/view/com/profile/ProfileMembers.tsx +++ b/src/view/com/profile/ProfileMembers.tsx @@ -65,6 +65,7 @@ export const ProfileMembers = observer(function ProfileMembers({ did={item.did} handle={item.handle} displayName={item.displayName} + avatar={item.avatar} /> ) return ( diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx index 05a0a9ed9..f4ac4a322 100644 --- a/src/view/com/util/UserAvatar.tsx +++ b/src/view/com/util/UserAvatar.tsx @@ -6,23 +6,23 @@ import { openCamera, openCropper, openPicker, + Image as PickedImage, } from 'react-native-image-crop-picker' import {getGradient} from '../../lib/asset-gen' import {colors} from '../../lib/styles' -import {IMAGES_ENABLED} from '../../../build-flags' export function UserAvatar({ size, handle, - userAvatar, + avatar, displayName, - setUserAvatar, + onSelectNewAvatar, }: { size: number handle: string displayName: string | undefined - userAvatar?: string | null - setUserAvatar?: React.Dispatch<React.SetStateAction<string | null>> + avatar?: string | null + onSelectNewAvatar?: (img: PickedImage) => void }) { const initials = getInitials(displayName || handle) const gradient = getGradient(handle) @@ -35,14 +35,12 @@ export function UserAvatar({ openCamera({ mediaType: 'photo', cropping: true, - width: 80, - height: 80, + width: 400, + height: 400, cropperCircleOverlay: true, - }).then(item => { - if (setUserAvatar != null) { - setUserAvatar(item.path) - } - }) + forceJpg: true, // ios only + compressImageQuality: 0.7, + }).then(onSelectNewAvatar) }, }, { @@ -54,19 +52,17 @@ export function UserAvatar({ await openCropper({ mediaType: 'photo', path: item.path, - width: 80, - height: 80, + width: 400, + height: 400, cropperCircleOverlay: true, - }).then(croppedItem => { - if (setUserAvatar != null) { - setUserAvatar(croppedItem.path) - } - }) + forceJpg: true, // ios only + compressImageQuality: 0.7, + }).then(onSelectNewAvatar) }) }, }, ]) - }, [setUserAvatar]) + }, [onSelectNewAvatar]) const renderSvg = (size: number, initials: string) => ( <Svg width={size} height={size} viewBox="0 0 100 100"> @@ -89,11 +85,14 @@ export function UserAvatar({ </Svg> ) - // setUserAvatar is only passed as prop on the EditProfile component - return setUserAvatar != null && IMAGES_ENABLED ? ( + // onSelectNewAvatar is only passed as prop on the EditProfile component + return onSelectNewAvatar ? ( <TouchableOpacity onPress={handleEditAvatar}> - {userAvatar ? ( - <Image style={styles.avatarImage} source={{uri: userAvatar}} /> + {avatar ? ( + <Image + style={{width: size, height: size, borderRadius: (size / 2) | 0}} + source={{uri: avatar}} + /> ) : ( renderSvg(size, initials) )} @@ -105,11 +104,11 @@ export function UserAvatar({ /> </View> </TouchableOpacity> - ) : userAvatar ? ( + ) : avatar ? ( <Image - style={styles.avatarImage} + style={{width: size, height: size, borderRadius: (size / 2) | 0}} resizeMode="stretch" - source={{uri: userAvatar}} + source={{uri: avatar}} /> ) : ( renderSvg(size, initials) diff --git a/src/view/screens/Menu.tsx b/src/view/screens/Menu.tsx index ce2107158..27ed91adc 100644 --- a/src/view/screens/Menu.tsx +++ b/src/view/screens/Menu.tsx @@ -103,6 +103,7 @@ export const Menu = ({navIdx, visible}: ScreenParams) => { size={24} displayName={store.me.displayName} handle={store.me.handle} + avatar={store.me.avatar} /> } label={store.me.displayName || store.me.handle} @@ -163,6 +164,7 @@ export const Menu = ({navIdx, visible}: ScreenParams) => { size={24} displayName={membership.displayName} handle={membership.handle} + avatar={membership.avatar} /> } label={membership.displayName || membership.handle} diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx index b10ad80f8..1a52ded84 100644 --- a/src/view/screens/Profile.tsx +++ b/src/view/screens/Profile.tsx @@ -165,6 +165,7 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => { did={item.did} handle={item.handle} displayName={item.displayName} + avatar={item.avatar} /> ) } @@ -199,6 +200,7 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => { did={item.did} handle={item.handle} displayName={item.displayName} + avatar={item.avatar} renderButton={renderButton} onPressButton={() => onPressRemoveMember(item)} /> diff --git a/src/view/screens/Search.tsx b/src/view/screens/Search.tsx index ec32678c6..1cc0a5fe9 100644 --- a/src/view/screens/Search.tsx +++ b/src/view/screens/Search.tsx @@ -74,6 +74,7 @@ export const Search = ({navIdx, visible, params}: ScreenParams) => { <UserAvatar handle={item.handle} displayName={item.displayName} + avatar={item.avatar} size={36} /> <View style={[s.ml10]}> diff --git a/src/view/screens/Settings.tsx b/src/view/screens/Settings.tsx index b7344cf0d..599bb5793 100644 --- a/src/view/screens/Settings.tsx +++ b/src/view/screens/Settings.tsx @@ -42,6 +42,7 @@ export const Settings = observer(function Settings({ size={40} displayName={store.me.displayName} handle={store.me.handle || ''} + avatar={store.me.avatar} /> <View style={[s.ml10]}> <Text style={[s.f18]}> |