feat: added UI for embedding custom CSS and font to a read-along

Merge pull request #391 from ReadAlongs/dev.del/feat-studio-add-css

Author: deltork

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

@@ -20,6 +20,7 @@ import { PrivacyDialog } from "./app.component";
 import { ErrorPageComponent } from "./error-page/error-page.component";
 import { EditorComponent } from "./editor/editor.component";
 import { SharedModule } from "./shared/shared.module";
+import { WcStylingComponent } from "./shared/wc-styling/wc-styling.component";
 
 defineCustomElements();
 
@@ -34,6 +35,7 @@ defineCustomElements();
     ErrorPageComponent,
     EditorComponent,
     // ShepherdComponent
+    WcStylingComponent,
   ],
   imports: [
     BrowserModule,

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

@@ -38,7 +38,7 @@
             [(ngModel)]="studioService.slots.title"
             [ngStyle]="{
               'width.ch': studioService.slots.title.length,
-              'min-width.ch': 20
+              'min-width.ch': 20,
             }"
             style="border: none"
             placeholder="Enter your title here"
@@ -50,7 +50,7 @@
             [(ngModel)]="studioService.slots.subtitle"
             [ngStyle]="{
               'width.ch': studioService.slots.subtitle.length,
-              'min-width.ch': 20
+              'min-width.ch': 20,
             }"
             style="border: none"
             placeholder="Enter your subtitle here"
@@ -60,6 +60,5 @@
         </read-along>
       </div>
     </div>
-    <div class="row"></div>
   </div>
 </section>

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

@@ -8,7 +8,7 @@ import { StudioService } from "../studio/studio.service";
 import { DownloadService } from "../shared/download/download.service";
 import { SupportedOutputs } from "../ras.service";
 import { ToastrService } from "ngx-toastr";
