Merge pull request #30 from d-i-t-a/feature/read-aloud

Feature/read aloud
d-i-t-a · May 16, 2020 · f880fd6 · f880fd6
2 parents dab8e83 + 572a9ae
commit f880fd6
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 1 deletion.
diff --git a/src/index.ts b/src/index.ts
@@ -34,6 +34,23 @@ export async function unload() {
     AnnotationModuleInstance.stop()
     TTSModuleInstance.stop()
 }
+export function startReadAloud() {
+    if (IS_DEV) { console.log("startReadAloud") }
+    return R2Navigator.startReadAloud()    
+}
+export function stopReadAloud() {
+    if (IS_DEV) { console.log("stopReadAloud") }
+    return R2Navigator.stopReadAloud()    
+}
+export function pauseReadAloud() {
+    if (IS_DEV) { console.log("pauseReadAloud") }
+    return R2Navigator.pauseReadAloud()    
+}
+export function resumeReadAloud() {
+    if (IS_DEV) { console.log("resumeReadAloud") }
+    return R2Navigator.resumeReadAloud()    
+}
+
 
 export async function saveBookmark() {
     if (IS_DEV) { console.log("saveBookmark") }
@@ -217,6 +234,19 @@ exports.publisher = function (on) {
     publisher(on)
 }
 
+exports.startReadAloud = function () {
+    startReadAloud()
+}
+exports.stopReadAloud = function () {
+    stopReadAloud()
+}
+exports.pasueReadAloud = function () {
+    pauseReadAloud()
+}
+exports.resumeReadAloud = function () {
+    resumeReadAloud()
+}
+
 // - add bookmark
 // - delete bookmark
 exports.saveBookmark = function () {

diff --git a/src/modules/TTSModule.ts b/src/modules/TTSModule.ts
@@ -40,6 +40,24 @@ export default class TTSModule implements ReaderModule {
             self.annotationModule.highlighter.doneSpeaking()
         }    
     }
+    speakAll(selectionInfo: string | undefined , callback: () => void): any {        
+        console.log(selectionInfo)
+        var self = this
+        var utterance = new SpeechSynthesisUtterance(selectionInfo);
+        this.synth.cancel()
+        this.synth.speak(utterance);
+        utterance.onend = function () {      
+            console.log("utterance ended");
+            self.annotationModule.highlighter.doneSpeaking()
+        }    
+        callback()
+    }
+    speakPause() {
+        this.synth.pause()
+    }
+    speakResume() {
+        this.synth.resume()
+    }
 
     public static async create(config: TTSModuleConfig) {
         const annotations = new this(

diff --git a/src/modules/highlight/TextHighlighter.ts b/src/modules/highlight/TextHighlighter.ts
@@ -757,6 +757,43 @@ export default class TextHighlighter {
 
         }
     };
+    stopReadAloud() {
+        this.doneSpeaking()
+    }
+    speakAll() {
+        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);
+        }
+
+        var node = this.dom(this.el).getWindow().document.body;
+        console.log(self.delegate.delegate.iframe.contentDocument)
+        const selection = self.dom(self.el).getSelection();
+        const range = this.dom(this.el).getWindow().document.createRange();
+        range.selectNodeContents(node);
+        selection.removeAllRanges();
+        selection.addRange(range);
+        const selectionInfo = getCurrentSelectionInfo(this.dom(this.el).getWindow(), getCssSelector)
+
+        if (selectionInfo.cleanText) {
+            this.ttsDelegate.speakAll(selectionInfo.cleanText as any, () => {
+                var selection = self.dom(self.el).getSelection();
+                selection.removeAllRanges();
+                var toolbox = document.getElementById("highlight-toolbox");
+                toolbox.style.display = "none";
+                var backdrop = document.getElementById("toolbox-backdrop");
+                backdrop.style.display = "none";
+            })
+        }
+    };
 
     doneSpeaking() {
         var toolbox = document.getElementById("highlight-toolbox");

diff --git a/src/navigator/IFrameNavigator.ts b/src/navigator/IFrameNavigator.ts
@@ -1008,6 +1008,18 @@ export default class IFrameNavigator implements Navigator {
         event.preventDefault();
         event.stopPropagation();
     }
+    startReadAloud() {
+        this.annotationModule.highlighter.speakAll()
+    }
+    stopReadAloud() {
+        this.annotationModule.highlighter.stopReadAloud()
+    }
+    pauseReadAloud() {
+        this.ttsModule.speakPause()
+    }
+    resumeReadAloud() {
+        this.ttsModule.speakResume()
+    }
     totalResources(): number {
         return this.publication.readingOrder.length
     }

diff --git a/viewer/index_api.html b/viewer/index_api.html
@@ -32,8 +32,12 @@
         <div id="container-annotations"></div>
     </header>
 
-    <div style="position:fixed;top:0;left:0;z-index: 2;">
+    <div style="position:absolute;top:0;left:0;z-index: 2;">
 
+        <button onclick="javascript:D2Reader.startReadAloud()">read aloud from top</button><br>
+        <button onclick="javascript:D2Reader.stopReadAloud()">stop read aloud from top</button><br>
+        <button onclick="javascript:D2Reader.pauseReadAloud()">pause read aloud from top</button><br>
+        <button onclick="javascript:D2Reader.resumeReadAloud()">resume read aloud from top</button><br>
         <button onclick="javascript:alert(D2Reader.totalResources())">totalResources</button><br>
         <button onclick="javascript:alert(D2Reader.currentResource())">currentResource</button><br>
         <button onclick="javascript:alert(D2Reader.mostRecentNavigatedTocItem())">mostRecentNavigatedTocItem</button><br>