From 30416d98ab60b1772248ab8b1c71a862680e63d4 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Tue, 15 Sep 2020 11:38:05 +1000 Subject: [PATCH 1/7] show our avatar on a group if less than 2 members --- .../usingClosedConversationDetails.tsx | 24 +++++++++++++++---- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/ts/components/session/usingClosedConversationDetails.tsx b/ts/components/session/usingClosedConversationDetails.tsx index 8d80fdefd..8cdf962a4 100644 --- a/ts/components/session/usingClosedConversationDetails.tsx +++ b/ts/components/session/usingClosedConversationDetails.tsx @@ -47,15 +47,29 @@ export function usingClosedConversationDetails(WrappedComponent: any) { (conversationType === 'group' || type === 'group' || isGroup) ) { const groupId = id || phoneNumber; - let members = await GroupUtils.getGroupMembers(PubKey.cast(groupId)); const ourPrimary = await UserUtil.getPrimary(); + let members = await 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)); - const membersConvos = members.map( - m => window.ConversationController.get(m.key).cachedProps - ); + if (ourself) { + members.push(ourPrimary); + } // no need to forward more than 2 conversation for rendering the group avatar - membersConvos.slice(0, 2); + members.slice(0, 2); + const membersConvos = await Promise.all( + members.map( + async m => + ( + await window.ConversationController.getOrCreateAndWait( + m.key, + 'private' + ) + ).cachedProps + ) + ); this.setState({ closedMemberConversations: membersConvos }); } } From 6eb13e43e39fbbc13b6565f31766eeffa5ee7405 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Tue, 15 Sep 2020 15:07:22 +1000 Subject: [PATCH 2/7] simplify a lot avatar props --- js/views/create_group_dialog_view.js | 1 + ts/components/Avatar.tsx | 66 +++++-------------- .../AvatarPlaceHolder/AvatarPlaceHolder.tsx | 17 ++--- .../AvatarPlaceHolder/ClosedGroupAvatar.tsx | 35 ++++------ ts/components/ContactListItem.tsx | 19 ++---- ts/components/ConversationListItem.tsx | 23 ++----- ts/components/EditProfileDialog.tsx | 16 ++--- ts/components/MessageSearchResult.tsx | 13 ++-- ts/components/UserDetailsDialog.tsx | 14 ++-- .../conversation/ConversationHeader.tsx | 15 +---- ts/components/conversation/MemberList.tsx | 19 +++--- ts/components/conversation/Message.tsx | 9 +-- ts/components/conversation/MessageDetail.tsx | 11 ++-- ts/components/conversation/TypingBubble.tsx | 11 +--- .../conversation/UpdateGroupNameDialog.tsx | 5 +- ts/components/conversation/_contactUtil.tsx | 11 +--- ts/components/session/ActionsPanel.tsx | 9 ++- .../session/SessionGroupSettings.tsx | 6 +- .../session/SessionMemberListItem.tsx | 17 +++-- .../usingClosedConversationDetails.tsx | 1 + 20 files changed, 104 insertions(+), 214 deletions(-) diff --git a/js/views/create_group_dialog_view.js b/js/views/create_group_dialog_view.js index d461cedcb..fdc1b688e 100644 --- a/js/views/create_group_dialog_view.js +++ b/js/views/create_group_dialog_view.js @@ -46,6 +46,7 @@ props: { titleText: this.titleText, isPublic: this.isPublic, + pubkey: this.groupId, groupName: this.groupName, okText: i18n('ok'), cancelText: i18n('cancel'), diff --git a/ts/components/Avatar.tsx b/ts/components/Avatar.tsx index 69863c2a6..3c30a6c30 100644 --- a/ts/components/Avatar.tsx +++ b/ts/components/Avatar.tsx @@ -1,23 +1,15 @@ import React from 'react'; import classNames from 'classnames'; -import { getInitials } from '../util/getInitials'; -import { LocalizerType } from '../types/Util'; import { AvatarPlaceHolder, ClosedGroupAvatar } from './AvatarPlaceHolder'; import { ConversationAttributes } from '../../js/models/conversations'; interface Props { avatarPath?: string; - color?: string; - conversationType: 'group' | 'direct'; - isPublic?: boolean; - noteToSelf?: boolean; - name?: string; - phoneNumber?: string; - profileName?: string; + name?: string; // display name, profileName or phoneNumber, whatever is set first + pubkey: string; size: number; closedMemberConversations?: Array; - i18n?: LocalizerType; onAvatarClick?: () => void; } @@ -50,19 +42,15 @@ export class Avatar extends React.PureComponent { } public renderIdenticon() { - const { phoneNumber, size, name, profileName } = this.props; + const { size, name, pubkey } = this.props; - if (!phoneNumber) { - window.log.error('Empty phoneNumber for identicon'); - return <>; - } + const userName = name || '0'; - const userName = profileName || name; return ( @@ -70,44 +58,31 @@ export class Avatar extends React.PureComponent { } public renderImage() { - const { avatarPath, name, phoneNumber, profileName } = this.props; + const { avatarPath, name } = this.props; const { imageBroken } = this.state; if (!avatarPath || imageBroken) { return null; } - const title = `${name || phoneNumber}${ - !name && profileName ? ` ~${profileName}` : '' - }`; - return ( {window.i18n('contactAvatarAlt', ); } public renderNoImage() { - const { - conversationType, - closedMemberConversations, - isPublic, - size, - i18n, - } = this.props; - - const isGroup = conversationType === 'group'; - - if (isGroup && !isPublic && closedMemberConversations) { - const forcedI18n = i18n || window.i18n; + const { closedMemberConversations, size } = this.props; + // if no image but we have conversations set for the group, renders group members avatars + if (closedMemberConversations) { return ( ); } @@ -119,12 +94,9 @@ export class Avatar extends React.PureComponent { } public render() { - const { avatarPath, color, size, conversationType } = this.props; + const { avatarPath, size } = this.props; const { imageBroken } = this.state; - - // If it's a direct conversation then we must have an identicon - const hasAvatar = avatarPath || conversationType === 'direct'; - const hasImage = hasAvatar && !imageBroken; + const hasImage = avatarPath && !imageBroken; if ( size !== 28 && @@ -142,8 +114,7 @@ export class Avatar extends React.PureComponent { className={classNames( 'module-avatar', `module-avatar--${size}`, - hasImage ? 'module-avatar--with-image' : 'module-avatar--no-image', - !hasImage ? `module-avatar--${color}` : null + hasImage ? 'module-avatar--with-image' : 'module-avatar--no-image' )} onClick={e => { this.onAvatarClickBound(e); @@ -163,14 +134,9 @@ export class Avatar extends React.PureComponent { } private renderAvatarOrIdenticon() { - const { avatarPath, conversationType } = this.props; - - // If it's a direct conversation then we must have an identicon - const hasAvatar = avatarPath || conversationType === 'direct'; + const { avatarPath } = this.props; - return hasAvatar && avatarPath - ? this.renderImage() - : this.renderIdenticon(); + return avatarPath ? this.renderImage() : this.renderIdenticon(); } private getAvatarColors(): Array { diff --git a/ts/components/AvatarPlaceHolder/AvatarPlaceHolder.tsx b/ts/components/AvatarPlaceHolder/AvatarPlaceHolder.tsx index 056be82bd..ae7c7774d 100644 --- a/ts/components/AvatarPlaceHolder/AvatarPlaceHolder.tsx +++ b/ts/components/AvatarPlaceHolder/AvatarPlaceHolder.tsx @@ -3,10 +3,10 @@ import { getInitials } from '../../util/getInitials'; interface Props { diameter: number; - phoneNumber: string; + name: string; + pubkey: string; colors: Array; borderColor: string; - name?: string; } interface State { @@ -23,16 +23,16 @@ export class AvatarPlaceHolder extends React.PureComponent { } public componentDidMount() { - void this.sha512(this.props.phoneNumber).then((sha512Seed: string) => { + void this.sha512(this.props.pubkey).then((sha512Seed: string) => { this.setState({ sha512Seed }); }); } public componentDidUpdate(prevProps: Props, prevState: State) { - if (this.props.phoneNumber === prevProps.phoneNumber) { + if (this.props.name === prevProps.name) { return; } - void this.sha512(this.props.phoneNumber).then((sha512Seed: string) => { + void this.sha512(this.props.name).then((sha512Seed: string) => { this.setState({ sha512Seed }); }); } @@ -42,12 +42,9 @@ export class AvatarPlaceHolder extends React.PureComponent { return <>; } - const { borderColor, colors, diameter, phoneNumber, name } = this.props; + const { borderColor, colors, diameter, name } = this.props; const r = diameter / 2; - const initial = - getInitials(name)?.toLocaleUpperCase() || - getInitials(phoneNumber)?.toLocaleUpperCase() || - '0'; + const initial = getInitials(name)?.toLocaleUpperCase() || '0'; const viewBox = `0 0 ${diameter} ${diameter}`; const fontSize = diameter * 0.5; diff --git a/ts/components/AvatarPlaceHolder/ClosedGroupAvatar.tsx b/ts/components/AvatarPlaceHolder/ClosedGroupAvatar.tsx index 6b4224c75..ce74df90a 100644 --- a/ts/components/AvatarPlaceHolder/ClosedGroupAvatar.tsx +++ b/ts/components/AvatarPlaceHolder/ClosedGroupAvatar.tsx @@ -11,21 +11,17 @@ interface Props { export class ClosedGroupAvatar extends React.PureComponent { public render() { - const { conversations, size, i18n } = this.props; - - if (conversations.length === 1) { + const { conversations, size } = this.props; + // FIXME audric render grey circle for missing avatar + if (conversations.length < 2) { const conv = conversations[0]; + const name = conv.name || conv.id; return ( ); } else if (conversations.length > 1) { @@ -60,30 +56,23 @@ export class ClosedGroupAvatar extends React.PureComponent { } const conv1 = conversations[0]; const conv2 = conversations[1]; + const name1 = conv1.name || conv1.id; + const name2 = conv2.name || conv2.id; + // use the 2 first members as group avatars return (
); diff --git a/ts/components/ContactListItem.tsx b/ts/components/ContactListItem.tsx index ebffc0b32..2796dcb7d 100644 --- a/ts/components/ContactListItem.tsx +++ b/ts/components/ContactListItem.tsx @@ -20,25 +20,16 @@ interface Props { export class ContactListItem extends React.Component { public renderAvatar() { - const { - avatarPath, - i18n, - color, - name, - phoneNumber, - profileName, - } = this.props; + const { avatarPath, name, phoneNumber, profileName } = this.props; + + const userName = name || profileName || phoneNumber; return ( ); } diff --git a/ts/components/ConversationListItem.tsx b/ts/components/ConversationListItem.tsx index 48206c2e9..06ac39a3a 100644 --- a/ts/components/ConversationListItem.tsx +++ b/ts/components/ConversationListItem.tsx @@ -80,34 +80,19 @@ class ConversationListItem extends React.PureComponent { } public renderAvatar() { - const { - avatarPath, - color, - type, - i18n, - isMe, - name, - phoneNumber, - profileName, - isPublic, - } = this.props; + const { avatarPath, i18n, name, phoneNumber, profileName } = this.props; const iconSize = 36; + const userName = name || profileName || phoneNumber; return (
); diff --git a/ts/components/EditProfileDialog.tsx b/ts/components/EditProfileDialog.tsx index 25f470cb4..11a72966e 100644 --- a/ts/components/EditProfileDialog.tsx +++ b/ts/components/EditProfileDialog.tsx @@ -257,20 +257,12 @@ export class EditProfileDialog extends React.Component { } private renderAvatar() { - const avatarPath = this.state.avatar; - const color = this.props.avatarColor; + const { avatar, profileName } = this.state; + const { pubkey } = this.props; + const userName = name || profileName || pubkey; return ( - + ); } diff --git a/ts/components/MessageSearchResult.tsx b/ts/components/MessageSearchResult.tsx index 7c561a8e0..087e07e73 100644 --- a/ts/components/MessageSearchResult.tsx +++ b/ts/components/MessageSearchResult.tsx @@ -100,20 +100,15 @@ export class MessageSearchResult extends React.PureComponent { } public renderAvatar() { - const { from, i18n, to } = this.props; - const isNoteToSelf = from.isMe && to.isMe; + const { from } = this.props; + const userName = from.phoneNumber || from.profileName; return ( ); } diff --git a/ts/components/UserDetailsDialog.tsx b/ts/components/UserDetailsDialog.tsx index b3c7473a6..4b75af776 100644 --- a/ts/components/UserDetailsDialog.tsx +++ b/ts/components/UserDetailsDialog.tsx @@ -14,7 +14,7 @@ interface Props { isRss: boolean; profileName: string; avatarPath: string; - avatarColor: string; + avatarColor: string; //fixme audric toremove pubkey: string; onClose: any; onStartConversation: any; @@ -64,21 +64,17 @@ export class UserDetailsDialog extends React.Component { } private renderAvatar() { - const avatarPath = this.props.avatarPath; - const color = this.props.avatarColor; + const { avatarPath, pubkey, profileName } = this.props; const size = this.state.isEnlargedImageShown ? 300 : 80; + const userName = name || profileName || pubkey; return ( ); } diff --git a/ts/components/conversation/ConversationHeader.tsx b/ts/components/conversation/ConversationHeader.tsx index 2edda0e13..0b3bf2467 100644 --- a/ts/components/conversation/ConversationHeader.tsx +++ b/ts/components/conversation/ConversationHeader.tsx @@ -199,33 +199,24 @@ class ConversationHeader extends React.Component { const { avatarPath, closedMemberConversations, - i18n, - isGroup, - isMe, name, phoneNumber, profileName, - isPublic, } = this.props; - const conversationType = isGroup ? 'group' : 'direct'; + const userName = name || profileName || phoneNumber; return ( { this.onAvatarClickBound(phoneNumber); }} - isPublic={isPublic} closedMemberConversations={closedMemberConversations} + pubkey={phoneNumber} /> ); diff --git a/ts/components/conversation/MemberList.tsx b/ts/components/conversation/MemberList.tsx index 2d494a54c..d2121e3a2 100644 --- a/ts/components/conversation/MemberList.tsx +++ b/ts/components/conversation/MemberList.tsx @@ -91,17 +91,20 @@ class MemberItem extends React.Component { } private renderAvatar() { + const { + authorName, + authorAvatarPath, + authorPhoneNumber, + authorProfileName, + } = this.props.member; + const userName = authorName || authorProfileName || authorPhoneNumber; + return ( ); } diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx index be36185be..d82c6a8f2 100644 --- a/ts/components/conversation/Message.tsx +++ b/ts/components/conversation/Message.tsx @@ -682,21 +682,18 @@ export class Message extends React.PureComponent { ) { return; } + const userName = authorName || authorProfileName || authorPhoneNumber; return (
{ onShowUserDetails(authorPhoneNumber); }} + pubkey={authorPhoneNumber} /> {senderIsModerator && (
diff --git a/ts/components/conversation/MessageDetail.tsx b/ts/components/conversation/MessageDetail.tsx index 5fbe88419..235deb18b 100644 --- a/ts/components/conversation/MessageDetail.tsx +++ b/ts/components/conversation/MessageDetail.tsx @@ -37,18 +37,15 @@ interface Props { export class MessageDetail extends React.Component { public renderAvatar(contact: Contact) { const { i18n } = this.props; - const { avatarPath, color, phoneNumber, name, profileName } = contact; + const { avatarPath, phoneNumber, name, profileName } = contact; + const userName = name || profileName || phoneNumber; return ( ); } diff --git a/ts/components/conversation/TypingBubble.tsx b/ts/components/conversation/TypingBubble.tsx index ea5e716e1..5a683ca2f 100644 --- a/ts/components/conversation/TypingBubble.tsx +++ b/ts/components/conversation/TypingBubble.tsx @@ -20,29 +20,24 @@ export class TypingBubble extends React.Component { public renderAvatar() { const { avatarPath, - color, name, phoneNumber, profileName, conversationType, - i18n, } = this.props; if (conversationType !== 'group') { return; } + const userName = name || profileName || phoneNumber; return (
); diff --git a/ts/components/conversation/UpdateGroupNameDialog.tsx b/ts/components/conversation/UpdateGroupNameDialog.tsx index b0aa7a34d..7dc9e12c7 100644 --- a/ts/components/conversation/UpdateGroupNameDialog.tsx +++ b/ts/components/conversation/UpdateGroupNameDialog.tsx @@ -7,6 +7,7 @@ import { Avatar } from '../Avatar'; interface Props { titleText: string; + pubkey: string; isPublic: boolean; groupName: string; okText: string; @@ -176,10 +177,8 @@ export class UpdateGroupNameDialog extends React.Component {
+ ); } diff --git a/ts/components/session/ActionsPanel.tsx b/ts/components/session/ActionsPanel.tsx index 03b545943..16ad70c82 100644 --- a/ts/components/session/ActionsPanel.tsx +++ b/ts/components/session/ActionsPanel.tsx @@ -140,16 +140,15 @@ export class ActionsPanel extends React.Component { : undefined; if (type === SectionType.Profile) { + const pubkey = window.storage.get('primaryDevicePubKey'); + const userName = window.getOurDisplayName() || pubkey; return ( ); } diff --git a/ts/components/session/SessionGroupSettings.tsx b/ts/components/session/SessionGroupSettings.tsx index f580a50a2..1ebd8c9b2 100644 --- a/ts/components/session/SessionGroupSettings.tsx +++ b/ts/components/session/SessionGroupSettings.tsx @@ -325,6 +325,7 @@ class SessionGroupSettings extends React.Component { const showInviteContacts = (isPublic || isAdmin) && !isKickedFromGroup && !isBlocked; + const userName = id; return (
{ />
{showInviteContacts && ( diff --git a/ts/components/session/SessionMemberListItem.tsx b/ts/components/session/SessionMemberListItem.tsx index 1d76b1cb9..7a07d20d9 100644 --- a/ts/components/session/SessionMemberListItem.tsx +++ b/ts/components/session/SessionMemberListItem.tsx @@ -86,16 +86,19 @@ export class SessionMemberListItem extends React.Component { } private renderAvatar() { + const { + authorAvatarPath, + authorName, + authorPhoneNumber, + authorProfileName, + } = this.props.member; + const userName = authorName || authorProfileName || authorPhoneNumber; return ( ); } diff --git a/ts/components/session/usingClosedConversationDetails.tsx b/ts/components/session/usingClosedConversationDetails.tsx index 8cdf962a4..9f6285fe0 100644 --- a/ts/components/session/usingClosedConversationDetails.tsx +++ b/ts/components/session/usingClosedConversationDetails.tsx @@ -42,6 +42,7 @@ export function usingClosedConversationDetails(WrappedComponent: any) { phoneNumber, id, } = this.props; + if ( !isPublic && (conversationType === 'group' || type === 'group' || isGroup) From 56cd42d34cb8814998ef7977a23c157c933568cb Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Tue, 15 Sep 2020 15:24:57 +1000 Subject: [PATCH 3/7] remove authorColor unused in Session --- images/group_default.png | Bin 555 -> 0 bytes js/background.js | 3 --- js/models/conversations.js | 17 ++--------------- js/models/messages.js | 7 +------ js/modules/loki_app_dot_net_api.js | 2 +- js/views/contact_list_view.js | 1 - js/views/conversation_view.js | 2 -- js/views/edit_profile_dialog_view.js | 10 +--------- js/views/user_details_dialog_view.js | 2 -- ts/components/Avatar.tsx | 13 ++----------- ts/components/ContactListItem.tsx | 1 - ts/components/EditProfileDialog.tsx | 1 - ts/components/UserDetailsDialog.tsx | 1 - .../conversation/CreateGroupDialog.tsx | 1 - .../conversation/InviteContactsDialog.tsx | 1 - ts/components/conversation/MemberList.tsx | 1 - ts/components/conversation/Message.tsx | 8 -------- .../conversation/ModeratorsAddDialog.tsx | 2 -- .../conversation/ModeratorsRemoveDialog.tsx | 2 -- ts/components/conversation/Quote.tsx | 2 -- .../conversation/UpdateGroupMembersDialog.tsx | 1 - ts/components/session/ActionsPanel.tsx | 1 - .../session/SessionClosableOverlay.tsx | 1 - .../session/SessionMemberListItem.tsx | 1 - 24 files changed, 7 insertions(+), 74 deletions(-) delete mode 100644 images/group_default.png diff --git a/images/group_default.png b/images/group_default.png deleted file mode 100644 index 6b503e9ff80f31824ea4cdcb67e8f24494638ed0..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 555 zcmeAS@N?(olHy`uVBq!ia0vp^DIm4nJ za0`PlBg3pY5H=O_6N*jg7ShvJ}R>q7#R0>x;TbZ+xGdHYDo|V!@`5|}R-29a*6(*> zKUr7p%{Itu*Ksj)6mVn_biqe(#!p)`cdC&XtIsZz6~+ZmB>OgM9O$v}F*GcyhJU_t|H-u zwg1I)e9w*uK6!dy@QAiQugmgy$1k=<)iY$bX>RiCOMNh1-tOgvMXvRWo+^s3t4!*? znT&Gjp5p5^X&&>my%=w8uY6K% z!f2keU#K+#cfS%&Roqd wt!XJazjZUWlE)R-`^rrmN*xM#iM@XqU)1F+`?}690T{Imp00i_>zopr02zYUJ^%m! diff --git a/js/background.js b/js/background.js index 094d63fee..567e1d83f 100644 --- a/js/background.js +++ b/js/background.js @@ -73,7 +73,6 @@ 'folder-outline.svg', 'forward.svg', 'gear.svg', - 'group_default.png', 'hourglass_empty.svg', 'hourglass_full.svg', 'icon_1024.png', @@ -731,7 +730,6 @@ profileName: displayName, pubkey: ourNumber, avatarPath, - avatarColor: conversation.getColor(), onOk: async (newName, avatar) => { let newAvatarPath = ''; let url = null; @@ -1065,7 +1063,6 @@ profileName: displayName, pubkey: userPubKey, avatarPath, - avatarColor: conversation.getColor(), isRss: conversation.isRss(), onStartConversation: () => { Whisper.events.trigger('showConversation', userPubKey); diff --git a/js/models/conversations.js b/js/models/conversations.js index e2be0e221..87843e33f 100644 --- a/js/models/conversations.js +++ b/js/models/conversations.js @@ -32,7 +32,6 @@ UNRESTRICTED: 3, }; - const { Util } = window.Signal; const { Conversation, Contact, @@ -571,7 +570,6 @@ getProps() { const { format } = PhoneNumber; const regionCode = storage.get('regionCode'); - const color = this.getColor(); const typingKeys = Object.keys(this.contactTypingTimers || {}); const result = { @@ -579,7 +577,6 @@ isArchived: this.get('isArchived'), activeAt: this.get('active_at'), avatarPath: this.getAvatarPath(), - color, type: this.isPrivate() ? 'direct' : 'group', isMe: this.isMe(), isPublic: this.isPublic(), @@ -2526,14 +2523,6 @@ return this.get('type') === 'private'; }, - getColor() { - if (!this.isPrivate()) { - return 'signal-blue'; - } - - const { migrateColor } = Util; - return migrateColor(this.get('color')); - }, getAvatarPath() { const avatar = this.get('avatar') || this.get('profileAvatar'); @@ -2549,19 +2538,17 @@ }, getAvatar() { const title = this.get('name'); - const color = this.getColor(); const url = this.getAvatarPath(); if (url) { - return { url, color }; + return { url }; } else if (this.isPrivate()) { const symbol = this.isValid() ? '#' : '!'; return { - color, content: this.getInitials(title) || symbol, }; } - return { url: 'images/group_default.png', color }; + return { url: null }; }, getNotificationIcon() { diff --git a/js/models/messages.js b/js/models/messages.js index 6e444ef22..4da827afc 100644 --- a/js/models/messages.js +++ b/js/models/messages.js @@ -414,7 +414,6 @@ const regionCode = storage.get('regionCode'); const contactModel = this.findContact(phoneNumber); - const color = contactModel ? contactModel.getColor() : null; let profileName; if (phoneNumber === window.storage.get('primaryDevicePubKey')) { profileName = i18n('you'); @@ -426,7 +425,7 @@ phoneNumber: format(phoneNumber, { ourRegionCode: regionCode, }), - color, + color: null, avatarPath: contactModel ? contactModel.getAvatarPath() : null, name: contactModel ? contactModel.getName() : null, profileName, @@ -565,7 +564,6 @@ const contact = this.findAndFormatContact(phoneNumber); const contactModel = this.findContact(phoneNumber); - const authorColor = contactModel ? contactModel.getColor() : null; const authorAvatarPath = contactModel ? contactModel.getAvatarPath() : null; @@ -599,7 +597,6 @@ serverTimestamp: this.get('serverTimestamp'), status: this.getMessagePropStatus(), contact: this.getPropsForEmbeddedContact(), - authorColor, authorName: contact.name, authorProfileName: contact.profileName, authorPhoneNumber: contact.phoneNumber, @@ -764,7 +761,6 @@ const { author, id, referencedMessageNotFound } = quote; const contact = author && ConversationController.get(author); - const authorColor = contact ? contact.getColor() : 'grey'; const authorPhoneNumber = format(author, { ourRegionCode: regionCode, @@ -794,7 +790,6 @@ authorPhoneNumber, authorProfileName, authorName, - authorColor, onClick, referencedMessageNotFound, }; diff --git a/js/modules/loki_app_dot_net_api.js b/js/modules/loki_app_dot_net_api.js index 4ade77836..c506e87fa 100644 --- a/js/modules/loki_app_dot_net_api.js +++ b/js/modules/loki_app_dot_net_api.js @@ -1424,7 +1424,7 @@ class LokiPublicChannelAPI { value: { name: 'Your Public Chat', description: 'Your public chat room', - avatar: 'images/group_default.png', + avatar: null, }, }, ]; diff --git a/js/views/contact_list_view.js b/js/views/contact_list_view.js index 106598813..631ec390d 100644 --- a/js/views/contact_list_view.js +++ b/js/views/contact_list_view.js @@ -32,7 +32,6 @@ Component: window.Signal.Components.ContactListItem, props: { isMe, - color: this.model.getColor(), avatarPath: this.model.getAvatarPath(), phoneNumber: this.model.getNumber(), name: this.model.getName(), diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js index 165ac3032..eb57925da 100644 --- a/js/views/conversation_view.js +++ b/js/views/conversation_view.js @@ -165,7 +165,6 @@ name: this.model.getName(), phoneNumber: this.model.getNumber(), profileName: this.model.getProfileName(), - color: this.model.getColor(), avatarPath: this.model.getAvatarPath(), isVerified: this.model.isVerified(), isMe: this.model.isMe(), @@ -279,7 +278,6 @@ name: this.model.getName(), phoneNumber: this.model.getNumber(), profileName: this.model.getProfileName(), - color: this.model.getColor(), avatarPath: this.model.getAvatarPath(), isGroup: !this.model.isPrivate(), isPublic: this.model.isPublic(), diff --git a/js/views/edit_profile_dialog_view.js b/js/views/edit_profile_dialog_view.js index b96eabfec..cb1996753 100644 --- a/js/views/edit_profile_dialog_view.js +++ b/js/views/edit_profile_dialog_view.js @@ -8,21 +8,13 @@ Whisper.EditProfileDialogView = Whisper.View.extend({ className: 'loki-dialog modal', - initialize({ - profileName, - avatarPath, - avatarColor, - pubkey, - onOk, - callback, - }) { + initialize({ profileName, avatarPath, pubkey, onOk, callback }) { this.close = this.close.bind(this); this.callback = callback; this.profileName = profileName; this.pubkey = pubkey; this.avatarPath = avatarPath; - this.avatarColor = avatarColor; this.onOk = onOk; this.$el.focus(); diff --git a/js/views/user_details_dialog_view.js b/js/views/user_details_dialog_view.js index 98c164691..d86340cfb 100644 --- a/js/views/user_details_dialog_view.js +++ b/js/views/user_details_dialog_view.js @@ -11,7 +11,6 @@ initialize({ profileName, avatarPath, - avatarColor, pubkey, isRss, onOk, @@ -23,7 +22,6 @@ this.pubkey = pubkey; this.isRss = isRss; this.avatarPath = avatarPath; - this.avatarColor = avatarColor; this.onOk = onOk; this.onStartConversation = onStartConversation; diff --git a/ts/components/Avatar.tsx b/ts/components/Avatar.tsx index 3c30a6c30..b84c1c202 100644 --- a/ts/components/Avatar.tsx +++ b/ts/components/Avatar.tsx @@ -86,11 +86,8 @@ export class Avatar extends React.PureComponent { /> ); } - console.warn( - 'renderNoImage should not happen with something else than a closed group' - ); - return
; + return this.renderIdenticon(); } public render() { @@ -121,7 +118,7 @@ export class Avatar extends React.PureComponent { }} role="button" > - {hasImage ? this.renderAvatarOrIdenticon() : this.renderNoImage()} + {hasImage ? this.renderImage() : this.renderNoImage()}
); } @@ -133,12 +130,6 @@ export class Avatar extends React.PureComponent { } } - private renderAvatarOrIdenticon() { - const { avatarPath } = this.props; - - return avatarPath ? this.renderImage() : this.renderIdenticon(); - } - private getAvatarColors(): Array { // const theme = window.Events.getThemedSettings(); // defined in session-android as `profile_picture_placeholder_colors` diff --git a/ts/components/ContactListItem.tsx b/ts/components/ContactListItem.tsx index 2796dcb7d..0cf81a6f4 100644 --- a/ts/components/ContactListItem.tsx +++ b/ts/components/ContactListItem.tsx @@ -10,7 +10,6 @@ interface Props { phoneNumber: string; isMe?: boolean; name?: string; - color: string; verified: boolean; profileName?: string; avatarPath?: string; diff --git a/ts/components/EditProfileDialog.tsx b/ts/components/EditProfileDialog.tsx index 11a72966e..065490bcb 100644 --- a/ts/components/EditProfileDialog.tsx +++ b/ts/components/EditProfileDialog.tsx @@ -30,7 +30,6 @@ interface Props { i18n: any; profileName: string; avatarPath: string; - avatarColor: string; pubkey: string; onClose: any; onOk: any; diff --git a/ts/components/UserDetailsDialog.tsx b/ts/components/UserDetailsDialog.tsx index 4b75af776..db566a323 100644 --- a/ts/components/UserDetailsDialog.tsx +++ b/ts/components/UserDetailsDialog.tsx @@ -14,7 +14,6 @@ interface Props { isRss: boolean; profileName: string; avatarPath: string; - avatarColor: string; //fixme audric toremove pubkey: string; onClose: any; onStartConversation: any; diff --git a/ts/components/conversation/CreateGroupDialog.tsx b/ts/components/conversation/CreateGroupDialog.tsx index 3ae0fa1b0..9ea4baa47 100644 --- a/ts/components/conversation/CreateGroupDialog.tsx +++ b/ts/components/conversation/CreateGroupDialog.tsx @@ -50,7 +50,6 @@ export class CreateGroupDialog extends React.Component { authorProfileName: name, selected: false, authorName: name, // different from ProfileName? - authorColor: d.getColor(), checkmarked: false, }; }); diff --git a/ts/components/conversation/InviteContactsDialog.tsx b/ts/components/conversation/InviteContactsDialog.tsx index 871c6f0e8..3268564a3 100644 --- a/ts/components/conversation/InviteContactsDialog.tsx +++ b/ts/components/conversation/InviteContactsDialog.tsx @@ -45,7 +45,6 @@ export class InviteContactsDialog extends React.Component { authorAvatarPath: d?.cachedProps?.avatarPath, selected: false, authorName: name, - authorColor: d.getColor(), checkmarked: false, existingMember, }; diff --git a/ts/components/conversation/MemberList.tsx b/ts/components/conversation/MemberList.tsx index d2121e3a2..0ea697af2 100644 --- a/ts/components/conversation/MemberList.tsx +++ b/ts/components/conversation/MemberList.tsx @@ -8,7 +8,6 @@ export interface Contact { authorProfileName: string; authorPhoneNumber: string; authorName: string; - authorColor: any; authorAvatarPath: string; checkmarked: boolean; existingMember: boolean; diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx index d82c6a8f2..510910539 100644 --- a/ts/components/conversation/Message.tsx +++ b/ts/components/conversation/Message.tsx @@ -78,7 +78,6 @@ export interface Props { authorProfileName?: string; /** Note: this should be formatted for display */ authorPhoneNumber: string; - authorColor?: ColorType; conversationType: 'group' | 'direct'; attachments?: Array; quote?: { @@ -88,7 +87,6 @@ export interface Props { authorPhoneNumber: string; authorProfileName?: string; authorName?: string; - authorColor?: ColorType; onClick?: () => void; referencedMessageNotFound: boolean; }; @@ -585,7 +583,6 @@ export class Message extends React.PureComponent { public renderQuote() { const { conversationType, - authorColor, direction, i18n, quote, @@ -599,8 +596,6 @@ export class Message extends React.PureComponent { const withContentAbove = conversationType === 'group' && direction === 'incoming'; - const quoteColor = - direction === 'incoming' ? authorColor : quote.authorColor; const shortenedPubkey = window.shortenPubkey(quote.authorPhoneNumber); @@ -621,7 +616,6 @@ export class Message extends React.PureComponent { authorPhoneNumber={displayedPubkey} authorProfileName={quote.authorProfileName} authorName={quote.authorName} - authorColor={quoteColor} referencedMessageNotFound={quote.referencedMessageNotFound} isFromMe={quote.isFromMe} withContentAbove={withContentAbove} @@ -668,7 +662,6 @@ export class Message extends React.PureComponent { authorProfileName, collapseMetadata, senderIsModerator, - authorColor, conversationType, direction, i18n, @@ -1052,7 +1045,6 @@ export class Message extends React.PureComponent { public render() { const { authorPhoneNumber, - authorColor, direction, id, isKickedFromGroup, diff --git a/ts/components/conversation/ModeratorsAddDialog.tsx b/ts/components/conversation/ModeratorsAddDialog.tsx index 71ad9cd38..c97b6a869 100644 --- a/ts/components/conversation/ModeratorsAddDialog.tsx +++ b/ts/components/conversation/ModeratorsAddDialog.tsx @@ -51,7 +51,6 @@ export class AddModeratorsDialog extends React.Component { authorProfileName: name, selected: false, authorName: name, - authorColor: d.getColor(), checkmarked: false, existingMember, }; @@ -97,7 +96,6 @@ export class AddModeratorsDialog extends React.Component { authorAvatarPath: '', selected: true, authorName: this.state.inputBoxValue, - authorColor: '#000000', checkmarked: true, existingMember: false, }); diff --git a/ts/components/conversation/ModeratorsRemoveDialog.tsx b/ts/components/conversation/ModeratorsRemoveDialog.tsx index 85d830938..bc00b10d7 100644 --- a/ts/components/conversation/ModeratorsRemoveDialog.tsx +++ b/ts/components/conversation/ModeratorsRemoveDialog.tsx @@ -34,7 +34,6 @@ export class RemoveModeratorsDialog extends React.Component { const lokiProfile = d.getLokiProfile(); name = lokiProfile ? lokiProfile.displayName : 'Anonymous'; } - const authorColor = d.getColor ? d.getColor() : '#000000'; // TODO: should take existing members into account const existingMember = false; @@ -44,7 +43,6 @@ export class RemoveModeratorsDialog extends React.Component { authorProfileName: name, selected: false, authorName: name, - authorColor, checkmarked: true, existingMember, }; diff --git a/ts/components/conversation/Quote.tsx b/ts/components/conversation/Quote.tsx index cf9a27c9e..3737817b9 100644 --- a/ts/components/conversation/Quote.tsx +++ b/ts/components/conversation/Quote.tsx @@ -15,7 +15,6 @@ interface Props { authorPhoneNumber: string; authorProfileName?: string; authorName?: string; - authorColor?: ColorType; i18n: LocalizerType; isFromMe: boolean; isIncoming: boolean; @@ -365,7 +364,6 @@ export class Quote extends React.Component { public render() { const { - authorColor, isIncoming, onClick, referencedMessageNotFound, diff --git a/ts/components/conversation/UpdateGroupMembersDialog.tsx b/ts/components/conversation/UpdateGroupMembersDialog.tsx index a8f60afd9..97ce71de7 100644 --- a/ts/components/conversation/UpdateGroupMembersDialog.tsx +++ b/ts/components/conversation/UpdateGroupMembersDialog.tsx @@ -52,7 +52,6 @@ export class UpdateGroupMembersDialog extends React.Component { authorAvatarPath: d?.cachedProps?.avatarPath, selected: false, authorName: name, // different from ProfileName? - authorColor: d.getColor(), checkmarked: false, existingMember, }; diff --git a/ts/components/session/ActionsPanel.tsx b/ts/components/session/ActionsPanel.tsx index 16ad70c82..a8f1ea8f7 100644 --- a/ts/components/session/ActionsPanel.tsx +++ b/ts/components/session/ActionsPanel.tsx @@ -122,7 +122,6 @@ export class ActionsPanel extends React.Component { onSelect?: (event: SectionType) => void; type: SectionType; avatarPath?: string; - avatarColor?: string; notificationCount?: number; }) => { const handleClick = onSelect diff --git a/ts/components/session/SessionClosableOverlay.tsx b/ts/components/session/SessionClosableOverlay.tsx index 3977aa86f..342859376 100644 --- a/ts/components/session/SessionClosableOverlay.tsx +++ b/ts/components/session/SessionClosableOverlay.tsx @@ -95,7 +95,6 @@ export class SessionClosableOverlay extends React.Component { authorAvatarPath: d.avatarPath, selected: false, authorName: name, - authorColor: d.color, checkmarked: false, existingMember, }; diff --git a/ts/components/session/SessionMemberListItem.tsx b/ts/components/session/SessionMemberListItem.tsx index 7a07d20d9..7497800b5 100644 --- a/ts/components/session/SessionMemberListItem.tsx +++ b/ts/components/session/SessionMemberListItem.tsx @@ -10,7 +10,6 @@ export interface ContactType { authorProfileName: string; authorPhoneNumber: string; authorName: string; - authorColor: any; authorAvatarPath: string; checkmarked: boolean; existingMember: boolean; From 76dc5960dd8bb01776c5160f87828a7a09340fc3 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Tue, 15 Sep 2020 15:48:06 +1000 Subject: [PATCH 4/7] render grey Icon if no pubkey or avatarPath on Avatar --- ts/components/Avatar.tsx | 2 +- .../AvatarPlaceHolder/AvatarPlaceHolder.tsx | 47 ++++++-- .../AvatarPlaceHolder/ClosedGroupAvatar.tsx | 107 +++++++----------- 3 files changed, 78 insertions(+), 78 deletions(-) diff --git a/ts/components/Avatar.tsx b/ts/components/Avatar.tsx index b84c1c202..a440bdd1d 100644 --- a/ts/components/Avatar.tsx +++ b/ts/components/Avatar.tsx @@ -7,7 +7,7 @@ import { ConversationAttributes } from '../../js/models/conversations'; interface Props { avatarPath?: string; name?: string; // display name, profileName or phoneNumber, whatever is set first - pubkey: string; + pubkey?: string; size: number; closedMemberConversations?: Array; onAvatarClick?: () => void; diff --git a/ts/components/AvatarPlaceHolder/AvatarPlaceHolder.tsx b/ts/components/AvatarPlaceHolder/AvatarPlaceHolder.tsx index ae7c7774d..12d89d1be 100644 --- a/ts/components/AvatarPlaceHolder/AvatarPlaceHolder.tsx +++ b/ts/components/AvatarPlaceHolder/AvatarPlaceHolder.tsx @@ -4,7 +4,7 @@ import { getInitials } from '../../util/getInitials'; interface Props { diameter: number; name: string; - pubkey: string; + pubkey?: string; colors: Array; borderColor: string; } @@ -23,29 +23,52 @@ export class AvatarPlaceHolder extends React.PureComponent { } public componentDidMount() { - void this.sha512(this.props.pubkey).then((sha512Seed: string) => { - this.setState({ sha512Seed }); - }); + const { pubkey } = this.props; + if (pubkey) { + void this.sha512(pubkey).then((sha512Seed: string) => { + this.setState({ sha512Seed }); + }); + } } public componentDidUpdate(prevProps: Props, prevState: State) { - if (this.props.name === prevProps.name) { + const { pubkey, name } = this.props; + if (pubkey === prevProps.pubkey && name === prevProps.name) { return; } - void this.sha512(this.props.name).then((sha512Seed: string) => { - this.setState({ sha512Seed }); - }); + + if (pubkey) { + void this.sha512(pubkey).then((sha512Seed: string) => { + this.setState({ sha512Seed }); + }); + } } public render() { + const { borderColor, colors, diameter, name } = this.props; + const viewBox = `0 0 ${diameter} ${diameter}`; + const r = diameter / 2; + if (!this.state.sha512Seed) { - return <>; + // return grey circle + return ( + + + + + + ); } - const { borderColor, colors, diameter, name } = this.props; - const r = diameter / 2; const initial = getInitials(name)?.toLocaleUpperCase() || '0'; - const viewBox = `0 0 ${diameter} ${diameter}`; const fontSize = diameter * 0.5; // Generate the seed simulate the .hashCode as Java diff --git a/ts/components/AvatarPlaceHolder/ClosedGroupAvatar.tsx b/ts/components/AvatarPlaceHolder/ClosedGroupAvatar.tsx index ce74df90a..cbaccad85 100644 --- a/ts/components/AvatarPlaceHolder/ClosedGroupAvatar.tsx +++ b/ts/components/AvatarPlaceHolder/ClosedGroupAvatar.tsx @@ -10,74 +10,51 @@ interface Props { } export class ClosedGroupAvatar extends React.PureComponent { + public getClosedGroupAvatarsSize(size: number) { + // Always use the size directly under the one requested + switch (size) { + case 36: + return 28; + case 48: + return 36; + case 64: + return 48; + case 80: + return 64; + case 300: + return 80; + default: + throw new Error( + `Invalid size request for closed group avatar: ${size}` + ); + } + } + public render() { const { conversations, size } = this.props; - // FIXME audric render grey circle for missing avatar - if (conversations.length < 2) { - const conv = conversations[0]; - const name = conv.name || conv.id; - return ( + const avatarsDiameter = this.getClosedGroupAvatarsSize(size); + + const conv1 = conversations.length > 0 ? conversations[0] : undefined; + const conv2 = conversations.length > 1 ? conversations[1] : undefined; + const name1 = conv1?.name || conv1?.id || undefined; + const name2 = conv2?.name || conv2?.id || undefined; + + // use the 2 first members as group avatars + return ( +
- ); - } else if (conversations.length > 1) { - // in a closed group avatar, each visible avatar member size is 2/3 of the group avatar in size - // Always use the size directly under the one requested - let avatarsDiameter = 0; - switch (size) { - case 36: { - avatarsDiameter = 28; - break; - } - case 48: { - avatarsDiameter = 36; - break; - } - case 64: { - avatarsDiameter = 48; - break; - } - case 80: { - avatarsDiameter = 64; - break; - } - case 300: { - avatarsDiameter = 80; - break; - } - default: - throw new Error( - `Invalid size request for closed group avatar: ${size}` - ); - } - const conv1 = conversations[0]; - const conv2 = conversations[1]; - const name1 = conv1.name || conv1.id; - const name2 = conv2.name || conv2.id; - - // use the 2 first members as group avatars - return ( -
- - -
- ); - } else { - return <>; - } + +
+ ); } } From 4d801fd8e5844a3237b58827cab8dec87141dd93 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Tue, 15 Sep 2020 16:38:24 +1000 Subject: [PATCH 5/7] check for changes on member avatars only on re rendering --- ts/components/Avatar.tsx | 10 ++--- .../AvatarPlaceHolder/ClosedGroupAvatar.tsx | 10 ++--- ts/components/ConversationListItem.tsx | 18 ++++++-- .../conversation/ConversationHeader.tsx | 11 +++-- .../session/SessionGroupSettings.tsx | 11 +++-- .../usingClosedConversationDetails.tsx | 41 ++++++++++++------- 6 files changed, 64 insertions(+), 37 deletions(-) diff --git a/ts/components/Avatar.tsx b/ts/components/Avatar.tsx index a440bdd1d..8c8226c2f 100644 --- a/ts/components/Avatar.tsx +++ b/ts/components/Avatar.tsx @@ -2,14 +2,14 @@ import React from 'react'; import classNames from 'classnames'; import { AvatarPlaceHolder, ClosedGroupAvatar } from './AvatarPlaceHolder'; -import { ConversationAttributes } from '../../js/models/conversations'; +import { ConversationAvatar } from './session/usingClosedConversationDetails'; interface Props { avatarPath?: string; name?: string; // display name, profileName or phoneNumber, whatever is set first pubkey?: string; size: number; - closedMemberConversations?: Array; + memberAvatars?: Array; // this is added by usingClosedConversationDetails onAvatarClick?: () => void; } @@ -75,13 +75,13 @@ export class Avatar extends React.PureComponent { } public renderNoImage() { - const { closedMemberConversations, size } = this.props; + const { memberAvatars, size } = this.props; // if no image but we have conversations set for the group, renders group members avatars - if (closedMemberConversations) { + if (memberAvatars) { return ( ); diff --git a/ts/components/AvatarPlaceHolder/ClosedGroupAvatar.tsx b/ts/components/AvatarPlaceHolder/ClosedGroupAvatar.tsx index cbaccad85..31a8b2fea 100644 --- a/ts/components/AvatarPlaceHolder/ClosedGroupAvatar.tsx +++ b/ts/components/AvatarPlaceHolder/ClosedGroupAvatar.tsx @@ -1,11 +1,11 @@ import React from 'react'; import { Avatar } from '../Avatar'; import { LocalizerType } from '../../types/Util'; -import { ConversationAttributes } from '../../../js/models/conversations'; +import { ConversationAvatar } from '../session/usingClosedConversationDetails'; interface Props { size: number; - conversations: Array; + memberAvatars: Array; // this is added by usingClosedConversationDetails i18n: LocalizerType; } @@ -31,11 +31,11 @@ export class ClosedGroupAvatar extends React.PureComponent { } public render() { - const { conversations, size } = this.props; + const { memberAvatars, size } = this.props; const avatarsDiameter = this.getClosedGroupAvatarsSize(size); - const conv1 = conversations.length > 0 ? conversations[0] : undefined; - const conv2 = conversations.length > 1 ? conversations[1] : undefined; + const conv1 = memberAvatars.length > 0 ? memberAvatars[0] : undefined; + const conv2 = memberAvatars.length > 1 ? memberAvatars[1] : undefined; const name1 = conv1?.name || conv1?.id || undefined; const name2 = conv2?.name || conv2?.id || undefined; diff --git a/ts/components/ConversationListItem.tsx b/ts/components/ConversationListItem.tsx index 06ac39a3a..1f7db35c3 100644 --- a/ts/components/ConversationListItem.tsx +++ b/ts/components/ConversationListItem.tsx @@ -21,7 +21,10 @@ import { getLeaveGroupMenuItem, } from '../session/utils/Menu'; -import { usingClosedConversationDetails } from './session/usingClosedConversationDetails'; +import { + ConversationAvatar, + usingClosedConversationDetails, +} from './session/usingClosedConversationDetails'; export type PropsData = { id: string; @@ -55,7 +58,7 @@ export type PropsData = { isSecondary?: boolean; isGroupInvitation?: boolean; isKickedFromGroup?: boolean; - closedMemberConversations?: any; // this is added by usingClosedConversationDetails + memberAvatars?: Array; // this is added by usingClosedConversationDetails }; type PropsHousekeeping = { @@ -80,7 +83,14 @@ class ConversationListItem extends React.PureComponent { } public renderAvatar() { - const { avatarPath, i18n, name, phoneNumber, profileName } = this.props; + const { + avatarPath, + i18n, + name, + phoneNumber, + profileName, + memberAvatars, + } = this.props; const iconSize = 36; const userName = name || profileName || phoneNumber; @@ -91,7 +101,7 @@ class ConversationListItem extends React.PureComponent { avatarPath={avatarPath} name={userName} size={iconSize} - closedMemberConversations={this.props.closedMemberConversations} + memberAvatars={memberAvatars} pubkey={phoneNumber} />
diff --git a/ts/components/conversation/ConversationHeader.tsx b/ts/components/conversation/ConversationHeader.tsx index 0b3bf2467..82151ed7f 100644 --- a/ts/components/conversation/ConversationHeader.tsx +++ b/ts/components/conversation/ConversationHeader.tsx @@ -16,7 +16,10 @@ import { SessionButtonType, } from '../session/SessionButton'; import * as Menu from '../../session/utils/Menu'; -import { usingClosedConversationDetails } from '../session/usingClosedConversationDetails'; +import { + ConversationAvatar, + usingClosedConversationDetails, +} from '../session/usingClosedConversationDetails'; export interface TimerOption { name: string; @@ -92,7 +95,7 @@ interface Props { onUpdateGroupName: () => void; i18n: LocalizerType; - closedMemberConversations?: any; // this is added by usingClosedConversationDetails + memberAvatars?: Array; // this is added by usingClosedConversationDetails } class ConversationHeader extends React.Component { @@ -198,7 +201,7 @@ class ConversationHeader extends React.Component { public renderAvatar() { const { avatarPath, - closedMemberConversations, + memberAvatars, name, phoneNumber, profileName, @@ -215,7 +218,7 @@ class ConversationHeader extends React.Component { onAvatarClick={() => { this.onAvatarClickBound(phoneNumber); }} - closedMemberConversations={closedMemberConversations} + memberAvatars={memberAvatars} pubkey={phoneNumber} /> diff --git a/ts/components/session/SessionGroupSettings.tsx b/ts/components/session/SessionGroupSettings.tsx index 1ebd8c9b2..2f182c9ca 100644 --- a/ts/components/session/SessionGroupSettings.tsx +++ b/ts/components/session/SessionGroupSettings.tsx @@ -10,7 +10,10 @@ import { SessionDropdown } from './SessionDropdown'; import { MediaGallery } from '../conversation/media-gallery/MediaGallery'; import _ from 'lodash'; import { TimerOption } from '../conversation/ConversationHeader'; -import { usingClosedConversationDetails } from '../session/usingClosedConversationDetails'; +import { + ConversationAvatar, + usingClosedConversationDetails, +} from '../session/usingClosedConversationDetails'; interface Props { id: string; @@ -24,7 +27,7 @@ interface Props { amMod: boolean; isKickedFromGroup: boolean; isBlocked: boolean; - closedMemberConversations?: any; // this is added by usingClosedConversationDetails + memberAvatars?: Array; // this is added by usingClosedConversationDetails onGoBack: () => void; onInviteContacts: () => void; @@ -311,7 +314,7 @@ class SessionGroupSettings extends React.Component { private renderHeader() { const { - closedMemberConversations, + memberAvatars, id, onGoBack, onInviteContacts, @@ -338,7 +341,7 @@ class SessionGroupSettings extends React.Component { avatarPath={avatarPath} name={userName} size={80} - closedMemberConversations={closedMemberConversations} + memberAvatars={memberAvatars} pubkey={id} />
diff --git a/ts/components/session/usingClosedConversationDetails.tsx b/ts/components/session/usingClosedConversationDetails.tsx index 9f6285fe0..e09f84ecf 100644 --- a/ts/components/session/usingClosedConversationDetails.tsx +++ b/ts/components/session/usingClosedConversationDetails.tsx @@ -2,9 +2,16 @@ import { GroupUtils } from '../../session/utils'; import { UserUtil } from '../../util'; import { PubKey } from '../../session/types'; import React from 'react'; -import { ConversationAttributes } from '../../../js/models/conversations'; +import * as _ from 'lodash'; + +export type ConversationAvatar = { + avatarPath?: string; + id?: string; // member's pubkey + name?: string; +}; + type State = { - closedMemberConversations?: Array; + memberAvatars?: Array; // this is added by usingClosedConversationDetails }; export function usingClosedConversationDetails(WrappedComponent: any) { @@ -12,7 +19,7 @@ export function usingClosedConversationDetails(WrappedComponent: any) { constructor(props: any) { super(props); this.state = { - closedMemberConversations: undefined, + memberAvatars: undefined, }; } @@ -27,7 +34,7 @@ export function usingClosedConversationDetails(WrappedComponent: any) { public render() { return ( ); @@ -58,20 +65,24 @@ export function usingClosedConversationDetails(WrappedComponent: any) { if (ourself) { members.push(ourPrimary); } - // no need to forward more than 2 conversation for rendering the group avatar + // no need to forward more than 2 conversations for rendering the group avatar members.slice(0, 2); - const membersConvos = await Promise.all( - members.map( - async m => - ( - await window.ConversationController.getOrCreateAndWait( - m.key, - 'private' - ) - ).cachedProps + const memberConvos = await Promise.all( + members.map(async m => + window.ConversationController.getOrCreateAndWait(m.key, 'private') ) ); - this.setState({ closedMemberConversations: membersConvos }); + const memberAvatars = memberConvos.map(m => { + return { + avatarPath: m.getAvatar()?.url || null, + id: m.id, + name: m.get('name') || m.get('profileName') || m.id, + }; + }); + + if (!_.isEqual(memberAvatars, this.state.memberAvatars)) { + this.setState({ memberAvatars }); + } } } }; From c0fa5fe290de11600d2f50392f9ee040ff0dd308 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Tue, 15 Sep 2020 16:39:11 +1000 Subject: [PATCH 6/7] hide annoying log --- js/modules/loki_app_dot_net_api.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/js/modules/loki_app_dot_net_api.js b/js/modules/loki_app_dot_net_api.js index c506e87fa..4bedce58b 100644 --- a/js/modules/loki_app_dot_net_api.js +++ b/js/modules/loki_app_dot_net_api.js @@ -169,14 +169,14 @@ const sendViaOnion = async (srvPubKey, url, fetchOptions, options = {}) => { ); } } else { - // why is + // FIXME why is // https://chat-dev.lokinet.org/loki/v1/channel/1/deletes?count=200&since_id= // difference in response than all the other calls.... - log.info( - `loki_app_dot_net:::sendViaOnion #${ - options.requestNumber - } - got object response ${url.toString()}` - ); + // log.info( + // `loki_app_dot_net:::sendViaOnion #${ + // options.requestNumber + // } - got object response ${url.toString()}` + // ); } // result.status has the http response code if (!txtResponse) { From 6d53c7562ba23a5edbf7ae6c7b8f410295b534cc Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Wed, 16 Sep 2020 08:57:49 +1000 Subject: [PATCH 7/7] fix test --- test/models/conversations_test.js | 1 - 1 file changed, 1 deletion(-) diff --git a/test/models/conversations_test.js b/test/models/conversations_test.js index e8a7b1548..226e80365 100644 --- a/test/models/conversations_test.js +++ b/test/models/conversations_test.js @@ -133,7 +133,6 @@ describe('Conversation', () => { const convo = new Whisper.ConversationCollection().add(attributes); const avatar = convo.getAvatar(); assert.property(avatar, 'content'); - assert.property(avatar, 'color'); }); describe('when set to private', () => {