feat: add voice recording option

GetStream · Sep 18, 2024 · 20daf91 · 20daf91
1 parent e4940cb
commit 20daf91
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 2 deletions.
diff --git 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,8 @@ export type Icon =
   | 'download'
   | 'error'
   | 'play'
-  | 'pause';
+  | 'pause'
+  | 'mic';
 
 /**
  * The `Icon` component can be used to display different icons (i. e. message delivered icon).

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
@@ -157,6 +157,13 @@
       >
         {{ cooldown$ | async }}
       </div>
+      <button
+        *ngIf="displayVoiceRecordingButton"
+        class="str-chat__start-recording-audio-button"
+        data-testid="start-voice-recording"
+      >
+        <stream-icon-placeholder icon="mic"></stream-icon-placeholder>
+      </button>
     </div>
   </ng-container>
   <ng-template #notAllowed>

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
@@ -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
@@ -99,6 +99,10 @@ 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
    */