feat: audio component can be passed transcript text and launch own popup

src/app/shared/components/template/components/audio/audio.component.html

@@ -4,24 +4,26 @@
       <h3>{{ params.title }}</h3>
       @if (params.variant.includes("large") && params.showInfoButton) {
         <div class="info-icon-container">
-          @if (params.infoIconAsset) {
-            <ion-icon [src]="params.infoIconAsset | plhAsset" (click)="clickInfo()"></ion-icon>
-          } @else {
-            <ion-icon name="document-text-outline" (click)="clickInfo()"></ion-icon>
-          }
+          <ion-button fill="clear" class="action-button" (click)="handleActionButtonClick()">
+            @if (params.infoIconAsset) {
+              <ion-icon slot="icon-only" [src]="params.infoIconAsset | plhAsset"></ion-icon>
+            } @else {
+              <ion-icon slot="icon-only" name="document-text-outline"></ion-icon>
+            }
+          </ion-button>
         </div>
       }
     </div>
   }
   <div class="second-row">
     @if (params.variant.includes("compact") && params.showInfoButton) {
-      <div class="info-icon-container">
+      <ion-button fill="clear" class="action-button" (click)="handleActionButtonClick()">
         @if (params.infoIconAsset) {
-          <ion-icon [src]="params.infoIconAsset | plhAsset" (click)="clickInfo()"></ion-icon>
+          <ion-icon slot="icon-only" [src]="params.infoIconAsset | plhAsset"></ion-icon>
         } @else {
-          <ion-icon name="document-text-outline" (click)="clickInfo()"></ion-icon>
+          <ion-icon slot="icon-only" name="document-text-outline"></ion-icon>
         }
-      </div>
+      </ion-button>
     }
     <div class="progress-block" [class.disabled]="params.rangeBarDisabled || !player">
       <ion-range

src/app/shared/components/template/components/audio/audio.component.scss

