mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-11-23 14:40:50 +01:00
add support for group chats
This commit is contained in:
parent
2fd73efa1d
commit
e933e0f677
5
src/views/friends/common/GroupType.ts
Normal file
5
src/views/friends/common/GroupType.ts
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
export class GroupType
|
||||||
|
{
|
||||||
|
public static readonly GROUP_CHAT = 0;
|
||||||
|
public static readonly PRIVATE_CHAT = 1;
|
||||||
|
}
|
@ -1,7 +1,9 @@
|
|||||||
import { LocalizeText } from '../../../api';
|
import { LocalizeText } from '../../../api';
|
||||||
|
import { GroupType } from './GroupType';
|
||||||
import { MessengerFriend } from './MessengerFriend';
|
import { MessengerFriend } from './MessengerFriend';
|
||||||
import { MessengerThreadChat } from './MessengerThreadChat';
|
import { MessengerThreadChat } from './MessengerThreadChat';
|
||||||
import { MessengerThreadChatGroup } from './MessengerThreadChatGroup';
|
import { MessengerThreadChatGroup } from './MessengerThreadChatGroup';
|
||||||
|
import { getGroupChatData } from './Utils';
|
||||||
|
|
||||||
export class MessengerThread
|
export class MessengerThread
|
||||||
{
|
{
|
||||||
@ -21,7 +23,7 @@ export class MessengerThread
|
|||||||
|
|
||||||
if(isNew)
|
if(isNew)
|
||||||
{
|
{
|
||||||
this.addMessage(-1, LocalizeText('messenger.moderationinfo'), 0, null, MessengerThreadChat.SECURITY_NOTIFICATION);
|
this.addMessage(null, LocalizeText('messenger.moderationinfo'), 0, null, MessengerThreadChat.SECURITY_NOTIFICATION);
|
||||||
|
|
||||||
this._unread = false;
|
this._unread = false;
|
||||||
}
|
}
|
||||||
@ -29,10 +31,15 @@ export class MessengerThread
|
|||||||
|
|
||||||
public addMessage(senderId: number, message: string, secondsSinceSent: number = 0, extraData: string = null, type: number = 0): MessengerThreadChat
|
public addMessage(senderId: number, message: string, secondsSinceSent: number = 0, extraData: string = null, type: number = 0): MessengerThreadChat
|
||||||
{
|
{
|
||||||
const group = this.getLastGroup(senderId);
|
const isGroupChat = (senderId < 0 && extraData);
|
||||||
|
const userId = isGroupChat ? getGroupChatData(extraData).userId : senderId;
|
||||||
|
|
||||||
|
const group = this.getLastGroup(userId);
|
||||||
|
|
||||||
if(!group) return;
|
if(!group) return;
|
||||||
|
|
||||||
|
if(isGroupChat) group.type = GroupType.GROUP_CHAT;
|
||||||
|
|
||||||
const chat = new MessengerThreadChat(senderId, message, secondsSinceSent, extraData, type);
|
const chat = new MessengerThreadChat(senderId, message, secondsSinceSent, extraData, type);
|
||||||
|
|
||||||
group.addChat(chat);
|
group.addChat(chat);
|
||||||
|
@ -1,14 +1,17 @@
|
|||||||
|
import { GroupType } from './GroupType';
|
||||||
import { MessengerThreadChat } from './MessengerThreadChat';
|
import { MessengerThreadChat } from './MessengerThreadChat';
|
||||||
|
|
||||||
export class MessengerThreadChatGroup
|
export class MessengerThreadChatGroup
|
||||||
{
|
{
|
||||||
private _userId: number;
|
private _userId: number;
|
||||||
private _chats: MessengerThreadChat[];
|
private _chats: MessengerThreadChat[];
|
||||||
|
private _type: number;
|
||||||
|
|
||||||
constructor(userId: number)
|
constructor(userId: number, type = GroupType.PRIVATE_CHAT)
|
||||||
{
|
{
|
||||||
this._userId = userId;
|
this._userId = userId;
|
||||||
this._chats = [];
|
this._chats = [];
|
||||||
|
this._type = type;
|
||||||
}
|
}
|
||||||
|
|
||||||
public addChat(message: MessengerThreadChat): void
|
public addChat(message: MessengerThreadChat): void
|
||||||
@ -25,4 +28,14 @@ export class MessengerThreadChatGroup
|
|||||||
{
|
{
|
||||||
return this._chats;
|
return this._chats;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public get type(): number
|
||||||
|
{
|
||||||
|
return this._type;
|
||||||
|
}
|
||||||
|
|
||||||
|
public set type(type: number)
|
||||||
|
{
|
||||||
|
this._type = type;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
18
src/views/friends/common/Utils.ts
Normal file
18
src/views/friends/common/Utils.ts
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
export const getGroupChatData = (extraData: string) =>
|
||||||
|
{
|
||||||
|
const splitData = extraData.split('/');
|
||||||
|
|
||||||
|
const username = splitData[0];
|
||||||
|
const figure = splitData[1];
|
||||||
|
const userId = parseInt(splitData[2]);
|
||||||
|
|
||||||
|
const result: IGroupChatData = { username: username, figure: figure, userId: userId }
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IGroupChatData
|
||||||
|
{
|
||||||
|
username: string;
|
||||||
|
figure: string;
|
||||||
|
userId: number;
|
||||||
|
}
|
@ -11,8 +11,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.friend-bar-item-head {
|
.friend-bar-item-head {
|
||||||
top: -30px;
|
&.avatar {
|
||||||
left: -30px;
|
top: -30px;
|
||||||
|
left: -30px;
|
||||||
|
}
|
||||||
|
&.group {
|
||||||
|
top: -5px;
|
||||||
|
left: -5px;
|
||||||
|
}
|
||||||
|
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -4,6 +4,7 @@ import { GetUserProfile, LocalizeText, OpenMessengerChat } from '../../../../api
|
|||||||
import { SendMessageHook } from '../../../../hooks/messages';
|
import { SendMessageHook } from '../../../../hooks/messages';
|
||||||
import { NitroLayoutBase } from '../../../../layout/base';
|
import { NitroLayoutBase } from '../../../../layout/base';
|
||||||
import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
|
import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
|
||||||
|
import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
|
||||||
import { FriendBarItemViewProps } from './FriendBarItemView.types';
|
import { FriendBarItemViewProps } from './FriendBarItemView.types';
|
||||||
|
|
||||||
export const FriendBarItemView: FC<FriendBarItemViewProps> = props =>
|
export const FriendBarItemView: FC<FriendBarItemViewProps> = props =>
|
||||||
@ -58,8 +59,9 @@ export const FriendBarItemView: FC<FriendBarItemViewProps> = props =>
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div ref={ elementRef } className={'btn btn-success friend-bar-item ' + (isVisible ? 'friend-bar-item-active' : '')} onClick={ event => setVisible(prevValue => !prevValue) }>
|
<div ref={ elementRef } className={'btn btn-success friend-bar-item ' + (isVisible ? 'friend-bar-item-active' : '')} onClick={ event => setVisible(prevValue => !prevValue) }>
|
||||||
<div className="friend-bar-item-head position-absolute">
|
<div className={`friend-bar-item-head position-absolute ${friend.id > 0 ? 'avatar': 'group'}`}>
|
||||||
<AvatarImageView headOnly={ true } figure={ friend.figure } direction={ 2 } />
|
{ friend.id > 0 && <AvatarImageView headOnly={ true } figure={ friend.figure } direction={ 2 } /> }
|
||||||
|
{ friend.id <= 0 && <BadgeImageView isGroup={ true } badgeCode={ friend.figure} />}
|
||||||
</div>
|
</div>
|
||||||
<div className="text-truncate">{ friend.name }</div>
|
<div className="text-truncate">{ friend.name }</div>
|
||||||
{ isVisible &&
|
{ isVisible &&
|
||||||
|
@ -1,18 +1,31 @@
|
|||||||
import { FC } from 'react';
|
import { FC, useMemo } from 'react';
|
||||||
import { GetSessionDataManager } from '../../../../api';
|
import { GetSessionDataManager } from '../../../../api';
|
||||||
import { NitroLayoutFlex } from '../../../../layout';
|
import { NitroLayoutFlex } from '../../../../layout';
|
||||||
import { NitroLayoutBase } from '../../../../layout/base';
|
import { NitroLayoutBase } from '../../../../layout/base';
|
||||||
import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
|
import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
|
||||||
|
import { GroupType } from '../../common/GroupType';
|
||||||
import { MessengerThreadChat } from '../../common/MessengerThreadChat';
|
import { MessengerThreadChat } from '../../common/MessengerThreadChat';
|
||||||
|
import { getGroupChatData } from '../../common/Utils';
|
||||||
import { FriendsMessengerThreadGroupProps } from './FriendsMessengerThreadGroup.types';
|
import { FriendsMessengerThreadGroupProps } from './FriendsMessengerThreadGroup.types';
|
||||||
|
|
||||||
export const FriendsMessengerThreadGroup: FC<FriendsMessengerThreadGroupProps> = props =>
|
export const FriendsMessengerThreadGroup: FC<FriendsMessengerThreadGroupProps> = props =>
|
||||||
{
|
{
|
||||||
const { thread = null, group = null } = props;
|
const { thread = null, group = null } = props;
|
||||||
|
|
||||||
if(!thread || !group) return null;
|
const isOwnChat = useMemo(() =>
|
||||||
|
{
|
||||||
|
if(!thread || !group) return false;
|
||||||
|
|
||||||
|
if(group.type === GroupType.PRIVATE_CHAT && (group.userId === GetSessionDataManager().userId)) return true;
|
||||||
|
|
||||||
if(group.userId === -1)
|
if( (group.type === GroupType.GROUP_CHAT) && (group.chats.length && getGroupChatData(group.chats[0].extraData).userId === GetSessionDataManager().userId)) return true;
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}, [group, thread]);
|
||||||
|
|
||||||
|
if(!thread || !group) return null;
|
||||||
|
|
||||||
|
if(!group.userId)
|
||||||
{
|
{
|
||||||
return (
|
return (
|
||||||
<div className="d-flex gap-2 w-100 justify-content-start">
|
<div className="d-flex gap-2 w-100 justify-content-start">
|
||||||
@ -31,17 +44,21 @@ export const FriendsMessengerThreadGroup: FC<FriendsMessengerThreadGroupProps> =
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<NitroLayoutFlex className={ 'w-100 justify-content-' + (group.userId === 0 ? 'end' : 'start') } gap={ 2 }>
|
<NitroLayoutFlex className={ 'w-100 justify-content-' + (isOwnChat ? 'end' : 'start') } gap={ 2 }>
|
||||||
{ (group.userId > 0) &&
|
|
||||||
<NitroLayoutBase className="message-avatar flex-shrink-0">
|
<NitroLayoutBase className="message-avatar flex-shrink-0">
|
||||||
|
{ (group.type === GroupType.PRIVATE_CHAT && !isOwnChat) &&
|
||||||
<AvatarImageView figure={ thread.participant.figure } direction={ 2 } />
|
<AvatarImageView figure={ thread.participant.figure } direction={ 2 } />
|
||||||
</NitroLayoutBase> }
|
}
|
||||||
<NitroLayoutBase className={ 'bg-light text-black border-radius mb-2 rounded py-1 px-2 messages-group-' + (group.userId === 0 ? 'right' : 'left') }>
|
{ (group.type === GroupType.GROUP_CHAT && !isOwnChat) &&
|
||||||
{ group.chats.map((chat, index) => <NitroLayoutBase key={ index } className="text-break">{ chat.message }</NitroLayoutBase>) }
|
<AvatarImageView figure={ getGroupChatData(group.chats[0].extraData).figure } direction={ 2} />
|
||||||
|
}
|
||||||
|
</NitroLayoutBase>
|
||||||
|
<NitroLayoutBase className={ 'bg-light text-black border-radius mb-2 rounded py-1 px-2 messages-group-' + (isOwnChat ? 'right' : 'left') }>
|
||||||
|
{ group.chats.map((chat, index) =><NitroLayoutBase key={ index } className="text-break">{ chat.message }</NitroLayoutBase>) }
|
||||||
</NitroLayoutBase>
|
</NitroLayoutBase>
|
||||||
{ (group.userId === 0) &&
|
{ (isOwnChat) &&
|
||||||
<NitroLayoutBase className="message-avatar flex-shrink-0">
|
<NitroLayoutBase className="message-avatar flex-shrink-0">
|
||||||
<AvatarImageView figure={ GetSessionDataManager().figure } direction={ 4 } />
|
<AvatarImageView figure={ GetSessionDataManager().figure } direction={ 4 } />
|
||||||
</NitroLayoutBase> }
|
</NitroLayoutBase> }
|
||||||
|
@ -1,12 +1,13 @@
|
|||||||
import { FollowFriendMessageComposer, ILinkEventTracker, NewConsoleMessageEvent, SendMessageComposer } from '@nitrots/nitro-renderer';
|
import { FollowFriendMessageComposer, ILinkEventTracker, NewConsoleMessageEvent, SendMessageComposer } from '@nitrots/nitro-renderer';
|
||||||
import { FC, KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
import { FC, KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||||
import { AddEventLinkTracker, GetUserProfile, LocalizeText, RemoveLinkEventTracker } from '../../../../api';
|
import { AddEventLinkTracker, GetSessionDataManager, GetUserProfile, LocalizeText, RemoveLinkEventTracker } from '../../../../api';
|
||||||
import { MESSENGER_MESSAGE_RECEIVED, MESSENGER_NEW_THREAD, PlaySound } from '../../../../api/utils/PlaySound';
|
import { MESSENGER_MESSAGE_RECEIVED, MESSENGER_NEW_THREAD, PlaySound } from '../../../../api/utils/PlaySound';
|
||||||
import { FriendsMessengerIconEvent } from '../../../../events';
|
import { FriendsMessengerIconEvent } from '../../../../events';
|
||||||
import { BatchUpdates, CreateMessageHook, dispatchUiEvent, SendMessageHook } from '../../../../hooks';
|
import { BatchUpdates, CreateMessageHook, dispatchUiEvent, SendMessageHook } from '../../../../hooks';
|
||||||
import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutButton, NitroLayoutButtonGroup, NitroLayoutFlex, NitroLayoutFlexColumn } from '../../../../layout';
|
import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutButton, NitroLayoutButtonGroup, NitroLayoutFlex, NitroLayoutFlexColumn } from '../../../../layout';
|
||||||
import { NitroLayoutBase } from '../../../../layout/base';
|
import { NitroLayoutBase } from '../../../../layout/base';
|
||||||
import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
|
import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
|
||||||
|
import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
|
||||||
import { MessengerThread } from '../../common/MessengerThread';
|
import { MessengerThread } from '../../common/MessengerThread';
|
||||||
import { MessengerThreadChat } from '../../common/MessengerThreadChat';
|
import { MessengerThreadChat } from '../../common/MessengerThreadChat';
|
||||||
import { useFriendsContext } from '../../context/FriendsContext';
|
import { useFriendsContext } from '../../context/FriendsContext';
|
||||||
@ -117,7 +118,7 @@ export const FriendsMessengerView: FC<{}> = props =>
|
|||||||
|
|
||||||
if(messageThreads.length === 1 && thread.groups.length === 1) PlaySound(MESSENGER_NEW_THREAD);
|
if(messageThreads.length === 1 && thread.groups.length === 1) PlaySound(MESSENGER_NEW_THREAD);
|
||||||
|
|
||||||
thread.addMessage(0, messageText, 0, null, MessengerThreadChat.CHAT);
|
thread.addMessage(GetSessionDataManager().userId, messageText, 0, null, MessengerThreadChat.CHAT);
|
||||||
|
|
||||||
BatchUpdates(() =>
|
BatchUpdates(() =>
|
||||||
{
|
{
|
||||||
@ -250,7 +251,9 @@ export const FriendsMessengerView: FC<{}> = props =>
|
|||||||
<div key={ index } className="position-relative friend-head rounded flex-shrink-0 cursor-pointer bg-muted" onClick={ event => setActiveThreadIndex(messageThreadIndex) }>
|
<div key={ index } className="position-relative friend-head rounded flex-shrink-0 cursor-pointer bg-muted" onClick={ event => setActiveThreadIndex(messageThreadIndex) }>
|
||||||
{ thread.unread &&
|
{ thread.unread &&
|
||||||
<NitroLayoutBase className="position-absolute nitro-friends-spritesheet icon-new-message top-1 end-1 z-index-1" /> }
|
<NitroLayoutBase className="position-absolute nitro-friends-spritesheet icon-new-message top-1 end-1 z-index-1" /> }
|
||||||
<AvatarImageView figure={ thread.participant.figure } headOnly={ true } direction={ 3 } />
|
{ thread.participant.id > 0 && <AvatarImageView figure={ thread.participant.figure } headOnly={ true } direction={ 3 } />}
|
||||||
|
{ thread.participant.id <= 0 && <BadgeImageView isGroup={ true } badgeCode={thread.participant.figure } /> }
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}) }
|
}) }
|
||||||
|
Loading…
Reference in New Issue
Block a user