{{ message?.user?.name || message?.user?.id }} |
- {{ message?.created_at | date : "long" }}
+ {{ message?.created_at | date: "long" }}
diff --git a/projects/sample-app/src/app/custom-message/custom-message.component.ts b/projects/sample-app/src/app/custom-message/custom-message.component.ts
index b972f7a2..40e0a1e2 100644
--- a/projects/sample-app/src/app/custom-message/custom-message.component.ts
+++ b/projects/sample-app/src/app/custom-message/custom-message.component.ts
@@ -5,7 +5,7 @@ import { ChatClientService } from 'stream-chat-angular';
@Component({
selector: 'app-custom-message',
templateUrl: './custom-message.component.html',
- styleUrls: ['./custom-message.component.scss'],
+ styleUrl: './custom-message.component.scss',
})
export class CustomMessageComponent {
@Input() message: FormatMessageResponse | undefined;
diff --git a/projects/sample-app/src/app/emoji-picker/emoji-picker.component.html b/projects/sample-app/src/app/emoji-picker/emoji-picker.component.html
index f8b40ccd..eb81e10e 100644
--- a/projects/sample-app/src/app/emoji-picker/emoji-picker.component.html
+++ b/projects/sample-app/src/app/emoji-picker/emoji-picker.component.html
@@ -9,19 +9,19 @@
-
- ;
@@ -36,6 +37,8 @@ describe('ChannelHeaderComponent', () => {
{ provide: ChannelService, useValue: channelServiceMock },
{ provide: ChatClientService, useValue: chatClientServiceMock },
],
+ }).overrideComponent(ChannelHeaderComponent, {
+ set: { changeDetection: ChangeDetectionStrategy.Default },
});
TestBed.inject(StreamI18nService).setTranslation();
fixture = TestBed.createComponent(ChannelHeaderComponent);
diff --git a/projects/stream-chat-angular/src/lib/channel-header/channel-header.component.ts b/projects/stream-chat-angular/src/lib/channel-header/channel-header.component.ts
index 39ff7f32..49a025de 100644
--- a/projects/stream-chat-angular/src/lib/channel-header/channel-header.component.ts
+++ b/projects/stream-chat-angular/src/lib/channel-header/channel-header.component.ts
@@ -1,4 +1,6 @@
import {
+ AfterViewInit,
+ ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
OnDestroy,
@@ -20,50 +22,67 @@ import { ChannelActionsContext, ChannelHeaderInfoContext } from '../types';
selector: 'stream-channel-header',
templateUrl: './channel-header.component.html',
styles: [],
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
-export class ChannelHeaderComponent implements OnInit, OnDestroy {
+export class ChannelHeaderComponent
+ implements OnInit, OnDestroy, AfterViewInit
+{
channelActionsTemplate?: TemplateRef;
channelHeaderInfoTemplate?: TemplateRef;
activeChannel: Channel | undefined;
canReceiveConnectEvents: boolean | undefined;
private subscriptions: Subscription[] = [];
+ private isViewInitialized = false;
constructor(
private channelService: ChannelService,
private customTemplatesService: CustomTemplatesService,
private cdRef: ChangeDetectorRef,
- private chatClientService: ChatClientService
- ) {
- this.channelService.activeChannel$.subscribe((c) => {
- this.activeChannel = c;
- const capabilities = this.activeChannel?.data
- ?.own_capabilities as string[];
- if (!capabilities) {
- return;
- }
- this.canReceiveConnectEvents =
- capabilities.indexOf('connect-events') !== -1;
- });
- }
+ private chatClientService: ChatClientService,
+ ) {}
+
ngOnInit(): void {
+ this.subscriptions.push(
+ this.channelService.activeChannel$.subscribe((c) => {
+ this.activeChannel = c;
+ const capabilities = this.activeChannel?.data
+ ?.own_capabilities as string[];
+ if (!capabilities) {
+ return;
+ }
+ this.canReceiveConnectEvents =
+ capabilities.indexOf('connect-events') !== -1;
+ if (this.isViewInitialized) {
+ this.cdRef.markForCheck();
+ }
+ }),
+ );
this.subscriptions.push(
this.customTemplatesService.channelActionsTemplate$.subscribe(
(template) => {
this.channelActionsTemplate = template;
- this.cdRef.detectChanges();
- }
- )
+ if (this.isViewInitialized) {
+ this.cdRef.markForCheck();
+ }
+ },
+ ),
);
this.subscriptions.push(
this.customTemplatesService.channelHeaderInfoTemplate$.subscribe(
(template) => {
this.channelHeaderInfoTemplate = template;
- this.cdRef.detectChanges();
- }
- )
+ if (this.isViewInitialized) {
+ this.cdRef.markForCheck();
+ }
+ },
+ ),
);
}
+ ngAfterViewInit(): void {
+ this.isViewInitialized = true;
+ }
+
ngOnDestroy(): void {
this.subscriptions.forEach((s) => s.unsubscribe());
}
@@ -90,7 +109,7 @@ export class ChannelHeaderComponent implements OnInit, OnDestroy {
}
return getChannelDisplayText(
this.activeChannel,
- this.chatClientService.chatClient.user!
+ this.chatClientService.chatClient.user!,
);
}
diff --git a/projects/stream-chat-angular/src/lib/channel-list/channel-list.component.html b/projects/stream-chat-angular/src/lib/channel-list/channel-list.component.html
index 9c8512d9..588d409e 100644
--- a/projects/stream-chat-angular/src/lib/channel-list/channel-list.component.html
+++ b/projects/stream-chat-angular/src/lib/channel-list/channel-list.component.html
@@ -5,83 +5,71 @@
theme$ | async
}}"
>
-
-
-
-
-
+ @for (attachment of orderedAttachments; track trackByUrl(attachment)) {
+ (
- '[data-testclass="gallery-image"]'
+ '[data-testclass="gallery-image"]',
)[0]
.click();
fixture.detectChanges();
@@ -837,7 +842,7 @@ describe('AttachmentListComponent', () => {
queryGallery()
?.querySelectorAll(
- '[data-testclass="gallery-image"]'
+ '[data-testclass="gallery-image"]',
)[1]
.click();
fixture.detectChanges();
@@ -868,7 +873,7 @@ describe('AttachmentListComponent', () => {
queryGallery()
?.querySelectorAll(
- '[data-testclass="gallery-image"]'
+ '[data-testclass="gallery-image"]',
)[0]
.click();
fixture.detectChanges();
@@ -947,19 +952,19 @@ describe('AttachmentListComponent', () => {
};
spyOn(
configurationService,
- 'getImageAttachmentConfiguration'
+ 'getImageAttachmentConfiguration',
).and.returnValue(testConfiguration);
spyOn(
configurationService,
- 'getVideoAttachmentConfiguration'
+ 'getVideoAttachmentConfiguration',
).and.returnValue(testConfiguration);
spyOn(
configurationService,
- 'getGiphyAttachmentConfiguration'
+ 'getGiphyAttachmentConfiguration',
).and.returnValue(testConfiguration);
spyOn(
configurationService,
- 'getScrapedImageAttachmentConfiguration'
+ 'getScrapedImageAttachmentConfiguration',
).and.returnValue(testConfiguration);
// Single image, link image, video, giphy
@@ -1001,11 +1006,11 @@ describe('AttachmentListComponent', () => {
expect(element.style.width).toBe(testConfiguration.width);
expect(
- getComputedStyle(element).getPropertyValue('--original-height')
+ getComputedStyle(element).getPropertyValue('--original-height'),
).toBe(testConfiguration.originalHeight.toString());
expect(
- getComputedStyle(element).getPropertyValue('--original-width')
+ getComputedStyle(element).getPropertyValue('--original-width'),
).toBe(testConfiguration.originalWidth.toString());
});
@@ -1029,18 +1034,18 @@ describe('AttachmentListComponent', () => {
[
...Array.from(gallery.querySelectorAll('img')),
gallery.querySelector(
- '[data-testid="more-image-button"]'
+ '[data-testid="more-image-button"]',
)!,
].forEach((element) => {
expect(element.style.height).toBe(testConfiguration.height);
expect(element.style.width).toBe(testConfiguration.width);
expect(
- getComputedStyle(element).getPropertyValue('--original-height')
+ getComputedStyle(element).getPropertyValue('--original-height'),
).toBe(testConfiguration.originalHeight.toString());
expect(
- getComputedStyle(element).getPropertyValue('--original-width')
+ getComputedStyle(element).getPropertyValue('--original-width'),
).toBe(testConfiguration.originalWidth.toString());
});
@@ -1060,11 +1065,11 @@ describe('AttachmentListComponent', () => {
expect(modalImage.style.width).toBe(testConfiguration.width);
expect(
- getComputedStyle(modalImage).getPropertyValue('--original-height')
+ getComputedStyle(modalImage).getPropertyValue('--original-height'),
).toBe(testConfiguration.originalHeight.toString());
expect(
- getComputedStyle(modalImage).getPropertyValue('--original-width')
+ getComputedStyle(modalImage).getPropertyValue('--original-width'),
).toBe(testConfiguration.originalWidth.toString());
});
@@ -1116,7 +1121,7 @@ describe('AttachmentListComponent with custom attachments', () => {
ngAfterViewInit(): void {
this.customTemplatesService.customAttachmentListTemplate$.next(
- this.template
+ this.template,
);
}
}
@@ -1134,7 +1139,7 @@ describe('AttachmentListComponent with custom attachments', () => {
}).compileComponents();
hostFixture = TestBed.createComponent(
- TestHostComponentAttachmentListComponent
+ TestHostComponentAttachmentListComponent,
);
hostComponent = hostFixture.componentInstance;
hostFixture.detectChanges();
@@ -1142,7 +1147,7 @@ describe('AttachmentListComponent with custom attachments', () => {
it('should display custom attachments', () => {
expect(
- hostFixture.nativeElement.querySelectorAll('.payment-link').length
+ hostFixture.nativeElement.querySelectorAll('.payment-link').length,
).toBe(0);
const customAttachment = {
@@ -1155,7 +1160,7 @@ describe('AttachmentListComponent with custom attachments', () => {
hostFixture.detectChanges();
expect(
- hostFixture.nativeElement.querySelectorAll('.payment-link').length
+ hostFixture.nativeElement.querySelectorAll('.payment-link').length,
).toBe(1);
});
@@ -1173,13 +1178,13 @@ describe('AttachmentListComponent with custom attachments', () => {
hostFixture.detectChanges();
expect(
- hostFixture.nativeElement.querySelector('.str-chat__attachment-list')
+ hostFixture.nativeElement.querySelector('.str-chat__attachment-list'),
).toBeNull();
});
it(`shouldn't display attachments if there are no attachments`, () => {
expect(
- hostFixture.nativeElement.querySelector('.str-chat__attachment-list')
+ hostFixture.nativeElement.querySelector('.str-chat__attachment-list'),
).toBeNull();
});
});
diff --git a/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts b/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts
index 68113c2b..00e1f141 100644
--- a/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts
+++ b/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts
@@ -1,4 +1,6 @@
import {
+ ChangeDetectionStrategy,
+ ChangeDetectorRef,
Component,
EventEmitter,
HostBinding,
@@ -36,6 +38,7 @@ import { MessageService } from '../message.service';
selector: 'stream-attachment-list',
templateUrl: './attachment-list.component.html',
styles: [],
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AttachmentListComponent implements OnChanges, OnInit, OnDestroy {
/**
@@ -76,23 +79,16 @@ export class AttachmentListComponent implements OnChanges, OnInit, OnDestroy {
public readonly customTemplatesService: CustomTemplatesService,
private channelService: ChannelService,
private attachmentConfigurationService: AttachmentConfigurationService,
- private messageService: MessageService
+ private messageService: MessageService,
+ private cdRef: ChangeDetectorRef,
) {}
- trackByUrl = (_: number, attachment: Attachment | GalleryAttachment) => {
+ trackByUrl = (attachment: Attachment | GalleryAttachment) => {
return this.isGalleryType(attachment)
? attachment.images.map(this.getAttachmentUrl).join(',')
: this.getAttachmentUrl(attachment);
};
- ngOnInit(): void {
- this.subscriptions.push(
- this.customTemplatesService.customAttachmentListTemplate$.subscribe(
- (t) => (this.customAttachmentsTemplate = t)
- )
- );
- }
-
ngOnChanges(changes: SimpleChanges): void {
if (changes.attachments) {
const builtInAttachments: Attachment[] = [];
@@ -117,13 +113,24 @@ export class AttachmentListComponent implements OnChanges, OnInit, OnDestroy {
// Giphy-s always sent without other attachments
if (this.orderedAttachments.length === 0) {
this.orderedAttachments.push(
- ...builtInAttachments.filter((a) => this.isCard(a))
+ ...builtInAttachments.filter((a) => this.isCard(a)),
);
}
this.customAttachments = customAttachments;
}
}
+ ngOnInit(): void {
+ this.subscriptions.push(
+ this.customTemplatesService.customAttachmentListTemplate$.subscribe(
+ (t) => {
+ this.customAttachmentsTemplate = t;
+ this.cdRef.markForCheck();
+ },
+ ),
+ );
+ }
+
ngOnDestroy(): void {
this.subscriptions.forEach((s) => s.unsubscribe());
}
@@ -201,14 +208,10 @@ export class AttachmentListComponent implements OnChanges, OnInit, OnDestroy {
{
[action.name!]: action.value!,
},
- this.parentMessageId
+ this.parentMessageId,
);
}
- trackByActionValue(_: number, item: Action) {
- return item.value;
- }
-
openImageModal(attachments: Attachment[], selectedIndex = 0) {
this.imageModalStateChange.next('opened');
this.imagesToView = attachments;
@@ -230,7 +233,7 @@ export class AttachmentListComponent implements OnChanges, OnInit, OnDestroy {
getImageAttachmentConfiguration(
attachment: Attachment,
type: 'gallery' | 'single',
- element: HTMLElement
+ element: HTMLElement,
): ImageAttachmentConfiguration {
const existingConfiguration = this.attachmentConfigurations.get(attachment);
if (existingConfiguration) {
@@ -240,7 +243,7 @@ export class AttachmentListComponent implements OnChanges, OnInit, OnDestroy {
this.attachmentConfigurationService.getImageAttachmentConfiguration(
attachment,
type,
- element
+ element,
);
this.attachmentConfigurations.set(attachment, configuration);
return configuration;
@@ -248,18 +251,18 @@ export class AttachmentListComponent implements OnChanges, OnInit, OnDestroy {
getCarouselImageAttachmentConfiguration(
attachment: Attachment,
- element: HTMLElement
+ element: HTMLElement,
) {
return this.attachmentConfigurationService.getImageAttachmentConfiguration(
attachment,
'carousel',
- element
+ element,
);
}
getVideoAttachmentConfiguration(
attachment: Attachment,
- element: HTMLElement
+ element: HTMLElement,
): VideoAttachmentConfiguration {
const existingConfiguration = this.attachmentConfigurations.get(attachment);
if (existingConfiguration) {
@@ -268,7 +271,7 @@ export class AttachmentListComponent implements OnChanges, OnInit, OnDestroy {
const configuration =
this.attachmentConfigurationService.getVideoAttachmentConfiguration(
attachment,
- element
+ element,
);
this.attachmentConfigurations.set(attachment, configuration);
return configuration;
@@ -281,12 +284,12 @@ export class AttachmentListComponent implements OnChanges, OnInit, OnDestroy {
}
if (attachment.type === 'giphy') {
return this.attachmentConfigurationService.getGiphyAttachmentConfiguration(
- attachment
+ attachment,
);
} else {
const configuration =
this.attachmentConfigurationService.getScrapedImageAttachmentConfiguration(
- attachment
+ attachment,
);
this.attachmentConfigurations.set(attachment, configuration);
return configuration;
@@ -294,7 +297,7 @@ export class AttachmentListComponent implements OnChanges, OnInit, OnDestroy {
}
isGalleryType(
- attachment: Attachment | GalleryAttachment
+ attachment: Attachment | GalleryAttachment,
): attachment is GalleryAttachment {
return attachment.type === 'gallery';
}
diff --git a/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.html b/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.html
index b72923ff..313f2892 100644
--- a/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.html
+++ b/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.html
@@ -1,119 +1,122 @@
-
-
+ @if (attachmentUpload.state === "error") {
+
+ }
diff --git a/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.spec.ts b/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.spec.ts
index a52a47e7..92fe0314 100644
--- a/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.spec.ts
+++ b/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.spec.ts
@@ -5,6 +5,7 @@ import { AttachmentUpload, CustomAttachmentPreviewListContext } from '../types';
import { AttachmentPreviewListComponent } from './attachment-preview-list.component';
import {
AfterViewInit,
+ ChangeDetectionStrategy,
Component,
TemplateRef,
ViewChild,
@@ -25,7 +26,11 @@ describe('AttachmentPreviewListComponent', () => {
attachmentUploads$ = new BehaviorSubject([]);
await TestBed.configureTestingModule({
declarations: [AttachmentPreviewListComponent],
- }).compileComponents();
+ })
+ .overrideComponent(AttachmentPreviewListComponent, {
+ set: { changeDetection: ChangeDetectionStrategy.Default },
+ })
+ .compileComponents();
});
beforeEach(() => {
@@ -35,22 +40,22 @@ describe('AttachmentPreviewListComponent', () => {
queryImagePreviews = () =>
Array.from(
nativeElement.querySelectorAll(
- '[data-testclass="attachment-image-preview"]'
- )
+ '[data-testclass="attachment-image-preview"]',
+ ),
);
queryLoadingIndicators = () =>
Array.from(
- nativeElement.querySelectorAll('[data-testclass="loading-indicator"]')
+ nativeElement.querySelectorAll('[data-testclass="loading-indicator"]'),
);
queryPreviewImages = () =>
Array.from(
- nativeElement.querySelectorAll('[data-testclass="attachment-image"]')
+ nativeElement.querySelectorAll('[data-testclass="attachment-image"]'),
);
queryPreviewFiles = () =>
Array.from(
nativeElement.querySelectorAll(
- '[data-testclass="attachment-file-preview"]'
- )
+ '[data-testclass="attachment-file-preview"]',
+ ),
);
component.attachmentUploads$ = attachmentUploads$;
fixture.detectChanges();
@@ -109,11 +114,11 @@ describe('AttachmentPreviewListComponent', () => {
const previews = queryImagePreviews();
expect(
- previews[0].querySelector('[data-testclass="upload-retry"]')
+ previews[0].querySelector('[data-testclass="upload-retry"]'),
).toBeNull();
expect(
- previews[1].querySelector('[data-testclass="upload-retry"]')
+ previews[1].querySelector('[data-testclass="upload-retry"]'),
).not.toBeNull();
});
@@ -149,7 +154,7 @@ describe('AttachmentPreviewListComponent', () => {
filePreviews.forEach((p) => {
expect(
- p.querySelector('.rfu-file-previewer__file--uploading')
+ p.querySelector('.rfu-file-previewer__file--uploading'),
).toBeNull();
expect(p.innerHTML).toContain(url);
expect(p.innerHTML).toContain(fileName);
@@ -174,11 +179,11 @@ describe('AttachmentPreviewListComponent', () => {
const filePreviews = queryPreviewFiles();
expect(
- filePreviews[0].querySelector('[data-testclass="upload-retry"]')
+ filePreviews[0].querySelector('[data-testclass="upload-retry"]'),
).toBeNull();
expect(
- filePreviews[1].querySelector('[data-testclass="upload-retry"]')
+ filePreviews[1].querySelector('[data-testclass="upload-retry"]'),
).not.toBeNull();
});
@@ -212,7 +217,7 @@ describe('AttachmentPreviewListComponent', () => {
component.retryAttachmentUpload.subscribe(spy);
const filePreviews = queryPreviewFiles();
const retryButton = filePreviews[0].querySelector(
- '[data-testclass="upload-retry"]'
+ '[data-testclass="upload-retry"]',
) as HTMLButtonElement;
retryButton.click();
fixture.detectChanges();
@@ -231,7 +236,7 @@ describe('AttachmentPreviewListComponent', () => {
fixture.detectChanges();
const filePreviews = queryPreviewFiles();
const deleteButton = filePreviews[0].querySelector(
- '[data-testclass="file-delete"]'
+ '[data-testclass="file-delete"]',
) as HTMLButtonElement;
const spy = jasmine.createSpy();
component.deleteAttachment.subscribe(spy);
@@ -246,7 +251,7 @@ describe('AttachmentPreviewListComponent', () => {
attachmentUploads$.next([{ file, state: 'error', type: 'image' }]);
fixture.detectChanges();
const retryButton = queryImagePreviews()[0].querySelector(
- '[data-testclass="upload-retry"]'
+ '[data-testclass="upload-retry"]',
) as HTMLButtonElement;
retryButton.click();
attachmentUploads$.next([
@@ -255,7 +260,7 @@ describe('AttachmentPreviewListComponent', () => {
fixture.detectChanges();
expect(
- queryImagePreviews()[0].querySelector('[data-testclass="upload-retry"]')
+ queryImagePreviews()[0].querySelector('[data-testclass="upload-retry"]'),
).toBeNull();
});
@@ -269,7 +274,7 @@ describe('AttachmentPreviewListComponent', () => {
attachmentUploads$.next([upload]);
fixture.detectChanges();
const link = queryPreviewFiles()[0].querySelector(
- '[data-testclass="file-download-link"]'
+ '[data-testclass="file-download-link"]',
) as HTMLAnchorElement;
const event = new KeyboardEvent('click');
spyOn(event, 'preventDefault');
@@ -289,7 +294,7 @@ describe('AttachmentPreviewListComponent', () => {
attachmentUploads$.next([upload]);
fixture.detectChanges();
const link = queryPreviewFiles()[0].querySelector(
- '[data-testclass="file-download-link"]'
+ '[data-testclass="file-download-link"]',
) as HTMLAnchorElement;
expect(link).toBeNull();
@@ -334,7 +339,7 @@ describe('AttachmentPreviewListComponent with custom attachments', () => {
ngAfterViewInit(): void {
this.customTemplatesService.customAttachmentPreviewListTemplate$.next(
- this.template
+ this.template,
);
}
}
@@ -353,7 +358,7 @@ describe('AttachmentPreviewListComponent with custom attachments', () => {
it('should display custom attachments', () => {
expect(
- hostFixture.nativeElement.querySelectorAll('.payment-link').length
+ hostFixture.nativeElement.querySelectorAll('.payment-link').length,
).toBe(0);
const customAttachment = {
@@ -367,7 +372,7 @@ describe('AttachmentPreviewListComponent with custom attachments', () => {
hostFixture.detectChanges();
expect(
- hostFixture.nativeElement.querySelectorAll('.payment-link').length
+ hostFixture.nativeElement.querySelectorAll('.payment-link').length,
).toBe(1);
});
@@ -387,16 +392,16 @@ describe('AttachmentPreviewListComponent with custom attachments', () => {
expect(
hostFixture.nativeElement.querySelector(
- '.str-chat__attachment-preview-list'
- )
+ '.str-chat__attachment-preview-list',
+ ),
).toBeNull();
});
it(`shouldn't display attachments if there are no attachments`, () => {
expect(
hostFixture.nativeElement.querySelector(
- '.str-chat__attachment-preview-list'
- )
+ '.str-chat__attachment-preview-list',
+ ),
).toBeNull();
});
});
diff --git a/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts b/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts
index da6757e0..666b8e82 100644
--- a/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts
+++ b/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts
@@ -1,4 +1,6 @@
import {
+ ChangeDetectionStrategy,
+ ChangeDetectorRef,
Component,
EventEmitter,
Input,
@@ -20,6 +22,7 @@ import { Attachment } from 'stream-chat';
selector: 'stream-attachment-preview-list',
templateUrl: './attachment-preview-list.component.html',
styles: [],
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AttachmentPreviewListComponent implements OnInit, OnDestroy {
/**
@@ -40,19 +43,24 @@ export class AttachmentPreviewListComponent implements OnInit, OnDestroy {
constructor(
private customTemplateService: CustomTemplatesService,
- public readonly attachmentService: AttachmentService
+ public readonly attachmentService: AttachmentService,
+ private cdRef: ChangeDetectorRef,
) {}
ngOnInit(): void {
this.subscriptions.push(
this.customTemplateService.customAttachmentPreviewListTemplate$.subscribe(
- (t) => (this.customAttachmentsPreview = t)
- )
+ (t) => {
+ this.customAttachmentsPreview = t;
+ this.cdRef.markForCheck();
+ },
+ ),
);
this.subscriptions.push(
- this.attachmentService.customAttachments$.subscribe(
- (a) => (this.customAttachments = a)
- )
+ this.attachmentService.customAttachments$.subscribe((a) => {
+ this.customAttachments = a;
+ this.cdRef.markForCheck();
+ }),
);
}
@@ -67,8 +75,4 @@ export class AttachmentPreviewListComponent implements OnInit, OnDestroy {
attachmentDeleted(upload: AttachmentUpload) {
this.deleteAttachment.emit(upload);
}
-
- trackByFile(_: number, item: AttachmentUpload) {
- return item.file;
- }
}
diff --git a/projects/stream-chat-angular/src/lib/attachment.service.spec.ts b/projects/stream-chat-angular/src/lib/attachment.service.spec.ts
index a70bee33..1f1dbba8 100644
--- a/projects/stream-chat-angular/src/lib/attachment.service.spec.ts
+++ b/projects/stream-chat-angular/src/lib/attachment.service.spec.ts
@@ -68,7 +68,7 @@ describe('AttachmentService', () => {
it('should delete attachment, if file is uploading', fakeAsync(() => {
const file = { name: 'myimage.jpg', type: 'image/jpg' } as any as File;
- let resolver!: Function;
+ let resolver!: (value?: unknown) => any;
uploadAttachmentsSpy.and.returnValue(
new Promise((resolve) => {
resolver = () =>
@@ -80,7 +80,7 @@ describe('AttachmentService', () => {
type: 'image' as const,
},
]);
- })
+ }),
);
const attachmentUploadsSpy = jasmine.createSpy('attachmentUploadsSpy');
service.attachmentUploads$.subscribe(attachmentUploadsSpy);
@@ -191,14 +191,14 @@ describe('AttachmentService', () => {
'streamChat.Error uploading file, extension not supported',
'error',
undefined,
- { name: image.name, ext: '.jpg' }
+ { name: image.name, ext: '.jpg' },
);
expect(notificationService.addTemporaryNotification).toHaveBeenCalledWith(
'streamChat.Error uploading file, maximum file size exceeded',
'error',
undefined,
- { name: file.name, limit: '50MB' }
+ { name: file.name, limit: '50MB' },
);
});
@@ -220,7 +220,7 @@ describe('AttachmentService', () => {
expect(notificationService.addPermanentNotification).toHaveBeenCalledWith(
'streamChat.You currently have {{count}} attachments, the maximum is {{max}}',
'error',
- { count: 31, max: service.maxNumberOfAttachments }
+ { count: 31, max: service.maxNumberOfAttachments },
);
});
@@ -236,14 +236,14 @@ describe('AttachmentService', () => {
const files = new Array(3)
.fill(null)
- .map(() => ({ name: 'my_image.png', type: 'image/png' } as File));
+ .map(() => ({ name: 'my_image.png', type: 'image/png' }) as File);
await service.filesSelected(files);
expect(notificationService.addTemporaryNotification).toHaveBeenCalledWith(
`streamChat.You can't uplod more than {{max}} attachments`,
'error',
undefined,
- { max: service.maxNumberOfAttachments }
+ { max: service.maxNumberOfAttachments },
);
expect(uploadAttachmentsSpy).not.toHaveBeenCalled();
@@ -290,7 +290,7 @@ describe('AttachmentService', () => {
`streamChat.You can't uplod more than {{max}} attachments`,
'error',
undefined,
- { max: service.maxNumberOfAttachments }
+ { max: service.maxNumberOfAttachments },
);
expect(uploadAttachmentsSpy).not.toHaveBeenCalled();
@@ -382,7 +382,7 @@ describe('AttachmentService', () => {
{ type: 'video/x-msvideo' },
];
const files = [...imageFiles, ...dataFiles, ...videoFiles];
- let resolver!: Function;
+ let resolver!: (value?: unknown) => any;
uploadAttachmentsSpy.and.returnValue(
new Promise((resolve) => {
resolver = () =>
@@ -414,7 +414,7 @@ describe('AttachmentService', () => {
type: 'video',
},
]);
- })
+ }),
);
void service.filesSelected(files as any as FileList);
tick();
@@ -446,11 +446,11 @@ describe('AttachmentService', () => {
it('should emit the number of uploads in progress', fakeAsync(() => {
const spy = jasmine.createSpy();
service.attachmentUploadInProgressCounter$.subscribe(spy);
- let resolver!: Function;
+ let resolver!: (value?: unknown) => any;
uploadAttachmentsSpy.and.returnValue(
new Promise((resovle) => {
resolver = () => resovle([{}, {}]);
- })
+ }),
);
expect(spy).toHaveBeenCalledWith(0);
@@ -579,7 +579,7 @@ describe('AttachmentService', () => {
const messageService = TestBed.inject(MessageService);
const filterSpy = spyOn(
messageService,
- 'isCustomAttachment'
+ 'isCustomAttachment',
).and.callThrough();
const customAttachment = {
type: 'custom',
@@ -717,7 +717,7 @@ describe('AttachmentService', () => {
const notificationService = TestBed.inject(NotificationService);
const errorNotificationSpy = spyOn(
notificationService,
- 'addTemporaryNotification'
+ 'addTemporaryNotification',
);
appSettings$.next({
file_upload_config: {
@@ -767,7 +767,7 @@ describe('AttachmentService', () => {
const notificationService = TestBed.inject(NotificationService);
const errorNotificationSpy = spyOn(
notificationService,
- 'addTemporaryNotification'
+ 'addTemporaryNotification',
);
appSettings$.next({
file_upload_config: {
@@ -835,7 +835,7 @@ describe('AttachmentService', () => {
expect(result).toBeFalse();
expect(notificationService.addTemporaryNotification).toHaveBeenCalledTimes(
- 2
+ 2,
);
});
diff --git a/projects/stream-chat-angular/src/lib/attachment.service.ts b/projects/stream-chat-angular/src/lib/attachment.service.ts
index 2984b23a..308c53f7 100644
--- a/projects/stream-chat-angular/src/lib/attachment.service.ts
+++ b/projects/stream-chat-angular/src/lib/attachment.service.ts
@@ -34,13 +34,13 @@ export class AttachmentService {
*/
attachmentUploadInProgressCounter$ = new BehaviorSubject(0);
/**
- * Emits the state of the uploads ([`AttachmentUpload[]`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/types.ts)), it adds a state (`success`, `error` or `uploading`) to each file the user selects for upload. It is used by the [`AttachmentPreviewList`](/chat/docs/sdk/angular/v6-rc/components/AttachmentPreviewListComponent/) to display the attachment previews.
+ * Emits the state of the uploads ([`AttachmentUpload[]`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/types.ts)), it adds a state (`success`, `error` or `uploading`) to each file the user selects for upload. It is used by the [`AttachmentPreviewList`](/chat/docs/sdk/angular/v7-rc/components/AttachmentPreviewListComponent/) to display the attachment previews.
*/
attachmentUploads$: Observable;
/**
* You can get and set the list if uploaded custom attachments
*
- * By default the SDK components won't display these, but you can provide your own `customAttachmentPreviewListTemplate$` and `customAttachmentListTemplate$` for the [`CustomTemplatesService`](/chat/docs/sdk/angular/v6-rc/services/CustomTemplatesService/).
+ * By default the SDK components won't display these, but you can provide your own `customAttachmentPreviewListTemplate$` and `customAttachmentListTemplate$` for the [`CustomTemplatesService`](/chat/docs/sdk/angular/v7-rc/services/CustomTemplatesService/).
*/
customAttachments$ = new BehaviorSubject([]);
/**
@@ -54,7 +54,7 @@ export class AttachmentService {
*/
maxNumberOfAttachments = 30;
private attachmentUploadsSubject = new BehaviorSubject(
- []
+ [],
);
private appSettings: AppSettings | undefined;
private attachmentLimitNotificationHide?: () => void;
@@ -63,11 +63,11 @@ export class AttachmentService {
private channelService: ChannelService,
private notificationService: NotificationService,
private chatClientService: ChatClientService,
- private messageService: MessageService
+ private messageService: MessageService,
) {
this.attachmentUploads$ = this.attachmentUploadsSubject.asObservable();
this.chatClientService.appSettings$.subscribe(
- (appSettings) => (this.appSettings = appSettings)
+ (appSettings) => (this.appSettings = appSettings),
);
this.attachmentsCounter$ = combineLatest([
this.attachmentUploads$,
@@ -79,7 +79,7 @@ export class AttachmentService {
customAttachments.length
);
}),
- shareReplay(1)
+ shareReplay(1),
);
this.attachmentsCounter$.subscribe((count) => {
if (count > this.maxNumberOfAttachments) {
@@ -87,7 +87,7 @@ export class AttachmentService {
this.notificationService.addPermanentNotification(
'streamChat.You currently have {{count}} attachments, the maximum is {{max}}',
'error',
- { count, max: this.maxNumberOfAttachments }
+ { count, max: this.maxNumberOfAttachments },
);
} else {
this.attachmentLimitNotificationHide?.();
@@ -204,7 +204,7 @@ export class AttachmentService {
/**
* You can add custom `image`, `video` and `file` attachments using this method.
*
- * Note: If you just want to use your own CDN for file uploads, you don't necessary need this method, you can just specify you own upload function in the [`ChannelService`](/chat/docs/sdk/angular/v6-rc/services/ChannelService/)
+ * Note: If you just want to use your own CDN for file uploads, you don't necessary need this method, you can just specify you own upload function in the [`ChannelService`](/chat/docs/sdk/angular/v7-rc/services/ChannelService/)
* @param attachment
*
* Will set `isCustomAttachment` to `true` on the attachment. This is a non-standard field, other SDKs will ignore this property.
@@ -249,7 +249,7 @@ export class AttachmentService {
} catch (error) {
result = attachmentUploads;
this.notificationService.addTemporaryNotification(
- 'streamChat.Error deleting attachment'
+ 'streamChat.Error deleting attachment',
);
}
} else {
@@ -381,14 +381,14 @@ export class AttachmentService {
this.chatClientService?.chatClient?.logger(
'error',
e instanceof Error ? e.message : `Can't create image preview`,
- { error: e, tag: ['AttachmentService'] }
+ { error: e, tag: ['AttachmentService'] },
);
}
}
private async uploadAttachments(uploads: AttachmentUpload[]) {
this.attachmentUploadInProgressCounter$.next(
- this.attachmentUploadInProgressCounter$.value + 1
+ this.attachmentUploadInProgressCounter$.value + 1,
);
const result = await this.channelService.uploadAttachments(uploads);
const attachmentUploads = this.attachmentUploadsSubject.getValue();
@@ -427,12 +427,12 @@ export class AttachmentService {
errorKey,
'error',
undefined,
- translateParams
+ translateParams,
);
}
});
this.attachmentUploadInProgressCounter$.next(
- this.attachmentUploadInProgressCounter$.value - 1
+ this.attachmentUploadInProgressCounter$.value - 1,
);
this.attachmentUploadsSubject.next([...attachmentUploads]);
}
@@ -454,42 +454,42 @@ export class AttachmentService {
if (isImageFile(f)) {
hasBlockedExtension =
!!this.appSettings?.image_upload_config?.blocked_file_extensions?.find(
- (ext) => f.name.endsWith(ext)
+ (ext) => f.name.endsWith(ext),
);
hasBlockedMimeType =
!!this.appSettings?.image_upload_config?.blocked_mime_types?.find(
- (type) => f.type === type
+ (type) => f.type === type,
);
hasNotAllowedExtension =
!!this.appSettings?.image_upload_config?.allowed_file_extensions
?.length &&
!this.appSettings?.image_upload_config?.allowed_file_extensions?.find(
- (ext) => f.name.endsWith(ext)
+ (ext) => f.name.endsWith(ext),
);
hasNotAllowedMimeType =
!!this.appSettings?.image_upload_config?.allowed_mime_types?.length &&
!this.appSettings?.image_upload_config?.allowed_mime_types?.find(
- (type) => f.type === type
+ (type) => f.type === type,
);
} else {
hasBlockedExtension =
!!this.appSettings?.file_upload_config?.blocked_file_extensions?.find(
- (ext) => f.name.endsWith(ext)
+ (ext) => f.name.endsWith(ext),
);
hasBlockedMimeType =
!!this.appSettings?.file_upload_config?.blocked_mime_types?.find(
- (type) => f.type === type
+ (type) => f.type === type,
);
hasNotAllowedExtension =
!!this.appSettings?.file_upload_config?.allowed_file_extensions
?.length &&
!this.appSettings?.file_upload_config?.allowed_file_extensions?.find(
- (ext) => f.name.endsWith(ext)
+ (ext) => f.name.endsWith(ext),
);
hasNotAllowedMimeType =
!!this.appSettings?.file_upload_config?.allowed_mime_types?.length &&
!this.appSettings?.file_upload_config?.allowed_mime_types?.find(
- (type) => f.type === type
+ (type) => f.type === type,
);
}
if (
@@ -502,7 +502,7 @@ export class AttachmentService {
'streamChat.Error uploading file, extension not supported',
undefined,
undefined,
- { name: f.name, ext: f.type }
+ { name: f.name, ext: f.type },
);
isValid = false;
}
@@ -540,7 +540,7 @@ export class AttachmentService {
'streamChat.Error uploading file, maximum file size exceeded',
undefined,
undefined,
- { name: f.name, limit: limit }
+ { name: f.name, limit: limit },
);
isValid = false;
}
@@ -561,7 +561,7 @@ export class AttachmentService {
`streamChat.You can't uplod more than {{max}} attachments`,
'error',
undefined,
- { max: this.maxNumberOfAttachments }
+ { max: this.maxNumberOfAttachments },
);
return false;
} else {
diff --git a/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.html b/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.html
index 194f2438..f9e5cd69 100644
--- a/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.html
+++ b/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.html
@@ -18,11 +18,11 @@
[location]="location"
[initialsType]="initialsType"
[showOnlineIndicator]="showOnlineIndicator"
- >
+ />
-
+ @if ((imageUrl || fallbackChannelImage) && !isError) {
+
+ } @else {
-
+ }
+ @if (isOnline && showOnlineIndicator) {
+
+ }
diff --git a/projects/stream-chat-angular/src/lib/avatar/avatar.component.spec.ts b/projects/stream-chat-angular/src/lib/avatar/avatar.component.spec.ts
index 2555d3e0..2dccf245 100644
--- a/projects/stream-chat-angular/src/lib/avatar/avatar.component.spec.ts
+++ b/projects/stream-chat-angular/src/lib/avatar/avatar.component.spec.ts
@@ -1,4 +1,4 @@
-import { SimpleChange } from '@angular/core';
+import { ChangeDetectionStrategy, SimpleChange } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Observable, Subject, of } from 'rxjs';
import { ChatClientService, ClientEvent } from '../chat-client.service';
@@ -33,6 +33,10 @@ describe('AvatarComponent', () => {
providers: [
{ provide: ChatClientService, useValue: chatClientServiceMock },
],
+ }).overrideComponent(AvatarComponent, {
+ set: {
+ changeDetection: ChangeDetectionStrategy.Default,
+ },
});
fixture = TestBed.createComponent(AvatarComponent);
component = fixture.componentInstance;
@@ -48,7 +52,7 @@ describe('AvatarComponent', () => {
const img = queryImg();
return new Promise((resolve, reject) => {
if (!img) {
- return reject();
+ return reject(new Error('Image not found'));
}
img.addEventListener('load', () => resolve(undefined));
img.addEventListener('error', () => resolve(undefined));
@@ -230,6 +234,9 @@ describe('AvatarComponent', () => {
expect(queryImg()?.src).toContain('url/to/img');
component.imageUrl = 'channel/img';
+ component.ngOnChanges({
+ imageUrl: {} as SimpleChange,
+ });
fixture.detectChanges();
expect(queryImg()?.src).toContain('channel/img');
diff --git a/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts b/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts
index 5a8969b5..7a8d5d7e 100644
--- a/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts
+++ b/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts
@@ -1,9 +1,9 @@
import {
AfterViewInit,
+ ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
Input,
- NgZone,
OnChanges,
OnDestroy,
OnInit,
@@ -21,10 +21,11 @@ import { AvatarLocation, AvatarType } from '../types';
@Component({
selector: 'stream-avatar',
templateUrl: './avatar.component.html',
- styleUrls: ['./avatar.component.scss'],
+ styleUrl: './avatar.component.scss',
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AvatarComponent
- implements OnChanges, OnInit, OnChanges, AfterViewInit, OnDestroy
+ implements OnChanges, OnInit, AfterViewInit, OnDestroy
{
/**
* An optional name of the image, used for fallback image or image title (if `imageUrl` is provided)
@@ -71,10 +72,27 @@ export class AvatarComponent
constructor(
private chatClientService: ChatClientService,
- private ngZone: NgZone,
- private cdRef: ChangeDetectorRef
+ private cdRef: ChangeDetectorRef,
) {}
+ ngOnChanges(changes: SimpleChanges) {
+ if (changes['channel']) {
+ this.updateIsOnlineSubscription();
+ }
+
+ if (changes['imageUrl'] || changes['channel']) {
+ this.isError = false;
+ }
+
+ if (changes.type || changes.name || changes.channel) {
+ this.setInitials();
+ }
+
+ if (changes.type || changes.channel) {
+ this.setFallbackChannelImage();
+ }
+ }
+
ngOnInit(): void {
this.subscriptions.push(
this.chatClientService.user$.subscribe((u) => {
@@ -86,24 +104,15 @@ export class AvatarComponent
this.updateIsOnlineSubscription();
}
if (this.isViewInited) {
- this.cdRef.detectChanges();
+ this.cdRef.markForCheck();
}
}
- })
+ }),
);
}
- ngOnChanges(changes: SimpleChanges) {
- if (changes['channel']) {
- this.updateIsOnlineSubscription();
- }
- if (changes.type || changes.name || changes.channel) {
- this.setInitials();
- }
-
- if (changes.type || changes.channel) {
- this.setFallbackChannelImage();
- }
+ ngAfterViewInit(): void {
+ this.isViewInited = true;
}
ngOnDestroy(): void {
@@ -159,9 +168,13 @@ export class AvatarComponent
.pipe(filter((e) => e.eventType === 'user.presence.changed'))
.subscribe((event) => {
if (event.event.user?.id === otherMember.id) {
- this.ngZone.run(() => {
- this.isOnline = event.event.user?.online || false;
- });
+ const isOnline = event.event.user?.online || false;
+ if (isOnline !== this.isOnline) {
+ this.isOnline = isOnline;
+ if (this.isViewInited) {
+ this.cdRef.markForCheck();
+ }
+ }
}
});
} else {
@@ -174,13 +187,9 @@ export class AvatarComponent
}
}
- ngAfterViewInit(): void {
- this.isViewInited = true;
- }
-
private getOtherMemberIfOneToOneChannel() {
const otherMembers = Object.values(
- this.channel?.state?.members || {}
+ this.channel?.state?.members || {},
).filter((m) => m.user_id !== this.userId);
if (otherMembers.length === 1) {
return otherMembers[0].user;
diff --git a/projects/stream-chat-angular/src/lib/channel-header/channel-header.component.html b/projects/stream-chat-angular/src/lib/channel-header/channel-header.component.html
index cc7cd2e3..1878600f 100644
--- a/projects/stream-chat-angular/src/lib/channel-header/channel-header.component.html
+++ b/projects/stream-chat-angular/src/lib/channel-header/channel-header.component.html
@@ -1,12 +1,12 @@
+ @if (isImage(attachment)) {
+
-
-
-
+ />
@@ -516,7 +525,7 @@
height: getCarouselImageAttachmentConfiguration(
imagesToView[imagesToViewCurrentIndex],
imgElement
- ).height
+ ).height,
}"
/>
diff --git a/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.spec.ts b/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.spec.ts
index 9efee557..7d3fad3b 100644
--- a/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.spec.ts
+++ b/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.spec.ts
@@ -15,6 +15,7 @@ import { CustomAttachmentListContext, GalleryAttachment } from '../types';
import { AttachmentConfigurationService } from '../attachment-configuration.service';
import {
AfterViewInit,
+ ChangeDetectionStrategy,
Component,
SimpleChange,
TemplateRef,
@@ -63,7 +64,11 @@ describe('AttachmentListComponent', () => {
MessageService,
],
imports: [TranslateModule.forRoot()],
- }).compileComponents();
+ })
+ .overrideComponent(AttachmentListComponent, {
+ set: { changeDetection: ChangeDetectionStrategy.Default },
+ })
+ .compileComponents();
TestBed.inject(StreamI18nService).setTranslation();
});
@@ -76,18 +81,18 @@ describe('AttachmentListComponent', () => {
queryAttachments = () =>
Array.from(
nativeElement.querySelectorAll(
- '[data-testclass="attachment-container"]'
- )
+ '[data-testclass="attachment-container"]',
+ ),
);
queryImages = () =>
Array.from(nativeElement.querySelectorAll('[data-testclass="image"]'));
queryFileLinks = () =>
Array.from(
- nativeElement.querySelectorAll('[data-testclass="file-link"]')
+ nativeElement.querySelectorAll('[data-testclass="file-link"]'),
);
queryFileNames = () =>
Array.from(
- nativeElement.querySelectorAll('[data-testclass="file-title"]')
+ nativeElement.querySelectorAll('[data-testclass="file-title"]'),
);
queryUrlLinks = () =>
Array.from(nativeElement.querySelectorAll('[data-testclass="url-link"]'));
@@ -95,42 +100,42 @@ describe('AttachmentListComponent', () => {
Array.from(nativeElement.querySelectorAll('[data-testclass="card-img"]'));
queryActions = () =>
Array.from(
- nativeElement.querySelectorAll('[data-testclass="attachment-action"]')
+ nativeElement.querySelectorAll('[data-testclass="attachment-action"]'),
);
queryVoiceMessges = () =>
Array.from(
- nativeElement.querySelectorAll('[data-testclass="voice-recording"]')
+ nativeElement.querySelectorAll('[data-testclass="voice-recording"]'),
);
queryImageModal = () =>
fixture.debugElement.query(By.directive(ModalComponent))
?.componentInstance as ModalComponent;
queryImageModalImage = () =>
nativeElement.querySelector(
- '[data-testid="modal-image"]'
+ '[data-testid="modal-image"]',
) as HTMLImageElement;
queryImageModalPrevButton = () =>
nativeElement.querySelector(
- '[data-testid="image-modal-prev"]'
+ '[data-testid="image-modal-prev"]',
) as HTMLButtonElement;
queryImageModalNextButton = () =>
nativeElement.querySelector(
- '[data-testid="image-modal-next"]'
+ '[data-testid="image-modal-next"]',
) as HTMLButtonElement;
queryGallery = () =>
nativeElement.querySelector('[data-testid="image-gallery"]');
queryVideos = () =>
Array.from(
- nativeElement.querySelectorAll('[data-testclass="video-attachment"]')
+ nativeElement.querySelectorAll('[data-testclass="video-attachment"]'),
);
queryVideoContainers = () =>
Array.from(
nativeElement.querySelectorAll(
- '[data-testclass="video-attachment-parent"]'
- )
+ '[data-testclass="video-attachment-parent"]',
+ ),
);
queryScrapedVideos = () =>
Array.from(
- nativeElement.querySelectorAll('[data-testclass=scraped-video]')
+ nativeElement.querySelectorAll('[data-testclass=scraped-video]'),
);
}));
@@ -156,25 +161,25 @@ describe('AttachmentListComponent', () => {
expect(attachments.length).toBe(4);
expect(
- attachments[0].classList.contains('str-chat__message-attachment--image')
+ attachments[0].classList.contains('str-chat__message-attachment--image'),
).toBeTrue();
expect(
- attachments[1].classList.contains('str-chat__message-attachment--video')
+ attachments[1].classList.contains('str-chat__message-attachment--video'),
).toBeTrue();
expect(
attachments[2].classList.contains(
- 'str-chat__message-attachment--voice-recording'
- )
+ 'str-chat__message-attachment--voice-recording',
+ ),
).toBeTrue();
expect(
- attachments[3].classList.contains('str-chat__message-attachment--file')
+ attachments[3].classList.contains('str-chat__message-attachment--file'),
).toBeTrue();
expect(
- attachments[3].classList.contains('str-chat__message-attachment--image')
+ attachments[3].classList.contains('str-chat__message-attachment--image'),
).toBeFalse();
expect(queryImages().length).toBe(1);
@@ -183,7 +188,7 @@ describe('AttachmentListComponent', () => {
expect(queryVoiceMessges().length).toBe(1);
expect(queryActions().length).toBe(0);
expect(
- nativeElement.querySelector('.str-chat__message-attachment-with-actions')
+ nativeElement.querySelector('.str-chat__message-attachment-with-actions'),
).toBeNull();
expect(queryVideos().length).toBe(1);
@@ -256,7 +261,7 @@ describe('AttachmentListComponent', () => {
fixture.detectChanges();
const voiceRecordingComponent = fixture.debugElement.query(
- By.directive(VoiceRecordingComponent)
+ By.directive(VoiceRecordingComponent),
).componentInstance as VoiceRecordingComponent;
expect(voiceRecordingComponent.attachment).toBe(mockVoiceRecording);
@@ -275,10 +280,10 @@ describe('AttachmentListComponent', () => {
expect(orderedAttachments.length).toBe(2);
expect(orderedAttachments[0].type).toBe('gallery');
expect(
- (orderedAttachments[0] as GalleryAttachment).images[0].image_url
+ (orderedAttachments[0] as GalleryAttachment).images[0].image_url,
).toBe('http://url1');
expect(
- (orderedAttachments[0] as GalleryAttachment).images[1].image_url
+ (orderedAttachments[0] as GalleryAttachment).images[1].image_url,
).toBe('http://url2');
});
@@ -296,7 +301,7 @@ describe('AttachmentListComponent', () => {
expect(imageElemnts[0].src).toContain('http://url1');
expect(imageElemnts[1].src).toContain('http://url2');
expect(
- nativeElement.querySelector('.str-chat__gallery-two-rows')
+ nativeElement.querySelector('.str-chat__gallery-two-rows'),
).toBeNull();
component.attachments = [
@@ -316,7 +321,7 @@ describe('AttachmentListComponent', () => {
expect(imageElemnts[2].src).toContain('http://url3');
expect(imageElemnts[3].src).toContain('http://url4');
expect(
- nativeElement.querySelector('.str-chat__gallery-two-rows')
+ nativeElement.querySelector('.str-chat__gallery-two-rows'),
).not.toBeNull();
component.attachments = [
@@ -331,12 +336,12 @@ describe('AttachmentListComponent', () => {
gallery = queryAttachments()[0];
imageElemnts = gallery.querySelectorAll('img');
const lastImage = gallery.querySelector(
- '.str-chat__gallery-placeholder'
+ '.str-chat__gallery-placeholder',
) as HTMLElement;
expect(gallery.querySelectorAll('.str-chat__gallery-image').length).toBe(3);
expect(
- gallery.querySelectorAll('.str-chat__gallery-placeholder').length
+ gallery.querySelectorAll('.str-chat__gallery-placeholder').length,
).toBe(1);
expect(lastImage.style.backgroundImage).toContain('http://url4');
@@ -394,7 +399,7 @@ describe('AttachmentListComponent', () => {
expect(actions[1].innerHTML).toContain('Shuffle');
expect(actions[2].innerHTML).toContain('Cancel');
expect(
- nativeElement.querySelector('.str-chat__message-attachment-with-actions')
+ nativeElement.querySelector('.str-chat__message-attachment-with-actions'),
).not.toBeNull();
});
@@ -452,7 +457,7 @@ describe('AttachmentListComponent', () => {
{
image_action: 'shuffle',
},
- 'parent-id'
+ 'parent-id',
);
});
@@ -514,7 +519,7 @@ describe('AttachmentListComponent', () => {
fixture.detectChanges();
expect(
- nativeElement.querySelector('.str-chat__message-attachment--svg-image')
+ nativeElement.querySelector('.str-chat__message-attachment--svg-image'),
).not.toBeNull();
component.attachments = [
@@ -524,7 +529,7 @@ describe('AttachmentListComponent', () => {
fixture.detectChanges();
expect(
- nativeElement.querySelector('.str-chat__message-attachment--svg-image')
+ nativeElement.querySelector('.str-chat__message-attachment--svg-image'),
).toBeNull();
});
});
@@ -561,14 +566,14 @@ describe('AttachmentListComponent', () => {
expect(
queryAttachments()[0].classList.contains(
- 'str-chat-angular__message-attachment-file-single'
- )
+ 'str-chat-angular__message-attachment-file-single',
+ ),
).toBeTrue();
expect(
queryAttachments()[1].classList.contains(
- 'str-chat-angular__message-attachment-file-single'
- )
+ 'str-chat-angular__message-attachment-file-single',
+ ),
).toBeTrue();
});
@@ -692,7 +697,7 @@ describe('AttachmentListComponent', () => {
expect(
queryAttachments()[0].querySelector('[data-testclass="card-title"]')
- ?.textContent
+ ?.textContent,
).toContain(title);
});
@@ -716,7 +721,7 @@ describe('AttachmentListComponent', () => {
expect(
queryAttachments()[0].querySelector('[data-testclass="card-text"]')
- ?.textContent
+ ?.textContent,
).toContain(text);
});
@@ -760,7 +765,7 @@ describe('AttachmentListComponent', () => {
expect(queryUrlLinks()[0].href).toContain(scrapeUrl);
expect(queryUrlLinks()[0].textContent).toContain(
- component.trimUrl('getstream.io')
+ component.trimUrl('getstream.io'),
);
});
@@ -808,7 +813,7 @@ describe('AttachmentListComponent', () => {
queryGallery()
?.querySelectorAll
+
+
+ }
+ @if (isGallery(attachment)) {
+
-
+
-
-
-
+ }
+ @if (isVideo(attachment)) {
+
-
-
-
-
-
-
-
-
-
-
-
-
-
+}
-
-
-
-
-
-
+ ![]()
+
+ }
+ @if (index === 3 && !isLast) {
+
+ }
+ }
+
+
-
-
-
+ @if (imagesToView && imagesToView.length > 0) {
+
-
-
- 
-
+ [poster]="
+ getVideoAttachmentConfiguration(
+ attachmentContext,
+ videoElement
+ ).thumbUrl
+ "
+ >
-
-
-
-
-
+
+ }
+ @if (
+ isCard(attachment) && getCardAttachmentConfiguration(attachment);
+ as attachmentConfiguration
+ ) {
+
+
+ }
+ @if (
!isGalleryType(attachment) &&
attachment.actions &&
attachment.actions.length > 0
- "
- >
-
-
-
-
-
+
+ }
+ @if (customAttachmentsTemplate) {
+
+ @if (attachmentConfiguration.url) {
+
+ }
+
+
+
+
@@ -525,24 +534,24 @@
data-testid="image-modal-prev"
type="button"
[ngStyle]="{
- visibility: isImageModalPrevButtonVisible ? 'visible' : 'hidden'
+ visibility: isImageModalPrevButtonVisible ? 'visible' : 'hidden',
}"
(click)="stepImages(-1)"
(keyup.enter)="stepImages(-1)"
>
-
-
+}
-
-
-
- 
-
-
-
-
+ />
+ }
+
+@if (
+ (attachmentUploads$ | async)?.length ||
+ (customAttachments.length > 0 && customAttachmentsPreview)
+) {
+
-
-
-
+
+ }
+ }
+ @if (customAttachmentsPreview) {
+
+ @for (
+ attachmentUpload of attachmentUploads$ | async;
+ track attachmentUpload.file
+ ) {
+ @if (attachmentUpload.type === "image") {
-
- {{ attachmentUpload.file.name }}
+ 
+ }
-
-
-
{{ initials }}
-
-
+ @if (channelActionsTemplate) {
+ />
+ }
diff --git a/projects/stream-chat-angular/src/lib/channel-header/channel-header.component.spec.ts b/projects/stream-chat-angular/src/lib/channel-header/channel-header.component.spec.ts
index 0795fd04..8f4b5fee 100644
--- a/projects/stream-chat-angular/src/lib/channel-header/channel-header.component.spec.ts
+++ b/projects/stream-chat-angular/src/lib/channel-header/channel-header.component.spec.ts
@@ -8,6 +8,7 @@ import { ChannelService } from '../channel.service';
import { ChatClientService } from '../chat-client.service';
import { StreamI18nService } from '../stream-i18n.service';
import { ChannelHeaderComponent } from './channel-header.component';
+import { ChangeDetectionStrategy } from '@angular/core';
describe('ChannelHeaderComponent', () => {
let fixture: ComponentFixture
+ />
-
+ }
+ @if (isInitializing$ | async) {
+
-
-
-
-
-
-
-
-
+
+ } @else {
+ @if (isError$ | async) {
+
+
+
+
+
+
+
+
+
+ }
+ + {{ "streamChat.You have no channels currently" | translate }} +
+
+
+
-
- - {{ "streamChat.You have no channels currently" | translate }} -
+- {{ "streamChat.You have no channels currently" | translate }} -
-
-
-
-
-
-
+ />
-
- {{ unreadCount }}
-
+ @if (unreadCount) {
+
+ {{ unreadCount }}
+
+ }
-
diff --git a/projects/stream-chat-angular/src/lib/channel-preview/channel-preview.component.spec.ts b/projects/stream-chat-angular/src/lib/channel-preview/channel-preview.component.spec.ts
index 28c35586..ce32f4dc 100644
--- a/projects/stream-chat-angular/src/lib/channel-preview/channel-preview.component.spec.ts
+++ b/projects/stream-chat-angular/src/lib/channel-preview/channel-preview.component.spec.ts
@@ -17,6 +17,7 @@ import { Observable, Subject, of } from 'rxjs';
import { DateParserService } from '../date-parser.service';
import { IconModule } from '../icon/icon.module';
import { IconPlaceholderComponent } from '../icon/icon-placeholder/icon-placeholder.component';
+import { ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
describe('ChannelPreviewComponent', () => {
let fixture: ComponentFixture
-
-
- {{ latestMessageTime }}
+ }
+ @if (latestMessageStatus) {
+
+
+ }
+ @if (latestMessageTime) {
+
+ {{ latestMessageTime }}
+
+ }
-
-
-
-
-
-
- ;
@@ -20,24 +21,20 @@ export class VoiceRecorderWavebarComponent implements OnDestroy {
constructor(
private amplitudeRecorder: AmplitudeRecorderService,
- private audioRecorder: AudioRecorderService
+ private audioRecorder: AudioRecorderService,
) {
this.amplitudes$ = this.amplitudeRecorder.amplitudes$;
this.formattedDuration = formatDuration(
- this.audioRecorder.durationMs / 1000
+ this.audioRecorder.durationMs / 1000,
);
this.durationComputeInterval = setInterval(() => {
this.isLongerThanOneHour = this.audioRecorder.durationMs / 1000 > 3600;
this.formattedDuration = formatDuration(
- this.audioRecorder.durationMs / 1000
+ this.audioRecorder.durationMs / 1000,
);
}, 1000);
}
- trackByIndex(i: number) {
- return i;
- }
-
ngOnDestroy(): void {
clearInterval(this.durationComputeInterval);
}
diff --git a/projects/stream-chat-angular/src/lib/voice-recorder/voice-recorder.component.html b/projects/stream-chat-angular/src/lib/voice-recorder/voice-recorder.component.html
index fbd238fe..8e10c8a0 100644
--- a/projects/stream-chat-angular/src/lib/voice-recorder/voice-recorder.component.html
+++ b/projects/stream-chat-angular/src/lib/voice-recorder/voice-recorder.component.html
@@ -1,75 +1,70 @@
-(
- '[data-testid="play-button"]'
+ '[data-testid="play-button"]',
)!;
button.click();
@@ -59,7 +63,7 @@ describe('VoiceRecordingComponent', () => {
Object.defineProperty(audioElement, 'paused', { value: false });
fixture.detectChanges();
const button = nativeElement.querySelector(
- '[data-testid="playback-rate-button"]'
+ '[data-testid="playback-rate-button"]',
)!;
button.click();
fixture.detectChanges();
@@ -111,7 +115,7 @@ describe('VoiceRecordingComponent', () => {
});
it('should set error state from play', async () => {
- spyOn(audioElement, 'play').and.callFake(() => Promise.reject());
+ spyOn(audioElement, 'play').and.callFake(() => Promise.reject(new Error()));
expect(component.isError).toBeFalse();
@@ -120,7 +124,7 @@ describe('VoiceRecordingComponent', () => {
expect(component.isError).toBeTrue();
expect(
- nativeElement.querySelector('[data-testid="error-message"]')?.innerHTML
+ nativeElement.querySelector('[data-testid="error-message"]')?.innerHTML,
).toContain('Error playing audio');
});
diff --git a/projects/stream-chat-angular/src/lib/voice-recording/voice-recording.component.ts b/projects/stream-chat-angular/src/lib/voice-recording/voice-recording.component.ts
index e1f70b10..5ec07ad5 100644
--- a/projects/stream-chat-angular/src/lib/voice-recording/voice-recording.component.ts
+++ b/projects/stream-chat-angular/src/lib/voice-recording/voice-recording.component.ts
@@ -1,5 +1,6 @@
import {
AfterViewInit,
+ ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
ElementRef,
@@ -20,6 +21,7 @@ import { formatDuration } from '../format-duration';
selector: 'stream-voice-recording',
templateUrl: './voice-recording.component.html',
styles: [],
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
export class VoiceRecordingComponent implements OnChanges, AfterViewInit {
/**
@@ -34,9 +36,12 @@ export class VoiceRecordingComponent implements OnChanges, AfterViewInit {
@ViewChild('audioElement')
private audioElement?: ElementRef;
- constructor(private ngZone: NgZone, private cdRef: ChangeDetectorRef) {
+ constructor(
+ private ngZone: NgZone,
+ private cdRef: ChangeDetectorRef,
+ ) {
this.secondsElapsedFormatted = this.getFormattedDuration(
- this.secondsElapsed
+ this.secondsElapsed,
);
}
@@ -44,7 +49,7 @@ export class VoiceRecordingComponent implements OnChanges, AfterViewInit {
if (changes.attachment) {
this.fileSize = this.getFileSize();
this.durationFormatted = this.getFormattedDuration(
- this.attachment?.duration
+ this.attachment?.duration,
);
}
}
@@ -60,7 +65,7 @@ export class VoiceRecordingComponent implements OnChanges, AfterViewInit {
this.ngZone.run(() => {
this.secondsElapsed = secondsElapsed;
this.secondsElapsedFormatted = this.getFormattedDuration(
- this.secondsElapsed
+ this.secondsElapsed,
);
this.cdRef.detectChanges();
});
diff --git a/projects/stream-chat-angular/src/lib/wave-form-sampler.ts b/projects/stream-chat-angular/src/lib/wave-form-sampler.ts
index a8035f37..e07ef349 100644
--- a/projects/stream-chat-angular/src/lib/wave-form-sampler.ts
+++ b/projects/stream-chat-angular/src/lib/wave-form-sampler.ts
@@ -1,6 +1,6 @@
export const resampleWaveForm = (
waveFormData: number[],
- sampleSize: number
+ sampleSize: number,
) => {
return waveFormData.length > sampleSize
? downsample(waveFormData, sampleSize)
@@ -26,7 +26,7 @@ const downsample = (waveFormData: number[], sampleSize: number) => {
const nextBucketMean = getNextBucketMean(
waveFormData,
bucketIndex,
- bucketSize
+ bucketSize,
);
const currentBucketStartIndex =
@@ -51,16 +51,16 @@ const downsample = (waveFormData: number[], sampleSize: number) => {
triangleArea = triangleAreaHeron(
triangleBase(
Math.abs(previousBucketRefPoint - currentPointValue),
- countUnitsBetweenAtoB
+ countUnitsBetweenAtoB,
),
triangleBase(
Math.abs(currentPointValue - nextBucketMean),
- countUnitsBetweenBtoC
+ countUnitsBetweenBtoC,
),
triangleBase(
Math.abs(previousBucketRefPoint - nextBucketMean),
- countUnitsBetweenAtoC
- )
+ countUnitsBetweenAtoC,
+ ),
);
if (triangleArea > maxArea) {
@@ -95,7 +95,7 @@ const upsample = (waveFormData: number[], sampleSize: number) => {
const getNextBucketMean = (
data: number[],
currentBucketIndex: number,
- bucketSize: number
+ bucketSize: number,
) => {
const nextBucketStartIndex = Math.floor(currentBucketIndex * bucketSize) + 1;
let nextNextBucketStartIndex =
diff --git a/projects/stream-chat-angular/src/public-api.ts b/projects/stream-chat-angular/src/public-api.ts
index 3b245a07..7cffe2f7 100644
--- a/projects/stream-chat-angular/src/public-api.ts
+++ b/projects/stream-chat-angular/src/public-api.ts
@@ -64,7 +64,6 @@ export * from './lib/voice-recording/voice-recording.component';
export * from './lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component';
export * from './lib/is-on-separate-date';
export * from './lib/message-reactions-selector/message-reactions-selector.component';
-export * from './lib/channel-query';
export * from './lib/virtualized-list.service';
export * from './lib/virtualized-message-list.service';
export * from './lib/user-list/user-list.component';
diff --git a/projects/stream-chat-angular/src/test.ts b/projects/stream-chat-angular/src/test.ts
index 004bd687..19e36fb9 100644
--- a/projects/stream-chat-angular/src/test.ts
+++ b/projects/stream-chat-angular/src/test.ts
@@ -13,5 +13,5 @@ import {
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting(),
- { teardown: { destroyAfterEach: true } }
+ { teardown: { destroyAfterEach: true } },
);
- {{ "streamChat.No chats here yet…" | translate }} -
-
- ;
expect(paginatedListComponent.items).toBe(users);
diff --git a/projects/stream-chat-angular/src/lib/user-list/user-list.component.ts b/projects/stream-chat-angular/src/lib/user-list/user-list.component.ts
index d09ea84c..b907816a 100644
--- a/projects/stream-chat-angular/src/lib/user-list/user-list.component.ts
+++ b/projects/stream-chat-angular/src/lib/user-list/user-list.component.ts
@@ -1,4 +1,10 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import {
+ ChangeDetectionStrategy,
+ Component,
+ EventEmitter,
+ Input,
+ Output,
+} from '@angular/core';
import { UserResponse } from 'stream-chat';
/**
@@ -8,6 +14,7 @@ import { UserResponse } from 'stream-chat';
selector: 'stream-user-list',
templateUrl: './user-list.component.html',
styles: [],
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
export class UserListComponent {
/**
diff --git a/projects/stream-chat-angular/src/lib/virtualized-list.service.spec.ts b/projects/stream-chat-angular/src/lib/virtualized-list.service.spec.ts
index 3122d98e..bdeb32ba 100644
--- a/projects/stream-chat-angular/src/lib/virtualized-list.service.spec.ts
+++ b/projects/stream-chat-angular/src/lib/virtualized-list.service.spec.ts
@@ -55,7 +55,7 @@ describe('VirtualizedListService', () => {
position?: VirtualizedListVerticalItemPosition;
}>({ item: undefined });
scrollPosition$ = new BehaviorSubject(
- 'bottom'
+ 'bottom',
);
service = new TestVirualizedList(allItems$, scrollPosition$, jumpToItem$);
});
@@ -135,7 +135,7 @@ describe('VirtualizedListService', () => {
.fill(() => null)
.map((_, i) => ({ id: `${i}`, value: i }));
service['virtualizedItemsSubject'].next(
- items.slice(10, 10 + Math.round(service.maxItemCount / 2))
+ items.slice(10, 10 + Math.round(service.maxItemCount / 2)),
);
spy.calls.reset();
allItems$.next(items);
@@ -186,7 +186,7 @@ describe('VirtualizedListService', () => {
expect(service.virtualizedItems).toEqual(items);
expect(service.virtualizedItems[0].value).toEqual(122);
expect(
- service.virtualizedItems[service.virtualizedItems.length - 1].value
+ service.virtualizedItems[service.virtualizedItems.length - 1].value,
).toEqual(146);
expect(service.virtualizedItems.length).toBe(25);
@@ -197,7 +197,7 @@ describe('VirtualizedListService', () => {
expect(service.virtualizedItems).toEqual(allItems$.getValue());
expect(service.virtualizedItems[0].value).toEqual(97);
expect(
- service.virtualizedItems[service.virtualizedItems.length - 1].value
+ service.virtualizedItems[service.virtualizedItems.length - 1].value,
).toEqual(146);
expect(service.virtualizedItems.length).toBe(50);
@@ -209,7 +209,7 @@ describe('VirtualizedListService', () => {
expect(service.virtualizedItems).toEqual(allItems$.getValue());
expect(service.virtualizedItems[0].value).toEqual(72);
expect(
- service.virtualizedItems[service.virtualizedItems.length - 1].value
+ service.virtualizedItems[service.virtualizedItems.length - 1].value,
).toEqual(146);
expect(service.virtualizedItems.length).toBe(75);
@@ -221,7 +221,7 @@ describe('VirtualizedListService', () => {
expect(service.virtualizedItems).toEqual(allItems$.getValue());
expect(service.virtualizedItems[0].value).toEqual(47);
expect(
- service.virtualizedItems[service.virtualizedItems.length - 1].value
+ service.virtualizedItems[service.virtualizedItems.length - 1].value,
).toEqual(146);
expect(service.virtualizedItems.length).toBe(100);
@@ -233,14 +233,14 @@ describe('VirtualizedListService', () => {
expect(service.virtualizedItems).toEqual(allItems$.getValue().slice(0, 50));
expect(service.virtualizedItems[0].value).toEqual(22);
expect(
- service.virtualizedItems[service.virtualizedItems.length - 1].value
+ service.virtualizedItems[service.virtualizedItems.length - 1].value,
).toEqual(71);
expect(service.virtualizedItems.length).toBe(50);
//@ts-expect-error white-box test
const querySpy = spyOn(service, 'query').and.callFake(() => {
allItems$.next(
- new Array(147).fill(null).map((_, i) => ({ id: `${i}`, value: i }))
+ new Array(147).fill(null).map((_, i) => ({ id: `${i}`, value: i })),
);
});
scrollPosition$.next('middle');
@@ -250,7 +250,7 @@ describe('VirtualizedListService', () => {
expect(service.virtualizedItems).toEqual(allItems$.getValue().slice(0, 50));
expect(service.virtualizedItems[0].value).toEqual(0);
expect(
- service.virtualizedItems[service.virtualizedItems.length - 1].value
+ service.virtualizedItems[service.virtualizedItems.length - 1].value,
).toEqual(49);
expect(service.virtualizedItems.length).toBe(50);
@@ -261,11 +261,11 @@ describe('VirtualizedListService', () => {
expect(querySpy).not.toHaveBeenCalled();
expect(service.virtualizedItems).toEqual(
- allItems$.getValue().slice(25, 75)
+ allItems$.getValue().slice(25, 75),
);
expect(service.virtualizedItems[0].value).toEqual(25);
expect(
- service.virtualizedItems[service.virtualizedItems.length - 1].value
+ service.virtualizedItems[service.virtualizedItems.length - 1].value,
).toEqual(74);
expect(service.virtualizedItems.length).toBe(50);
@@ -276,11 +276,11 @@ describe('VirtualizedListService', () => {
expect(querySpy).not.toHaveBeenCalled();
expect(service.virtualizedItems).toEqual(
- allItems$.getValue().slice(50, 100)
+ allItems$.getValue().slice(50, 100),
);
expect(service.virtualizedItems[0].value).toEqual(50);
expect(
- service.virtualizedItems[service.virtualizedItems.length - 1].value
+ service.virtualizedItems[service.virtualizedItems.length - 1].value,
).toEqual(99);
expect(service.virtualizedItems.length).toBe(50);
@@ -291,11 +291,11 @@ describe('VirtualizedListService', () => {
expect(querySpy).not.toHaveBeenCalled();
expect(service.virtualizedItems).toEqual(
- allItems$.getValue().slice(75, 125)
+ allItems$.getValue().slice(75, 125),
);
expect(service.virtualizedItems[0].value).toEqual(75);
expect(
- service.virtualizedItems[service.virtualizedItems.length - 1].value
+ service.virtualizedItems[service.virtualizedItems.length - 1].value,
).toEqual(124);
expect(service.virtualizedItems.length).toBe(50);
@@ -310,11 +310,11 @@ describe('VirtualizedListService', () => {
expect(service['query']).toHaveBeenCalledWith('bottom');
expect(service.virtualizedItems).toEqual(
- allItems$.getValue().slice(97, 147)
+ allItems$.getValue().slice(97, 147),
);
expect(service.virtualizedItems[0].value).toEqual(97);
expect(
- service.virtualizedItems[service.virtualizedItems.length - 1].value
+ service.virtualizedItems[service.virtualizedItems.length - 1].value,
).toEqual(146);
expect(service.virtualizedItems.length).toBe(50);
}));
@@ -397,7 +397,7 @@ describe('VirtualizedListService', () => {
allItems$.next([...items, { id: 'new-item-inserted', value: 3422434 }]);
expect(spy).toHaveBeenCalledWith(
- jasmine.arrayContaining([{ id: 'new-item-inserted', value: 3422434 }])
+ jasmine.arrayContaining([{ id: 'new-item-inserted', value: 3422434 }]),
);
});
@@ -417,7 +417,7 @@ describe('VirtualizedListService', () => {
allItems$.next([{ id: 'new-item-inserted', value: 3422434 }, ...items]);
expect(spy).toHaveBeenCalledWith(
- jasmine.arrayContaining([{ id: 'new-item-inserted', value: 3422434 }])
+ jasmine.arrayContaining([{ id: 'new-item-inserted', value: 3422434 }]),
);
});
@@ -436,7 +436,7 @@ describe('VirtualizedListService', () => {
allItems$.next([{ id: 'new-item-inserted', value: 3422434 }, ...items]);
expect(spy).not.toHaveBeenCalledWith(
- jasmine.arrayContaining([{ id: 'new-item-inserted', value: 3422434 }])
+ jasmine.arrayContaining([{ id: 'new-item-inserted', value: 3422434 }]),
);
});
diff --git a/projects/stream-chat-angular/src/lib/virtualized-list.service.ts b/projects/stream-chat-angular/src/lib/virtualized-list.service.ts
index 2103014c..beb70ac4 100644
--- a/projects/stream-chat-angular/src/lib/virtualized-list.service.ts
+++ b/projects/stream-chat-angular/src/lib/virtualized-list.service.ts
@@ -61,7 +61,7 @@ export abstract class VirtualizedListService {
position?: VirtualizedListVerticalItemPosition;
}>,
public readonly pageSize = 25,
- public readonly maxItemCount = pageSize * 4
+ public readonly maxItemCount = pageSize * 4,
) {
this.virtualizedItems$ = this.virtualizedItemsSubject.asObservable();
this.queryState$ = this.queryStateSubject.asObservable();
@@ -82,7 +82,7 @@ export abstract class VirtualizedListService {
1;
}
});
- })
+ }),
);
this.subscriptions.push(
merge(this.allItems$, this.loadFromBuffer$)
@@ -92,7 +92,7 @@ export abstract class VirtualizedListService {
this.allItems$.pipe(take(1)),
this.scrollPosition$.pipe(take(1)),
]);
- })
+ }),
)
.subscribe(([items, scrollPosition]) => {
if (scrollPosition === 'middle') {
@@ -112,12 +112,12 @@ export abstract class VirtualizedListService {
case 'top':
if (currentItems.length > 0) {
const middleIndex = items.findIndex((i) =>
- this.isEqual(i, currentItems[0])
+ this.isEqual(i, currentItems[0]),
);
if (middleIndex !== -1) {
startIndex = Math.max(
0,
- middleIndex - Math.ceil(numberOfItemsAfterRemove / 2)
+ middleIndex - Math.ceil(numberOfItemsAfterRemove / 2),
);
endIndex = startIndex + numberOfItemsAfterRemove;
}
@@ -128,12 +128,14 @@ export abstract class VirtualizedListService {
case 'bottom':
if (currentItems.length > 0) {
const middleIndex = items.findIndex((i) =>
- this.isEqual(i, currentItems[currentItems.length - 1])
+ this.isEqual(i, currentItems[currentItems.length - 1]),
);
if (middleIndex !== -1) {
endIndex = Math.min(
items.length,
- middleIndex + Math.floor(numberOfItemsAfterRemove / 2) + 1
+ middleIndex +
+ Math.floor(numberOfItemsAfterRemove / 2) +
+ 1,
);
startIndex = endIndex - numberOfItemsAfterRemove;
}
@@ -145,7 +147,7 @@ export abstract class VirtualizedListService {
const virtualizedItems = items.slice(startIndex, endIndex);
this.virtualizedItemsSubject.next(virtualizedItems);
}
- })
+ }),
);
this.subscriptions.push(
this.scrollPosition$
@@ -169,7 +171,7 @@ export abstract class VirtualizedListService {
this.loadMoreFromBuffer('bottom');
}
}
- })
+ }),
);
this.subscriptions.push(
this.allItems$
@@ -181,7 +183,7 @@ export abstract class VirtualizedListService {
.pipe(take(1))
.subscribe((s) => (scrollPosition = s));
return scrollPosition === 'middle';
- })
+ }),
)
.subscribe(([prevItems, currentItems]) => {
if (
@@ -194,10 +196,10 @@ export abstract class VirtualizedListService {
const currentLastItem =
this.virtualizedItems[this.virtualizedItems.length - 1];
const prevStartIndex = prevItems.findIndex((i) =>
- this.isEqual(i, currentFirstItem)
+ this.isEqual(i, currentFirstItem),
);
const prevEndIndex = prevItems.findIndex((i) =>
- this.isEqual(i, currentLastItem)
+ this.isEqual(i, currentLastItem),
);
const isStartRemainedSame = currentItems[prevStartIndex]
@@ -215,7 +217,7 @@ export abstract class VirtualizedListService {
if (isStartRemainedSame && isEndRemainedSame) {
const endIndex = hasNewItemsBottom ? undefined : prevEndIndex + 1;
this.virtualizedItemsSubject.next(
- currentItems.slice(prevStartIndex, endIndex)
+ currentItems.slice(prevStartIndex, endIndex),
);
}
@@ -224,12 +226,12 @@ export abstract class VirtualizedListService {
if (!isStartRemainedSame) {
currentStartIndex = currentItems.findIndex((i) =>
- this.isEqual(i, currentFirstItem)
+ this.isEqual(i, currentFirstItem),
);
}
if (!isEndRemainedSame) {
currentEndIndex = currentItems.findIndex((i) =>
- this.isEqual(i, currentLastItem)
+ this.isEqual(i, currentLastItem),
);
}
@@ -241,37 +243,37 @@ export abstract class VirtualizedListService {
if (currentStartIndex !== -1 && currentEndIndex !== -1) {
const startIndex = hasNewItemsTop ? 0 : currentStartIndex;
this.virtualizedItemsSubject.next(
- currentItems.slice(startIndex, currentEndIndex + 1)
+ currentItems.slice(startIndex, currentEndIndex + 1),
);
} else {
if (currentStartIndex === -1 && currentEndIndex !== -1) {
currentStartIndex = Math.max(
0,
- currentEndIndex - (prevEndIndex - prevStartIndex)
+ currentEndIndex - (prevEndIndex - prevStartIndex),
);
}
if (currentEndIndex === -1 && currentStartIndex !== -1) {
currentEndIndex = Math.min(
currentItems.length - 1,
- currentStartIndex + (prevEndIndex - prevStartIndex)
+ currentStartIndex + (prevEndIndex - prevStartIndex),
);
}
this.virtualizedItemsSubject.next(
- currentItems.slice(currentStartIndex, currentEndIndex + 1)
+ currentItems.slice(currentStartIndex, currentEndIndex + 1),
);
}
}
- })
+ }),
);
if (this.jumpToItem$) {
this.subscriptions.push(
this.jumpToItem$
.pipe(
switchMap((jumpToItem) =>
- combineLatest([this.allItems$.pipe(take(1)), of(jumpToItem)])
- )
+ combineLatest([this.allItems$.pipe(take(1)), of(jumpToItem)]),
+ ),
)
.subscribe(([allItems, jumpToItem]) => {
if (jumpToItem.item) {
@@ -280,7 +282,7 @@ export abstract class VirtualizedListService {
} else {
const itemIndex = allItems.findIndex((i) =>
// @ts-expect-error TODO: do we know a better typing here?
- this.isEqual(i, jumpToItem.item)
+ this.isEqual(i, jumpToItem.item),
);
if (itemIndex === -1) {
return;
@@ -298,14 +300,14 @@ export abstract class VirtualizedListService {
startIndex = itemIndex;
endIndex = Math.min(
allItems.length,
- startIndex + numberOfItemsAfterRemove
+ startIndex + numberOfItemsAfterRemove,
);
break;
case 'bottom':
endIndex = itemIndex + 1;
startIndex = Math.max(
0,
- endIndex - numberOfItemsAfterRemove
+ endIndex - numberOfItemsAfterRemove,
);
break;
case 'middle': {
@@ -339,12 +341,12 @@ export abstract class VirtualizedListService {
}
this.virtualizedItemsSubject.next(
- allItems.slice(startIndex, endIndex)
+ allItems.slice(startIndex, endIndex),
);
}
}
}
- })
+ }),
);
}
}
@@ -380,6 +382,6 @@ export abstract class VirtualizedListService {
protected abstract isEqual: (t1: T, t2: T) => boolean;
protected abstract query: (
- direction: VirtualizedListQueryDirection
+ direction: VirtualizedListQueryDirection,
) => Promise;
}
diff --git a/projects/stream-chat-angular/src/lib/virtualized-message-list.service.spec.ts b/projects/stream-chat-angular/src/lib/virtualized-message-list.service.spec.ts
index 31b862d3..a9b5eb17 100644
--- a/projects/stream-chat-angular/src/lib/virtualized-message-list.service.spec.ts
+++ b/projects/stream-chat-angular/src/lib/virtualized-message-list.service.spec.ts
@@ -16,13 +16,13 @@ describe('VirtualizedMessageListService', () => {
describe('main mode', () => {
beforeEach(() => {
scrollPosition$ = new BehaviorSubject(
- 'middle'
+ 'middle',
);
channelService = mockChannelService();
service = new VirtualizedMessageListService(
'main',
scrollPosition$,
- channelService as unknown as ChannelService
+ channelService as unknown as ChannelService,
);
});
@@ -113,13 +113,13 @@ describe('VirtualizedMessageListService', () => {
describe('thread mode', () => {
beforeEach(() => {
scrollPosition$ = new BehaviorSubject(
- 'middle'
+ 'middle',
);
channelService = mockChannelService();
service = new VirtualizedMessageListService(
'thread',
scrollPosition$,
- channelService as unknown as ChannelService
+ channelService as unknown as ChannelService,
);
});
@@ -129,13 +129,13 @@ describe('VirtualizedMessageListService', () => {
void service['query']('top');
expect(channelService['loadMoreThreadReplies']).toHaveBeenCalledWith(
- 'older'
+ 'older',
);
void service['query']('bottom');
expect(channelService['loadMoreThreadReplies']).toHaveBeenCalledWith(
- 'newer'
+ 'newer',
);
});
diff --git a/projects/stream-chat-angular/src/lib/virtualized-message-list.service.ts b/projects/stream-chat-angular/src/lib/virtualized-message-list.service.ts
index a3913657..5e5bfb7e 100644
--- a/projects/stream-chat-angular/src/lib/virtualized-message-list.service.ts
+++ b/projects/stream-chat-angular/src/lib/virtualized-message-list.service.ts
@@ -15,7 +15,7 @@ export class VirtualizedMessageListService extends VirtualizedListService,
- private channelService: ChannelService
+ private channelService: ChannelService,
) {
const jumpToMessage$ = channelService.jumpToMessage$.pipe(
map<
@@ -61,7 +61,7 @@ export class VirtualizedMessageListService extends VirtualizedListService
Math.sqrt(
- values.reduce((acc, val) => acc + Math.pow(val, 2), 0) / values.length
+ values.reduce((acc, val) => acc + Math.pow(val, 2), 0) / values.length,
);
/**
diff --git a/projects/stream-chat-angular/src/lib/voice-recorder/audio-recorder.service.ts b/projects/stream-chat-angular/src/lib/voice-recorder/audio-recorder.service.ts
index ebd88df4..d8806f36 100644
--- a/projects/stream-chat-angular/src/lib/voice-recorder/audio-recorder.service.ts
+++ b/projects/stream-chat-angular/src/lib/voice-recorder/audio-recorder.service.ts
@@ -29,7 +29,7 @@ export class AudioRecorderService extends MultimediaRecorder<
notificationService: NotificationService,
chatService: ChatClientService,
transcoder: TranscoderService,
- private amplitudeRecorder: AmplitudeRecorderService
+ private amplitudeRecorder: AmplitudeRecorderService,
) {
super(notificationService, chatService, transcoder);
}
@@ -37,7 +37,7 @@ export class AudioRecorderService extends MultimediaRecorder<
protected enrichWithExtraData() {
const waveformData = resampleWaveForm(
this.amplitudeRecorder.amplitudes,
- this.amplitudeRecorder.config.sampleCount
+ this.amplitudeRecorder.config.sampleCount,
);
return { waveform_data: waveformData };
diff --git a/projects/stream-chat-angular/src/lib/voice-recorder/media-recorder.ts b/projects/stream-chat-angular/src/lib/voice-recorder/media-recorder.ts
index b81afca2..61b39c6a 100644
--- a/projects/stream-chat-angular/src/lib/voice-recorder/media-recorder.ts
+++ b/projects/stream-chat-angular/src/lib/voice-recorder/media-recorder.ts
@@ -40,13 +40,13 @@ export abstract class MultimediaRecorder {
protected startTime: number | undefined;
protected recordedChunkDurations: number[] = [];
private recordingStateSubject = new BehaviorSubject(
- MediaRecordingState.STOPPED
+ MediaRecordingState.STOPPED,
);
constructor(
protected notificationService: NotificationService,
protected chatService: ChatClientService,
- private transcoder: TranscoderService
+ private transcoder: TranscoderService,
) {
this.recording$ = this.recordingSubject.asObservable();
this.recordingState$ = this.recordingStateSubject.asObservable();
@@ -77,7 +77,7 @@ export abstract class MultimediaRecorder {
return `${
this.mediaType
}_recording_${new Date().toISOString()}.${getExtensionFromMimeType(
- mimeType
+ mimeType,
)}`; // extension needed so that desktop Safari can play the asset
}
};
@@ -123,7 +123,7 @@ export abstract class MultimediaRecorder {
this.logError((e as ErrorEvent).error);
this.recordingStateSubject.next(MediaRecordingState.ERROR);
this.notificationService.addTemporaryNotification(
- 'streamChat.An error has occurred during recording'
+ 'streamChat.An error has occurred during recording',
);
void this.stop({ cancel: true });
};
@@ -140,7 +140,7 @@ export abstract class MultimediaRecorder {
async start() {
if (
[MediaRecordingState.RECORDING, MediaRecordingState.PAUSED].includes(
- this.recordingStateSubject.value
+ this.recordingStateSubject.value,
)
) {
return;
@@ -151,13 +151,13 @@ export abstract class MultimediaRecorder {
// account for requirement on iOS as per this bug report: https://bugs.webkit.org/show_bug.cgi?id=252303
if (!navigator.mediaDevices) {
console.warn(
- `[Stream Chat] Media devices API missing, it's possible your app is not served from a secure context (https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts)`
+ `[Stream Chat] Media devices API missing, it's possible your app is not served from a secure context (https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts)`,
);
const error = new Error('Media recording is not supported');
this.logError(error);
this.recordingStateSubject.next(MediaRecordingState.ERROR);
this.notificationService.addTemporaryNotification(
- `streamChat.Media recording not supported`
+ `streamChat.Media recording not supported`,
);
return;
}
@@ -168,7 +168,7 @@ export abstract class MultimediaRecorder {
this.mediaRecorder.addEventListener(
'dataavailable',
- this.handleDataavailableEvent
+ this.handleDataavailableEvent,
);
this.mediaRecorder.addEventListener('error', this.handleErrorEvent);
@@ -184,7 +184,7 @@ export abstract class MultimediaRecorder {
this.notificationService.addTemporaryNotification(
isNotAllowed
? `streamChat.Please grant permission to use microhpone`
- : `streamChat.Error starting recording`
+ : `streamChat.Error starting recording`,
);
}
}
@@ -234,7 +234,7 @@ export abstract class MultimediaRecorder {
}
} catch {
this.notificationService.addTemporaryNotification(
- 'streamChat.An error has occurred during recording'
+ 'streamChat.An error has occurred during recording',
);
} finally {
this.recordedChunkDurations = [];
@@ -242,7 +242,7 @@ export abstract class MultimediaRecorder {
this.mediaRecorder?.removeEventListener(
'dataavailable',
- this.handleDataavailableEvent
+ this.handleDataavailableEvent,
);
this.mediaRecorder?.removeEventListener('error', this.handleErrorEvent);
if (this.mediaRecorder?.stream?.active) {
diff --git a/projects/stream-chat-angular/src/lib/voice-recorder/mp3-transcoder.ts b/projects/stream-chat-angular/src/lib/voice-recorder/mp3-transcoder.ts
index 0692efbc..2f6733c8 100644
--- a/projects/stream-chat-angular/src/lib/voice-recorder/mp3-transcoder.ts
+++ b/projects/stream-chat-angular/src/lib/voice-recorder/mp3-transcoder.ts
@@ -10,7 +10,7 @@ const readFileAsArrayBuffer = (blob: Blob): Promise =>
};
blobReader.onerror = () => {
- reject(blobReader.error);
+ reject(new Error(blobReader.error?.message));
};
blobReader.readAsArrayBuffer(blob);
@@ -29,7 +29,7 @@ const renderAudio = async (audioBuffer: AudioBuffer, sampleRate: number) => {
const offlineAudioCtx = new OfflineAudioContext(
audioBuffer.numberOfChannels,
audioBuffer.duration * sampleRate,
- sampleRate
+ sampleRate,
);
const source = offlineAudioCtx.createBufferSource();
source.buffer = audioBuffer;
@@ -53,7 +53,7 @@ const float32ArrayToInt16Array = (float32Arr: Float32Array) => {
const splitDataByChannel = (audioBuffer: AudioBuffer) =>
Array.from({ length: audioBuffer.numberOfChannels }, (_, i) =>
- audioBuffer.getChannelData(i)
+ audioBuffer.getChannelData(i),
).map(float32ArrayToInt16Array);
/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-argument */
@@ -64,7 +64,7 @@ export async function encodeWebmToMp3(blob: Blob, lameJs: any) {
const mp3Encoder = new lameJs.Mp3Encoder(
channelCount,
SAMPLE_RATE,
- ENCODING_BIT_RATE
+ ENCODING_BIT_RATE,
);
const dataBuffer: Int8Array[] = [];
@@ -75,12 +75,12 @@ export async function encodeWebmToMp3(blob: Blob, lameJs: any) {
i += COUNT_SAMPLES_PER_ENCODED_BLOCK
) {
const [leftChannelBlock, rightChannelBlock] = dataByChannel.map((channel) =>
- channel.subarray(i, i + COUNT_SAMPLES_PER_ENCODED_BLOCK)
+ channel.subarray(i, i + COUNT_SAMPLES_PER_ENCODED_BLOCK),
);
dataBuffer.push(
new Int8Array(
- mp3Encoder.encodeBuffer(leftChannelBlock, rightChannelBlock)
- )
+ mp3Encoder.encodeBuffer(leftChannelBlock, rightChannelBlock),
+ ),
);
remaining -= COUNT_SAMPLES_PER_ENCODED_BLOCK;
}
diff --git a/projects/stream-chat-angular/src/lib/voice-recorder/transcoder.service.ts b/projects/stream-chat-angular/src/lib/voice-recorder/transcoder.service.ts
index e50b6ce7..149c42b1 100644
--- a/projects/stream-chat-angular/src/lib/voice-recorder/transcoder.service.ts
+++ b/projects/stream-chat-angular/src/lib/voice-recorder/transcoder.service.ts
@@ -9,9 +9,9 @@ export type TranscodeParams = TranscoderConfig & {
blob: Blob;
};
-const WAV_HEADER_LENGTH_BYTES = 44 as const;
-const BYTES_PER_SAMPLE = 2 as const;
-const RIFF_FILE_MAX_BYTES = 4294967295 as const;
+const WAV_HEADER_LENGTH_BYTES = 44;
+const BYTES_PER_SAMPLE = 2;
+const RIFF_FILE_MAX_BYTES = 4294967295;
const HEADER = {
AUDIO_FORMAT: { offset: 20, value: 1 }, // PCM = 1
@@ -69,7 +69,7 @@ export class TranscoderService {
}
const audioBuffer = await this.renderAudio(
await this.toAudioBuffer(blob),
- this.config.sampleRate
+ this.config.sampleRate,
);
const numberOfSamples = audioBuffer.duration * this.config.sampleRate;
const fileSizeBytes =
@@ -93,7 +93,7 @@ export class TranscoderService {
const offlineAudioCtx = new OfflineAudioContext(
audioBuffer.numberOfChannels,
audioBuffer.duration * sampleRate,
- sampleRate
+ sampleRate,
);
const source = offlineAudioCtx.createBufferSource();
source.buffer = audioBuffer;
@@ -128,7 +128,7 @@ export class TranscoderService {
float32Value < 0
? Math.max(-1, float32Value) * 32768
: Math.min(1, float32Value) * 32767,
- true
+ true,
);
writeOffset += channelCount * BYTES_PER_SAMPLE;
});
@@ -150,14 +150,14 @@ export class TranscoderService {
*/
const dataChunkSize = Math.min(
dataView.byteLength - WAV_HEADER_LENGTH_BYTES,
- RIFF_FILE_MAX_BYTES - WAV_HEADER_LENGTH_BYTES
+ RIFF_FILE_MAX_BYTES - WAV_HEADER_LENGTH_BYTES,
);
dataView.setUint32(HEADER.CHUNK_ID.offset, HEADER.CHUNK_ID.value); // "RIFF"
dataView.setUint32(
HEADER.CHUNK_SIZE.offset,
arrayBuffer.byteLength - 8,
- true
+ true,
); // adjustment for the first two headers - chunk id + file size
dataView.setUint32(HEADER.FILE_FORMAT.offset, HEADER.FILE_FORMAT.value); // "WAVE"
@@ -165,12 +165,12 @@ export class TranscoderService {
dataView.setUint32(
HEADER.SUBCHUNK1_SIZE.offset,
HEADER.SUBCHUNK1_SIZE.value,
- true
+ true,
);
dataView.setUint16(
HEADER.AUDIO_FORMAT.offset,
HEADER.AUDIO_FORMAT.value,
- true
+ true,
);
dataView.setUint16(HEADER.CHANNEL_COUNT.offset, channelCount, true);
dataView.setUint32(HEADER.SAMPLE_RATE.offset, sampleRate, true);
@@ -179,7 +179,7 @@ export class TranscoderService {
dataView.setUint16(
HEADER.BITS_PER_SAMPLE.offset,
HEADER.BITS_PER_SAMPLE.value,
- true
+ true,
);
dataView.setUint32(HEADER.SUBCHUNK2_ID.offset, HEADER.SUBCHUNK2_ID.value); // "data"
@@ -188,6 +188,6 @@ export class TranscoderService {
protected splitDataByChannel = (audioBuffer: AudioBuffer) =>
Array.from({ length: audioBuffer.numberOfChannels }, (_, i) =>
- audioBuffer.getChannelData(i)
+ audioBuffer.getChannelData(i),
);
}
diff --git a/projects/stream-chat-angular/src/lib/voice-recorder/voice-recorder-wavebar/voice-recorder-wavebar.component.html b/projects/stream-chat-angular/src/lib/voice-recorder/voice-recorder-wavebar/voice-recorder-wavebar.component.html
index 5b2da986..cf46706a 100644
--- a/projects/stream-chat-angular/src/lib/voice-recorder/voice-recorder-wavebar/voice-recorder-wavebar.component.html
+++ b/projects/stream-chat-angular/src/lib/voice-recorder/voice-recorder-wavebar/voice-recorder-wavebar.component.html
@@ -6,12 +6,13 @@
+
+
+
-
+
+ @if (isActiveThread$ | async) {
+
-
-
diff --git a/projects/stream-chat-angular/src/lib/thread/thread.component.spec.ts b/projects/stream-chat-angular/src/lib/thread/thread.component.spec.ts
index 74c975ec..baa53345 100644
--- a/projects/stream-chat-angular/src/lib/thread/thread.component.spec.ts
+++ b/projects/stream-chat-angular/src/lib/thread/thread.component.spec.ts
@@ -10,6 +10,7 @@ import {
MockChannelService,
mockMessage,
} from '../mocks';
+import { ChangeDetectionStrategy } from '@angular/core';
import { ThreadComponent } from './thread.component';
@@ -31,7 +32,11 @@ describe('ThreadComponent', () => {
useValue: { chatClient: { user: { id: 'userid' } } },
},
],
- }).compileComponents();
+ })
+ .overrideComponent(ThreadComponent, {
+ set: { changeDetection: ChangeDetectionStrategy.Default },
+ })
+ .compileComponents();
});
beforeEach(() => {
@@ -48,8 +53,8 @@ describe('ThreadComponent', () => {
it('should display channel name', () => {
expect(
(fixture.nativeElement as HTMLElement).querySelector(
- '[data-testid="channel-name"]'
- )!.innerHTML
+ '[data-testid="channel-name"]',
+ )!.innerHTML,
).toContain(channel.data!.name!);
});
@@ -63,7 +68,7 @@ describe('ThreadComponent', () => {
fixture.detectChanges();
expect(channelServiceMock.setAsActiveParentMessage).toHaveBeenCalledWith(
- undefined
+ undefined,
);
});
});
diff --git a/projects/stream-chat-angular/src/lib/thread/thread.component.ts b/projects/stream-chat-angular/src/lib/thread/thread.component.ts
index ed540463..acf42b45 100644
--- a/projects/stream-chat-angular/src/lib/thread/thread.component.ts
+++ b/projects/stream-chat-angular/src/lib/thread/thread.component.ts
@@ -1,42 +1,67 @@
-import { Component, HostBinding, OnDestroy } from '@angular/core';
+import {
+ AfterViewInit,
+ ChangeDetectionStrategy,
+ ChangeDetectorRef,
+ Component,
+ HostBinding,
+ OnDestroy,
+ OnInit,
+} from '@angular/core';
import { Subscription } from 'rxjs';
-import { Channel } from 'stream-chat';
import { ChatClientService } from '../chat-client.service';
import { ChannelService } from '../channel.service';
import { CustomTemplatesService } from '../custom-templates.service';
import { getChannelDisplayText } from '../get-channel-display-text';
import { StreamMessage, ThreadHeaderContext } from '../types';
+import { Channel } from 'stream-chat';
/**
- * The `Thread` component represents a [message thread](/chat/docs/javascript/threads/), it is a container component that displays a thread with a header, [`MessageList`](/chat/docs/sdk/angular/v6-rc/components/MessageListComponent) and [`MessageInput`](/chat/docs/sdk/angular/v6-rc/components/MessageInputComponent/) components.
+ * The `Thread` component represents a [message thread](/chat/docs/javascript/threads/), it is a container component that displays a thread with a header, [`MessageList`](/chat/docs/sdk/angular/v7-rc/components/MessageListComponent) and [`MessageInput`](/chat/docs/sdk/angular/v7-rc/components/MessageInputComponent/) components.
*/
@Component({
selector: 'stream-thread',
templateUrl: './thread.component.html',
styles: [],
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
-export class ThreadComponent implements OnDestroy {
+export class ThreadComponent implements OnInit, AfterViewInit, OnDestroy {
@HostBinding('class') private class = 'str-chat__thread';
parentMessage: StreamMessage | undefined;
- channel: Channel | undefined;
+ channelName = '';
private subscriptions: Subscription[] = [];
+ private isViewInitialized = false;
constructor(
public customTemplatesService: CustomTemplatesService,
private channelService: ChannelService,
- private chatClientService: ChatClientService
- ) {
+ private chatClientService: ChatClientService,
+ private cdRef: ChangeDetectorRef,
+ ) {}
+
+ ngOnInit(): void {
this.subscriptions.push(
- this.channelService.activeParentMessage$.subscribe(
- (parentMessage) => (this.parentMessage = parentMessage)
- )
+ this.channelService.activeParentMessage$.subscribe((parentMessage) => {
+ this.parentMessage = parentMessage;
+ if (this.isViewInitialized) {
+ this.cdRef.markForCheck();
+ }
+ }),
);
this.subscriptions.push(
- this.channelService.activeChannel$.subscribe(
- (channel) => (this.channel = channel)
- )
+ this.channelService.activeChannel$.subscribe((channel) => {
+ const channelName = this.getChannelName(channel);
+ if (channelName !== this.channelName) {
+ this.channelName = channelName;
+ if (this.isViewInitialized) {
+ this.cdRef.markForCheck();
+ }
+ }
+ }),
);
}
+ ngAfterViewInit(): void {
+ this.isViewInitialized = true;
+ }
ngOnDestroy(): void {
this.subscriptions.forEach((s) => s.unsubscribe());
@@ -53,13 +78,13 @@ export class ThreadComponent implements OnDestroy {
void this.channelService.setAsActiveParentMessage(undefined);
}
- get channelName() {
- if (!this.channel || !this.chatClientService.chatClient.user) {
+ getChannelName(channel: Channel | undefined) {
+ if (!channel || !this.chatClientService.chatClient.user) {
return '';
}
- return getChannelDisplayText(
- this.channel,
- this.chatClientService.chatClient.user
+ return (
+ getChannelDisplayText(channel, this.chatClientService.chatClient.user) ??
+ ''
);
}
}
diff --git a/projects/stream-chat-angular/src/lib/types.ts b/projects/stream-chat-angular/src/lib/types.ts
index f67fcedc..49e2803e 100644
--- a/projects/stream-chat-angular/src/lib/types.ts
+++ b/projects/stream-chat-angular/src/lib/types.ts
@@ -4,7 +4,10 @@ import type {
Attachment,
Channel,
ChannelFilters,
+ ChannelManagerEventHandlerOverrides,
ChannelMemberResponse,
+ ChannelOptions,
+ ChannelSort,
CommandResponse,
CustomMessageData,
FormatMessageResponse,
@@ -193,7 +196,7 @@ export type MessageActionHandlerExtraParams = {
export type MessageActionHandler = (
message: StreamMessage,
- params: MessageActionHandlerExtraParams
+ params: MessageActionHandlerExtraParams,
) => void;
export type MessageActionBoxItemContext = {
@@ -209,7 +212,7 @@ export type MessageReactionActionItem = {
isVisible: (
enabledActions: string[],
isMine: boolean,
- message: StreamMessage
+ message: StreamMessage,
) => boolean;
};
@@ -218,7 +221,7 @@ type MessageActionItemBase = {
isVisible: (
enabledActions: string[],
isMine: boolean,
- message: StreamMessage
+ message: StreamMessage,
) => boolean;
actionHandler: MessageActionHandler;
};
@@ -413,7 +416,7 @@ export type MediaRecording = {
};
export type CustomAttachmentPreviewListContext = {
- attachmentService: AttachmentService;
+ service: AttachmentService;
};
export type ThreadReplyButtonContext = {
@@ -470,3 +473,21 @@ export type GalleryAttachment = {
type: 'gallery';
images: Attachment[];
};
+
+// TODO: add ChannelManagerOptions once it's stable
+export type ChannelServiceOptions = {
+ shouldSetActiveChannel?: boolean;
+ eventHandlerOverrides?: ChannelManagerEventHandlerOverrides;
+};
+
+export type ChannelQueryConfig = {
+ filters: ChannelFilters;
+ sort: ChannelSort;
+ options: ChannelOptions;
+};
+
+export type ChannelQueryConfigInput = {
+ filters: ChannelFilters;
+ sort?: ChannelSort;
+ options?: ChannelOptions;
+};
diff --git a/projects/stream-chat-angular/src/lib/user-list/user-list.component.html b/projects/stream-chat-angular/src/lib/user-list/user-list.component.html
index 77671064..4d88d081 100644
--- a/projects/stream-chat-angular/src/lib/user-list/user-list.component.html
+++ b/projects/stream-chat-angular/src/lib/user-list/user-list.component.html
@@ -15,7 +15,7 @@
[imageUrl]="user.image"
[name]="user.name"
[user]="user"
- >
+ />
{{
user.name
}}
diff --git a/projects/stream-chat-angular/src/lib/user-list/user-list.component.spec.ts b/projects/stream-chat-angular/src/lib/user-list/user-list.component.spec.ts
index 75372af1..c6c49fe0 100644
--- a/projects/stream-chat-angular/src/lib/user-list/user-list.component.spec.ts
+++ b/projects/stream-chat-angular/src/lib/user-list/user-list.component.spec.ts
@@ -1,4 +1,5 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ChangeDetectionStrategy } from '@angular/core';
import { UserListComponent } from './user-list.component';
import { PaginatedListComponent } from '../paginated-list/paginated-list.component';
@@ -16,7 +17,11 @@ describe('UserListComponent', () => {
await TestBed.configureTestingModule({
imports: [StreamAvatarModule, TranslateModule.forRoot()],
declarations: [UserListComponent, PaginatedListComponent],
- }).compileComponents();
+ })
+ .overrideComponent(UserListComponent, {
+ set: { changeDetection: ChangeDetectionStrategy.Default },
+ })
+ .compileComponents();
fixture = TestBed.createComponent(UserListComponent);
component = fixture.componentInstance;
@@ -35,7 +40,7 @@ describe('UserListComponent', () => {
fixture.detectChanges();
const userNames = (fixture.nativeElement as HTMLElement).querySelectorAll(
- '[data-testclass="username"]'
+ '[data-testclass="username"]',
);
expect(userNames.length).toBe(component.users.length);
@@ -71,7 +76,7 @@ describe('UserListComponent', () => {
fixture.detectChanges();
const paginatedListComponent = fixture.debugElement.query(
- By.directive(PaginatedListComponent)
+ By.directive(PaginatedListComponent),
).componentInstance as PaginatedListComponent
-
- implements AfterViewInit {
/**
@@ -40,7 +42,9 @@ export class PaginatedListComponent implements AfterViewInit {
* @returns the track by id
*/
@Input() trackBy: TrackByFunction = (i) => i;
- @ContentChild(TemplateRef) itemTempalteRef: TemplateRef | undefined;
+ @ContentChild(TemplateRef) itemTempalteRef:
+ | TemplateRef<{ item: T; index: number }>
+ | undefined;
/**
* The component will signal via this output when more items should be fetched
*
@@ -52,12 +56,15 @@ export class PaginatedListComponent implements AfterViewInit {
@ViewChild('container')
private scrollContainer!: ElementRef;
- constructor(private ngZone: NgZone, private cdRef: ChangeDetectorRef) {}
+ constructor(
+ private ngZone: NgZone,
+ private cdRef: ChangeDetectorRef,
+ ) {}
ngAfterViewInit(): void {
this.ngZone.runOutsideAngular(() => {
this.scrollContainer?.nativeElement?.addEventListener('scroll', () =>
- this.scrolled()
+ this.scrolled(),
);
});
}
diff --git a/projects/stream-chat-angular/src/lib/parse-date.ts b/projects/stream-chat-angular/src/lib/parse-date.ts
index fcfd7bad..73a1505b 100644
--- a/projects/stream-chat-angular/src/lib/parse-date.ts
+++ b/projects/stream-chat-angular/src/lib/parse-date.ts
@@ -7,7 +7,7 @@ Dayjs.extend(relativeTime);
export const parseDate = (
date: Date,
- format: 'date' | 'date-time' | 'time' = 'date-time'
+ format: 'date' | 'date-time' | 'time' = 'date-time',
) => {
const parsedTime = Dayjs(date);
diff --git a/projects/stream-chat-angular/src/lib/stream-i18n.service.spec.ts b/projects/stream-chat-angular/src/lib/stream-i18n.service.spec.ts
index 09c0f4b2..5fdbd798 100644
--- a/projects/stream-chat-angular/src/lib/stream-i18n.service.spec.ts
+++ b/projects/stream-chat-angular/src/lib/stream-i18n.service.spec.ts
@@ -26,7 +26,7 @@ describe('I18nService', () => {
expect(translateService['setTranslation']).toHaveBeenCalledWith(
'en',
en,
- true
+ true,
);
});
@@ -39,7 +39,7 @@ describe('I18nService', () => {
expect(translateService['setTranslation']).toHaveBeenCalledWith(
'en',
{ streamChat: jasmine.objectContaining(translationOverride) },
- true
+ true,
);
});
});
diff --git a/projects/stream-chat-angular/src/lib/stream-i18n.service.ts b/projects/stream-chat-angular/src/lib/stream-i18n.service.ts
index 3828f1ed..c029ff3e 100644
--- a/projects/stream-chat-angular/src/lib/stream-i18n.service.ts
+++ b/projects/stream-chat-angular/src/lib/stream-i18n.service.ts
@@ -3,7 +3,7 @@ import { TranslateService } from '@ngx-translate/core';
import { en } from '../assets/i18n/en';
/**
- * The `StreamI18nService` can be used to customize the labels of the chat UI. Our [translation guide](/chat/docs/sdk/angular/v6-rc/concepts/translation/) covers this topic in detail.
+ * The `StreamI18nService` can be used to customize the labels of the chat UI. Our [translation guide](/chat/docs/sdk/angular/v7-rc/concepts/translation/) covers this topic in detail.
*/
@Injectable({
providedIn: 'root',
@@ -23,7 +23,7 @@ export class StreamI18nService {
this.translteService.setTranslation(
lang,
{ streamChat: { ...en.streamChat, ...overrides } },
- true
+ true,
);
}
}
diff --git a/projects/stream-chat-angular/src/lib/theme.service.ts b/projects/stream-chat-angular/src/lib/theme.service.ts
index df12d8ce..c487b88a 100644
--- a/projects/stream-chat-angular/src/lib/theme.service.ts
+++ b/projects/stream-chat-angular/src/lib/theme.service.ts
@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
/**
- * The `ThemeService` can be used to change the theme of the chat UI and to customize the theme. Our [theming guide](/chat/docs/sdk/angular/v6-rc/theming/themingv2/) gives a complete overview about the topic.
+ * The `ThemeService` can be used to change the theme of the chat UI and to customize the theme. Our [theming guide](/chat/docs/sdk/angular/v7-rc/theming/themingv2/) gives a complete overview about the topic.
*/
@Injectable({
providedIn: 'root',
diff --git a/projects/stream-chat-angular/src/lib/thread/thread.component.html b/projects/stream-chat-angular/src/lib/thread/thread.component.html
index 79d32761..17fbfcca 100644
--- a/projects/stream-chat-angular/src/lib/thread/thread.component.html
+++ b/projects/stream-chat-angular/src/lib/thread/thread.component.html
@@ -5,8 +5,8 @@
defaultThreadHeader;
context: getThreadHeaderContext()
"
- >
-
-
-
+ } @else {
+ @if (
+ (isInitializing$ | async) === false &&
+ ((isError$ | async) === true || (isActiveChannel$ | async) === false)
+ ) {
+
-
diff --git a/projects/stream-chat-angular/src/lib/notification-list/notification-list.component.spec.ts b/projects/stream-chat-angular/src/lib/notification-list/notification-list.component.spec.ts
index 0a47727f..b8bb1fd6 100644
--- a/projects/stream-chat-angular/src/lib/notification-list/notification-list.component.spec.ts
+++ b/projects/stream-chat-angular/src/lib/notification-list/notification-list.component.spec.ts
@@ -4,6 +4,7 @@ import { TranslateModule } from '@ngx-translate/core';
import { NotificationService } from '../notification.service';
import { NotificationComponent } from '../notification/notification.component';
import { ThemeService } from '../theme.service';
+import { ChangeDetectionStrategy } from '@angular/core';
import { NotificationListComponent } from './notification-list.component';
@@ -18,7 +19,11 @@ describe('NotificationListComponent', () => {
providers: [ThemeService],
imports: [TranslateModule.forRoot()],
declarations: [NotificationListComponent, NotificationComponent],
- }).compileComponents();
+ })
+ .overrideComponent(NotificationListComponent, {
+ set: { changeDetection: ChangeDetectionStrategy.Default },
+ })
+ .compileComponents();
});
beforeEach(() => {
@@ -31,12 +36,12 @@ describe('NotificationListComponent', () => {
queryNotificationContents = () =>
Array.from(
(fixture.nativeElement as HTMLElement).querySelectorAll(
- '[data-testclass="notification-content"]'
- )
+ '[data-testclass="notification-content"]',
+ ),
);
queryContainer = () =>
(fixture.nativeElement as HTMLElement).querySelector(
- '[data-testid="notification-list"]'
+ '[data-testid="notification-list"]',
) as HTMLElement;
});
diff --git a/projects/stream-chat-angular/src/lib/notification-list/notification-list.component.ts b/projects/stream-chat-angular/src/lib/notification-list/notification-list.component.ts
index d17507fb..0d1a65b9 100644
--- a/projects/stream-chat-angular/src/lib/notification-list/notification-list.component.ts
+++ b/projects/stream-chat-angular/src/lib/notification-list/notification-list.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
import { Observable } from 'rxjs';
import { CustomTemplatesService } from '../custom-templates.service';
import { NotificationService } from '../notification.service';
@@ -12,6 +12,7 @@ import { NotificationPayload } from '../types';
selector: 'stream-notification-list',
templateUrl: './notification-list.component.html',
styles: [],
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NotificationListComponent {
notifications$: Observable;
@@ -20,16 +21,12 @@ export class NotificationListComponent {
constructor(
public readonly customTemplatesService: CustomTemplatesService,
private notificationService: NotificationService,
- private themeService: ThemeService
+ private themeService: ThemeService,
) {
this.notifications$ = this.notificationService.notifications$;
this.theme$ = this.themeService.theme$;
}
- trackById(_: number, item: NotificationPayload) {
- return item.id;
- }
-
getNotificationContentContext(notification: NotificationPayload) {
return {
...notification.templateContext,
diff --git a/projects/stream-chat-angular/src/lib/notification.service.spec.ts b/projects/stream-chat-angular/src/lib/notification.service.spec.ts
index f9886455..00a3a3d3 100644
--- a/projects/stream-chat-angular/src/lib/notification.service.spec.ts
+++ b/projects/stream-chat-angular/src/lib/notification.service.spec.ts
@@ -71,7 +71,7 @@ describe('NotificationService', () => {
'success',
5000,
undefined,
- templateContext
+ templateContext,
);
expect(spy).toHaveBeenCalledWith([
@@ -86,7 +86,7 @@ describe('NotificationService', () => {
template,
'success',
undefined,
- templateContext
+ templateContext,
);
expect(spy).toHaveBeenCalledWith([
diff --git a/projects/stream-chat-angular/src/lib/notification.service.ts b/projects/stream-chat-angular/src/lib/notification.service.ts
index 0b730ccd..ebd4efa8 100644
--- a/projects/stream-chat-angular/src/lib/notification.service.ts
+++ b/projects/stream-chat-angular/src/lib/notification.service.ts
@@ -3,7 +3,7 @@ import { BehaviorSubject, Observable } from 'rxjs';
import { NotificationPayload, NotificationType } from './types';
/**
- * The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](/chat/docs/sdk/angular/v6-rc/components/NotificationListComponent/) component displays the currently active notifications.
+ * The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](/chat/docs/sdk/angular/v7-rc/components/NotificationListComponent/) component displays the currently active notifications.
*/
@Injectable({
providedIn: 'root',
@@ -33,17 +33,17 @@ export class NotificationService {
type: NotificationType = 'error',
timeout: number = 5000,
translateParams?: object,
- templateContext?: T
+ templateContext?: T,
) {
const notification = this.createNotification(
content,
type,
translateParams,
- templateContext
+ templateContext,
);
const id = setTimeout(
() => this.removeNotification(notification.id),
- timeout
+ timeout,
);
notification.dismissFn = () => {
clearTimeout(id);
@@ -69,13 +69,13 @@ export class NotificationService {
content: string | TemplateRef,
type: NotificationType = 'error',
translateParams?: object,
- templateContext?: T
+ templateContext?: T,
) {
const notification = this.createNotification(
content,
type,
translateParams,
- templateContext
+ templateContext,
);
this.notificationsSubject.next([
...this.notificationsSubject.getValue(),
@@ -89,7 +89,7 @@ export class NotificationService {
content: string | TemplateRef,
type: NotificationType,
translateParams?: object,
- templateContext?: T
+ templateContext?: T,
) {
const id = new Date().getTime().toString() + Math.random().toString();
return {
diff --git a/projects/stream-chat-angular/src/lib/notification/notification.component.html b/projects/stream-chat-angular/src/lib/notification/notification.component.html
index 3e00f26f..44560844 100644
--- a/projects/stream-chat-angular/src/lib/notification/notification.component.html
+++ b/projects/stream-chat-angular/src/lib/notification/notification.component.html
@@ -4,10 +4,7 @@
type
}} str-chat__notification"
>
-
-
-
-
+ @if (content) {
+
diff --git a/projects/stream-chat-angular/src/lib/notification/notification.component.spec.ts b/projects/stream-chat-angular/src/lib/notification/notification.component.spec.ts
index 84a2c2be..21ff6db0 100644
--- a/projects/stream-chat-angular/src/lib/notification/notification.component.spec.ts
+++ b/projects/stream-chat-angular/src/lib/notification/notification.component.spec.ts
@@ -1,4 +1,5 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ChangeDetectionStrategy } from '@angular/core';
import { NotificationComponent } from './notification.component';
@@ -11,7 +12,11 @@ describe('NotificationComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [NotificationComponent],
- }).compileComponents();
+ })
+ .overrideComponent(NotificationComponent, {
+ set: { changeDetection: ChangeDetectionStrategy.Default },
+ })
+ .compileComponents();
});
beforeEach(() => {
@@ -28,7 +33,7 @@ describe('NotificationComponent', () => {
fixture.detectChanges();
expect(
- queryNotification()?.classList.contains('notification-error')
+ queryNotification()?.classList.contains('notification-error'),
).toBeTrue();
});
@@ -38,11 +43,11 @@ describe('NotificationComponent', () => {
const notificationElement = queryNotification();
expect(
- notificationElement?.classList.contains('notification-success')
+ notificationElement?.classList.contains('notification-success'),
).toBeTrue();
expect(
- notificationElement?.classList.contains('notification-error')
+ notificationElement?.classList.contains('notification-error'),
).toBeFalse();
});
@@ -51,7 +56,7 @@ describe('NotificationComponent', () => {
fixture.detectChanges();
expect(
- queryNotification()?.classList.contains('notification-info')
+ queryNotification()?.classList.contains('notification-info'),
).toBeTrue();
});
});
diff --git a/projects/stream-chat-angular/src/lib/notification/notification.component.ts b/projects/stream-chat-angular/src/lib/notification/notification.component.ts
index b6a1d36e..775faef9 100644
--- a/projects/stream-chat-angular/src/lib/notification/notification.component.ts
+++ b/projects/stream-chat-angular/src/lib/notification/notification.component.ts
@@ -1,13 +1,19 @@
-import { Component, Input, TemplateRef } from '@angular/core';
+import {
+ ChangeDetectionStrategy,
+ Component,
+ Input,
+ TemplateRef,
+} from '@angular/core';
import { NotificationType } from '../types';
/**
- * The `Notification` component displays a notification within the [`NotificationList`](/chat/docs/sdk/angular/v6-rc/components/NotificationListComponent/)
+ * The `Notification` component displays a notification within the [`NotificationList`](/chat/docs/sdk/angular/v7-rc/components/NotificationListComponent/)
*/
@Component({
selector: 'stream-notification',
templateUrl: './notification.component.html',
styles: [],
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NotificationComponent {
/**
diff --git a/projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.html b/projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.html
index 82fe361a..971c870b 100644
--- a/projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.html
+++ b/projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.html
@@ -1,27 +1,30 @@
+
-
+ {{ "streamChat.No chats here yet…" | translate }} +
+
+
+
diff --git a/projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.spec.ts b/projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.spec.ts
index 8debb47d..d1e5f1cf 100644
--- a/projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.spec.ts
+++ b/projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.spec.ts
@@ -1,7 +1,7 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { TranslateModule } from '@ngx-translate/core';
import { PaginatedListComponent } from './paginated-list.component';
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
describe('PaginatedListComponentt', () => {
let hostComponent: TestHostComponent;
@@ -38,7 +38,11 @@ describe('PaginatedListComponentt', () => {
await TestBed.configureTestingModule({
declarations: [PaginatedListComponent, TestHostComponent],
imports: [TranslateModule.forRoot()],
- }).compileComponents();
+ })
+ .overrideComponent(PaginatedListComponent, {
+ set: { changeDetection: ChangeDetectionStrategy.Default },
+ })
+ .compileComponents();
hostFixture = TestBed.createComponent(TestHostComponent);
hostComponent = hostFixture.componentInstance;
@@ -49,11 +53,11 @@ describe('PaginatedListComponentt', () => {
hostFixture.detectChanges();
expect(
- hostFixture.nativeElement.querySelectorAll('[data-testid="item"]').length
+ hostFixture.nativeElement.querySelectorAll('[data-testid="item"]').length,
).toBe(3);
const testItems = hostFixture.nativeElement.querySelectorAll(
- '[data-testid="test-item"]'
+ '[data-testid="test-item"]',
);
hostComponent.items.forEach((item, index) => {
@@ -64,7 +68,7 @@ describe('PaginatedListComponentt', () => {
describe('load more button', () => {
const queryLoadMore = () =>
hostFixture.nativeElement.querySelector(
- '[data-testid="load-more-button"]'
+ '[data-testid="load-more-button"]',
) as HTMLButtonElement;
it('should display load more button if #hasMore is true', () => {
@@ -108,8 +112,8 @@ describe('PaginatedListComponentt', () => {
expect(
hostFixture.nativeElement.querySelector(
- '[data-testid="loading-indicator"]'
- )
+ '[data-testid="loading-indicator"]',
+ ),
).not.toBeNull();
hostComponent.isLoading = false;
@@ -117,8 +121,8 @@ describe('PaginatedListComponentt', () => {
expect(
hostFixture.nativeElement.querySelector(
- '[data-testid="loading-indicator"]'
- )
+ '[data-testid="loading-indicator"]',
+ ),
).toBeNull();
});
@@ -128,7 +132,7 @@ describe('PaginatedListComponentt', () => {
beforeEach(() => {
hostComponent.height = '200px';
scrollContainer = hostFixture.nativeElement.querySelector(
- '.stream-chat__paginated-list'
+ '.stream-chat__paginated-list',
) as HTMLElement;
scrollContainer.style.height = '500px';
scrollContainer.style.overflowY = 'auto';
@@ -138,8 +142,8 @@ describe('PaginatedListComponentt', () => {
it(`shouldn't display load more button if scrollbar is visible`, () => {
expect(
hostFixture.nativeElement.querySelector(
- '[data-testid="load-more-button"]'
- ) as HTMLButtonElement
+ '[data-testid="load-more-button"]',
+ ) as HTMLButtonElement,
).toBeNull();
});
diff --git a/projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.ts b/projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.ts
index ad6397b5..a15642db 100644
--- a/projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.ts
+++ b/projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.ts
@@ -1,5 +1,6 @@
import {
AfterViewInit,
+ ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
ContentChild,
@@ -20,6 +21,7 @@ import {
selector: 'stream-paginated-list',
templateUrl: './paginated-list.component.html',
styles: [],
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PaginatedListComponent
-
-
-
-
+ @for (amplitude of amplitudes$ | async; track $index) {
+
+ }
-
diff --git a/projects/stream-chat-angular/src/lib/voice-recording/voice-recording.component.spec.ts b/projects/stream-chat-angular/src/lib/voice-recording/voice-recording.component.spec.ts
index 0aa51553..5a9fae34 100644
--- a/projects/stream-chat-angular/src/lib/voice-recording/voice-recording.component.spec.ts
+++ b/projects/stream-chat-angular/src/lib/voice-recording/voice-recording.component.spec.ts
@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
import { VoiceRecordingComponent } from './voice-recording.component';
import { mockVoiceRecording } from '../mocks';
-import { SimpleChange } from '@angular/core';
+import { SimpleChange, ChangeDetectionStrategy } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
describe('VoiceRecordingComponent', () => {
@@ -15,7 +15,11 @@ describe('VoiceRecordingComponent', () => {
await TestBed.configureTestingModule({
declarations: [VoiceRecordingComponent],
imports: [TranslateModule.forRoot()],
- }).compileComponents();
+ })
+ .overrideComponent(VoiceRecordingComponent, {
+ set: { changeDetection: ChangeDetectionStrategy.Default },
+ })
+ .compileComponents();
});
beforeEach(() => {
@@ -38,7 +42,7 @@ describe('VoiceRecordingComponent', () => {
spyOn(audioElement, 'pause').and.callFake(() => {});
const button = nativeElement.querySelector
-
-
+@if (voiceRecorderService?.isRecorderVisible$ | async) {
+
+}
diff --git a/projects/stream-chat-angular/src/lib/voice-recorder/voice-recorder.component.spec.ts b/projects/stream-chat-angular/src/lib/voice-recorder/voice-recorder.component.spec.ts
index 96c17062..3a32d9f4 100644
--- a/projects/stream-chat-angular/src/lib/voice-recorder/voice-recorder.component.spec.ts
+++ b/projects/stream-chat-angular/src/lib/voice-recorder/voice-recorder.component.spec.ts
@@ -1,4 +1,5 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ChangeDetectionStrategy } from '@angular/core';
import { VoiceRecorderComponent } from './voice-recorder.component';
import { VoiceRecorderModule } from './voice-recorder.module';
@@ -10,7 +11,11 @@ describe('VoiceRecorderComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [VoiceRecorderModule],
- }).compileComponents();
+ })
+ .overrideComponent(VoiceRecorderComponent, {
+ set: { changeDetection: ChangeDetectionStrategy.Default },
+ })
+ .compileComponents();
fixture = TestBed.createComponent(VoiceRecorderComponent);
component = fixture.componentInstance;
diff --git a/projects/stream-chat-angular/src/lib/voice-recorder/voice-recorder.component.ts b/projects/stream-chat-angular/src/lib/voice-recorder/voice-recorder.component.ts
index e0ee32d7..af14831e 100644
--- a/projects/stream-chat-angular/src/lib/voice-recorder/voice-recorder.component.ts
+++ b/projects/stream-chat-angular/src/lib/voice-recorder/voice-recorder.component.ts
@@ -1,4 +1,7 @@
import {
+ AfterViewInit,
+ ChangeDetectionStrategy,
+ ChangeDetectorRef,
Component,
Input,
OnChanges,
@@ -20,8 +23,11 @@ import { VoiceRecorderService } from '../message-input/voice-recorder.service';
templateUrl: './voice-recorder.component.html',
styles: [],
providers: [],
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
-export class VoiceRecorderComponent implements OnInit, OnDestroy, OnChanges {
+export class VoiceRecorderComponent
+ implements OnInit, AfterViewInit, OnDestroy, OnChanges
+{
@Input() voiceRecorderService?: VoiceRecorderService;
recordState: MediaRecordingState = MediaRecordingState.STOPPED;
isLoading = false;
@@ -29,19 +35,12 @@ export class VoiceRecorderComponent implements OnInit, OnDestroy, OnChanges {
readonly MediaRecordingState = MediaRecordingState;
private subscriptions: Subscription[] = [];
private isVisibleSubscription?: Subscription;
+ private isViewInitialized = false;
- constructor(public readonly recorder: AudioRecorderService) {}
-
- ngOnInit(): void {
- this.subscriptions.push(
- this.recorder.recordingState$.subscribe((s) => {
- this.recordState = s;
- if (this.recordState === MediaRecordingState.ERROR) {
- this.voiceRecorderService?.isRecorderVisible$.next(false);
- }
- })
- );
- }
+ constructor(
+ public readonly recorder: AudioRecorderService,
+ private cdRef: ChangeDetectorRef,
+ ) {}
ngOnChanges(changes: SimpleChanges): void {
if (changes.voiceRecorderService && this.voiceRecorderService) {
@@ -51,12 +50,33 @@ export class VoiceRecorderComponent implements OnInit, OnDestroy, OnChanges {
this.recording = undefined;
this.isLoading = false;
}
+ if (this.isViewInitialized) {
+ this.cdRef.markForCheck();
+ }
});
} else {
this.isVisibleSubscription?.unsubscribe();
}
}
+ ngOnInit(): void {
+ this.subscriptions.push(
+ this.recorder.recordingState$.subscribe((s) => {
+ this.recordState = s;
+ if (this.recordState === MediaRecordingState.ERROR) {
+ this.voiceRecorderService?.isRecorderVisible$.next(false);
+ }
+ if (this.isViewInitialized) {
+ this.cdRef.markForCheck();
+ }
+ }),
+ );
+ }
+
+ ngAfterViewInit(): void {
+ this.isViewInitialized = true;
+ }
+
ngOnDestroy(): void {
this.subscriptions.forEach((s) => s.unsubscribe());
}
diff --git a/projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.html b/projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.html
index a8dd6e1b..627464da 100644
--- a/projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.html
+++ b/projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.html
@@ -11,20 +11,17 @@
(click)="seek($event)"
>
-
+ @for (dataPoint of resampledWaveFormData; track dataPoint; let i = $index) {
+
+ }
+
-
-
-
-
-
+ @if (
+ (recordState === MediaRecordingState.RECORDING ||
+ recordState === MediaRecordingState.PAUSED) &&
+ !recording
+ ) {
+