[UXP-126] add audio controls

Author: Andrea Barbasso

src/app/directives/text-select/text-selection-tooltip/text-selection-tooltip.component.html

@@ -1,4 +1,8 @@
 <div class="p-2 text-white">
-  <i (click)="textToSpeech($event)" class="button fa fa-volume-high"></i>
+  <div class="tts-controls">
+    <i *ngIf="!this.utterance" class="button fa fa-volume-high" (click)="textToSpeech()"></i>
+    <i *ngIf="this.utterance && !isPaused" class="button fa fa-pause" (click)="pauseTextToSpeech()"></i>
+    <i *ngIf="this.utterance && isPaused" class="button fa fa-play" (click)="resumeTextToSpeech()"></i>
+  </div>
 </div>
 <div class="pointer-down">&nbsp;</div>

src/app/directives/text-select/text-selection-tooltip/text-selection-tooltip.component.scss

@@ -18,3 +18,9 @@ div.pointer-down {
   width: 12px;
   height: 12px;
 }
+
+div.tts-controls {
+  width: 20px;
+  display: flex;
+  justify-content: center;
+}

src/app/directives/text-select/text-selection-tooltip/text-selection-tooltip.component.ts

@@ -1,10 +1,23 @@
-import { ChangeDetectionStrategy, Component, HostBinding, HostListener, Input, OnDestroy, OnInit } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  HostBinding,
+  HostListener,
+  Input,
+  OnDestroy,
+  OnInit
+} from '@angular/core';
+import { NgIf } from '@angular/common';
 
 @Component({
   selector: 'ds-text-selection-tooltip',
   templateUrl: './text-selection-tooltip.component.html',
   styleUrls: ['./text-selection-tooltip.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    NgIf
+  ],
   standalone: true
 })
 export class TextSelectionTooltipComponent implements OnInit, OnDestroy {
@@ -37,6 +50,11 @@ export class TextSelectionTooltipComponent implements OnInit, OnDestroy {
   bottom: number;
 
   utterance: SpeechSynthesisUtterance;
+  isPaused = false;
+
+  constructor(private changeDetectorRef: ChangeDetectorRef) {
+
+  }
 
   ngOnInit(): void {
     this.top = this.rectangleTop - 6;
@@ -49,17 +67,31 @@ export class TextSelectionTooltipComponent implements OnInit, OnDestroy {
     event.preventDefault();
   }
 
-  public textToSpeech(event: MouseEvent): void {
+  public textToSpeech(): void {
     if (this.utterance) {
       speechSynthesis.cancel();
     }
     this.utterance = new SpeechSynthesisUtterance(this.text);
+    this.utterance.onend = () => {
+      this.utterance = null;
+      this.changeDetectorRef.detectChanges();
+    };
     speechSynthesis.speak(this.utterance);
   }
 
-  public ngOnDestroy(): void {
+  ngOnDestroy(): void {
     if (this.utterance) {
       speechSynthesis.cancel();
     }
   }
+
+  pauseTextToSpeech() {
+    speechSynthesis.pause();
+    this.isPaused = true;
+  }
+
+  resumeTextToSpeech() {
+    speechSynthesis.resume();
+    this.isPaused = false;
+  }
 }