{{ 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 @@
-
-
+ channel as any as Channel,
);
});
});
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 6c2540c5..b262e5b2 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
@@ -36,7 +36,7 @@ export class ChannelHeaderComponent implements OnInit, OnDestroy {
private channelService: ChannelService,
private customTemplatesService: CustomTemplatesService,
private cdRef: ChangeDetectorRef,
- private chatClientService: ChatClientService
+ private chatClientService: ChatClientService,
) {
this.channelService.activeChannel$.subscribe((c) => {
this.activeChannel = c;
@@ -55,16 +55,16 @@ export class ChannelHeaderComponent implements OnInit, OnDestroy {
(template) => {
this.channelActionsTemplate = template;
this.cdRef.detectChanges();
- }
- )
+ },
+ ),
);
this.subscriptions.push(
this.customTemplatesService.channelHeaderInfoTemplate$.subscribe(
(template) => {
this.channelHeaderInfoTemplate = template;
this.cdRef.detectChanges();
- }
- )
+ },
+ ),
);
}
@@ -94,7 +94,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..ab9cab22 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,65 @@
theme$ | async
}}"
>
-
-
-
-
+ @for (
+ attachment of orderedAttachments;
+ track attachment.image_url ||
+ attachment.img_url ||
+ attachment.asset_url ||
+ attachment.thumb_url
+ ) {
+ (
- '[data-testclass="gallery-image"]'
+ '[data-testclass="gallery-image"]',
)[0]
.click();
fixture.detectChanges();
@@ -835,7 +835,7 @@ describe('AttachmentListComponent', () => {
queryGallery()
?.querySelectorAll(
- '[data-testclass="gallery-image"]'
+ '[data-testclass="gallery-image"]',
)[1]
.click();
fixture.detectChanges();
@@ -866,7 +866,7 @@ describe('AttachmentListComponent', () => {
queryGallery()
?.querySelectorAll(
- '[data-testclass="gallery-image"]'
+ '[data-testclass="gallery-image"]',
)[0]
.click();
fixture.detectChanges();
@@ -945,19 +945,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
@@ -999,11 +999,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());
});
@@ -1027,18 +1027,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());
});
@@ -1058,11 +1058,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());
});
@@ -1114,7 +1114,7 @@ describe('AttachmentListComponent with custom attachments', () => {
ngAfterViewInit(): void {
this.customTemplatesService.customAttachmentListTemplate$.next(
- this.template
+ this.template,
);
}
}
@@ -1132,7 +1132,7 @@ describe('AttachmentListComponent with custom attachments', () => {
}).compileComponents();
hostFixture = TestBed.createComponent(
- TestHostComponentAttachmentListComponent
+ TestHostComponentAttachmentListComponent,
);
hostComponent = hostFixture.componentInstance;
hostFixture.detectChanges();
@@ -1140,7 +1140,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 = {
@@ -1153,7 +1153,7 @@ describe('AttachmentListComponent with custom attachments', () => {
hostFixture.detectChanges();
expect(
- hostFixture.nativeElement.querySelectorAll('.payment-link').length
+ hostFixture.nativeElement.querySelectorAll('.payment-link').length,
).toBe(1);
});
@@ -1171,13 +1171,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 85becae4..34dd3fa6 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
@@ -76,17 +76,9 @@ export class AttachmentListComponent implements OnChanges, OnInit, OnDestroy {
public readonly customTemplatesService: CustomTemplatesService,
private channelService: ChannelService,
private attachmentConfigurationService: AttachmentConfigurationService,
- private messageService: MessageService
+ private messageService: MessageService,
) {}
- ngOnInit(): void {
- this.subscriptions.push(
- this.customTemplatesService.customAttachmentListTemplate$.subscribe(
- (t) => (this.customAttachmentsTemplate = t)
- )
- );
- }
-
ngOnChanges(changes: SimpleChanges): void {
if (changes.attachments) {
const builtInAttachments: Attachment[] = [];
@@ -111,24 +103,23 @@ 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;
}
}
- ngOnDestroy(): void {
- this.subscriptions.forEach((s) => s.unsubscribe());
+ ngOnInit(): void {
+ this.subscriptions.push(
+ this.customTemplatesService.customAttachmentListTemplate$.subscribe(
+ (t) => (this.customAttachmentsTemplate = t),
+ ),
+ );
}
- trackByUrl(_: number, attachment: Attachment) {
- return (
- attachment.image_url ||
- attachment.img_url ||
- attachment.asset_url ||
- attachment.thumb_url
- );
+ ngOnDestroy(): void {
+ this.subscriptions.forEach((s) => s.unsubscribe());
}
isImage(attachment: Attachment) {
@@ -204,14 +195,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;
@@ -222,12 +209,8 @@ export class AttachmentListComponent implements OnChanges, OnInit, OnDestroy {
this.imagesToViewCurrentIndex += dir * 1;
}
- trackByImageUrl(_: number, item: Attachment) {
- return item.image_url || item.img_url || item.thumb_url;
- }
-
getAttachmentContext(
- attachment: Attachment
+ attachment: Attachment,
): AttachmentContext {
return { attachment };
}
@@ -235,7 +218,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) {
@@ -245,7 +228,7 @@ export class AttachmentListComponent implements OnChanges, OnInit, OnDestroy {
this.attachmentConfigurationService.getImageAttachmentConfiguration(
attachment,
type,
- element
+ element,
);
this.attachmentConfigurations.set(attachment, configuration);
return configuration;
@@ -253,18 +236,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) {
@@ -273,7 +256,7 @@ export class AttachmentListComponent implements OnChanges, OnInit, OnDestroy {
const configuration =
this.attachmentConfigurationService.getVideoAttachmentConfiguration(
attachment,
- element
+ element,
);
this.attachmentConfigurations.set(attachment, configuration);
return configuration;
@@ -286,12 +269,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;
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..1d8cb93d 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,121 @@
-
-
+ @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..ebd7c5f5 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
@@ -35,22 +35,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 +109,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 +149,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 +174,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 +212,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 +231,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 +246,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 +255,7 @@ describe('AttachmentPreviewListComponent', () => {
fixture.detectChanges();
expect(
- queryImagePreviews()[0].querySelector('[data-testclass="upload-retry"]')
+ queryImagePreviews()[0].querySelector('[data-testclass="upload-retry"]'),
).toBeNull();
});
@@ -269,7 +269,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 +289,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 +334,7 @@ describe('AttachmentPreviewListComponent with custom attachments', () => {
ngAfterViewInit(): void {
this.customTemplatesService.customAttachmentPreviewListTemplate$.next(
- this.template
+ this.template,
);
}
}
@@ -353,7 +353,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 +367,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 +387,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..7c9d1c51 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
@@ -40,19 +40,19 @@ export class AttachmentPreviewListComponent implements OnInit, OnDestroy {
constructor(
private customTemplateService: CustomTemplatesService,
- public readonly attachmentService: AttachmentService
+ public readonly attachmentService: AttachmentService,
) {}
ngOnInit(): void {
this.subscriptions.push(
this.customTemplateService.customAttachmentPreviewListTemplate$.subscribe(
- (t) => (this.customAttachmentsPreview = t)
- )
+ (t) => (this.customAttachmentsPreview = t),
+ ),
);
this.subscriptions.push(
this.attachmentService.customAttachments$.subscribe(
- (a) => (this.customAttachments = a)
- )
+ (a) => (this.customAttachments = a),
+ ),
);
}
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 38f2a070..fea132bb 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);
@@ -578,7 +578,7 @@ describe('AttachmentService', () => {
const messageService = TestBed.inject(MessageService);
const filterSpy = spyOn(
messageService,
- 'isCustomAttachment'
+ 'isCustomAttachment',
).and.callThrough();
const customAttachment = {
type: 'custom',
@@ -716,7 +716,7 @@ describe('AttachmentService', () => {
const notificationService = TestBed.inject(NotificationService);
const errorNotificationSpy = spyOn(
notificationService,
- 'addTemporaryNotification'
+ 'addTemporaryNotification',
);
appSettings$.next({
file_upload_config: {
@@ -766,7 +766,7 @@ describe('AttachmentService', () => {
const notificationService = TestBed.inject(NotificationService);
const errorNotificationSpy = spyOn(
notificationService,
- 'addTemporaryNotification'
+ 'addTemporaryNotification',
);
appSettings$.next({
file_upload_config: {
@@ -834,7 +834,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 a4ce4e6a..0ec98bef 100644
--- a/projects/stream-chat-angular/src/lib/attachment.service.ts
+++ b/projects/stream-chat-angular/src/lib/attachment.service.ts
@@ -29,7 +29,7 @@ import { MessageService } from './message.service';
providedIn: 'root',
})
export class AttachmentService<
- T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+ T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
> {
/**
* Emits the number of uploads in progress.
@@ -60,7 +60,7 @@ export class AttachmentService<
*/
maxNumberOfAttachments = 30;
private attachmentUploadsSubject = new BehaviorSubject(
- []
+ [],
);
private appSettings: AppSettings | undefined;
private attachmentLimitNotificationHide?: () => void;
@@ -69,11 +69,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$,
@@ -85,7 +85,7 @@ export class AttachmentService<
customAttachments.length
);
}),
- shareReplay(1)
+ shareReplay(1),
);
this.attachmentsCounter$.subscribe((count) => {
if (count > this.maxNumberOfAttachments) {
@@ -93,7 +93,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?.();
@@ -253,7 +253,7 @@ export class AttachmentService<
} catch (error) {
result = attachmentUploads;
this.notificationService.addTemporaryNotification(
- 'streamChat.Error deleting attachment'
+ 'streamChat.Error deleting attachment',
);
}
} else {
@@ -385,14 +385,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();
@@ -431,12 +431,12 @@ export class AttachmentService<
errorKey,
'error',
undefined,
- translateParams
+ translateParams,
);
}
});
this.attachmentUploadInProgressCounter$.next(
- this.attachmentUploadInProgressCounter$.value - 1
+ this.attachmentUploadInProgressCounter$.value - 1,
);
this.attachmentUploadsSubject.next([...attachmentUploads]);
}
@@ -458,42 +458,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 (
@@ -506,7 +506,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;
}
@@ -544,7 +544,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;
}
@@ -565,7 +565,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..251d46a7 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
@@ -48,7 +48,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));
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 5a63af03..a000af3d 100644
--- a/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts
+++ b/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts
@@ -25,10 +25,10 @@ import {
@Component({
selector: 'stream-avatar',
templateUrl: './avatar.component.html',
- styleUrls: ['./avatar.component.scss'],
+ styleUrl: './avatar.component.scss',
})
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)
@@ -76,9 +76,22 @@ 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.type || changes.name || changes.channel) {
+ this.setInitials();
+ }
+
+ if (changes.type || changes.channel) {
+ this.setFallbackChannelImage();
+ }
+ }
+
ngOnInit(): void {
this.subscriptions.push(
this.chatClientService.user$.subscribe((u) => {
@@ -93,21 +106,12 @@ export class AvatarComponent
this.cdRef.detectChanges();
}
}
- })
+ }),
);
}
- 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 {
@@ -176,13 +180,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)) {
+
-
-
-
+ />
@@ -508,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 68942e4b..7b88f6d2 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
@@ -79,18 +79,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"]'));
@@ -98,42 +98,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]'),
);
}));
@@ -159,25 +159,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);
@@ -186,7 +186,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);
@@ -258,7 +258,7 @@ describe('AttachmentListComponent', () => {
fixture.detectChanges();
const voiceRecordingComponent = fixture.debugElement.query(
- By.directive(VoiceRecordingComponent)
+ By.directive(VoiceRecordingComponent),
).componentInstance as VoiceRecordingComponent;
expect(voiceRecordingComponent.attachment).toBe(mockVoiceRecording);
@@ -294,7 +294,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 = [
@@ -314,7 +314,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 = [
@@ -329,12 +329,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');
@@ -392,7 +392,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();
});
@@ -450,7 +450,7 @@ describe('AttachmentListComponent', () => {
{
image_action: 'shuffle',
},
- 'parent-id'
+ 'parent-id',
);
});
@@ -512,7 +512,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 = [
@@ -522,7 +522,7 @@ describe('AttachmentListComponent', () => {
fixture.detectChanges();
expect(
- nativeElement.querySelector('.str-chat__message-attachment--svg-image')
+ nativeElement.querySelector('.str-chat__message-attachment--svg-image'),
).toBeNull();
});
});
@@ -559,14 +559,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();
});
@@ -690,7 +690,7 @@ describe('AttachmentListComponent', () => {
expect(
queryAttachments()[0].querySelector('[data-testclass="card-title"]')
- ?.textContent
+ ?.textContent,
).toContain(title);
});
@@ -714,7 +714,7 @@ describe('AttachmentListComponent', () => {
expect(
queryAttachments()[0].querySelector('[data-testclass="card-text"]')
- ?.textContent
+ ?.textContent,
).toContain(text);
});
@@ -758,7 +758,7 @@ describe('AttachmentListComponent', () => {
expect(queryUrlLinks()[0].href).toContain(scrapeUrl);
expect(queryUrlLinks()[0].textContent).toContain(
- component.trimUrl('getstream.io')
+ component.trimUrl('getstream.io'),
);
});
@@ -806,7 +806,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 (attachment.actions && attachment.actions.length > 0) {
+
+
+
+ }
+
+ }
+ @if (customAttachmentsTemplate) {
+
-
-
-
+
+ }
+ @if (isVoiceMessage(attachment)) {
+
+
+ }
+ @if (
+ isCard(attachment) && getCardAttachmentConfiguration(attachment);
+ as attachmentConfiguration
+ ) {
+
+
-
-
-
+ @if (attachmentConfiguration.url) {
+
+ }
+
+
-
@@ -517,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 b6644202..c747672f 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
@@ -112,7 +112,7 @@ describe('ChannelHeaderComponent', () => {
expect(avatar.type).toBe('channel');
expect(avatar.location).toBe('channel-header');
expect(avatar.channel).toBe(
- channel as any as Channel
+ />
-
-
-
-
-
-
-
-
-
-
diff --git a/projects/stream-chat-angular/src/lib/channel-list/channel-list.component.spec.ts b/projects/stream-chat-angular/src/lib/channel-list/channel-list.component.spec.ts
index 7c3e0dc3..ad3352c1 100644
--- a/projects/stream-chat-angular/src/lib/channel-list/channel-list.component.spec.ts
+++ b/projects/stream-chat-angular/src/lib/channel-list/channel-list.component.spec.ts
@@ -57,11 +57,11 @@ describe('ChannelListComponent', () => {
nativeElement.querySelector('[data-testid="chatdown-container"]');
queryLoadingIndicator = () =>
nativeElement.querySelector(
- '[data-testid="loading-indicator-full-size"]'
+ '[data-testid="loading-indicator-full-size"]',
);
queryEmptyIndicator = () =>
nativeElement.querySelector(
- '[data-testid="empty-channel-list-indicator"]'
+ '[data-testid="empty-channel-list-indicator"]',
);
queryContainer = () =>
nativeElement.querySelector('[data-testid="channel-list-container"]');
@@ -77,7 +77,7 @@ describe('ChannelListComponent', () => {
expect(channelsComponents.length).toBe(channels.length);
channels.forEach((c, index) =>
- expect(channelsComponents[index].channel).toBe(c)
+ expect(channelsComponents[index].channel).toBe(c),
);
});
@@ -131,7 +131,7 @@ describe('ChannelListComponent', () => {
channelServiceMock.channels$.next(channels);
fixture.detectChanges();
const paginatedListComponent = fixture.debugElement.query(
- By.directive(PaginatedListComponent)
+ By.directive(PaginatedListComponent),
).componentInstance as PaginatedListComponent;
channelServiceMock.hasMoreChannels$.next(false);
fixture.detectChanges();
@@ -151,7 +151,7 @@ describe('ChannelListComponent', () => {
spyOn(channelServiceMock, 'loadMoreChannels');
fixture.detectChanges();
const paginatedListComponent = fixture.debugElement.query(
- By.directive(PaginatedListComponent)
+ By.directive(PaginatedListComponent),
).componentInstance as PaginatedListComponent;
paginatedListComponent.loadMore.emit();
fixture.detectChanges();
diff --git a/projects/stream-chat-angular/src/lib/channel-list/channel-list.component.ts b/projects/stream-chat-angular/src/lib/channel-list/channel-list.component.ts
index 4c76eb73..7bc38452 100644
--- a/projects/stream-chat-angular/src/lib/channel-list/channel-list.component.ts
+++ b/projects/stream-chat-angular/src/lib/channel-list/channel-list.component.ts
@@ -28,21 +28,21 @@ export class ChannelListComponent implements OnDestroy {
constructor(
private channelService: ChannelService,
private customTemplatesService: CustomTemplatesService,
- private themeService: ThemeService
+ private themeService: ThemeService,
) {
this.theme$ = this.themeService.theme$;
this.channels$ = this.channelService.channels$;
this.hasMoreChannels$ = this.channelService.hasMoreChannels$;
this.isError$ = this.channelService.channelQueryState$.pipe(
- map((s) => !this.isLoadingMoreChannels && s?.state === 'error')
+ map((s) => !this.isLoadingMoreChannels && s?.state === 'error'),
);
this.isInitializing$ = this.channelService.channelQueryState$.pipe(
- map((s) => !this.isLoadingMoreChannels && s?.state === 'in-progress')
+ map((s) => !this.isLoadingMoreChannels && s?.state === 'in-progress'),
);
this.subscriptions.push(
this.customTemplatesService.channelPreviewTemplate$.subscribe(
- (template) => (this.customChannelPreviewTemplate = template)
- )
+ (template) => (this.customChannelPreviewTemplate = template),
+ ),
);
}
diff --git a/projects/stream-chat-angular/src/lib/channel-preview/channel-preview.component.html b/projects/stream-chat-angular/src/lib/channel-preview/channel-preview.component.html
index 63abd952..c5b91b80 100644
--- a/projects/stream-chat-angular/src/lib/channel-preview/channel-preview.component.html
+++ b/projects/stream-chat-angular/src/lib/channel-preview/channel-preview.component.html
@@ -13,7 +13,7 @@
name="{{ avatarName }}"
imageUrl="{{ avatarImage }}"
[channel]="channel"
- >
+ />
-
-
-
-
-
-
-
- - {{ "streamChat.You have no channels currently" | translate }} -
-- {{ "streamChat.You have no channels currently" | translate }} -
-
-
+ } @else {
+ @if (isError$ | async) {
+
+
-
+
+
+
+
+
+
+
+
-
-
- + {{ "streamChat.You have no channels currently" | translate }} +
+
+
+
+ }
+ @if (isInitializing$ | async) {
+
-
-
-
+ />
-
- {{ 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 a44d663f..6c67144f 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
@@ -253,7 +253,7 @@ describe('ChannelPreviewComponent', () => {
expect(queryLatestMessage()?.textContent).toContain(
channel.state.latestMessages[channel.state.latestMessages.length - 1]
- .text
+ .text,
);
});
@@ -329,7 +329,7 @@ describe('ChannelPreviewComponent', () => {
fixture.detectChanges();
expect(queryLatestMessage()?.textContent).not.toContain(
- updatedMessage.text
+ updatedMessage.text,
);
});
@@ -368,14 +368,14 @@ describe('ChannelPreviewComponent', () => {
fixture.detectChanges();
expect(nativeElement.querySelector('[data-testid="html-content"]')).toBe(
- null
+ null,
);
component.displayAs = 'html';
fixture.detectChanges();
expect(
- nativeElement.querySelector('[data-testid="html-content"]')
+ nativeElement.querySelector('[data-testid="html-content"]'),
).not.toBe(null);
});
@@ -384,11 +384,11 @@ describe('ChannelPreviewComponent', () => {
component.channel = channel;
fixture.detectChanges();
const iconComponent = fixture.debugElement.query(
- By.directive(IconPlaceholderComponent)
+ By.directive(IconPlaceholderComponent),
)?.componentInstance as IconPlaceholderComponent;
expect(
- nativeElement.querySelector('[data-testid="latest-message-status"]')
+ nativeElement.querySelector('[data-testid="latest-message-status"]'),
).not.toBeNull();
expect(iconComponent.icon).toBe('delivered');
diff --git a/projects/stream-chat-angular/src/lib/channel-preview/channel-preview.component.ts b/projects/stream-chat-angular/src/lib/channel-preview/channel-preview.component.ts
index 34a745f1..9cb33bb6 100644
--- a/projects/stream-chat-angular/src/lib/channel-preview/channel-preview.component.ts
+++ b/projects/stream-chat-angular/src/lib/channel-preview/channel-preview.component.ts
@@ -45,7 +45,7 @@ export class ChannelPreviewComponent implements OnInit, OnDestroy {
private chatClientService: ChatClientService,
messageService: MessageService,
public customTemplatesService: CustomTemplatesService,
- private dateParser: DateParserService
+ private dateParser: DateParserService,
) {
this.displayAs = messageService.displayAs;
}
@@ -56,13 +56,13 @@ export class ChannelPreviewComponent implements OnInit, OnDestroy {
if (user?.id !== this.userId) {
this.userId = user?.id;
}
- })
+ }),
);
this.subscriptions.push(
this.channelService.activeChannel$.subscribe(
(activeChannel) =>
- (this.isActive = activeChannel?.id === this.channel?.id)
- )
+ (this.isActive = activeChannel?.id === this.channel?.id),
+ ),
);
const messages = this.channel?.state?.latestMessages;
if (messages && messages.length > 0) {
@@ -73,22 +73,22 @@ export class ChannelPreviewComponent implements OnInit, OnDestroy {
(this.channel?.data?.own_capabilities as string[]) || [];
this.canSendReadEvents = capabilities.indexOf('read-events') !== -1;
this.subscriptions.push(
- this.channel!.on('message.new', this.handleMessageEvent.bind(this))
+ this.channel!.on('message.new', this.handleMessageEvent.bind(this)),
);
this.subscriptions.push(
- this.channel!.on('message.updated', this.handleMessageEvent.bind(this))
+ this.channel!.on('message.updated', this.handleMessageEvent.bind(this)),
);
this.subscriptions.push(
- this.channel!.on('message.deleted', this.handleMessageEvent.bind(this))
+ this.channel!.on('message.deleted', this.handleMessageEvent.bind(this)),
);
this.subscriptions.push(
- this.channel!.on('channel.truncated', this.handleMessageEvent.bind(this))
+ this.channel!.on('channel.truncated', this.handleMessageEvent.bind(this)),
);
this.subscriptions.push(
this.channel!.on('message.read', () => {
this.isUnreadMessageWasCalled = false;
this.updateUnreadState();
- })
+ }),
);
this.subscriptions.push(
this.chatClientService.events$
@@ -96,13 +96,13 @@ export class ChannelPreviewComponent implements OnInit, OnDestroy {
filter(
(e) =>
e.eventType === 'notification.mark_unread' &&
- this.channel!.id === e.event?.channel_id
- )
+ this.channel!.id === e.event?.channel_id,
+ ),
)
.subscribe(() => {
this.isUnreadMessageWasCalled = true;
this.updateUnreadState();
- })
+ }),
);
}
@@ -124,7 +124,7 @@ export class ChannelPreviewComponent implements OnInit, OnDestroy {
}
return getChannelDisplayText(
this.channel,
- this.chatClientService.chatClient.user!
+ this.chatClientService.chatClient.user!,
);
}
@@ -152,7 +152,7 @@ export class ChannelPreviewComponent implements OnInit, OnDestroy {
}
private setLatestMessage(
- message?: FormatMessageResponse
-
-
- {{ latestMessageTime }}
+ }
+ @if (latestMessageStatus) {
+
+
+ }
+ @if (latestMessageTime) {
+
+ {{ latestMessageTime }}
+
+ }
-
-
-
-
-
-
- (
- '[data-testid="play-button"]'
+ '[data-testid="play-button"]',
)!;
button.click();
@@ -59,7 +59,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 +111,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 +120,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 d7e66205..fba9c348 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
@@ -35,9 +35,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,
);
}
@@ -45,7 +48,7 @@ export class VoiceRecordingComponent implements OnChanges, AfterViewInit {
if (changes.attachment) {
this.fileSize = this.getFileSize();
this.durationFormatted = this.getFormattedDuration(
- this.attachment?.duration
+ this.attachment?.duration,
);
}
}
@@ -61,7 +64,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/test.ts b/projects/stream-chat-angular/src/test.ts
index 35d409ff..6f49065b 100644
--- a/projects/stream-chat-angular/src/test.ts
+++ b/projects/stream-chat-angular/src/test.ts
@@ -12,5 +12,5 @@ import {
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting(),
- { teardown: { destroyAfterEach: true } }
+ { teardown: { destroyAfterEach: true } },
);
- {{ "streamChat.No chats here yet…" | translate }} -
-
- ;
export type AttachmentUploadErrorReason =
@@ -86,7 +86,7 @@ export type AttachmentUploadErrorReason =
| 'unknown';
export type AttachmentUpload<
- T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+ T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
> = {
file: File;
state: 'error' | 'success' | 'uploading';
@@ -132,13 +132,13 @@ export type NotificationPayload = {
};
export type ChannelPreviewContext<
- T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+ T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
> = {
channel: Channel;
};
export type ChannelPreviewInfoContext<
- T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+ T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
> = ChannelPreviewContext & {
latestMessage?: StreamMessage;
/**
@@ -184,11 +184,11 @@ export type MessageContext = {
};
export type ChannelActionsContext<
- T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+ T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
> = { channel: Channel };
export type CustomAttachmentListContext<
- T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+ T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
> = {
messageId: string;
attachments: Attachment[];
@@ -237,7 +237,7 @@ export type IconContext = {
};
export type MessageActionsBoxContext<
- T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+ T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
> = {
isMine: boolean;
message: StreamMessage | undefined;
@@ -251,14 +251,14 @@ export type MessageActionHandlerExtraParams = {
};
export type MessageActionHandler<
- T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+ T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
> = (
message: StreamMessage,
- params: MessageActionHandlerExtraParams
+ params: MessageActionHandlerExtraParams,
) => void;
export type MessageActionBoxItemContext<
- T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+ T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
> = {
actionName: string;
actionLabelOrTranslationKey: ((message: StreamMessage) => string) | string;
@@ -268,30 +268,30 @@ export type MessageActionBoxItemContext<
};
export type MessageReactionActionItem<
- T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+ T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
> = {
actionName: 'react';
isVisible: (
enabledActions: string[],
isMine: boolean,
- message: StreamMessage
+ message: StreamMessage,
) => boolean;
};
type MessageActionItemBase<
- T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+ T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
> = {
actionLabelOrTranslationKey: ((message: StreamMessage) => string) | string;
isVisible: (
enabledActions: string[],
isMine: boolean,
- message: StreamMessage
+ message: StreamMessage,
) => boolean;
actionHandler: MessageActionHandler;
};
export type MessageActionItem<
- T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+ T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
> = MessageActionItemBase & {
actionName:
| 'quote'
@@ -305,7 +305,7 @@ export type MessageActionItem<
};
export type CustomMessageActionItem<
- T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+ T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
> = MessageActionItemBase & {
actionName: string;
};
@@ -369,7 +369,7 @@ export type SendingStatusContext = {
};
export type CustomMetadataContext<
- T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+ T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
> = {
message: StreamMessage;
};
@@ -380,7 +380,7 @@ export type ReadStatusContext = {
};
export type ChannelHeaderInfoContext<
- T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+ T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
> = { channel: Channel };
export type CustomAttachmentUploadContext = {
@@ -418,7 +418,7 @@ export type ChannelQueryState = {
};
export type MessageInput<
- T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+ T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
> = {
text: string;
attachments: Attachment[];
@@ -434,7 +434,7 @@ export type OffsetNextPageConfiguration = {
};
export type FiltertNextPageConfiguration<
- T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+ T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
> = {
type: 'filter';
paginationFilter: ChannelFilters;
@@ -451,7 +451,7 @@ export type MessageReactionClickDetails = {
};
export type MessageActionsClickDetails<
- T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+ T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
> = MessageActionsBoxContext & { customActions: CustomMessageActionItem[] };
export type GroupStyleOptions = {
@@ -463,7 +463,7 @@ export type GroupStyleOptions = {
export type ChannelQueryType = 'first-page' | 'next-page' | 'recover-state';
export type ChannelQueryResult<
- T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+ T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
> = {
channels: Channel[];
hasMorePage: boolean;
@@ -490,13 +490,13 @@ export type MediaRecording = {
};
export type CustomAttachmentPreviewListContext<
- T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+ T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
> = {
- attachmentService: AttachmentService;
+ service: AttachmentService;
};
export type ThreadReplyButtonContext<
- T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+ T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
> = {
message: StreamMessage;
};
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..c58675f1 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
@@ -35,7 +35,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 +71,7 @@ describe('UserListComponent', () => {
fixture.detectChanges();
const paginatedListComponent = fixture.debugElement.query(
- By.directive(PaginatedListComponent)
+ By.directive(PaginatedListComponent),
).componentInstance as PaginatedListComponent;
expect(paginatedListComponent.items).toBe(users);
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 d3c8c6bb..3a9f607f 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
@@ -49,8 +49,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!);
});
@@ -64,7 +64,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 c930186b..d1bde3d0 100644
--- a/projects/stream-chat-angular/src/lib/thread/thread.component.ts
+++ b/projects/stream-chat-angular/src/lib/thread/thread.component.ts
@@ -28,17 +28,17 @@ export class ThreadComponent implements OnDestroy {
constructor(
public customTemplatesService: CustomTemplatesService,
private channelService: ChannelService,
- private chatClientService: ChatClientService
+ private chatClientService: ChatClientService,
) {
this.subscriptions.push(
this.channelService.activeParentMessage$.subscribe(
- (parentMessage) => (this.parentMessage = parentMessage)
- )
+ (parentMessage) => (this.parentMessage = parentMessage),
+ ),
);
this.subscriptions.push(
this.channelService.activeChannel$.subscribe(
- (channel) => (this.channel = channel)
- )
+ (channel) => (this.channel = channel),
+ ),
);
}
@@ -63,7 +63,7 @@ export class ThreadComponent implements OnDestroy {
}
return getChannelDisplayText(
this.channel,
- this.chatClientService.chatClient.user
+ 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 6b53514e..349e7777 100644
--- a/projects/stream-chat-angular/src/lib/types.ts
+++ b/projects/stream-chat-angular/src/lib/types.ts
@@ -77,7 +77,7 @@ export type DefaultUserType = UnknownType &
};
export type StreamMessage<
- T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+ T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
> = FormatMessageResponse
-
- 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 +54,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/read-by.ts b/projects/stream-chat-angular/src/lib/read-by.ts
index 41a6763a..ca2e3401 100644
--- a/projects/stream-chat-angular/src/lib/read-by.ts
+++ b/projects/stream-chat-angular/src/lib/read-by.ts
@@ -2,10 +2,10 @@ import { Channel, FormatMessageResponse, UserResponse } from 'stream-chat';
import { DefaultStreamChatGenerics } from './types';
export const getReadBy = <
- T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+ T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
>(
message: FormatMessageResponse,
- channel: Channel
+ channel: Channel,
) => {
const readBy: UserResponse[] = [];
Object.keys(channel.state.read).forEach((key) => {
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 348cbc8b..7d932915 100644
--- a/projects/stream-chat-angular/src/lib/stream-i18n.service.ts
+++ b/projects/stream-chat-angular/src/lib/stream-i18n.service.ts
@@ -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/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..a3926326 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
@@ -31,12 +31,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..4dc6b9e5 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
@@ -20,16 +20,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 14b1562f..c604d2b8 100644
--- a/projects/stream-chat-angular/src/lib/notification.service.ts
+++ b/projects/stream-chat-angular/src/lib/notification.service.ts
@@ -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..8cf4ba6e 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
@@ -28,7 +28,7 @@ describe('NotificationComponent', () => {
fixture.detectChanges();
expect(
- queryNotification()?.classList.contains('notification-error')
+ queryNotification()?.classList.contains('notification-error'),
).toBeTrue();
});
@@ -38,11 +38,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 +51,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/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..0f8f818f 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
@@ -49,11 +49,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 +64,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 +108,8 @@ describe('PaginatedListComponentt', () => {
expect(
hostFixture.nativeElement.querySelector(
- '[data-testid="loading-indicator"]'
- )
+ '[data-testid="loading-indicator"]',
+ ),
).not.toBeNull();
hostComponent.isLoading = false;
@@ -117,8 +117,8 @@ describe('PaginatedListComponentt', () => {
expect(
hostFixture.nativeElement.querySelector(
- '[data-testid="loading-indicator"]'
- )
+ '[data-testid="loading-indicator"]',
+ ),
).toBeNull();
});
@@ -128,7 +128,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 +138,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..049a6100 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
@@ -40,7 +40,9 @@ 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..9405cef0 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
@@ -38,7 +38,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.ts b/projects/stream-chat-angular/src/lib/voice-recorder/voice-recorder.component.ts
index e0ee32d7..291ae5c2 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
@@ -32,17 +32,6 @@ export class VoiceRecorderComponent implements OnInit, OnDestroy, OnChanges {
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);
- }
- })
- );
- }
-
ngOnChanges(changes: SimpleChanges): void {
if (changes.voiceRecorderService && this.voiceRecorderService) {
this.isVisibleSubscription =
@@ -57,6 +46,17 @@ export class VoiceRecorderComponent implements OnInit, OnDestroy, OnChanges {
}
}
+ ngOnInit(): void {
+ this.subscriptions.push(
+ this.recorder.recordingState$.subscribe((s) => {
+ this.recordState = s;
+ if (this.recordState === MediaRecordingState.ERROR) {
+ this.voiceRecorderService?.isRecorderVisible$.next(false);
+ }
+ }),
+ );
+ }
+
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
+ ) {
+