refactor: updated B64Service and FileService to prefer FileReader API

Author: sergeleger

packages/studio-web/src/app/b64.service.ts

@@ -1,34 +1,21 @@
-import { forkJoin, Observable, BehaviorSubject } from "rxjs";
-import { switchMap } from "rxjs/operators";
+import { forkJoin, Observable, BehaviorSubject, lastValueFrom } from "rxjs";
+import { map, switchMap } from "rxjs/operators";
 
 import { HttpClient } from "@angular/common/http";
-import { Injectable } from "@angular/core";
+import { inject, Injectable } from "@angular/core";
 
 import { FileService } from "./file.service";
 
 @Injectable({
   providedIn: "root",
 })
 export class B64Service {
-  JS_BUNDLE_URL = "assets/bundle.js";
-  FONTS_BUNDLE_URL = "assets/fonts.b64.css";
-  /**
-   * Creates an instance of B64Service, a service for B64 encoding assets.
-   * @param {HttpClient} http - The HttpClient service for making HTTP requests.
-   * @param {FileService} fileService - The FileService for handling file operations.
-   */
-  jsAndFontsBundle$ = new BehaviorSubject<[string, string] | null>(null);
-  constructor(
-    private http: HttpClient,
-    private fileService: FileService,
-  ) {
-    this.getBundle$().subscribe((bundle) => {
-      this.jsAndFontsBundle$.next([
-        this.indent(bundle[0], 6), //apply the indentation to the js bundle
-        this.indent(bundle[1], 6),
-      ]);
-    });
-  }
+  private readonly JS_BUNDLE_URL = "assets/bundle.js";
+  private readonly FONTS_BUNDLE_URL = "assets/fonts.b64.css";
+  private http = inject(HttpClient);
+  private fileService = inject(FileService);
+  private cachedBundle: Promise<[string, string]> | null = null;
+
   getBundle$(): Observable<[string, string]> {
     return forkJoin([
       this.http
@@ -38,7 +25,19 @@ export class B64Service {
       this.http
         .get(this.FONTS_BUNDLE_URL, { responseType: "blob" })
         .pipe(switchMap((blob: Blob) => this.fileService.readFile$(blob))),
-    ]);
+    ]).pipe(
+      map((bundle) => [this.indent(bundle[0], 6), this.indent(bundle[1], 6)]),
+    );
+  }
+
+  // A promise implementation of getBundle()$. Additionally, the promise is
+  // cached and reused on subsequent bundle requests.
+  getBundle(): Promise<[string, string]> {
+    if (!this.cachedBundle) {
+      this.cachedBundle = lastValueFrom(this.getBundle$());
+    }
+
+    return this.cachedBundle;
   }
   utf8_to_b64(str: string) {
     // See https://stackoverflow.com/questions/30106476/using-javascripts-atob-to-decode-base64-doesnt-properly-decode-utf-8-strings
@@ -59,24 +58,32 @@ export class B64Service {
     );
   }
 
