Merge pull request #23 from d-i-t-a/feature/tts

Feature/tts

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@d-i-t-a/reader",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "A viewer application for EPUB files.",
   "repository": "https://github.com/d-i-t-a/R2D2BC",
   "main": "src/index.js",

src/index.ts

@@ -14,11 +14,13 @@ import Publication from "./model/Publication";
 import BookmarkModule from "./modules/BookmarkModule";
 import { UserSettings } from "./model/user-settings/UserSettings";
 import AnnotationModule from "./modules/AnnotationModule";
+import TTSModule from "./modules/TTSModule";
 
 var R2Settings: UserSettings;
 var R2Navigator: IFrameNavigator;
 var BookmarkModuleInstance: BookmarkModule;
 var AnnotationModuleInstance: AnnotationModule;
+var TTSModuleInstance: TTSModule;
 
 export const IS_DEV = (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "dev");
 
@@ -30,6 +32,7 @@ export async function unload() {
     R2Settings.stop()
     BookmarkModuleInstance.stop()
     AnnotationModuleInstance.stop()
+    TTSModuleInstance.stop()
 }
 
 export async function saveBookmark() {
@@ -177,7 +180,10 @@ export async function load(config: ReaderConfig): Promise<any> {
             delegate: R2Navigator,
             initialAnnotations: config.annotations
         })
-    }
+        TTSModuleInstance = await TTSModule.create({
+            annotationModule: AnnotationModuleInstance
+        })
+    }    
 
     return new Promise(resolve => resolve(R2Navigator));
 }

src/modules/AnnotationModule.ts

