@fishjam-cloud/composition 0.29.0-rc.1 → 0.29.0

package/dist/index.js

@@ -20,11 +20,345 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  eventBus: () => eventBus
+  eventBus: () => eventBus,
+  usePeer: () => usePeer,
+  usePeers: () => usePeers,
+  useRoom: () => useRoom,
+  useSpeakingState: () => useSpeakingState
 });
 module.exports = __toCommonJS(index_exports);
+
+// src/hooks.ts
+var import_react = require("react");
+
+// src/store.ts
+var EMPTY_SNAPSHOT = { peers: [], vad: {} };
+var assertNever = (event) => {
+  throw new Error(`Unhandled composition event: ${JSON.stringify(event)}`);
+};
+var normalizeMetadata = (raw) => {
+  if (raw == null) return {};
+  if (typeof raw === "string") {
+    try {
+      const parsed = JSON.parse(raw);
+      return parsed && typeof parsed === "object" ? parsed : {};
+    } catch {
+      return {};
+    }
+  }
+  return raw;
+};
+var splitMetadata = (raw) => {
+  const obj = normalizeMetadata(raw);
+  return { peer: obj.peer, server: obj.server };
+};
+var roleOf = (stream) => {
+  const type = stream.video?.metadata.type ?? stream.audio?.metadata.type;
+  if (type === "camera" || type === "microphone") return "camera";
+  if (type === "screenShareVideo" || type === "screenShareAudio") return "screenShare";
+  return "custom";
+};
+var CompositionStore = class {
+  peers = /* @__PURE__ */ new Map();
+  roomId;
+  vad = /* @__PURE__ */ new Map();
+  listeners = /* @__PURE__ */ new Set();
+  cachedSnapshot = EMPTY_SNAPSHOT;
+  cachedPeers = EMPTY_SNAPSHOT.peers;
+  subscribe = (cb) => {
+    this.listeners.add(cb);
+    return () => this.listeners.delete(cb);
+  };
+  getSnapshot = () => {
+    if (this.cachedSnapshot === null) {
+      this.cachedSnapshot = { peers: this.cachedPeers, roomId: this.roomId, vad: this.vadRecord() };
+    }
+    return this.cachedSnapshot;
+  };
+  getPeers = () => this.cachedPeers;
+  getPeer = (peerId) => this.getPeers().find((peer) => peer.id === peerId);
+  getRoomId = () => this.roomId;
+  getVadStatus = (peerId) => {
+    const peer = this.peers.get(peerId);
+    if (!peer) return "silence";
+    for (const track of peer.tracks.values())
+      if (track.type === "audio" && track.inputId && this.vad.get(track.inputId) === "speech") return "speech";
+    return "silence";
+  };
+  reset() {
+    this.peers.clear();
+    this.vad.clear();
+    this.roomId = void 0;
+    this.cachedSnapshot = null;
+    this.cachedPeers = [];
+    this.commit();
+  }
+  seedFromRoom(room) {
+    this.peers.clear();
+    this.vad.clear();
+    this.roomId = room.id;
+    for (const peer of room.peers) {
+      const internal = {
+        id: peer.id,
+        metadata: splitMetadata(peer.metadata),
+        tracks: /* @__PURE__ */ new Map()
+      };
+      for (const track of peer.tracks ?? []) {
+        if (!track.id) continue;
+        internal.tracks.set(track.id, { id: track.id, metadata: normalizeMetadata(track.metadata), type: track.type });
+      }
+      this.peers.set(peer.id, internal);
+    }
+    this.rebuildPeers();
+    this.commit();
+  }
+  applyNotification(event) {
+    if (event.data.roomId !== this.roomId) return;
+    let changed;
+    switch (event.type) {
+      case "peerConnected":
+        changed = this.onPeerConnected(event.data);
+        break;
+      case "peerDisconnected":
+        changed = this.onPeerDisconnected(event.data);
+        break;
+      case "peerMetadataUpdated":
+        changed = this.onPeerMetadataUpdated(event.data);
+        break;
+      case "trackAdded":
+        changed = this.onTrackAdded(event.data);
+        break;
+      case "trackRemoved":
+        changed = this.onTrackRemoved(event.data);
+        break;
+      case "trackMetadataUpdated":
+        changed = this.onTrackMetadataUpdated(event.data);
+        break;
+      case "trackForwarding":
+        changed = this.onTrackForwarding(event.data);
+        break;
+      case "trackForwardingRemoved":
+        changed = this.onTrackForwardingRemoved(event.data);
+        break;
+      case "vadNotification":
+        changed = this.onVadNotification(event.data);
+        break;
+      default:
+        return assertNever(event);
+    }
+    if (changed) this.commit();
+  }
+  ensurePeer(peerId) {
+    let peer = this.peers.get(peerId);
+    if (!peer) {
+      peer = { id: peerId, metadata: { peer: void 0, server: void 0 }, tracks: /* @__PURE__ */ new Map() };
+      this.peers.set(peerId, peer);
+    }
+    return peer;
+  }
+  onPeerConnected(data) {
+    if (this.peers.has(data.peerId)) return false;
+    this.ensurePeer(data.peerId);
+    this.replacePeer(data.peerId);
+    return true;
+  }
+  onPeerDisconnected(data) {
+    const peer = this.peers.get(data.peerId);
+    if (!peer) return false;
+    for (const { inputId } of peer.tracks.values()) if (inputId) this.vad.delete(inputId);
+    this.peers.delete(data.peerId);
+    this.replacePeer(data.peerId);
+    return true;
+  }
+  onPeerMetadataUpdated(data) {
+    this.ensurePeer(data.peerId).metadata = splitMetadata(data.metadata);
+    this.replacePeer(data.peerId);
+    return true;
+  }
+  onTrackAdded(data) {
+    if (!data.peerId || !data.track) return false;
+    const peer = this.ensurePeer(data.peerId);
+    peer.tracks.set(data.track.id, {
+      id: data.track.id,
+      metadata: normalizeMetadata(data.track.metadata),
+      type: data.track.type
+    });
+    this.replacePeer(data.peerId);
+    return true;
+  }
+  onTrackMetadataUpdated(data) {
+    if (!data.peerId || !data.track) return false;
+    const peer = this.peers.get(data.peerId);
+    if (!peer) return false;
+    const metadata = normalizeMetadata(data.track.metadata);
+    const inputId = peer.tracks.get(data.track.id)?.inputId;
+    peer.tracks.set(data.track.id, { id: data.track.id, metadata, type: data.track.type, inputId });
+    this.replacePeer(data.peerId);
+    return true;
+  }
+  onTrackRemoved(data) {
+    if (!data.peerId || !data.track) return false;
+    const peer = this.peers.get(data.peerId);
+    if (!peer) return false;
+    const track = peer.tracks.get(data.track.id);
+    if (!track) return false;
+    peer.tracks.delete(data.track.id);
+    if (track.type === "audio" && track.inputId) this.vad.delete(track.inputId);
+    this.replacePeer(data.peerId);
+    return true;
+  }
+  onTrackForwarding(data) {
+    const peer = this.ensurePeer(data.peerId);
+    if (data.videoTrack) {
+      peer.tracks.set(data.videoTrack.id, {
+        id: data.videoTrack.id,
+        metadata: normalizeMetadata(data.videoTrack.metadata),
+        inputId: data.inputId,
+        type: data.videoTrack.type
+      });
+    }
+    if (data.audioTrack) {
+      peer.tracks.set(data.audioTrack.id, {
+        id: data.audioTrack.id,
+        metadata: normalizeMetadata(data.audioTrack.metadata),
+        inputId: data.inputId,
+        type: data.audioTrack.type
+      });
+    }
+    this.replacePeer(data.peerId);
+    return true;
+  }
+  onTrackForwardingRemoved(data) {
+    let changed = this.vad.delete(data.inputId);
+    const peer = this.peers.get(data.peerId);
+    if (!peer) {
+      if (changed) this.cachedSnapshot = null;
+      return changed;
+    }
+    for (const track of peer.tracks.values()) {
+      if (track.inputId === data.inputId) {
+        track.inputId = void 0;
+        changed = true;
+      }
+    }
+    if (changed) this.replacePeer(data.peerId);
+    return changed;
+  }
+  onVadNotification(data) {
+    const peer = this.peers.get(data.peerId);
+    if (!peer) return false;
+    const track = peer.tracks.get(data.trackId);
+    if (!track || !track.inputId) return false;
+    if (this.vad.get(track.inputId) === data.status) return false;
+    this.vad.set(track.inputId, data.status);
+    this.cachedSnapshot = null;
+    return true;
+  }
+  commit() {
+    for (const cb of this.listeners) cb();
+  }
+  replacePeer(peerId) {
+    const internal = this.peers.get(peerId);
+    const next = this.cachedPeers.slice();
+    const idx = next.findIndex((peer) => peer.id === peerId);
+    if (!internal) {
+      if (idx >= 0) next.splice(idx, 1);
+    } else if (idx >= 0) {
+      next[idx] = this.derivePeer(internal);
+    } else {
+      next.push(this.derivePeer(internal));
+    }
+    this.cachedPeers = next;
+    this.cachedSnapshot = null;
+  }
+  rebuildPeers() {
+    this.cachedPeers = Array.from(this.peers.values(), (peer) => this.derivePeer(peer));
+    this.cachedSnapshot = null;
+  }
+  vadRecord() {
+    const vad = {};
+    for (const [inputId, status] of this.vad) vad[inputId] = status;
+    return vad;
+  }
+  derivePeer(peer) {
+    const streams = /* @__PURE__ */ new Map();
+    let cameraStream;
+    let screenShareStream;
+    const customStreams = [];
+    for (const track of peer.tracks.values()) {
+      if (!track.inputId) continue;
+      const stream = streams.get(track.inputId) || { inputId: track.inputId };
+      if (track.type === "audio")
+        stream.audio = {
+          id: track.id,
+          paused: Boolean(track.metadata.paused),
+          metadata: track.metadata,
+          type: "audio"
+        };
+      else
+        stream.video = {
+          id: track.id,
+          paused: Boolean(track.metadata.paused),
+          metadata: track.metadata,
+          type: "video"
+        };
+      streams.set(track.inputId, stream);
+    }
+    for (const stream of streams.values()) {
+      const role = roleOf(stream);
+      switch (role) {
+        case "camera":
+          cameraStream = stream;
+          break;
+        case "screenShare":
+          screenShareStream = stream;
+          break;
+        default:
+          customStreams.push(stream);
+      }
+    }
+    return {
+      id: peer.id,
+      metadata: peer.metadata,
+      streams: Array.from(streams.values()),
+      cameraStream,
+      screenShareStream,
+      customStreams
+    };
+  }
+};
+var compositionStore = new CompositionStore();
+
+// src/hooks.ts
+function usePeers() {
+  const peers = (0, import_react.useSyncExternalStore)(compositionStore.subscribe, compositionStore.getPeers, compositionStore.getPeers);
+  return peers;
+}
+function usePeer(peerId) {
+  const getSnapshot = (0, import_react.useCallback)(() => compositionStore.getPeer(peerId), [peerId]);
+  const peer = (0, import_react.useSyncExternalStore)(compositionStore.subscribe, getSnapshot, getSnapshot);
+  return peer;
+}
+function useRoom() {
+  const roomId = (0, import_react.useSyncExternalStore)(
+    compositionStore.subscribe,
+    compositionStore.getRoomId,
+    compositionStore.getRoomId
+  );
+  return roomId ? { id: roomId } : void 0;
+}
+function useSpeakingState(peerId) {
+  const getSnapshot = (0, import_react.useCallback)(() => compositionStore.getVadStatus(peerId), [peerId]);
+  return (0, import_react.useSyncExternalStore)(compositionStore.subscribe, getSnapshot, getSnapshot);
+}
+
+// src/eventBus.ts
 var eventBus = globalThis.eventBus;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  eventBus
