Workaround for issue where Firefox can offer excessive numbers of TTS…

… voices causing slowdown.

client/Dockerfile

@@ -7,7 +7,7 @@ WORKDIR /md
 
 COPY ["./package.json", "./package-lock.json", "./"]
 
-RUN ["apk", "add", "--no-cache", "--virtual", ".gyp", "python", "make", "g++"]
+RUN ["apk", "add", "--no-cache", "--virtual", ".gyp", "python", "make", "g++", "openjdk8-jre"]
 RUN ["npm", "ci"]
 
 COPY ["./tsconfig.json", "postcss.config.js", "./webpack.config.js", "./elm.json", "./"]

client/package.json

@@ -51,7 +51,7 @@
     "closure-webpack-plugin": "^2.3.0",
     "compression-webpack-plugin": "^5.0.2",
     "css-hot-loader": "^1.4.4",
-    "css-loader": "^4.2.2",
+    "css-loader": "^4.3.0",
     "cssnano": "^4.1.10",
     "elm": "^0.19.1-3",
     "elm-analyse": "^0.16.5",
@@ -64,7 +64,7 @@
     "html-loader": "^1.3.0",
     "html-webpack-plugin": "^4.4.1",
     "postcss-import": "^12.0.1",
-    "postcss-loader": "^3.0.0",
+    "postcss-loader": "^4.0.1",
     "postcss-preset-env": "^6.7.0",
     "prettier": "2.1.1",
     "prettier-plugin-elm": "^0.7.0",

client/src/ts/speech.ts

@@ -31,24 +31,25 @@ class Speech {
     this.out = out;
     this.get_voices();
 
-    inbound.subscribe(command => {
+    inbound.subscribe((command) => {
       this.say(command.voice, command.phrase);
     });
 
     this.speech.addEventListener("voiceschanged", () => this.get_voices());
   }
 
   get_voices(): void {
-    const voices = this.speech.getVoices();
+    // The slice is a sanity check, Firefox can get pathological with voices.
+    const voices = this.speech.getVoices().slice(0, 100);
     this.voices.clear();
     for (const voice of voices) {
       this.voices.set(voice.name, voice);
     }
     this.out.send(
-      voices.map(voice => ({
+      voices.map((voice) => ({
         name: voice.name,
         lang: voice.lang,
-        ...(voice.default ? { default: true } : {})
+        ...(voice.default ? { default: true } : {}),
       }))
     );
   }