Moving speech to text to a service, adding rxjs

.eslintrc.js

@@ -9,7 +9,8 @@ module.exports = {
     "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
     "comma-dangle": ["error", "never"],
     "linebreak-style": ["off"],
-    indent: ["error", 4]
+    "indent": ["error", 4],
+    "import/no-extraneous-dependencies": ["off"]
   },
   parserOptions: {
     parser: "babel-eslint"

package.json

@@ -15,8 +15,8 @@
     "build:orig": "vue-cli-service build --target lib --name myLib src/lib/CustomButton.vue"
   },
   "dependencies": {
+    "rxjs": "^6.3.3",
     "vue": "^2.5.17",
-    "vue-tour": "^1.1.0",
     "vue-voice": "file:///C:\\github\\vue-voice\\vue-voice-0.1.1-beta.tgz"
   },
   "devDependencies": {

src/App.vue

@@ -1,7 +1,8 @@
 <template>
   <div id="app">
     <img alt="Vue logo" src="./assets/logo.png">
-    <SpeechToText />
+    <SpeechToText @speech="onSpeechReceived($event)"/>
+    Parent: {{ speech }}
   </div>
 </template>
 
@@ -10,16 +11,26 @@
 import SpeechToText from './lib/components/SpeechToText.vue';
 
 export default {
-  name: 'app',
-  components: {
-    SpeechToText
-  }
+    name: 'app',
+    components: {
+        SpeechToText
+    },
+    data() {
+        return {
+            speech: ''
+        };
+    },
+    methods: {
+        onSpeechReceived(speech) {
+            this.speech = speech;
+        }
+    }
 };
 </script>
 
 <style>
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;

src/lib/components/SpeechToText.vue

@@ -1,65 +1,37 @@
 <template>
     <div>
-        <div @click="onClick()" class="speech-to-text__button-container">
+        <div @click="onClick()" speech="" class="speech-to-text__button-container">
             <img src="../../assets/mic.svg">
         </div>
         <div>{{ speech }}</div>
     </div>
 </template>
 
 <script>
-/* eslint-disable no-use-before-define */
-/* eslint-disable no-undef */
-const SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
-const SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList;
-const SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent;
+import SpeechToText from '../services/speech-to-text';
 
 export default {
     name: 'SpeechToText',
     data() {
         return {
             speech: '',
-            recognition: {}
+            speechService: {}
         };
     },
     methods: {
         onClick() {
-            this.recognition.start();
-            console.log('Recognition started');
+            this.speechService.speak().subscribe((result) => {
+                this.speech = result;
+                this.$emit('speech', this.speech);
+            });
+            console.log('speechService started');
         }
     },
     props: {
         msg: String
     },
     created() {
-        this.speech = 'created';
-        this.recognition = new SpeechRecognition();
-
-        this.recognition.lang = 'it-IT';
-        this.recognition.interimResults = false;
-        this.recognition.maxAlternatives = 1;
-
-        this.recognition.onresult = (event) => {
-            console.log('Event', event);
-
-            const last = event.results.length - 1;
-            this.speech = event.results[last][0].transcript;
-
-            console.log(`Confidence: ${event.results[0][0].confidence}`, this.speech);
-        };
-
-        this.recognition.onspeechend = () => {
-            this.recognition.stop();
-            console.log('Speech end');
-        };
-
-        this.recognition.onnomatch = () => {
-            console.log("I didn't recognise that color.");
-        };
-
-        this.recognition.onerror = (event) => {
-            console.log(`Error occurred in recognition: ${event.error}`);
-        };
+        this.speechService = new SpeechToText();
     }
 };
 </script>

src/lib/services/speech-to-text.js

@@ -1,10 +1,50 @@
+/* eslint-disable no-use-before-define */
+/* eslint-disable no-undef */
+import { Subject } from 'rxjs';
 
+const SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
 
-var colors = [ 'aqua' , 'azure' , 'beige', 'bisque', 'black', 'blue', 'brown', 'chocolate', 'coral', 'crimson', 'cyan', 'fuchsia', 'ghostwhite', 'gold', 'goldenrod', 'gray', 'green', 'indigo', 'ivory', 'khaki', 'lavender', 'lime', 'linen', 'magenta', 'maroon', 'moccasin', 'navy', 'olive', 'orange', 'orchid', 'peru', 'pink', 'plum', 'purple', 'red', 'salmon', 'sienna', 'silver', 'snow', 'tan', 'teal', 'thistle', 'tomato', 'turquoise', 'violet', 'white', 'yellow'];
-var grammar = '#JSGF V1.0; grammar colors; public <color> = ' + colors.join(' | ') + ' ;'
+export default class SpeechToText {
+  recognition;
 
+  result;
 
+  resultSubject = new Subject();
 
-var bg = document.querySelector('html');
+  constructor() {
+      this.recognition = new SpeechRecognition();
+      this.result = 'created';
 
+      this.recognition.lang = 'it-IT';
+      this.recognition.interimResults = false;
+      this.recognition.maxAlternatives = 1;
 
+      this.recognition.onresult = (event) => {
+          console.log('Event', event);
+
+          const last = event.results.length - 1;
+          this.result = event.results[last][0].transcript;
+
+          console.log(`Confidence: ${event.results[0][0].confidence}`, this.result);
+          this.resultSubject.next(this.result);
+      };
+
+      this.recognition.onspeechend = () => {
+          this.recognition.stop();
+          console.log('Speech end');
+      };
+
+      this.recognition.onnomatch = () => {
+          console.log("I didn't recognise that colors.");
+      };
+
+      this.recognition.onerror = (event) => {
+          console.log(`Error occurred in recognition: ${event.error}`);
+      };
+  }
+
+  speak() {
+      this.recognition.start();
+      return this.resultSubject;
+  }
+}