@@ -47,7 +47,7 @@ export default class AnnotationModule implements ReaderModule {
     private highlightsView: HTMLDivElement;
 
     private headerMenu: HTMLElement;
-    private highlighter: TextHighlighter;
+    highlighter: TextHighlighter;
 
     private initialAnnotations: any;
 

src/modules/TTSModule.ts

@@ -0,0 +1,61 @@
+/*
+ * Project: R2D2BC - Web Reader
+ * Developers: Aferdita Muriqi
+ * Copyright (c) 2020. DITA. All rights reserved.
+ * Developed on behalf of: CAST (http://www.cast.org)
+ * Licensed to: Bokbasen AS and CAST under one or more contributor license agreements.
+ * Use of this source code is governed by a BSD-style license that can be found in the LICENSE file.
+ */
+
+import ReaderModule from "./ReaderModule";
+import AnnotationModule from "./AnnotationModule";
+import { IS_DEV } from "..";
+import { ISelectionInfo } from "../model/Locator";
+
+
+export interface TTSModuleConfig {
+    annotationModule: AnnotationModule;
+}
+
+export default class TTSModule implements ReaderModule {
+
+    annotationModule: AnnotationModule;
+    synth = window.speechSynthesis
+
+    initialize() {
+        this.annotationModule.highlighter.ttsDelegate = this
+    }
+
+    speak(selectionInfo: ISelectionInfo | undefined ): any {        
+        console.log(selectionInfo.cleanText)
+        var self = this
+        var utterance = new SpeechSynthesisUtterance(selectionInfo.cleanText);
+        this.synth.cancel()
+        this.synth.speak(utterance);
+        utterance.onend = function () {      
+            console.log("utterance ended");
+            self.annotationModule.highlighter.doneSpeaking()
+        }    
+    }
+
+    public static async create(config: TTSModuleConfig) {
+        const annotations = new this(
+            config.annotationModule,
+        );
+        await annotations.start();
+        return annotations;
+    }
+
+    public constructor(annotationModule: AnnotationModule) {
+        this.annotationModule = annotationModule
+    }
+
+    protected async start(): Promise<void> {
+        this.annotationModule.delegate.ttsModule = this
+    }
+
+    async stop() {
+        if (IS_DEV) { console.log("TTS module stop")}
+    }
+
+}

src/modules/highlight/TextHighlighter.ts

@@ -31,6 +31,7 @@ import AnnotationModule from "../AnnotationModule";
 import { Annotation, AnnotationMarker } from "../../model/Locator";
 import { IS_DEV } from "../..";
 import { icons } from "../../utils/IconLib";
+import TTSModule from "../TTSModule";
 
 
 export const ID_HIGHLIGHTS_CONTAINER = "R2_ID_HIGHLIGHTS_CONTAINER";
@@ -85,6 +86,7 @@ export default class TextHighlighter {
     el: HTMLElement;
     options: any;
     delegate:AnnotationModule;
+    ttsDelegate:TTSModule;
     lastSelectedHighlight:number = undefined;
 
     public constructor(delegate: AnnotationModule, element: HTMLElement, options: any) {
@@ -625,6 +627,7 @@ export default class TextHighlighter {
                 self.toolboxMode('add');
                 var highlightIcon = document.getElementById("highlightIcon");
                 var underlineIcon = document.getElementById("underlineIcon");
+                var speakIcon = document.getElementById("speakIcon");
                 var colorIcon = document.getElementById("colorIcon");
 
                 highlightIcon.style.display = "unset";
@@ -640,6 +643,8 @@ export default class TextHighlighter {
                 var colorIconSymbol = colorIcon.lastChild as HTMLElement;
                 colorIconSymbol.style.backgroundColor = this.getColor();
 
+                (speakIcon.getElementsByTagName("span")[0] as HTMLSpanElement).innerHTML = icons.speak;
+
                 // speaker_notes
                 // add_comment
                 // file_copy
@@ -663,6 +668,13 @@ export default class TextHighlighter {
                 }
                 underlineIcon.addEventListener("click", commentEvent);
 
+                function speakEvent(){
+                    // self.doHighlight(false, AnnotationMarker.Underline);
+                    speakIcon.removeEventListener("click", speakEvent);
+                    self.speak();
+                }
+                speakIcon.addEventListener("click", speakEvent);
+
                 var backdropButton = document.getElementById("toolbox-backdrop");
 
                 function backdropEvent(){
@@ -720,6 +732,40 @@ export default class TextHighlighter {
         }
     };
 
+    speak() {
+        var self = this
+        function getCssSelector(element: Element): string {
+            const options = {
+                className: (str: string) => {
+                    return _blacklistIdClassForCssSelectors.indexOf(str) < 0;
+                },
+                idName: (str: string) => {
+                    return _blacklistIdClassForCssSelectors.indexOf(str) < 0;
+                },
+            };
+            return uniqueCssSelector(element, self.dom(self.el).getDocument(), options);
+        }
+
+        const selectionInfo = getCurrentSelectionInfo(this.dom(this.el).getWindow(), getCssSelector)
+        if (selectionInfo) {
+            // if (this.options.onBeforeHighlight(selectionInfo) === true) {
+            //     var highlight = this.createHighlight(self.dom(self.el).getWindow(), selectionInfo,  TextHighlighter.hexToColor(this.getColor()),true, marker)
+            //     this.options.onAfterHighlight(highlight, marker);
+            // }
+            this.ttsDelegate.speak(selectionInfo as any);
+
+        }
+    };
+
+    doneSpeaking() {
+        var toolbox = document.getElementById("highlight-toolbox");
+        var backdrop = document.getElementById("toolbox-backdrop");
+
+        toolbox.style.display = "none";
+        backdrop.style.display = "none";
+        this.dom(this.el).removeAllRanges();
+    }
+
     /**
      * Normalizes highlights. Ensures that highlighting is done with use of the smallest possible number of
      * wrapping HTML elements.

src/navigator/IFrameNavigator.ts

@@ -22,6 +22,7 @@ import { UserSettingsUIConfig, UserSettings } from "../model/user-settings/UserS
 import BookmarkModule from "../modules/BookmarkModule";
 import { IS_DEV } from "..";
 import AnnotationModule from "../modules/AnnotationModule";
+import TTSModule from "../modules/TTSModule";
 
 export interface UpLinkConfig {
     url?: URL;
@@ -88,6 +89,7 @@ export default class IFrameNavigator implements Navigator {
 
     bookmarkModule?: BookmarkModule;
     annotationModule?: AnnotationModule;
+    ttsModule?: TTSModule;
 
     sideNavExanded: boolean = false
     material: boolean = false
@@ -834,7 +836,12 @@ export default class IFrameNavigator implements Navigator {
                 if (this.annotationModule !== undefined) {
                     this.annotationModule.initialize()
                 }
-
+                setTimeout(() => {
+                    if (this.ttsModule !== undefined) {
+                        this.ttsModule.initialize()
+                    }
+                }, 200);
+
             }, 100);
 
             return new Promise<void>(resolve => resolve());
@@ -1012,9 +1019,28 @@ export default class IFrameNavigator implements Navigator {
         this.handleNextChapterClick(null)
     }
     goTo(locator: Locator): any {
+        let locations: Locations = {
+            progression: 0
+        }
+        if (locator.href.indexOf("#") !== -1) {
+            const elementId = locator.href.slice(locator.href.indexOf("#") + 1);
+            if (elementId !== null) {
+                locations = {
+                    fragment: elementId
+                }
+            }
+        }
+        const position: Locator = {
+            href: locator.href,
+            locations: locations,
+            type: locator.type,
+            title: locator.title
+        };
         const linkHref = this.publication.getAbsoluteHref(locator.href);
-        locator.href = linkHref
-        this.navigate(locator);
+        console.log(locator.href)
+        console.log(linkHref)
+        position.href = linkHref
+        this.navigate(position);
     }
 
     private handlePreviousPageClick(event: MouseEvent | TouchEvent | KeyboardEvent): void {

src/utils/IconLib.ts

@@ -30,6 +30,7 @@ export const icons = {
   "delete" : iconTemplate(`delete-icon`, `Delete`, `<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>`, `icon open`),
   "close" : iconTemplate(`close-icon`, `Close`, `<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>`, `icon open`),
   "text" : iconTemplate(`text-icon`, `Text`, `<path d="M5 4v3h5.5v12h3V7H19V4z"/>`, `icon open`),
+  "speak" : iconTemplate(`speak-icon`, `Speak`, `<circle cx="9" cy="9" r="4"/><path d="M9 15c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4zm7.76-9.64l-1.68 1.69c.84 1.18.84 2.71 0 3.89l1.68 1.69c2.02-2.02 2.02-5.07 0-7.27zM20.07 2l-1.63 1.63c2.77 3.02 2.77 7.56 0 10.74L20.07 16c3.9-3.89 3.91-9.95 0-14z"/><path d="M0 0h24v24H0z" fill="none"/>`, `icon open`),
   "note": iconTemplate(`note-icon`, `Note`,`<polygon points="17.71 24.66 22.3 20.07 17.71 20.07 17.71 24.66" fill="none"/><path d="M22.42.07H5.58A3.28,3.28,0,0,0,2.29,3.35V24.79a3.28,3.28,0,0,0,3.29,3.28H16.71a1,1,0,0,0,.71-.29l8-8a1,1,0,0,0,.29-.71V3.35A3.28,3.28,0,0,0,22.42.07Zm-8.17,15h-7v-2h7Zm-7-6v-2h13v2ZM16.5,25.86v-6a1,1,0,0,1,1-1h6Z" />`, `icon open`),
   "highlight": iconTemplate(`highlight-icon`, `Highlight`,`<path d="M27.71,7.78,21.12,1.19a1,1,0,0,0-1.38,0L4.32,15A1,1,0,0,0,4,15.7a1,1,0,0,0,.3.73c1.22,1.22,1.2,2.37,0,3.62a1,1,0,0,0,0,1.41l3.2,3.2a1,1,0,0,0,1.41,0c1.28-1.28,2.36-1.29,3.62,0a1,1,0,0,0,1.45,0L27.74,9.16A1,1,0,0,0,27.71,7.78Z" /><path d="M3.09,22.59l-2.8,2.8a1,1,0,0,0-.21,1.09A1,1,0,0,0,1,27.1H4.6a1,1,0,0,0,.71-.29l1-1Z" />`, `icon open`)
 }

viewer/index_api.html

@@ -180,9 +180,10 @@
                     <button style="background-color: gainsboro;" id="dismissIcon"><i class="material-icons" style="color:gray">close</i></button>
                 </div>
                 <div id="highlight-toolbox-mode-add">
-                    <button style="display: unset;" id="colorIcon" class="color-option"><span></span></button><button
-                        style="background-color: gainsboro;" id="highlightIcon"><span style="background: yellow;display: inline-block;width: 24px;height: 24px;"></span></button><button
-                        style="background-color: gainsboro;" id="underlineIcon"><span style="display: inline-block;width: 24px;height: 24px;border-bottom: yellow solid 4px;"></span></button>
+                    <button style="display: unset;" id="colorIcon" class="color-option"><span></span></button>
+                    <button style="background-color: gainsboro;" id="highlightIcon"><span style="background: yellow;display: inline-block;width: 24px;height: 24px;"></span></button>
+                    <button style="background-color: gainsboro;" id="underlineIcon"><span style="display: inline-block;width: 24px;height: 24px;border-bottom: yellow solid 4px;"></span></button>
+                    <button style="background-color: gainsboro;" id="speakIcon"><span style="display: inline-block;width: 24px;height: 24px;"></span></button>
                 </div>
                 <div id="highlight-toolbox-mode-edit">
                     <button style="background-color: gainsboro;display: none" id="deleteIcon"><i class="material-icons"

viewer/index_material.html

@@ -227,9 +227,10 @@
                     <button style="background-color: gainsboro;" id="dismissIcon"><i class="material-icons" style="color:gray">close</i></button>
                 </div>
                 <div id="highlight-toolbox-mode-add">
-                    <button style="display: unset;" id="colorIcon" class="color-option"><span></span></button><button
-                        style="background-color: gainsboro;" id="highlightIcon"><span style="background: yellow;display: inline-block;width: 24px;height: 24px;"></span></button><button
-                        style="background-color: gainsboro;" id="underlineIcon"><span style="display: inline-block;width: 24px;height: 24px;border-bottom: yellow solid 4px;"></span></button>
+                    <button style="display: unset;" id="colorIcon" class="color-option"><span></span></button>
+                    <button style="background-color: gainsboro;" id="highlightIcon"><span style="background: yellow;display: inline-block;width: 24px;height: 24px;"></span></button>
+                    <button style="background-color: gainsboro;" id="underlineIcon"><span style="display: inline-block;width: 24px;height: 24px;border-bottom: yellow solid 4px;"></span></button>
+                    <button style="background-color: gainsboro;" id="speakIcon"><span style="display: inline-block;width: 24px;height: 24px;"></span></button>
                 </div>
                 <div id="highlight-toolbox-mode-edit">
                     <button style="background-color: gainsboro;display: none" id="deleteIcon"><i class="material-icons"