Page MenuHomePhabricator
Files F3516399

D7187.diff
No OneTemporary
Actions

D7187.diff
View Options

diff --git a/lib/types/media-types.js b/lib/types/media-types.js
--- a/lib/types/media-types.js
+++ b/lib/types/media-types.js
@@ -55,6 +55,11 @@
export type Media = Image | Video | EncryptedImage | EncryptedVideo;
+export type AvatarMediaInfo = {
+ +type: 'photo',
+ +uri: string,
+};
+
export type ClientDBMediaInfo = {
+id: string,
+uri: string,
diff --git a/native/components/avatar.react.js b/native/components/avatar.react.js
--- a/native/components/avatar.react.js
+++ b/native/components/avatar.react.js
@@ -5,6 +5,7 @@
import type { ClientAvatar } from 'lib/types/avatar-types.js';
+import Multimedia from '../media/multimedia.react.js';
import { useShouldRenderAvatars } from '../utils/avatar-utils.js';
type Props = {
@@ -49,15 +50,35 @@
return styles.emojiLarge;
}, [size]);
- if (!shouldRenderAvatars) {
- return null;
- }
+ const avatar = React.useMemo(() => {
+ if (avatarInfo.type === 'image') {
+ const avatarMediaInfo = {
+ type: 'photo',
+ uri: avatarInfo.uri,
+ };
- return (
- <View style={emojiContainerStyle}>
- <Text style={emojiSizeStyle}>{avatarInfo.emoji}</Text>
- </View>
- );
+ return (
+ <View style={[containerSizeStyle, styles.imageContainer]}>
+ <Multimedia mediaInfo={avatarMediaInfo} spinnerColor="white" />
+ </View>
+ );
+ }
+
+ return (
+ <View style={emojiContainerStyle}>
+ <Text style={emojiSizeStyle}>{avatarInfo.emoji}</Text>
+ </View>
+ );
+ }, [
+ avatarInfo.emoji,
+ avatarInfo.type,
+ avatarInfo.uri,
+ containerSizeStyle,
+ emojiContainerStyle,
+ emojiSizeStyle,
+ ]);
+
+ return shouldRenderAvatars ? avatar : null;
}
const styles = StyleSheet.create({
@@ -81,6 +102,9 @@
fontSize: 14,
textAlign: 'center',
},
+ imageContainer: {
+ overflow: 'hidden',
+ },
large: {
borderRadius: 20,
height: 40,
diff --git a/native/media/multimedia.react.js b/native/media/multimedia.react.js
--- a/native/media/multimedia.react.js
+++ b/native/media/multimedia.react.js
@@ -5,13 +5,13 @@
import * as React from 'react';
import { View, StyleSheet } from 'react-native';
-import { type MediaInfo } from 'lib/types/media-types.js';
+import type { MediaInfo, AvatarMediaInfo } from 'lib/types/media-types.js';
import RemoteImage from './remote-image.react.js';
import { type InputState, InputStateContext } from '../input/input-state.js';
type BaseProps = {
- +mediaInfo: MediaInfo,
+ +mediaInfo: MediaInfo | AvatarMediaInfo,
+spinnerColor: string,
};
type Props = {

File Metadata

Mime Type
text/plain
Expires
Mon, Dec 23, 2:18 PM (18 h, 40 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2694858
Default Alt Text
D7187.diff (2 KB)

Event Timeline