+  eventBus,
+  usePeer,
+  usePeers,
+  useRoom,
+  useSpeakingState
 });

package/dist/index.mjs

@@ -1,5 +1,37 @@
-// src/index.ts
+import {
+  compositionStore
+} from "./chunk-XAZDKX25.mjs";
+
+// src/hooks.ts
+import { useCallback, useSyncExternalStore } from "react";
+function usePeers() {
+  const peers = useSyncExternalStore(compositionStore.subscribe, compositionStore.getPeers, compositionStore.getPeers);
+  return peers;
+}
+function usePeer(peerId) {
+  const getSnapshot = useCallback(() => compositionStore.getPeer(peerId), [peerId]);
+  const peer = useSyncExternalStore(compositionStore.subscribe, getSnapshot, getSnapshot);
+  return peer;
+}
+function useRoom() {
+  const roomId = useSyncExternalStore(
+    compositionStore.subscribe,
+    compositionStore.getRoomId,
+    compositionStore.getRoomId
+  );
+  return roomId ? { id: roomId } : void 0;
+}
+function useSpeakingState(peerId) {
+  const getSnapshot = useCallback(() => compositionStore.getVadStatus(peerId), [peerId]);
+  return useSyncExternalStore(compositionStore.subscribe, getSnapshot, getSnapshot);
+}
+
+// src/eventBus.ts
 var eventBus = globalThis.eventBus;
 export {
-  eventBus
+  eventBus,
+  usePeer,
+  usePeers,
+  useRoom,
+  useSpeakingState
 };

