mirror of
https://github.com/oxen-io/session-desktop.git
synced 2023-12-14 02:12:57 +01:00
add display of roomPreview image on joinableDefaultRooms
This commit is contained in:
parent
01aae16e2e
commit
8308879ff8
5 changed files with 44 additions and 13 deletions
|
@ -19,6 +19,7 @@ type Props = {
|
|||
name?: string; // display name, profileName or phoneNumber, whatever is set first
|
||||
pubkey?: string;
|
||||
size: AvatarSize;
|
||||
base64Data?: string; // if this is not empty, it will be used to render the avatar with base64 encoded data
|
||||
memberAvatars?: Array<ConversationAvatar>; // this is added by usingClosedConversationDetails
|
||||
onAvatarClick?: () => void;
|
||||
};
|
||||
|
@ -55,27 +56,29 @@ const NoImage = (props: {
|
|||
|
||||
const AvatarImage = (props: {
|
||||
avatarPath?: string;
|
||||
base64Data?: string;
|
||||
name?: string; // display name, profileName or phoneNumber, whatever is set first
|
||||
imageBroken: boolean;
|
||||
handleImageError: () => any;
|
||||
}) => {
|
||||
const { avatarPath, name, imageBroken, handleImageError } = props;
|
||||
const { avatarPath, base64Data, name, imageBroken, handleImageError } = props;
|
||||
|
||||
if (!avatarPath || imageBroken) {
|
||||
if ((!avatarPath && !base64Data) || imageBroken) {
|
||||
return null;
|
||||
}
|
||||
const dataToDisplay = base64Data ? `data:image/jpeg;base64,${base64Data}` : avatarPath;
|
||||
|
||||
return (
|
||||
<img
|
||||
onError={handleImageError}
|
||||
alt={window.i18n('contactAvatarAlt', [name])}
|
||||
src={avatarPath}
|
||||
src={dataToDisplay}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const Avatar = (props: Props) => {
|
||||
const { avatarPath, size, memberAvatars, name } = props;
|
||||
const { avatarPath, base64Data, size, memberAvatars, name } = props;
|
||||
const [imageBroken, setImageBroken] = useState(false);
|
||||
// contentType is not important
|
||||
|
||||
|
@ -86,7 +89,7 @@ export const Avatar = (props: Props) => {
|
|||
};
|
||||
|
||||
const isClosedGroupAvatar = memberAvatars && memberAvatars.length;
|
||||
const hasImage = urlToLoad && !imageBroken && !isClosedGroupAvatar;
|
||||
const hasImage = (base64Data || urlToLoad) && !imageBroken && !isClosedGroupAvatar;
|
||||
|
||||
const isClickable = !!props.onAvatarClick;
|
||||
|
||||
|
@ -107,6 +110,7 @@ export const Avatar = (props: Props) => {
|
|||
{hasImage ? (
|
||||
<AvatarImage
|
||||
avatarPath={urlToLoad}
|
||||
base64Data={base64Data}
|
||||
imageBroken={imageBroken}
|
||||
name={name}
|
||||
handleImageError={handleImageError}
|
||||
|
|
|
@ -17,6 +17,7 @@ const StyledPillContainer = styled.div<PillContainerProps>`
|
|||
padding: ${props => props.padding || ''};
|
||||
margin: ${props => props.margin || ''};
|
||||
border-radius: 300px;
|
||||
cursor: pointer;
|
||||
border: 1px solid ${props => props.theme.colors.pillDividerColor};
|
||||
transition: ${props => props.theme.common.animations.defaultDuration};
|
||||
&:hover {
|
||||
|
|
|
@ -1,6 +1,10 @@
|
|||
import React, { useReducer } from 'react';
|
||||
import React, { useEffect, useReducer, useState } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { joinOpenGroupV2WithUIEvents } from '../../opengroup/opengroupV2/JoinOpenGroupV2';
|
||||
import {
|
||||
joinOpenGroupV2WithUIEvents,
|
||||
parseOpenGroupV2,
|
||||
} from '../../opengroup/opengroupV2/JoinOpenGroupV2';
|
||||
import { downloadPreviewOpenGroupV2 } from '../../opengroup/opengroupV2/OpenGroupAPIV2';
|
||||
import { StateType } from '../../state/reducer';
|
||||
import { Avatar, AvatarSize } from '../Avatar';
|
||||
import { Flex } from '../basic/Flex';
|
||||
|
@ -16,9 +20,29 @@ export type JoinableRoomProps = {
|
|||
};
|
||||
|
||||
const SessionJoinableRoomAvatar = (props: JoinableRoomProps) => {
|
||||
const [base64Data, setBase64Data] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
const parsedInfos = parseOpenGroupV2(props.completeUrl);
|
||||
if (parsedInfos) {
|
||||
void downloadPreviewOpenGroupV2(parsedInfos)
|
||||
.then(base64 => {
|
||||
setBase64Data(base64 || '');
|
||||
})
|
||||
.catch(e => {
|
||||
window.log.warn('downloadPreviewOpenGroupV2 failed', e);
|
||||
setBase64Data('');
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn(e);
|
||||
}
|
||||
}, [props.imageId, props.completeUrl]);
|
||||
return (
|
||||
<Avatar
|
||||
size={AvatarSize.XS}
|
||||
base64Data={base64Data}
|
||||
{...props}
|
||||
onAvatarClick={() => props.onClick(props.completeUrl)}
|
||||
/>
|
||||
|
|
|
@ -41,11 +41,8 @@ export type OpenGroupV2Info = {
|
|||
imageId?: string;
|
||||
};
|
||||
|
||||
export type OpenGroupV2InfoJoinable = {
|
||||
id: string;
|
||||
name: string;
|
||||
export type OpenGroupV2InfoJoinable = OpenGroupV2Info & {
|
||||
completeUrl: string;
|
||||
imageId?: string;
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
@ -529,9 +529,14 @@ export const downloadFileOpenGroupV2ByUrl = async (
|
|||
return new Uint8Array(fromBase64ToArrayBuffer(base64Data));
|
||||
};
|
||||
|
||||
/**
|
||||
* Download the preview image for that opengroup room.
|
||||
* The returned value is a base64 string.
|
||||
* It can be used directly, or saved on the attachments directory if needed, but this function does not handle it
|
||||
*/
|
||||
export const downloadPreviewOpenGroupV2 = async (
|
||||
roomInfos: OpenGroupRequestCommonType
|
||||
): Promise<Uint8Array | null> => {
|
||||
): Promise<string | null> => {
|
||||
const request: OpenGroupV2Request = {
|
||||
method: 'GET',
|
||||
room: roomInfos.roomId,
|
||||
|
@ -552,7 +557,7 @@ export const downloadPreviewOpenGroupV2 = async (
|
|||
if (!base64Data) {
|
||||
return null;
|
||||
}
|
||||
return new Uint8Array(fromBase64ToArrayBuffer(base64Data));
|
||||
return base64Data;
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
Loading…
Reference in a new issue