keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects Releases Wiki Activity

Merge branch 'clearnet' into message-requests

Browse Source
pull/2000/head
Audric Ackermann 3 years ago committed by GitHub
parent f17b923add 1c27ceb2d0
commit bef9058ffe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 210 additions and 481 deletions
Show Stats Download Patch File Download Diff File

21
js/background.js
Unescape Escape View File

@ -192,27 +192,6 @@
} }
}); });
Whisper.events.on('deleteLocalPublicMessages', async ({ messageServerIds, conversationId }) => {
if (!Array.isArray(messageServerIds)) {
return;
}
const messageIds = await window.Signal.Data.getMessageIdsFromServerIds(
messageServerIds,
conversationId
);
if (messageIds.length === 0) {
return;
}
const conversation = window.getConversationController().get(conversationId);
messageIds.forEach(id => {
if (conversation) {
conversation.removeMessage(id);
}
window.Signal.Data.removeMessage(id);
});
});
function manageExpiringData() { function manageExpiringData() {
window.Signal.Data.cleanSeenMessages(); window.Signal.Data.cleanSeenMessages();
window.Signal.Data.cleanLastHashes(); window.Signal.Data.cleanLastHashes();

54
ts/components/Avatar.tsx
Unescape Escape View File

@ -2,9 +2,10 @@ import React, { useCallback, useState } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { AvatarPlaceHolder, ClosedGroupAvatar } from './AvatarPlaceHolder'; import { AvatarPlaceHolder, ClosedGroupAvatar } from './AvatarPlaceHolder';
import { ConversationAvatar } from './session/usingClosedConversationDetails';
import { useEncryptedFileFetch } from '../hooks/useEncryptedFileFetch'; import { useEncryptedFileFetch } from '../hooks/useEncryptedFileFetch';
import _ from 'underscore'; import _ from 'underscore';
import { useMembersAvatars } from '../hooks/useMembersAvatars';
import { useAvatarPath, useConversationUsername } from '../hooks/useParamSelector';
export enum AvatarSize { export enum AvatarSize {
XS = 28, XS = 28,
@ -16,19 +17,18 @@ export enum AvatarSize {
} }
type Props = { type Props = {
avatarPath?: string | null; forcedAvatarPath?: string | null;
name?: string; // display name, profileName or pubkey, whatever is set first forcedName?: string;
pubkey?: string; pubkey?: string;
size: AvatarSize; size: AvatarSize;
base64Data?: string; // if this is not empty, it will be used to render the avatar with base64 encoded data 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; onAvatarClick?: () => void;
dataTestId?: string; dataTestId?: string;
}; };
const Identicon = (props: Props) => { const Identicon = (props: Props) => {
const { size, name, pubkey } = props; const { size, forcedName, pubkey } = props;
const userName = name || '0'; const userName = forcedName || '0';
return ( return (
<AvatarPlaceHolder <AvatarPlaceHolder
@ -41,26 +41,20 @@ const Identicon = (props: Props) => {
); );
}; };
const NoImage = (props: { const NoImage = (
memberAvatars?: Array<ConversationAvatar>; props: Pick<Props, 'forcedName' | 'size' | 'pubkey' | 'onAvatarClick'> & {
name?: string; isClosedGroup: boolean;
pubkey?: string; }
size: AvatarSize; ) => {
onAvatarClick?: () => void; const { forcedName, size, pubkey, isClosedGroup } = props;
}) => {
const { name, memberAvatars, size, pubkey } = props;
// if no image but we have conversations set for the group, renders group members avatars // if no image but we have conversations set for the group, renders group members avatars
if (memberAvatars) { if (pubkey && isClosedGroup) {
return ( return (
<ClosedGroupAvatar <ClosedGroupAvatar size={size} closedGroupId={pubkey} onAvatarClick={props.onAvatarClick} />
size={size}
memberAvatars={memberAvatars}
onAvatarClick={props.onAvatarClick}
/>
); );
} }
return <Identicon size={size} name={name} pubkey={pubkey} />; return <Identicon size={size} forcedName={forcedName} pubkey={pubkey} />;
}; };
const AvatarImage = (props: { const AvatarImage = (props: {
@ -93,20 +87,26 @@ const AvatarImage = (props: {
}; };
const AvatarInner = (props: Props) => { const AvatarInner = (props: Props) => {
const { avatarPath, base64Data, size, memberAvatars, name, dataTestId } = props; const { base64Data, size, pubkey, forcedAvatarPath, forcedName, dataTestId } = props;
const [imageBroken, setImageBroken] = useState(false); const [imageBroken, setImageBroken] = useState(false);
const closedGroupMembers = useMembersAvatars(pubkey);
const avatarPath = useAvatarPath(pubkey);
const name = useConversationUsername(pubkey);
// contentType is not important // contentType is not important
const { urlToLoad } = useEncryptedFileFetch(avatarPath || '', ''); const { urlToLoad } = useEncryptedFileFetch(forcedAvatarPath || avatarPath || '', '');
const handleImageError = () => { const handleImageError = () => {
window.log.warn( window.log.warn(
'Avatar: Image failed to load; failing over to placeholder', 'Avatar: Image failed to load; failing over to placeholder',
urlToLoad, urlToLoad,
avatarPath forcedAvatarPath || avatarPath
); );
setImageBroken(true); setImageBroken(true);
}; };
const isClosedGroupAvatar = Boolean(memberAvatars?.length); const isClosedGroupAvatar = Boolean(closedGroupMembers?.length);
const hasImage = (base64Data || urlToLoad) && !imageBroken && !isClosedGroupAvatar; const hasImage = (base64Data || urlToLoad) && !imageBroken && !isClosedGroupAvatar;
const isClickable = !!props.onAvatarClick; const isClickable = !!props.onAvatarClick;
@ -130,11 +130,11 @@ const AvatarInner = (props: Props) => {
avatarPath={urlToLoad} avatarPath={urlToLoad}
base64Data={base64Data} base64Data={base64Data}
imageBroken={imageBroken} imageBroken={imageBroken}
name={name} name={forcedName || name}
handleImageError={handleImageError} handleImageError={handleImageError}
/> />
) : ( ) : (
<NoImage {...props} /> <NoImage {...props} isClosedGroup={isClosedGroupAvatar} />
)} )}
</div> </div>
); );

82
ts/components/AvatarPlaceHolder/ClosedGroupAvatar.tsx
Unescape Escape View File

@ -1,59 +1,43 @@
import React from 'react'; import React from 'react';
import { useMembersAvatars } from '../../hooks/useMembersAvatars';
import { Avatar, AvatarSize } from '../Avatar'; import { Avatar, AvatarSize } from '../Avatar';
import { ConversationAvatar } from '../session/usingClosedConversationDetails';
interface Props { type Props = {
size: number; size: number;
memberAvatars: Array<ConversationAvatar>; // this is added by usingClosedConversationDetails closedGroupId: string;
onAvatarClick?: () => void; onAvatarClick?: () => void;
} };
export class ClosedGroupAvatar extends React.PureComponent<Props> { function getClosedGroupAvatarsSize(size: AvatarSize): AvatarSize {
public getClosedGroupAvatarsSize(size: AvatarSize): AvatarSize { // Always use the size directly under the one requested
// Always use the size directly under the one requested switch (size) {
switch (size) { case AvatarSize.S:
case AvatarSize.S: return AvatarSize.XS;
return AvatarSize.XS; case AvatarSize.M:
case AvatarSize.M: return AvatarSize.S;
return AvatarSize.S; case AvatarSize.L:
case AvatarSize.L: return AvatarSize.M;
return AvatarSize.M; case AvatarSize.XL:
case AvatarSize.XL: return AvatarSize.L;
return AvatarSize.L; case AvatarSize.HUGE:
case AvatarSize.HUGE: return AvatarSize.XL;
return AvatarSize.XL; default:
default: throw new Error(`Invalid size request for closed group avatar: ${size}`);
throw new Error(`Invalid size request for closed group avatar: ${size}`);
}
} }
}
public render() { export const ClosedGroupAvatar = (props: Props) => {
const { memberAvatars, size, onAvatarClick } = this.props; const { closedGroupId, size, onAvatarClick } = props;
const avatarsDiameter = this.getClosedGroupAvatarsSize(size);
const conv1 = memberAvatars.length > 0 ? memberAvatars[0] : undefined; const memberAvatars = useMembersAvatars(closedGroupId);
const conv2 = memberAvatars.length > 1 ? memberAvatars[1] : undefined; const avatarsDiameter = getClosedGroupAvatarsSize(size);
const name1 = conv1?.name || conv1?.id || undefined; const firstMemberId = memberAvatars?.[0];
const name2 = conv2?.name || conv2?.id || undefined; const secondMemberID = memberAvatars?.[1];
// use the 2 first members as group avatars return (
return ( <div className="module-avatar__icon-closed">
<div className="module-avatar__icon-closed"> <Avatar size={avatarsDiameter} pubkey={firstMemberId} onAvatarClick={onAvatarClick} />
<Avatar <Avatar size={avatarsDiameter} pubkey={secondMemberID} onAvatarClick={onAvatarClick} />
avatarPath={conv1?.avatarPath} </div>
name={name1} );
size={avatarsDiameter} };
pubkey={conv1?.id}
onAvatarClick={onAvatarClick}
/>
<Avatar
avatarPath={conv2?.avatarPath}
name={name2}
size={avatarsDiameter}
pubkey={conv2?.id}
onAvatarClick={onAvatarClick}
/>
</div>
);
}
}

82
ts/components/ContactListItem.tsx
Unescape Escape View File

@ -3,55 +3,43 @@ import classNames from 'classnames';
import { Avatar, AvatarSize } from './Avatar'; import { Avatar, AvatarSize } from './Avatar';
import { Emojify } from './conversation/Emojify'; import { Emojify } from './conversation/Emojify';
import { useConversationUsername, useIsMe } from '../hooks/useParamSelector';
interface Props { type Props = {
pubkey: string; pubkey: string;
isMe?: boolean;
name?: string;
profileName?: string;
avatarPath?: string;
onClick?: () => void; onClick?: () => void;
} };
export class ContactListItem extends React.Component<Props> { const AvatarItem = (props: { pubkey: string }) => {
public renderAvatar() { const { pubkey } = props;
const { avatarPath, name, pubkey, profileName } = this.props;
return <Avatar size={AvatarSize.S} pubkey={pubkey} />;
const userName = name || profileName || pubkey; };
return <Avatar avatarPath={avatarPath} name={userName} size={AvatarSize.S} pubkey={pubkey} />; export const ContactListItem = (props: Props) => {
} const { onClick, pubkey } = props;
public render() { const name = useConversationUsername(pubkey);
const { name, onClick, isMe, pubkey, profileName } = this.props; const isMe = useIsMe(pubkey);
const title = name ? name : pubkey; const title = name ? name : pubkey;
const displayName = isMe ? window.i18n('me') : title; const displayName = isMe ? window.i18n('me') : title;
const profileElement = return (
!isMe && profileName && !name ? ( <div
<span className="module-contact-list-item__text__profile-name"> role="button"
~ onClick={onClick}
<Emojify text={profileName} key={`emojify-list-item-${pubkey}`} /> className={classNames(
</span> 'module-contact-list-item',
) : null; onClick ? 'module-contact-list-item--with-click-handler' : null
)}
return ( >
<div <AvatarItem pubkey={pubkey} />
role="button" <div className="module-contact-list-item__text">
onClick={onClick} <div className="module-contact-list-item__text__name">
className={classNames( <Emojify text={displayName} />
'module-contact-list-item',
onClick ? 'module-contact-list-item--with-click-handler' : null
)}
>
{this.renderAvatar()}
<div className="module-contact-list-item__text">
<div className="module-contact-list-item__text__name">
<Emojify text={displayName} /> {profileElement}
</div>
</div> </div>
</div> </div>
); </div>
} );
} };

75
ts/components/ConversationListItem.tsx
Unescape Escape View File

@ -9,7 +9,6 @@ import { Timestamp } from './conversation/Timestamp';
import { ContactName } from './conversation/ContactName'; import { ContactName } from './conversation/ContactName';
import { TypingAnimation } from './conversation/TypingAnimation'; import { TypingAnimation } from './conversation/TypingAnimation';
import { ConversationAvatar } from './session/usingClosedConversationDetails';
import { MemoConversationListItemContextMenu } from './session/menu/ConversationListItemContextMenu'; import { MemoConversationListItemContextMenu } from './session/menu/ConversationListItemContextMenu';
import { createPortal } from 'react-dom'; import { createPortal } from 'react-dom';
import { OutgoingMessageStatus } from './conversation/message/OutgoingMessageStatus'; import { OutgoingMessageStatus } from './conversation/message/OutgoingMessageStatus';
@ -21,8 +20,7 @@ import {
ReduxConversationType, ReduxConversationType,
} from '../state/ducks/conversations'; } from '../state/ducks/conversations';
import _ from 'underscore'; import _ from 'underscore';
import { useMembersAvatars } from '../hooks/useMembersAvatar'; import { SessionIcon } from './session/icon';
import { SessionIcon, SessionIconButton } from './session/icon';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import { SectionType } from '../state/ducks/section'; import { SectionType } from '../state/ducks/section';
import { getFocusedSection } from '../state/selectors/section'; import { getFocusedSection } from '../state/selectors/section';
@ -31,6 +29,7 @@ import { Flex } from './basic/Flex';
import { forceSyncConfigurationNowIfNeeded } from '../session/utils/syncUtils'; import { forceSyncConfigurationNowIfNeeded } from '../session/utils/syncUtils';
import { updateUserDetailsModal } from '../state/ducks/modalDialog'; import { updateUserDetailsModal } from '../state/ducks/modalDialog';
import { approveConversation, blockConvoById } from '../interactions/conversationInteractions'; import { approveConversation, blockConvoById } from '../interactions/conversationInteractions';
import { useAvatarPath, useConversationUsername, useIsMe } from '../hooks/useParamSelector';
// tslint:disable-next-line: no-empty-interface // tslint:disable-next-line: no-empty-interface
export interface ConversationListItemProps extends ReduxConversationType {} export interface ConversationListItemProps extends ReduxConversationType {}
@ -58,11 +57,8 @@ const Portal = ({ children }: { children: any }) => {
const HeaderItem = (props: { const HeaderItem = (props: {
unreadCount: number; unreadCount: number;
isMe: boolean;
mentionedUs: boolean; mentionedUs: boolean;
activeAt?: number; activeAt?: number;
name?: string;
profileName?: string;
conversationId: string; conversationId: string;
isPinned: boolean; isPinned: boolean;
currentNotificationSetting: ConversationNotificationSettingType; currentNotificationSetting: ConversationNotificationSettingType;
@ -71,11 +67,8 @@ const HeaderItem = (props: {
unreadCount, unreadCount,
mentionedUs, mentionedUs,
activeAt, activeAt,
isMe,
isPinned, isPinned,
conversationId, conversationId,
profileName,
name,
currentNotificationSetting, currentNotificationSetting,
} = props; } = props;
@ -122,12 +115,7 @@ const HeaderItem = (props: {
unreadCount > 0 ? 'module-conversation-list-item__header__name--with-unread' : null unreadCount > 0 ? 'module-conversation-list-item__header__name--with-unread' : null
)} )}
> >
<UserItem <UserItem conversationId={conversationId} />
isMe={isMe}
conversationId={conversationId}
name={name}
profileName={profileName}
/>
</div> </div>
<StyledConversationListItemIconWrapper> <StyledConversationListItemIconWrapper>
@ -149,21 +137,18 @@ const HeaderItem = (props: {
); );
}; };
const UserItem = (props: { const UserItem = (props: { conversationId: string }) => {
name?: string; const { conversationId } = props;
profileName?: string;
isMe: boolean;
conversationId: string;
}) => {
const { name, conversationId, profileName, isMe } = props;
const shortenedPubkey = PubKey.shorten(conversationId); const shortenedPubkey = PubKey.shorten(conversationId);
const isMe = useIsMe(conversationId);
const username = useConversationUsername(conversationId);
const displayedPubkey = profileName ? shortenedPubkey : conversationId; const displayedPubkey = username ? shortenedPubkey : conversationId;
const displayName = isMe ? window.i18n('noteToSelf') : profileName; const displayName = isMe ? window.i18n('noteToSelf') : username;
let shouldShowPubkey = false; let shouldShowPubkey = false;
if ((!name || name.length === 0) && (!displayName || displayName.length === 0)) { if ((!username || username.length === 0) && (!displayName || displayName.length === 0)) {
shouldShowPubkey = true; shouldShowPubkey = true;
} }
@ -171,7 +156,7 @@ const UserItem = (props: {
<div className="module-conversation__user"> <div className="module-conversation__user">
<ContactName <ContactName
pubkey={displayedPubkey} pubkey={displayedPubkey}
name={name} name={username}
profileName={displayName} profileName={displayName}
module="module-conversation__user" module="module-conversation__user"
boldProfileName={true} boldProfileName={true}
@ -218,33 +203,23 @@ const MessageItem = (props: {
); );
}; };
const AvatarItem = (props: { const AvatarItem = (props: { conversationId: string; isPrivate: boolean }) => {
avatarPath: string | null; const { isPrivate, conversationId } = props;
conversationId: string; const userName = useConversationUsername(conversationId);
memberAvatars?: Array<ConversationAvatar>; const avatarPath = useAvatarPath(conversationId);
name?: string;
profileName?: string;
isPrivate: boolean;
}) => {
const { avatarPath, name, isPrivate, conversationId, profileName, memberAvatars } = props;
const userName = name || profileName || conversationId;
const dispatch = useDispatch(); const dispatch = useDispatch();
return ( return (
<div className="module-conversation-list-item__avatar-container"> <div className="module-conversation-list-item__avatar-container">
<Avatar <Avatar
avatarPath={avatarPath}
name={userName}
size={AvatarSize.S} size={AvatarSize.S}
memberAvatars={memberAvatars}
pubkey={conversationId} pubkey={conversationId}
onAvatarClick={() => { onAvatarClick={() => {
if (isPrivate) { if (isPrivate) {
dispatch( dispatch(
updateUserDetailsModal({ updateUserDetailsModal({
conversationId: conversationId, conversationId: conversationId,
userName, userName: userName || '',
authorAvatarPath: avatarPath, authorAvatarPath: avatarPath,
}) })
); );
@ -266,9 +241,7 @@ const ConversationListItem = (props: Props) => {
style, style,
mentionedUs, mentionedUs,
isMe, isMe,
name,
isPinned, isPinned,
profileName,
isTyping, isTyping,
lastMessage, lastMessage,
hasNickname, hasNickname,
@ -284,8 +257,6 @@ const ConversationListItem = (props: Props) => {
const triggerId = `conversation-item-${conversationId}-ctxmenu`; const triggerId = `conversation-item-${conversationId}-ctxmenu`;
const key = `conversation-item-${conversationId}`; const key = `conversation-item-${conversationId}`;
const membersAvatar = useMembersAvatars(props);
const openConvo = useCallback( const openConvo = useCallback(
async (e: React.MouseEvent<HTMLDivElement>) => { async (e: React.MouseEvent<HTMLDivElement>) => {
// mousedown is invoked sooner than onClick, but for both right and left click // mousedown is invoked sooner than onClick, but for both right and left click
@ -331,24 +302,14 @@ const ConversationListItem = (props: Props) => {
isBlocked ? 'module-conversation-list-item--is-blocked' : null isBlocked ? 'module-conversation-list-item--is-blocked' : null
)} )}
> >
<AvatarItem <AvatarItem conversationId={conversationId} isPrivate={isPrivate || false} />
conversationId={conversationId}
avatarPath={avatarPath || null}
memberAvatars={membersAvatar}
profileName={profileName}
name={name}
isPrivate={isPrivate || false}
/>
<div className="module-conversation-list-item__content"> <div className="module-conversation-list-item__content">
<HeaderItem <HeaderItem
mentionedUs={!!mentionedUs} mentionedUs={!!mentionedUs}
unreadCount={unreadCount || 0} unreadCount={unreadCount || 0}
activeAt={activeAt} activeAt={activeAt}
isMe={!!isMe}
isPinned={!!isPinned} isPinned={!!isPinned}
conversationId={conversationId} conversationId={conversationId}
name={name}
profileName={profileName}
currentNotificationSetting={currentNotificationSetting || 'all'} currentNotificationSetting={currentNotificationSetting || 'all'}
/> />
<MessageItem <MessageItem
@ -401,8 +362,6 @@ const ConversationListItem = (props: Props) => {
type={type} type={type}
currentNotificationSetting={currentNotificationSetting || 'all'} currentNotificationSetting={currentNotificationSetting || 'all'}
avatarPath={avatarPath || null} avatarPath={avatarPath || null}
name={name}
profileName={profileName}
/> />
</Portal> </Portal>
</div> </div>

23
ts/components/conversation/ConversationHeader.tsx
Unescape Escape View File

@ -5,7 +5,6 @@ import { Avatar, AvatarSize } from '../Avatar';
import { SessionIconButton } from '../session/icon'; import { SessionIconButton } from '../session/icon';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../session/SessionButton'; import { SessionButton, SessionButtonColor, SessionButtonType } from '../session/SessionButton';
import { ConversationAvatar } from '../session/usingClosedConversationDetails';
import { MemoConversationHeaderMenu } from '../session/menu/ConversationHeaderMenu'; import { MemoConversationHeaderMenu } from '../session/menu/ConversationHeaderMenu';
import { contextMenu } from 'react-contexify'; import { contextMenu } from 'react-contexify';
import styled from 'styled-components'; import styled from 'styled-components';
@ -16,7 +15,6 @@ import {
getCurrentNotificationSettingText, getCurrentNotificationSettingText,
getIsSelectedNoteToSelf, getIsSelectedNoteToSelf,
getIsSelectedPrivate, getIsSelectedPrivate,
getSelectedConversation,
getSelectedConversationIsPublic, getSelectedConversationIsPublic,
getSelectedConversationKey, getSelectedConversationKey,
getSelectedMessageIds, getSelectedMessageIds,
@ -25,7 +23,6 @@ import {
isRightPanelShowing, isRightPanelShowing,
} from '../../state/selectors/conversations'; } from '../../state/selectors/conversations';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import { useMembersAvatars } from '../../hooks/useMembersAvatar';
import { import {
deleteMessagesById, deleteMessagesById,
@ -165,30 +162,22 @@ const ExpirationLength = (props: { expirationSettingName?: string }) => {
}; };
const AvatarHeader = (props: { const AvatarHeader = (props: {
avatarPath: string | null;
memberAvatars?: Array<ConversationAvatar>;
name?: string;
pubkey: string; pubkey: string;
profileName?: string;
showBackButton: boolean; showBackButton: boolean;
onAvatarClick?: (pubkey: string) => void; onAvatarClick?: (pubkey: string) => void;
}) => { }) => {
const { avatarPath, memberAvatars, name, pubkey, profileName } = props; const { pubkey, onAvatarClick, showBackButton } = props;
const userName = name || profileName || pubkey;
return ( return (
<span className="module-conversation-header__avatar"> <span className="module-conversation-header__avatar">
<Avatar <Avatar
avatarPath={avatarPath}
name={userName}
size={AvatarSize.S} size={AvatarSize.S}
onAvatarClick={() => { onAvatarClick={() => {
// do not allow right panel to appear if another button is shown on the SessionConversation // do not allow right panel to appear if another button is shown on the SessionConversation
if (props.onAvatarClick && !props.showBackButton) { if (onAvatarClick && !showBackButton) {
props.onAvatarClick(pubkey); onAvatarClick(pubkey);
} }
}} }}
memberAvatars={memberAvatars}
pubkey={pubkey} pubkey={pubkey}
/> />
</span> </span>
@ -344,8 +333,6 @@ export const ConversationHeaderWithDetails = () => {
const headerProps = useSelector(getConversationHeaderProps); const headerProps = useSelector(getConversationHeaderProps);
const isSelectionMode = useSelector(isMessageSelectionMode); const isSelectionMode = useSelector(isMessageSelectionMode);
const selectedConversation = useSelector(getSelectedConversation);
const memberDetails = useMembersAvatars(selectedConversation);
const isMessageDetailOpened = useSelector(isMessageDetailView); const isMessageDetailOpened = useSelector(isMessageDetailView);
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -400,10 +387,6 @@ export const ConversationHeaderWithDetails = () => {
}} }}
pubkey={conversationKey} pubkey={conversationKey}
showBackButton={isMessageDetailOpened} showBackButton={isMessageDetailOpened}
avatarPath={avatarPath}
memberAvatars={memberDetails}
name={name}
profileName={profileName}
/> />
</> </>
)} )}

9
ts/components/conversation/MessageDetail.tsx
Unescape Escape View File

@ -13,11 +13,10 @@ import {
} from '../../state/selectors/conversations'; } from '../../state/selectors/conversations';
import { deleteMessagesById } from '../../interactions/conversations/unsendingInteractions'; import { deleteMessagesById } from '../../interactions/conversations/unsendingInteractions';
const AvatarItem = (props: { contact: ContactPropsMessageDetail }) => { const AvatarItem = (props: { pubkey: string | undefined }) => {
const { avatarPath, pubkey, name, profileName } = props.contact; const { pubkey } = props;
const userName = name || profileName || pubkey;
return <Avatar avatarPath={avatarPath} name={userName} size={AvatarSize.S} pubkey={pubkey} />; return <Avatar size={AvatarSize.S} pubkey={pubkey} />;
}; };
const DeleteButtonItem = (props: { messageId: string; convoId: string; isDeletable: boolean }) => { const DeleteButtonItem = (props: { messageId: string; convoId: string; isDeletable: boolean }) => {
@ -68,7 +67,7 @@ const ContactItem = (props: { contact: ContactPropsMessageDetail }) => {
return ( return (
<div key={contact.pubkey} className="module-message-detail__contact"> <div key={contact.pubkey} className="module-message-detail__contact">
<AvatarItem contact={contact} /> <AvatarItem pubkey={contact.pubkey} />
<div className="module-message-detail__contact__text"> <div className="module-message-detail__contact__text">
<div className="module-message-detail__contact__name"> <div className="module-message-detail__contact__name">
<ContactName <ContactName

8
ts/components/conversation/message/MessageAvatar.tsx
Unescape Escape View File

@ -62,13 +62,7 @@ export const MessageAvatar = (props: Props) => {
return ( return (
<div className="module-message__author-avatar" key={`msg-avatar-${authorPhoneNumber}`}> <div className="module-message__author-avatar" key={`msg-avatar-${authorPhoneNumber}`}>
<Avatar <Avatar size={AvatarSize.S} onAvatarClick={onMessageAvatarClick} pubkey={authorPhoneNumber} />
avatarPath={authorAvatarPath}
name={userName}
size={AvatarSize.S}
onAvatarClick={onMessageAvatarClick}
pubkey={authorPhoneNumber}
/>
{isPublic && isSenderAdmin && ( {isPublic && isSenderAdmin && (
<div className="module-avatar__icon--crown-wrapper"> <div className="module-avatar__icon--crown-wrapper">
<div className="module-avatar__icon--crown" /> <div className="module-avatar__icon--crown" />

7
ts/components/dialog/EditProfileDialog.tsx
Unescape Escape View File

@ -246,7 +246,12 @@ export class EditProfileDialog extends React.Component<{}, State> {
const userName = profileName || this.convo.id; const userName = profileName || this.convo.id;
return ( return (
<Avatar avatarPath={avatar} name={userName} size={AvatarSize.XL} pubkey={this.convo.id} /> <Avatar
forcedAvatarPath={avatar}
forcedName={userName}
size={AvatarSize.XL}
pubkey={this.convo.id}
/>
); );
} }

2
ts/components/dialog/UpdateGroupNameDialog.tsx
Unescape Escape View File

@ -191,7 +191,7 @@ export class UpdateGroupNameDialog extends React.Component<Props, State> {
return ( return (
<div className="avatar-center"> <div className="avatar-center">
<div className="avatar-center-inner"> <div className="avatar-center-inner">
<Avatar avatarPath={this.state.avatar || ''} size={AvatarSize.XL} pubkey={pubkey} /> <Avatar forcedAvatarPath={this.state.avatar || ''} size={AvatarSize.XL} pubkey={pubkey} />
<div <div
className="image-upload-section" className="image-upload-section"
role="button" role="button"

3
ts/components/dialog/UserDetailsDialog.tsx
Unescape Escape View File

@ -25,7 +25,6 @@ export const UserDetailsDialog = (props: Props) => {
const convo = getConversationController().get(props.conversationId); const convo = getConversationController().get(props.conversationId);
const size = isEnlargedImageShown ? AvatarSize.HUGE : AvatarSize.XL; const size = isEnlargedImageShown ? AvatarSize.HUGE : AvatarSize.XL;
const userName = props.userName || props.conversationId;
const [_, copyToClipboard] = useCopyToClipboard(); const [_, copyToClipboard] = useCopyToClipboard();
@ -57,8 +56,6 @@ export const UserDetailsDialog = (props: Props) => {
<div className="avatar-center"> <div className="avatar-center">
<div className="avatar-center-inner"> <div className="avatar-center-inner">
<Avatar <Avatar
avatarPath={props.authorAvatarPath}
name={userName}
size={size} size={size}
onAvatarClick={() => { onAvatarClick={() => {
setIsEnlargedImageShown(!isEnlargedImageShown); setIsEnlargedImageShown(!isEnlargedImageShown);

19
ts/components/session/ActionsPanel.tsx
Unescape Escape View File

@ -50,11 +50,11 @@ import { DraggableCallContainer } from './calling/DraggableCallContainer';
import { IncomingCallDialog } from './calling/IncomingCallDialog'; import { IncomingCallDialog } from './calling/IncomingCallDialog';
import { CallInFullScreenContainer } from './calling/CallInFullScreenContainer'; import { CallInFullScreenContainer } from './calling/CallInFullScreenContainer';
const Section = (props: { type: SectionType; avatarPath?: string | null }) => { const Section = (props: { type: SectionType }) => {
const ourNumber = useSelector(getOurNumber); const ourNumber = useSelector(getOurNumber);
const unreadMessageCount = useSelector(getUnreadMessageCount); const unreadMessageCount = useSelector(getUnreadMessageCount);
const dispatch = useDispatch(); const dispatch = useDispatch();
const { type, avatarPath } = props; const { type } = props;
const focusedSection = useSelector(getFocusedSection); const focusedSection = useSelector(getFocusedSection);
const isSelected = focusedSection === props.type; const isSelected = focusedSection === props.type;
@ -85,16 +85,10 @@ const Section = (props: { type: SectionType; avatarPath?: string | null }) => {
}; };
if (type === SectionType.Profile) { if (type === SectionType.Profile) {
const conversation = getConversationController().get(ourNumber);
const profile = conversation?.getLokiProfile();
const userName = (profile && profile.displayName) || ourNumber;
return ( return (
<Avatar <Avatar
avatarPath={avatarPath}
size={AvatarSize.XS} size={AvatarSize.XS}
onAvatarClick={handleClick} onAvatarClick={handleClick}
name={userName}
pubkey={ourNumber} pubkey={ourNumber}
dataTestId="leftpane-primary-avatar" dataTestId="leftpane-primary-avatar"
/> />
@ -287,12 +281,7 @@ export const ActionsPanel = () => {
return () => clearTimeout(timeout); return () => clearTimeout(timeout);
}, []); }, []);
useInterval( useInterval(cleanUpOldDecryptedMedias, startCleanUpMedia ? cleanUpMediasInterval : null);
() => {
cleanUpOldDecryptedMedias();
},
startCleanUpMedia ? cleanUpMediasInterval : null
);
if (!ourPrimaryConversation) { if (!ourPrimaryConversation) {
window?.log?.warn('ActionsPanel: ourPrimaryConversation is not set'); window?.log?.warn('ActionsPanel: ourPrimaryConversation is not set');
@ -328,7 +317,7 @@ export const ActionsPanel = () => {
className="module-left-pane__sections-container" className="module-left-pane__sections-container"
data-testid="leftpane-section-container" data-testid="leftpane-section-container"
> >
<Section type={SectionType.Profile} avatarPath={ourPrimaryConversation.avatarPath} /> <Section type={SectionType.Profile} />
<Section type={SectionType.Message} /> <Section type={SectionType.Message} />
<Section type={SectionType.Contact} /> <Section type={SectionType.Contact} />
<Section type={SectionType.Settings} /> <Section type={SectionType.Settings} />

40
ts/components/session/SessionMemberListItem.tsx
Unescape Escape View File

@ -23,37 +23,17 @@ type Props = {
isSelected: boolean; isSelected: boolean;
// this bool is used to make a zombie appear with less opacity than a normal member // this bool is used to make a zombie appear with less opacity than a normal member
isZombie?: boolean; isZombie?: boolean;
onSelect?: any; onSelect?: (selectedMember: ContactType) => void;
onUnselect?: any; onUnselect?: (selectedMember: ContactType) => void;
};
const AvatarItem = (props: { memberPubkey?: string }) => {
return <Avatar size={AvatarSize.XS} pubkey={props.memberPubkey} />;
}; };
export const SessionMemberListItem = (props: Props) => { export const SessionMemberListItem = (props: Props) => {
const { isSelected, member, isZombie, onSelect, onUnselect } = props; const { isSelected, member, isZombie, onSelect, onUnselect } = props;
const renderAvatar = () => {
const { authorAvatarPath, authorName, authorPhoneNumber, authorProfileName } = member;
const userName = authorName || authorProfileName || authorPhoneNumber;
return (
<Avatar
avatarPath={authorAvatarPath}
name={userName}
size={AvatarSize.XS}
pubkey={authorPhoneNumber}
/>
);
};
const selectMember = () => {
onSelect?.(member);
};
const unselectMember = () => {
onUnselect?.(member);
};
const handleSelectionAction = () => {
isSelected ? unselectMember() : selectMember();
};
const name = member.authorProfileName || PubKey.shorten(member.authorPhoneNumber); const name = member.authorProfileName || PubKey.shorten(member.authorPhoneNumber);
return ( return (
@ -64,11 +44,15 @@ export const SessionMemberListItem = (props: Props) => {
isSelected && 'selected', isSelected && 'selected',
isZombie && 'zombie' isZombie && 'zombie'
)} )}
onClick={handleSelectionAction} onClick={() => {
isSelected ? onUnselect?.(member) : onSelect?.(member);
}}
role="button" role="button"
> >
<div className="session-member-item__info"> <div className="session-member-item__info">
<span className="session-member-item__avatar">{renderAvatar()}</span> <span className="session-member-item__avatar">
<AvatarItem memberPubkey={member.id} />
</span>
<span className="session-member-item__name">{name}</span> <span className="session-member-item__name">{name}</span>
</div> </div>
<span className={classNames('session-member-item__checkmark', isSelected && 'selected')}> <span className={classNames('session-member-item__checkmark', isSelected && 'selected')}>

10
ts/components/session/calling/DraggableCallContainer.tsx
Unescape Escape View File

@ -9,7 +9,6 @@ import { getHasOngoingCall, getHasOngoingCallWith } from '../../../state/selecto
import { openConversationWithMessages } from '../../../state/ducks/conversations'; import { openConversationWithMessages } from '../../../state/ducks/conversations';
import { Avatar, AvatarSize } from '../../Avatar'; import { Avatar, AvatarSize } from '../../Avatar';
import { useVideoCallEventsListener } from '../../../hooks/useVideoEventListener'; import { useVideoCallEventsListener } from '../../../hooks/useVideoEventListener';
import { useAvatarPath, useConversationUsername } from '../../../hooks/useParamSelector';
import { VideoLoadingSpinner } from './InConversationCallContainer'; import { VideoLoadingSpinner } from './InConversationCallContainer';
export const DraggableCallWindow = styled.div` export const DraggableCallWindow = styled.div`
@ -77,8 +76,6 @@ export const DraggableCallContainer = () => {
'DraggableCallContainer', 'DraggableCallContainer',
false false
); );
const ongoingCallUsername = useConversationUsername(ongoingCallPubkey);
const avatarPath = useAvatarPath(ongoingCallPubkey);
const videoRefRemote = useRef<HTMLVideoElement>(null); const videoRefRemote = useRef<HTMLVideoElement>(null);
function onWindowResize() { function onWindowResize() {
@ -140,12 +137,7 @@ export const DraggableCallContainer = () => {
/> />
{remoteStreamVideoIsMuted && ( {remoteStreamVideoIsMuted && (
<CenteredAvatarInDraggable> <CenteredAvatarInDraggable>
<Avatar <Avatar size={AvatarSize.XL} pubkey={ongoingCallPubkey} />
size={AvatarSize.XL}
avatarPath={avatarPath}
name={ongoingCallUsername}
pubkey={ongoingCallPubkey}
/>
</CenteredAvatarInDraggable> </CenteredAvatarInDraggable>
)} )}
</DraggableCallWindowInner> </DraggableCallWindowInner>

28
ts/components/session/calling/InConversationCallContainer.tsx
Unescape Escape View File

@ -6,7 +6,6 @@ import _ from 'underscore';
import { UserUtils } from '../../../session/utils'; import { UserUtils } from '../../../session/utils';
import { import {
getCallIsInFullScreen, getCallIsInFullScreen,
getHasOngoingCallWith,
getHasOngoingCallWithFocusedConvo, getHasOngoingCallWithFocusedConvo,
getHasOngoingCallWithFocusedConvoIsOffering, getHasOngoingCallWithFocusedConvoIsOffering,
getHasOngoingCallWithFocusedConvosIsConnecting, getHasOngoingCallWithFocusedConvosIsConnecting,
@ -16,11 +15,6 @@ import { StyledVideoElement } from './DraggableCallContainer';
import { Avatar, AvatarSize } from '../../Avatar'; import { Avatar, AvatarSize } from '../../Avatar';
import { useVideoCallEventsListener } from '../../../hooks/useVideoEventListener'; import { useVideoCallEventsListener } from '../../../hooks/useVideoEventListener';
import {
useAvatarPath,
useOurAvatarPath,
useOurConversationUsername,
} from '../../../hooks/useParamSelector';
import { useModuloWithTripleDots } from '../../../hooks/useModuloWithTripleDots'; import { useModuloWithTripleDots } from '../../../hooks/useModuloWithTripleDots';
import { CallWindowControls } from './CallButtons'; import { CallWindowControls } from './CallButtons';
import { SessionSpinner } from '../SessionSpinner'; import { SessionSpinner } from '../SessionSpinner';
@ -118,23 +112,15 @@ export const VideoLoadingSpinner = (props: { fullWidth: boolean }) => {
// tslint:disable-next-line: max-func-body-length // tslint:disable-next-line: max-func-body-length
export const InConversationCallContainer = () => { export const InConversationCallContainer = () => {
const ongoingCallProps = useSelector(getHasOngoingCallWith);
const isInFullScreen = useSelector(getCallIsInFullScreen); const isInFullScreen = useSelector(getCallIsInFullScreen);
const ongoingCallPubkey = useSelector(getHasOngoingCallWithPubkey); const ongoingCallPubkey = useSelector(getHasOngoingCallWithPubkey);
const ongoingCallWithFocused = useSelector(getHasOngoingCallWithFocusedConvo); const ongoingCallWithFocused = useSelector(getHasOngoingCallWithFocusedConvo);
const ongoingCallUsername = ongoingCallProps?.profileName || ongoingCallProps?.name;
const videoRefRemote = useRef<HTMLVideoElement>(null); const videoRefRemote = useRef<HTMLVideoElement>(null);
const videoRefLocal = useRef<HTMLVideoElement>(null); const videoRefLocal = useRef<HTMLVideoElement>(null);
const ourPubkey = UserUtils.getOurPubKeyStrFromCache(); const ourPubkey = UserUtils.getOurPubKeyStrFromCache();
const remoteAvatarPath = useAvatarPath(ongoingCallPubkey);
const ourAvatarPath = useOurAvatarPath();
const ourUsername = useOurConversationUsername();
const { const {
currentConnectedAudioInputs, currentConnectedAudioInputs,
currentConnectedCameras, currentConnectedCameras,
@ -190,12 +176,7 @@ export const InConversationCallContainer = () => {
/> />
{remoteStreamVideoIsMuted && ( {remoteStreamVideoIsMuted && (
<CenteredAvatarInConversation> <CenteredAvatarInConversation>
<Avatar <Avatar size={AvatarSize.XL} pubkey={ongoingCallPubkey} />
size={AvatarSize.XL}
avatarPath={remoteAvatarPath}
name={ongoingCallUsername}
pubkey={ongoingCallPubkey}
/>
</CenteredAvatarInConversation> </CenteredAvatarInConversation>
)} )}
</VideoContainer> </VideoContainer>
@ -208,12 +189,7 @@ export const InConversationCallContainer = () => {
/> />
{localStreamVideoIsMuted && ( {localStreamVideoIsMuted && (
<CenteredAvatarInConversation> <CenteredAvatarInConversation>
<Avatar <Avatar size={AvatarSize.XL} pubkey={ourPubkey} />
size={AvatarSize.XL}
avatarPath={ourAvatarPath}
name={ourUsername}
pubkey={ourPubkey}
/>
</CenteredAvatarInConversation> </CenteredAvatarInConversation>
)} )}
</VideoContainer> </VideoContainer>

10
ts/components/session/calling/IncomingCallDialog.tsx
Unescape Escape View File

@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
import styled from 'styled-components'; import styled from 'styled-components';
import _ from 'underscore'; import _ from 'underscore';
import { useAvatarPath, useConversationUsername } from '../../../hooks/useParamSelector'; import { useConversationUsername } from '../../../hooks/useParamSelector';
import { ed25519Str } from '../../../session/onions/onionPath'; import { ed25519Str } from '../../../session/onions/onionPath';
import { CallManager } from '../../../session/utils'; import { CallManager } from '../../../session/utils';
import { getHasIncomingCall, getHasIncomingCallFrom } from '../../../state/selectors/call'; import { getHasIncomingCall, getHasIncomingCallFrom } from '../../../state/selectors/call';
@ -70,7 +70,6 @@ export const IncomingCallDialog = () => {
} }
}; };
const from = useConversationUsername(incomingCallFromPubkey); const from = useConversationUsername(incomingCallFromPubkey);
const incomingAvatar = useAvatarPath(incomingCallFromPubkey);
if (!hasIncomingCall) { if (!hasIncomingCall) {
return null; return null;
} }
@ -79,12 +78,7 @@ export const IncomingCallDialog = () => {
return ( return (
<SessionWrapperModal title={window.i18n('incomingCallFrom', from)}> <SessionWrapperModal title={window.i18n('incomingCallFrom', from)}>
<IncomingCallAvatatContainer> <IncomingCallAvatatContainer>
<Avatar <Avatar size={AvatarSize.XL} pubkey={incomingCallFromPubkey} />
size={AvatarSize.XL}
avatarPath={incomingAvatar}
name={from}
pubkey={incomingCallFromPubkey}
/>
</IncomingCallAvatatContainer> </IncomingCallAvatatContainer>
<div className="session-modal__button-group"> <div className="session-modal__button-group">
<SessionButton <SessionButton

22
ts/components/session/conversation/SessionRightPanel.tsx
Unescape Escape View File

@ -31,7 +31,6 @@ import {
getSelectedConversation, getSelectedConversation,
isRightPanelShowing, isRightPanelShowing,
} from '../../../state/selectors/conversations'; } from '../../../state/selectors/conversations';
import { useMembersAvatars } from '../../../hooks/useMembersAvatar';
import { closeRightPanel } from '../../../state/ducks/conversations'; import { closeRightPanel } from '../../../state/ducks/conversations';
async function getMediaGalleryProps( async function getMediaGalleryProps(
@ -110,24 +109,13 @@ async function getMediaGalleryProps(
const HeaderItem = () => { const HeaderItem = () => {
const selectedConversation = useSelector(getSelectedConversation); const selectedConversation = useSelector(getSelectedConversation);
const dispatch = useDispatch(); const dispatch = useDispatch();
const memberDetails = useMembersAvatars(selectedConversation);
if (!selectedConversation) { if (!selectedConversation) {
return null; return null;
} }
const { const { id, isGroup, isKickedFromGroup, isBlocked, left } = selectedConversation;
avatarPath,
id,
isGroup,
isKickedFromGroup,
profileName,
isBlocked,
left,
name,
} = selectedConversation;
const showInviteContacts = isGroup && !isKickedFromGroup && !isBlocked && !left; const showInviteContacts = isGroup && !isKickedFromGroup && !isBlocked && !left;
const userName = name || profileName || id;
return ( return (
<div className="group-settings-header"> <div className="group-settings-header">
@ -139,13 +127,7 @@ const HeaderItem = () => {
dispatch(closeRightPanel()); dispatch(closeRightPanel());
}} }}
/> />
<Avatar <Avatar size={AvatarSize.XL} pubkey={id} />
avatarPath={avatarPath || ''}
name={userName}
size={AvatarSize.XL}
memberAvatars={memberDetails}
pubkey={id}
/>
<div className="invite-friends-container"> <div className="invite-friends-container">
{showInviteContacts && ( {showInviteContacts && (
<SessionIconButton <SessionIconButton

12
ts/components/session/menu/ConversationListItemContextMenu.tsx
Unescape Escape View File

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import { animation, Menu } from 'react-contexify'; import { animation, Menu } from 'react-contexify';
import _ from 'underscore'; import _ from 'underscore';
import { useAvatarPath, useConversationUsername } from '../../../hooks/useParamSelector';
import { import {
ConversationNotificationSettingType, ConversationNotificationSettingType,
ConversationTypeEnum, ConversationTypeEnum,
@ -34,8 +35,6 @@ export type PropsContextConversationItem = {
left: boolean; left: boolean;
theme?: any; theme?: any;
currentNotificationSetting: ConversationNotificationSettingType; currentNotificationSetting: ConversationNotificationSettingType;
name: string | undefined;
profileName: string | undefined;
avatarPath: string | null; avatarPath: string | null;
}; };
@ -52,13 +51,12 @@ const ConversationListItemContextMenu = (props: PropsContextConversationItem) =>
isKickedFromGroup, isKickedFromGroup,
currentNotificationSetting, currentNotificationSetting,
isPrivate, isPrivate,
name,
profileName,
avatarPath,
} = props; } = props;
const isGroup = type === 'group'; const isGroup = type === 'group';
const userName = name || profileName || conversationId;
const userName = useConversationUsername(conversationId);
const avatarPath = useAvatarPath(conversationId);
return ( return (
<Menu id={triggerId} animation={animation.fade}> <Menu id={triggerId} animation={animation.fade}>
@ -80,7 +78,7 @@ const ConversationListItemContextMenu = (props: PropsContextConversationItem) =>
{getInviteContactMenuItem(isGroup, isPublic, conversationId)} {getInviteContactMenuItem(isGroup, isPublic, conversationId)}
{getDeleteContactMenuItem(isGroup, isPublic, left, isKickedFromGroup, conversationId)} {getDeleteContactMenuItem(isGroup, isPublic, left, isKickedFromGroup, conversationId)}
{getLeaveGroupMenuItem(isKickedFromGroup, left, isGroup, isPublic, conversationId)} {getLeaveGroupMenuItem(isKickedFromGroup, left, isGroup, isPublic, conversationId)}
{getShowUserDetailsMenuItem(isPrivate, conversationId, avatarPath, userName)} {getShowUserDetailsMenuItem(isPrivate, conversationId, avatarPath, userName || '')}
</Menu> </Menu>
); );
}; };

69
ts/components/session/usingClosedConversationDetails.tsx
Unescape Escape View File

@ -1,69 +0,0 @@
import { GroupUtils, UserUtils } from '../../session/utils';
import { PubKey } from '../../session/types';
import React from 'react';
import * as _ from 'lodash';
import { getConversationController } from '../../session/conversations';
export type ConversationAvatar = {
avatarPath?: string;
id?: string; // member's pubkey
name?: string;
};
type State = {
memberAvatars?: Array<ConversationAvatar>; // this is added by usingClosedConversationDetails
};
export function usingClosedConversationDetails(WrappedComponent: any) {
return class extends React.Component<any, State> {
constructor(props: any) {
super(props);
this.state = {
memberAvatars: undefined,
};
}
public componentDidMount() {
this.fetchClosedConversationDetails();
}
public componentWillReceiveProps() {
this.fetchClosedConversationDetails();
}
public render() {
return <WrappedComponent memberAvatars={this.state.memberAvatars} {...this.props} />;
}
private fetchClosedConversationDetails() {
const { isPublic, type, conversationType, isGroup, id } = this.props;
if (!isPublic && (conversationType === 'group' || type === 'group' || isGroup)) {
const groupId = id;
const ourPrimary = UserUtils.getOurPubKeyFromCache();
let members = GroupUtils.getGroupMembers(PubKey.cast(groupId));
const ourself = members.find(m => m.key !== ourPrimary.key);
// add ourself back at the back, so it's shown only if only 1 member and we are still a member
members = members.filter(m => m.key !== ourPrimary.key);
members.sort((a, b) => (a.key < b.key ? -1 : a.key > b.key ? 1 : 0));
if (ourself) {
members.push(ourPrimary);
}
// no need to forward more than 2 conversations for rendering the group avatar
members = members.slice(0, 2);
const memberConvos = _.compact(members.map(m => getConversationController().get(m.key)));
const memberAvatars = memberConvos.map(m => {
return {
avatarPath: m.getAvatarPath() || undefined,
id: m.id,
name: m.get('name') || m.get('profileName') || m.id,
};
});
this.setState({ memberAvatars });
} else {
this.setState({ memberAvatars: undefined });
}
}
};
}

55
ts/hooks/useMembersAvatar.tsx
Unescape Escape View File

@ -1,55 +0,0 @@
import _ from 'lodash';
import { useEffect, useState } from 'react';
import { getConversationController } from '../session/conversations';
import { UserUtils } from '../session/utils';
import { ReduxConversationType } from '../state/ducks/conversations';
export function useMembersAvatars(conversation: ReduxConversationType | undefined) {
const [membersAvatars, setMembersAvatars] = useState<
| Array<{
avatarPath: string | undefined;
id: string;
name: string;
}>
| undefined
>(undefined);
useEffect(
() => {
if (!conversation) {
setMembersAvatars(undefined);
return;
}
const { isPublic, isGroup, members: convoMembers } = conversation;
if (!isPublic && isGroup) {
const ourPrimary = UserUtils.getOurPubKeyStrFromCache();
const ourself = convoMembers?.find(m => m !== ourPrimary) || undefined;
// add ourself back at the back, so it's shown only if only 1 member and we are still a member
let membersFiltered = convoMembers?.filter(m => m !== ourPrimary) || [];
membersFiltered.sort((a, b) => (a < b ? -1 : a > b ? 1 : 0));
if (ourself) {
membersFiltered.push(ourPrimary);
}
// no need to forward more than 2 conversations for rendering the group avatar
membersFiltered = membersFiltered.slice(0, 2);
const memberConvos = _.compact(
membersFiltered.map(m => getConversationController().get(m))
);
const memberAvatars = memberConvos.map(m => {
return {
avatarPath: m.getAvatarPath() || undefined,
id: m.id as string,
name: (m.get('name') || m.get('profileName') || m.id) as string,
};
});
setMembersAvatars(memberAvatars);
} else {
setMembersAvatars(undefined);
}
},
conversation ? [conversation.members, conversation.id] : []
);
return membersAvatars;
}

40
ts/hooks/useMembersAvatars.tsx
Unescape Escape View File

@ -0,0 +1,40 @@
import { UserUtils } from '../session/utils';
import * as _ from 'lodash';
import { useSelector } from 'react-redux';
import { StateType } from '../state/reducer';
export function useMembersAvatars(closedGroupPubkey: string | undefined) {
const ourPrimary = UserUtils.getOurPubKeyStrFromCache();
return useSelector((state: StateType): Array<string> | undefined => {
if (!closedGroupPubkey) {
return undefined;
}
const groupConvo = state.conversations.conversationLookup[closedGroupPubkey];
if (groupConvo.isPrivate || groupConvo.isPublic || !groupConvo.isGroup) {
return undefined;
}
// this must be a closed group
const originalMembers = groupConvo.members;
if (!originalMembers || originalMembers.length === 0) {
return undefined;
}
const allMembersSorted = originalMembers.sort((a, b) => (a < b ? -1 : a > b ? 1 : 0));
// no need to forward more than 2 conversations for rendering the group avatar
const usAtTheEndMaxTwo = _.sortBy(allMembersSorted, a => (a === ourPrimary ? 1 : 0)).slice(
0,
2
);
const memberConvos = _.compact(
usAtTheEndMaxTwo
.map(m => state.conversations.conversationLookup[m])
.map(m => {
return m?.id || undefined;
})
);
return memberConvos && memberConvos.length ? memberConvos : undefined;
});
}

17
ts/hooks/useParamSelector.ts
Unescape Escape View File

@ -5,9 +5,9 @@ import { StateType } from '../state/reducer';
export function useAvatarPath(pubkey: string | undefined) { export function useAvatarPath(pubkey: string | undefined) {
return useSelector((state: StateType) => { return useSelector((state: StateType) => {
if (!pubkey) { if (!pubkey) {
return undefined; return null;
} }
return state.conversations.conversationLookup[pubkey]?.avatarPath; return state.conversations.conversationLookup[pubkey]?.avatarPath || null;
}); });
} }
@ -15,12 +15,19 @@ export function useOurAvatarPath() {
return useAvatarPath(UserUtils.getOurPubKeyStrFromCache()); return useAvatarPath(UserUtils.getOurPubKeyStrFromCache());
} }
export function useConversationUsername(pubkey: string | undefined) { /**
*
* @returns convo.profileName || convo.name || convo.id or undefined if the convo is not found
*/
export function useConversationUsername(pubkey?: string) {
return useSelector((state: StateType) => { return useSelector((state: StateType) => {
if (!pubkey) { if (!pubkey) {
return undefined; return undefined;
} }
const convo = state.conversations.conversationLookup[pubkey]; const convo = state.conversations.conversationLookup[pubkey];
if (!convo) {
return pubkey;
}
return convo?.profileName || convo?.name || convo.id; return convo?.profileName || convo?.name || convo.id;
}); });
} }
@ -28,3 +35,7 @@ export function useConversationUsername(pubkey: string | undefined) {
export function useOurConversationUsername() { export function useOurConversationUsername() {
return useConversationUsername(UserUtils.getOurPubKeyStrFromCache()); return useConversationUsername(UserUtils.getOurPubKeyStrFromCache());
} }
export function useIsMe(pubkey?: string) {
return pubkey && pubkey === UserUtils.getOurPubKeyStrFromCache();
}

2
ts/session/crypto/DecryptedAttachmentsManager.ts
Unescape Escape View File

@ -32,8 +32,6 @@ export const cleanUpOldDecryptedMedias = () => {
countKept++; countKept++;
} }
} }
urlToDecryptedBlobMap.clear();
urlToDecryptingPromise.clear();
window?.log?.info(`Clean medias blobs: cleaned/kept: ${countCleaned}:${countKept}`); window?.log?.info(`Clean medias blobs: cleaned/kept: ${countCleaned}:${countKept}`);
}; };

1
ts/state/selectors/conversations.ts
Unescape Escape View File

@ -326,6 +326,7 @@ export const _getConversationComparator = (testingi18n?: LocalizerType) => {
return collator.compare(leftTitle, rightTitle); return collator.compare(leftTitle, rightTitle);
}; };
}; };
export const getConversationComparator = createSelector(getIntl, _getConversationComparator); export const getConversationComparator = createSelector(getIntl, _getConversationComparator);
// export only because we use it in some of our tests // export only because we use it in some of our tests

Write Preview
Loading…
Cancel
Save