From 49d58101033b9fdd6b77ae6af0f16907f146361c Mon Sep 17 00:00:00 2001
From: Dessalines <dessalines@users.noreply.github.com>
Date: Thu, 22 Jul 2021 11:37:37 -0400
Subject: [PATCH] Fix captcha replay bug. Fixes #348 (#349)

---
 src/shared/components/home/login.tsx | 26 +++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/shared/components/home/login.tsx b/src/shared/components/home/login.tsx
index 8568316b..d9d427d0 100644
--- a/src/shared/components/home/login.tsx
+++ b/src/shared/components/home/login.tsx
@@ -41,6 +41,7 @@ interface State {
 export class Login extends Component<any, State> {
   private isoData = setIsoData(this.context);
   private subscription: Subscription;
+  private audio: HTMLAudioElement;
 
   emptyState: State = {
     loginForm: {
@@ -406,8 +407,8 @@ export class Login extends Component<any, State> {
     i.setState(i.state);
   }
 
-  handleRegenCaptcha(_i: Login, event: any) {
-    event.preventDefault();
+  handleRegenCaptcha(i: Login) {
+    i.audio = null;
     WebSocketService.Instance.send(wsClient.getCaptcha());
   }
 
@@ -419,16 +420,23 @@ export class Login extends Component<any, State> {
     WebSocketService.Instance.send(wsClient.passwordReset(resetForm));
   }
 
-  handleCaptchaPlay(i: Login, event: any) {
-    event.preventDefault();
-    let snd = new Audio("data:audio/wav;base64," + i.state.captcha.ok.wav);
-    snd.play();
+  handleCaptchaPlay(i: Login) {
+    // This was a bad bug, it should only build the new audio on a new file.
+    // Replays would stop prematurely if this was rebuilt every time.
+    if (i.audio == null) {
+      let base64 = `data:audio/wav;base64,${i.state.captcha.ok.wav}`;
+      i.audio = new Audio(base64);
+    }
+
+    i.audio.play();
+
     i.state.captchaPlaying = true;
     i.setState(i.state);
-    snd.addEventListener("ended", () => {
-      snd.currentTime = 0;
+
+    i.audio.addEventListener("ended", () => {
+      i.audio.currentTime = 0;
       i.state.captchaPlaying = false;
-      i.setState(this.state);
+      i.setState(i.state);
     });
   }