SF-3176 Add Upload Audio to Questions

src/SIL.XForge.Scripture/ClientApp/src/app/checking/attach-audio/attach-audio.component.html

@@ -1,9 +1,23 @@
 <ng-container *transloco="let t; read: 'attach_audio'">
-  <div class="add-audio">
+  <div [ngClass]="{ 'add-audio': isUploadEnabled }">
     @if (audioUrl == null && textAndAudio?.audioAttachment?.status !== "recording") {
       <button mat-icon-button (click)="startRecording()" [matTooltip]="t('tooltip_record')">
         <mat-icon>mic</mat-icon>
       </button>
+      @if (isUploadEnabled) {
+        <button
+          mat-icon-button
+          ngfSelect
+          [(file)]="uploadAudioFile"
+          (fileChange)="processAudioFileUpload()"
+          accept="audio/*"
+          class="upload-audio-file"
+          [(lastInvalids)]="lastInvalids"
+          [matTooltip]="t('tooltip_upload')"
+        >
+          <mat-icon>cloud_upload</mat-icon>
+        </button>
+      }
     }
   </div>
   @if (audioUrl != null) {

src/SIL.XForge.Scripture/ClientApp/src/app/checking/attach-audio/attach-audio.component.scss

@@ -16,3 +16,9 @@
 .clear {
   color: variables.$greenDark;
 }
+
+.add-audio {
+  background-color: rgba(0, 0, 0, 0.05);
+  padding-inline: 4px;
+  margin-block-start: 2px;
+}

src/SIL.XForge.Scripture/ClientApp/src/app/checking/attach-audio/attach-audio.component.spec.ts

@@ -3,13 +3,14 @@ import { DebugElement } from '@angular/core';
 import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { MatDialogRef } from '@angular/material/dialog';
 import { By } from '@angular/platform-browser';
+import { InvalidFileItem } from 'angular-file/file-upload/fileTools';
 import { of } from 'rxjs';
 import { anything, instance, mock, verify, when } from 'ts-mockito';
 import { DialogService } from 'xforge-common/dialog.service';
 import { OnlineStatusService } from 'xforge-common/online-status.service';
 import { TestOnlineStatusModule } from 'xforge-common/test-online-status.module';
 import { TestOnlineStatusService } from 'xforge-common/test-online-status.service';
-import { configureTestingModule, TestTranslocoModule } from 'xforge-common/test-utils';
+import { configureTestingModule, getAudioBlob, TestTranslocoModule } from 'xforge-common/test-utils';
 import { UICommonModule } from 'xforge-common/ui-common.module';
 import { AudioRecorderDialogComponent } from '../../shared/audio-recorder-dialog/audio-recorder-dialog.component';
 import { SharedModule } from '../../shared/shared.module';
@@ -38,8 +39,8 @@ describe('AttachAudioComponent', () => {
     when(env.mockTextAndAudio.input).thenReturn({});
     when(env.mockTextAndAudio.audioAttachment).thenReturn({ status: 'reset' });
     env.fixture.detectChanges();
-    expect(env.iconButton.nativeElement.textContent).toBe('mic');
-    env.iconButton.nativeElement.click();
+    expect(env.firstIcon.nativeElement.textContent).toBe('mic');
+    env.firstIcon.nativeElement.click();
     tick();
     env.fixture.detectChanges();
     verify(mockDialogService.openMatDialog(AudioRecorderDialogComponent, anything())).once();
@@ -50,24 +51,51 @@ describe('AttachAudioComponent', () => {
     when(env.mockTextAndAudio.input).thenReturn({});
     when(env.mockRecorderDialogRef.afterClosed()).thenReturn(of(undefined));
     env.fixture.detectChanges();
-    env.iconButton.nativeElement.click();
+    env.firstIcon.nativeElement.click();
     tick();
     env.fixture.detectChanges();
     verify(mockDialogService.openMatDialog(AudioRecorderDialogComponent, anything())).once();
     verify(env.mockTextAndAudio.setAudioAttachment(anything())).never();
-    expect(env.iconButton.nativeElement.textContent).toBe('mic');
+    expect(env.firstIcon.nativeElement.textContent).toBe('mic');
   }));
 
   it('should show clear when audio is attached', () => {
     when(env.mockTextAndAudio.audioAttachment).thenReturn({ status: 'processed' });
     when(env.mockTextAndAudio.input).thenReturn({ audioUrl: 'blob://audio' });
     env.fixture.detectChanges();
     expect(env.component.audioPlayer).not.toBeNull();
-    expect(env.iconButton.nativeElement.textContent).toBe('clear');
-    env.iconButton.nativeElement.click();
+    expect(env.firstIcon.nativeElement.textContent).toBe('clear');
+    env.firstIcon.nativeElement.click();
     env.fixture.detectChanges();
     verify(env.mockTextAndAudio.resetAudio()).once();
   });
+
+  it('should only show upload button when enabled', () => {
+    expect(env.uploadAudioButton).toBeNull();
+
+    env.component.isUploadEnabled = true;
+    env.fixture.detectChanges();
+
+    expect(env.uploadAudioButton).not.toBeNull();
+  });
+
+  it('should allow uploading audio files', () => {
+    env.fixture.detectChanges();
+
+    env.component['uploadAudioFile'] = new File([env.audioBlob], 'test.wav');
+    env.component['processAudioFileUpload']();
+
+    verify(env.mockTextAndAudio.setAudioAttachment(anything())).once();
+  });
+
+  it('forces uploading if lastInvalids sees an ogg file', () => {
+    env.fixture.detectChanges();
+
+    const file = new File([env.audioBlob], 'test.wav', { type: 'video/ogg' });
+    env.component['lastInvalids'] = [{ file } as InvalidFileItem];
+
+    verify(env.mockTextAndAudio.setAudioAttachment(anything())).once();
+  });
 });
 
 class TestEnvironment {
@@ -89,7 +117,15 @@ class TestEnvironment {
     this.fixture.detectChanges();
   }
 
-  get iconButton(): DebugElement {
+  get firstIcon(): DebugElement {
     return this.fixture.debugElement.query(By.css('button .mat-icon'));
   }
+
+  get uploadAudioButton(): DebugElement {
+    return this.fixture.debugElement.query(By.css('button.upload-audio-file'));
+  }
+
+  get audioBlob(): Blob {
+    return getAudioBlob();
+  }
 }

src/SIL.XForge.Scripture/ClientApp/src/app/checking/attach-audio/attach-audio.component.ts

@@ -1,12 +1,14 @@
 import { Component, Input, ViewChild } from '@angular/core';
 import { MatDialogRef } from '@angular/material/dialog';
+import { InvalidFileItem } from 'angular-file/file-upload/fileTools';
 import { firstValueFrom } from 'rxjs';
 import { DialogService } from 'xforge-common/dialog.service';
 import {
   AudioRecorderDialogComponent,
   AudioRecorderDialogData,
   AudioRecorderDialogResult
 } from '../../shared/audio-recorder-dialog/audio-recorder-dialog.component';
+import { AudioAttachment } from '../checking/checking-audio-player/checking-audio-player.component';
 import { SingleButtonAudioPlayerComponent } from '../checking/single-button-audio-player/single-button-audio-player.component';
 import { TextAndAudioComponent } from '../text-and-audio/text-and-audio.component';
 
@@ -18,6 +20,9 @@
 export class AttachAudioComponent {
   @ViewChild(SingleButtonAudioPlayerComponent) audioPlayer?: SingleButtonAudioPlayerComponent;
   @Input() textAndAudio?: TextAndAudioComponent;
+  @Input() isUploadEnabled: boolean = false;
+
+  protected uploadAudioFile: File = {} as File;
 
   constructor(private readonly dialogService: DialogService) {}
 
@@ -47,4 +52,29 @@
   toggleAudio(): void {
     this.audioPlayer?.playing ? this.audioPlayer?.stop() : this.audioPlayer?.play();
   }
+
+  protected set lastInvalids(value: InvalidFileItem[]) {
+    if (value == null) {
+      return;
+    }
+    // Firefox does not recognize the valid .ogg file type because it reads it as a video, so handle it here
+    if (value.length > 0 && value[0].file.type === 'video/ogg') {
+      this.uploadAudioFile = value[0].file;
+      this.processAudioFileUpload();
+    }
+  }
+
+  protected processAudioFileUpload(): void {
+    if (this.uploadAudioFile.name != null) {
+      const audio: AudioAttachment = {};
+      audio.url = URL.createObjectURL(this.uploadAudioFile);
+      audio.blob = this.uploadAudioFile;
+      audio.fileName = this.uploadAudioFile.name;
+      audio.status = 'uploaded';
+
+      if (this.textAndAudio != null) {
+        this.textAndAudio.setAudioAttachment(audio);
+      }
+    }
+  }
 }

src/SIL.XForge.Scripture/ClientApp/src/app/checking/question-dialog/question-dialog.component.html

@@ -48,7 +48,7 @@ <h1 mat-dialog-title class="dialog-title dialog-icon-title">
       <div>
         <app-text-and-audio #input [input]="question" [textLabel]="t('question')"></app-text-and-audio>
         <div class="attachments">
-          <app-attach-audio [textAndAudio]="input"></app-attach-audio>
+          <app-attach-audio [textAndAudio]="input" [isUploadEnabled]="true"></app-attach-audio>
         </div>
       </div>
     </mat-dialog-content>

src/SIL.XForge.Scripture/ClientApp/src/app/checking/text-and-audio/text-and-audio.component.ts

@@ -50,7 +50,11 @@ export class TextAndAudioComponent implements AfterViewInit, OnInit, OnDestroy {
   }
 
   updateFormValidity(): void {
-    if (this.hasTextOrAudio() || this._audioAttachment?.status === 'processed') {
+    if (
+      this.hasTextOrAudio() ||
+      this._audioAttachment?.status === 'processed' ||
+      this._audioAttachment?.status === 'uploaded'
+    ) {
       this.text.setErrors(null);
       this.input!.audioUrl = this._audioAttachment?.url;
     } else if (this._audioAttachment?.status === 'reset') {

src/SIL.XForge.Scripture/ClientApp/src/assets/i18n/checking_en.json

@@ -40,7 +40,8 @@
   },
   "attach_audio": {
     "tooltip_record": "Record audio",
-    "tooltip_stop": "Stop recording"
+    "tooltip_stop": "Stop recording",
+    "tooltip_upload": "Upload audio"
   },
   "canon": {
     "book_names": {