diff --git a/projects/stream-chat-angular/src/lib/channel.service.ts b/projects/stream-chat-angular/src/lib/channel.service.ts index 9b659b6c..d2848846 100644 --- a/projects/stream-chat-angular/src/lib/channel.service.ts +++ b/projects/stream-chat-angular/src/lib/channel.service.ts @@ -1318,12 +1318,7 @@ export class ChannelService { ), ); this.activeChannelSubscriptions.push( - channel.on('capabilities.changed', (_) => { - this.activeChannelSubject.next(this.activeChannelSubject.getValue()); - }), - ); - this.activeChannelSubscriptions.push( - channel.on('channel.updated', (_) => { + channel.on(() => { this.activeChannelSubject.next(this.activeChannelSubject.getValue()); }), ); diff --git a/projects/stream-chat-angular/src/lib/channel/channel.component.ts b/projects/stream-chat-angular/src/lib/channel/channel.component.ts index 86f15539..fcfb537d 100644 --- a/projects/stream-chat-angular/src/lib/channel/channel.component.ts +++ b/projects/stream-chat-angular/src/lib/channel/channel.component.ts @@ -1,6 +1,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { combineLatest, Observable, Subscription } from 'rxjs'; -import { map } from 'rxjs/operators'; +import { distinctUntilChanged, map } from 'rxjs/operators'; import { ChannelService } from '../channel.service'; import { ThemeService } from '../theme.service'; import { CustomTemplatesService } from '../custom-templates.service'; @@ -49,6 +49,7 @@ export class ChannelComponent { this.theme$ = this.themeService.theme$; this.isActiveChannel$ = this.channelService.activeChannel$.pipe( map((c) => !!c), + distinctUntilChanged(), ); } } diff --git a/projects/stream-chat-angular/src/lib/message-input/message-input.component.spec.ts b/projects/stream-chat-angular/src/lib/message-input/message-input.component.spec.ts index 8ad86209..e47b7642 100644 --- a/projects/stream-chat-angular/src/lib/message-input/message-input.component.spec.ts +++ b/projects/stream-chat-angular/src/lib/message-input/message-input.component.spec.ts @@ -516,6 +516,7 @@ describe('MessageInputComponent', () => { }); it('should not reset textarea and attachments if channel id remains the same', () => { + attachmentService.resetAttachmentUploads.calls.reset(); attachmentService.attachmentUploads$.next([ { file: { name: 'img.png' } as any as File, @@ -676,15 +677,10 @@ describe('MessageInputComponent', () => { expect(component.canSendMessages).toBeFalse(); mockActiveChannel$.next({ - data: { own_capabilities: [] }, + data: { own_capabilities: ['send-message'] }, getConfig: () => ({ commands: [] }), } as any as Channel); - expect(component.canSendMessages).toBeFalse(); - - component.message = generateMockMessages()[0]; - component.ngOnChanges({ message: {} as SimpleChange }); - expect(component.canSendMessages).toBeTrue(); }); diff --git a/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts b/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts index 282f352d..68498258 100644 --- a/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts +++ b/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts @@ -149,7 +149,8 @@ export class MessageInputComponent private subscriptions: Subscription[] = []; private hideNotification: (() => void) | undefined; private isViewInited = false; - private channel: Channel | undefined; + private channelId: string | undefined; + private channelCapabilities: string[] = []; private sendMessageSubcription: Subscription | undefined; private readonly defaultTextareaPlaceholder = 'streamChat.Type your message'; private readonly slowModeTextareaPlaceholder = 'streamChat.Slow Mode ON'; @@ -186,21 +187,34 @@ export class MessageInputComponent ); this.subscriptions.push( this.channelService.activeChannel$.subscribe((channel) => { - if (channel && this.channel && channel.id !== this.channel.id) { + const newChannelId = channel?.id; + const newCapabilities = + (channel?.data?.own_capabilities as string[]) || []; + + const channelIdChanged = this.channelId !== newChannelId; + + const capabilitiesChanged = + newCapabilities.join(',') !== this.channelCapabilities.join(','); + + if (channelIdChanged) { + this.channelId = newChannelId; this.textareaValue = ''; this.attachmentService.resetAttachmentUploads(); this.voiceRecorderService.isRecorderVisible$.next(false); } - const capabilities = channel?.data?.own_capabilities as string[]; - if (capabilities) { + + if (capabilitiesChanged) { + this.channelCapabilities = newCapabilities; this.isFileUploadAuthorized = - capabilities.indexOf('upload-file') !== -1; - this.canSendLinks = capabilities.indexOf('send-links') !== -1; - this.channel = channel; + newCapabilities.indexOf('upload-file') !== -1; + this.canSendLinks = newCapabilities.indexOf('send-links') !== -1; this.setCanSendMessages(); } - if (this.isViewInited) { - this.cdRef.markForCheck(); + + if (channelIdChanged || capabilitiesChanged) { + if (this.isViewInited) { + this.cdRef.markForCheck(); + } } }), ); @@ -591,12 +605,11 @@ export class MessageInputComponent } private setCanSendMessages() { - const capabilities = this.channel?.data?.own_capabilities as string[]; - if (!capabilities) { + if (!this.channelCapabilities || this.channelCapabilities.length === 0) { this.canSendMessages = false; } else { this.canSendMessages = - capabilities.indexOf( + this.channelCapabilities.indexOf( this.mode === 'main' ? 'send-message' : 'send-reply', ) !== -1 || this.isUpdate; } diff --git a/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts b/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts index 512ec482..a8302cfe 100644 --- a/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts +++ b/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts @@ -220,6 +220,16 @@ export class MessageListComponent this.resetScrollState(); this.setMessages$(); this.channelId = channel?.id; + this.newMessageSubscription?.unsubscribe(); + if (channel) { + this.newMessageSubscription = channel.on('message.new', (event) => { + if (!event.message) { + return; + } else { + this.newMessageReceived(event.message); + } + }); + } if (this.isViewInited) { this.cdRef.markForCheck(); } @@ -289,16 +299,6 @@ export class MessageListComponent this.cdRef.markForCheck(); } } - this.newMessageSubscription?.unsubscribe(); - if (channel) { - this.newMessageSubscription = channel.on('message.new', (event) => { - if (!event.message) { - return; - } else { - this.newMessageReceived(event.message); - } - }); - } }), ); this.subscriptions.push( diff --git a/projects/stream-chat-angular/src/lib/message/message.component.ts b/projects/stream-chat-angular/src/lib/message/message.component.ts index d341831b..149e72d0 100644 --- a/projects/stream-chat-angular/src/lib/message/message.component.ts +++ b/projects/stream-chat-angular/src/lib/message/message.component.ts @@ -511,6 +511,9 @@ export class MessageComponent this.readByText = this.message?.readBy ? listUsers(this.message.readBy, !hasMoreThan100Members, others) : ''; + if (this.isViewInited) { + this.cdRef.markForCheck(); + } } private setIsSentByCurrentUser() {