feat: upload component subscribes to Soundswallower loading event

ReadAlongs · Nov 29, 2024 · a3146ca · a3146ca
1 parent d7fefe9
commit a3146ca
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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();
   });
 };