fix: reduced the sensitivity of view modification checks

Author: sergeleger

packages/studio-web/src/app/editor/editor.component.html

@@ -42,7 +42,7 @@ <h2 i18n="Title for upload box" class="title">
           Offline-HTML file included in the Web Bundle download format.
         </p>
         <input
-          #textInputElement
+          #rasFileUpload
           (change)="onRasFileSelected($event)"
           class="form-control"
           name="text"

packages/studio-web/src/app/editor/editor.component.ts

@@ -39,12 +39,15 @@ import { WcStylingComponent } from "../shared/wc-styling/wc-styling.component";
   styleUrls: ["./editor.component.sass"],
   standalone: false,
 })
-export class EditorComponent implements OnDestroy, OnInit, AfterViewInit {
+export class EditorComponent implements OnDestroy, AfterViewInit {
   @ViewChild("wavesurferContainer") wavesurferContainer!: ElementRef;
   wavesurfer: WaveSurfer;
   @ViewChild("readalongContainer") readalongContainerElement: ElementRef;
   @ViewChild("handle") handleElement!: ElementRef;
   @ViewChild("styleWindow") styleElement!: WcStylingComponent;
+
+  @ViewChild("rasFileUpload")
+  private rasFileUpload: ElementRef<HTMLInputElement>;
   readalong: Components.ReadAlong;
 
   language: "eng" | "fra" | "spa" = "eng";
@@ -55,6 +58,9 @@ export class EditorComponent implements OnDestroy, OnInit, AfterViewInit {
 
   unsubscribe$ = new Subject<void>();
   rasFileIsLoaded = false;
+
+  private beforeUnload: (e: Event) => void;
+
   constructor(
     public b64Service: B64Service,
     private fileService: FileService,
@@ -78,6 +84,23 @@ export class EditorComponent implements OnDestroy, OnInit, AfterViewInit {
         console.log("[DEBUG] window resized");
         this.resetStyleWindowSize();
       });
+
+    this.beforeUnload = (e: Event) => {
+      if (this.formIsDirty()) {
+        e.preventDefault(); // chrome & edge >118, circa Oct 2023
+        e.returnValue = true; // chrome & edge <=118
+      }
+    };
+
+    // User Browser's default messaging to warn the user when they're about to leave the page
+    window.addEventListener("beforeunload", this.beforeUnload);
+  }
+
+  private formIsDirty(): boolean {
+    return (
+      (this.rasFileUpload && this.rasFileUpload.nativeElement.value !== "") ||
+      this.rasFileIsLoaded
+    );
   }
 
   async ngAfterViewInit(): Promise<void> {
@@ -177,7 +200,6 @@ export class EditorComponent implements OnDestroy, OnInit, AfterViewInit {
     });
   }
 
-  ngOnInit(): void {}
   async ngOnDestroy() {
     // Save translations, images and all other edits to a temporary blob before destroying component
     // We just re-use the download service method here for simplicity and reload from this when
@@ -196,6 +218,8 @@ export class EditorComponent implements OnDestroy, OnInit, AfterViewInit {
         );
     }
     this.rasFileIsLoaded = false;
+
+    window.removeEventListener("beforeunload", this.beforeUnload);
   }
 
   download(download_type: SupportedOutputs) {

packages/studio-web/src/app/studio/studio.component.ts

@@ -40,7 +40,6 @@ import { StepperSelectionEvent } from "@angular/cdk/stepper";
 import { HttpErrorResponse } from "@angular/common/http";
 import { DownloadService } from "../shared/download/download.service";
 import { StudioService } from "./studio.service";
-import { environment } from "../../environments/environment";
 
 @Component({
   selector: "studio-component",
@@ -54,6 +53,8 @@ export class StudioComponent implements OnDestroy, OnInit {
   @ViewChild("demo", { static: false }) demo?: DemoComponent;
   @ViewChild("stepper") private stepper: MatStepper;
   unsubscribe$ = new Subject<void>();
+
+  private beforeUnload: (e: Event) => void;
   private route: ActivatedRoute;
   constructor(
     private titleService: Title,
@@ -108,13 +109,15 @@ export class StudioComponent implements OnDestroy, OnInit {
       true,
     );
 
+    this.beforeUnload = (e: Event) => {
+      if (this.formIsDirty()) {
+        e.preventDefault(); // chrome & edge >118, circa Oct 2023
+        e.returnValue = true; // chrome & edge <=118
+      }
+    };
+
     // User Browser's default messaging to warn the user when they're about to leave the page
-    if (environment.production) {
-      window.addEventListener("beforeunload", (e) => {
-        if (this.formIsDirty()) (e || window.event).returnValue = true;
-        return true;
-      });
-    }
+    window.addEventListener("beforeunload", this.beforeUnload);
 
     // Catch and report a catastrophic failure as soon as possible
     this.ssjsService
@@ -137,6 +140,8 @@ export class StudioComponent implements OnDestroy, OnInit {
     this.studioService.lastStepperIndex = this.stepper?.selectedIndex;
     this.unsubscribe$.next();
     this.unsubscribe$.complete();
+
+    window.removeEventListener("beforeunload", this.beforeUnload);
   }
 
   selectionChange(event: StepperSelectionEvent) {
@@ -155,9 +160,11 @@ export class StudioComponent implements OnDestroy, OnInit {
 
   formIsDirty() {
     return (
-      this.studioService.audioControl$.value !== null ||
-      this.studioService.textControl$.value !== null ||
-      this.studioService.$textInput
+      this.studioService.audioControl$.value ||
+      this.studioService.textControl$.value ||
+      this.studioService.$textInput.value ||
+      this.studioService.langMode$.value !== "generic" ||
+      this.studioService.langControl$.value !== "und"
     );
   }