diff --git a/docusaurus/docs/Angular/assets/start-voice-recording.png b/docusaurus/docs/Angular/assets/start-voice-recording.png new file mode 100644 index 00000000..7d7058af Binary files /dev/null and b/docusaurus/docs/Angular/assets/start-voice-recording.png differ diff --git a/docusaurus/docs/Angular/assets/voice-recorder-wavebar.png b/docusaurus/docs/Angular/assets/voice-recorder-wavebar.png new file mode 100644 index 00000000..974ec30b Binary files /dev/null and b/docusaurus/docs/Angular/assets/voice-recorder-wavebar.png differ diff --git a/docusaurus/docs/Angular/assets/voice-recorder.png b/docusaurus/docs/Angular/assets/voice-recorder.png new file mode 100644 index 00000000..6e497b18 Binary files /dev/null and b/docusaurus/docs/Angular/assets/voice-recorder.png differ diff --git a/docusaurus/docs/Angular/assets/voice-recording-demo.png b/docusaurus/docs/Angular/assets/voice-recording-demo.png new file mode 100644 index 00000000..4091d048 Binary files /dev/null and b/docusaurus/docs/Angular/assets/voice-recording-demo.png differ diff --git a/docusaurus/docs/Angular/assets/voice-recording-playback.png b/docusaurus/docs/Angular/assets/voice-recording-playback.png new file mode 100644 index 00000000..5cf95965 Binary files /dev/null and b/docusaurus/docs/Angular/assets/voice-recording-playback.png differ diff --git a/docusaurus/docs/Angular/code-examples/voice-recordings.mdx b/docusaurus/docs/Angular/code-examples/voice-recordings.mdx new file mode 100644 index 00000000..bbd09b64 --- /dev/null +++ b/docusaurus/docs/Angular/code-examples/voice-recordings.mdx @@ -0,0 +1,187 @@ +--- +id: voice-recordings +title: Voice recordings +--- + +import VoiceRecordingScreenshot from "../assets/voice-recording-screenshot.png"; +import StartRecording from "../assets/start-voice-recording.png"; +import RecordingDemo from "../assets/voice-recording-demo.png"; +import Playback from "../assets/voice-recording-playback.png"; + +The Stream API allows you to send voice recordings as attachments. This is an example attachment: + +```json +{ + "type": "voiceRecording", + "title": "audio_recording_2024-09-26T14:41:24.473Z.wav", + "asset_url": "https://dublin.stream-io-cdn.com/...", + // This is used to display a visual representation of the voice recording + "waveform_data": [ + 0.03389095297537962, + 0.03389095297537962, + 0.19684165186582253 //... + ], + // The duration of the recording in seconds + "duration": 31.19, + "file_size": 97964, + "mime_type": "audio/wav" +} +``` + +## Playing voice recordings + +The SDK can play these recordings without any additional setup: + + + +If you'd like to use your own UI, you can provide your own template using the [custom templates service](../../services/CustomTemplatesService/#voicerecordingattachmenttemplate). + +## Creating voice recordings + +If you want to let users to create voice recordings, you have to configure the SDK with a few easy steps. + +### Start recording button + +The [message input](../../components/MessageInputComponent) component can display the start recording button optionally. This is how you can enable it: + +```html + +``` + +This is how the input looks with the button enabled: + + + +You can also display your own start button. The easiest way is to use the `message-input-start` or `message-input-end` attributes, which will insert the element before or after the textarea element: + +```html + + + +``` + +### Import the `VoiceRecorderModule` + +The `VoiceRecorderModule` contains the voice recorder component and the services needed to make a recording. You have to import it like this: + +```typescript +import { StreamChatModule, VoiceRecorderModule } from "stream-chat-angular"; + +@NgModule({ + declarations: [AppComponent], + imports: [ + // other imports... + StreamChatModule, + VoiceRecorderModule, + // ...more imports + ], + bootstrap: [AppComponent], +}) +export class AppModule {} +``` + +### Display the voice recorder component + +You have to provide the voice recorder template to the message input component. The SDK provides the `VoiceRecorderComponent` for this: + +```html + + + + + +``` + +The message input provides a [`VoiceRecorderService`](../../services/VoiceRecorderService) instance, which is used by the two components to communicate. + +If you want to use your own UI, provide your own component here that uses `VoiceRecorderService` to communicate with the message input component. + +### Voice recorder component + +That's it. We can now start a voice recording: + + + +The recording can be paused and resumed. Once a user is finished recording, they can play it back: + + + +If they are unhappy with the recording, they can discard it. Once the recording is finalized, they can hit the send button. + +### Sending modes + +There are two ways to send voice recordings: + +1. Once a recording is finalized, you can immediately send a message with the recording; this is the default mode. +2. Once a recording is finalized, you can return it to the message composer and continue editing the message. + +This is how you can change between the modes: + +```typescript +constructor(private messageInputService: MessageInputConfigService) { + // Defaults to true + // Set false if you want to return to the message composer after a recording was added to the message + this.messageInputService.sendVoiceRecordingImmediately = true; +} +``` + +### Error states + +If an error occurs at any point during the recording, the recording will be stopped, and an error message will be emitted via the [`NotificationService`](../../services/NotificationService). The built-in `stream-notification-list` component will display this error message. + +### Custom recording title + +You can generate the recording title using your own logic using the `customGenerateRecordingTitle` field of the `AudioRecorderService`. + +```typescript +constructor(private audioRecorder: AudioRecorderService, private chatService: ChatClientService) { + this.audioRecorder.customGenerateRecordingTitle = ( + options: MediaRecordingTitleOptions + ) => { + const extension = options.mimeType.match(/\/([^/;]+)/)?.[1] || ""; + return `${ + this.chatService.chatClient.user?.name + }-${new Date().toISOString()}.${extension}`; + }; +} +``` + +### Custom transcoding + +Due to browser restrictions, the SDK records with the following configuration: + +- In Safari: recordings are sent in `mp4` files +- In all other browsers: recordings are created in `webm` and then transcoded into `wav` files + +The downside of the `wav` format is that it's uncompressed, which results in a larger file size. + +You can provide a custom transcoder to reduce the file size. The following example shows how to transcode to `mp3` using the [`@breezystack/lamejs`](https://www.npmjs.com/package/@breezystack/lamejs) library. + +First, install the library: + +``` +npm install @breezystack/lamejs +``` + +Then register the custom transcoder to the `TranscoderService`: + +```typescript +import { encodeWebmToMp3, TranscoderService } from "stream-chat-angular"; +import * as lamejs from "@breezystack/lamejs"; + +constructor(private transcoderService: TranscoderService) { + transcoderService.customTranscoder = (blob: Blob) => { + if (blob.type.includes('audio/mp4')) { + return blob; + } else { + return encodeWebmToMp3(blob, lamejs); + } + }; +} +``` diff --git a/docusaurus/docs/Angular/components/AttachmentListComponent.mdx b/docusaurus/docs/Angular/components/AttachmentListComponent.mdx index 7d4ef151..ed212008 100644 --- a/docusaurus/docs/Angular/components/AttachmentListComponent.mdx +++ b/docusaurus/docs/Angular/components/AttachmentListComponent.mdx @@ -122,7 +122,7 @@ The id of the message the attachments belong to #### Defined in -[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L39) +[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L39) --- @@ -134,7 +134,7 @@ The parent id of the message the attachments belong to #### Defined in -[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L43) +[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L43) --- @@ -146,7 +146,7 @@ The attachments to display #### Defined in -[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L47) +[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L47) --- @@ -158,6 +158,6 @@ Emits the state of the image carousel window #### Defined in -[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L51) +[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L51) [//]: # "End of generated content" diff --git a/docusaurus/docs/Angular/components/AttachmentPreviewListComponent.mdx b/docusaurus/docs/Angular/components/AttachmentPreviewListComponent.mdx index be84fef2..3fc748a9 100644 --- a/docusaurus/docs/Angular/components/AttachmentPreviewListComponent.mdx +++ b/docusaurus/docs/Angular/components/AttachmentPreviewListComponent.mdx @@ -47,7 +47,7 @@ A stream that emits the current file uploads and their states #### Defined in -[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:17](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L17) +[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:17](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L17) --- @@ -59,7 +59,7 @@ An output to notify the parent component if the user tries to retry a failed upl #### Defined in -[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:21](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L21) +[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:21](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L21) --- @@ -71,6 +71,6 @@ An output to notify the parent component if the user wants to delete a file #### Defined in -[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:25](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L25) +[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:25](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L25) [//]: # "End of generated content" diff --git a/docusaurus/docs/Angular/components/AutocompleteTextareaComponent.mdx b/docusaurus/docs/Angular/components/AutocompleteTextareaComponent.mdx index d5159d8d..4a17a50c 100644 --- a/docusaurus/docs/Angular/components/AutocompleteTextareaComponent.mdx +++ b/docusaurus/docs/Angular/components/AutocompleteTextareaComponent.mdx @@ -51,7 +51,7 @@ TextareaInterface.value #### Defined in -[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:49](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L49) +[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:49](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L49) --- @@ -67,7 +67,7 @@ TextareaInterface.placeholder #### Defined in -[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:53](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L53) +[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:53](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L53) --- @@ -83,7 +83,7 @@ TextareaInterface.areMentionsEnabled #### Defined in -[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:57](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L57) +[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:57](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L57) --- @@ -99,7 +99,7 @@ TextareaInterface.inputMode #### Defined in -[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:61](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L61) +[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:61](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L61) --- @@ -115,7 +115,7 @@ TextareaInterface.mentionScope #### Defined in -[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:65](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L65) +[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:65](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L65) --- @@ -131,7 +131,7 @@ TextareaInterface.autoFocus #### Defined in -[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:69](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L69) +[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:69](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L69) --- @@ -147,7 +147,7 @@ TextareaInterface.valueChange #### Defined in -[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:73](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L73) +[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:73](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L73) --- @@ -163,7 +163,7 @@ TextareaInterface.send #### Defined in -[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:77](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L77) +[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:77](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L77) --- @@ -179,6 +179,6 @@ TextareaInterface.userMentions #### Defined in -[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:81](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L81) +[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:81](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L81) [//]: # "End of generated content" diff --git a/docusaurus/docs/Angular/components/AvatarComponent.mdx b/docusaurus/docs/Angular/components/AvatarComponent.mdx index 500fab99..16de5550 100644 --- a/docusaurus/docs/Angular/components/AvatarComponent.mdx +++ b/docusaurus/docs/Angular/components/AvatarComponent.mdx @@ -71,7 +71,7 @@ An optional name of the image, used for fallback image or image title (if `image #### Defined in -[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:36](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L36) +[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:36](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L36) --- @@ -83,7 +83,7 @@ The URL of the image to be displayed. If the image can't be displayed the first #### Defined in -[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:40](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L40) +[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:40](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L40) --- @@ -95,7 +95,7 @@ The location the avatar will be displayed in #### Defined in -[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:44](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L44) +[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:44](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L44) --- @@ -107,7 +107,7 @@ The channel the avatar belongs to (if avatar of a channel is displayed) #### Defined in -[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:48](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L48) +[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:48](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L48) --- @@ -119,7 +119,7 @@ The user the avatar belongs to (if avatar of a user is displayed) #### Defined in -[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:52](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L52) +[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:52](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L52) --- @@ -131,7 +131,7 @@ The type of the avatar: channel if channel avatar is displayed, user if user ava #### Defined in -[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:56](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L56) +[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:56](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L56) --- @@ -143,7 +143,7 @@ If a channel avatar is displayed, and if the channel has exactly two members a g #### Defined in -[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:60](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L60) +[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:60](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L60) --- @@ -155,6 +155,6 @@ If channel/user image isn't provided the initials of the name of the channel/use #### Defined in -[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:64](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L64) +[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:64](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L64) [//]: # "End of generated content" diff --git a/docusaurus/docs/Angular/components/AvatarPlaceholderComponent.mdx b/docusaurus/docs/Angular/components/AvatarPlaceholderComponent.mdx index 015840de..b5f30ff9 100644 --- a/docusaurus/docs/Angular/components/AvatarPlaceholderComponent.mdx +++ b/docusaurus/docs/Angular/components/AvatarPlaceholderComponent.mdx @@ -12,7 +12,7 @@ An optional name of the image, used for fallback image or image title (if `image #### Defined in -[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:23](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L23) +[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:23](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L23) --- @@ -24,7 +24,7 @@ The URL of the image to be displayed. If the image can't be displayed the first #### Defined in -[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:27](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L27) +[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:27](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L27) --- @@ -36,7 +36,7 @@ The location the avatar will be displayed in #### Defined in -[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:31](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L31) +[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:31](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L31) --- @@ -48,7 +48,7 @@ The channel the avatar belongs to (if avatar of a channel is displayed) #### Defined in -[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:35](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L35) +[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:35](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L35) --- @@ -60,7 +60,7 @@ The user the avatar belongs to (if avatar of a user is displayed) #### Defined in -[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L39) +[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L39) --- @@ -72,7 +72,7 @@ The type of the avatar: channel if channel avatar is displayed, user if user ava #### Defined in -[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L43) +[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L43) --- @@ -84,7 +84,7 @@ If channel/user image isn't provided the initials of the name of the channel/use #### Defined in -[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L47) +[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L47) --- @@ -96,6 +96,6 @@ If a channel avatar is displayed, and if the channel has exactly two members a g #### Defined in -[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:53](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L53) +[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:53](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L53) [//]: # "End of generated content" diff --git a/docusaurus/docs/Angular/components/ChannelPreviewComponent.mdx b/docusaurus/docs/Angular/components/ChannelPreviewComponent.mdx index ba1bca02..090a41fd 100644 --- a/docusaurus/docs/Angular/components/ChannelPreviewComponent.mdx +++ b/docusaurus/docs/Angular/components/ChannelPreviewComponent.mdx @@ -37,6 +37,6 @@ The channel to be displayed #### Defined in -[projects/stream-chat-angular/src/lib/channel-preview/channel-preview.component.ts:28](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel-preview/channel-preview.component.ts#L28) +[projects/stream-chat-angular/src/lib/channel-preview/channel-preview.component.ts:28](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel-preview/channel-preview.component.ts#L28) [//]: # "End of generated content" diff --git a/docusaurus/docs/Angular/components/IconComponent.mdx b/docusaurus/docs/Angular/components/IconComponent.mdx index 1ee918a2..7cc5cb57 100644 --- a/docusaurus/docs/Angular/components/IconComponent.mdx +++ b/docusaurus/docs/Angular/components/IconComponent.mdx @@ -33,6 +33,6 @@ The icon to display, the list of [supported icons](https://github.com/GetStream/ #### Defined in -[projects/stream-chat-angular/src/lib/icon/icon.component.ts:37](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/icon/icon.component.ts#L37) +[projects/stream-chat-angular/src/lib/icon/icon.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/icon/icon.component.ts#L39) [//]: # "End of generated content" diff --git a/docusaurus/docs/Angular/components/IconPlaceholderComponent.mdx b/docusaurus/docs/Angular/components/IconPlaceholderComponent.mdx index d938cca5..f66b7fe9 100644 --- a/docusaurus/docs/Angular/components/IconPlaceholderComponent.mdx +++ b/docusaurus/docs/Angular/components/IconPlaceholderComponent.mdx @@ -12,6 +12,6 @@ The icon to display, the list of [supported icons](https://github.com/GetStream/ #### Defined in -[projects/stream-chat-angular/src/lib/icon-placeholder/icon-placeholder.component.ts:18](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/icon-placeholder/icon-placeholder.component.ts#L18) +[projects/stream-chat-angular/src/lib/icon/icon-placeholder/icon-placeholder.component.ts:18](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/icon/icon-placeholder/icon-placeholder.component.ts#L18) [//]: # "End of generated content" diff --git a/docusaurus/docs/Angular/components/MessageActionsBoxComponent.mdx b/docusaurus/docs/Angular/components/MessageActionsBoxComponent.mdx index ded39d6b..a2c194d2 100644 --- a/docusaurus/docs/Angular/components/MessageActionsBoxComponent.mdx +++ b/docusaurus/docs/Angular/components/MessageActionsBoxComponent.mdx @@ -48,7 +48,7 @@ Indicates if the message actions are belonging to a message that was sent by the #### Defined in -[projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts:37](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L37) +[projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts:37](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L37) --- @@ -60,7 +60,7 @@ The message the actions will be executed on #### Defined in -[projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts:41](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L41) +[projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts:41](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L41) --- @@ -72,7 +72,7 @@ The HTML element which contains the message text, it's used for the "copy messag #### Defined in -[projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts:45](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L45) +[projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts:45](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L45) --- @@ -84,6 +84,6 @@ The list of [channel capabilities](https://getstream.io/chat/docs/javascript/cha #### Defined in -[projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts:49](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L49) +[projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts:49](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L49) [//]: # "End of generated content" diff --git a/docusaurus/docs/Angular/components/MessageComponent.mdx b/docusaurus/docs/Angular/components/MessageComponent.mdx index 28308e19..e7871d5a 100644 --- a/docusaurus/docs/Angular/components/MessageComponent.mdx +++ b/docusaurus/docs/Angular/components/MessageComponent.mdx @@ -73,7 +73,7 @@ The message to be displayed #### Defined in -[projects/stream-chat-angular/src/lib/message/message.component.ts:64](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message/message.component.ts#L64) +[projects/stream-chat-angular/src/lib/message/message.component.ts:64](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message/message.component.ts#L64) --- @@ -85,7 +85,7 @@ The list of [channel capabilities](https://getstream.io/chat/docs/javascript/cha #### Defined in -[projects/stream-chat-angular/src/lib/message/message.component.ts:68](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message/message.component.ts#L68) +[projects/stream-chat-angular/src/lib/message/message.component.ts:68](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message/message.component.ts#L68) --- @@ -97,7 +97,7 @@ If `true`, the message status (sending, sent, who read the message) is displayed #### Defined in -[projects/stream-chat-angular/src/lib/message/message.component.ts:72](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message/message.component.ts#L72) +[projects/stream-chat-angular/src/lib/message/message.component.ts:72](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message/message.component.ts#L72) --- @@ -109,7 +109,7 @@ Determines if the message is being dispalyed in a channel or in a [thread](https #### Defined in -[projects/stream-chat-angular/src/lib/message/message.component.ts:76](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message/message.component.ts#L76) +[projects/stream-chat-angular/src/lib/message/message.component.ts:76](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message/message.component.ts#L76) --- @@ -121,7 +121,7 @@ Highlighting is used to add visual emphasize to a message when jumping to the me #### Defined in -[projects/stream-chat-angular/src/lib/message/message.component.ts:80](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message/message.component.ts#L80) +[projects/stream-chat-angular/src/lib/message/message.component.ts:80](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message/message.component.ts#L80) --- @@ -133,6 +133,6 @@ An Observable that emits when the message list is scrolled, it's used to prevent #### Defined in -[projects/stream-chat-angular/src/lib/message/message.component.ts:84](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message/message.component.ts#L84) +[projects/stream-chat-angular/src/lib/message/message.component.ts:84](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message/message.component.ts#L84) [//]: # "End of generated content" diff --git a/docusaurus/docs/Angular/components/MessageInputComponent.mdx b/docusaurus/docs/Angular/components/MessageInputComponent.mdx index 6f4ec10e..9ff99e01 100644 --- a/docusaurus/docs/Angular/components/MessageInputComponent.mdx +++ b/docusaurus/docs/Angular/components/MessageInputComponent.mdx @@ -8,6 +8,10 @@ The `MessageInput` component can use the [`Textarea`](./TextareaComponent.mdx) o The SDK doesn't have a built-in emoji picker, but it has support for providing your own template. Follow our [emoji picker guide](../code-examples/emoji-picker.mdx) to get to know more. +## Voice recorder + +To enable recording voice messages, please follow the [voice recordings guide](../../code-examples/voice-recordings). + ## Customization If you want to provide your own message input component you'll have to provide it in the following places: @@ -17,6 +21,15 @@ If you want to provide your own message input component you'll have to provide i You can replace the textarea inside the message input following our [Custom textarea guide](../../code-examples/custom-textarea) +You can instert custom HTML content to the start or end of the message input using the `message-input-start` or `message-input-end` attributes: + +```html + +
Custom content injected before the textarea
+
Custom content injected after the textarea
+
+``` + See [our customization guide](../concepts/customization.mdx) for more information. :::note @@ -59,7 +72,7 @@ If file upload is enabled, the user can open a file selector from the input. Ple #### Defined in -[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:59](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L59) +[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:64](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L64) --- @@ -71,7 +84,7 @@ If true, users can mention other users in messages. You also [need to use the `A #### Defined in -[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:63](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L63) +[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:68](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L68) --- @@ -83,7 +96,7 @@ The scope for user mentions, either members of the current channel of members of #### Defined in -[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:67](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L67) +[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:72](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L72) --- @@ -95,7 +108,7 @@ Determines if the message is being dispalyed in a channel or in a [thread](https #### Defined in -[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:71](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L71) +[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:76](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L76) --- @@ -107,7 +120,7 @@ If true, users can select multiple files to upload. If no value is provided, it #### Defined in -[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:75](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L75) +[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:80](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L80) --- @@ -119,7 +132,7 @@ The message to edit #### Defined in -[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:79](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L79) +[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:84](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L84) --- @@ -131,7 +144,7 @@ An observable that can be used to trigger message sending from the outside #### Defined in -[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:83](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L83) +[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:88](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L88) --- @@ -143,7 +156,7 @@ In `desktop` mode the `Enter` key will trigger message sending, in `mobile` mode #### Defined in -[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:87](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L87) +[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:92](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L92) --- @@ -155,7 +168,7 @@ Enables or disables auto focus on the textarea element #### Defined in -[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:91](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L91) +[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:96](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L96) --- @@ -169,7 +182,7 @@ If you don't need that behavior, you can turn this of with this flag. In that ca #### Defined in -[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:97](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L97) +[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:102](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L102) --- @@ -181,7 +194,19 @@ Use this input to control wether a send button is rendered or not. If you don't #### Defined in -[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:101](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L101) +[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:106](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L106) + +--- + +### displayVoiceRecordingButton + +• **displayVoiceRecordingButton**: `boolean` = `false` + +You can enable/disable voice recordings with this input + +#### Defined in + +[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:110](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L110) --- @@ -193,6 +218,6 @@ Emits when a message was successfuly sent or updated #### Defined in -[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:105](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L105) +[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:114](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L114) [//]: # "End of generated content" diff --git a/docusaurus/docs/Angular/components/MessageListComponent.mdx b/docusaurus/docs/Angular/components/MessageListComponent.mdx index b340336c..7a936cac 100644 --- a/docusaurus/docs/Angular/components/MessageListComponent.mdx +++ b/docusaurus/docs/Angular/components/MessageListComponent.mdx @@ -33,7 +33,7 @@ Determines if the message list should display channel messages or [thread messag #### Defined in -[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:62](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L62) +[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:63](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L63) --- @@ -45,7 +45,7 @@ The direction of the messages in the list, `bottom-to-top` means newest message #### Defined in -[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:66](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L66) +[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:67](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L67) --- @@ -57,7 +57,7 @@ You can hide the "jump to latest" button while scrolling. A potential use-case f #### Defined in -[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:71](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L71) +[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:72](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L72) --- @@ -69,7 +69,7 @@ If `true` date separators will be displayed #### Defined in -[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:75](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L75) +[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:76](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L76) --- @@ -81,7 +81,7 @@ If `true` unread indicator will be displayed #### Defined in -[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:79](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L79) +[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:80](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L80) --- @@ -93,7 +93,7 @@ If date separators are displayed, you can set the horizontal position of the dat #### Defined in -[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:83](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L83) +[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:84](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L84) --- @@ -105,7 +105,7 @@ If date separators are displayed, you can set the horizontal position of the dat #### Defined in -[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:87](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L87) +[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:88](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L88) --- @@ -119,7 +119,7 @@ This is only applicable for `main` mode, as threads doesn't have read infromatio #### Defined in -[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:94](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L94) +[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:95](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L95) --- @@ -131,6 +131,6 @@ You can turn on and off the loading indicator that signals to users that more me #### Defined in -[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:98](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L98) +[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:99](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L99) [//]: # "End of generated content" diff --git a/docusaurus/docs/Angular/components/MessageReactionsComponent.mdx b/docusaurus/docs/Angular/components/MessageReactionsComponent.mdx index 6846f45a..d1e78d4a 100644 --- a/docusaurus/docs/Angular/components/MessageReactionsComponent.mdx +++ b/docusaurus/docs/Angular/components/MessageReactionsComponent.mdx @@ -53,7 +53,19 @@ The id of the message the reactions belong to #### Defined in -[projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts:33](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L33) +[projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts:36](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L36) + +--- + +### messageReactionGroups + +• **messageReactionGroups**: `undefined` \| \{ `[key: string]`: `ReactionGroupResponse`; } = `undefined` + +The number of reactions grouped by [reaction types](https://github.com/GetStream/stream-chat-angular/tree/master/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts) + +#### Defined in + +[projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts:40](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L40) --- @@ -63,9 +75,13 @@ The id of the message the reactions belong to The number of reactions grouped by [reaction types](https://github.com/GetStream/stream-chat-angular/tree/master/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts) +**`Deprecated`** + +use `messageReactionGroups` + #### Defined in -[projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts:37](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L37) +[projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L47) --- @@ -75,9 +91,13 @@ The number of reactions grouped by [reaction types](https://github.com/GetStream List of reactions of a [message](../types/stream-message.mdx), used to display the users of a reaction type. +**`Deprecated`** + +you can fetch the reactions using [`messageReactionsService.queryReactions()`](https://getstream.io/chat/docs/sdk/angular/services/MessageReactionsService/#queryreactions) + #### Defined in -[projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts:42](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L42) +[projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts:53](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L53) --- @@ -89,6 +109,6 @@ List of the user's own reactions of a [message](../types/stream-message.mdx), us #### Defined in -[projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts:46](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L46) +[projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts:57](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L57) [//]: # "End of generated content" diff --git a/docusaurus/docs/Angular/components/MessageReactionsSelectorComponent.mdx b/docusaurus/docs/Angular/components/MessageReactionsSelectorComponent.mdx index 3c91ff2b..9214ea13 100644 --- a/docusaurus/docs/Angular/components/MessageReactionsSelectorComponent.mdx +++ b/docusaurus/docs/Angular/components/MessageReactionsSelectorComponent.mdx @@ -46,7 +46,7 @@ List of the user's own reactions of a [message](../types/stream-message.mdx), us #### Defined in -[projects/stream-chat-angular/src/lib/message-reactions-selector/message-reactions-selector.component.ts:29](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-reactions-selector/message-reactions-selector.component.ts#L29) +[projects/stream-chat-angular/src/lib/message-reactions-selector/message-reactions-selector.component.ts:29](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-reactions-selector/message-reactions-selector.component.ts#L29) --- @@ -58,6 +58,6 @@ The id of the message the reactions belong to #### Defined in -[projects/stream-chat-angular/src/lib/message-reactions-selector/message-reactions-selector.component.ts:33](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-reactions-selector/message-reactions-selector.component.ts#L33) +[projects/stream-chat-angular/src/lib/message-reactions-selector/message-reactions-selector.component.ts:33](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-reactions-selector/message-reactions-selector.component.ts#L33) [//]: # "End of generated content" diff --git a/docusaurus/docs/Angular/components/ModalComponent.mdx b/docusaurus/docs/Angular/components/ModalComponent.mdx index 764451b9..520c891a 100644 --- a/docusaurus/docs/Angular/components/ModalComponent.mdx +++ b/docusaurus/docs/Angular/components/ModalComponent.mdx @@ -28,7 +28,7 @@ If `true` the modal will be displayed, if `false` the modal will be hidden #### Defined in -[projects/stream-chat-angular/src/lib/modal/modal.component.ts:25](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/modal/modal.component.ts#L25) +[projects/stream-chat-angular/src/lib/modal/modal.component.ts:25](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/modal/modal.component.ts#L25) --- @@ -40,7 +40,7 @@ The content of the modal (can also be provided using `ng-content`) #### Defined in -[projects/stream-chat-angular/src/lib/modal/modal.component.ts:29](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/modal/modal.component.ts#L29) +[projects/stream-chat-angular/src/lib/modal/modal.component.ts:29](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/modal/modal.component.ts#L29) --- @@ -52,6 +52,6 @@ Emits `true` if the modal becomes visible, and `false` if the modal is closed. #### Defined in -[projects/stream-chat-angular/src/lib/modal/modal.component.ts:33](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/modal/modal.component.ts#L33) +[projects/stream-chat-angular/src/lib/modal/modal.component.ts:33](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/modal/modal.component.ts#L33) [//]: # "End of generated content" diff --git a/docusaurus/docs/Angular/components/NotificationComponent.mdx b/docusaurus/docs/Angular/components/NotificationComponent.mdx index a61fae78..1e760ad4 100644 --- a/docusaurus/docs/Angular/components/NotificationComponent.mdx +++ b/docusaurus/docs/Angular/components/NotificationComponent.mdx @@ -24,7 +24,7 @@ The type of the notification #### Defined in -[projects/stream-chat-angular/src/lib/notification/notification.component.ts:16](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/notification/notification.component.ts#L16) +[projects/stream-chat-angular/src/lib/notification/notification.component.ts:16](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/notification/notification.component.ts#L16) --- @@ -36,6 +36,6 @@ The content of the notification (can also be provided using `ng-content`) #### Defined in -[projects/stream-chat-angular/src/lib/notification/notification.component.ts:20](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/notification/notification.component.ts#L20) +[projects/stream-chat-angular/src/lib/notification/notification.component.ts:20](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/notification/notification.component.ts#L20) [//]: # "End of generated content" diff --git a/docusaurus/docs/Angular/components/PaginatedListComponent.mdx b/docusaurus/docs/Angular/components/PaginatedListComponent.mdx index 6fb1ad44..accfa433 100644 --- a/docusaurus/docs/Angular/components/PaginatedListComponent.mdx +++ b/docusaurus/docs/Angular/components/PaginatedListComponent.mdx @@ -24,4 +24,69 @@ The paginated list component relies on data provided by the parent component. Yo You can provide the HTML template for the list items, see above example. [//]: # "Start of generated content" + +## Inputs and outputs + +### items + +• **items**: `T`[] = `[]` + +The items to display + +#### Defined in + +[projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.ts:28](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.ts#L28) + +--- + +### isLoading + +• **isLoading**: `boolean` = `false` + +If `true`, the loading indicator will be displayed + +#### Defined in + +[projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.ts:32](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.ts#L32) + +--- + +### hasMore + +• **hasMore**: `boolean` = `false` + +If `false` the component won't ask for more data vua the `loadMore` output + +#### Defined in + +[projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.ts:36](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.ts#L36) + +--- + +### trackBy + +• **trackBy**: `TrackByFunction`\<`T`\> + +The `trackBy` to use with the `NgFor` directive + +**`Param`** + +#### Defined in + +[projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.ts:42](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.ts#L42) + +--- + +### loadMore + +• `Readonly` **loadMore**: `EventEmitter`\<`void`\> + +The component will signal via this output when more items should be fetched + +The new items should be appended to the `items` array + +#### Defined in + +[projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.ts:49](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.ts#L49) + [//]: # "End of generated content" diff --git a/docusaurus/docs/Angular/components/TextareaComponent.mdx b/docusaurus/docs/Angular/components/TextareaComponent.mdx index 7f8cb803..c82cdb17 100644 --- a/docusaurus/docs/Angular/components/TextareaComponent.mdx +++ b/docusaurus/docs/Angular/components/TextareaComponent.mdx @@ -48,7 +48,7 @@ TextareaInterface.value #### Defined in -[projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts:35](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L35) +[projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts:35](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L35) --- @@ -64,7 +64,7 @@ TextareaInterface.placeholder #### Defined in -[projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L39) +[projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L39) --- @@ -80,7 +80,7 @@ TextareaInterface.inputMode #### Defined in -[projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L43) +[projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L43) --- @@ -96,7 +96,7 @@ TextareaInterface.autoFocus #### Defined in -[projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L47) +[projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L47) --- @@ -112,7 +112,7 @@ TextareaInterface.valueChange #### Defined in -[projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L51) +[projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L51) --- @@ -128,6 +128,6 @@ TextareaInterface.send #### Defined in -[projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts:55](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L55) +[projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts:55](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L55) [//]: # "End of generated content" diff --git a/docusaurus/docs/Angular/components/UserListComponent.mdx b/docusaurus/docs/Angular/components/UserListComponent.mdx index 011d55de..385e2b65 100644 --- a/docusaurus/docs/Angular/components/UserListComponent.mdx +++ b/docusaurus/docs/Angular/components/UserListComponent.mdx @@ -18,4 +18,55 @@ The user list component relies on data provided by the parent component: The component is built on top of the [`PaginatedListComponent`](../../components/PaginatedListComponent.mdx), you can use that component to build your own user list component. [//]: # "Start of generated content" + +## Inputs and outputs + +### users + +• **users**: `UserResponse`\<`DefaultStreamChatGenerics`\>[] = `[]` + +The users to display + +#### Defined in + +[projects/stream-chat-angular/src/lib/user-list/user-list.component.ts:17](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/user-list/user-list.component.ts#L17) + +--- + +### isLoading + +• **isLoading**: `boolean` = `false` + +If `true`, the loading indicator will be displayed + +#### Defined in + +[projects/stream-chat-angular/src/lib/user-list/user-list.component.ts:21](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/user-list/user-list.component.ts#L21) + +--- + +### hasMore + +• **hasMore**: `boolean` = `false` + +If `false` the component won't ask for more data vua the `loadMore` output + +#### Defined in + +[projects/stream-chat-angular/src/lib/user-list/user-list.component.ts:25](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/user-list/user-list.component.ts#L25) + +--- + +### loadMore + +• `Readonly` **loadMore**: `EventEmitter`\<`void`\> + +The component will signal via this output when more items should be fetched + +The new items should be appended to the `items` array + +#### Defined in + +[projects/stream-chat-angular/src/lib/user-list/user-list.component.ts:31](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/user-list/user-list.component.ts#L31) + [//]: # "End of generated content" diff --git a/docusaurus/docs/Angular/components/VoiceRecorderComponent.mdx b/docusaurus/docs/Angular/components/VoiceRecorderComponent.mdx new file mode 100644 index 00000000..dbb19b40 --- /dev/null +++ b/docusaurus/docs/Angular/components/VoiceRecorderComponent.mdx @@ -0,0 +1,16 @@ +import VoiceRecorder from "../assets/voice-recorder.png"; + +The `VoiceRecorderComponent` makes it possible to record audio, and then upload it as a voice recording attachment + + + +## Usage + +Please refer to the [voice recordings guide](../../code-examples/voice-recordings) + +## Customization + +Please refer to the [voice recordings guide](../../code-examples/voice-recordings) + +[//]: # "Start of generated content" +[//]: # "End of generated content" diff --git a/docusaurus/docs/Angular/components/VoiceRecorderWavebarComponent.mdx b/docusaurus/docs/Angular/components/VoiceRecorderWavebarComponent.mdx new file mode 100644 index 00000000..108e08e8 --- /dev/null +++ b/docusaurus/docs/Angular/components/VoiceRecorderWavebarComponent.mdx @@ -0,0 +1,28 @@ +import VoiceRecorderWavebar from "../assets/voice-recorder-wavebar.png"; + +The `VoiceRecorderWavebarComponent` displays the amplitudes of the recording while the recoding is in progress + + + +The component doesn't have any inputs, instead it uses the [`AudioRecorderService`](../../services/AudioRecorderService.mdx) and the [`AmplitudeRecorderService`](../../services/AmplitudeRecorderService.mdx) to gather all necessary data. + +## Usage + +```html + +``` + +```typescript +isRecording$: Observable; + +constructor(public readonly recorder: AudioRecorderService) { + this.isRecording$ = this.recorder.recordingState$.pipe(map(s => s === MediaRecordingState.RECORDING || s === MediaRecordingState.PAUSED)); +} +``` + +## Customization + +[//]: # "Start of generated content" +[//]: # "End of generated content" diff --git a/docusaurus/docs/Angular/components/VoiceRecordingComponent.mdx b/docusaurus/docs/Angular/components/VoiceRecordingComponent.mdx index 74b1b26f..b1295cae 100644 --- a/docusaurus/docs/Angular/components/VoiceRecordingComponent.mdx +++ b/docusaurus/docs/Angular/components/VoiceRecordingComponent.mdx @@ -82,6 +82,6 @@ The voice recording attachment #### Defined in -[projects/stream-chat-angular/src/lib/voice-recording/voice-recording.component.ts:28](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/voice-recording/voice-recording.component.ts#L28) +[projects/stream-chat-angular/src/lib/voice-recording/voice-recording.component.ts:29](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/voice-recording/voice-recording.component.ts#L29) [//]: # "End of generated content" diff --git a/docusaurus/docs/Angular/components/VoiceRecordingWavebarComponent.mdx b/docusaurus/docs/Angular/components/VoiceRecordingWavebarComponent.mdx index c5b73616..e6f56be5 100644 --- a/docusaurus/docs/Angular/components/VoiceRecordingWavebarComponent.mdx +++ b/docusaurus/docs/Angular/components/VoiceRecordingWavebarComponent.mdx @@ -34,7 +34,7 @@ The audio element that plays the voice recording #### Defined in -[projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts:28](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts#L28) +[projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts:29](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts#L29) --- @@ -46,7 +46,7 @@ The waveform data to visualize #### Defined in -[projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts:32](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts#L32) +[projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts:33](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts#L33) --- @@ -58,6 +58,6 @@ The duration of the voice recording in seconds #### Defined in -[projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts:36](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts#L36) +[projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts:37](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts#L37) [//]: # "End of generated content" diff --git a/docusaurus/docs/Angular/services/AmplitudeRecorderService.mdx b/docusaurus/docs/Angular/services/AmplitudeRecorderService.mdx new file mode 100644 index 00000000..00dda070 --- /dev/null +++ b/docusaurus/docs/Angular/services/AmplitudeRecorderService.mdx @@ -0,0 +1,89 @@ +# AmplitudeRecorderService + +The `AmplitudeRecorderService` is a utility service used to create amplitude values for voice recordings, making it possible to display a wave bar + +## Accessors + +### amplitudes + +• `get` **amplitudes**(): `number`[] + +The recorded amplitudes + +#### Returns + +`number`[] + +#### Defined in + +[projects/stream-chat-angular/src/lib/voice-recorder/amplitude-recorder.service.ts:76](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/voice-recorder/amplitude-recorder.service.ts#L76) + +## Methods + +### pause + +▸ **pause**(): `void` + +Temporarily pause amplitude recording, recording can be resumed with `resume` + +#### Returns + +`void` + +#### Defined in + +[projects/stream-chat-angular/src/lib/voice-recorder/amplitude-recorder.service.ts:96](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/voice-recorder/amplitude-recorder.service.ts#L96) + +--- + +### resume + +▸ **resume**(): `void` + +Resume amplited recording after it was pasued + +#### Returns + +`void` + +#### Defined in + +[projects/stream-chat-angular/src/lib/voice-recorder/amplitude-recorder.service.ts:104](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/voice-recorder/amplitude-recorder.service.ts#L104) + +--- + +### start + +▸ **start**(`stream`): `void` + +Start amplitude recording for the given media stream + +#### Parameters + +| Name | Type | +| :------- | :------------ | +| `stream` | `MediaStream` | + +#### Returns + +`void` + +#### Defined in + +[projects/stream-chat-angular/src/lib/voice-recorder/amplitude-recorder.service.ts:84](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/voice-recorder/amplitude-recorder.service.ts#L84) + +--- + +### stop + +▸ **stop**(): `void` + +Stop the amplitude recording and frees up used resources + +#### Returns + +`void` + +#### Defined in + +[projects/stream-chat-angular/src/lib/voice-recorder/amplitude-recorder.service.ts:129](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/voice-recorder/amplitude-recorder.service.ts#L129) diff --git a/docusaurus/docs/Angular/services/AttachmentConfigurationService.mdx b/docusaurus/docs/Angular/services/AttachmentConfigurationService.mdx index 8f3fca9c..17c34680 100644 --- a/docusaurus/docs/Angular/services/AttachmentConfigurationService.mdx +++ b/docusaurus/docs/Angular/services/AttachmentConfigurationService.mdx @@ -32,7 +32,7 @@ A custom handler can be provided to override the default giphy attachment (GIFs #### Defined in -[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:37](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L37) +[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:37](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L37) --- @@ -60,7 +60,7 @@ A custom handler can be provided to override the default image attachment (image #### Defined in -[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:22](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L22) +[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:22](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L22) --- @@ -86,7 +86,7 @@ A custom handler can be provided to override the default scraped image attachmen #### Defined in -[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:43](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L43) +[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:43](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L43) --- @@ -113,7 +113,7 @@ A custom handler can be provided to override the default video attachment (video #### Defined in -[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:30](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L30) +[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:30](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L30) --- @@ -125,7 +125,7 @@ You can turn on/off thumbnail generation for video attachments #### Defined in -[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:49](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L49) +[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:49](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L49) ## Methods @@ -147,7 +147,7 @@ Handles the configuration for giphy attachments, it's possible to provide your o #### Defined in -[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:180](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L180) +[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:180](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L180) --- @@ -171,7 +171,7 @@ Handles the configuration for image attachments, it's possible to provide your o #### Defined in -[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:57](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L57) +[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:57](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L57) --- @@ -193,7 +193,7 @@ Handles the configuration for scraped image attachments, it's possible to provid #### Defined in -[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:200](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L200) +[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:200](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L200) --- @@ -216,4 +216,4 @@ Handles the configuration for video attachments, it's possible to provide your o #### Defined in -[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:123](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L123) +[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:123](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L123) diff --git a/docusaurus/docs/Angular/services/AttachmentService.mdx b/docusaurus/docs/Angular/services/AttachmentService.mdx index ba0dea51..93981cba 100644 --- a/docusaurus/docs/Angular/services/AttachmentService.mdx +++ b/docusaurus/docs/Angular/services/AttachmentService.mdx @@ -20,7 +20,7 @@ Emits the number of uploads in progress. #### Defined in -[projects/stream-chat-angular/src/lib/attachment.service.ts:25](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment.service.ts#L25) +[projects/stream-chat-angular/src/lib/attachment.service.ts:29](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/attachment.service.ts#L29) --- @@ -32,7 +32,7 @@ Emits the state of the uploads ([`AttachmentUpload[]`](https://github.com/GetStr #### Defined in -[projects/stream-chat-angular/src/lib/attachment.service.ts:29](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment.service.ts#L29) +[projects/stream-chat-angular/src/lib/attachment.service.ts:33](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/attachment.service.ts#L33) ## Methods @@ -56,7 +56,7 @@ Note: If you just want to use your own CDN for file uploads, you don't necessary #### Defined in -[projects/stream-chat-angular/src/lib/attachment.service.ts:120](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment.service.ts#L120) +[projects/stream-chat-angular/src/lib/attachment.service.ts:157](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/attachment.service.ts#L157) --- @@ -78,7 +78,7 @@ Maps attachments received from the Stream API to uploads. This is useful when ed #### Defined in -[projects/stream-chat-angular/src/lib/attachment.service.ts:206](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment.service.ts#L206) +[projects/stream-chat-angular/src/lib/attachment.service.ts:246](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/attachment.service.ts#L246) --- @@ -100,7 +100,7 @@ Deletes an attachment, the attachment can have any state (`error`, `uploading` o #### Defined in -[projects/stream-chat-angular/src/lib/attachment.service.ts:145](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment.service.ts#L145) +[projects/stream-chat-angular/src/lib/attachment.service.ts:182](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/attachment.service.ts#L182) --- @@ -124,7 +124,7 @@ A promise with true or false. If false is returned the upload was canceled becau #### Defined in -[projects/stream-chat-angular/src/lib/attachment.service.ts:62](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment.service.ts#L62) +[projects/stream-chat-angular/src/lib/attachment.service.ts:99](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/attachment.service.ts#L99) --- @@ -142,7 +142,7 @@ the attachments #### Defined in -[projects/stream-chat-angular/src/lib/attachment.service.ts:175](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment.service.ts#L175) +[projects/stream-chat-angular/src/lib/attachment.service.ts:212](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/attachment.service.ts#L212) --- @@ -158,7 +158,7 @@ Resets the attachments uploads (for example after the message with the attachmen #### Defined in -[projects/stream-chat-angular/src/lib/attachment.service.ts:53](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment.service.ts#L53) +[projects/stream-chat-angular/src/lib/attachment.service.ts:57](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/attachment.service.ts#L57) --- @@ -182,4 +182,28 @@ A promise with the result #### Defined in -[projects/stream-chat-angular/src/lib/attachment.service.ts:130](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment.service.ts#L130) +[projects/stream-chat-angular/src/lib/attachment.service.ts:167](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/attachment.service.ts#L167) + +--- + +### uploadVoiceRecording + +▸ **uploadVoiceRecording**(`audioRecording`): `Promise`\<`boolean`\> + +Upload a voice recording + +#### Parameters + +| Name | Type | +| :--------------- | :--------------- | +| `audioRecording` | `AudioRecording` | + +#### Returns + +`Promise`\<`boolean`\> + +A promise with true or false. If false is returned the upload was canceled because of a client side error. The error is emitted via the `NotificationService`. + +#### Defined in + +[projects/stream-chat-angular/src/lib/attachment.service.ts:66](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/attachment.service.ts#L66) diff --git a/docusaurus/docs/Angular/services/AudioRecorderService.mdx b/docusaurus/docs/Angular/services/AudioRecorderService.mdx new file mode 100644 index 00000000..d1479ed6 --- /dev/null +++ b/docusaurus/docs/Angular/services/AudioRecorderService.mdx @@ -0,0 +1,117 @@ +# AudioRecorderService + +The `AudioRecorderService` can record an audio file, the SDK uses this to record a voice message + +## Hierarchy + +- `MultimediaRecorder`<`Omit`\<`AudioRecording`, keyof `MediaRecording`\>\> + + ↳ **`AudioRecorderService`** + +## Properties + +### config + +• **config**: `MediaRecorderConfig` + +Due to browser restrictions the following config is used: + +- In Safari we record in audio/mp4 +- For all other browsers we use audio/webm (which is then transcoded to wav) + +#### Overrides + +MultimediaRecorder.config + +#### Defined in + +[projects/stream-chat-angular/src/lib/voice-recorder/audio-recorder.service.ts:24](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/voice-recorder/audio-recorder.service.ts#L24) + +## Methods + +### pause + +▸ **pause**(): `void` + +Pause audio recording, it can be restarted using `resume` + +#### Returns + +`void` + +#### Overrides + +MultimediaRecorder.pause + +#### Defined in + +[projects/stream-chat-angular/src/lib/voice-recorder/audio-recorder.service.ts:62](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/voice-recorder/audio-recorder.service.ts#L62) + +--- + +### resume + +▸ **resume**(): `void` + +Resume a previously paused recording + +#### Returns + +`void` + +#### Overrides + +MultimediaRecorder.resume + +#### Defined in + +[projects/stream-chat-angular/src/lib/voice-recorder/audio-recorder.service.ts:73](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/voice-recorder/audio-recorder.service.ts#L73) + +--- + +### start + +▸ **start**(): `Promise`\<`void`\> + +Start audio recording + +#### Returns + +`Promise`\<`void`\> + +#### Overrides + +MultimediaRecorder.start + +#### Defined in + +[projects/stream-chat-angular/src/lib/voice-recorder/audio-recorder.service.ts:49](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/voice-recorder/audio-recorder.service.ts#L49) + +--- + +### stop + +▸ **stop**(`options?`): `Promise`\<`MediaRecording` & `Omit`\<`AudioRecording`, keyof `MediaRecording`\>\> + +Stop the recording and free up used resources + +#### Parameters + +| Name | Type | Description | +| :--------------- | :-------- | :-------------------------------------------------------------------------- | +| `options?` | `Object` | | +| `options.cancel` | `boolean` | if this is `true` no recording will be created, but resources will be freed | + +#### Returns + +`Promise`\<`MediaRecording` & `Omit`\<`AudioRecording`, keyof `MediaRecording`\>\> + +the recording + +#### Overrides + +MultimediaRecorder.stop + +#### Defined in + +[projects/stream-chat-angular/src/lib/voice-recorder/audio-recorder.service.ts:87](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/voice-recorder/audio-recorder.service.ts#L87) diff --git a/docusaurus/docs/Angular/services/ChannelService.mdx b/docusaurus/docs/Angular/services/ChannelService.mdx index eef7b498..401c59d5 100644 --- a/docusaurus/docs/Angular/services/ChannelService.mdx +++ b/docusaurus/docs/Angular/services/ChannelService.mdx @@ -24,7 +24,7 @@ The active channel will always be marked as read when a new message is received #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:80](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L80) +[projects/stream-chat-angular/src/lib/channel.service.ts:80](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L80) --- @@ -38,7 +38,7 @@ This property isn't always updated, please use `channel.read` to display up-to-d #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:132](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L132) +[projects/stream-chat-angular/src/lib/channel.service.ts:132](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L132) --- @@ -50,7 +50,7 @@ Emits the list of currently loaded messages of the active channel. #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:84](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L84) +[projects/stream-chat-angular/src/lib/channel.service.ts:84](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L84) --- @@ -62,7 +62,7 @@ Emits the list of pinned messages of the active channel. #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:88](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L88) +[projects/stream-chat-angular/src/lib/channel.service.ts:88](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L88) --- @@ -76,7 +76,7 @@ This property isn't always updated, please use `channel.read` to display up-to-d #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:138](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L138) +[projects/stream-chat-angular/src/lib/channel.service.ts:138](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L138) --- @@ -88,7 +88,7 @@ Emits the currently selected parent message. If no message is selected, it emits #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:100](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L100) +[projects/stream-chat-angular/src/lib/channel.service.ts:100](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L100) --- @@ -100,7 +100,7 @@ Emits the id of the currently selected parent message. If no message is selected #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:92](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L92) +[projects/stream-chat-angular/src/lib/channel.service.ts:92](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L92) --- @@ -112,7 +112,7 @@ Emits the list of currently loaded thread replies belonging to the selected pare #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:96](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L96) +[projects/stream-chat-angular/src/lib/channel.service.ts:96](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L96) --- @@ -138,7 +138,7 @@ The provided method will be called before a new message is sent to Stream's API. #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:305](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L305) +[projects/stream-chat-angular/src/lib/channel.service.ts:305](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L305) --- @@ -164,7 +164,7 @@ The provided method will be called before a message is sent to Stream's API for #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:311](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L311) +[projects/stream-chat-angular/src/lib/channel.service.ts:311](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L311) --- @@ -178,7 +178,7 @@ If a message is bounced, it will be emitted via this `Observable`. The built-in #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:126](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L126) +[projects/stream-chat-angular/src/lib/channel.service.ts:126](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L126) --- @@ -190,7 +190,7 @@ The result of the latest channel query request. #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:70](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L70) +[projects/stream-chat-angular/src/lib/channel.service.ts:70](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L70) --- @@ -206,7 +206,7 @@ If you want to subscribe to channel events, you need to manually reenter Angular #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:66](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L66) +[projects/stream-chat-angular/src/lib/channel.service.ts:66](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L66) --- @@ -235,7 +235,7 @@ If you're adding a new channel, make sure that it's a [watched](https://getstrea #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:156](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L156) +[projects/stream-chat-angular/src/lib/channel.service.ts:156](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L156) --- @@ -268,7 +268,7 @@ If you're adding a new channel, make sure that it's a [watched](https://getstrea #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:180](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L180) +[projects/stream-chat-angular/src/lib/channel.service.ts:180](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L180) --- @@ -301,7 +301,7 @@ If you're adding a new channel, make sure that it's a [watched](https://getstrea #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:228](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L228) +[projects/stream-chat-angular/src/lib/channel.service.ts:228](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L228) --- @@ -334,7 +334,7 @@ If you're adding a new channel, make sure that it's a [watched](https://getstrea #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:212](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L212) +[projects/stream-chat-angular/src/lib/channel.service.ts:212](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L212) --- @@ -367,7 +367,7 @@ If you're adding a new channel, make sure that it's a [watched](https://getstrea #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:196](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L196) +[projects/stream-chat-angular/src/lib/channel.service.ts:196](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L196) --- @@ -400,7 +400,7 @@ If you're adding a new channel, make sure that it's a [watched](https://getstrea #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:244](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L244) +[projects/stream-chat-angular/src/lib/channel.service.ts:244](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L244) --- @@ -427,7 +427,7 @@ You can override the default file delete request - override this if you use your #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:288](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L288) +[projects/stream-chat-angular/src/lib/channel.service.ts:288](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L288) --- @@ -454,7 +454,7 @@ You can override the default file upload request - you can use this to upload fi #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:274](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L274) +[projects/stream-chat-angular/src/lib/channel.service.ts:274](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L274) --- @@ -481,7 +481,7 @@ You can override the default image delete request - override this if you use you #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:292](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L292) +[projects/stream-chat-angular/src/lib/channel.service.ts:292](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L292) --- @@ -508,7 +508,7 @@ You can override the default image upload request - you can use this to upload i #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:281](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L281) +[projects/stream-chat-angular/src/lib/channel.service.ts:281](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L281) --- @@ -541,7 +541,7 @@ If you're adding a new channel, make sure that it's a [watched](https://getstrea #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:260](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L260) +[projects/stream-chat-angular/src/lib/channel.service.ts:260](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L260) --- @@ -570,7 +570,7 @@ If you're adding a new channel, make sure that it's a [watched](https://getstrea #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:144](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L144) +[projects/stream-chat-angular/src/lib/channel.service.ts:144](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L144) --- @@ -599,7 +599,7 @@ If you're adding a new channel, make sure that it's a [watched](https://getstrea #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:168](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L168) +[projects/stream-chat-angular/src/lib/channel.service.ts:168](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L168) --- @@ -611,7 +611,7 @@ Emits `false` if there are no more pages of channels that can be loaded. #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:58](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L58) +[projects/stream-chat-angular/src/lib/channel.service.ts:58](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L58) --- @@ -623,7 +623,7 @@ Emits the ID of the message the message list should jump to (can be a channel me #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:108](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L108) +[projects/stream-chat-angular/src/lib/channel.service.ts:108](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L108) --- @@ -635,7 +635,7 @@ Emits a map that contains the date of the latest message sent by the current use #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:120](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L120) +[projects/stream-chat-angular/src/lib/channel.service.ts:120](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L120) --- @@ -661,7 +661,7 @@ The provided method will be called before deleting a message. If the returned Pr #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:299](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L299) +[projects/stream-chat-angular/src/lib/channel.service.ts:299](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L299) --- @@ -673,7 +673,7 @@ Emits the currently selected message to quote #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:104](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L104) +[projects/stream-chat-angular/src/lib/channel.service.ts:104](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L104) --- @@ -685,7 +685,7 @@ Emits the list of users that are currently typing in the channel (current user i #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:112](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L112) +[projects/stream-chat-angular/src/lib/channel.service.ts:112](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L112) --- @@ -697,7 +697,7 @@ Emits the list of users that are currently typing in the active thread (current #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:116](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L116) +[projects/stream-chat-angular/src/lib/channel.service.ts:116](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L116) --- @@ -707,7 +707,7 @@ Emits the list of users that are currently typing in the active thread (current #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:317](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L317) +[projects/stream-chat-angular/src/lib/channel.service.ts:317](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L317) ## Accessors @@ -723,7 +723,7 @@ The current active channel #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:1619](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L1619) +[projects/stream-chat-angular/src/lib/channel.service.ts:1619](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L1619) --- @@ -739,7 +739,7 @@ The current active channel messages #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:1626](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L1626) +[projects/stream-chat-angular/src/lib/channel.service.ts:1626](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L1626) --- @@ -755,7 +755,7 @@ The current thread replies #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:1633](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L1633) +[projects/stream-chat-angular/src/lib/channel.service.ts:1633](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L1633) --- @@ -771,7 +771,7 @@ The current list of channels #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:1612](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L1612) +[projects/stream-chat-angular/src/lib/channel.service.ts:1612](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L1612) --- @@ -797,7 +797,7 @@ You can return either an offset, or a filter using the [`$lte`/`$gte` operator]( #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:547](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L547) +[projects/stream-chat-angular/src/lib/channel.service.ts:547](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L547) --- @@ -813,7 +813,7 @@ If set to false, read events won't be sent as new messages are received. If set #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:523](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L523) +[projects/stream-chat-angular/src/lib/channel.service.ts:523](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L523) • `set` **shouldMarkActiveChannelAsRead**(`shouldMarkActiveChannelAsRead`): `void` @@ -831,7 +831,7 @@ If set to false, read events won't be sent as new messages are received. If set #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:530](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L530) +[projects/stream-chat-angular/src/lib/channel.service.ts:530](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L530) ## Methods @@ -854,7 +854,7 @@ The channel will be added to the beginning of the channel list #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:1131](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L1131) +[projects/stream-chat-angular/src/lib/channel.service.ts:1131](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L1131) --- @@ -878,7 +878,7 @@ Adds a reaction to a message. #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:806](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L806) +[projects/stream-chat-angular/src/lib/channel.service.ts:806](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L806) --- @@ -902,7 +902,7 @@ The list of members matching the search filter #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:1056](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L1056) +[projects/stream-chat-angular/src/lib/channel.service.ts:1056](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L1056) --- @@ -918,7 +918,7 @@ Clears the currently selected message to jump #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:1291](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L1291) +[projects/stream-chat-angular/src/lib/channel.service.ts:1291](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L1291) --- @@ -940,7 +940,7 @@ Deletes an uploaded file by URL. If you want to know more about [file uploads](h #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:1040](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L1040) +[projects/stream-chat-angular/src/lib/channel.service.ts:1040](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L1040) --- @@ -963,7 +963,7 @@ Deletes the message from the active channel #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:928](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L928) +[projects/stream-chat-angular/src/lib/channel.service.ts:928](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L928) --- @@ -979,7 +979,7 @@ Deselects the currently active (if any) channel #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:596](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L596) +[projects/stream-chat-angular/src/lib/channel.service.ts:596](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L596) --- @@ -1001,9 +1001,13 @@ Get the last 1200 reactions of a message in the current active channel. If you n all reactions of a message +**`Deprecated`** + +use [`messageReactionsService.queryReactions()`](https://getstream.io/chat/docs/sdk/angular/services/MessageReactionsService/#queryreactions) instead + #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:1642](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L1642) +[projects/stream-chat-angular/src/lib/channel.service.ts:1643](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L1643) --- @@ -1030,7 +1034,7 @@ the list of channels found by the query #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:730](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L730) +[projects/stream-chat-angular/src/lib/channel.service.ts:730](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L730) --- @@ -1057,7 +1061,7 @@ the channels that were loaded #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:766](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L766) +[projects/stream-chat-angular/src/lib/channel.service.ts:766](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L766) --- @@ -1080,7 +1084,7 @@ Jumps to the selected message inside the message list, if the message is not yet #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:1263](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L1263) +[projects/stream-chat-angular/src/lib/channel.service.ts:1263](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L1263) --- @@ -1096,7 +1100,7 @@ Loads the next page of channels. The page size can be set in the [query option]( #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:796](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L796) +[projects/stream-chat-angular/src/lib/channel.service.ts:796](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L796) --- @@ -1118,7 +1122,7 @@ Loads the next page of messages of the active channel. The page size can be set #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:658](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L658) +[projects/stream-chat-angular/src/lib/channel.service.ts:658](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L658) --- @@ -1140,7 +1144,7 @@ Loads the next page of messages of the active thread. The page size can be set i #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:697](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L697) +[projects/stream-chat-angular/src/lib/channel.service.ts:697](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L697) --- @@ -1164,7 +1168,7 @@ the result of the request #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:1675](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L1675) +[projects/stream-chat-angular/src/lib/channel.service.ts:1676](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L1676) --- @@ -1186,7 +1190,7 @@ Pins the given message in the channel #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:1299](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L1299) +[projects/stream-chat-angular/src/lib/channel.service.ts:1299](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L1299) --- @@ -1207,7 +1211,7 @@ Pins the given message in the channel #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:1143](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L1143) +[projects/stream-chat-angular/src/lib/channel.service.ts:1143](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L1143) --- @@ -1230,7 +1234,7 @@ Removes a reaction from a message. #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:822](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L822) +[projects/stream-chat-angular/src/lib/channel.service.ts:822](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L822) --- @@ -1252,7 +1256,7 @@ Resends the given message to the active channel #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:876](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L876) +[projects/stream-chat-angular/src/lib/channel.service.ts:876](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L876) --- @@ -1268,7 +1272,7 @@ Resets the `activeChannel$`, `channels$` and `activeChannelMessages$` Observable #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:780](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L780) +[projects/stream-chat-angular/src/lib/channel.service.ts:780](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L780) --- @@ -1290,7 +1294,7 @@ Selects or deselects the current message to quote reply to #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:1122](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L1122) +[projects/stream-chat-angular/src/lib/channel.service.ts:1122](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L1122) --- @@ -1314,7 +1318,7 @@ Selects or deselects the current message to quote reply to #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:1085](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L1085) +[projects/stream-chat-angular/src/lib/channel.service.ts:1085](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L1085) --- @@ -1341,7 +1345,7 @@ Sends a message to the active channel. The message is immediately added to the m #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:837](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L837) +[projects/stream-chat-angular/src/lib/channel.service.ts:837](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L837) --- @@ -1364,7 +1368,7 @@ If the channel wasn't previously part of the channel, it will be added to the be #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:563](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L563) +[projects/stream-chat-angular/src/lib/channel.service.ts:563](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L563) --- @@ -1387,7 +1391,7 @@ Sets the given `message` as an active parent message. If `undefined` is provided #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:623](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L623) +[projects/stream-chat-angular/src/lib/channel.service.ts:623](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L623) --- @@ -1409,7 +1413,7 @@ Call this method if user started typing in the active channel #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:1595](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L1595) +[projects/stream-chat-angular/src/lib/channel.service.ts:1595](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L1595) --- @@ -1431,7 +1435,7 @@ Call this method if user stopped typing in the active channel #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:1604](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L1604) +[projects/stream-chat-angular/src/lib/channel.service.ts:1604](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L1604) --- @@ -1453,13 +1457,13 @@ Removes the given message from pinned messages #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:1318](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L1318) +[projects/stream-chat-angular/src/lib/channel.service.ts:1318](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L1318) --- ### updateMessage -▸ **updateMessage**(`message`): `Promise`\<`StreamMessage`\<`T`\> \| `T`[``"messageType"``] & {} & {} & {} & `Omit`\<`MessageResponse`\<{}\>, `"status"` \| `"created_at"` \| `"pinned_at"` \| `"updated_at"`\> & `UR` & {}\> +▸ **updateMessage**(`message`): `Promise`\<`StreamMessage`\<`T`\> \| `T`[``"messageType"``] & {} & {} & {} & `Omit`\<`MessageResponse`\<{}\>, `"status"` \| `"created_at"` \| `"pinned_at"` \| `"updated_at"` \| `"deleted_at"`\> & `UR` & {}\> Updates the message in the active channel @@ -1471,11 +1475,11 @@ Updates the message in the active channel #### Returns -`Promise`\<`StreamMessage`\<`T`\> \| `T`[``"messageType"``] & {} & {} & {} & `Omit`\<`MessageResponse`\<{}\>, `"status"` \| `"created_at"` \| `"pinned_at"` \| `"updated_at"`\> & `UR` & {}\> +`Promise`\<`StreamMessage`\<`T`\> \| `T`[``"messageType"``] & {} & {} & {} & `Omit`\<`MessageResponse`\<{}\>, `"status"` \| `"created_at"` \| `"pinned_at"` \| `"updated_at"` \| `"deleted_at"`\> & `UR` & {}\> #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:893](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L893) +[projects/stream-chat-angular/src/lib/channel.service.ts:893](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L893) --- @@ -1499,4 +1503,4 @@ the result of file upload requests #### Defined in -[projects/stream-chat-angular/src/lib/channel.service.ts:960](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/channel.service.ts#L960) +[projects/stream-chat-angular/src/lib/channel.service.ts:960](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/channel.service.ts#L960) diff --git a/docusaurus/docs/Angular/services/ChatClientService.mdx b/docusaurus/docs/Angular/services/ChatClientService.mdx index fb415885..7a610f46 100644 --- a/docusaurus/docs/Angular/services/ChatClientService.mdx +++ b/docusaurus/docs/Angular/services/ChatClientService.mdx @@ -18,7 +18,7 @@ Emits the current [application settings](https://getstream.io/chat/docs/javascri #### Defined in -[projects/stream-chat-angular/src/lib/chat-client.service.ts:49](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/chat-client.service.ts#L49) +[projects/stream-chat-angular/src/lib/chat-client.service.ts:49](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/chat-client.service.ts#L49) --- @@ -30,7 +30,7 @@ The [StreamChat client](https://github.com/GetStream/stream-chat-js/blob/master/ #### Defined in -[projects/stream-chat-angular/src/lib/chat-client.service.ts:38](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/chat-client.service.ts#L38) +[projects/stream-chat-angular/src/lib/chat-client.service.ts:38](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/chat-client.service.ts#L38) --- @@ -42,7 +42,7 @@ Emits the current connection state of the user (`online` or `offline`) #### Defined in -[projects/stream-chat-angular/src/lib/chat-client.service.ts:53](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/chat-client.service.ts#L53) +[projects/stream-chat-angular/src/lib/chat-client.service.ts:53](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/chat-client.service.ts#L53) --- @@ -57,7 +57,7 @@ For performance reasons this Observable operates outside of the Angular change d #### Defined in -[projects/stream-chat-angular/src/lib/chat-client.service.ts:45](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/chat-client.service.ts#L45) +[projects/stream-chat-angular/src/lib/chat-client.service.ts:45](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/chat-client.service.ts#L45) --- @@ -69,7 +69,7 @@ Emits the list of pending invites of the user. It emits every pending invitation #### Defined in -[projects/stream-chat-angular/src/lib/chat-client.service.ts:57](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/chat-client.service.ts#L57) +[projects/stream-chat-angular/src/lib/chat-client.service.ts:57](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/chat-client.service.ts#L57) --- @@ -81,7 +81,7 @@ Emits the current chat user #### Defined in -[projects/stream-chat-angular/src/lib/chat-client.service.ts:61](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/chat-client.service.ts#L61) +[projects/stream-chat-angular/src/lib/chat-client.service.ts:61](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/chat-client.service.ts#L61) ## Methods @@ -105,7 +105,7 @@ The users matching the search #### Defined in -[projects/stream-chat-angular/src/lib/chat-client.service.ts:224](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/chat-client.service.ts#L224) +[projects/stream-chat-angular/src/lib/chat-client.service.ts:226](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/chat-client.service.ts#L226) --- @@ -121,7 +121,7 @@ Disconnects the current user, and closes the WebSocket connection. Useful when d #### Defined in -[projects/stream-chat-angular/src/lib/chat-client.service.ts:186](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/chat-client.service.ts#L186) +[projects/stream-chat-angular/src/lib/chat-client.service.ts:188](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/chat-client.service.ts#L188) --- @@ -143,7 +143,7 @@ Flag the message with the given ID. If you want to know [more about flags](https #### Defined in -[projects/stream-chat-angular/src/lib/chat-client.service.ts:215](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/chat-client.service.ts#L215) +[projects/stream-chat-angular/src/lib/chat-client.service.ts:217](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/chat-client.service.ts#L217) --- @@ -159,7 +159,7 @@ Loads the current [application settings](https://getstream.io/chat/docs/javascri #### Defined in -[projects/stream-chat-angular/src/lib/chat-client.service.ts:196](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/chat-client.service.ts#L196) +[projects/stream-chat-angular/src/lib/chat-client.service.ts:198](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/chat-client.service.ts#L198) --- @@ -184,4 +184,4 @@ Creates a [`StreamChat`](https://github.com/GetStream/stream-chat-js/blob/668b3e #### Defined in -[projects/stream-chat-angular/src/lib/chat-client.service.ts:98](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/chat-client.service.ts#L98) +[projects/stream-chat-angular/src/lib/chat-client.service.ts:98](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/chat-client.service.ts#L98) diff --git a/docusaurus/docs/Angular/services/CustomTemplatesService.mdx b/docusaurus/docs/Angular/services/CustomTemplatesService.mdx index f03df5a6..3886bd43 100644 --- a/docusaurus/docs/Angular/services/CustomTemplatesService.mdx +++ b/docusaurus/docs/Angular/services/CustomTemplatesService.mdx @@ -22,7 +22,7 @@ The template that can be used to override how attachment actions are displayed i #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:276](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L276) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:276](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L276) --- @@ -34,7 +34,7 @@ The template used to display attachments of a [message](../components/MessageCom #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:109](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L109) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:109](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L109) --- @@ -46,7 +46,7 @@ The template used to display attachments in the [message input](../components/Me #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:116](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L116) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:116](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L116) --- @@ -58,7 +58,7 @@ The template used to display avatars for channels and users (instead of the [def #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:123](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L123) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:123](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L123) --- @@ -70,7 +70,7 @@ The template that can be used to override how a card attachment is displayed ins #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:270](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L270) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:270](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L270) --- @@ -82,7 +82,7 @@ The template for channel actions displayed in the [channel header](../components #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:102](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L102) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:102](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L102) --- @@ -94,7 +94,7 @@ The template used to display additional information about a channel under the ch #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:227](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L227) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:227](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L227) --- @@ -106,7 +106,7 @@ Template used to display the channel information inside the [channel list item]( #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:329](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L329) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:329](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L329) --- @@ -118,7 +118,7 @@ Template used to display an item in the [channel list](../components/ChannelList #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:67](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L67) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:67](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L67) --- @@ -130,7 +130,7 @@ The autocomplete list item template for commands (used in the [`AutocompleteText #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:60](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L60) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:60](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L60) --- @@ -142,7 +142,7 @@ The template used for displaying file upload/attachment selector inside the [mes #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:234](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L234) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:234](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L234) --- @@ -154,7 +154,7 @@ Template to display custom metadata inside [message component](../components/Mes #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:220](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L220) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:220](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L220) --- @@ -166,7 +166,7 @@ The template used to display the date separator inside the [message list](../com #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:288](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L288) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:288](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L288) --- @@ -180,7 +180,7 @@ Displayed for the last message sent by the current user, if the message isn't ye #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:195](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L195) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:195](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L195) --- @@ -192,7 +192,7 @@ The template for [emoji picker](../code-examples/emoji-picker.mdx) #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:81](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L81) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:81](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L81) --- @@ -204,7 +204,7 @@ The template to show if the main message list is empty #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:310](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L310) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:310](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L310) --- @@ -216,7 +216,7 @@ The template to show if the thread message list is empty #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:316](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L316) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:316](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L316) --- @@ -228,7 +228,7 @@ The template that can be used to override how a file attachment is displayed ins #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:264](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L264) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:264](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L264) --- @@ -240,7 +240,7 @@ The template that can be used to override how image gallery is displayed inside #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:258](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L258) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:258](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L258) --- @@ -252,7 +252,7 @@ Template for displaying icons (instead of the [default icon component](../compon #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:130](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L130) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:130](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L130) --- @@ -264,7 +264,7 @@ The template that can be used to override how a single image attachment is displ #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:240](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L240) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:240](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L240) --- @@ -276,7 +276,7 @@ Template for displaying the loading indicator (instead of the [default loading i #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:137](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L137) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:137](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L137) --- @@ -288,7 +288,7 @@ The autocomplete list item template for mentioning users (used in the [`Autocomp #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:54](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L54) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:54](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L54) --- @@ -300,7 +300,7 @@ The template used for displaying a [mention inside a message](../code-examples/m #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:74](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L74) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:74](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L74) --- @@ -312,7 +312,7 @@ The template used for displaying an item in the [message actions box](../compone #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:151](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L151) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:151](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L151) --- @@ -324,7 +324,7 @@ Template for displaying the message actions box (instead of the [default message #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:144](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L144) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:144](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L144) --- @@ -336,7 +336,7 @@ The template used to display the [message bounce prompt](../components/MessageBo #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:322](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L322) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:322](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L322) --- @@ -348,7 +348,7 @@ The template used to display the reactions of a [message](../components/MessageC #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:165](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L165) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:165](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L165) --- @@ -360,7 +360,7 @@ The template used to display the reactions of a [message](../components/MessageC #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:158](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L158) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:158](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L158) --- @@ -372,7 +372,7 @@ The template used to display a message in the [message list](../components/Messa #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:95](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L95) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:95](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L95) --- @@ -384,7 +384,7 @@ The template used to display a modal window (instead of the [default modal](../c #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:172](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L172) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:172](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L172) --- @@ -398,7 +398,7 @@ This UI element is used to separate unread messages from read messages #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:296](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L296) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:296](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L296) --- @@ -412,7 +412,7 @@ Users can use this notification to jump to the first unread message when it's cl #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:304](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L304) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:304](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L304) --- @@ -424,7 +424,7 @@ The template used to override the [default notification component](../components #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:179](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L179) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:179](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L179) --- @@ -438,7 +438,7 @@ Displayed for the last message sent by the current user, if the message is read #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:213](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L213) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:213](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L213) --- @@ -452,7 +452,7 @@ Displayed for the last message sent by the current user, if the message is curre #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:204](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L204) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:204](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L204) --- @@ -464,7 +464,7 @@ The template used to display [system messages](https://getstream.io/chat/docs/ja #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:282](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L282) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:282](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L282) --- @@ -476,7 +476,7 @@ The template used for header of a [thread](../components/ThreadComponent.mdx) #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:186](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L186) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:186](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L186) --- @@ -488,7 +488,7 @@ The typing indicator template used in the [message list](../components/MessageLi #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:88](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L88) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:88](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L88) --- @@ -500,7 +500,7 @@ The template that can be used to override how a video attachment is displayed in #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:252](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L252) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:252](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L252) --- @@ -512,4 +512,4 @@ The template that can be used to override how a voice recording attachment is di #### Defined in -[projects/stream-chat-angular/src/lib/custom-templates.service.ts:246](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L246) +[projects/stream-chat-angular/src/lib/custom-templates.service.ts:246](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L246) diff --git a/docusaurus/docs/Angular/services/DateParserService.mdx b/docusaurus/docs/Angular/services/DateParserService.mdx index e63795b6..ebcd547f 100644 --- a/docusaurus/docs/Angular/services/DateParserService.mdx +++ b/docusaurus/docs/Angular/services/DateParserService.mdx @@ -26,7 +26,7 @@ Custom parser to override `parseDate` #### Defined in -[projects/stream-chat-angular/src/lib/date-parser.service.ts:18](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/date-parser.service.ts#L18) +[projects/stream-chat-angular/src/lib/date-parser.service.ts:18](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/date-parser.service.ts#L18) --- @@ -52,7 +52,7 @@ Custom parser to override `parseDateTime` #### Defined in -[projects/stream-chat-angular/src/lib/date-parser.service.ts:22](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/date-parser.service.ts#L22) +[projects/stream-chat-angular/src/lib/date-parser.service.ts:22](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/date-parser.service.ts#L22) --- @@ -78,7 +78,7 @@ Custom parser to override `parseTime` #### Defined in -[projects/stream-chat-angular/src/lib/date-parser.service.ts:14](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/date-parser.service.ts#L14) +[projects/stream-chat-angular/src/lib/date-parser.service.ts:14](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/date-parser.service.ts#L14) ## Methods @@ -102,7 +102,7 @@ The parsed date #### Defined in -[projects/stream-chat-angular/src/lib/date-parser.service.ts:43](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/date-parser.service.ts#L43) +[projects/stream-chat-angular/src/lib/date-parser.service.ts:43](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/date-parser.service.ts#L43) --- @@ -126,7 +126,7 @@ The parsed date #### Defined in -[projects/stream-chat-angular/src/lib/date-parser.service.ts:55](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/date-parser.service.ts#L55) +[projects/stream-chat-angular/src/lib/date-parser.service.ts:55](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/date-parser.service.ts#L55) --- @@ -150,4 +150,4 @@ The parsed time #### Defined in -[projects/stream-chat-angular/src/lib/date-parser.service.ts:31](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/date-parser.service.ts#L31) +[projects/stream-chat-angular/src/lib/date-parser.service.ts:31](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/date-parser.service.ts#L31) diff --git a/docusaurus/docs/Angular/services/EmojiInputService.mdx b/docusaurus/docs/Angular/services/EmojiInputService.mdx index 99a47a88..8623f9c7 100644 --- a/docusaurus/docs/Angular/services/EmojiInputService.mdx +++ b/docusaurus/docs/Angular/services/EmojiInputService.mdx @@ -12,4 +12,4 @@ If you have an emoji picker in your application, you can propagate the selected #### Defined in -[projects/stream-chat-angular/src/lib/message-input/emoji-input.service.ts:14](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/emoji-input.service.ts#L14) +[projects/stream-chat-angular/src/lib/message-input/emoji-input.service.ts:14](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/emoji-input.service.ts#L14) diff --git a/docusaurus/docs/Angular/services/MessageActionsService.mdx b/docusaurus/docs/Angular/services/MessageActionsService.mdx index cf03d6be..73182f55 100644 --- a/docusaurus/docs/Angular/services/MessageActionsService.mdx +++ b/docusaurus/docs/Angular/services/MessageActionsService.mdx @@ -32,7 +32,7 @@ By default the [`MessageComponent`](../../components/MessageComponent) will disp #### Defined in -[projects/stream-chat-angular/src/lib/message-actions.service.ts:188](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-actions.service.ts#L188) +[projects/stream-chat-angular/src/lib/message-actions.service.ts:188](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-actions.service.ts#L188) --- @@ -44,7 +44,7 @@ You can pass your own custom actions that will be displayed inside the built-in #### Defined in -[projects/stream-chat-angular/src/lib/message-actions.service.ts:184](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-actions.service.ts#L184) +[projects/stream-chat-angular/src/lib/message-actions.service.ts:184](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-actions.service.ts#L184) --- @@ -56,7 +56,7 @@ Default actions - these are the actions that are handled by the built-in compone #### Defined in -[projects/stream-chat-angular/src/lib/message-actions.service.ts:28](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-actions.service.ts#L28) +[projects/stream-chat-angular/src/lib/message-actions.service.ts:28](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-actions.service.ts#L28) --- @@ -68,7 +68,7 @@ The built-in components will handle changes to this observable. #### Defined in -[projects/stream-chat-angular/src/lib/message-actions.service.ts:180](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-actions.service.ts#L180) +[projects/stream-chat-angular/src/lib/message-actions.service.ts:180](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-actions.service.ts#L180) ## Methods @@ -93,4 +93,4 @@ the count #### Defined in -[projects/stream-chat-angular/src/lib/message-actions.service.ts:227](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-actions.service.ts#L227) +[projects/stream-chat-angular/src/lib/message-actions.service.ts:227](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-actions.service.ts#L227) diff --git a/docusaurus/docs/Angular/services/MessageInputConfigService.mdx b/docusaurus/docs/Angular/services/MessageInputConfigService.mdx index 0bb18963..a991c948 100644 --- a/docusaurus/docs/Angular/services/MessageInputConfigService.mdx +++ b/docusaurus/docs/Angular/services/MessageInputConfigService.mdx @@ -12,7 +12,7 @@ If true, users can mention other users in messages. You also [need to use the `A #### Defined in -[projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts:17](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L17) +[projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts:17](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L17) --- @@ -24,7 +24,7 @@ In `desktop` mode the `Enter` key will trigger message sending, in `mobile` mode #### Defined in -[projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts:30](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L30) +[projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts:29](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L29) --- @@ -36,7 +36,7 @@ If file upload is enabled, the user can open a file selector from the input. Ple #### Defined in -[projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts:13](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L13) +[projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts:13](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L13) --- @@ -48,7 +48,7 @@ If `false`, users can only upload one attachment per message #### Defined in -[projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts:21](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L21) +[projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts:21](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L21) --- @@ -60,4 +60,17 @@ The scope for user mentions, either members of the current channel of members of #### Defined in -[projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts:25](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L25) +[projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts:25](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L25) + +--- + +### sendVoiceRecordingImmediately + +• **sendVoiceRecordingImmediately**: `boolean` = `true` + +If `true` the recording will be sent as a message immediately after the recording is completed. +If `false`, the recording will added to the attachment preview, and users can continue composing the message. + +#### Defined in + +[projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts:34](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L34) diff --git a/docusaurus/docs/Angular/services/MessageReactionsService.mdx b/docusaurus/docs/Angular/services/MessageReactionsService.mdx index 4c021648..14cfa6e7 100644 --- a/docusaurus/docs/Angular/services/MessageReactionsService.mdx +++ b/docusaurus/docs/Angular/services/MessageReactionsService.mdx @@ -10,7 +10,7 @@ The `MessageReactionsService` provides customization options to message [reactio By default the [`MessageReactionsComponent`](../../components/MessageReactionsComponent) will display the reacting users when a reaction is clicked. You can override this with your own UI by providing a custom event handler. -The event handler can retrieve all reactions of a message inside the active channel using the [`channelService.getMessageReactions` method](../../services/ChannelService/#getmessagereactions) +The event handler can retrieve all reactions of a message using the [`messageReactionsService.queryReactions()`](https://getstream.io/chat/docs/sdk/angular/services/MessageReactionsService/#queryreactions) #### Type declaration @@ -28,7 +28,7 @@ The event handler can retrieve all reactions of a message inside the active chan #### Defined in -[projects/stream-chat-angular/src/lib/message-reactions.service.ts:30](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-reactions.service.ts#L30) +[projects/stream-chat-angular/src/lib/message-reactions.service.ts:32](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-reactions.service.ts#L32) --- @@ -42,7 +42,7 @@ You can provide any string as a reaction. The emoji can be provided as a string, #### Defined in -[projects/stream-chat-angular/src/lib/message-reactions.service.ts:18](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-reactions.service.ts#L18) +[projects/stream-chat-angular/src/lib/message-reactions.service.ts:20](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-reactions.service.ts#L20) ## Accessors @@ -58,7 +58,7 @@ Get the currently enabled reactions #### Defined in -[projects/stream-chat-angular/src/lib/message-reactions.service.ts:44](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-reactions.service.ts#L44) +[projects/stream-chat-angular/src/lib/message-reactions.service.ts:49](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-reactions.service.ts#L49) • `set` **reactions**(`reactions`): `void` @@ -76,4 +76,30 @@ Sets the enabled reactions #### Defined in -[projects/stream-chat-angular/src/lib/message-reactions.service.ts:37](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-reactions.service.ts#L37) +[projects/stream-chat-angular/src/lib/message-reactions.service.ts:42](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-reactions.service.ts#L42) + +## Methods + +### queryReactions + +▸ **queryReactions**(`messageId`, `type`, `next?`): `Promise`\<`QueryReactionsAPIResponse`\<`DefaultStreamChatGenerics`\>\> + +Query reactions of a specific message, more info in the [API documentation](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript#query-reactions) + +#### Parameters + +| Name | Type | +| :---------- | :------- | +| `messageId` | `string` | +| `type` | `string` | +| `next?` | `string` | + +#### Returns + +`Promise`\<`QueryReactionsAPIResponse`\<`DefaultStreamChatGenerics`\>\> + +the reactions and the cursor for the next/prev pages + +#### Defined in + +[projects/stream-chat-angular/src/lib/message-reactions.service.ts:60](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-reactions.service.ts#L60) diff --git a/docusaurus/docs/Angular/services/MessageService.mdx b/docusaurus/docs/Angular/services/MessageService.mdx index c14f42ad..005455dc 100644 --- a/docusaurus/docs/Angular/services/MessageService.mdx +++ b/docusaurus/docs/Angular/services/MessageService.mdx @@ -26,7 +26,7 @@ You can provide a custom method to display links #### Defined in -[projects/stream-chat-angular/src/lib/message.service.ts:24](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message.service.ts#L24) +[projects/stream-chat-angular/src/lib/message.service.ts:24](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message.service.ts#L24) --- @@ -43,4 +43,4 @@ If you display messages as text the following parts are still be displayed as HT #### Defined in -[projects/stream-chat-angular/src/lib/message.service.ts:17](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message.service.ts#L17) +[projects/stream-chat-angular/src/lib/message.service.ts:17](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message.service.ts#L17) diff --git a/docusaurus/docs/Angular/services/NotificationService.mdx b/docusaurus/docs/Angular/services/NotificationService.mdx index a3394b80..e15c38dd 100644 --- a/docusaurus/docs/Angular/services/NotificationService.mdx +++ b/docusaurus/docs/Angular/services/NotificationService.mdx @@ -12,7 +12,7 @@ Emits the currently active [notifications](https://github.com/GetStream/stream-c #### Defined in -[projects/stream-chat-angular/src/lib/notification.service.ts:15](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/notification.service.ts#L15) +[projects/stream-chat-angular/src/lib/notification.service.ts:15](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/notification.service.ts#L15) ## Methods @@ -51,7 +51,7 @@ A method to clear the notification. #### Defined in -[projects/stream-chat-angular/src/lib/notification.service.ts:68](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/notification.service.ts#L68) +[projects/stream-chat-angular/src/lib/notification.service.ts:68](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/notification.service.ts#L68) --- @@ -91,4 +91,4 @@ A method to clear the notification (before the timeout). #### Defined in -[projects/stream-chat-angular/src/lib/notification.service.ts:31](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/notification.service.ts#L31) +[projects/stream-chat-angular/src/lib/notification.service.ts:31](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/notification.service.ts#L31) diff --git a/docusaurus/docs/Angular/services/StreamI18nService.mdx b/docusaurus/docs/Angular/services/StreamI18nService.mdx index a8755031..f7383536 100644 --- a/docusaurus/docs/Angular/services/StreamI18nService.mdx +++ b/docusaurus/docs/Angular/services/StreamI18nService.mdx @@ -23,4 +23,4 @@ Registers the translation to the [ngx-translate](https://github.com/ngx-translat #### Defined in -[projects/stream-chat-angular/src/lib/stream-i18n.service.ts:19](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/stream-i18n.service.ts#L19) +[projects/stream-chat-angular/src/lib/stream-i18n.service.ts:19](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/stream-i18n.service.ts#L19) diff --git a/docusaurus/docs/Angular/services/ThemeService.mdx b/docusaurus/docs/Angular/services/ThemeService.mdx index 4d51ea04..cc567dad 100644 --- a/docusaurus/docs/Angular/services/ThemeService.mdx +++ b/docusaurus/docs/Angular/services/ThemeService.mdx @@ -12,4 +12,4 @@ A Subject that can be used to get or set the currently active theme. By default #### Defined in -[projects/stream-chat-angular/src/lib/theme.service.ts:14](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/theme.service.ts#L14) +[projects/stream-chat-angular/src/lib/theme.service.ts:14](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/theme.service.ts#L14) diff --git a/docusaurus/docs/Angular/services/TranscoderService.mdx b/docusaurus/docs/Angular/services/TranscoderService.mdx new file mode 100644 index 00000000..8e1283ac --- /dev/null +++ b/docusaurus/docs/Angular/services/TranscoderService.mdx @@ -0,0 +1,30 @@ +# TranscoderService + +The `TranscoderService` is used to transcibe audio recording to a format that's supported by all major browsers. The SDK uses this to create voice messages. + +If you want to use your own transcoder you can provide a `customTranscoder`. + +## Methods + +### transcode + +▸ **transcode**(`blob`, `options`): `Promise`<`Blob`\> + +The default transcoder will leave audio/mp4 files as is, and transcode webm files to wav. If you want to customize this, you can provide your own transcoder using the `customTranscoder` field + +#### Parameters + +| Name | Type | +| :-------- | :------------------ | +| `blob` | `Blob` | +| `options` | `TranscoderOptions` | + +#### Returns + +`Promise`\<`Blob`\> + +the transcoded file + +#### Defined in + +[projects/stream-chat-angular/src/lib/voice-recorder/transcoder.service.ts:68](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/voice-recorder/transcoder.service.ts#L68) diff --git a/docusaurus/docs/Angular/services/TransliterationService.mdx b/docusaurus/docs/Angular/services/TransliterationService.mdx index 106cc3cd..ec004153 100644 --- a/docusaurus/docs/Angular/services/TransliterationService.mdx +++ b/docusaurus/docs/Angular/services/TransliterationService.mdx @@ -22,4 +22,4 @@ the result of the transliteration #### Defined in -[projects/stream-chat-angular/src/lib/transliteration.service.ts:16](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/transliteration.service.ts#L16) +[projects/stream-chat-angular/src/lib/transliteration.service.ts:16](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/transliteration.service.ts#L16) diff --git a/docusaurus/docs/Angular/services/VirtualizedListService.mdx b/docusaurus/docs/Angular/services/VirtualizedListService.mdx index 8547eb83..b34fba33 100644 --- a/docusaurus/docs/Angular/services/VirtualizedListService.mdx +++ b/docusaurus/docs/Angular/services/VirtualizedListService.mdx @@ -38,7 +38,7 @@ The result of the last query used to load more items #### Defined in -[projects/stream-chat-angular/src/lib/virtualized-list.service.ts:46](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/virtualized-list.service.ts#L46) +[projects/stream-chat-angular/src/lib/virtualized-list.service.ts:46](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/virtualized-list.service.ts#L46) --- @@ -50,7 +50,7 @@ The items that should be currently displayed, a subset of all items #### Defined in -[projects/stream-chat-angular/src/lib/virtualized-list.service.ts:42](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/virtualized-list.service.ts#L42) +[projects/stream-chat-angular/src/lib/virtualized-list.service.ts:42](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/virtualized-list.service.ts#L42) ## Accessors @@ -66,7 +66,7 @@ The current value of virtualized items #### Defined in -[projects/stream-chat-angular/src/lib/virtualized-list.service.ts:355](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/virtualized-list.service.ts#L355) +[projects/stream-chat-angular/src/lib/virtualized-list.service.ts:355](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/virtualized-list.service.ts#L355) ## Methods @@ -82,4 +82,4 @@ Remove all subscriptions, call this once you're done using an instance of this s #### Defined in -[projects/stream-chat-angular/src/lib/virtualized-list.service.ts:362](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/virtualized-list.service.ts#L362) +[projects/stream-chat-angular/src/lib/virtualized-list.service.ts:362](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/virtualized-list.service.ts#L362) diff --git a/docusaurus/docs/Angular/services/VirtualizedMessageListService.mdx b/docusaurus/docs/Angular/services/VirtualizedMessageListService.mdx index 5f27ba8b..8cc76f6a 100644 --- a/docusaurus/docs/Angular/services/VirtualizedMessageListService.mdx +++ b/docusaurus/docs/Angular/services/VirtualizedMessageListService.mdx @@ -22,7 +22,7 @@ The result of the last query used to load more items #### Defined in -[projects/stream-chat-angular/src/lib/virtualized-list.service.ts:46](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/virtualized-list.service.ts#L46) +[projects/stream-chat-angular/src/lib/virtualized-list.service.ts:46](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/virtualized-list.service.ts#L46) --- @@ -38,7 +38,7 @@ The items that should be currently displayed, a subset of all items #### Defined in -[projects/stream-chat-angular/src/lib/virtualized-list.service.ts:42](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/virtualized-list.service.ts#L42) +[projects/stream-chat-angular/src/lib/virtualized-list.service.ts:42](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/virtualized-list.service.ts#L42) ## Accessors @@ -58,7 +58,7 @@ VirtualizedListService.virtualizedItems #### Defined in -[projects/stream-chat-angular/src/lib/virtualized-list.service.ts:355](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/virtualized-list.service.ts#L355) +[projects/stream-chat-angular/src/lib/virtualized-list.service.ts:355](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/virtualized-list.service.ts#L355) ## Methods @@ -78,4 +78,4 @@ Remove all subscriptions, call this once you're done using an instance of this s #### Defined in -[projects/stream-chat-angular/src/lib/virtualized-list.service.ts:362](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/virtualized-list.service.ts#L362) +[projects/stream-chat-angular/src/lib/virtualized-list.service.ts:362](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/virtualized-list.service.ts#L362) diff --git a/docusaurus/docs/Angular/services/VoiceRecorderService.mdx b/docusaurus/docs/Angular/services/VoiceRecorderService.mdx new file mode 100644 index 00000000..c709229e --- /dev/null +++ b/docusaurus/docs/Angular/services/VoiceRecorderService.mdx @@ -0,0 +1,27 @@ +# VoiceRecorderService + +The `VoiceRecorderService` provides a commincation outlet between the message input and voice recorder components. + +## Properties + +### isRecorderVisible$ + +• **isRecorderVisible$**: `BehaviorSubject`<`boolean`\> + +Use this property to get/set if the recording component should be visible + +#### Defined in + +[projects/stream-chat-angular/src/lib/message-input/voice-recorder.service.ts:15](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/voice-recorder.service.ts#L15) + +--- + +### recording$ + +• **recording$**: `BehaviorSubject`\<`undefined` \| `AudioRecording`\> + +The audio recording that was created + +#### Defined in + +[projects/stream-chat-angular/src/lib/message-input/voice-recorder.service.ts:19](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/voice-recorder.service.ts#L19) diff --git a/docusaurus/docs/Angular/theming/component-variables.mdx b/docusaurus/docs/Angular/theming/component-variables.mdx index 99c1d4a0..e629202b 100644 --- a/docusaurus/docs/Angular/theming/component-variables.mdx +++ b/docusaurus/docs/Angular/theming/component-variables.mdx @@ -34,33 +34,33 @@ You can find the list of components below: | Component name | Variables | | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| `AttachmentList` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/AttachmentList/AttachmentList-layout.scss) | -| `AttachmentPreviewList` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-layout.scss) | -| `Autocomplete` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/Autocomplete/Autocomplete-theme.scss) | -| `Avatar` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/Avatar/Avatar-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/Avatar/Avatar-layout.scss) | -| `Channel` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/Channel/Channel-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/Channel/Channel-layout.scss) | -| `ChannelHeader` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss) | -| `ChannelList` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/ChannelList/ChannelList-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/ChannelList/ChannelList-layout.scss) | -| `ChannelPreview` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/ChannelPreview/ChannelPreview-layout.scss) | -| `ChannelSearch` (React SDK only) | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss) | -| `CircleFAButton` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss) | -| `CTAButton` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/CTAButton/CTAButton-theme.scss) | -| `EditMessageForm` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss) | -| `Icon` (Angular SDK only) | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/Icon/Icon-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/Icon/Icon-layout.scss) | -| `ImageCarousel` (Angular SDK only) | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/ImageCarousel/ImageCarousel-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/ImageCarousel/ImageCarousel-layout.scss) | -| `LoadingIndicator` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/LoadingIndicator/LoadingIndicator-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/LoadingIndicator/LoadingIndicator-layout.scss) | -| `Message` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/Message/Message-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/Message/Message-layout.scss) | -| `MessageActionsBox` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss) | -| `MessageBouncePrompt` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/MessageBouncePrompt/MessageBouncePrompt-theme.scss) | -| `MessageInput` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/MessageInput/MessageInput-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/MessageInput/MessageInput-layout.scss) | -| `MessageList` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/MessageList/MessageList-theme.scss) | -| `MessageNotification` (React SDK only) | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/MessageNotification/MessageNotification-theme.scss) | -| `MessageReactions` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/MessageReactions/MessageReactions-layout.scss) | -| `MessageReactionsSelector` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss) | -| `Modal` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/Modal/Modal-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/Modal/Modal-layout.scss) | -| `Notification` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/Notification/Notification-theme.scss) | -| `NotificationList` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/NotificationList/NotificationList-theme.scss) | -| `Thread` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/Thread/Thread-theme.scss) | -| `Tooltip` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/Tooltip/Tooltip-theme.scss) | -| `TypingIndicator` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/TypingIndicator/TypingIndicator-theme.scss) | -| `VirtualizedMessageList` (React SDK only) | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss) | +| `AttachmentList` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/AttachmentList/AttachmentList-layout.scss) | +| `AttachmentPreviewList` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-layout.scss) | +| `Autocomplete` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/Autocomplete/Autocomplete-theme.scss) | +| `Avatar` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/Avatar/Avatar-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/Avatar/Avatar-layout.scss) | +| `Channel` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/Channel/Channel-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/Channel/Channel-layout.scss) | +| `ChannelHeader` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss) | +| `ChannelList` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/ChannelList/ChannelList-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/ChannelList/ChannelList-layout.scss) | +| `ChannelPreview` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/ChannelPreview/ChannelPreview-layout.scss) | +| `ChannelSearch` (React SDK only) | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss) | +| `CircleFAButton` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss) | +| `CTAButton` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/CTAButton/CTAButton-theme.scss) | +| `EditMessageForm` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss) | +| `Icon` (Angular SDK only) | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/Icon/Icon-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/Icon/Icon-layout.scss) | +| `ImageCarousel` (Angular SDK only) | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/ImageCarousel/ImageCarousel-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/ImageCarousel/ImageCarousel-layout.scss) | +| `LoadingIndicator` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/LoadingIndicator/LoadingIndicator-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/LoadingIndicator/LoadingIndicator-layout.scss) | +| `Message` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/Message/Message-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/Message/Message-layout.scss) | +| `MessageActionsBox` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss) | +| `MessageBouncePrompt` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/MessageBouncePrompt/MessageBouncePrompt-theme.scss) | +| `MessageInput` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/MessageInput/MessageInput-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/MessageInput/MessageInput-layout.scss) | +| `MessageList` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/MessageList/MessageList-theme.scss) | +| `MessageNotification` (React SDK only) | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/MessageNotification/MessageNotification-theme.scss) | +| `MessageReactions` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/MessageReactions/MessageReactions-layout.scss) | +| `MessageReactionsSelector` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss) | +| `Modal` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/Modal/Modal-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/Modal/Modal-layout.scss) | +| `Notification` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/Notification/Notification-theme.scss) | +| `NotificationList` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/NotificationList/NotificationList-theme.scss) | +| `Thread` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/Thread/Thread-theme.scss) | +| `Tooltip` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/Tooltip/Tooltip-theme.scss) | +| `TypingIndicator` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/TypingIndicator/TypingIndicator-theme.scss) | +| `VirtualizedMessageList` (React SDK only) | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss) | diff --git a/docusaurus/docs/Angular/theming/global-variables.mdx b/docusaurus/docs/Angular/theming/global-variables.mdx index fd9a9633..fd206abd 100644 --- a/docusaurus/docs/Angular/theming/global-variables.mdx +++ b/docusaurus/docs/Angular/theming/global-variables.mdx @@ -27,8 +27,8 @@ Global variables change the layout/look-and-feel of the whole chat UI, meanwhile Global variables can be grouped into the following categories: -- **Theme**: colors, typography and border radiuses ([list of global theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/_global-theme-variables.scss)) +- **Theme**: colors, typography and border radiuses ([list of global theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/_global-theme-variables.scss)) -- **Layout**: spacing (padding and margin) and sizing ([list of global layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.18.0/src/v2/styles/_global-layout-variables.scss)) +- **Layout**: spacing (padding and margin) and sizing ([list of global layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/_global-layout-variables.scss)) If you find that these variables are too high-level and you need more granular control, you also have the option to provide [component layer overrides](./component-variables.mdx). diff --git a/docusaurus/docs/Angular/theming/introduction.mdx b/docusaurus/docs/Angular/theming/introduction.mdx index 58fc8906..9f1cd1fa 100644 --- a/docusaurus/docs/Angular/theming/introduction.mdx +++ b/docusaurus/docs/Angular/theming/introduction.mdx @@ -2,7 +2,7 @@ id: themingv2 sidebar_position: 1 title: Introduction -keywords: [v2, theme-v2, theming-v2, theming, introduction] +keywords: [v2, theme-v2, theming-v2, theme, theming, introduction] --- import SDKSpecific from "./SDKSpecific"; @@ -18,25 +18,7 @@ import MessageCustomColor2Screenshot from "../assets/stream-chat-css-message-col import ChatUiSquareThemeScreenshot from "../assets/stream-chat-css-square-theme-screenshot.png"; import ChatUiRtlScreenshot from "../assets/stream-chat-css-rtl-layout-screenshot.png"; - - -The SDK has a new theming and customization system. This page contains information about the new version (refered to as version 2 or v2). The most significant improvements of the new version: - -- Refreshed design -- Better customization through CSS variables -- Support for RTL layout - -The [old theme](../customization/css-and-theming.mdx) (also refered to as version 1 or v1) can still be used with the latest SDK versions, but it's now deprecated, won't be receiving further updates and will be removed in a future major release. - - - - - -New theming system (v2) utilises updated markup and new class names in certain components which are being rendered based on which of the two systems you use. Most of the new components (and/or markup) aren't available in the old version (v1) due to compatibility reasons. - -To use the new theme, please upgrade [`stream-chat-react`](https://www.npmjs.com/package/stream-chat-react) to version `10.0.2` and follow the instructions below. - - +The SDK provides default CSS, which can be overridden by the integrators. ## Importing the stylesheet @@ -215,9 +197,14 @@ To solve this we also have to set the text color for the link attachment compone + ### Custom icons - +#### From CSS + +Starting from stream-chat-angular@5 it's possible to customize icons from CSS. + +Here is an example using the [Google Material Icon library](https://fonts.google.com/icons) to override the send icon: #### From CSS @@ -282,6 +269,15 @@ If the default rules set by the stream-chat-angular stylesheets not enough to se + +### Custom icons + + + +### CSS overrides + +If you'd like to add customizations that are not supported by CSS variables, you can override parts of the default CSS: + TODO diff --git a/docusaurus/docs/Angular/theming/palette-variables.mdx b/docusaurus/docs/Angular/theming/palette-variables.mdx index c80295f7..db1eb577 100644 --- a/docusaurus/docs/Angular/theming/palette-variables.mdx +++ b/docusaurus/docs/Angular/theming/palette-variables.mdx @@ -5,19 +5,6 @@ title: Palette variables keywords: [v2, theme-v2, theming-v2, theming, palette variables] --- -import SDKSpecific from "./SDKSpecific"; -import V2Warning from "./V2Warning"; - - - -:::info - - - -::: - - - A color palette is defined inside the library that used to define default values for the [global theme variables](./global-variables.mdx). If you want to work with the default theme but want to adjust the shades (for example, change `blue500` to a lighter color), you can update the palette variables. However, if you want to change the color scheme of the theme (for example, change the primary color from blue to green), you should take a look at [global theme variables](./global-variables.mdx). You can find the [list of palette variables on GitHub](https://github.com/GetStream/stream-chat-css/blob/main/src-v2/styles/_palette-variables.scss). diff --git a/package-lock.json b/package-lock.json index 86bc543c..a4ec67ab 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,15 +17,17 @@ "@angular/platform-browser": "~15.0.0", "@angular/platform-browser-dynamic": "~15.0.0", "@angular/router": "~15.0.0", + "@breezystack/lamejs": "^1.2.7", "@ctrl/ngx-emoji-mart": "^8.2.0", "@floating-ui/dom": "^1.6.3", "@ngx-translate/core": "^14.0.0", - "@stream-io/stream-chat-css": "5.0.2", + "@stream-io/stream-chat-css": "5.1.0", "@stream-io/transliterate": "^1.5.2", "angular-mentions": "1.4.0", "dayjs": "^1.11.10", "dotenv": "^16.4.5", "emoji-regex": "^10.3.0", + "fix-webm-duration": "^1.0.6", "ngx-float-ui": "^15.0.0", "pretty-bytes": "^6.1.1", "rxjs": "~7.4.0", @@ -3253,6 +3255,11 @@ "node": ">=6.9.0" } }, + "node_modules/@breezystack/lamejs": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/@breezystack/lamejs/-/lamejs-1.2.7.tgz", + "integrity": "sha512-6wc7ck65ctA75Hq7FYHTtTvGnYs6msgdxiSUICQ+A01nVOWg6rqouZB8IdyteRlfpYYiFovkf67dIeOgWIUzTA==" + }, "node_modules/@cspotcode/source-map-support": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz", @@ -4967,9 +4974,9 @@ "dev": true }, "node_modules/@stream-io/stream-chat-css": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/@stream-io/stream-chat-css/-/stream-chat-css-5.0.2.tgz", - "integrity": "sha512-iwqtdBvEhuWWhROfIniItx3rffc/vqge2IyFW0Qsfp2XnWTIjE35YWjaG1wY0Q7hz7OU+iqm/qJz//3iaEPuGw==" + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@stream-io/stream-chat-css/-/stream-chat-css-5.1.0.tgz", + "integrity": "sha512-mPR40FzkuCRwSwzPRxOCfvmN6PUTO4DWJVX/VWtFUS8/OXnMOOcHlR1elV9zz/6p2DQEuEjkIFQB9d8wWWKM1A==" }, "node_modules/@stream-io/transliterate": { "version": "1.5.2", @@ -11237,6 +11244,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/fix-webm-duration": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/fix-webm-duration/-/fix-webm-duration-1.0.6.tgz", + "integrity": "sha512-zVAqi4gE+8ywxJuAyV/rlJVX6CMtvyapEbQx6jyoeX9TMjdqAlt/FdG5d7rXSSkDVzTvS0H7CtwzHcH/vh4FPA==" + }, "node_modules/flat-cache": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz", @@ -25943,6 +25955,11 @@ "to-fast-properties": "^2.0.0" } }, + "@breezystack/lamejs": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/@breezystack/lamejs/-/lamejs-1.2.7.tgz", + "integrity": "sha512-6wc7ck65ctA75Hq7FYHTtTvGnYs6msgdxiSUICQ+A01nVOWg6rqouZB8IdyteRlfpYYiFovkf67dIeOgWIUzTA==" + }, "@cspotcode/source-map-support": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz", @@ -27135,9 +27152,9 @@ "dev": true }, "@stream-io/stream-chat-css": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/@stream-io/stream-chat-css/-/stream-chat-css-5.0.2.tgz", - "integrity": "sha512-iwqtdBvEhuWWhROfIniItx3rffc/vqge2IyFW0Qsfp2XnWTIjE35YWjaG1wY0Q7hz7OU+iqm/qJz//3iaEPuGw==" + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@stream-io/stream-chat-css/-/stream-chat-css-5.1.0.tgz", + "integrity": "sha512-mPR40FzkuCRwSwzPRxOCfvmN6PUTO4DWJVX/VWtFUS8/OXnMOOcHlR1elV9zz/6p2DQEuEjkIFQB9d8wWWKM1A==" }, "@stream-io/transliterate": { "version": "1.5.2", @@ -31691,6 +31708,11 @@ "semver-regex": "^3.1.2" } }, + "fix-webm-duration": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/fix-webm-duration/-/fix-webm-duration-1.0.6.tgz", + "integrity": "sha512-zVAqi4gE+8ywxJuAyV/rlJVX6CMtvyapEbQx6jyoeX9TMjdqAlt/FdG5d7rXSSkDVzTvS0H7CtwzHcH/vh4FPA==" + }, "flat-cache": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz", diff --git a/package.json b/package.json index ebca0c09..060ec389 100644 --- a/package.json +++ b/package.json @@ -110,15 +110,17 @@ "@angular/platform-browser": "~15.0.0", "@angular/platform-browser-dynamic": "~15.0.0", "@angular/router": "~15.0.0", + "@breezystack/lamejs": "^1.2.7", "@ctrl/ngx-emoji-mart": "^8.2.0", "@floating-ui/dom": "^1.6.3", "@ngx-translate/core": "^14.0.0", - "@stream-io/stream-chat-css": "5.0.2", + "@stream-io/stream-chat-css": "5.1.0", "@stream-io/transliterate": "^1.5.2", "angular-mentions": "1.4.0", "dayjs": "^1.11.10", "dotenv": "^16.4.5", "emoji-regex": "^10.3.0", + "fix-webm-duration": "^1.0.6", "ngx-float-ui": "^15.0.0", "pretty-bytes": "^6.1.1", "rxjs": "~7.4.0", diff --git a/projects/sample-app/src/app/app.component.html b/projects/sample-app/src/app/app.component.html index 3e753b7e..cea3346e 100644 --- a/projects/sample-app/src/app/app.component.html +++ b/projects/sample-app/src/app/app.component.html @@ -29,10 +29,22 @@ - + + + + + - + + + + + diff --git a/projects/sample-app/src/app/app.component.ts b/projects/sample-app/src/app/app.component.ts index b122ae27..a346ccc9 100644 --- a/projects/sample-app/src/app/app.component.ts +++ b/projects/sample-app/src/app/app.component.ts @@ -4,7 +4,7 @@ import { TemplateRef, ViewChild, } from '@angular/core'; -import { Observable } from 'rxjs'; +import { Observable, Subject } from 'rxjs'; import { map } from 'rxjs/operators'; import { ChatClientService, @@ -32,6 +32,7 @@ export class AppComponent implements AfterViewInit { @ViewChild('avatar') avatarTemplate!: TemplateRef; theme$: Observable; counter = 0; + sendMessageOutsideTrigger$ = new Subject(); constructor( private chatService: ChatClientService, diff --git a/projects/sample-app/src/app/app.module.ts b/projects/sample-app/src/app/app.module.ts index bee108b1..20d80588 100644 --- a/projects/sample-app/src/app/app.module.ts +++ b/projects/sample-app/src/app/app.module.ts @@ -7,6 +7,7 @@ import { CustomMessageComponent } from './custom-message/custom-message.componen import { StreamAutocompleteTextareaModule, StreamChatModule, + VoiceRecorderModule, } from 'stream-chat-angular'; import { EmojiPickerComponent } from './emoji-picker/emoji-picker.component'; import { PickerModule } from '@ctrl/ngx-emoji-mart'; @@ -18,6 +19,7 @@ import { PickerModule } from '@ctrl/ngx-emoji-mart'; TranslateModule.forRoot(), StreamChatModule, PickerModule, + VoiceRecorderModule, StreamAutocompleteTextareaModule, ], bootstrap: [AppComponent], diff --git a/projects/stream-chat-angular/ng-package.json b/projects/stream-chat-angular/ng-package.json index 9236618a..f0393f9a 100644 --- a/projects/stream-chat-angular/ng-package.json +++ b/projects/stream-chat-angular/ng-package.json @@ -7,6 +7,7 @@ }, "allowedNonPeerDependencies": [ "dayjs", + "fix-webm-duration", "@stream-io/transliterate", "uuid", "pretty-bytes", diff --git a/projects/stream-chat-angular/package.json b/projects/stream-chat-angular/package.json index 02c775c1..d7e2f225 100644 --- a/projects/stream-chat-angular/package.json +++ b/projects/stream-chat-angular/package.json @@ -19,16 +19,23 @@ "peerDependencies": { "@angular/common": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "@angular/core": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", + "@breezystack/lamejs": "^1.2.7", "@ngx-translate/core": "^14.0.0 || ^15.0.0", "rxjs": "^7.4.0", "stream-chat": "^8.29.0" }, + "peerDependenciesMeta": { + "@breezystack/lamejs": { + "optional": true + } + }, "dependencies": { "@floating-ui/dom": "^1.6.3", "@stream-io/transliterate": "^1.5.2", "angular-mentions": "^1.4.0", "dayjs": "^1.11.10", "emoji-regex": "^10.3.0", + "fix-webm-duration": "^1.0.6", "ngx-float-ui": "^15.0.0|| ^16.0.0 || ^17.0.0 || ^18.0.0 || ^18.0.1-rc.0", "pretty-bytes": "^6.1.1", "tslib": "^2.3.0", diff --git a/projects/stream-chat-angular/src/assets/i18n/en.ts b/projects/stream-chat-angular/src/assets/i18n/en.ts index 0e56b2ff..8c51242b 100644 --- a/projects/stream-chat-angular/src/assets/i18n/en.ts +++ b/projects/stream-chat-angular/src/assets/i18n/en.ts @@ -120,5 +120,11 @@ export const en = { Edited: 'Edited', 'Error playing audio': 'Error playing audio', 'Copy text': 'Copy text', + 'Please grant permission to use microhpone': + 'Please grant permission to use microhpone', + 'Error starting recording': 'Error starting recording', + 'An error has occurred during recording': + 'An error has occurred during recording', + 'Media recording not supported': 'Media recording not supported', }, }; 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 58819ae5..5a0525d1 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 @@ -48,9 +48,13 @@
-
+
{{ attachmentUpload.file.name }}
this.createPreview(f)); + imageFiles.forEach((f) => void this.createPreview(f)); const newUploads = [ ...imageFiles.map((file) => ({ file, @@ -177,7 +214,7 @@ export class AttachmentService< return attachmentUploads .filter((r) => r.state === 'success') .map((r) => { - const attachment: Attachment = { + let attachment: Attachment = { type: r.type, }; if (r.fromAttachment) { @@ -193,6 +230,9 @@ export class AttachmentService< attachment.file_size = r.file?.size; attachment.thumb_url = r.thumb_url; } + if (r.extraData) { + attachment = { ...attachment, ...r.extraData }; + } } return attachment; @@ -243,18 +283,23 @@ export class AttachmentService< } } - private createPreview(file: File | Blob) { - const reader = new FileReader(); - reader.onload = (event) => { + private async createPreview(file: File | Blob) { + try { + const uri = await createUriFromBlob(file); const attachmentUploads = this.attachmentUploadsSubject.getValue(); const upload = attachmentUploads.find((upload) => upload.file === file); if (!upload) { return; } - upload.previewUri = event.target?.result || undefined; + upload.previewUri = uri; this.attachmentUploadsSubject.next([...attachmentUploads]); - }; - reader.readAsDataURL(file as Blob); + } catch (e: unknown) { + this.chatClientService?.chatClient?.logger( + 'error', + e instanceof Error ? e.message : `Can't create image preview`, + { error: e, tag: ['AttachmentService'] } + ); + } } private async uploadAttachments(uploads: AttachmentUpload[]) { 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 322148e6..a44d663f 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 @@ -15,8 +15,9 @@ import { import { ChannelPreviewComponent } from './channel-preview.component'; import { Observable, Subject, of } from 'rxjs'; import { DefaultStreamChatGenerics } from '../types'; -import { IconPlaceholderComponent } from '../icon-placeholder/icon-placeholder.component'; import { DateParserService } from '../date-parser.service'; +import { IconModule } from '../icon/icon.module'; +import { IconPlaceholderComponent } from '../icon/icon-placeholder/icon-placeholder.component'; describe('ChannelPreviewComponent', () => { let fixture: ComponentFixture; @@ -42,12 +43,11 @@ describe('ChannelPreviewComponent', () => { user$: of({ id: 'currentUser' }), }; TestBed.configureTestingModule({ - imports: [TranslateModule.forRoot()], + imports: [TranslateModule.forRoot(), IconModule], declarations: [ ChannelPreviewComponent, AvatarComponent, AvatarPlaceholderComponent, - IconPlaceholderComponent, ], providers: [ { provide: ChannelService, useValue: channelServiceMock }, diff --git a/projects/stream-chat-angular/src/lib/file-utils.ts b/projects/stream-chat-angular/src/lib/file-utils.ts new file mode 100644 index 00000000..84d06bc7 --- /dev/null +++ b/projects/stream-chat-angular/src/lib/file-utils.ts @@ -0,0 +1,49 @@ +export const isImageFile = (file: File) => { + // photoshop files begin with 'image/' + return file.type.startsWith('image/') && !file.type.endsWith('.photoshop'); +}; + +export const readBlobAsArrayBuffer = (blob: Blob): Promise => + new Promise((resolve, reject) => { + const fileReader = new FileReader(); + fileReader.onload = () => { + resolve(fileReader.result as ArrayBuffer); + }; + + fileReader.onerror = () => { + reject(fileReader.error); + }; + + fileReader.readAsArrayBuffer(blob); + }); + +export const createFileFromBlobs = ({ + blobsArray, + fileName, + mimeType, +}: { + blobsArray: Blob[]; + fileName: string; + mimeType: string; +}) => { + const concatenatedBlob = new Blob(blobsArray, { type: mimeType }); + return new File([concatenatedBlob], fileName, { + type: concatenatedBlob.type, + }); +}; + +export const getExtensionFromMimeType = (mimeType: string) => { + const match = mimeType.match(/\/([^/;]+)/); + return match && match[1]; +}; + +export const createUriFromBlob = (blob: Blob) => { + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.onload = (event) => { + resolve(event.target?.result ?? undefined); + }; + reader.onerror = (e) => reject(e); + reader.readAsDataURL(blob); + }); +}; diff --git a/projects/stream-chat-angular/src/lib/format-duration.ts b/projects/stream-chat-angular/src/lib/format-duration.ts new file mode 100644 index 00000000..2d1d86ee --- /dev/null +++ b/projects/stream-chat-angular/src/lib/format-duration.ts @@ -0,0 +1,18 @@ +export const formatDuration = (durationInSeconds?: number) => { + if (durationInSeconds === undefined || durationInSeconds <= 0) return '00:00'; + + const [hours, hoursLeftover] = divMod(durationInSeconds, 3600); + const [minutes, seconds] = divMod(hoursLeftover, 60); + const roundedSeconds = Math.ceil(seconds); + + const prependHrsZero = hours.toString().length === 1 ? '0' : ''; + const prependMinZero = minutes.toString().length === 1 ? '0' : ''; + const prependSecZero = roundedSeconds.toString().length === 1 ? '0' : ''; + const minSec = `${prependMinZero}${minutes}:${prependSecZero}${roundedSeconds}`; + + return hours ? `${prependHrsZero}${hours}:` + minSec : minSec; +}; + +const divMod = (num: number, divisor: number) => { + return [Math.floor(num / divisor), num % divisor]; +}; diff --git a/projects/stream-chat-angular/src/lib/icon-placeholder/icon-placeholder.component.html b/projects/stream-chat-angular/src/lib/icon/icon-placeholder/icon-placeholder.component.html similarity index 100% rename from projects/stream-chat-angular/src/lib/icon-placeholder/icon-placeholder.component.html rename to projects/stream-chat-angular/src/lib/icon/icon-placeholder/icon-placeholder.component.html diff --git a/projects/stream-chat-angular/src/lib/icon-placeholder/icon-placeholder.component.spec.ts b/projects/stream-chat-angular/src/lib/icon/icon-placeholder/icon-placeholder.component.spec.ts similarity index 96% rename from projects/stream-chat-angular/src/lib/icon-placeholder/icon-placeholder.component.spec.ts rename to projects/stream-chat-angular/src/lib/icon/icon-placeholder/icon-placeholder.component.spec.ts index deebb220..2e4bf8fb 100644 --- a/projects/stream-chat-angular/src/lib/icon-placeholder/icon-placeholder.component.spec.ts +++ b/projects/stream-chat-angular/src/lib/icon/icon-placeholder/icon-placeholder.component.spec.ts @@ -1,8 +1,8 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { IconComponent } from '../icon/icon.component'; import { IconPlaceholderComponent } from './icon-placeholder.component'; +import { IconComponent } from '../icon.component'; describe('IconPlaceholderComponent', () => { let component: IconPlaceholderComponent; diff --git a/projects/stream-chat-angular/src/lib/icon-placeholder/icon-placeholder.component.ts b/projects/stream-chat-angular/src/lib/icon/icon-placeholder/icon-placeholder.component.ts similarity index 85% rename from projects/stream-chat-angular/src/lib/icon-placeholder/icon-placeholder.component.ts rename to projects/stream-chat-angular/src/lib/icon/icon-placeholder/icon-placeholder.component.ts index e7ddd117..0916e089 100644 --- a/projects/stream-chat-angular/src/lib/icon-placeholder/icon-placeholder.component.ts +++ b/projects/stream-chat-angular/src/lib/icon/icon-placeholder/icon-placeholder.component.ts @@ -1,7 +1,7 @@ import { Component, Input, OnChanges } from '@angular/core'; -import { CustomTemplatesService } from '../custom-templates.service'; -import { Icon } from '../icon/icon.component'; -import { IconContext } from '../types'; +import { Icon } from '../icon.component'; +import { IconContext } from '../../types'; +import { CustomTemplatesService } from '../../custom-templates.service'; /** * The `IconPlaceholder` component displays the [default icons](./IconComponent.mdx) unless a [custom template](../services/CustomTemplatesService.mdx) is provided. This component is used by the SDK internally, you likely won't need to use it. diff --git a/projects/stream-chat-angular/src/lib/icon/icon.component.ts b/projects/stream-chat-angular/src/lib/icon/icon.component.ts index a4b47637..6a788b83 100644 --- a/projects/stream-chat-angular/src/lib/icon/icon.component.ts +++ b/projects/stream-chat-angular/src/lib/icon/icon.component.ts @@ -20,7 +20,9 @@ export type Icon = | 'download' | 'error' | 'play' - | 'pause'; + | 'pause' + | 'mic' + | 'bin'; /** * The `Icon` component can be used to display different icons (i. e. message delivered icon). diff --git a/projects/stream-chat-angular/src/lib/icon/icon.module.ts b/projects/stream-chat-angular/src/lib/icon/icon.module.ts new file mode 100644 index 00000000..57abbfae --- /dev/null +++ b/projects/stream-chat-angular/src/lib/icon/icon.module.ts @@ -0,0 +1,23 @@ +import { NgModule } from '@angular/core'; +import { IconComponent } from './icon.component'; +import { CommonModule } from '@angular/common'; +import { LoadingIndicatorComponent } from './loading-indicator/loading-indicator.component'; +import { IconPlaceholderComponent } from './icon-placeholder/icon-placeholder.component'; +import { LoadingIndicatorPlaceholderComponent } from './loading-indicator-placeholder/loading-indicator-placeholder.component'; + +@NgModule({ + declarations: [ + IconComponent, + IconPlaceholderComponent, + LoadingIndicatorComponent, + LoadingIndicatorPlaceholderComponent, + ], + imports: [CommonModule], + exports: [ + IconComponent, + IconPlaceholderComponent, + LoadingIndicatorComponent, + LoadingIndicatorPlaceholderComponent, + ], +}) +export class IconModule {} diff --git a/projects/stream-chat-angular/src/lib/loading-indicator-placeholder/loading-indicator-placeholder.component.html b/projects/stream-chat-angular/src/lib/icon/loading-indicator-placeholder/loading-indicator-placeholder.component.html similarity index 100% rename from projects/stream-chat-angular/src/lib/loading-indicator-placeholder/loading-indicator-placeholder.component.html rename to projects/stream-chat-angular/src/lib/icon/loading-indicator-placeholder/loading-indicator-placeholder.component.html diff --git a/projects/stream-chat-angular/src/lib/loading-indicator-placeholder/loading-indicator-placeholder.component.ts b/projects/stream-chat-angular/src/lib/icon/loading-indicator-placeholder/loading-indicator-placeholder.component.ts similarity index 89% rename from projects/stream-chat-angular/src/lib/loading-indicator-placeholder/loading-indicator-placeholder.component.ts rename to projects/stream-chat-angular/src/lib/icon/loading-indicator-placeholder/loading-indicator-placeholder.component.ts index 324dd429..dc2a5c59 100644 --- a/projects/stream-chat-angular/src/lib/loading-indicator-placeholder/loading-indicator-placeholder.component.ts +++ b/projects/stream-chat-angular/src/lib/icon/loading-indicator-placeholder/loading-indicator-placeholder.component.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { CustomTemplatesService } from '../custom-templates.service'; +import { CustomTemplatesService } from '../../custom-templates.service'; /** * The `LoadingInficatorPlaceholder` component displays the [default loading indicator](./LoadingIndicatorComponent.mdx) unless a [custom template](../services/CustomTemplatesService.mdx) is provided. This component is used by the SDK internally, you likely won't need to use it. diff --git a/projects/stream-chat-angular/src/lib/loading-indicator/loading-indicator.component.html b/projects/stream-chat-angular/src/lib/icon/loading-indicator/loading-indicator.component.html similarity index 100% rename from projects/stream-chat-angular/src/lib/loading-indicator/loading-indicator.component.html rename to projects/stream-chat-angular/src/lib/icon/loading-indicator/loading-indicator.component.html diff --git a/projects/stream-chat-angular/src/lib/loading-indicator/loading-indicator.component.ts b/projects/stream-chat-angular/src/lib/icon/loading-indicator/loading-indicator.component.ts similarity index 100% rename from projects/stream-chat-angular/src/lib/loading-indicator/loading-indicator.component.ts rename to projects/stream-chat-angular/src/lib/icon/loading-indicator/loading-indicator.component.ts diff --git a/projects/stream-chat-angular/src/lib/is-image-file.ts b/projects/stream-chat-angular/src/lib/is-image-file.ts deleted file mode 100644 index bb6942c4..00000000 --- a/projects/stream-chat-angular/src/lib/is-image-file.ts +++ /dev/null @@ -1,4 +0,0 @@ -export const isImageFile = (file: File) => { - // photoshop files begin with 'image/' - return file.type.startsWith('image/') && !file.type.endsWith('.photoshop'); -}; diff --git a/projects/stream-chat-angular/src/lib/is-safari.ts b/projects/stream-chat-angular/src/lib/is-safari.ts new file mode 100644 index 00000000..af3acb78 --- /dev/null +++ b/projects/stream-chat-angular/src/lib/is-safari.ts @@ -0,0 +1,3 @@ +export const isSafari = /^((?!chrome|android).)*safari/i.test( + navigator.userAgent +); diff --git a/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts b/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts index 729fc8dd..ebf9448b 100644 --- a/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts +++ b/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts @@ -23,11 +23,15 @@ export class MessageInputConfigService { * The scope for user mentions, either members of the current channel of members of the application */ mentionScope: 'channel' | 'application' | undefined = 'channel'; - /** * In `desktop` mode the `Enter` key will trigger message sending, in `mobile` mode the `Enter` key will insert a new line to the message input. */ inputMode: 'desktop' | 'mobile' = 'desktop'; + /** + * If `true` the recording will be sent as a message immediately after the recording is completed. + * If `false`, the recording will added to the attachment preview, and users can continue composing the message. + */ + sendVoiceRecordingImmediately = true; constructor() {} } diff --git a/projects/stream-chat-angular/src/lib/message-input/message-input.component.html b/projects/stream-chat-angular/src/lib/message-input/message-input.component.html index 7842f3da..1ad80f01 100644 --- a/projects/stream-chat-angular/src/lib/message-input/message-input.component.html +++ b/projects/stream-chat-angular/src/lib/message-input/message-input.component.html @@ -1,4 +1,7 @@ -
+
{{ "streamChat.Reply to Message" | translate }} @@ -29,6 +32,7 @@
+ @@ -157,6 +161,20 @@ > {{ cooldown$ | async }}
+ +
@@ -168,3 +186,8 @@
+ diff --git a/projects/stream-chat-angular/src/lib/message-input/message-input.component.spec.ts b/projects/stream-chat-angular/src/lib/message-input/message-input.component.spec.ts index 80d56d7b..3e499f76 100644 --- a/projects/stream-chat-angular/src/lib/message-input/message-input.component.spec.ts +++ b/projects/stream-chat-angular/src/lib/message-input/message-input.component.spec.ts @@ -30,11 +30,12 @@ import { import { MessageInputComponent } from './message-input.component'; import { TextareaDirective } from './textarea.directive'; import { AutocompleteTextareaComponent } from './autocomplete-textarea/autocomplete-textarea.component'; -import { AvatarComponent } from '../avatar/avatar.component'; import { AttachmentListComponent } from '../attachment-list/attachment-list.component'; import { AvatarPlaceholderComponent } from '../avatar-placeholder/avatar-placeholder.component'; import { AttachmentPreviewListComponent } from '../attachment-preview-list/attachment-preview-list.component'; import { MessageActionsService } from '../message-actions.service'; +import { StreamAvatarModule } from '../stream-avatar.module'; +import { VoiceRecorderService } from './voice-recorder.service'; describe('MessageInputComponent', () => { let nativeElement: HTMLElement; @@ -108,18 +109,17 @@ describe('MessageInputComponent', () => { provide: textareaInjectionToken, useValue: AutocompleteTextareaComponent, }, + VoiceRecorderService, ], }, }); TestBed.configureTestingModule({ - imports: [TranslateModule.forRoot()], + imports: [TranslateModule.forRoot(), StreamAvatarModule], declarations: [ MessageInputComponent, TextareaDirective, AutocompleteTextareaComponent, - AvatarComponent, AttachmentListComponent, - AvatarPlaceholderComponent, AttachmentPreviewListComponent, ], providers: [ @@ -233,7 +233,7 @@ describe('MessageInputComponent', () => { expect(spy).not.toHaveBeenCalledWith(); }); - it(`shouldn't display send button if corresponding input if #displaySendButton`, () => { + it(`shouldn't display send button if corresponding input is false`, () => { component.displaySendButton = false; fixture.detectChanges(); @@ -245,6 +245,22 @@ describe('MessageInputComponent', () => { expect(querySendButton()).not.toBeNull(); }); + it(`shouldn't display voice recording button if corresponding input is false`, () => { + component.displayVoiceRecordingButton = false; + fixture.detectChanges(); + + expect( + nativeElement.querySelector('[data-testid="start-voice-recording"]') + ).toBeNull(); + + component.displayVoiceRecordingButton = true; + fixture.detectChanges(); + + expect( + nativeElement.querySelector('[data-testid="start-voice-recording"]') + ).not.toBeNull(); + }); + it('should emit #messageUpdate event if message update was successful', async () => { const messageToEdit = mockMessage(); component.message = messageToEdit; diff --git a/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts b/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts index 5f3f25f1..bd83c16c 100644 --- a/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts +++ b/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts @@ -4,6 +4,7 @@ import { Component, ComponentFactoryResolver, ComponentRef, + ContentChild, ElementRef, EventEmitter, HostBinding, @@ -12,6 +13,7 @@ import { OnChanges, OnDestroy, OnInit, + Optional, Output, SimpleChanges, TemplateRef, @@ -28,6 +30,7 @@ import { NotificationService } from '../notification.service'; import { AttachmentPreviewListContext, AttachmentUpload, + AudioRecording, CustomAttachmentUploadContext, DefaultStreamChatGenerics, EmojiPickerContext, @@ -40,6 +43,8 @@ import { EmojiInputService } from './emoji-input.service'; import { CustomTemplatesService } from '../custom-templates.service'; import { v4 as uuidv4 } from 'uuid'; import { MessageActionsService } from '../message-actions.service'; +import { VoiceRecorderService } from './voice-recorder.service'; +import { AudioRecorderService } from '../voice-recorder/audio-recorder.service'; /** * The `MessageInput` component displays an input where users can type their messages and upload files, and sends the message to the active channel. The component can be used to compose new messages or update existing ones. To send messages, the chat user needs to have the necessary [channel capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript). @@ -48,7 +53,7 @@ import { MessageActionsService } from '../message-actions.service'; selector: 'stream-message-input', templateUrl: './message-input.component.html', styles: [], - providers: [AttachmentService, EmojiInputService], + providers: [AttachmentService, EmojiInputService, VoiceRecorderService], }) export class MessageInputComponent implements OnInit, OnChanges, OnDestroy, AfterViewInit @@ -99,13 +104,21 @@ export class MessageInputComponent * Use this input to control wether a send button is rendered or not. If you don't render a send button, you can still trigger message send using the `sendMessage$` input. */ @Input() displaySendButton = true; + /** + * You can enable/disable voice recordings with this input + */ + @Input() displayVoiceRecordingButton = false; /** * Emits when a message was successfuly sent or updated */ @Output() readonly messageUpdate = new EventEmitter<{ message: StreamMessage; }>(); + @ContentChild(TemplateRef) voiceRecorderRef: + | TemplateRef<{ service: VoiceRecorderService }> + | undefined; @HostBinding() class = 'str-chat__message-input-angular-host'; + isVoiceRecording = true; isFileUploadAuthorized: boolean | undefined; canSendLinks: boolean | undefined; canSendMessages: boolean | undefined; @@ -142,7 +155,7 @@ export class MessageInputComponent constructor( private channelService: ChannelService, private notificationService: NotificationService, - private attachmentService: AttachmentService, + public readonly attachmentService: AttachmentService, private configService: MessageInputConfigService, @Inject(textareaInjectionToken) private textareaType: Type, @@ -150,7 +163,9 @@ export class MessageInputComponent private cdRef: ChangeDetectorRef, private emojiInputService: EmojiInputService, private customTemplatesService: CustomTemplatesService, - private messageActionsService: MessageActionsService + private messageActionsService: MessageActionsService, + public readonly voiceRecorderService: VoiceRecorderService, + @Optional() public audioRecorder?: AudioRecorderService ) { this.textareaPlaceholder = this.defaultTextareaPlaceholder; this.subscriptions.push( @@ -168,6 +183,7 @@ export class MessageInputComponent if (channel && this.channel && channel.id !== this.channel.id) { this.textareaValue = ''; this.attachmentService.resetAttachmentUploads(); + this.voiceRecorderService.isRecorderVisible$.next(false); } const capabilities = channel?.data?.own_capabilities as string[]; if (capabilities) { @@ -212,6 +228,11 @@ export class MessageInputComponent () => void this.channelService.typingStarted(this.parentMessageId) ) ); + this.subscriptions.push( + this.voiceRecorderService.isRecorderVisible$.subscribe((isVisible) => { + this.isVoiceRecording = isVisible; + }) + ); this.subscriptions.push( combineLatest([ @@ -245,6 +266,13 @@ export class MessageInputComponent } }) ); + this.subscriptions.push( + this.voiceRecorderService.recording$.subscribe((recording) => { + if (recording) { + void this.voiceRecordingReady(recording); + } + }) + ); } ngOnInit(): void { @@ -452,6 +480,24 @@ export class MessageInputComponent }; } + async startVoiceRecording() { + await this.audioRecorder?.start(); + if (this.audioRecorder?.isRecording) { + this.voiceRecorderService.isRecorderVisible$.next(true); + } + } + + async voiceRecordingReady(recording: AudioRecording) { + try { + await this.attachmentService.uploadVoiceRecording(recording); + if (this.configService.sendVoiceRecordingImmediately) { + await this.messageSent(); + } + } finally { + this.voiceRecorderService.isRecorderVisible$.next(false); + } + } + get isUpdate() { return !!this.message; } diff --git a/projects/stream-chat-angular/src/lib/message-input/voice-recorder.service.ts b/projects/stream-chat-angular/src/lib/message-input/voice-recorder.service.ts new file mode 100644 index 00000000..656eaf5f --- /dev/null +++ b/projects/stream-chat-angular/src/lib/message-input/voice-recorder.service.ts @@ -0,0 +1,22 @@ +import { Injectable, NgModule } from '@angular/core'; +import { BehaviorSubject } from 'rxjs'; +import { AudioRecording } from '../types'; + +/** + * The `VoiceRecorderService` provides a commincation outlet between the message input and voice recorder components. + */ +@Injectable({ + providedIn: NgModule, +}) +export class VoiceRecorderService { + /** + * Use this property to get/set if the recording component should be visible + */ + isRecorderVisible$ = new BehaviorSubject(false); + /** + * The audio recording that was created + */ + recording$ = new BehaviorSubject(undefined); + + constructor() {} +} diff --git a/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts b/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts index 782341c1..4021db2b 100644 --- a/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts +++ b/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts @@ -43,6 +43,7 @@ import { listUsers } from '../list-users'; import { DateParserService } from '../date-parser.service'; import { isOnSeparateDate } from '../is-on-separate-date'; import { VirtualizedMessageListService } from '../virtualized-message-list.service'; +import { isSafari } from '../is-safari'; /** * The `MessageList` component renders a scrollable list of messages. @@ -148,7 +149,6 @@ export class MessageListComponent typeof setTimeout >; private jumpToLatestButtonVisibilityTimeout?: ReturnType; - private isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); private forceRepaintSubject = new Subject(); private messageIdToAnchorTo?: string; private anchorMessageTopOffset?: number; @@ -468,7 +468,7 @@ export class MessageListComponent scrollToBottom(): void { this.scrollContainer.nativeElement.scrollTop = this.scrollContainer.nativeElement.scrollHeight + 0.1; - if (this.isSafari) { + if (isSafari) { this.forceRepaintSubject.next(); } } @@ -609,7 +609,7 @@ export class MessageListComponent (messageToAlignTo?.getBoundingClientRect()?.top || 0) - (this.anchorMessageTopOffset || 0); this.anchorMessageTopOffset = undefined; - if (this.isSafari) { + if (isSafari) { this.forceRepaintSubject.next(); } } diff --git a/projects/stream-chat-angular/src/lib/message/message.component.spec.ts b/projects/stream-chat-angular/src/lib/message/message.component.spec.ts index 146d9bc6..fc78ff42 100644 --- a/projects/stream-chat-angular/src/lib/message/message.component.spec.ts +++ b/projects/stream-chat-angular/src/lib/message/message.component.spec.ts @@ -7,7 +7,7 @@ import { import { MessageResponseBase, UserResponse } from 'stream-chat'; import { DefaultStreamChatGenerics, StreamMessage } from '../types'; -import { LoadingIndicatorComponent } from '../loading-indicator/loading-indicator.component'; +import { LoadingIndicatorComponent } from '../icon/loading-indicator/loading-indicator.component'; import { MessageComponent } from './message.component'; import { AvatarComponent } from '../avatar/avatar.component'; import { ChatClientService } from '../chat-client.service'; diff --git a/projects/stream-chat-angular/src/lib/stream-chat.module.ts b/projects/stream-chat-angular/src/lib/stream-chat.module.ts index 4522acd5..9b487fd3 100644 --- a/projects/stream-chat-angular/src/lib/stream-chat.module.ts +++ b/projects/stream-chat-angular/src/lib/stream-chat.module.ts @@ -7,8 +7,6 @@ import { MessageComponent } from './message/message.component'; import { MessageInputComponent } from './message-input/message-input.component'; import { MessageListComponent } from './message-list/message-list.component'; import { CommonModule } from '@angular/common'; -import { LoadingIndicatorComponent } from './loading-indicator/loading-indicator.component'; -import { IconComponent } from './icon/icon.component'; import { MessageActionsBoxComponent } from './message-actions-box/message-actions-box.component'; import { AttachmentListComponent } from './attachment-list/attachment-list.component'; import { MessageReactionsComponent } from './message-reactions/message-reactions.component'; @@ -19,16 +17,15 @@ import { ModalComponent } from './modal/modal.component'; import { TextareaDirective } from './message-input/textarea.directive'; import { StreamAvatarModule } from './stream-avatar.module'; import { ThreadComponent } from './thread/thread.component'; -import { IconPlaceholderComponent } from './icon-placeholder/icon-placeholder.component'; -import { LoadingIndicatorPlaceholderComponent } from './loading-indicator-placeholder/loading-indicator-placeholder.component'; import { MessageBouncePromptComponent } from './message-bounce-prompt/message-bounce-prompt.component'; -import { VoiceRecordingComponent } from './voice-recording/voice-recording.component'; -import { VoiceRecordingWavebarComponent } from './voice-recording/voice-recording-wavebar/voice-recording-wavebar.component'; import { NgxFloatUiModule } from 'ngx-float-ui'; import { TranslateModule } from '@ngx-translate/core'; import { MessageReactionsSelectorComponent } from './message-reactions-selector/message-reactions-selector.component'; import { PaginatedListComponent } from './paginated-list/paginated-list.component'; import { UserListComponent } from './user-list/user-list.component'; +import { VoiceRecordingModule } from './voice-recording/voice-recording.module'; +import { IconModule } from './icon/icon.module'; +import { VoiceRecorderService } from './message-input/voice-recorder.service'; @NgModule({ declarations: [ @@ -39,8 +36,6 @@ import { UserListComponent } from './user-list/user-list.component'; MessageComponent, MessageInputComponent, MessageListComponent, - LoadingIndicatorComponent, - IconComponent, MessageActionsBoxComponent, AttachmentListComponent, MessageReactionsComponent, @@ -50,11 +45,7 @@ import { UserListComponent } from './user-list/user-list.component'; ModalComponent, TextareaDirective, ThreadComponent, - IconPlaceholderComponent, - LoadingIndicatorPlaceholderComponent, MessageBouncePromptComponent, - VoiceRecordingComponent, - VoiceRecordingWavebarComponent, MessageReactionsSelectorComponent, UserListComponent, PaginatedListComponent, @@ -64,6 +55,8 @@ import { UserListComponent } from './user-list/user-list.component'; NgxFloatUiModule, StreamAvatarModule, TranslateModule, + VoiceRecordingModule, + IconModule, ], exports: [ ChannelComponent, @@ -73,8 +66,6 @@ import { UserListComponent } from './user-list/user-list.component'; MessageComponent, MessageInputComponent, MessageListComponent, - LoadingIndicatorComponent, - IconComponent, MessageActionsBoxComponent, AttachmentListComponent, MessageReactionsComponent, @@ -84,14 +75,13 @@ import { UserListComponent } from './user-list/user-list.component'; ModalComponent, StreamAvatarModule, ThreadComponent, - IconPlaceholderComponent, - LoadingIndicatorPlaceholderComponent, MessageBouncePromptComponent, - VoiceRecordingComponent, - VoiceRecordingWavebarComponent, + VoiceRecordingModule, MessageReactionsSelectorComponent, UserListComponent, PaginatedListComponent, + IconModule, ], + providers: [VoiceRecorderService], }) export class StreamChatModule {} diff --git a/projects/stream-chat-angular/src/lib/types.ts b/projects/stream-chat-angular/src/lib/types.ts index ec51c9fb..3dd6aaf9 100644 --- a/projects/stream-chat-angular/src/lib/types.ts +++ b/projects/stream-chat-angular/src/lib/types.ts @@ -93,9 +93,10 @@ export type AttachmentUpload< errorReason?: AttachmentUploadErrorReason; errorExtraInfo?: { param: string }[]; url?: string; - type: 'image' | 'file' | 'video'; + type: 'image' | 'file' | 'video' | 'voiceRecording'; previewUri?: string | ArrayBuffer; thumb_url?: string; + extraData?: Partial>; fromAttachment?: Attachment; }; @@ -472,3 +473,12 @@ export type VirtualizedListQueryState = { export type VirtualizedListQueryDirection = 'top' | 'bottom'; export type VirtualizedListVerticalItemPosition = 'top' | 'bottom' | 'middle'; + +export type AudioRecording = MediaRecording & { waveform_data: number[] }; + +export type MediaRecording = { + recording: File; + duration: number; + mime_type: string; + asset_url: string | ArrayBuffer | undefined; +}; diff --git a/projects/stream-chat-angular/src/lib/voice-recorder/amplitude-recorder.service.ts b/projects/stream-chat-angular/src/lib/voice-recorder/amplitude-recorder.service.ts new file mode 100644 index 00000000..bc8cec20 --- /dev/null +++ b/projects/stream-chat-angular/src/lib/voice-recorder/amplitude-recorder.service.ts @@ -0,0 +1,167 @@ +import { Injectable, NgModule } from '@angular/core'; +import { BehaviorSubject, Observable } from 'rxjs'; +import { ChatClientService } from '../chat-client.service'; + +const MAX_FREQUENCY_AMPLITUDE = 255 as const; + +const rootMeanSquare = (values: Uint8Array) => + Math.sqrt( + values.reduce((acc, val) => acc + Math.pow(val, 2), 0) / values.length + ); + +/** + * fftSize + * An unsigned integer, representing the window size of the FFT, given in number of samples. + * A higher value will result in more details in the frequency domain but fewer details + * in the amplitude domain. + * + * Must be a power of 2 between 2^5 and 2^15, so one of: 32, 64, 128, 256, 512, 1024, 2048, 4096, 8192, 16384, and 32768. + * Defaults to 32. + * + * maxDecibels + * A double, representing the maximum decibel value for scaling the FFT analysis data, + * where 0 dB is the loudest possible sound, -10 dB is a 10th of that, etc. + * The default value is -30 dB. + * + * minDecibels + * A double, representing the minimum decibel value for scaling the FFT analysis data, + * where 0 dB is the loudest possible sound, -10 dB is a 10th of that, etc. + * The default value is -100 dB. + */ +export type AmplitudeAnalyserConfig = Pick< + AnalyserNode, + 'fftSize' | 'maxDecibels' | 'minDecibels' +>; +export type AmplitudeRecorderConfig = { + analyserConfig: AmplitudeAnalyserConfig; + sampleCount: number; + samplingFrequencyMs: number; +}; + +export const DEFAULT_AMPLITUDE_RECORDER_CONFIG: AmplitudeRecorderConfig = { + analyserConfig: { + fftSize: 32, + maxDecibels: 0, + minDecibels: -100, + } as AmplitudeAnalyserConfig, + sampleCount: 100, + samplingFrequencyMs: 60, +}; + +/** + * The `AmplitudeRecorderService` is a utility service used to create amplitude values for voice recordings, making it possible to display a wave bar + */ +@Injectable({ providedIn: NgModule }) +export class AmplitudeRecorderService { + config = DEFAULT_AMPLITUDE_RECORDER_CONFIG; + amplitudes$: Observable; + error$: Observable; + + private amplitudesSubject = new BehaviorSubject([]); + private errorSubject = new BehaviorSubject(undefined); + private audioContext: AudioContext | undefined; + private analyserNode: AnalyserNode | undefined; + private microphone: MediaStreamAudioSourceNode | undefined; + private stream: MediaStream | undefined; + private amplitudeSamplingInterval: ReturnType | undefined; + + constructor(private chatService: ChatClientService) { + this.amplitudes$ = this.amplitudesSubject.asObservable(); + this.error$ = this.errorSubject.asObservable(); + } + + /** + * The recorded amplitudes + */ + get amplitudes() { + return this.amplitudesSubject.value; + } + + /** + * Start amplitude recording for the given media stream + * @param stream + */ + start = (stream: MediaStream) => { + this.stop(); + + this.stream = stream; + this.init(); + + this.resume(); + }; + + /** + * Temporarily pause amplitude recording, recording can be resumed with `resume` + */ + pause() { + clearInterval(this.amplitudeSamplingInterval); + this.amplitudeSamplingInterval = undefined; + } + + /** + * Resume amplited recording after it was pasued + */ + resume() { + this.amplitudeSamplingInterval = setInterval(() => { + if (!this.analyserNode) { + return; + } + const frequencyBins = new Uint8Array(this.analyserNode.frequencyBinCount); + try { + this.analyserNode.getByteFrequencyData(frequencyBins); + } catch (e) { + this.logError(e as Error); + this.errorSubject.next(e as Error); + return; + } + const normalizedSignalStrength = + rootMeanSquare(frequencyBins) / MAX_FREQUENCY_AMPLITUDE; + this.amplitudesSubject.next([ + ...this.amplitudesSubject.value, + normalizedSignalStrength, + ]); + }, this.config.samplingFrequencyMs); + } + + /** + * Stop the amplitude recording and frees up used resources + */ + stop() { + if (!this.stream) { + return; + } + this.stream = undefined; + clearInterval(this.amplitudeSamplingInterval); + this.amplitudeSamplingInterval = undefined; + this.amplitudesSubject.next([]); + this.errorSubject.next(undefined); + this.microphone?.disconnect(); + this.analyserNode?.disconnect(); + if (this.audioContext?.state !== 'closed') { + void this.audioContext?.close(); + } + } + + private init() { + if (!this.stream) { + return; + } + + this.audioContext = new AudioContext(); + this.analyserNode = this.audioContext.createAnalyser(); + const { analyserConfig } = this.config; + this.analyserNode.fftSize = analyserConfig.fftSize; + this.analyserNode.maxDecibels = analyserConfig.maxDecibels; + this.analyserNode.minDecibels = analyserConfig.minDecibels; + + this.microphone = this.audioContext.createMediaStreamSource(this.stream); + this.microphone.connect(this.analyserNode); + } + + private logError(error: Error) { + this.chatService.chatClient?.logger('error', error.message, { + error: error, + tag: ['AmplitudeRecorderService'], + }); + } +} 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 new file mode 100644 index 00000000..ee6fa79d --- /dev/null +++ b/projects/stream-chat-angular/src/lib/voice-recorder/audio-recorder.service.ts @@ -0,0 +1,96 @@ +import { Injectable } from '@angular/core'; +import { AmplitudeRecorderService } from './amplitude-recorder.service'; +import { isSafari } from '../is-safari'; +import { MediaRecorderConfig, MultimediaRecorder } from './media-recorder'; +import { NotificationService } from '../notification.service'; +import { ChatClientService } from '../chat-client.service'; +import { TranscoderService } from './transcoder.service'; +import { resampleWaveForm } from '../wave-form-sampler'; +import { AudioRecording, MediaRecording } from '../types'; +import { NgModel } from '@angular/forms'; + +/** + * The `AudioRecorderService` can record an audio file, the SDK uses this to record a voice message + */ +@Injectable({ providedIn: NgModel }) +export class AudioRecorderService extends MultimediaRecorder< + Omit +> { + /** + * Due to browser restrictions the following config is used: + * - In Safari we record in audio/mp4 + * - For all other browsers we use audio/webm (which is then transcoded to wav) + */ + config: MediaRecorderConfig = { + mimeType: isSafari ? 'audio/mp4;codecs=mp4a.40.2' : 'audio/webm', + }; + + constructor( + notificationService: NotificationService, + chatService: ChatClientService, + transcoder: TranscoderService, + private amplitudeRecorder: AmplitudeRecorderService + ) { + super(notificationService, chatService, transcoder); + } + + protected enrichWithExtraData() { + const waveformData = resampleWaveForm( + this.amplitudeRecorder.amplitudes, + this.amplitudeRecorder.config.sampleCount + ); + + return { waveform_data: waveformData }; + } + + /** + * Start audio recording + */ + async start() { + const result = await super.start(); + + if (this.mediaRecorder?.stream) { + this.amplitudeRecorder.start(this.mediaRecorder?.stream); + } + + return result; + } + + /** + * Pause audio recording, it can be restarted using `resume` + */ + pause() { + const result = super.pause(); + + this.amplitudeRecorder.pause(); + + return result; + } + + /** + * Resume a previously paused recording + */ + resume() { + const result = super.resume(); + + this.amplitudeRecorder.resume(); + + return result; + } + + /** + * Stop the recording and free up used resources + * @param options + * @param options.cancel if this is `true` no recording will be created, but resources will be freed + * @returns the recording + */ + async stop(options?: { cancel: boolean }) { + try { + const result = await super.stop(options); + + return result; + } finally { + this.amplitudeRecorder.stop(); + } + } +} 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 new file mode 100644 index 00000000..b81afca2 --- /dev/null +++ b/projects/stream-chat-angular/src/lib/voice-recorder/media-recorder.ts @@ -0,0 +1,270 @@ +import { BehaviorSubject, Observable } from 'rxjs'; +import { + createFileFromBlobs, + createUriFromBlob, + getExtensionFromMimeType, +} from '../file-utils'; +import { NotificationService } from '../notification.service'; +import { ChatClientService } from '../chat-client.service'; +import fixWebmDuration from 'fix-webm-duration'; +import { TranscoderService } from './transcoder.service'; +import { MediaRecording } from '../types'; + +export type MediaRecorderConfig = Omit & + Required>; + +export enum MediaRecordingState { + PAUSED = 'paused', + RECORDING = 'recording', + STOPPED = 'stopped', + ERROR = 'error', +} + +export type MediaRecordingTitleOptions = { + mimeType: string; +}; + +export abstract class MultimediaRecorder { + abstract config: MediaRecorderConfig; + customGenerateRecordingTitle: + | ((options: MediaRecordingTitleOptions) => string) + | undefined; + recordingState$: Observable; + recording$: Observable<(MediaRecording & T) | undefined>; + + protected recordingSubject = new BehaviorSubject< + (MediaRecording & T) | undefined + >(undefined); + + protected mediaRecorder: MediaRecorder | undefined; + protected startTime: number | undefined; + protected recordedChunkDurations: number[] = []; + private recordingStateSubject = new BehaviorSubject( + MediaRecordingState.STOPPED + ); + + constructor( + protected notificationService: NotificationService, + protected chatService: ChatClientService, + private transcoder: TranscoderService + ) { + this.recording$ = this.recordingSubject.asObservable(); + this.recordingState$ = this.recordingStateSubject.asObservable(); + } + + get durationMs() { + return ( + this.recordedChunkDurations.reduce((acc, val) => acc + val, 0) + + (this.startTime ? Date.now() - this.startTime : 0) + ); + } + + get mediaType() { + return this.config.mimeType.split('/')?.[0] || 'unknown'; + } + + get isRecording() { + return ( + this.recordingStateSubject.value === MediaRecordingState.RECORDING || + this.recordingStateSubject.value === MediaRecordingState.PAUSED + ); + } + + generateRecordingTitle = (mimeType: string) => { + if (this.customGenerateRecordingTitle) { + return this.customGenerateRecordingTitle({ mimeType }); + } else { + return `${ + this.mediaType + }_recording_${new Date().toISOString()}.${getExtensionFromMimeType( + mimeType + )}`; // extension needed so that desktop Safari can play the asset + } + }; + + async makeRecording(blob: Blob) { + const { mimeType } = this.config; + try { + if (mimeType.includes('webm')) { + // The browser does not include duration metadata with the recorded blob + blob = await fixWebmDuration(blob, this.durationMs, { + logger: () => null, // prevents polluting the browser console + }); + } + blob = await this.transcoder.transcode(blob); + + if (!blob) return; + + const file = createFileFromBlobs({ + blobsArray: [blob], + fileName: this.generateRecordingTitle(blob.type), + mimeType: blob.type, + }); + const previewUrl = await createUriFromBlob(file); + + const extraData = this.enrichWithExtraData(); + this.recordingSubject.next({ + recording: file, + duration: this.durationMs / 1000, + asset_url: previewUrl, + mime_type: mimeType, + ...extraData, + }); + return file; + } catch (error) { + this.logError(error as Error); + this.recordingStateSubject.next(MediaRecordingState.ERROR); + return undefined; + } + } + + handleErrorEvent = (e: Event) => { + /* eslint-disable-next-line @typescript-eslint/no-unsafe-argument */ + this.logError((e as ErrorEvent).error); + this.recordingStateSubject.next(MediaRecordingState.ERROR); + this.notificationService.addTemporaryNotification( + 'streamChat.An error has occurred during recording' + ); + void this.stop({ cancel: true }); + }; + + handleDataavailableEvent = (e: BlobEvent) => { + if (!e.data.size) return; + void this.makeRecording(e.data); + }; + + get recordingState() { + return this.recordingStateSubject.value; + } + + async start() { + if ( + [MediaRecordingState.RECORDING, MediaRecordingState.PAUSED].includes( + this.recordingStateSubject.value + ) + ) { + return; + } + + this.recordingSubject.next(undefined); + + // 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)` + ); + 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` + ); + return; + } + + try { + const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); + this.mediaRecorder = new MediaRecorder(stream, this.config); + + this.mediaRecorder.addEventListener( + 'dataavailable', + this.handleDataavailableEvent + ); + this.mediaRecorder.addEventListener('error', this.handleErrorEvent); + + this.startTime = new Date().getTime(); + this.mediaRecorder.start(); + + this.recordingStateSubject.next(MediaRecordingState.RECORDING); + } catch (error) { + this.logError(error as Error); + void this.stop({ cancel: true }); + this.recordingStateSubject.next(MediaRecordingState.ERROR); + const isNotAllowed = (error as Error).name?.includes('NotAllowedError'); + this.notificationService.addTemporaryNotification( + isNotAllowed + ? `streamChat.Please grant permission to use microhpone` + : `streamChat.Error starting recording` + ); + } + } + + pause() { + if (this.recordingStateSubject.value !== MediaRecordingState.RECORDING) + return; + if (this.startTime) { + this.recordedChunkDurations.push(new Date().getTime() - this.startTime); + this.startTime = undefined; + } + this.mediaRecorder?.pause(); + this.recordingStateSubject.next(MediaRecordingState.PAUSED); + } + + resume() { + if (this.recordingStateSubject.value !== MediaRecordingState.PAUSED) return; + this.startTime = new Date().getTime(); + this.mediaRecorder?.resume(); + this.recordingStateSubject.next(MediaRecordingState.RECORDING); + } + + async stop(options: { cancel: boolean } = { cancel: false }) { + if (this.startTime) { + this.recordedChunkDurations.push(new Date().getTime() - this.startTime); + this.startTime = undefined; + } + let recording!: MediaRecording & T; + this.mediaRecorder?.stop(); + try { + if ( + !options.cancel && + this.recordingStateSubject.value !== MediaRecordingState.ERROR + ) { + recording = await new Promise((resolve, reject) => { + this.recording$.subscribe((r) => { + if (r) { + resolve(r); + } + }); + this.recordingState$.subscribe((s) => { + if (s === MediaRecordingState.ERROR) { + reject(new Error(`Recording couldn't be created`)); + } + }); + }); + } + } catch { + this.notificationService.addTemporaryNotification( + 'streamChat.An error has occurred during recording' + ); + } finally { + this.recordedChunkDurations = []; + this.startTime = undefined; + + this.mediaRecorder?.removeEventListener( + 'dataavailable', + this.handleDataavailableEvent + ); + this.mediaRecorder?.removeEventListener('error', this.handleErrorEvent); + if (this.mediaRecorder?.stream?.active) { + this.mediaRecorder?.stream?.getTracks().forEach((track) => { + track.stop(); + this.mediaRecorder?.stream?.removeTrack(track); + }); + this.mediaRecorder = undefined; + } + + this.recordingStateSubject.next(MediaRecordingState.STOPPED); + } + + return recording; + } + + protected abstract enrichWithExtraData(): T; + + protected logError(error: Error) { + this.chatService.chatClient?.logger('error', error.message, { + error: error, + tag: ['MediaRecorder'], + }); + } +} 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 new file mode 100644 index 00000000..0692efbc --- /dev/null +++ b/projects/stream-chat-angular/src/lib/voice-recorder/mp3-transcoder.ts @@ -0,0 +1,92 @@ +const ENCODING_BIT_RATE = 128; // kbps; +const COUNT_SAMPLES_PER_ENCODED_BLOCK = 1152; +const SAMPLE_RATE = 16000; + +const readFileAsArrayBuffer = (blob: Blob): Promise => + new Promise((resolve, reject) => { + const blobReader = new FileReader(); + blobReader.onload = () => { + resolve(blobReader.result as ArrayBuffer); + }; + + blobReader.onerror = () => { + reject(blobReader.error); + }; + + blobReader.readAsArrayBuffer(blob); + }); + +const toAudioBuffer = async (blob: Blob) => { + const audioCtx = new AudioContext(); + + const arrayBuffer = await readFileAsArrayBuffer(blob); + const decodedData = await audioCtx.decodeAudioData(arrayBuffer); + if (audioCtx.state !== 'closed') await audioCtx.close(); + return decodedData; +}; + +const renderAudio = async (audioBuffer: AudioBuffer, sampleRate: number) => { + const offlineAudioCtx = new OfflineAudioContext( + audioBuffer.numberOfChannels, + audioBuffer.duration * sampleRate, + sampleRate + ); + const source = offlineAudioCtx.createBufferSource(); + source.buffer = audioBuffer; + source.connect(offlineAudioCtx.destination); + source.start(); + + return await offlineAudioCtx.startRendering(); +}; + +const float32ArrayToInt16Array = (float32Arr: Float32Array) => { + const int16Arr = new Int16Array(float32Arr.length); + for (let i = 0; i < float32Arr.length; i++) { + const float32Value = float32Arr[i]; + // Clamp the float value between -1 and 1 + const clampedValue = Math.max(-1, Math.min(1, float32Value)); + // Convert the float value to a signed 16-bit integer + int16Arr[i] = Math.round(clampedValue * 32767); + } + return int16Arr; +}; + +const splitDataByChannel = (audioBuffer: AudioBuffer) => + Array.from({ length: audioBuffer.numberOfChannels }, (_, 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 */ +export async function encodeWebmToMp3(blob: Blob, lameJs: any) { + const audioBuffer = await renderAudio(await toAudioBuffer(blob), SAMPLE_RATE); + const channelCount = audioBuffer.numberOfChannels; + const dataByChannel = splitDataByChannel(audioBuffer); + const mp3Encoder = new lameJs.Mp3Encoder( + channelCount, + SAMPLE_RATE, + ENCODING_BIT_RATE + ); + + const dataBuffer: Int8Array[] = []; + let remaining = dataByChannel[0].length; + for ( + let i = 0; + remaining >= COUNT_SAMPLES_PER_ENCODED_BLOCK; + i += COUNT_SAMPLES_PER_ENCODED_BLOCK + ) { + const [leftChannelBlock, rightChannelBlock] = dataByChannel.map((channel) => + channel.subarray(i, i + COUNT_SAMPLES_PER_ENCODED_BLOCK) + ); + dataBuffer.push( + new Int8Array( + mp3Encoder.encodeBuffer(leftChannelBlock, rightChannelBlock) + ) + ); + remaining -= COUNT_SAMPLES_PER_ENCODED_BLOCK; + } + + const lastBlock = mp3Encoder.flush(); + if (lastBlock.length) dataBuffer.push(new Int8Array(lastBlock)); + return new Blob(dataBuffer, { type: 'audio/mp3;sbu_type=voice' }); +} +/* eslint-enable @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 */ 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 new file mode 100644 index 00000000..e50b6ce7 --- /dev/null +++ b/projects/stream-chat-angular/src/lib/voice-recorder/transcoder.service.ts @@ -0,0 +1,193 @@ +import { Injectable, NgModule } from '@angular/core'; +import { readBlobAsArrayBuffer } from '../file-utils'; + +export type TranscoderConfig = { + sampleRate: number; +}; + +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 HEADER = { + AUDIO_FORMAT: { offset: 20, value: 1 }, // PCM = 1 + BITS_PER_SAMPLE: { offset: 34, value: BYTES_PER_SAMPLE * 8 }, // 16 bits encoding + BLOCK_ALIGN: { offset: 32 }, + BYTE_RATE: { offset: 28 }, + CHANNEL_COUNT: { offset: 22 }, // 1 - mono, 2 - stereo + CHUNK_ID: { offset: 0, value: 0x52494646 }, // hex representation of string "RIFF" (Resource Interchange File Format) - identifies the file structure that defines a class of more specific file formats, e.g. WAVE + CHUNK_SIZE: { offset: 4 }, + FILE_FORMAT: { offset: 8, value: 0x57415645 }, // hex representation of string "WAVE" + SAMPLE_RATE: { offset: 24 }, + SUBCHUNK1_ID: { offset: 12, value: 0x666d7420 }, // hex representation of string "fmt " - identifies the start of "format" section of the header + SUBCHUNK1_SIZE: { offset: 16, value: 16 }, // Subchunk1 Size without SUBCHUNK1_ID and SUBCHUNK1_SIZE fields + SUBCHUNK2_ID: { offset: 36, value: 0x64617461 }, // hex representation of string "data" - identifies the start of actual audio data section + SUBCHUNK2_SIZE: { offset: 40 }, // actual audio data size +} as const; + +type WriteWaveHeaderParams = { + arrayBuffer: ArrayBuffer; + // 1 - mono, 2 - stereo + channelCount: number; + // Number of samples per second, e.g. 44100Hz + sampleRate: number; +}; + +type WriteAudioDataParams = { + arrayBuffer: ArrayBuffer; + dataByChannel: Float32Array[]; +}; + +/** + * The `TranscoderService` is used to transcibe audio recording to a format that's supported by all major browsers. The SDK uses this to create voice messages. + * + * If you want to use your own transcoder you can provide a `customTranscoder`. + */ +@Injectable({ providedIn: NgModule }) +export class TranscoderService { + config: TranscoderConfig = { + sampleRate: 16000, + }; + customTranscoder?: (blob: Blob) => Blob | Promise; + constructor() {} + + /** + * The default transcoder will leave audio/mp4 files as is, and transcode webm files to wav. If you want to customize this, you can provide your own transcoder using the `customTranscoder` field + * @param blob + * @returns the transcoded file + */ + async transcode(blob: Blob) { + if (this.customTranscoder) { + return this.customTranscoder(blob); + } + if (blob.type.includes('audio/mp4')) { + return blob; + } + const audioBuffer = await this.renderAudio( + await this.toAudioBuffer(blob), + this.config.sampleRate + ); + const numberOfSamples = audioBuffer.duration * this.config.sampleRate; + const fileSizeBytes = + numberOfSamples * audioBuffer.numberOfChannels * BYTES_PER_SAMPLE + + WAV_HEADER_LENGTH_BYTES; + + const arrayBuffer = new ArrayBuffer(fileSizeBytes); + this.writeWavHeader({ + arrayBuffer, + channelCount: audioBuffer.numberOfChannels, + sampleRate: this.config.sampleRate, + }); + this.writeWavAudioData({ + arrayBuffer, + dataByChannel: this.splitDataByChannel(audioBuffer), + }); + return new Blob([arrayBuffer], { type: 'audio/wav' }); + } + + protected async renderAudio(audioBuffer: AudioBuffer, sampleRate: number) { + const offlineAudioCtx = new OfflineAudioContext( + audioBuffer.numberOfChannels, + audioBuffer.duration * sampleRate, + sampleRate + ); + const source = offlineAudioCtx.createBufferSource(); + source.buffer = audioBuffer; + source.connect(offlineAudioCtx.destination); + source.start(); + + return await offlineAudioCtx.startRendering(); + } + + protected async toAudioBuffer(blob: Blob) { + const audioCtx = new AudioContext(); + + const arrayBuffer = await readBlobAsArrayBuffer(blob); + const decodedData = await audioCtx.decodeAudioData(arrayBuffer); + if (audioCtx.state !== 'closed') await audioCtx.close(); + return decodedData; + } + + protected writeWavAudioData({ + arrayBuffer, + dataByChannel, + }: WriteAudioDataParams) { + const dataView = new DataView(arrayBuffer); + const channelCount = dataByChannel.length; + + dataByChannel.forEach((channelData, channelIndex) => { + let writeOffset = WAV_HEADER_LENGTH_BYTES + channelCount * channelIndex; + + channelData.forEach((float32Value) => { + dataView.setInt16( + writeOffset, + float32Value < 0 + ? Math.max(-1, float32Value) * 32768 + : Math.min(1, float32Value) * 32767, + true + ); + writeOffset += channelCount * BYTES_PER_SAMPLE; + }); + }); + } + + protected writeWavHeader({ + arrayBuffer, + channelCount, + sampleRate, + }: WriteWaveHeaderParams) { + const byteRate = sampleRate * channelCount * BYTES_PER_SAMPLE; // bytes/sec + const blockAlign = channelCount * BYTES_PER_SAMPLE; + + const dataView = new DataView(arrayBuffer); + /* + * The maximum size of a RIFF file is 4294967295 bytes and since the header takes up 44 bytes there are 4294967251 bytes left for the + * data chunk. + */ + const dataChunkSize = Math.min( + dataView.byteLength - 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 + ); // adjustment for the first two headers - chunk id + file size + dataView.setUint32(HEADER.FILE_FORMAT.offset, HEADER.FILE_FORMAT.value); // "WAVE" + + dataView.setUint32(HEADER.SUBCHUNK1_ID.offset, HEADER.SUBCHUNK1_ID.value); // "fmt " + dataView.setUint32( + HEADER.SUBCHUNK1_SIZE.offset, + HEADER.SUBCHUNK1_SIZE.value, + true + ); + dataView.setUint16( + HEADER.AUDIO_FORMAT.offset, + HEADER.AUDIO_FORMAT.value, + true + ); + dataView.setUint16(HEADER.CHANNEL_COUNT.offset, channelCount, true); + dataView.setUint32(HEADER.SAMPLE_RATE.offset, sampleRate, true); + dataView.setUint32(HEADER.BYTE_RATE.offset, byteRate, true); + dataView.setUint16(HEADER.BLOCK_ALIGN.offset, blockAlign, true); + dataView.setUint16( + HEADER.BITS_PER_SAMPLE.offset, + HEADER.BITS_PER_SAMPLE.value, + true + ); + + dataView.setUint32(HEADER.SUBCHUNK2_ID.offset, HEADER.SUBCHUNK2_ID.value); // "data" + dataView.setUint32(HEADER.SUBCHUNK2_SIZE.offset, dataChunkSize, true); + } + + protected splitDataByChannel = (audioBuffer: AudioBuffer) => + Array.from({ length: audioBuffer.numberOfChannels }, (_, 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 new file mode 100644 index 00000000..5b2da986 --- /dev/null +++ b/projects/stream-chat-angular/src/lib/voice-recorder/voice-recorder-wavebar/voice-recorder-wavebar.component.html @@ -0,0 +1,17 @@ +
+ {{ formattedDuration }} +
+
+
+
+
+
diff --git a/projects/stream-chat-angular/src/lib/voice-recorder/voice-recorder-wavebar/voice-recorder-wavebar.component.spec.ts b/projects/stream-chat-angular/src/lib/voice-recorder/voice-recorder-wavebar/voice-recorder-wavebar.component.spec.ts new file mode 100644 index 00000000..e1c6ea6d --- /dev/null +++ b/projects/stream-chat-angular/src/lib/voice-recorder/voice-recorder-wavebar/voice-recorder-wavebar.component.spec.ts @@ -0,0 +1,30 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { VoiceRecorderWavebarComponent } from './voice-recorder-wavebar.component'; +import { AudioRecorderService } from '../audio-recorder.service'; +import { AmplitudeRecorderService } from '../amplitude-recorder.service'; +import { TranscoderService } from '../transcoder.service'; + +describe('VoiceRecorderWavebarComponent', () => { + let component: VoiceRecorderWavebarComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [VoiceRecorderWavebarComponent], + providers: [ + AudioRecorderService, + AmplitudeRecorderService, + TranscoderService, + ], + }).compileComponents(); + + fixture = TestBed.createComponent(VoiceRecorderWavebarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/stream-chat-angular/src/lib/voice-recorder/voice-recorder-wavebar/voice-recorder-wavebar.component.ts b/projects/stream-chat-angular/src/lib/voice-recorder/voice-recorder-wavebar/voice-recorder-wavebar.component.ts new file mode 100644 index 00000000..d2f95dbc --- /dev/null +++ b/projects/stream-chat-angular/src/lib/voice-recorder/voice-recorder-wavebar/voice-recorder-wavebar.component.ts @@ -0,0 +1,44 @@ +import { Component, OnDestroy } from '@angular/core'; +import { AmplitudeRecorderService } from '../amplitude-recorder.service'; +import { Observable } from 'rxjs'; +import { AudioRecorderService } from '../audio-recorder.service'; +import { formatDuration } from '../../format-duration'; + +/** + * The `VoiceRecorderWavebarComponent` displays the amplitudes of the recording while the recoding is in progress + */ +@Component({ + selector: 'stream-voice-recorder-wavebar', + templateUrl: './voice-recorder-wavebar.component.html', + styles: [], +}) +export class VoiceRecorderWavebarComponent implements OnDestroy { + amplitudes$: Observable; + formattedDuration: string; + durationComputeInterval: ReturnType; + isLongerThanOneHour = false; + + constructor( + private amplitudeRecorder: AmplitudeRecorderService, + private audioRecorder: AudioRecorderService + ) { + this.amplitudes$ = this.amplitudeRecorder.amplitudes$; + this.formattedDuration = formatDuration( + this.audioRecorder.durationMs / 1000 + ); + this.durationComputeInterval = setInterval(() => { + this.isLongerThanOneHour = this.audioRecorder.durationMs / 1000 > 3600; + this.formattedDuration = formatDuration( + this.audioRecorder.durationMs / 1000 + ); + }, 1000); + } + + trackByIndex(i: number) { + return i; + } + + ngOnDestroy(): void { + clearInterval(this.durationComputeInterval); + } +} diff --git a/projects/stream-chat-angular/src/lib/voice-recorder/voice-recorder.component.html b/projects/stream-chat-angular/src/lib/voice-recorder/voice-recorder.component.html new file mode 100644 index 00000000..fbd238fe --- /dev/null +++ b/projects/stream-chat-angular/src/lib/voice-recorder/voice-recorder.component.html @@ -0,0 +1,75 @@ +
+
+ + + + + + + + + + + + + +
+
diff --git a/projects/stream-chat-angular/src/lib/voice-recorder/voice-recorder.component.spec.ts b/projects/stream-chat-angular/src/lib/voice-recorder/voice-recorder.component.spec.ts new file mode 100644 index 00000000..96c17062 --- /dev/null +++ b/projects/stream-chat-angular/src/lib/voice-recorder/voice-recorder.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { VoiceRecorderComponent } from './voice-recorder.component'; +import { VoiceRecorderModule } from './voice-recorder.module'; + +describe('VoiceRecorderComponent', () => { + let component: VoiceRecorderComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [VoiceRecorderModule], + }).compileComponents(); + + fixture = TestBed.createComponent(VoiceRecorderComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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 new file mode 100644 index 00000000..e0ee32d7 --- /dev/null +++ b/projects/stream-chat-angular/src/lib/voice-recorder/voice-recorder.component.ts @@ -0,0 +1,92 @@ +import { + Component, + Input, + OnChanges, + OnDestroy, + OnInit, + SimpleChanges, +} from '@angular/core'; +import { AudioRecorderService } from './audio-recorder.service'; +import { MediaRecordingState } from './media-recorder'; +import { Subscription } from 'rxjs'; +import { AudioRecording } from '../types'; +import { VoiceRecorderService } from '../message-input/voice-recorder.service'; + +/** + * The `VoiceRecorderComponent` makes it possible to record audio, and then upload it as a voice recording attachment + */ +@Component({ + selector: 'stream-voice-recorder', + templateUrl: './voice-recorder.component.html', + styles: [], + providers: [], +}) +export class VoiceRecorderComponent implements OnInit, OnDestroy, OnChanges { + @Input() voiceRecorderService?: VoiceRecorderService; + recordState: MediaRecordingState = MediaRecordingState.STOPPED; + isLoading = false; + recording?: AudioRecording; + readonly MediaRecordingState = MediaRecordingState; + private subscriptions: Subscription[] = []; + private isVisibleSubscription?: Subscription; + + 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 = + this.voiceRecorderService.isRecorderVisible$.subscribe((isVisible) => { + if (!isVisible) { + this.recording = undefined; + this.isLoading = false; + } + }); + } else { + this.isVisibleSubscription?.unsubscribe(); + } + } + + ngOnDestroy(): void { + this.subscriptions.forEach((s) => s.unsubscribe()); + } + + cancel() { + if (this.recording) { + this.recording = undefined; + } else { + void this.recorder.stop({ cancel: true }); + } + this.voiceRecorderService?.isRecorderVisible$.next(false); + } + + async stop() { + this.recording = await this.recorder.stop(); + } + + pause() { + this.recorder.pause(); + } + + resume() { + this.recorder.resume(); + } + + uploadRecording() { + if (!this.recording) { + return; + } + this.isLoading = true; + this.voiceRecorderService?.recording$.next(this.recording); + } +} diff --git a/projects/stream-chat-angular/src/lib/voice-recorder/voice-recorder.module.ts b/projects/stream-chat-angular/src/lib/voice-recorder/voice-recorder.module.ts new file mode 100644 index 00000000..5ca07c91 --- /dev/null +++ b/projects/stream-chat-angular/src/lib/voice-recorder/voice-recorder.module.ts @@ -0,0 +1,22 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { VoiceRecorderComponent } from './voice-recorder.component'; +import { VoiceRecordingModule } from '../voice-recording/voice-recording.module'; +import { IconModule } from '../icon/icon.module'; +import { TranslateModule } from '@ngx-translate/core'; +import { AudioRecorderService } from './audio-recorder.service'; +import { TranscoderService } from './transcoder.service'; +import { AmplitudeRecorderService } from './amplitude-recorder.service'; +import { VoiceRecorderWavebarComponent } from './voice-recorder-wavebar/voice-recorder-wavebar.component'; + +@NgModule({ + declarations: [VoiceRecorderComponent, VoiceRecorderWavebarComponent], + imports: [CommonModule, VoiceRecordingModule, IconModule, TranslateModule], + exports: [VoiceRecorderComponent, VoiceRecorderWavebarComponent], + providers: [ + AudioRecorderService, + TranscoderService, + AmplitudeRecorderService, + ], +}) +export class VoiceRecorderModule {} diff --git a/projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts b/projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts index 7d022d9b..e9b8f60c 100644 --- a/projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts +++ b/projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts @@ -10,6 +10,7 @@ import { SimpleChanges, ViewChild, } from '@angular/core'; +import { resampleWaveForm } from '../../wave-form-sampler'; /** * This component can be used to visualize the wave bar of a voice recording @@ -57,10 +58,10 @@ export class VoiceRecordingWavebarComponent ngOnChanges(changes: SimpleChanges): void { if (changes.waveFormData) { - this.resampledWaveFormData = - this.waveFormData.length > this.sampleSize - ? this.downsample() - : this.upsample(); + this.resampledWaveFormData = resampleWaveForm( + this.waveFormData, + this.sampleSize + ); } if (changes.audioElement) { this.ngZone.runOutsideAngular(() => { @@ -124,10 +125,10 @@ export class VoiceRecordingWavebarComponent ) { this.ngZone.run(() => { this.sampleSize = sampleSize; - this.resampledWaveFormData = - this.waveFormData.length > this.sampleSize - ? this.downsample() - : this.upsample(); + this.resampledWaveFormData = resampleWaveForm( + this.waveFormData, + this.sampleSize + ); if (this.isViewInited) { this.cdRef.detectChanges(); } @@ -135,132 +136,4 @@ export class VoiceRecordingWavebarComponent } } } - - private downsample() { - if (this.waveFormData.length <= this.sampleSize) { - return this.waveFormData; - } - - if (this.sampleSize === 1) return [this.mean(this.waveFormData)]; - - const result: number[] = []; - // bucket size adjusted due to the fact that the first and the last item in the original data array is kept in target output - const bucketSize = (this.waveFormData.length - 2) / (this.sampleSize - 2); - let lastSelectedPointIndex = 0; - result.push(this.waveFormData[lastSelectedPointIndex]); // Always add the first point - let maxAreaPoint, maxArea, triangleArea; - - for ( - let bucketIndex = 1; - bucketIndex < this.sampleSize - 1; - bucketIndex++ - ) { - const previousBucketRefPoint = this.waveFormData[lastSelectedPointIndex]; - const nextBucketMean = this.getNextBucketMean( - this.waveFormData, - bucketIndex, - bucketSize - ); - - const currentBucketStartIndex = - Math.floor((bucketIndex - 1) * bucketSize) + 1; - const nextBucketStartIndex = Math.floor(bucketIndex * bucketSize) + 1; - const countUnitsBetweenAtoC = - 1 + nextBucketStartIndex - currentBucketStartIndex; - - maxArea = triangleArea = -1; - - for ( - let currentPointIndex = currentBucketStartIndex; - currentPointIndex < nextBucketStartIndex; - currentPointIndex++ - ) { - const countUnitsBetweenAtoB = - Math.abs(currentPointIndex - currentBucketStartIndex) + 1; - const countUnitsBetweenBtoC = - countUnitsBetweenAtoC - countUnitsBetweenAtoB; - const currentPointValue = this.waveFormData[currentPointIndex]; - - triangleArea = this.triangleAreaHeron( - this.triangleBase( - Math.abs(previousBucketRefPoint - currentPointValue), - countUnitsBetweenAtoB - ), - this.triangleBase( - Math.abs(currentPointValue - nextBucketMean), - countUnitsBetweenBtoC - ), - this.triangleBase( - Math.abs(previousBucketRefPoint - nextBucketMean), - countUnitsBetweenAtoC - ) - ); - - if (triangleArea > maxArea) { - maxArea = triangleArea; - maxAreaPoint = this.waveFormData[currentPointIndex]; - lastSelectedPointIndex = currentPointIndex; - } - } - - if (typeof maxAreaPoint !== 'undefined') result.push(maxAreaPoint); - } - - result.push(this.waveFormData[this.waveFormData.length - 1]); // Always add the last point - - return result; - } - - private upsample = () => { - if (this.sampleSize === this.waveFormData.length) return this.waveFormData; - - // eslint-disable-next-line prefer-const - let [bucketSize, remainder] = this.divMod( - this.sampleSize, - this.waveFormData.length - ); - const result: number[] = []; - - for (let i = 0; i < this.waveFormData.length; i++) { - const extra = remainder && remainder-- ? 1 : 0; - result.push( - ...Array(bucketSize + extra).fill(this.waveFormData[i]) - ); - } - return result; - }; - - private getNextBucketMean = ( - data: number[], - currentBucketIndex: number, - bucketSize: number - ) => { - const nextBucketStartIndex = - Math.floor(currentBucketIndex * bucketSize) + 1; - let nextNextBucketStartIndex = - Math.floor((currentBucketIndex + 1) * bucketSize) + 1; - nextNextBucketStartIndex = - nextNextBucketStartIndex < data.length - ? nextNextBucketStartIndex - : data.length; - - return this.mean( - data.slice(nextBucketStartIndex, nextNextBucketStartIndex) - ); - }; - - private mean = (values: number[]) => - values.reduce((acc, value) => acc + value, 0) / values.length; - - private triangleAreaHeron = (a: number, b: number, c: number) => { - const s = (a + b + c) / 2; - return Math.sqrt(s * (s - a) * (s - b) * (s - c)); - }; - - private triangleBase = (a: number, b: number) => - Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2)); - - private divMod = (num: number, divisor: number) => { - return [Math.floor(num / divisor), num % divisor]; - }; } 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 e571c0ae..d7e66205 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 @@ -12,6 +12,7 @@ import { import { Attachment } from 'stream-chat'; import { DefaultStreamChatGenerics } from '../types'; import prettybytes from 'pretty-bytes'; +import { formatDuration } from '../format-duration'; /** * This component can be used to display an attachment with type `voiceRecording`. The component allows playing the attachment inside the browser. @@ -95,18 +96,7 @@ export class VoiceRecordingComponent implements OnChanges, AfterViewInit { } private getFormattedDuration(duration?: number) { - if (duration === undefined || duration <= 0) return '00:00'; - - const [hours, hoursLeftover] = this.divMod(duration, 3600); - const [minutes, seconds] = this.divMod(hoursLeftover, 60); - const roundedSeconds = Math.ceil(seconds); - - const prependHrsZero = hours.toString().length === 1 ? '0' : ''; - const prependMinZero = minutes.toString().length === 1 ? '0' : ''; - const prependSecZero = roundedSeconds.toString().length === 1 ? '0' : ''; - const minSec = `${prependMinZero}${minutes}:${prependSecZero}${roundedSeconds}`; - - return hours ? `${prependHrsZero}${hours}:` + minSec : minSec; + return formatDuration(duration); } private getFileSize() { @@ -118,8 +108,4 @@ export class VoiceRecordingComponent implements OnChanges, AfterViewInit { } return prettybytes(Number(this.attachment.file_size || 0)); } - - private divMod(num: number, divisor: number) { - return [Math.floor(num / divisor), num % divisor]; - } } diff --git a/projects/stream-chat-angular/src/lib/voice-recording/voice-recording.module.ts b/projects/stream-chat-angular/src/lib/voice-recording/voice-recording.module.ts new file mode 100644 index 00000000..dca95b42 --- /dev/null +++ b/projects/stream-chat-angular/src/lib/voice-recording/voice-recording.module.ts @@ -0,0 +1,13 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { VoiceRecordingComponent } from './voice-recording.component'; +import { VoiceRecordingWavebarComponent } from './voice-recording-wavebar/voice-recording-wavebar.component'; +import { IconModule } from '../icon/icon.module'; +import { TranslateModule } from '@ngx-translate/core'; + +@NgModule({ + declarations: [VoiceRecordingComponent, VoiceRecordingWavebarComponent], + imports: [CommonModule, IconModule, TranslateModule], + exports: [VoiceRecordingComponent, VoiceRecordingWavebarComponent], +}) +export class VoiceRecordingModule {} diff --git a/projects/stream-chat-angular/src/lib/wave-form-sampler.ts b/projects/stream-chat-angular/src/lib/wave-form-sampler.ts new file mode 100644 index 00000000..a8035f37 --- /dev/null +++ b/projects/stream-chat-angular/src/lib/wave-form-sampler.ts @@ -0,0 +1,124 @@ +export const resampleWaveForm = ( + waveFormData: number[], + sampleSize: number +) => { + return waveFormData.length > sampleSize + ? downsample(waveFormData, sampleSize) + : upsample(waveFormData, sampleSize); +}; + +const downsample = (waveFormData: number[], sampleSize: number) => { + if (waveFormData.length <= sampleSize) { + return waveFormData; + } + + if (sampleSize === 1) return [mean(waveFormData)]; + + const result: number[] = []; + // bucket size adjusted due to the fact that the first and the last item in the original data array is kept in target output + const bucketSize = (waveFormData.length - 2) / (sampleSize - 2); + let lastSelectedPointIndex = 0; + result.push(waveFormData[lastSelectedPointIndex]); // Always add the first point + let maxAreaPoint, maxArea, triangleArea; + + for (let bucketIndex = 1; bucketIndex < sampleSize - 1; bucketIndex++) { + const previousBucketRefPoint = waveFormData[lastSelectedPointIndex]; + const nextBucketMean = getNextBucketMean( + waveFormData, + bucketIndex, + bucketSize + ); + + const currentBucketStartIndex = + Math.floor((bucketIndex - 1) * bucketSize) + 1; + const nextBucketStartIndex = Math.floor(bucketIndex * bucketSize) + 1; + const countUnitsBetweenAtoC = + 1 + nextBucketStartIndex - currentBucketStartIndex; + + maxArea = triangleArea = -1; + + for ( + let currentPointIndex = currentBucketStartIndex; + currentPointIndex < nextBucketStartIndex; + currentPointIndex++ + ) { + const countUnitsBetweenAtoB = + Math.abs(currentPointIndex - currentBucketStartIndex) + 1; + const countUnitsBetweenBtoC = + countUnitsBetweenAtoC - countUnitsBetweenAtoB; + const currentPointValue = waveFormData[currentPointIndex]; + + triangleArea = triangleAreaHeron( + triangleBase( + Math.abs(previousBucketRefPoint - currentPointValue), + countUnitsBetweenAtoB + ), + triangleBase( + Math.abs(currentPointValue - nextBucketMean), + countUnitsBetweenBtoC + ), + triangleBase( + Math.abs(previousBucketRefPoint - nextBucketMean), + countUnitsBetweenAtoC + ) + ); + + if (triangleArea > maxArea) { + maxArea = triangleArea; + maxAreaPoint = waveFormData[currentPointIndex]; + lastSelectedPointIndex = currentPointIndex; + } + } + + if (typeof maxAreaPoint !== 'undefined') result.push(maxAreaPoint); + } + + result.push(waveFormData[waveFormData.length - 1]); // Always add the last point + + return result; +}; + +const upsample = (waveFormData: number[], sampleSize: number) => { + if (sampleSize === waveFormData.length) return waveFormData; + + // eslint-disable-next-line prefer-const + let [bucketSize, remainder] = divMod(sampleSize, waveFormData.length); + const result: number[] = []; + + for (let i = 0; i < waveFormData.length; i++) { + const extra = remainder && remainder-- ? 1 : 0; + result.push(...Array(bucketSize + extra).fill(waveFormData[i])); + } + return result; +}; + +const getNextBucketMean = ( + data: number[], + currentBucketIndex: number, + bucketSize: number +) => { + const nextBucketStartIndex = Math.floor(currentBucketIndex * bucketSize) + 1; + let nextNextBucketStartIndex = + Math.floor((currentBucketIndex + 1) * bucketSize) + 1; + nextNextBucketStartIndex = + nextNextBucketStartIndex < data.length + ? nextNextBucketStartIndex + : data.length; + + return mean(data.slice(nextBucketStartIndex, nextNextBucketStartIndex)); +}; + +const mean = (values: number[]) => + values.reduce((acc, value) => acc + value, 0) / values.length; + +const triangleAreaHeron = (a: number, b: number, c: number) => { + const s = (a + b + c) / 2; + return Math.sqrt(s * (s - a) * (s - b) * (s - c)); +}; + +const triangleBase = (a: number, b: number) => + Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2)); + +const divMod = (num: number, divisor: number) => { + return [Math.floor(num / divisor), num % divisor]; +}; diff --git a/projects/stream-chat-angular/src/public-api.ts b/projects/stream-chat-angular/src/public-api.ts index 5bc3c5b7..52033c53 100644 --- a/projects/stream-chat-angular/src/public-api.ts +++ b/projects/stream-chat-angular/src/public-api.ts @@ -11,9 +11,9 @@ export * from './lib/stream-i18n.service'; export * from './lib/avatar/avatar.component'; export * from './lib/avatar-placeholder/avatar-placeholder.component'; export * from './lib/icon/icon.component'; -export * from './lib/icon-placeholder/icon-placeholder.component'; -export * from './lib/loading-indicator/loading-indicator.component'; -export * from './lib/loading-indicator-placeholder/loading-indicator-placeholder.component'; +export * from './lib/icon/icon-placeholder/icon-placeholder.component'; +export * from './lib/icon/loading-indicator/loading-indicator.component'; +export * from './lib/icon/loading-indicator-placeholder/loading-indicator-placeholder.component'; export * from './lib/message-actions-box/message-actions-box.component'; export * from './lib/channel/channel.component'; export * from './lib/channel-header/channel-header.component'; @@ -43,7 +43,7 @@ export * from './lib/read-by'; export * from './lib/get-message-translation'; export * from './lib/get-channel-display-text'; export * from './lib/is-image-attachment'; -export * from './lib/is-image-file'; +export * from './lib/file-utils'; export * from './lib/message-preview'; export * from './lib/notification.service'; export * from './lib/transliteration.service'; @@ -67,3 +67,16 @@ export * from './lib/virtualized-list.service'; export * from './lib/virtualized-message-list.service'; export * from './lib/user-list/user-list.component'; export * from './lib/paginated-list/paginated-list.component'; +export * from './lib/is-safari'; +export * from './lib/voice-recorder/voice-recorder.module'; +export * from './lib/voice-recorder/amplitude-recorder.service'; +export * from './lib/voice-recorder/audio-recorder.service'; +export * from './lib/voice-recorder/media-recorder'; +export * from './lib/voice-recorder/transcoder.service'; +export * from './lib/voice-recorder/voice-recorder.component'; +export * from './lib/voice-recording/voice-recording.module'; +export * from './lib/icon/icon.module'; +export * from './lib/voice-recorder//voice-recorder-wavebar/voice-recorder-wavebar.component'; +export * from './lib/format-duration'; +export * from './lib/message-input/voice-recorder.service'; +export * from './lib/voice-recorder/mp3-transcoder';