stop synth on complete

MooseSaeed · Apr 11, 2022 · bdcb480 · bdcb480
1 parent 38612f4
commit bdcb480
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 2 deletions.
diff --git a/public/css/app.css b/public/css/app.css
@@ -1453,6 +1453,8 @@ Ensure the default browser behavior of the `hidden` attribute.
 .devto :is(:where(p):not(:where([class~="not-prose"] *))) {
   margin: 0.25rem;
   margin-bottom: 0.375rem;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }

diff --git a/public/js/app.js b/public/js/app.js
@@ -18624,6 +18624,8 @@ __webpack_require__.r(__webpack_exports__);
     this.synth.onvoiceschanged = function () {
       _this.voiceList = _this.synth.getVoices();
     };
+
+    this.listenForSpeechEvents();
   },
   watch: {
     markdown: function markdown(newInput) {
@@ -18636,8 +18638,20 @@ __webpack_require__.r(__webpack_exports__);
     }
   },
   methods: {
+    listenForSpeechEvents: function listenForSpeechEvents() {
+      var _this2 = this;
+
+      this.responseInSpeech.onstart = function () {
+        _this2.isReading = true;
+      };
+
+      this.responseInSpeech.onend = function () {
+        _this2.isReading = false;
+      };
+    },
     speechSynth: function speechSynth() {
-      this.response = this.md(this.markdown);
+      var customeResponse = this.markdown.replace(/[&\/\\#+()$~%'":*?<>{}]/g, "");
+      this.response = customeResponse;
       this.responseInSpeech.text = "".concat(this.response);
       this.responseInSpeech.voice = this.voiceList[this.selectedVoice];
       this.synth.speak(this.responseInSpeech);

diff --git a/resources/css/app.css b/resources/css/app.css
@@ -20,6 +20,7 @@
     prose-p:m-1
     prose-p:mb-1.5
     prose-p:text-white
+    prose-p:text-lg
     prose-devtoStyle
     prose-li:text-white
     prose-li:m-0

diff --git a/resources/js/components/main/Wordleiteditor.vue b/resources/js/components/main/Wordleiteditor.vue
@@ -158,6 +158,7 @@ export default {
         this.synth.onvoiceschanged = () => {
             this.voiceList = this.synth.getVoices();
         };
+        this.listenForSpeechEvents();
     },
     watch: {
         markdown(newInput) {
@@ -170,8 +171,21 @@ export default {
         },
     },
     methods: {
+        listenForSpeechEvents() {
+            this.responseInSpeech.onstart = () => {
+                this.isReading = true;
+            };
+
+            this.responseInSpeech.onend = () => {
+                this.isReading = false;
+            };
+        },
         speechSynth() {
-            this.response = this.md(this.markdown);
+            const customeResponse = this.markdown.replace(
+                /[&\/\\#+()$~%'":*?<>{}]/g,
+                ""
+            );
+            this.response = customeResponse;
             this.responseInSpeech.text = `${this.response}`;
             this.responseInSpeech.voice = this.voiceList[this.selectedVoice];
             this.synth.speak(this.responseInSpeech);