@dxos/plugin-thread 0.8.4-main.406dc2a → 0.8.4-main.422d1c7879

package/src/calls/call-manager.ts

@@ -2,13 +2,12 @@
 // Copyright 2025 DXOS.org
 //
 
-import { computed } from '@preact/signals-core';
+import { Atom, type Registry } from '@effect-atom/atom-react';
 
 import { Event, synchronized } from '@dxos/async';
 import { type Client } from '@dxos/client';
 import { Resource } from '@dxos/context';
 import { invariant } from '@dxos/invariant';
-import { live } from '@dxos/live-object';
 import { type Tracks } from '@dxos/protocols/proto/dxos/edge/calls';
 import { isNonNullable } from '@dxos/util';
 
@@ -31,84 +30,103 @@ export class CallManager extends Resource {
   public readonly left = new Event<string>();
 
   /**
-   * Live object state. Is changed on internal events.
+   * Atom-based state. Updated via `_updateState()`.
    * CAUTION: Do not change directly.
    */
-  private readonly _state = live<GlobalState>({
+  private readonly _stateAtom = Atom.make<GlobalState>({
     call: {},
     media: { pulledAudioTracks: {}, pulledVideoStreams: {} },
   });
 
-  // TODO(wittjosiah): This shouldn't be necessary, live-object's signals should be granular.
-  private readonly _raisedHandSignal = computed(() => this._state.call.raisedHand ?? false);
-  private readonly _speakingSignal = computed(() => this._state.call.speaking ?? false);
-  private readonly _joinedSignal = computed(() => this._state.call.joined ?? false);
+  // Derived atoms for reactive subscriptions.
+  private readonly _roomIdAtom = Atom.make((get) => get(this._stateAtom).call.roomId);
+  private readonly _raisedHandAtom = Atom.make((get) => get(this._stateAtom).call.raisedHand ?? false);
+  private readonly _speakingAtom = Atom.make((get) => get(this._stateAtom).call.speaking ?? false);
+  private readonly _joinedAtom = Atom.make((get) => get(this._stateAtom).call.joined ?? false);
+  private readonly _selfAtom = Atom.make((get) => get(this._stateAtom).call.self ?? {});
+  private readonly _tracksAtom = Atom.make((get) => get(this._stateAtom).call.tracks ?? {});
+  private readonly _usersAtom = Atom.make((get) => get(this._stateAtom).call.users ?? []);
+  private readonly _mediaAtom = Atom.make((get) => get(this._stateAtom).media);
+  private readonly _audioTracksToPlayAtom = Atom.make((get) => {
+    const state = get(this._stateAtom);
+    return (state.call.users ?? [])
+      .map((user: UserState) => (user.tracks?.audioEnabled ? user.tracks?.audio : undefined))
+      .filter(isNonNullable)
+      .map((track: string) => state.media.pulledAudioTracks[track as EncodedTrackName]?.track)
+      .filter(isNonNullable);
+  });
+  private readonly _videoStreamAtomFamily = Atom.family<EncodedTrackName, Atom.Atom<MediaStream | undefined>>((name) =>
+    Atom.make((get) => get(this._stateAtom).media.pulledVideoStreams[name]?.stream),
+  );
+  private readonly _activityAtomFamily = Atom.family<string, Atom.Atom<ActivityState | undefined>>((key) =>
+    Atom.make((get) => get(this._stateAtom).call.activities?.[key]),
+  );
 
   private readonly _swarmSynchronizer: CallSwarmSynchronizer;
   private readonly _mediaManager: MediaManager;
 
-  /** @reactive */
-  get roomId(): string | undefined {
-    return this._state.call.roomId;
+  //
+  // Derived atoms for reactive UI subscriptions.
+  //
+
+  /** Derived atom for roomId. */
+  get roomIdAtom(): Atom.Atom<string | undefined> {
+    return this._roomIdAtom;
   }
 
-  /** @reactive */
-  get raisedHand(): boolean {
-    return this._raisedHandSignal.value;
+  /** Derived atom for raisedHand. */
+  get raisedHandAtom(): Atom.Atom<boolean> {
+    return this._raisedHandAtom;
   }
 
-  /** @reactive */
-  get speaking(): boolean {
-    return this._speakingSignal.value;
+  /** Derived atom for speaking. */
+  get speakingAtom(): Atom.Atom<boolean> {
+    return this._speakingAtom;
   }
 
-  /** @reactive */
-  get joined(): boolean {
-    return this._joinedSignal.value;
+  /** Derived atom for joined. */
+  get joinedAtom(): Atom.Atom<boolean> {
+    return this._joinedAtom;
   }
 
-  /** @reactive */
-  get self(): UserState {
-    return this._state.call.self ?? {};
+  /** Derived atom for self. */
+  get selfAtom(): Atom.Atom<UserState> {
+    return this._selfAtom;
   }
 
-  /** @reactive */
-  get tracks(): Tracks {
-    return this._state.call.tracks ?? {};
+  /** Derived atom for tracks. */
+  get tracksAtom(): Atom.Atom<Tracks> {
+    return this._tracksAtom;
   }
 
-  /** @reactive */
-  get users(): UserState[] {
-    return this._state.call.users ?? [];
+  /** Derived atom for users. */
+  get usersAtom(): Atom.Atom<UserState[]> {
+    return this._usersAtom;
   }
 
-  /** @reactive */
-  get media() {
-    return this._state.media;
+  /** Derived atom for media. */
+  get mediaAtom(): Atom.Atom<MediaState> {
+    return this._mediaAtom;
   }
 
-  /** @reactive */
-  get audioTracksToPlay(): MediaStreamTrack[] {
-    return (this._state.call.users ?? [])
-      .map((user) => (user.tracks?.audioEnabled ? user.tracks?.audio : undefined))
-      .filter(isNonNullable)
-      .map((track) => this._state.media.pulledAudioTracks[track as EncodedTrackName]?.track)
-      .filter(isNonNullable);
+  /** Derived atom for audioTracksToPlay. */
+  get audioTracksToPlayAtom(): Atom.Atom<MediaStreamTrack[]> {
+    return this._audioTracksToPlayAtom;
   }
 
-  /** @reactive */
-  get state() {
-    return this._state;
+  /** Returns the full state atom for reactive subscriptions. */
+  get stateAtom(): Atom.Atom<GlobalState> {
+    return this._stateAtom;
   }
 
-  /** @reactive */
-  getVideoStream(name?: EncodedTrackName): MediaStream | undefined {
-    return name ? this._state.media.pulledVideoStreams[name]?.stream : undefined;
+  /** Returns a derived atom for a video stream by name. */
+  videoStreamAtom(name: EncodedTrackName): Atom.Atom<MediaStream | undefined> {
+    return this._videoStreamAtomFamily(name);
   }
 
-  /** @reactive */
-  getActivity(key: string): ActivityState | undefined {
-    return this._state.call.activities?.[key];
+  /** Returns a derived atom for an activity by key. */
+  activityAtom(key: string): Atom.Atom<ActivityState | undefined> {
+    return this._activityAtomFamily(key);
   }
 
   setRoomId(roomId: string): void {
@@ -152,7 +170,10 @@ export class CallManager extends Resource {
   }
 
   // TODO(burdon): Can this be mocked?
-  constructor(private readonly _client: Client) {
+  constructor(
+    private readonly _client: Client,
+    private readonly _registry: Registry.Registry,
+  ) {
     super();
     this._client.config.getOrThrow('runtime.services.edge.url');
     const networkService = this._client.services.services.NetworkService;
@@ -205,7 +226,8 @@ export class CallManager extends Resource {
     this._swarmSynchronizer.setJoined(false);
     await this._swarmSynchronizer.leave();
     await this._mediaManager.leave();
-    this.roomId && this.left.emit(this.roomId);
+    const roomId = this._registry.get(this._roomIdAtom);
+    roomId && this.left.emit(roomId);
   }
 
   private _onCallStateUpdated(state: CallState): void {
@@ -240,7 +262,9 @@ export class CallManager extends Resource {
    * Only this method is allowed to change state.
    */
   private _updateState(): void {
-    this._state.call = this._swarmSynchronizer._getState();
-    this._state.media = this._mediaManager._getState();
+    this._registry.set(this._stateAtom, {
+      call: this._swarmSynchronizer._getState(),
+      media: this._mediaManager._getState(),
+    });
   }
 }

package/src/calls/call-swarm-synchronizer.ts

@@ -50,7 +50,7 @@ export type CallState = {
   tracks?: UserState['tracks'];
 };
 
-export type CallSwarmSynchronizerParams = { networkService: NetworkService };
+export type CallSwarmSynchronizerProps = { networkService: NetworkService };
 
 /**
  * Period for peer to reconnect to the call swarm gracefully if connection was lost abruptly.
@@ -76,7 +76,7 @@ export class CallSwarmSynchronizer extends Resource {
 
   private _sendStateTask?: DeferredTask = undefined;
 
-  constructor({ networkService }: CallSwarmSynchronizerParams) {
+  constructor({ networkService }: CallSwarmSynchronizerProps) {
     super();
     this._networkService = networkService;
   }

package/src/calls/media-manager.ts

@@ -51,7 +51,7 @@ const MAX_WEB_CAM_FRAMERATE = 24;
 const MAX_WEB_CAM_BITRATE = 120_0000;
 const RETRY_INTERVAL = 100;
 
-export type MediaManagerParams = {
+export type MediaManagerProps = {
   serviceConfig: CallsServiceConfig;
 };
 
@@ -59,9 +59,13 @@ const USE_INAUDIBLE_AUDIO = true;
 
 export class MediaManager extends Resource {
   public readonly stateUpdated = new Event<MediaState>();
-  private readonly _state: MediaState = { pulledVideoStreams: {}, pulledAudioTracks: {} };
-  private _speakingMonitor?: SpeakingMonitor = undefined;
 
+  private readonly _state: MediaState = {
+    pulledVideoStreams: {},
+    pulledAudioTracks: {},
+  };
+
+  private _speakingMonitor?: SpeakingMonitor = undefined;
   private _trackToReconcile: EncodedTrackName[] = [];
   private _blackCanvasStreamTrack?: MediaStreamTrack = undefined;
   private _inaudibleAudioStreamTrack?: MediaStreamTrack = undefined;
@@ -85,6 +89,7 @@ export class MediaManager extends Resource {
       width: VIDEO_WIDTH,
       height: VIDEO_HEIGHT,
     });
+
     this._state.videoTrack = this._blackCanvasStreamTrack;
     this._state.videoStream = new MediaStream();
     this._state.videoStream.addTrack(this._state.videoTrack);
@@ -137,6 +142,7 @@ export class MediaManager extends Resource {
     this._state.videoStream!.removeTrack(this._state.videoTrack!);
     this._state.videoTrack = await getUserMediaTrack('videoinput', { width: VIDEO_WIDTH, height: VIDEO_HEIGHT });
     this._state.videoStream!.addTrack(this._state.videoTrack);
+
     this._state.videoEnabled = true;
     this.stateUpdated.emit(this._state);
     this._pushTracksTask!.schedule();
@@ -226,7 +232,6 @@ export class MediaManager extends Resource {
     // Wait for cloudflare to process the track.
     await cancelWithContext(this._ctx, sleep(800));
     const trackNames = this._trackToReconcile;
-
     const tracksToPull = trackNames.filter(
       (name) => !this._state.pulledAudioTracks[name] && !this._state.pulledVideoStreams[name],
     );
@@ -258,8 +263,8 @@ export class MediaManager extends Resource {
       currentAudioTracks: Object.keys(this._state.pulledAudioTracks),
       currentVideoStreams: Object.keys(this._state.pulledVideoStreams),
     });
-    this.stateUpdated.emit(this._state);
 
+    this.stateUpdated.emit(this._state);
     if (pullResults.some(({ shouldRetry }) => shouldRetry)) {
       await cancelWithContext(this._ctx, sleep(RETRY_INTERVAL));
       log.info('retrying pull tracks', { tracksToPull });
@@ -296,7 +301,6 @@ export class MediaManager extends Resource {
     }
 
     const shouldRetry = pushVideoResult.shouldRetry || pushAudioResult.shouldRetry || pushScreenshareResult.shouldRetry;
-
     if (updated) {
       this.stateUpdated.emit(this._state);
     }
@@ -356,7 +360,6 @@ export class MediaManager extends Resource {
     }
 
     const ctx = this._ctx.derive();
-
     try {
       return {
         track: await this._state.peer!.pushTrack({

package/src/calls/util/calls-service.ts

@@ -14,7 +14,6 @@ import {
   type TrackObject,
   type TracksResponse,
 } from '../types';
-
 import { HistoryCache } from './history-cache';
 import { BulkRequestDispatcher, FIFOScheduler } from './task-scheduling';
 
@@ -27,7 +26,7 @@ export type Session = {
 
 export type CallsServiceConfig = {
   apiBase: string;
-  apiExtraParams?: string;
+  apiExtraProps?: string;
   iceServers?: RTCIceServer[];
 };
 

package/src/calls/util/stub-media-streams.ts

@@ -60,13 +60,12 @@ const userGestureEvents = [
  */
 export const createInaudibleAudioStreamTrack = async ({ ctx }: { ctx: Context }): Promise<MediaStreamTrack> => {
   const audioContext = new window.AudioContext();
+
   const oscillator = audioContext.createOscillator();
   oscillator.type = 'triangle';
-  // roughly sounds like a box fan
   oscillator.frequency.setValueAtTime(20, audioContext.currentTime);
 
   const gainNode = audioContext.createGain();
-  // even w/ gain at 0 some packets are sent
   gainNode.gain.setValueAtTime(0, audioContext.currentTime);
   oscillator.connect(gainNode);
 
@@ -85,6 +84,7 @@ export const createInaudibleAudioStreamTrack = async ({ ctx }: { ctx: Context })
       audioContextStartedPreviously = true;
       ensureOscillatorStarted();
     }
+
     if (audioContext.state === 'suspended' || (audioContext.state as string) === 'interrupted') {
       resumeAudioContext();
     }

package/src/calls/util/task-scheduling.ts

@@ -27,8 +27,8 @@ export class FIFOScheduler {
 }
 
 // TODO(mykola): Reconcile with @dxos/async task scheduling.
-export class BulkRequestDispatcher<RequestEntryParams, BulkResponse> {
-  #currentBatch: RequestEntryParams[];
+export class BulkRequestDispatcher<RequestEntryProps, BulkResponse> {
+  #currentBatch: RequestEntryProps[];
   #currentBulkResponse: Promise<BulkResponse> | null;
   #batchSizeLimit: number;
 
@@ -43,8 +43,8 @@ export class BulkRequestDispatcher<RequestEntryParams, BulkResponse> {
    * At the event loop iteration end, the accumulated entries will be dispatched as a bulk request.
    */
   doBulkRequest(
-    params: RequestEntryParams,
-    bulkRequestFunc: (bulkCopy: RequestEntryParams[]) => Promise<BulkResponse>,
+    params: RequestEntryProps,
+    bulkRequestFunc: (bulkCopy: RequestEntryProps[]) => Promise<BulkResponse>,
   ): Promise<BulkResponse> {
     if (this.#currentBatch.length >= this.#batchSizeLimit) {
       // If it reaches the batch size limit, we make another bulk request.

package/src/calls-service.stories.tsx

@@ -12,13 +12,14 @@ import { log } from '@dxos/log';
 import { Config, useConfig } from '@dxos/react-client';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { Button } from '@dxos/react-ui';
+import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { withTheme } from '@dxos/react-ui/testing';
-import { Json } from '@dxos/react-ui-syntax-highlighter';
 
 const testVideo = new URL('../testing/video.mp4', import.meta.url).href;
 
+import { useBlackCanvasStreamTrack, useInaudibleAudioStreamTrack, useVideoStreamTrack } from '#hooks';
+
 import { CALLS_URL, CallsServicePeer, type TrackObject } from './calls';
-import { useBlackCanvasStreamTrack, useInaudibleAudioStreamTrack, useVideoStreamTrack } from './hooks';
 
 // TODO(burdon): THIS IS TOO COMPLEX FOR A TEST SETUP.
 const pushAndPullTrack = (mediaStreamTrack?: MediaStreamTrack) => {
@@ -130,9 +131,9 @@ const pushAndPullTrack = (mediaStreamTrack?: MediaStreamTrack) => {
   };
 };
 
-type StoryProps = { source: string };
+type DefaultStoryProps = { source: string };
 
-const DefaultStory = ({ source }: StoryProps) => {
+const DefaultStory = ({ source }: DefaultStoryProps) => {
   const pushVideoElement = useRef<HTMLVideoElement>(null);
   const pullVideoElement = useRef<HTMLVideoElement>(null);
   // Get video stream track.
@@ -166,16 +167,16 @@ const DefaultStory = ({ source }: StoryProps) => {
           Re-pull video
         </Button>
       </div>
-      <Json data={metrics} />
+      <JsonHighlighter data={metrics} />
     </div>
   );
 };
 
 const meta = {
-  title: 'plugins/plugin-thread/calls-service',
+  title: 'plugins/plugin-thread/experimental/Calls',
   render: DefaultStory,
   decorators: [
-    withTheme,
+    withTheme(),
     withClientProvider({
       config: new Config({
         runtime: {
@@ -208,7 +209,7 @@ export const InaudibleAudioStreamTrack = {
 
     return (
       <div className='flex flex-col gap-4 items-center'>
-        <Json data={metrics} />
+        <JsonHighlighter data={metrics} />
         <Button onClick={rePullTrack}>Re-pull audio</Button>
       </div>
     );
@@ -221,7 +222,7 @@ export const BlackVideoStreamTrack = {
     const { rePullTrack, metrics } = pushAndPullTrack(videoStreamTrack);
     return (
       <div className='flex flex-col gap-4 items-center'>
-        <Json data={metrics} />
+        <JsonHighlighter data={metrics} />
         <Button onClick={rePullTrack}>Re-pull audio</Button>
       </div>
     );