Merge pull request #567 from GetStream/async-voice-message

Async voice message

Author: szuperaz

docusaurus/docs/Angular/assets/voice-recording-screenshot.png

@@ -1,4 +1,5 @@
 import AttachmentsScreenshot from "../assets/attachments-screenshot.png";
+import VoiceRecordingScreenshot from "../assets/voice-recording-screenshot.png";
 import ImageSizingScreenshot1 from "../assets/image-sizing-screenshot-1.png";
 import ImageSizingScreenshot2 from "../assets/image-sizing-screenshot-2.png";
 import ImageSizingScreenshot3 from "../assets/image-sizing-screenshot-3.png";
@@ -8,13 +9,18 @@ The `AttachmentList` component displays the attachments of a message. The follow
 
 - Images (including GIFs) are displayed inline
 - Videos are displayed inline
+- Voice recordings are displayed inline (the Angular SDK doesn't support recording, only playback)
 - Other files can be downloaded
 - Links in a message are enriched with built-in open graph URL scraping
 
 **Example 1** - different type of attachments:
 
 <img src={AttachmentsScreenshot} width="500" />
 
+**Example 2** - voice recording:
+
+<img src={VoiceRecordingScreenshot} width="500" />
+
 ## Basic Usage
 
 A typical use case for the `AttachmentList` component would be to use in your custom components that will completely override the message component.
@@ -50,6 +56,7 @@ You can override attachment display by attachment types, here are the available
 - [Gallery image](../services/CustomTemplatesService.mdx/#galleryattachmenttemplate): this template is used if a message has multiple image attachments, the template will receive all image attachments. Please note that your template is responsible for proper image sizing (see below).
 - [Video attachment](../services/CustomTemplatesService.mdx/#videoattachmenttemplate): this template is used to display video attachments. Please note that your template is responsible for proper image sizing (see below).
 - [File attachment](../services/CustomTemplatesService.mdx/#fileattachmenttemplate): this template is used to display file type attachments
+- [Voice recording](../services/CustomTemplatesService.mdx/#voicerecordingattachmenttemplate): this template is used to display voice recordings
 - [Card attachment](../services/CustomTemplatesService.mdx/#cardattachmenttemplate): this template is used to display GIFs or open graph URL data
 - [Attachment actions](../services/CustomTemplatesService.mdx/#attachmentactionstemplate): this template is used to display attachment actions
 

docusaurus/docs/Angular/assets/wavebar-screenshot.png

@@ -0,0 +1,74 @@
+import VoiceRecordingScreenshot from "../assets/voice-recording-screenshot.png";
+
+This component can be used to display an attachment with type `voiceRecording`. The component allows playing the attachment inside the browser.
+
+<img src={VoiceRecordingScreenshot} width="500" />
+
+## Usage
+
+The built-in [`AttachmentListComponent`](../../components/AttachmentListComponent) displays this component. If you want to use this directly in your UI you can do it like this:
+
+```html
+<stream-voice-recording [attachment]="attachment"></stream-voice-recording>
+```
+
+## Customization
+
+You can provide your own template using the [custom templates service](../services/CustomTemplatesService.mdx/#voicerecordingattachmenttemplate).
+
+## Example
+
+An example voice recording attachment:
+
+```typescript
+{
+  type: 'voiceRecording',
+  title: '99831FB3-5E35-41CD-8286-7A2E95A78FDC.aac',
+  asset_url:
+    '<link to file on Stream or custom CDN>',
+  waveform_data: [
+    0.18580253422260284, 0.22792305052280426, 0.23014479875564575,
+    0.2215365618467331, 0.280057817697525, 0.24526794254779816,
+    0.23399925231933594, 0.3128012716770172, 0.37945452332496643,
+    0.33992674946784973, 0.33231520652770996, 0.35996779799461365,
+    0.24952147901058197, 0.2771506607532501, 0.18567748367786407,
+    0.2669936418533325, 0.2318495213985443, 0.266754150390625,
+    0.24599547684192657, 0.22025825083255768, 0.2574225664138794,
+    0.2297886610031128, 0.21858176589012146, 0.22855964303016663,
+    0.21926963329315186, 0.1592704802751541, 0.17932571470737457,
+    0.17183426022529602, 0.16925041377544403, 0.17725585401058197,
+    0.20863258838653564, 0.15763725340366364, 0.17838287353515625,
+    0.2596689462661743, 0.2821672856807709, 0.2308555543422699,
+    0.21800407767295837, 0.237264484167099, 0.24341285228729248,
+    0.21091987192630768, 0.22752471268177032, 0.28887689113616943,
+    0.25566428899765015, 0.2714449167251587, 0.30015745759010315,
+    0.2883681356906891, 0.28020721673965454, 0.21566811203956604,
+    0.2041303962469101, 0.1856091320514679, 0.22570304572582245,
+    0.22362418472766876, 0.18938171863555908, 0.2105405479669571,
+    0.22487449645996094, 0.2667095959186554, 0.29159706830978394,
+    0.2825489938259125, 0.2347666174173355, 0.2768406569957733,
+    0.2953290641307831, 0.26249200105667114, 0.3034127950668335,
+    0.26899436116218567, 0.2931807041168213, 0.24274344742298126,
+    0.23544998466968536, 0.29423996806144714, 0.2060961127281189,
+    0.05098915100097656, 0.0063146972097456455, 0.015633393079042435,
+    0.03022758476436138, 0.026124343276023865, 0.014958725310862064,
+    0.01488060038536787, 0.0297449491918087, 0.046876221895217896,
+    0.016678161919116974, 0.030463561415672302, 0.022851256653666496,
+    0.040972135961055756, 0.050609588623046875, 0.04940780624747276,
+    0.04304153472185135, 0.08744628727436066, 0.0762052908539772,
+    0.0801474004983902, 0.0818980410695076, 0.08521285653114319,
+    0.07830711454153061, 0.07637504488229752, 0.09124496579170227,
+    0.16371025145053864, 0.08206146210432053, 0.0569305419921875,
+    0.043944090604782104, 0.07224594056606293, 0.06922554224729538,
+    5.340576194612368e-7,
+  ],
+  // in seconds
+  duration: 21.07675,
+  // in bytes
+  file_size: 56504,
+  mime_type: 'audio/aac',
+};
+```
+
+[//]: # "Start of generated content"
+[//]: # "End of generated content"

docusaurus/docs/Angular/components/AttachmentListComponent.mdx

@@ -0,0 +1,26 @@
+import WavebarScreenshot from "../assets/wavebar-screenshot.png";
+
+This component can be used to visualize the wave bar of a voice recording
+
+<img src={WavebarScreenshot} width="500" />
+
+## Usage
+
+The built-in [`AttachmentListComponent`](../../components/AttachmentListComponent) component displays this component. If you want to use this directly in your UI you can do it like this:
+
+```html
+<audio #audioElement></audio>
+<stream-voice-recording-wavebar
+  *ngIf="attachment?.waveform_data && attachment?.duration"
+  [waveFormData]="attachment?.waveform_data || []"
+  [duration]="attachment?.duration"
+  [audioElement]="audioElement"
+></stream-voice-recording-wavebar>
+```
+
+## Customization
+
+It's not possible to override only the wave data visualization, but you can override the [`VoiceRecordingComponent`](../services/CustomTemplatesService.mdx/#voicerecordingattachmenttemplate).
+
+[//]: # "Start of generated content"
+[//]: # "End of generated content"

docusaurus/docs/Angular/components/VoiceRecordingComponent.mdx

@@ -117,7 +117,7 @@
     "@ngx-translate/core": "^13.0.0",
     "@ngx-translate/http-loader": "^6.0.0",
     "@popperjs/core": "^2.11.5",
-    "@stream-io/stream-chat-css": "4.9.2",
+    "@stream-io/stream-chat-css": "4.10.1",
     "@stream-io/transliterate": "^1.5.2",
     "angular-mentions": "^1.4.0",
     "dayjs": "^1.10.7",
@@ -126,7 +126,7 @@
     "ngx-popperjs": "^12.2.2",
     "pretty-bytes": "^5.6.0",
     "rxjs": "^7.1.0",
-    "stream-chat": "^8.20.0",
+    "stream-chat": "^8.24.0",
     "ts-node": "^10.2.1",
     "tslib": "^2.3.0",
     "uuidv4": "^6.2.12",

docusaurus/docs/Angular/components/VoiceRecordingWavebarComponent.mdx

@@ -12,7 +12,7 @@
     "@angular/common": "^12.2.0 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0",
     "@angular/core": "^12.2.0 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0",
     "@ngx-translate/core": "^13.0.0 || ^14.0.0 || ^15.0.0",
-    "stream-chat": "^8.20.0"
+    "stream-chat": "^8.24.0"
   },
   "dependencies": {
     "angular-mentions": "^1.4.0",

docusaurus/shared

@@ -118,5 +118,6 @@ export const en = {
       'This message did not meet our content guidelines',
     'Send Anyway': 'Send Anyway',
     Edited: 'Edited',
+    'Error playing audio': 'Error playing audio',
   },
 };