From a3146cacd36dc7545f29b4546034363be0672015 Mon Sep 17 00:00:00 2001
From: Delasie Torkornoo <Delasie.Torkornoo@nrc-cnrc.gc.ca>
Date: Mon, 25 Nov 2024 12:12:08 -0500
Subject: [PATCH] feat: upload component subscribes to Soundswallower loading
 event

---
 .../src/app/soundswallower.service.ts           |  6 +++---
 .../src/app/upload/upload.component.html        |  2 +-
 .../src/app/upload/upload.component.ts          |  5 +++++
 packages/studio-web/tests/test-commands.ts      | 17 +++++++++++++----
 4 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/packages/studio-web/src/app/soundswallower.service.ts b/packages/studio-web/src/app/soundswallower.service.ts
index 7565ec65..b12c2e6c 100644
--- a/packages/studio-web/src/app/soundswallower.service.ts
+++ b/packages/studio-web/src/app/soundswallower.service.ts
@@ -1,4 +1,4 @@
-import { Observable, from } from "rxjs";
+import { BehaviorSubject, Observable, from } from "rxjs";
 import soundswallower_factory, {
   Segment,
   SoundSwallowerModule,
@@ -32,7 +32,7 @@ export enum BeamDefaults {
   providedIn: "root",
 })
 export class SoundswallowerService {
-  modelLoaded = false;
+  modelLoaded = new BehaviorSubject<boolean>(false);
   mode = BeamDefaults.strict;
   beamParams: { [key in BeamDefaults]: BeamSettings } = {
     strict: {
@@ -56,7 +56,7 @@ export class SoundswallowerService {
   async preload(): Promise<void> {
     const scratch = new soundswallower.Decoder();
     return scratch.initialize().finally(() => {
-      this.modelLoaded = true;
+      this.modelLoaded.next(true);
       scratch.delete();
     });
   }
diff --git a/packages/studio-web/src/app/upload/upload.component.html b/packages/studio-web/src/app/upload/upload.component.html
index 1f9c0be9..3c8156f7 100644
--- a/packages/studio-web/src/app/upload/upload.component.html
+++ b/packages/studio-web/src/app/upload/upload.component.html
@@ -363,7 +363,7 @@ <h1 i18n="Title for language box" class="title">
           i18n="Next button"
           id="next-step"
           class="mt-4 plausible-event-name=CreateReadalong"
-          [disabled]="loading"
+          [disabled]="loading || !isLoaded"
           mat-raised-button
           color="primary"
           type="submit"
diff --git a/packages/studio-web/src/app/upload/upload.component.ts b/packages/studio-web/src/app/upload/upload.component.ts
index c5e8795a..990ab2df 100644
--- a/packages/studio-web/src/app/upload/upload.component.ts
+++ b/packages/studio-web/src/app/upload/upload.component.ts
@@ -88,6 +88,11 @@ export class UploadComponent implements OnDestroy, OnInit {
       .subscribe((textString) =>
         this.uploadService.$currentText.next(textString),
       );
+    this.ssjsService.modelLoaded
+      .pipe(takeUntil(this.unsubscribe$))
+      .subscribe((loaded) => {
+        this.isLoaded = loaded;
+      });
   }
 
   async ngOnInit() {
diff --git a/packages/studio-web/tests/test-commands.ts b/packages/studio-web/tests/test-commands.ts
index 0d25dc74..91ee380e 100644
--- a/packages/studio-web/tests/test-commands.ts
+++ b/packages/studio-web/tests/test-commands.ts
@@ -26,9 +26,15 @@ export const testMakeAReadAlong = async (page: Page) => {
       .click();
     await page.getByTestId("ras-audio-fileselector").click({ force: true });
     await page.getByTestId("ras-audio-fileselector").setInputFiles(testMp3Path);
+    await expect(async () => {
+      await expect(
+        page.getByTestId("next-step"),
+        "model is loaded",
+      ).not.toBeDisabled();
 
-    //create the readalong
-    await page.getByTestId("next-step").click({ force: true });
+      //create the readalong
+      await page.getByTestId("next-step").click();
+    }).toPass();
 
     //wait for edit page to load
     await expect(async () => {
@@ -104,9 +110,12 @@ export const defaultBeforeEach = async (page: Page, browserName: string) => {
       "The aligner feature is not stable for webkit",
     );
     //await page.coverage.startJSCoverage();
-    const waitForSoundSwallowerModel = page.waitForResponse(/noisedict\.txt/);
+
     await page.goto("/", { waitUntil: "load" });
-    await waitForSoundSwallowerModel;
+    await expect(
+      page.getByTestId("next-step"),
+      "Soundswallower model has loaded",
+    ).not.toBeDisabled();
   });
 };