Testing use of Quill Editor for synthesis/highlighting

phonlab-tcd · Aug 1, 2024 · 3e088a8 · 3e088a8
1 parent 7fc485c
commit 3e088a8
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 13 deletions.
diff --git a/ngapp/src/app/core/services/synthesis.service.ts b/ngapp/src/app/core/services/synthesis.service.ts
@@ -11,6 +11,7 @@ import { SynthesisCacheService } from "app/core/services/synthesis-cache.service
 // variable defining the different options for API calls
 const ApiOptions = {
   base_url: "https://www.abair.ie/api2/synthesise",
+  //base_url: "https://api.abair.ie/v3/synthesis", // updated synthesis url - does not work with timings
   audioEncoding: ["MP3", "LINEAR16", "OGG_OPUS", "wav"],
   outputType: ["JSON", "HTML", "JSON_WITH_TIMING"],
   voiceCode: [
@@ -129,6 +130,7 @@ export class SynthesisService {
 
     // Otherwise send text to api
     return this.http.post<any>("https://abair.ie/api2/synthesise", reqBody, httpOptions)
+    //return this.http.post<any>(ApiOptions.base_url, reqBody, httpOptions)
       .pipe(
         // construct returned api audio url with given encoding preferences
         map((data: { audioContent: string, timing: {word: string, end: number, originalWord: string}[] }) => {

diff --git a/ngapp/src/app/dr-story-viewer/dr-story-builder/dr-story-builder.component.html b/ngapp/src/app/dr-story-viewer/dr-story-builder/dr-story-builder.component.html
@@ -1,9 +1,22 @@
 
-<div class="container">
+<!--<div class="container">
     <div class="storyContainer"
     [innerHTML]="forceTrustedHTML"> 
     </div>
-</div>
+</div>-->
+
+<div class="ql-container" #quillHeightSpan>
+    <!-- STORY DRAWER BUTTON-->
+    <!-- QUILL EDITOR AND TOOLBAR-->
+     <!--[(ngModel)]="forceTrustedHTML"-->
+    <quill-editor
+      placeholder=""
+      [preserveWhitespace]="true"
+      [debounceTime]="1500"
+      [(ngModel)]="content.innerHTML"
+    ></quill-editor>
+    <!--[(ngModel)]="forceTrustedHTML"-->
+  </div>
 
 <!--<span style="max-width: 500px;">
     <ng-container

diff --git a/ngapp/src/app/dr-story-viewer/dr-story-builder/dr-story-builder.component.ts b/ngapp/src/app/dr-story-viewer/dr-story-builder/dr-story-builder.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild, ElementRef, Input, HostListener } from "@angular/core";
+import { Component, OnInit, ViewChild, ElementRef, Input, HostListener, importProvidersFrom } from "@angular/core";
 import { SynthItem } from "app/core/models/synth-item";
 import { SynthesisService, Voice } from "app/core/services/synthesis.service";
 import { TranslationService } from "app/core/services/translation.service";
@@ -24,11 +24,16 @@ import { EventType } from "app/core/models/event";*/
 //import { constructHTML } from '@phonlab-tcd/json2html';
 import { ViewEncapsulation } from '@angular/core';
 import { DigitalReaderStoryService } from "app/core/services/dr-story.service";
-import { firstValueFrom } from "rxjs";
+import { firstValueFrom, Observable } from "rxjs";
+import { QuillModule } from "ngx-quill";
 
 @Component({
   standalone: true,
-  imports: [CommonModule],
+  //providers: [importProvidersFrom(QuillModule.forRoot())],
+  imports: [
+    CommonModule,
+    QuillModule
+  ],
   selector: "app-dr-story-builder",
   templateUrl: "./dr-story-builder.component.html",
   styleUrls: ["./dr-story-builder.component.scss"], // Digital Reader Story Styling
@@ -45,7 +50,6 @@ export class DigitalReaderStoryBuilderComponent implements OnInit {
   @Input() tags:string
 
   public forceTrustedHTML:SafeHtml;
-  private wasInside = false;
 
   constructor(
 
@@ -61,16 +65,61 @@ export class DigitalReaderStoryBuilderComponent implements OnInit {
   }
 
   async ngOnInit() {
+
+    //this.audioCreationTest()
+    /*console.log(this.content.textContent)
+    const audioObservable = firstValueFrom(this.synth.synthesiseText(
+      this.content.textContent,
+      { name: "Sibéal", gender: "female", shortCode: "snc", code: "ga_CO_snc_nemo", dialect: "connacht", algorithm: "nemo", },
+      false,
+      'MP3',
+      1)
+    ).then( (data) => {
+      console.log(data)
+    })*/
+
     this.forceTrustedHTML = this.sanitizer.bypassSecurityTrustHtml(this.content.innerHTML)
   }
 
+  // TODO : relocate to the story creation page
+  synthRequest(text: string) {
+    const audioObservable = firstValueFrom(this.synth.synthesiseText(
+      text,
+      { name: "Sibéal", gender: "female", shortCode: "snc", code: "ga_CO_snc_nemo", dialect: "connacht", algorithm: "nemo", },
+      false,
+      'MP3',
+      1)
+    ).then( (data) => {
+      console.log(data)
+      return data
+    })
+    console.log('request sent')
+  }
+
+  // TODO : relocate to the story creation page
+  audioCreationTest() {
+    let synthesisableSegments = this.content.querySelectorAll('.sentence')
+
+    let tmp = Array.from(synthesisableSegments)
+
+    const listOfAudios:any[] = []
+
+    let i = 0;
+    for (let j=20;j<tmp.length;j+=20) {
+      for (let k=i;k<j;k++) {
+        const seg = tmp[k].textContent
+
+        listOfAudios.push(this.synthRequest(seg))
+      }
+      i = j
+    }
+    for (let k=i;k<tmp.length;k++) {
+      const seg = tmp[k].textContent
+
+      listOfAudios.push(this.synthRequest(seg))
+    }
+  }
 
-  /*@HostListener('click')
-  clickInside() {
-    //this.text = "clicked inside";
-    console.log('inside')
-    this.wasInside = true;
-  }*/
   checkForSegmentParent(node:Element) {
     if (node.classList.contains('sentence') || node.classList.contains('word'))
       return node;
@@ -83,7 +132,8 @@ export class DigitalReaderStoryBuilderComponent implements OnInit {
     return null;
   }
 
-  @HostListener('document:click', ['$event.target'])
+  //@HostListener('document:click', ['$event.target'])
+  @HostListener('click', ['$event.target'])
   async checkSegmentClicked(targetElem:Element) {
     //console.log(event)
     const segment = this.checkForSegmentParent(targetElem)