Add support for stream commands

Author: balloob

index.html

@@ -56,14 +56,8 @@
         border-radius: 3px;
         font-family: monospace;
       }
-      .clear-logs {
+      .actions {
         margin-top: 10px;
-        padding: 5px 10px;
-        font-size: 12px;
-        background-color: #f0f0f0;
-        border: 1px solid #ccc;
-        border-radius: 3px;
-        cursor: pointer;
       }
     </style>
   </head>
@@ -95,9 +89,12 @@ <h1>Improv Audio Player</h1>
           <div id="connection-status">Disconnected</div>
           <div id="available-groups"></div>
           <div id="status-display" class="status"></div>
-          <button id="join-group-btn">Join Group</button>
-          <button id="leave-group-btn">Leave Group</button>
-          <button class="clear-logs" id="clear-logs-btn">Clear Logs</button>
+          <div class="actions">
+            <button id="stop-btn">Stop</button>
+            <button id="join-group-btn">Join Group</button>
+            <button id="leave-group-btn">Leave Group</button>
+            <button class="clear-logs" id="clear-logs-btn">Clear Logs</button>
+          </div>
         </div>
         <div id="metadata" class="metadata"></div>
         <div class="artwork">
@@ -118,6 +115,7 @@ <h1>Improv Audio Player</h1>
       const playerIdInput = document.getElementById("player-id-input");
       const urlInput = document.getElementById("url-input");
       const connectButton = document.getElementById("connect-button");
+      const stopButton = document.getElementById("stop-btn");
       const availableGroups = document.getElementById("available-groups");
       const joinGroupButton = document.getElementById("join-group-btn");
       const leaveGroupButton = document.getElementById("leave-group-btn");
@@ -329,6 +327,17 @@ <h1>Improv Audio Player</h1>
           .map((group) => `<code>${group.groupId}</code>`)
           .join(", ")}`;
       });
+      stopButton.addEventListener("click", () => {
+        if (!client) {
+          logger.error("No client connected to stop playback");
+          return;
+        }
+        if (!client.sessionInfo) {
+          logger.error("No active session to stop");
+          return;
+        }
+        client.sendStreamCommand("stop");
+      });
     </script>
   </body>
 </html>

server.js

@@ -105,20 +105,27 @@ async function main() {
     const playAudio = async () => {
       logger.log("");
       logger.log("Sending WAV audio data to connected clients");
+      let endRequested = false;
       const session = group.startSession(
         "pcm",
         wavData.sampleRate,
         wavData.channels,
         wavData.bitDepth,
       );
+      session.on("stream-command", (command) => {
+        if (command.command === "stop") {
+          endRequested = true;
+          logger.log("Stop command received, stopping audio playback.");
+        }
+      });
       session.sendMetadata({
         title: "Sample Audio",
         artist: "Someone on the internet",
         album: null,
         year: null,
         track: null,
         group_members: [],
-        support_commands: ["play", "pause"],
+        support_commands: ["play", "stop"],
         repeat: "off",
         shuffle: false,
       });
@@ -129,6 +136,9 @@ async function main() {
         (timeSlice / 1000) * wavData.sampleRate * wavData.channels;
 
       for (let i = 0; i < wavData.audioData.length; i += bytesPerSlice) {
+        if (endRequested) {
+          break;
+        }
         // Mimick metadata update
         if (i % (bytesPerSlice * 10) === 0) {
           session.sendMetadata({
@@ -138,7 +148,7 @@ async function main() {
             year: null,
             track: null,
             group_members: [],
-            support_commands: ["play", "pause"],
+            support_commands: ["play", "stop"],
             repeat: "off",
             shuffle: false,
           });

src/client/client.ts

@@ -9,6 +9,7 @@ import {
   PlayerTimeMessage,
   GroupListMessage,
   ClientMessages,
+  MediaCommand,
 } from "../messages.js";
 import type { Logger } from "../logging.js";
 import { EventEmitter } from "../util/event-emitter.js";
@@ -421,6 +422,21 @@ export class Client extends EventEmitter<Events> {
     );
   }
 
+  public sendStreamCommand(command: MediaCommand) {
+    if (!this.sessionInfo || !this.metadata) {
+      throw new Error("Cannot send command: no active session");
+    }
+    if (!this.metadata.support_commands.includes(command)) {
+      throw new Error(`Command ${command} not supported by session`);
+    }
+    this.send({
+      type: "stream/command",
+      payload: {
+        command,
+      },
+    });
+  }
+
   public joinGroup(groupId: string) {
     this.send({
       type: "group/join",

src/server/server-client.ts

@@ -11,7 +11,7 @@ import type { Logger } from "../logging.js";
 import { generateUniqueId } from "../util/unique-id.js";
 import { EventEmitter } from "../util/event-emitter.js";
 
-interface ServerClientEvents {
+export interface ServerClientEvents {
   close: void;
   "player-state": PlayerState | null;
   "stream-command": StreamCommandMessage["payload"];

src/server/server-session.ts

@@ -8,14 +8,15 @@ import {
 import type { Logger } from "../logging.js";
 import { ServerGroup } from "./server-group.js";
 import { EventEmitter } from "../util/event-emitter.js";
-import { ServerClient } from "./server-client.js";
+import { ServerClient, ServerClientEvents } from "./server-client.js";
 import { arraysEqual } from "../util/array-equal.js";
 
 const HEADER_SIZE = 13;
 const METADATA_ARRAY_FIELDS = ["group_members", "support_commands"];
 
 interface ServerSessionEvents {
   "session-end": ServerSession;
+  "stream-command": ServerClientEvents["stream-command"];
 }
 
 export class ServerSession extends EventEmitter<ServerSessionEvents> {
@@ -134,18 +135,13 @@ export class ServerSession extends EventEmitter<ServerSessionEvents> {
       if (this._lastReportedArt) {
         client.sendBinary(this._lastReportedArt);
       }
-      // TODO Commented out because we don't unlisten yet
-      // Any mutation of sessionActive need to take care of it.
+      client.on("stream-command", (command) => {
+        this.fire("stream-command", command);
+      });
+      // TODO Commented out because we don't unlisten yet and we should pass client along
       // client.on("player-state", (state) => {
       //   console.log(`Unhandled player state from ${client.clientId}:`, state);
       // });
-      // TODO Commented out because we don't unlisten yet
-      // client.on("stream-command", (command) => {
-      //   console.log(
-      //     `Unhandled stream command from ${client.clientId}:`,
-      //     command,
-      //   );
-      // });
 
       this.sessionActive.add(client.clientId);
       yield client;