feat: creator adding custom font to read-along

Author: joanise

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

@@ -60,7 +60,7 @@
         </read-along>
       </div>
     </div>
-    <div class="row"></div>
+    <div class="row mb-5"></div>
     <app-wc-styling></app-wc-styling>
   </div>
 </section>

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

@@ -34,6 +34,9 @@ export class DemoComponent implements OnDestroy, OnInit {
     this.wcStylingService.$wcStyleInput.subscribe((css) =>
       this.updateWCStyle(css),
     );
+    this.wcStylingService.$wcStyleFonts.subscribe((font) =>
+      this.addWCCustomFont(font),
+    );
   }
 
   ngOnInit(): void {}
@@ -51,7 +54,7 @@ export class DemoComponent implements OnDestroy, OnInit {
         this.studioService.slots,
         this.readalong,
         "Studio",
-        this.wcStylingService.$wcStyleInput.getValue(),
+        this.wcStylingService,
       );
     } else {
       this.toastr.error($localize`Download failed.`, $localize`Sorry!`, {
@@ -82,4 +85,7 @@ export class DemoComponent implements OnDestroy, OnInit {
       `data:text/css;base64,${this.b64Service.utf8_to_b64($event ?? "")}`,
     );
   }
+  async addWCCustomFont($font: string) {
+    this.readalong?.addCustomFont($font);
+  }
 }

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

@@ -59,6 +59,9 @@ export class EditorComponent implements OnDestroy, OnInit, AfterViewInit {
     this.wcStylingService.$wcStyleInput.subscribe((css) =>
       this.updateWCStyle(css),
     );
+    this.wcStylingService.$wcStyleFonts.subscribe((font) =>
+      this.addWCCustomFont(font),
+    );
   }
 
   async ngAfterViewInit(): Promise<void> {
@@ -141,7 +144,7 @@ export class EditorComponent implements OnDestroy, OnInit, AfterViewInit {
           this.readalong,
           this.editorService.slots,
           this.editorService.audioB64Control$.value,
-          this.wcStylingService.$wcStyleInput.getValue(),
+          this.wcStylingService,
         );
     }
     this.hasFile = false;
@@ -159,7 +162,7 @@ export class EditorComponent implements OnDestroy, OnInit, AfterViewInit {
         this.editorService.slots,
         this.readalong,
         "Editor", //from
-        this.wcStylingService.$wcStyleInput.getValue(),
+        this.wcStylingService,
       );
     } else {
       this.toastr.error($localize`Download failed.`, $localize`Sorry!`, {
@@ -247,6 +250,12 @@ export class EditorComponent implements OnDestroy, OnInit, AfterViewInit {
       // Make Editable
       rasElement.setAttribute("mode", "EDIT");
       this.readalong = rasElement;
+      //set custom fonts
+      if (this.wcStylingService.$wcStyleFonts.getValue().length) {
+        this.readalong.addCustomFont(
+          this.wcStylingService.$wcStyleFonts.getValue(),
+        );
+      }
       const currentWord$ = await this.readalong.getCurrentWord();
       const alignments = await this.readalong.getAlignments();
       // Subscribe to the current word of the readalong and center the wavesurfer element on it
@@ -332,6 +341,7 @@ export class EditorComponent implements OnDestroy, OnInit, AfterViewInit {
     }
 
     // stylesheet linked
+
     const css = element.getAttribute("css-url");
     if (css !== null) {
       if (css.startsWith("data:text/css;base64,")) {
@@ -347,6 +357,15 @@ export class EditorComponent implements OnDestroy, OnInit, AfterViewInit {
           });
         }
       }
+    } else {
+      this.wcStylingService.$wcStyleInput.next("");
+    }
+    //check for custom fonts
+    const customFont = readalong.querySelector("#ra-wc-custom-font");
+    if (customFont !== null) {
+      this.wcStylingService.$wcStyleFonts.next(customFont.innerHTML);
+    } else {
+      this.wcStylingService.$wcStyleFonts.next("");
     }
     return readalong.querySelector("body")?.innerHTML;
   }
@@ -454,4 +473,7 @@ export class EditorComponent implements OnDestroy, OnInit, AfterViewInit {
       `data:text/css;base64,${this.b64Service.utf8_to_b64($event ?? "")}`,
     );
   }
