2018-07-09 23:29:13 +02:00
|
|
|
import React from 'react';
|
|
|
|
|
2021-03-26 05:24:56 +01:00
|
|
|
import { Avatar, AvatarSize } from '../Avatar';
|
2018-07-09 23:29:13 +02:00
|
|
|
|
2021-04-22 10:03:58 +02:00
|
|
|
import { SessionIconButton, SessionIconSize, SessionIconType } from '../session/icon';
|
2019-12-10 06:56:03 +01:00
|
|
|
|
2021-04-22 10:03:58 +02:00
|
|
|
import { SessionButton, SessionButtonColor, SessionButtonType } from '../session/SessionButton';
|
2020-09-15 08:38:24 +02:00
|
|
|
import {
|
|
|
|
ConversationAvatar,
|
|
|
|
usingClosedConversationDetails,
|
|
|
|
} from '../session/usingClosedConversationDetails';
|
2020-10-22 07:34:41 +02:00
|
|
|
import {
|
|
|
|
ConversationHeaderMenu,
|
|
|
|
PropsConversationHeaderMenu,
|
|
|
|
} from '../session/menu/ConversationHeaderMenu';
|
2020-12-01 00:32:56 +01:00
|
|
|
import { contextMenu } from 'react-contexify';
|
2020-12-03 02:09:39 +01:00
|
|
|
import { DefaultTheme, withTheme } from 'styled-components';
|
2021-06-07 06:20:07 +02:00
|
|
|
import { ConversationNotificationSettingType } from '../../models/conversation';
|
2019-12-09 03:48:04 +01:00
|
|
|
|
2020-01-14 02:02:14 +01:00
|
|
|
export interface TimerOption {
|
2018-07-09 23:29:13 +02:00
|
|
|
name: string;
|
|
|
|
value: number;
|
|
|
|
}
|
|
|
|
|
2021-06-07 06:20:07 +02:00
|
|
|
export interface NotificationForConvoOption {
|
|
|
|
name: string;
|
|
|
|
value: ConversationNotificationSettingType;
|
|
|
|
}
|
|
|
|
|
2018-07-09 23:29:13 +02:00
|
|
|
interface Props {
|
|
|
|
id: string;
|
2019-03-12 01:20:16 +01:00
|
|
|
name?: string;
|
|
|
|
|
2018-07-09 23:29:13 +02:00
|
|
|
phoneNumber: string;
|
|
|
|
profileName?: string;
|
|
|
|
avatarPath?: string;
|
2019-03-12 01:20:16 +01:00
|
|
|
|
2018-07-09 23:29:13 +02:00
|
|
|
isMe: boolean;
|
|
|
|
isGroup: boolean;
|
2020-07-24 03:24:37 +02:00
|
|
|
isPrivate: boolean;
|
2019-09-03 09:38:11 +02:00
|
|
|
isPublic: boolean;
|
2021-01-18 05:29:31 +01:00
|
|
|
isAdmin: boolean;
|
2019-03-12 01:20:16 +01:00
|
|
|
|
2020-01-24 06:31:33 +01:00
|
|
|
// We might not always have the full list of members,
|
|
|
|
// e.g. for open groups where we could have thousands
|
|
|
|
// of members. We'll keep this for now (for closed chats)
|
2019-10-21 08:16:24 +02:00
|
|
|
members: Array<any>;
|
|
|
|
|
2020-01-24 06:31:33 +01:00
|
|
|
// not equal members.length (see above)
|
|
|
|
subscriberCount?: number;
|
|
|
|
|
2018-07-09 23:29:13 +02:00
|
|
|
expirationSettingName?: string;
|
|
|
|
showBackButton: boolean;
|
|
|
|
timerOptions: Array<TimerOption>;
|
2021-06-07 06:20:07 +02:00
|
|
|
notificationForConvo: Array<NotificationForConvoOption>;
|
|
|
|
currentNotificationSetting: ConversationNotificationSettingType;
|
2018-11-27 01:47:20 +01:00
|
|
|
hasNickname?: boolean;
|
2018-07-09 23:29:13 +02:00
|
|
|
|
2019-04-18 01:13:13 +02:00
|
|
|
isBlocked: boolean;
|
2018-07-09 23:29:13 +02:00
|
|
|
|
2020-04-07 09:32:40 +02:00
|
|
|
isKickedFromGroup: boolean;
|
2021-01-13 05:28:20 +01:00
|
|
|
left: boolean;
|
2020-10-25 23:59:56 +01:00
|
|
|
selectionMode: boolean; // is the UI on the message selection mode or not
|
2019-12-10 06:56:03 +01:00
|
|
|
|
2019-12-11 07:48:54 +01:00
|
|
|
onCloseOverlay: () => void;
|
|
|
|
onDeleteSelectedMessages: () => void;
|
2021-06-18 06:20:36 +02:00
|
|
|
onAvatarClick?: (pubkey: string) => void;
|
2018-07-09 23:29:13 +02:00
|
|
|
onGoBack: () => void;
|
2018-11-16 04:42:42 +01:00
|
|
|
|
2020-09-15 08:38:24 +02:00
|
|
|
memberAvatars?: Array<ConversationAvatar>; // this is added by usingClosedConversationDetails
|
2020-12-03 02:09:39 +01:00
|
|
|
theme: DefaultTheme;
|
2018-07-09 23:29:13 +02:00
|
|
|
}
|
|
|
|
|
2020-12-03 02:09:39 +01:00
|
|
|
class ConversationHeaderInner extends React.Component<Props> {
|
2018-07-09 23:29:13 +02:00
|
|
|
public constructor(props: Props) {
|
|
|
|
super(props);
|
|
|
|
|
2020-11-26 04:24:29 +01:00
|
|
|
this.onAvatarClick = this.onAvatarClick.bind(this);
|
2018-07-09 23:29:13 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
public renderBackButton() {
|
|
|
|
const { onGoBack, showBackButton } = this.props;
|
|
|
|
|
|
|
|
if (!showBackButton) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
2020-12-03 02:09:39 +01:00
|
|
|
<SessionIconButton
|
|
|
|
iconType={SessionIconType.Chevron}
|
|
|
|
iconSize={SessionIconSize.Large}
|
|
|
|
iconRotation={90}
|
2018-07-09 23:29:13 +02:00
|
|
|
onClick={onGoBack}
|
2020-12-03 02:09:39 +01:00
|
|
|
theme={this.props.theme}
|
2018-07-09 23:29:13 +02:00
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
public renderTitle() {
|
2019-07-23 05:14:09 +02:00
|
|
|
const {
|
|
|
|
phoneNumber,
|
|
|
|
profileName,
|
2019-10-31 05:23:08 +01:00
|
|
|
isGroup,
|
2020-01-24 06:31:33 +01:00
|
|
|
isPublic,
|
2020-01-06 04:53:21 +01:00
|
|
|
members,
|
2020-01-24 06:31:33 +01:00
|
|
|
subscriberCount,
|
2019-07-23 05:14:09 +02:00
|
|
|
isMe,
|
2020-04-07 09:32:40 +02:00
|
|
|
isKickedFromGroup,
|
2019-07-23 05:14:09 +02:00
|
|
|
name,
|
|
|
|
} = this.props;
|
2020-11-24 23:14:22 +01:00
|
|
|
const { i18n } = window;
|
2019-01-31 02:45:58 +01:00
|
|
|
|
|
|
|
if (isMe) {
|
2021-04-22 10:03:58 +02:00
|
|
|
return <div className="module-conversation-header__title">{i18n('noteToSelf')}</div>;
|
2019-01-31 02:45:58 +01:00
|
|
|
}
|
2018-07-09 23:29:13 +02:00
|
|
|
|
2020-01-24 06:31:33 +01:00
|
|
|
const memberCount: number = (() => {
|
2021-01-19 06:10:09 +01:00
|
|
|
if (!isGroup) {
|
2020-01-24 06:31:33 +01:00
|
|
|
return 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (isPublic) {
|
|
|
|
return subscriberCount || 0;
|
|
|
|
} else {
|
|
|
|
return members.length;
|
|
|
|
}
|
|
|
|
})();
|
|
|
|
|
2019-10-31 05:23:08 +01:00
|
|
|
let text = '';
|
2020-06-15 03:44:14 +02:00
|
|
|
if (isGroup && memberCount > 0) {
|
2020-01-24 06:31:33 +01:00
|
|
|
const count = String(memberCount);
|
2020-01-06 04:53:21 +01:00
|
|
|
text = i18n('members', [count]);
|
2019-10-31 05:23:08 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
const textEl =
|
2020-04-07 09:32:40 +02:00
|
|
|
text === '' || isKickedFromGroup ? null : (
|
2019-10-31 05:23:08 +01:00
|
|
|
<span className="module-conversation-header__title-text">{text}</span>
|
|
|
|
);
|
|
|
|
|
2020-10-06 06:45:27 +02:00
|
|
|
const title = profileName || name || phoneNumber;
|
2020-01-06 04:53:21 +01:00
|
|
|
|
2018-07-09 23:29:13 +02:00
|
|
|
return (
|
|
|
|
<div className="module-conversation-header__title">
|
2020-01-07 03:24:44 +01:00
|
|
|
<span className="module-contact-name__profile-name">{title}</span>
|
2019-10-31 05:23:08 +01:00
|
|
|
{textEl}
|
2018-07-09 23:29:13 +02:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
public renderAvatar() {
|
2021-04-22 10:03:58 +02:00
|
|
|
const { avatarPath, memberAvatars, name, phoneNumber, profileName } = this.props;
|
2018-07-09 23:29:13 +02:00
|
|
|
|
2020-09-15 07:07:22 +02:00
|
|
|
const userName = name || profileName || phoneNumber;
|
2019-02-05 04:18:04 +01:00
|
|
|
|
2018-07-09 23:29:13 +02:00
|
|
|
return (
|
2018-09-27 02:23:17 +02:00
|
|
|
<span className="module-conversation-header__avatar">
|
|
|
|
<Avatar
|
|
|
|
avatarPath={avatarPath}
|
2020-09-15 07:07:22 +02:00
|
|
|
name={userName}
|
2021-03-26 05:24:56 +01:00
|
|
|
size={AvatarSize.S}
|
2019-11-28 00:00:24 +01:00
|
|
|
onAvatarClick={() => {
|
2020-11-26 04:24:29 +01:00
|
|
|
this.onAvatarClick(phoneNumber);
|
2019-11-28 00:00:24 +01:00
|
|
|
}}
|
2020-09-15 08:38:24 +02:00
|
|
|
memberAvatars={memberAvatars}
|
2020-09-15 07:07:22 +02:00
|
|
|
pubkey={phoneNumber}
|
2018-09-27 02:23:17 +02:00
|
|
|
/>
|
|
|
|
</span>
|
2018-07-09 23:29:13 +02:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
public renderExpirationLength() {
|
|
|
|
const { expirationSettingName } = this.props;
|
|
|
|
|
|
|
|
if (!expirationSettingName) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="module-conversation-header__expiration">
|
|
|
|
<div className="module-conversation-header__expiration__clock-icon" />
|
|
|
|
<div className="module-conversation-header__expiration__setting">
|
|
|
|
{expirationSettingName}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2019-12-10 06:56:03 +01:00
|
|
|
public renderSelectionOverlay() {
|
2020-11-24 23:14:22 +01:00
|
|
|
const { onDeleteSelectedMessages, onCloseOverlay, isPublic } = this.props;
|
|
|
|
const { i18n } = window;
|
|
|
|
|
2020-04-07 10:15:23 +02:00
|
|
|
const isServerDeletable = isPublic;
|
2021-04-22 10:03:58 +02:00
|
|
|
const deleteMessageButtonText = i18n(isServerDeletable ? 'deleteForEveryone' : 'delete');
|
2019-12-11 05:51:14 +01:00
|
|
|
|
2019-12-10 06:56:03 +01:00
|
|
|
return (
|
|
|
|
<div className="message-selection-overlay">
|
|
|
|
<div className="close-button">
|
|
|
|
<SessionIconButton
|
|
|
|
iconType={SessionIconType.Exit}
|
2019-12-11 05:51:14 +01:00
|
|
|
iconSize={SessionIconSize.Medium}
|
2020-07-21 06:43:46 +02:00
|
|
|
onClick={onCloseOverlay}
|
2020-12-03 02:09:39 +01:00
|
|
|
theme={this.props.theme}
|
2019-12-10 06:56:03 +01:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div className="button-group">
|
|
|
|
<SessionButton
|
2019-12-11 05:51:14 +01:00
|
|
|
buttonType={SessionButtonType.Default}
|
|
|
|
buttonColor={SessionButtonColor.Danger}
|
2020-04-07 08:43:53 +02:00
|
|
|
text={deleteMessageButtonText}
|
2019-12-11 07:48:54 +01:00
|
|
|
onClick={onDeleteSelectedMessages}
|
2019-12-10 06:56:03 +01:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2018-07-09 23:29:13 +02:00
|
|
|
public render() {
|
2020-11-24 23:14:22 +01:00
|
|
|
const { isKickedFromGroup, selectionMode } = this.props;
|
2020-11-17 00:21:24 +01:00
|
|
|
const triggerId = 'conversation-header';
|
2018-12-19 04:34:56 +01:00
|
|
|
|
2018-07-09 23:29:13 +02:00
|
|
|
return (
|
2020-02-28 01:48:21 +01:00
|
|
|
<div className="module-conversation-header">
|
|
|
|
<div className="conversation-header--items-wrapper">
|
2019-12-10 06:56:03 +01:00
|
|
|
{this.renderBackButton()}
|
|
|
|
<div className="module-conversation-header__title-container">
|
|
|
|
<div className="module-conversation-header__title-flex">
|
2020-11-24 23:14:38 +01:00
|
|
|
{this.renderTripleDotsMenu(triggerId)}
|
2019-12-10 06:56:03 +01:00
|
|
|
{this.renderTitle()}
|
|
|
|
</div>
|
2018-07-27 00:02:39 +02:00
|
|
|
</div>
|
2020-04-07 09:32:40 +02:00
|
|
|
{!isKickedFromGroup && this.renderExpirationLength()}
|
2020-02-14 04:25:36 +01:00
|
|
|
|
2021-01-19 06:10:09 +01:00
|
|
|
{!selectionMode && this.renderAvatar()}
|
2020-02-14 04:25:36 +01:00
|
|
|
|
2020-10-22 07:34:41 +02:00
|
|
|
<ConversationHeaderMenu {...this.getHeaderMenuProps(triggerId)} />
|
2018-07-27 00:02:39 +02:00
|
|
|
</div>
|
2020-02-28 01:48:21 +01:00
|
|
|
|
2020-03-13 01:10:27 +01:00
|
|
|
{selectionMode && this.renderSelectionOverlay()}
|
2020-02-28 01:48:21 +01:00
|
|
|
</div>
|
2018-07-09 23:29:13 +02:00
|
|
|
);
|
|
|
|
}
|
2019-09-04 02:58:32 +02:00
|
|
|
|
2020-01-13 05:47:56 +01:00
|
|
|
public onAvatarClick(userPubKey: string) {
|
2020-11-26 04:24:29 +01:00
|
|
|
// do not allow right panel to appear if another button is shown on the SessionConversation
|
|
|
|
if (this.props.onAvatarClick && !this.props.showBackButton) {
|
2020-01-13 05:47:56 +01:00
|
|
|
this.props.onAvatarClick(userPubKey);
|
2019-11-28 04:54:04 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-01-24 05:24:27 +01:00
|
|
|
public highlightMessageSearch() {
|
2020-01-24 04:16:33 +01:00
|
|
|
// This is a temporary fix. In future we want to search
|
|
|
|
// messages in the current conversation
|
2020-07-28 02:57:59 +02:00
|
|
|
($('.session-search-input input') as any).focus();
|
2020-01-24 04:16:33 +01:00
|
|
|
}
|
|
|
|
|
2020-10-22 07:34:41 +02:00
|
|
|
private getHeaderMenuProps(triggerId: string): PropsConversationHeaderMenu {
|
|
|
|
return {
|
|
|
|
triggerId,
|
2021-06-18 06:20:36 +02:00
|
|
|
conversationId: this.props.id,
|
2020-10-22 07:34:41 +02:00
|
|
|
...this.props,
|
|
|
|
};
|
2019-09-04 02:58:32 +02:00
|
|
|
}
|
2020-11-24 23:14:38 +01:00
|
|
|
|
|
|
|
private renderTripleDotsMenu(triggerId: string) {
|
|
|
|
const { showBackButton } = this.props;
|
|
|
|
if (showBackButton) {
|
|
|
|
return <></>;
|
|
|
|
}
|
|
|
|
return (
|
2020-12-01 00:32:56 +01:00
|
|
|
<div
|
|
|
|
role="button"
|
|
|
|
onClick={(e: any) => {
|
|
|
|
contextMenu.show({
|
|
|
|
id: triggerId,
|
|
|
|
event: e,
|
|
|
|
});
|
|
|
|
}}
|
|
|
|
>
|
2020-11-24 23:14:38 +01:00
|
|
|
<SessionIconButton
|
|
|
|
iconType={SessionIconType.Ellipses}
|
|
|
|
iconSize={SessionIconSize.Medium}
|
2020-12-03 02:09:39 +01:00
|
|
|
theme={this.props.theme}
|
2020-11-24 23:14:38 +01:00
|
|
|
/>
|
2020-12-01 00:32:56 +01:00
|
|
|
</div>
|
2020-11-24 23:14:38 +01:00
|
|
|
);
|
|
|
|
}
|
2018-07-09 23:29:13 +02:00
|
|
|
}
|
2020-09-14 08:06:24 +02:00
|
|
|
|
|
|
|
export const ConversationHeaderWithDetails = usingClosedConversationDetails(
|
2020-12-03 02:09:39 +01:00
|
|
|
withTheme(ConversationHeaderInner)
|
2020-09-14 08:06:24 +02:00
|
|
|
);
|