@@ -30,6 +30,7 @@ $control-background: var(--audio-control-background, var(--ion-color-primary-500
   .second-row {
     display: flex;
     flex-direction: row-reverse;
+    align-items: center;
 
     .controls {
       @include mixins.flex-space-between;
@@ -58,7 +59,7 @@ $control-background: var(--audio-control-background, var(--ion-color-primary-500
     .progress-block {
       width: 100%;
       display: flex;
-      margin-left: var(--small-margin);
+      margin: 0 var(--tiny-margin);
       ion-range {
         width: 100%;
         --bar-background: var(--ion-color-gray-200);
@@ -77,13 +78,9 @@ $control-background: var(--audio-control-background, var(--ion-color-primary-500
         }
       }
     }
-    .info-icon-container {
-      @include mixins.flex-centered;
-      margin-left: var(--small-margin);
-      ion-icon {
-        color: var(--ion-color-primary);
-        font-size: var(--icon-size-tiny);
-      }
+    ion-button.action-button {
+      --padding-start: 2px;
+      --padding-end: 2px;
     }
   }
 }
@@ -113,12 +110,9 @@ $control-background: var(--audio-control-background, var(--ion-color-primary-500
       font-weight: var(--font-weight-bold);
       font-size: var(--audio-title-size);
     }
-    .info-icon-container {
-      @include mixins.flex-centered;
-      ion-icon {
-        color: var(--ion-color-primary);
-        font-size: var(--icon-size-small);
-      }
+    ion-button.action-button {
+      --padding-start: 2px;
+      --padding-end: 2px;
     }
   }
 

src/app/shared/components/template/components/audio/audio.component.ts

@@ -9,6 +9,8 @@ import { Howl } from "howler";
 import { ITemplateRowProps } from "../../models";
 import { TemplateBaseComponent } from "../base";
 import { PLHAssetPipe } from "../../pipes/plh-asset.pipe";
+import { ModalController } from "@ionic/angular";
+import { TemplatePopupComponent } from "../layout/popup/popup.component";
 
 // Names of ion-icons to be used by default in the player.
 // Will be overridden if user provides values for play_icon_asset, pause_icon_asset or forward_icon_asset
@@ -27,19 +29,27 @@ interface IAudioParams {
   playIconAsset: string;
   /** TEMPLATE PARAMETER: "pause_icon_asset". The path to an svg to override the default pause icon. Default icon is ion's "pause-outline" */
   pauseIconAsset: string;
-  /** TEMPLATE PARAMETER: "forward_icon_asset". The path to an svg to override the default forward icon.
+  /**
+   * TEMPLATE PARAMETER: "forward_icon_asset". The path to an svg to override the default forward icon.
    * Will be mirrored to be used as the reqind icon. Default icon is ion's "play-forward"
    * */
   forwardIconAsset: string;
   /** TEMPLATE PARAMETER: "show_info_button". Should show the info button. Default false (unless info_icon_asset is provided) */
   showInfoButton: boolean;
   /** TEMPLATE PARAMETER: "info_icon_asset". The path to an svg to override the default info icon. The default is an icon indicating a transcript */
   infoIconAsset: string;
-  /** TEMPLATE PARAMETER: "range_bar_disabled". If true, the use cannot scrub through the audio using the range bar.
+  /**
+   * TEMPLATE PARAMETER: "transcript_text". A string representing the transcript of the audio.
+   * If provided, the transcript button will be shown and will launch a popup containing the this text
+   */
+  transcriptText: string;
+  /**
+   * TEMPLATE PARAMETER: "range_bar_disabled". If true, the use cannot scrub through the audio using the range bar.
    * Default false.
    */
   rangeBarDisabled: boolean;
-  /** TEMPLATE PARAMETER: "time_to_skip". The increment of time, in seconds, that will be applied when clicking the forward or backward buttons.
+  /**
+   * TEMPLATE PARAMETER: "time_to_skip". The increment of time, in seconds, that will be applied when clicking the forward or backward buttons.
    * Default 15.
    */
   timeToSkip: number;
@@ -83,7 +93,10 @@ export class TmplAudioComponent
   /** @ignore */
   trackerInterval: NodeJS.Timeout;
 
-  constructor(private plhAssetPipe: PLHAssetPipe) {
+  constructor(
+    private plhAssetPipe: PLHAssetPipe,
+    private modalCtrl: ModalController
+  ) {
     super();
   }
 
@@ -92,6 +105,14 @@ export class TmplAudioComponent
     this.initPlayer();
   }
 
+  public async handleActionButtonClick() {
+    if (this.params.transcriptText) {
+      await this.openTranscriptPopup();
+    } else {
+      await this.triggerActions("info_click");
+    }
+  }
+
   private getParams() {
     this.params.variant = getStringParamFromTemplateRow(this._row, "variant", "compact")
       .split(",")
@@ -113,8 +134,10 @@ export class TmplAudioComponent
     );
     this.params.title = getStringParamFromTemplateRow(this._row, "title", "");
     this.params.infoIconAsset = getStringParamFromTemplateRow(this._row, "info_icon_asset", null);
+    this.params.transcriptText = getStringParamFromTemplateRow(this._row, "transcript_text", null);
     this.params.showInfoButton =
       !!this.params.infoIconAsset ||
+      !!this.params.transcriptText ||
       getBooleanParamFromTemplateRow(this._row, "show_info_button", false);
     this.params.rangeBarDisabled = getBooleanParamFromTemplateRow(
       this._row,
@@ -168,10 +191,6 @@ export class TmplAudioComponent
     this.isPlaying = !this.isPlaying;
   }
 
-  public async clickInfo() {
-    await this.triggerActions("info_click");
-  }
-
   /**
    * Handle dragging of the range bar. Does not seek within the actual audio file,
    * this should only be triggered when the handle is released (on ionChange)
@@ -235,7 +254,29 @@ export class TmplAudioComponent
     }
   }
 
-  ngOnDestroy() {
-    this.player.stop();
+  private async openTranscriptPopup() {
+    const modal = await this.modalCtrl.create({
+      component: TemplatePopupComponent,
+      componentProps: {
+        props: {
+          popupText: this.params.transcriptText,
+          fullscreen: false,
+          showCloseButton: true,
+        },
+      },
+      id: "popup-audio-transcript",
+      // update to this styling must be done in global theme scss as the modal is injected dynamically into the dom
+      cssClass: "template-popup-modal",
+      showBackdrop: false,
+    });
+    modal.present();
+  }
+
+  async ngOnDestroy() {
+    this.player?.stop();
+    const activeModal = await this.modalCtrl.getTop();
+    if (activeModal) {
+      await activeModal.dismiss();
+    }
   }
 }

src/app/shared/components/template/components/layout/popup/popup.component.html

@@ -8,14 +8,21 @@
       <ion-icon slot="icon-only" name="close"></ion-icon>
     </div>
     <div class="popup-content" [attr.data-fullscreen]="props.fullscreen ? true : null">
-      <plh-template-container
-        class="template-container"
-        [name]="props.name"
-        [templatename]="props.templatename"
-        [parent]="props.parent"
-        [row]="props.row"
-        (emittedValue)="handleEmittedValue($event)"
-      ></plh-template-container>
+      @if (props.popupText) {
+        <!-- Use a text component row to display popup text -->
+        <plh-tmpl-text
+          [row]="{ _nested_name: '', name: '', type: 'text', value: props.popupText }"
+        ></plh-tmpl-text>
+      } @else {
+        <plh-template-container
+          class="template-container"
+          [name]="props.name"
+          [templatename]="props.templatename"
+          [parent]="props.parent"
+          [row]="props.row"
+          (emittedValue)="handleEmittedValue($event)"
+        ></plh-template-container>
+      }
     </div>
   </div>
 </div>

src/app/shared/components/template/components/layout/popup/popup.component.ts

@@ -53,4 +53,6 @@ export interface ITemplatePopupComponentProps extends ITemplateContainerProps {
   waitForDismiss?: boolean;
   /** Display fullscreen overlayed on top of all other app content */
   fullscreen?: boolean;
+  /** Pass text only to render that text in a popup, bypassing any templates */
+  popupText?: string;
 }