+  async addWCCustomFont($font: string) {
+    this.readalong?.addCustomFont($font);
+  }
 }

packages/studio-web/src/app/shared/download/download.service.ts

@@ -17,6 +17,7 @@ import {
   SupportedOutputs,
 } from "../../ras.service";
 import { Components } from "@readalongs/web-component/loader";
+import { WcStylingService } from "../wc-styling/wc-styling.service";
 
 interface Image {
   path: string;
@@ -180,12 +181,14 @@ Please host all assets on your server, include the font and package imports defi
     readalong: Components.ReadAlong,
     slots: ReadAlongSlots,
     b64Audio: string,
-    cssText: string | null,
+    wcStylingService: WcStylingService,
   ) {
     await this.updateImages(rasDoc, true, "image", readalong);
     await this.updateTranslations(rasDoc, readalong);
     let rasB64 = this.b64Service.xmlToB64(rasDoc);
     let b64Css = "";
+    const cssText = wcStylingService.$wcStyleInput.getValue();
+    const customFont = wcStylingService.$wcStyleFonts.getValue();
     if (cssText) {
       b64Css = ` css-url="data:text/css;base64,${this.b64Service.utf8_to_b64(cssText)}" `;
     }
@@ -225,6 +228,7 @@ Please host all assets on your server, include the font and package imports defi
                 <meta name="generator" content="@readalongs/studio-web ${environment.packageJson.singleFileBundleVersion}">
                 <title>${slots.title}</title>
                 <style>${this.b64Service.jsAndFontsBundle$.value[1]}</style>
+                <style id="ra-wc-custom-font" type="text/css">${customFont}</style>
                 <script src="${this.b64Service.jsAndFontsBundle$.value[0]}" version="${environment.packageJson.singleFileBundleVersion}" timestamp="${environment.packageJson.singleFileBundleTimestamp}"></script>
               </head>
               <body>
@@ -260,16 +264,18 @@ Please host all assets on your server, include the font and package imports defi
     slots: ReadAlongSlots,
     readalong: Components.ReadAlong,
     from = "Studio",
-    cssText: string | null,
+    wcStylingService: WcStylingService,
   ) {
+    const cssText = wcStylingService.$wcStyleInput.getValue();
+    const customFont = wcStylingService.$wcStyleFonts.getValue();
     if (selectedOutputFormat == SupportedOutputs.html) {
       var element = document.createElement("a");
       const blob = await this.createSingleFileBlob(
         rasXML,
         readalong,
         slots,
         b64Audio,
-        cssText,
+        wcStylingService,
       );
       if (blob) {
         const basename = this.createRASBasename(slots.title);
@@ -300,7 +306,7 @@ Please host all assets on your server, include the font and package imports defi
         readalong,
         slots,
         b64Audio,
-        cssText,
+        wcStylingService,
       );
       const basename = this.createRASBasename(slots.title);
 
@@ -345,7 +351,7 @@ Please host all assets on your server, include the font and package imports defi
       const rasFile = new Blob([xmlString], { type: "application/xml" });
       let pathCss = "";
       if (cssText) {
-        const cssFile = new Blob([cssText], { type: "text/css" });
+        const cssFile = new Blob([customFont + cssText], { type: "text/css" });
         assetsFolder?.file(`${basename}.css`, cssFile);
         pathCss = ` css-url="assets/${basename}.css" `;
       }

packages/studio-web/src/app/shared/shared.module.ts

@@ -4,13 +4,10 @@ import { DownloadComponent } from "./download/download.component";
 import { BrowserModule } from "@angular/platform-browser";
 import { MaterialModule } from "../material.module";
 import { FormsModule } from "@angular/forms";
-import {
-  WcStylingComponent,
-  WCStylingHelper,
-} from "./wc-styling/wc-styling.component";
+import { WcStylingComponent } from "./wc-styling/wc-styling.component";
 @NgModule({
-  declarations: [DownloadComponent, WcStylingComponent], //WCStylingHelper],
+  declarations: [DownloadComponent, WcStylingComponent],
   imports: [BrowserModule, MaterialModule, FormsModule, CommonModule],
-  exports: [DownloadComponent, WcStylingComponent], // WCStylingHelper],
+  exports: [DownloadComponent, WcStylingComponent],
 })
 export class SharedModule {}