package/dist/types-LgEdO1AS.d.mts

@@ -0,0 +1,45 @@
+/**
+ * State of a single fishjam track.
+ * The `paused` flag mirrors the track's mute state.
+ */
+type TrackState = {
+    /** fishjam track id */
+    id: string;
+    /** mute state, read from the built-in `paused` metadata key */
+    paused: boolean;
+    metadata: Record<string, unknown>;
+};
+type VideoTrackState = TrackState & {
+    type: 'video';
+};
+type AudioTrackState = TrackState & {
+    type: 'audio';
+};
+/**
+ * A forwarded input.
+ * `inputId` is the handle a template passes to `<InputStream inputId={...} />`.
+ * A stream carries at most one video and one audio track.
+ */
+type Stream = {
+    inputId: string;
+    video?: VideoTrackState;
+    audio?: AudioTrackState;
+};
+/**
+ * A room peer projected for composition templates.
+ * Streams are split by role: camera, screen share, or custom.
+ * The camera stream's audio is the peer's mic.
+ */
+type PeerWithStreams<PeerMetadata = unknown, ServerMetadata = unknown> = {
+    id: string;
+    metadata: {
+        peer: PeerMetadata;
+        server: ServerMetadata;
+    };
+    streams: Stream[];
+    cameraStream?: Stream;
+    screenShareStream?: Stream;
+    customStreams: Stream[];
+};
+
+export type { AudioTrackState as A, PeerWithStreams as P, Stream as S, TrackState as T, VideoTrackState as V };

