SF-3007 Add audio comments

src/RealtimeServer/scriptureforge/models/answer.ts

@@ -13,8 +13,6 @@ export interface Answer extends Comment {
   scriptureText?: string;
   selectionStartClipped?: boolean;
   selectionEndClipped?: boolean;
-  audioUrl?: string;
-  text?: string;
   likes: Like[];
   comments: Comment[];
   status?: AnswerStatus;

src/RealtimeServer/scriptureforge/models/comment.ts

@@ -5,6 +5,7 @@ export interface Comment extends OwnedData {
   deleted: boolean;
   syncUserRef?: string;
   text?: string;
+  audioUrl?: string;
   dateModified: string;
   dateCreated: string;
 }

src/RealtimeServer/scriptureforge/services/question-service.ts

@@ -6,7 +6,7 @@ import { ANY_INDEX } from '../../common/utils/obj-path';
 import { createFetchQuery, docSubmitJson0Op } from '../../common/utils/sharedb-utils';
 import { Answer } from '../models/answer';
 import { Comment } from '../models/comment';
-import { Question, QUESTIONS_COLLECTION, QUESTION_INDEX_PATHS } from '../models/question';
+import { QUESTIONS_COLLECTION, QUESTION_INDEX_PATHS, Question } from '../models/question';
 import { SFProjectDomain } from '../models/sf-project-rights';
 import { SFProjectUserConfig, SF_PROJECT_USER_CONFIGS_COLLECTION } from '../models/sf-project-user-config';
 import { QUESTION_MIGRATIONS } from './question-migrations';
@@ -100,7 +100,10 @@ export class QuestionService extends SFProjectDataService<Question> {
                     bsonType: 'string'
                   },
                   text: {
-                    bsonType: ['null', 'string']
+                    bsonType: 'string'
+                  },
+                  audioUrl: {
+                    bsonType: 'string'
                   },
                   dateModified: {
                     bsonType: 'string'

src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking.module.ts

@@ -14,8 +14,8 @@ import { ChapterAudioDialogComponent } from './chapter-audio-dialog/chapter-audi
 import { CheckingOverviewComponent } from './checking-overview/checking-overview.component';
 import { CheckingRoutingModule } from './checking-routing.module';
 import { CheckingAnswersComponent } from './checking/checking-answers/checking-answers.component';
-import { CheckingCommentFormComponent } from './checking/checking-answers/checking-comments/checking-comment-form/checking-comment-form.component';
 import { CheckingCommentsComponent } from './checking/checking-answers/checking-comments/checking-comments.component';
+import { CheckingInputFormComponent } from './checking/checking-answers/checking-input-form/checking-input-form.component';
 import { CheckingAudioPlayerComponent } from './checking/checking-audio-player/checking-audio-player.component';
 import { CheckingQuestionsComponent } from './checking/checking-questions/checking-questions.component';
 import { CheckingScriptureAudioPlayerComponent } from './checking/checking-scripture-audio-player/checking-scripture-audio-player.component';
@@ -41,7 +41,7 @@ import { TextAndAudioComponent } from './text-and-audio/text-and-audio.component
     ImportQuestionsConfirmationDialogComponent,
     FontSizeComponent,
     CheckingCommentsComponent,
-    CheckingCommentFormComponent,
+    CheckingInputFormComponent,
     CheckingAudioPlayerComponent,
     AudioPlayerComponent,
     CheckingScriptureAudioPlayerComponent,

src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking.utils.ts

@@ -1,7 +1,9 @@
+import { VerseRef } from '@sillsdev/scripture';
 import { AudioTiming } from 'realtime-server/lib/esm/scriptureforge/models/audio-timing';
 import { Question } from 'realtime-server/lib/esm/scriptureforge/models/question';
 import { SFProjectUserConfig } from 'realtime-server/lib/esm/scriptureforge/models/sf-project-user-config';
-import { VerseRefData } from 'realtime-server/lib/esm/scriptureforge/models/verse-ref-data';
+import { VerseRefData, toVerseRef } from 'realtime-server/lib/esm/scriptureforge/models/verse-ref-data';
+import { I18nService } from 'xforge-common/i18n.service';
 
 /**
  * Detects if a string is in a format that can be used to parse audio timing for a verse of Scripture.
@@ -112,4 +114,12 @@
     let iteration: number = timingData.filter(t => t.to <= currentAudioTiming.to && t.textRef === ref).length;
     return { label: match[1], iteration };
   }
+
+  static scriptureTextVerseRef(verse: VerseRef | VerseRefData | undefined, i18n: I18nService): string {
+    if (verse == null) {
+      return '';
+    }
+    const verseRef = verse instanceof VerseRef ? verse : toVerseRef(verse);
+    return `${i18n.localizeReference(verseRef)}`;
+  }
 }

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

@@ -48,71 +48,17 @@
           }
         </div>
       } @else {
-        <div>
-          <form autocomplete="off" id="answer-form" appScrollIntoView>
-            <app-text-and-audio
-              #answer
-              appAutofocus
-              [input]="activeAnswer"
-              [textLabel]="t('your_answer')"
-            ></app-text-and-audio>
-            <div class="bottom-row">
-              <div class="attachments">
-                <app-attach-audio [textAndAudio]="answer"></app-attach-audio>
-                @if (!selectedText) {
-                  <button
-                    mat-icon-button
-                    id="select-scripture"
-                    (click)="selectScripture()"
-                    [matTooltip]="t('tooltip_attach')"
-                  >
-                    <mat-icon class="attach-icon">attach_file</mat-icon>
-                  </button>
-                } @else {
-                  <div class="answer-scripture">
-                    <span class="answer-scripture-verse">{{ scriptureTextVerseRef(verseRef) }}</span>
-                    <button mat-icon-button (click)="clearSelection()" class="answer-scripture-clear">
-                      <mat-icon>clear</mat-icon>
-                    </button>
-                  </div>
-                }
-              </div>
-              @if (isScreenSmall) {
-                <div>
-                  <button mat-icon-button type="button" (click)="hideAnswerForm()" id="cancel-answer">
-                    <mat-icon class="material-icons-outlined">cancel</mat-icon>
-                  </button>
-                  <button
-                    mat-icon-button
-                    color="primary"
-                    id="save-answer"
-                    (click)="submit()"
-                    [disabled]="submittingAnswer"
-                  >
-                    <mat-icon>check_circle</mat-icon>
-                  </button>
-                </div>
-              }
-              @if (!isScreenSmall) {
-                <div class="large-form-action-buttons">
-                  <button mat-button type="button" (click)="hideAnswerForm()" id="cancel-answer">
-                    <mat-icon>close</mat-icon>
-                    {{ t("cancel") }}
-                  </button>
-                  <button
-                    mat-flat-button
-                    color="primary"
-                    id="save-answer"
-                    (click)="submit()"
-                    [disabled]="submittingAnswer"
-                  >
-                    <mat-icon>check</mat-icon>
-                    {{ t("save_answer") }}
-                  </button>
-                </div>
-              }
-            </div>
-          </form>
+        <div id="answer-form">
+          <app-checking-input-form
+            [textSelectionEnabled]="true"
+            [checkingInput]="this.activeAnswer"
+            [project]="project"
+            [questionDoc]="questionDoc"
+            [textsByBookId]="textsByBookId"
+            [label]="'answer'"
+            (cancel)="hideAnswerForm()"
+            (save)="submit($event)"
+          ></app-checking-input-form>
         </div>
       }
       @if (shouldShowAnswers) {
@@ -159,12 +105,6 @@ <h3 id="totalAnswersMessage">
                   <app-checking-audio-player [source]="getFileSource(answer.audioUrl)"> </app-checking-audio-player>
                 }
                 <div class="answer-footer">
-                  <app-owner
-                    [ownerRef]="answer.ownerRef"
-                    [includeAvatar]="true"
-                    [layoutStacked]="true"
-                    [dateTime]="answer.dateCreated"
-                  ></app-owner>
                   <div class="actions">
                     @if (canChangeAnswerStatus(answer)) {
                       <button
@@ -190,25 +130,42 @@ <h3 id="totalAnswersMessage">
                         {{ t(isAnswerResolved(answer) ? "resolved" : "resolve") }}
                       </button>
                     }
-                    @if (canEditAnswer(answer)) {
-                      <button mat-button type="button" (click)="editAnswer(answer)" class="answer-edit short-button">
-                        {{ t("edit") }}
-                      </button>
-                    }
-                    @if (canDeleteAnswer(answer)) {
-                      <div class="delete-divider">|</div>
-                      <button
-                        mat-button
-                        type="button"
-                        (click)="deleteAnswerClicked(answer)"
-                        class="answer-delete short-button"
-                      >
-                        {{ t("delete") }}
-                      </button>
-                    }
+                  </div>
+                  <div class="bottom-row">
+                    <div>
+                      @if (canEditAnswer(answer)) {
+                        <button
+                          mat-icon-button
+                          type="button"
+                          (click)="editAnswer(answer)"
+                          class="answer-edit"
+                          [matTooltip]="t('edit')"
+                        >
+                          <mat-icon>edit</mat-icon>
+                        </button>
+                      }
+                      @if (canDeleteAnswer(answer)) {
+                        <button
+                          mat-icon-button
+                          type="button"
+                          (click)="deleteAnswerClicked(answer)"
+                          class="answer-delete"
+                          [matTooltip]="t('delete')"
+                        >
+                          <mat-icon>delete</mat-icon>
+                        </button>
+                      }
+                    </div>
+                    <app-owner
+                      [ownerRef]="answer.ownerRef"
+                      [includeAvatar]="true"
+                      [layoutStacked]="true"
+                      [dateTime]="answer.dateCreated"
+                    ></app-owner>
                   </div>
                 </div>
                 <app-checking-comments
+                  id="answer-comments"
                   [project]="project"
                   [projectUserConfigDoc]="projectUserConfigDoc"
                   [questionDoc]="questionDoc"

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

@@ -27,32 +27,6 @@
   }
 }
 
-#answer-form {
-  display: flex;
-  flex-direction: column;
-  row-gap: 2px;
-  .attach-icon {
-    rotate: 45deg;
-  }
-  .bottom-row {
-    display: flex;
-    justify-content: space-between;
-  }
-  .attachments {
-    display: flex;
-    flex-direction: row;
-    .clear,
-    .answer-scripture-clear {
-      padding: 6px;
-    }
-  }
-  .large-form-action-buttons {
-    display: flex;
-    align-items: center;
-    column-gap: 8px;
-  }
-}
-
 .answers-container {
   .answer {
     display: flex;
@@ -102,12 +76,6 @@
         flex: 1;
         align-items: flex-end;
 
-        @include breakpoints.media-breakpoint-down(sm) {
-          align-items: flex-start;
-          flex-direction: column;
-          row-gap: 5px;
-        }
-
         button {
           &.answer-status {
             &.status-exportable {
@@ -152,10 +120,21 @@
         display: flex;
         flex-direction: column;
         row-gap: 10px;
-        border-bottom: 1px solid checking-vars.$borderColor;
         padding: 10px 0;
-        app-owner {
-          align-self: flex-end;
+
+        .bottom-row {
+          display: flex;
+          justify-content: space-between;
+          .mat-icon {
+            @include checking-vars.md-icon-size(18px);
+          }
+
+          button {
+            height: 40px;
+            &:not(:hover) {
+              color: rgba(0, 0, 0, 0.7);
+            }
+          }
         }
       }
     }
@@ -175,7 +154,6 @@
   padding-block: 6px;
 }
 
-.answer-scripture-clear,
 .clear {
   width: 36px;
   height: 36px;