-  xmlToB64(xml: Document) {
+  xmlToB64(xml: Document): string {
     return this.utf8_to_b64(
       new XMLSerializer()
         .serializeToString(xml)
         .replace("?><read", "?>\n<read"),
     );
   }
 
-  blobToB64(blob: any) {
-    return new Promise((resolve, _) => {
-      const reader = new FileReader();
-      // @ts-ignore
-      reader.onloadend = () => resolve(reader.result);
-      reader.readAsDataURL(blob);
-    });
+  // rasToDataURL creates a data URL containing the contents of the RAS document.
+  rasToDataURL(xml: Document): Promise<string> {
+    const xmlText = new XMLSerializer()
+      .serializeToString(xml)
+      .replace("?><read", "?>\n<read");
+
+    return this.fileService.readFileAsDataURL(
+      xmlText,
+      "application/readalong+xml",
+    );
+  }
+
+  // blobToDataURL encodes the blob to a data URL.
+  blobToDataURL(blob: Blob): Promise<string> {
+    return this.fileService.readFileAsDataURL(blob);
   }
 
-  indent(str: string, level: number) {
+  private indent(str: string, level: number) {
     const indent = " ".repeat(level);
 
     return str

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

@@ -27,9 +27,7 @@
           #readalong
           *ngIf="studioService.render$ | async"
           mode="EDIT"
-          href="data:application/readalong+xml;base64,{{
-            b64Service.xmlToB64(b64Inputs[1])
-          }}"
+          href="{{ rasAsDataURL() }}"
           audio="{{ b64Inputs[0] }}"
           class="hydrated"
         >

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

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit, ViewChild } from "@angular/core";
+import { Component, OnDestroy, OnInit, signal, ViewChild } from "@angular/core";
 import { Components } from "@readalongs/web-component/loader";
 
 import { B64Service } from "../b64.service";
@@ -16,7 +16,7 @@ import { ToastrService } from "ngx-toastr";
 export class DemoComponent implements OnDestroy, OnInit {
   @ViewChild("readalong") readalong!: Components.ReadAlong;
   language: "eng" | "fra" | "spa" = "eng";
-
+  protected rasAsDataURL = signal<string>("");
   constructor(
     public b64Service: B64Service,
     public studioService: StudioService,
@@ -29,6 +29,12 @@ export class DemoComponent implements OnDestroy, OnInit {
     } else if ($localize.locale == "es") {
       this.language = "spa";
     }
+
+    this.studioService.b64Inputs$.subscribe(async (b64Input) => {
+      if (b64Input[1]) {
+        this.rasAsDataURL.set(await this.b64Service.rasToDataURL(b64Input[1]));
+      }
+    });
   }
 
   ngOnInit(): void {}

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

@@ -269,7 +269,7 @@ export class EditorComponent implements OnDestroy, AfterViewInit {
       this.wavesurfer.loadBlob(this.editorService.audioControl$.value);
       this.wavesurfer.clearSegments();
       this.fileService
-        .readFileAsData$(this.editorService.audioControl$.value)
+        .readFileAsDataURL$(this.editorService.audioControl$.value)
         .pipe(take(1))
         .subscribe((audiob64) => {
           this.editorService.audioB64Control$.setValue(audiob64);
@@ -461,18 +461,12 @@ export class EditorComponent implements OnDestroy, AfterViewInit {
     const css = element.getAttribute("css-url");
 
     if (css !== null && css.length > 0) {
-      if (css.startsWith("data:text/css;base64,")) {
-        this.wcStylingService.$wcStyleInput.next(
-          this.b64Service.b64_to_utf8(css.substring(css.indexOf(",") + 1)),
-        );
-      } else {
-        const reply = await fetch(css);
-        // Did that work? Great!
-        if (reply.ok) {
-          reply.text().then((cssText) => {
-            this.wcStylingService.$wcStyleInput.next(cssText);
-          });
-        }
+      const reply = await fetch(css);
+      // Did that work? Great!
+      if (reply.ok) {
+        reply.text().then((cssText) => {
+          this.wcStylingService.$wcStyleInput.next(cssText);
+        });
       }
     } else {
       this.wcStylingService.$wcStyleInput.next("");
@@ -578,9 +572,11 @@ export class EditorComponent implements OnDestroy, AfterViewInit {
     this.shepherdService.start();
   }
   async updateWCStyle($event: string) {
-    this.readalong?.setCss(
-      `data:text/css;base64,${this.b64Service.utf8_to_b64($event ?? "")}`,
+    const css = await this.fileService.readFileAsDataURL(
+      $event ?? "",
+      "text/css",
     );
+    this.readalong?.setCss(css);
   }
   async addWCCustomFont($font: string) {
     this.readalong?.addCustomFont($font);

packages/studio-web/src/app/file.service.spec.ts

@@ -25,4 +25,33 @@ describe("FileService", () => {
   it("should be created", () => {
     expect(service).toBeTruthy();
   });
+
+  it("should read a text file from a promise", async () => {
+    const got = await service.readFile("this is a test");
+    expect(got).toBe("this is a test");
+  });
+
+  it("should create a data URL from a promise", async () => {
+    const got = await service.readFileAsDataURL("this is a test");
+    expect(got.startsWith("data:text/plain;base64")).toBeTrue();
+
+    // reverse the readFileAsDataURL operation.
+    const reversed = await fetch(got).then((resp) => resp.text());
+    expect(reversed).toBe("this is a test");
+  });
+
+  it("should turn utf8 to b64 and back", async () => {
+    const testUTF8 = `󳬏ۓ脶򍫐䏷򻱚1󔊣򧰗J鷍ˑ⨘󝳗ʳꟴ󆋔=є򻥼Ӳ򦿴¦槩7}摠꾀𴮣۝م𬷊
+    ,^⒆!טФ񤨷Յe󫱷ъ"Ҁ*=ߋ󻅷񌍖_ᾀ\ꡝ񲁿g"՝MU񔡆ЀL
+    劆֒񦘰ˑ{坋𹔸lǼc&񓱬񊄸Ӽ:󌈅=̹ɽ渭觙􈯶൰ȣ¡圤𹷟򱄢揋ﺝ􊃻^
+    E̶򱩀򑪟eٌϐ򔜮霗燨综*􍪻񭚴oꕃ𷴨2ҽT񺆥uR혙񗊭:򉪼񙏺ۤƓ騡
+    񱺡􌡩PȌ񸛍񩍢􅓴冖㌃ۄ𦄜7Ž⇆*zѱ澁nަvۭË́듍JҢ䆹M󩗟繶`;
+
+    const got = await service
+      .readFileAsDataURL(testUTF8)
+      .then((dataURL) => fetch(dataURL))
+      .then((resp) => resp.text());
+
+    expect(got).toEqual(testUTF8);
+  });
 });

packages/studio-web/src/app/file.service.ts

@@ -1,4 +1,13 @@
-import { Observable, catchError, from, map, of, take } from "rxjs";
+import {
+  Observable,
+  Subscriber,
+  catchError,
+  from,
+  lastValueFrom,
+  map,
+  of,
+  take,
+} from "rxjs";
 import { HttpClient, HttpErrorResponse } from "@angular/common/http";
 import { Injectable } from "@angular/core";
 import { ToastrService } from "ngx-toastr";
@@ -17,14 +26,14 @@ export class FileService {
     file: File,
     sampleRate: number,
   ): Observable<AudioBuffer> {
-    var audioCtx = new AudioContext({ sampleRate });
-    var audioFile = file.arrayBuffer().then((buffer: any) => {
+    const audioCtx = new AudioContext({ sampleRate });
+    const audioFile = file.arrayBuffer().then((buffer: any) => {
       return audioCtx.decodeAudioData(buffer);
     });
     return from(audioFile);
   }
 
-  returnFileFromPath$ = (url: string, responseType: string = "blob") => {
+  returnFileFromPath$(url: string, responseType: string = "blob") {
     const httpOptions: Object = { responseType };
     return this.http.get<any>(url, httpOptions).pipe(
       catchError((err: HttpErrorResponse) => {
@@ -42,26 +51,57 @@ export class FileService {
       }),
       take(1),
     );
-  };
+  }
+
+  readFile$(
+    blob: Blob | File | string,
+    type: string = "text/plain",
+  ): Observable<string> {
+    if (typeof blob === "string") {
+      blob = new Blob([blob], { type: type });
+    }
 
-  readFile$(blob: Blob | File): Observable<string> {
     const reader = new FileReader();
-    return Observable.create((obs: any) => {
+    return new Observable((obs: any) => {
       reader.onerror = (err) => obs.error(err);
       reader.onabort = (err) => obs.error(err);
       reader.onload = () => obs.next(reader.result);
       reader.onloadend = () => obs.complete();
       reader.readAsText(blob);
     });
   }
-  readFileAsData$(blob: Blob | File): Observable<any> {
+
+  // A promise based implementation of readFile$.
+  readFile(
+    blob: Blob | File | string,
+    type: string = "text/plain",
+  ): Promise<string> {
+    return lastValueFrom(this.readFile$(blob, type));
+  }
+
+  readFileAsDataURL$(
+    blob: Blob | File | string,
+    type: string = "text/plain",
+  ): Observable<string> {
+    if (typeof blob === "string") {
+      blob = new Blob([blob], { type: type });
+    }
+
     const reader = new FileReader();
-    return Observable.create((obs: any) => {
+    return new Observable((obs: any) => {
       reader.onerror = (err) => obs.error(err);
       reader.onabort = (err) => obs.error(err);
       reader.onload = () => obs.next(reader.result);
       reader.onloadend = () => obs.complete();
       reader.readAsDataURL(blob);
     });
   }
+
+  // A promise based implementation of readFileAsDataURL$.
+  readFileAsDataURL(
+    blob: Blob | File | string,
+    type: string = "text/plain",
+  ): Promise<string> {
+    return lastValueFrom(this.readFileAsDataURL$(blob, type));
+  }
 }