From addcd7e012ce0feee48768a47b8f537bf6587648 Mon Sep 17 00:00:00 2001
From: Joseph Myers <wjosephmyers@gmail.com>
Date: Thu, 12 Dec 2024 10:38:13 +0700
Subject: [PATCH] Chapter audio only hides bottom bar if scripture text is
 shown

This fixes an issue where "hide text" projects couldn't navigate questions on mobile, since the bottom bar is now being hidden.

So now, we don't hide the bottom bar if "hide text" is enabled. We will instead only hide the bar if the "hide text" is disabled and the chapter audio is shown. Effectively, this is when "the user opens the chapter audio."

The second case where we hide the bar remains. I did a slight refactoring to make all this clear and readable.

The original reason for the hiding behavior is still intact, that being to free up space on mobile and keep users focused on their intended task.
---
 .../checking/checking/checking.component.html |  2 +-
 .../checking/checking/checking.component.ts   | 20 +++++++++++++------
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.html b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.html
index 8e9f118cc4..7250f2bac2 100644
--- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.html
+++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.html
@@ -199,7 +199,7 @@ <h2 matSubheader>{{ t("filter_questions") }}</h2>
         </div>
       </div>
       @if (projectDoc && totalVisibleQuestions() > 0) {
-        <div id="question-nav" [ngClass]="{ hide: (textHasFocus && isScreenSmall) || showScriptureAudioPlayer }">
+        <div id="question-nav" [ngClass]="{ hide: textboxIsShownMobile || userOpenedChapterAudio }">
           @if (!isQuestionListPermanent) {
             <button mat-button type="button" (click)="setQuestionsOverlayVisibility(true)">
               {{ t("view_questions") }}
diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.ts b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.ts
index 8e60439275..3942d8c11f 100644
--- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.ts
+++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.ts
@@ -252,6 +252,20 @@ export class CheckingComponent extends DataLoadingComponent implements OnInit, A
     return this.projectDoc?.data?.checkingConfig.hideCommunityCheckingText ?? false;
   }
 
+  get userOpenedChapterAudio(): boolean {
+    return this.showScriptureAudioPlayer && !this.hideChapterText;
+  }
+
+  get textboxIsShown(): boolean {
+    const isAnswering = this.answersPanel?.answerInput != null;
+    const isCommenting = this.answersPanel?.allComments?.find(c => c.inputComponent != null) != null;
+    return isAnswering || isCommenting;
+  }
+
+  get textboxIsShownMobile(): boolean {
+    return this.textboxIsShown && this.isScreenSmall;
+  }
+
   get isRightToLeft(): boolean {
     if (this.projectDoc?.data?.isRightToLeft != null) {
       return this.projectDoc.data.isRightToLeft;
@@ -1082,12 +1096,6 @@ export class CheckingComponent extends DataLoadingComponent implements OnInit, A
     }
   }
 
-  get textHasFocus(): boolean {
-    const isAnswering = this.answersPanel?.answerInput != null;
-    const isCommenting = this.answersPanel?.allComments?.find(c => c.inputComponent != null) != null;
-    return isAnswering || isCommenting;
-  }
-
   /**
    * Retrieves the adjacent question based on the active question and the direction.
    * Adjacent question might be outside the current filtered scope.