fix(frontend): track playback completion and meaningful inactivity

vocero-frontend/src/audio/audio-playback.worklet.ts

@@ -1,5 +1,7 @@
 type PlaybackMessage =
-  { kind: "config"; inputRate: number } | { kind: "audio"; samples: Float32Array } | { kind: "clear" };
+  | { kind: "config"; inputRate: number }
+  | { kind: "audio"; samples: Float32Array; sequence: number }
+  | { kind: "clear" | "finish"; sequence: number };
 
 class AudioPlaybackProcessor extends AudioWorkletProcessor {
   private rate = 16000;
@@ -10,6 +12,8 @@ class AudioPlaybackProcessor extends AudioWorkletProcessor {
   private fadeIn = 0;
   private fadeOut = 0;
   private lastSample = 0;
+  private sequence = 0;
+  private finished = false;
 
   constructor() {
     super();
@@ -22,16 +26,24 @@ class AudioPlaybackProcessor extends AudioWorkletProcessor {
           }
           break;
         case "audio":
+          this.sequence = data.sequence;
+          this.finished = false;
           if (data.samples.length) {
             this.queue.push(data.samples);
           }
           break;
         case "clear":
+          this.sequence = data.sequence;
+          this.finished = true;
           this.queue = [];
           this.offset = 0;
           this.fraction = 0;
           this.fadeOut = 32;
           break;
+        case "finish":
+          this.sequence = data.sequence;
+          this.finished = true;
+          break;
       }
     };
   }
@@ -66,7 +78,7 @@ class AudioPlaybackProcessor extends AudioWorkletProcessor {
     }
     for (let index = 0; index < output.length; index++) {
       let value = 0;
-      if (!this.playing && this.queue.length && this.bufferedMs() >= 90) {
+      if (!this.playing && this.queue.length && (this.finished || this.bufferedMs() >= 90)) {
         this.playing = true;
         this.fadeIn = 32;
         this.fadeOut = 0;
@@ -102,6 +114,10 @@ class AudioPlaybackProcessor extends AudioWorkletProcessor {
         stereo[index] = value;
       }
     }
+    if (this.finished && !this.playing && !this.queue.length) {
+      this.finished = false;
+      this.port.postMessage({ kind: "drained", sequence: this.sequence });
+    }
     return true;
   }
 }