-
+import { WcStylingService } from "../shared/wc-styling/wc-styling.service";
 @Component({
   selector: "app-demo",
   templateUrl: "./demo.component.html",
@@ -24,13 +24,20 @@ export class DemoComponent implements OnDestroy, OnInit {
     public studioService: StudioService,
     private downloadService: DownloadService,
     private toastr: ToastrService,
+    private wcStylingService: WcStylingService,
   ) {
     // If we do more languages, this should be a lookup table
     if ($localize.locale == "fr") {
       this.language = "fra";
     } else if ($localize.locale == "es") {
       this.language = "spa";
     }
+    this.wcStylingService.$wcStyleInput.subscribe((css) =>
+      this.updateWCStyle(css),
+    );
+    this.wcStylingService.$wcStyleFonts.subscribe((font) =>
+      this.addWCCustomFont(font),
+    );
   }
 
   ngOnInit(): void {}
@@ -47,6 +54,8 @@ export class DemoComponent implements OnDestroy, OnInit {
         this.studioService.b64Inputs$.value[1],
         this.studioService.slots,
         this.readalong,
+        "Studio",
+        this.wcStylingService,
       );
     } else {
       this.toastr.error($localize`Download failed.`, $localize`Sorry!`, {
@@ -72,4 +81,12 @@ export class DemoComponent implements OnDestroy, OnInit {
       );
     }
   }
+  async updateWCStyle($event: string) {
+    this.readalong?.setCss(
+      `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.html

@@ -53,13 +53,36 @@ <h2 i18n="Title for upload box" class="title">
       </div>
     </div>
   </div>
-  <div class="container">
-    <div class="row justify-content-center">
-      <div class="col">
-        <div id="readalongContainer" #readalongContainer></div>
-      </div>
+  <!--div class="fluid-container">
+  <div class="row flex-nowrap">
+    <div class="col col-lg-7">
+
+    </div>
+    <div class="col-12 bg-fade  col-lg-5 pt-lg-5 d-lg-flex flex-row" *ngIf="rasFileIsLoaded">
+
+
+    </div>
+  </div></div-->
+  <div
+    class="d-flex justify-content-center flex-column flex-xl-row flex-xl-nowrap bg-light mt-3 full-height"
+  >
+    <div id="readalongContainer" #readalongContainer></div>
+    <div
+      [class.d-none]="!rasFileIsLoaded"
+      [class.d-lg-flex]="rasFileIsLoaded"
+      class="flex-row"
+    >
+      <div
+        class="m-0 p-0 handle me-xl-2 d-none d-xl-block"
+        #handle
+        draggable="true"
+        id="handle"
+      ></div>
+      <app-wc-styling #styleWindow id="styleWindow"></app-wc-styling>
     </div>
+  </div>
 
+  <div class="container">
     <div class="row justify-content-center mt-5 mb-5">
       <div class="col" id="audioToolbar">
         <mat-toolbar *ngIf="editorService.audioControl$.valid">

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

@@ -6,3 +6,36 @@
 
 .row
   --bs-gutter-x: 0
+
+#readalongContainer
+  margin: 0 auto
+
+#styleWindow
+  justify-content: start
+  margin: 0 auto
+
+@media screen and (min-width:1200px) and (max-width:1500px)
+  .full-height
+    max-height: 95vmin
+
+@media screen and (min-width:1200px)
+  div > #handle
+    position: relative
+    width: 13px
+    height: 100%
+    background-color: rgba(0,0,0,0.7)
+    border: 3px solid #eee
+    border-width: 0 5px
+    margin-right: 1em
+    margin-top: 1em
+    cursor: col-resize
+    z-index: 10
+    display: block
+  #styleWindow
+    margin: 0
+    max-height: 95vh
+    overflow-y: auto
+
+  app-wc-styling:has(#style-section.collapsed)
+    width: 100px
+    overflow: hidden !important

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

@@ -1,6 +1,6 @@
 import WaveSurfer from "wavesurfer.js";
 
-import { takeUntil, Subject, take } from "rxjs";
+import { takeUntil, Subject, take, fromEvent, debounceTime } from "rxjs";
 import {
   AfterViewInit,
   Component,
@@ -31,6 +31,8 @@ import { DownloadService } from "../shared/download/download.service";
 import { SupportedOutputs } from "../ras.service";
 import { ToastrService } from "ngx-toastr";
 import { validateFileType } from "../utils/utils";
+import { WcStylingService } from "../shared/wc-styling/wc-styling.service";
+import { WcStylingComponent } from "../shared/wc-styling/wc-styling.component";
 @Component({
   selector: "app-editor",
   templateUrl: "./editor.component.html",
@@ -41,7 +43,8 @@ export class EditorComponent implements OnDestroy, OnInit, AfterViewInit {
   @ViewChild("wavesurferContainer") wavesurferContainer!: ElementRef;
   wavesurfer: WaveSurfer;
   @ViewChild("readalongContainer") readalongContainerElement: ElementRef;
-
+  @ViewChild("handle") handleElement!: ElementRef;
+  @ViewChild("styleWindow") styleElement!: WcStylingComponent;
   readalong: Components.ReadAlong;
 
   language: "eng" | "fra" | "spa" = "eng";
@@ -51,14 +54,31 @@ export class EditorComponent implements OnDestroy, OnInit, AfterViewInit {
   htmlUploadAccepts = ".html";
 
   unsubscribe$ = new Subject<void>();
+  rasFileIsLoaded = false;
   constructor(
     public b64Service: B64Service,
     private fileService: FileService,
     public shepherdService: ShepherdService,
     public editorService: EditorService,
     private toastr: ToastrService,
     private downloadService: DownloadService,
-  ) {}
+    private wcStylingService: WcStylingService,
+  ) {
+    this.wcStylingService.$wcStyleInput.subscribe((css) =>
+      this.updateWCStyle(css),
+    );
+    this.wcStylingService.$wcStyleFonts.subscribe((font) =>
+      this.addWCCustomFont(font),
+    );
+    fromEvent(window, "resize")
+      .pipe(debounceTime(100), takeUntil(this.unsubscribe$)) // wait for 1 second after the last resize event
+      .subscribe(() => {
+        // When the window is resized, we want to reset the style window size
+        // so that it does not get squeezed too small
+        console.log("[DEBUG] window resized");
+        this.resetStyleWindowSize();
+      });
+  }
 
   async ngAfterViewInit(): Promise<void> {
     this.wavesurfer = WaveSurfer.create({
@@ -121,6 +141,40 @@ export class EditorComponent implements OnDestroy, OnInit, AfterViewInit {
     if (window.location.hash.endsWith("startTour=yes")) {
       this.startTour();
     }
+    if (this.handleElement) {
+      fromEvent(this.handleElement.nativeElement, "dragend")
+        .pipe(takeUntil(this.unsubscribe$))
+        .subscribe((event) => {
+          const ev = event as DragEvent;
+          console.log("[DEBUG] dragged");
+          if (this.styleElement.collapsed$.getValue()) {
+            this.resetStyleWindowSize();
+            return;
+          }
+          if (ev.x < 600) {
+            return;
+          } // do not let the read along be squeezed past 600px width
+          if (window.innerWidth - ev.x < 400) return; // do not let the style window be squeezed past 600px width)
+          // When the handle is dragged, we want to resize the readalong and style containers
+          const styleEle = this.styleElement?.styleSection
+            .nativeElement as HTMLElement;
+          const readAlong = this.readalongContainerElement
+            ?.nativeElement as HTMLElement;
+          if (styleEle?.style) {
+            styleEle.style.width = `calc(100vw - ${ev.x + 50}px)`;
+          }
+
+          if (readAlong?.style) {
+            readAlong.style.width = `${ev.x}px`;
+          }
+        });
+    } else {
+      this.resetStyleWindowSize();
+    }
+    this.styleElement.collapsed$.subscribe((collapsed) => {
+      // When the style element is collapsed, we want to reset the style window size
+      this.resetStyleWindowSize();
+    });
   }
 
   ngOnInit(): void {}
@@ -138,8 +192,10 @@ export class EditorComponent implements OnDestroy, OnInit, AfterViewInit {
           this.readalong,
           this.editorService.slots,
           this.editorService.audioB64Control$.value,
+          this.wcStylingService,
         );
     }
+    this.rasFileIsLoaded = false;
   }
 
   download(download_type: SupportedOutputs) {
@@ -154,6 +210,7 @@ export class EditorComponent implements OnDestroy, OnInit, AfterViewInit {
         this.editorService.slots,
         this.readalong,
         "Editor", //from
+        this.wcStylingService,
       );
     } else {
       this.toastr.error($localize`Download failed.`, $localize`Sorry!`, {
@@ -216,10 +273,14 @@ export class EditorComponent implements OnDestroy, OnInit, AfterViewInit {
   }
 
   async loadRasFile(file: File | Blob) {
+    //reset css
+    this.wcStylingService.$wcStyleInput.next("");
+    this.wcStylingService.$wcStyleFonts.next("");
     const text = await file.text();
     const readalong = await this.parseReadalong(text);
     this.loadAudioIntoWavesurferElement();
     this.renderReadalong(readalong);
+    this.rasFileIsLoaded = true;
   }
 
   async renderReadalong(readalongBody: string | undefined) {
@@ -259,6 +320,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
@@ -359,6 +426,34 @@ export class EditorComponent implements OnDestroy, OnInit, AfterViewInit {
       this.createSegments(this.editorService.rasControl$.value);
     }
 
+    // stylesheet linked
+
+    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);
+          });
+        }
+      }
+    } 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;
   }
 
@@ -460,4 +555,28 @@ export class EditorComponent implements OnDestroy, OnInit, AfterViewInit {
     ]);
     this.shepherdService.start();
   }
+  async updateWCStyle($event: string) {
+    this.readalong?.setCss(
+      `data:text/css;base64,${this.b64Service.utf8_to_b64($event ?? "")}`,
+    );
+  }
+  async addWCCustomFont($font: string) {
+    this.readalong?.addCustomFont($font);
+  }
+  resetStyleWindowSize() {
+    const styleEle = this.styleElement?.styleSection
+      .nativeElement as HTMLElement;
+    const readAlong = this.readalongContainerElement
+      ?.nativeElement as HTMLElement;
+
+    if (window.innerWidth > 1199) {
+      styleEle.style.width = this.styleElement.collapsed$.value
+        ? `65vh`
+        : "calc(30vw - 50px)";
+      readAlong.style.width = `70vw`;
+    } else {
+      styleEle.style.width = `95vw`;
+      readAlong.style.width = `95vw`;
+    }
+  }
 }