Merge pull request #179 from iceljc/features/refine-chat-window

Features/refine chat window
SciSharp · Aug 2, 2024 · 915d3e6 · 915d3e6
2 parents dcd00e3 + 1634550
commit 915d3e6
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 18 deletions.
diff --git a/src/lib/common/MessageImageGallery.svelte b/src/lib/common/MessageImageGallery.svelte
@@ -43,7 +43,7 @@
                         artist: '',
                         url: isExternalUrl(item.file_url) ? item.file_url : `${PUBLIC_SERVICE_URL}${item.file_url}?access_token=${$userStore?.token}`
                     };
-                });;
+                });
             });
         }
     });

diff --git a/src/lib/common/audio-player/AudioSpeaker.svelte b/src/lib/common/audio-player/AudioSpeaker.svelte
@@ -24,9 +24,14 @@
   let speech;
 
   onMount(() => {
+    const utterThis = new SpeechSynthesisUtterance();
+    utterThis.pitch = 1;
+    utterThis.rate = 1;
+    utterThis.onend = (e) => { stop(); };
+
     speech = {
       synth: window?.speechSynthesis,
-      utterThis: new SpeechSynthesisUtterance(),
+      utterThis: utterThis,
       stop: () => stop()
     };
     initSpeech(speech);
@@ -65,15 +70,12 @@
 <div
   class="{disableDefaultStyles ? '' : 'chat-speaker-container'} {containerClasses}"
   style={`${containerStyles}`}
-  on:click={() => speak()}
 >
-  {#if !speaking}
-    <span>
+  <span on:click={() => speak()}>
+    {#if !speaking}
       <i class="bx bx-volume" />
-    </span>
-  {:else}
-    <span>
+    {:else}
       <i class="bx bx-volume-full" />
-    </span>
-  {/if}
+    {/if}
+  </span>
 </div>
diff --git a/src/lib/common/audio-player/store.js b/src/lib/common/audio-player/store.js
@@ -1,6 +1,6 @@
 import { derived, writable } from "svelte/store";
 import { secondToTime } from "./utils";
-import { speechVoices } from "$lib/services/web-speech";
+import { SPEECH_VOICES } from "$lib/services/web-speech";
 
 /** @type {HTMLAudioElement[]} */
 export const instances = [];
@@ -19,14 +19,10 @@ export function initPlayer(player, dispatch) {
 
 /** @param {import('$types').SpeechModel} speech */
 export function initSpeech(speech) {
-  const foundVoice = speech.synth.getVoices().find(x => speechVoices.includes(x.name));
+  const foundVoice = speech.synth.getVoices().find(x => SPEECH_VOICES.includes(x.name));
   if (foundVoice) {
     speech.utterThis.voice = foundVoice;
   }
-
-  speech.utterThis.pitch = 1;
-  speech.utterThis.rate = 1;
-  speech.synth.cancel();
   speechInstances.push(speech);
 }
 

diff --git a/src/lib/helpers/types/types.js b/src/lib/helpers/types/types.js
@@ -236,6 +236,7 @@
 // Speech
 /**
  * @typedef {Object} SpeechModel
+ * @property {string} [id]
  * @property {SpeechSynthesis} synth
  * @property {SpeechSynthesisUtterance} utterThis
  * @property {() => void} stop

diff --git a/src/lib/services/web-speech.js b/src/lib/services/web-speech.js
@@ -15,7 +15,7 @@ const utterThis = new SpeechSynthesisUtterance();
 utterThis.pitch = 1;
 utterThis.rate = 1;
 
-export const speechVoices = [
+export const SPEECH_VOICES = [
     "Microsoft Michelle Online (Natural) - English (United States)",
     "Google US English"
 ];
@@ -45,7 +45,7 @@ function setVoiceSynthesis() {
     if (utterThis.voice == null) {
         const voices = synth.getVoices();
         for (let i = 0; i < voices.length; i++) {
-            if (speechVoices.includes(voices[i].name)) {
+            if (SPEECH_VOICES.includes(voices[i].name)) {
               utterThis.voice = voices[i];
               console.log(voices[i].name);
               break;