package/dist/types-LgEdO1AS.d.ts

@@ -0,0 +1,45 @@
+/**
+ * State of a single fishjam track.
+ * The `paused` flag mirrors the track's mute state.
+ */
+type TrackState = {
+    /** fishjam track id */
+    id: string;
+    /** mute state, read from the built-in `paused` metadata key */
+    paused: boolean;
+    metadata: Record<string, unknown>;
+};
+type VideoTrackState = TrackState & {
+    type: 'video';
+};
+type AudioTrackState = TrackState & {
+    type: 'audio';
+};
+/**
+ * A forwarded input.
+ * `inputId` is the handle a template passes to `<InputStream inputId={...} />`.
+ * A stream carries at most one video and one audio track.
+ */
+type Stream = {
+    inputId: string;
+    video?: VideoTrackState;
+    audio?: AudioTrackState;
+};
+/**
+ * A room peer projected for composition templates.
+ * Streams are split by role: camera, screen share, or custom.
+ * The camera stream's audio is the peer's mic.
+ */
+type PeerWithStreams<PeerMetadata = unknown, ServerMetadata = unknown> = {
+    id: string;
+    metadata: {
+        peer: PeerMetadata;
+        server: ServerMetadata;
+    };
+    streams: Stream[];
+    cameraStream?: Stream;
+    screenShareStream?: Stream;
+    customStreams: Stream[];
+};
+
+export type { AudioTrackState as A, PeerWithStreams as P, Stream as S, TrackState as T, VideoTrackState as V };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fishjam-cloud/composition",
-  "version": "0.29.0-rc.1",
-  "description": "Composition event bus contract for Fishjam templates",
+  "version": "0.29.0",
+  "description": "React hooks and event bus for building Fishjam composition templates",
   "homepage": "https://github.com/fishjam-cloud/js-server-sdk",
   "author": "Fishjam Team",
   "repository": {
@@ -32,10 +32,15 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
+    },
+    "./core": {
+      "types": "./dist/core.d.ts",
+      "import": "./dist/core.mjs",
+      "require": "./dist/core.js"
     }
   },
   "scripts": {
-    "build": "tsup --dts-resolve",
+    "build": "tsup",
     "format": "prettier --write .",
     "format:check": "prettier --check .",
     "typecheck": "tsc --noEmit",
@@ -45,18 +50,30 @@
   },
   "tsup": {
     "entry": [
-      "src/index.ts"
+      "src/index.ts",
+      "src/core.ts"
     ],
     "minify": false,
     "format": [
       "cjs",
       "esm"
     ],
-    "outDir": "dist"
+    "outDir": "dist",
+    "dts": true,
+    "clean": true
+  },
+  "peerDependencies": {
+    "@fishjam-cloud/js-server-sdk": "^0.29.0",
+    "react": ">=18"
   },
   "devDependencies": {
+    "@fishjam-cloud/js-server-sdk": "0.29.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.1.9",
     "eslint": "^9.33.0",
     "prettier": "^3.6.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "tsup": "^8.4.0",
     "vitest": "^3.0.0"
   },
@@ -65,4 +82,4 @@
       "eslint --fix --config eslint.config.mjs"
     ]
   }
-}
+}