seems to work except switching broadcasts mid game doesn't seem to work

src/broadcast/setup.ts

@@ -20,6 +20,7 @@ export default function setupBroadcastIpc({
 }) {
   let spectateWorker: SpectateWorker | undefined;
   let broadcastWorker: BroadcastWorker | undefined;
+  let prefixOrdinal = 0;
 
   dolphinManager.events
     .filter<DolphinPlaybackClosedEvent>((event) => {
@@ -46,7 +47,8 @@ export default function setupBroadcastIpc({
     );
 
     const folderPath = settingsManager.get().settings.spectateSlpPath;
-    await spectateWorker.startSpectate(broadcasterId, folderPath);
+    await spectateWorker.startSpectate(broadcasterId, folderPath, { idPostfix: `broadcast${prefixOrdinal}` });
+    prefixOrdinal += 1;
     return { success: true };
   });
 

src/broadcast/spectate.worker.ts

@@ -7,12 +7,12 @@ import { Observable, Subject } from "threads/observable";
 import { expose } from "threads/worker";
 
 import { SpectateManager } from "./spectate_manager";
-import type { BroadcasterItem } from "./types";
+import type { BroadcasterItem, SpectateDolphinOptions } from "./types";
 import { SpectateEvent } from "./types";
 
 interface Methods {
   dispose: () => Promise<void>;
-  startSpectate(broadcastId: string, targetPath: string): Promise<string>;
+  startSpectate(broadcastId: string, targetPath: string, dolphinOptions: SpectateDolphinOptions): Promise<string>;
   stopSpectate(broadcastId: string): Promise<void>;
   dolphinClosed(playbackId: string): Promise<void>;
   refreshBroadcastList(authToken: string): Promise<void>;
@@ -71,8 +71,12 @@ const methods: WorkerSpec = {
 
     spectateManager.removeAllListeners();
   },
-  async startSpectate(broadcastId: string, targetPath: string): Promise<string> {
-    return await spectateManager.watchBroadcast(broadcastId, targetPath);
+  async startSpectate(
+    broadcastId: string,
+    targetPath: string,
+    dolphinOptions: SpectateDolphinOptions,
+  ): Promise<string> {
+    return await spectateManager.watchBroadcast(broadcastId, targetPath, dolphinOptions);
   },
   async stopSpectate(broadcastId: string): Promise<void> {
     spectateManager.stopWatchingBroadcast(broadcastId);

src/broadcast/spectate_manager.ts

@@ -5,13 +5,11 @@ import * as fs from "fs-extra";
 import type { connection, Message } from "websocket";
 import { client as WebSocketClient } from "websocket";
 
-import type { BroadcasterItem } from "./types";
+import type { BroadcasterItem, SpectateDolphinOptions } from "./types";
 import { SpectateEvent } from "./types";
 
 const SLIPPI_WS_SERVER = process.env.SLIPPI_WS_SERVER;
 
-const DOLPHIN_INSTANCE_ID = "spectate";
-
 type BroadcastInfo = {
   broadcastId: string;
   cursor: string;
@@ -20,7 +18,11 @@ type BroadcastInfo = {
   dolphinId: string;
 };
 
-const generatePlaybackId = (broadcastId: string) => `spectate-${broadcastId}`;
+// since we can have multiple SpectateManagers, we need to be careful about creating colliding ids
+const generatePlaybackId = (postfix?: string) => {
+  const now = Date.now().toString();
+  return postfix ? now + postfix : now;
+};
 
 /**
  * Responsible for retrieving Dolphin game data over enet and sending the data
@@ -225,27 +227,24 @@ export class SpectateManager extends EventEmitter {
    * @param {boolean} [singleton] If true, it will open the broadcasts only
    * in a single Dolphin window. Opens each broadcast in their own window otherwise.
    */
-  public watchBroadcast(broadcastId: string, targetPath: string, singleton?: boolean) {
+  public watchBroadcast(broadcastId: string, targetPath: string, dolphinOptions: SpectateDolphinOptions) {
     Preconditions.checkExists(this.wsConnection, "No websocket connection");
 
-    const existingBroadcasts = Object.keys(this.openBroadcasts);
-    if (existingBroadcasts.includes(broadcastId)) {
-      // We're already watching this broadcast!
+    const openBroadcast = this.openBroadcasts[broadcastId];
+    if (openBroadcast) {
       this.emit(SpectateEvent.LOG, `We are already watching the selected broadcast`);
-      return this.openBroadcasts[broadcastId].dolphinId;
+      return openBroadcast.dolphinId;
     }
 
-    let dolphinPlaybackId = generatePlaybackId(broadcastId);
-
-    // We're only watching one at at time so stop other broadcasts
-    if (singleton) {
-      existingBroadcasts.forEach((broadcastInfo) => {
-        this.stopWatchingBroadcast(broadcastInfo);
-      });
-
-      // Use the default playback ID
-      dolphinPlaybackId = DOLPHIN_INSTANCE_ID;
+    if (dolphinOptions.dolphinId) {
+      const existingDolphin = Object.values(this.openBroadcasts).find(
+        (broadcastInfo) => broadcastInfo.dolphinId === dolphinOptions.dolphinId,
+      );
+      if (existingDolphin) {
+        this.stopWatchingBroadcast(existingDolphin.broadcastId);
+      }
     }
+    const dolphinPlaybackId = dolphinOptions.dolphinId || generatePlaybackId(dolphinOptions.idPostfix);
 
     fs.ensureDirSync(targetPath);
     const slpFileWriter = new SlpFileWriter({

src/broadcast/types.ts

@@ -77,3 +77,8 @@ export type BroadcastService = {
   startBroadcast(config: StartBroadcastConfig): Promise<void>;
   stopBroadcast(): Promise<void>;
 };
+
+export type SpectateDolphinOptions = {
+  dolphinId?: string;
+  idPostfix?: string;
+};

src/remote/remote.server.ts

@@ -1,4 +1,4 @@
-import type { BroadcasterItem } from "@broadcast/types";
+import type { BroadcasterItem, SpectateDolphinOptions } from "@broadcast/types";
 import type { DolphinManager } from "@dolphin/manager";
 import type { DolphinPlaybackClosedEvent, ReplayCommunication } from "@dolphin/types";
 import { DolphinEventType, DolphinLaunchType } from "@dolphin/types";
@@ -26,12 +26,15 @@ export default class RemoteServer {
   private remoteServer: WebSocketServer | null;
   private connection: connection | null;
 
+  private prefixOrdinal: number;
+
   constructor(dolphinManager: DolphinManager, settingsManager: SettingsManager) {
     this.authToken = "";
     this.spectateWorker = null;
     this.httpServer = null;
     this.remoteServer = null;
     this.connection = null;
+    this.prefixOrdinal = 0;
 
     this.settingsManager = settingsManager;
     this.dolphinManager = dolphinManager;
@@ -133,14 +136,23 @@ export default class RemoteServer {
             if (json.op === "list-broadcasts-request") {
               await throttledRefresh();
             } else if (json.op === "spectate-broadcast-request") {
-              if (!json.broadcastId) {
+              const broadcastId = json.broadcastId;
+              if (!broadcastId) {
                 newConnection.sendUTF(JSON.stringify({ op: "spectate-broadcast-response", err: "no broadcastId" }));
                 return;
               }
 
+              const dolphinOptions: SpectateDolphinOptions = {};
+              const dolphinId = json.dolphinId;
+              if (dolphinId && typeof dolphinId === "string") {
+                dolphinOptions.dolphinId = dolphinId;
+              } else {
+                dolphinOptions.idPostfix = `remote${this.prefixOrdinal}`;
+                this.prefixOrdinal += 1;
+              }
               try {
                 const path = this.settingsManager.get().settings.spectateSlpPath;
-                const dolphinId = await this.spectateWorker!.startSpectate(json.broadcastId, path);
+                const dolphinId = await this.spectateWorker!.startSpectate(broadcastId, path, dolphinOptions);
                 newConnection.sendUTF(JSON.stringify({ op: "spectate-broadcast-response", dolphinId, path }));
               } catch (e) {
                 const err = typeof e === "string" ? e : e instanceof Error ? e.message : "unknown";