add display of roomPreview image on joinableDefaultRooms

ts/components/Avatar.tsx

@@ -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}

ts/components/basic/PillContainer.tsx

@@ -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 {

ts/components/session/SessionJoinableDefaultRooms.tsx

@@ -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)}
     />

ts/opengroup/opengroupV2/ApiUtil.ts

@@ -41,11 +41,8 @@ export type OpenGroupV2Info = {
   imageId?: string;
 };
 
-export type OpenGroupV2InfoJoinable = {
-  id: string;
-  name: string;
+export type OpenGroupV2InfoJoinable = OpenGroupV2Info & {
   completeUrl: string;
-  imageId?: string;
 };
 
 /**

ts/opengroup/opengroupV2/OpenGroupAPIV2.ts

@@ -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;
 };
 
 /**