@signalwire/js 3.26.0 → 3.27.0-dev.202404301530.94a97d7.0

package/src/index.ts

@@ -30,8 +30,6 @@ import type {
   VideoMemberEntity,
 } from '@signalwire/core'
 
-import { SWClient, SignalWire } from './fabric'
-
 /** @ignore @deprecated */
 export type RoomStartedEventName = RoomStarted
 /** @ignore @deprecated */
@@ -59,10 +57,10 @@ export * as PubSub from './pubSub'
 
 /**
  * CallFabric namespace
- * @internal
  */
 export * as Fabric from './fabric'
-export { SWClient, SignalWire }
+export { SWClient, SignalWire } from './fabric'
+export * from './fabric/types'
 
 /**
  * The Video namespace contains the classes and functions that you need to
@@ -78,9 +76,6 @@ export * as Video from './video'
  */
 export * as WebRTC from './webrtc'
 
-export type { VideoPosition, VideoPositions } from '@signalwire/core'
-
-/** @ignore */
 export type {
   BaseComponentOptions,
   BaseConnectionState,
@@ -100,15 +95,36 @@ export type {
   MemberTalkingEventNames,
   VideoMemberTalkingEventParams,
   InternalVideoMemberEntity,
+  VideoPosition,
+  VideoPositions,
+  /**
+   * Call Fabric types
+   */
+  GetAddressesOptions,
+  Address,
+  FetchAddressResponse,
+  GetConversationsOptions,
+  Conversation,
+  FetchConversationsResponse,
+  GetMessagesOptions,
+  ConversationMessage,
+  FetchConversationMessagesResponse,
+  GetConversationMessagesOptions,
+  SubscriberInfoResponse,
+  ConversationMessageEventName,
+  ConversationMessageEvent,
+  ConversationEventParams,
+  ConversationEvent,
+  RegisterDeviceParams,
+  UnregisterDeviceParams,
+  RegisterDeviceResponse,
 } from '@signalwire/core'
 
-/** @ignore */
 export type {
   BaseConnectionOptions,
   ConnectionOptions,
 } from '@signalwire/webrtc'
 
-/** @ignore */
 export type {
   RoomSessionObjectEventsHandlerMap,
   RoomSessionObjectEvents,

package/src/testUtils.ts

@@ -98,3 +98,86 @@ export const dispatchMockedRoomSubscribed = ({
 
   session.dispatch(actions.socketMessageAction(payload))
 }
+
+export const dispatchMockedCallJoined = ({
+  session,
+  roomId,
+  roomSessionId,
+  memberId,
+  memberId2 = 'member-id-random',
+  callId,
+  nodeId,
+}: {
+  session: any
+  roomSessionId: string
+  roomId: string
+  memberId: string
+  memberId2?: string
+  callId: string
+  nodeId: string
+}) => {
+  const payload = {
+    jsonrpc: '2.0',
+    id: 'cb78f2eb-6468-48ed-979d-a94fca47befe',
+    method: 'signalwire.event',
+    params: {
+      event_type: 'call.joined',
+      event_channel:
+        'signalwire_0c1c9852-b9d4-4a18-ba3b-eeafe1ffe504_13451811-bd4c-4646-b3ce-250581a7956e_94df1ecd-d073-473d-aa4d-a286e24f679b',
+      params: {
+        room_session: {
+          room_id: roomId,
+          room_session_id: roomSessionId,
+          event_channel:
+            'signalwire_0c1c9852-b9d4-4a18-ba3b-eeafe1ffe504_13451811-bd4c-4646-b3ce-250581a7956e_94df1ecd-d073-473d-aa4d-a286e24f679b',
+          layout_name: '1x1',
+          meta: {},
+          members: [
+            {
+              type: 'member',
+              call_id: callId,
+              member_id: memberId,
+              node_id: nodeId,
+              name: 'sip:foo@94df1ecd-d073-473d-aa4d-a286e24f679b.call.signalwire.com;context=private',
+              room_id: roomId,
+              room_session_id: roomSessionId,
+              visible: true,
+              handraised: false,
+              audio_muted: false,
+              video_muted: false,
+              deaf: false,
+              meta: {},
+            },
+            {
+              type: 'member',
+              call_id: callId,
+              member_id: memberId2,
+              node_id: nodeId,
+              name: 'sip:foo@94df1ecd-d073-473d-aa4d-a286e24f679b.call.signalwire.com;context=private',
+              room_id: roomId,
+              room_session_id: roomSessionId,
+              visible: true,
+              handraised: false,
+              audio_muted: false,
+              video_muted: false,
+              deaf: false,
+              meta: {},
+            },
+          ],
+          recordings: [],
+          streams: [],
+          playbacks: [],
+        },
+        room_id: roomId,
+        room_session_id: roomSessionId,
+        call_id: callId,
+        member_id: memberId,
+        node_id: nodeId,
+      },
+      timestamp: 1712142454.67701,
+    },
+  }
+
+  // @ts-expect-error
+  session.dispatch(actions.socketMessageAction(payload))
+}

package/src/utils/UnifiedRequestMapper.ts

@@ -0,0 +1,149 @@
+import { InternalUnifiedMethodTarget } from '../../../core/src'
+
+export type UnifiedResquestMapFunction = (
+  requestMessage: any,
+  self: InternalUnifiedMethodTarget,
+  targets?: InternalUnifiedMethodTarget[]
+) => void
+
+const toServerUnifiedTarget = ({
+  memberId: member_id,
+  callId: call_id,
+  nodeId: node_id,
+}: InternalUnifiedMethodTarget) => ({ member_id, call_id, node_id })
+
+const toServerUnifedParams = (
+  self: InternalUnifiedMethodTarget,
+  targets: InternalUnifiedMethodTarget[] = []
+) => {
+  return {
+    self: toServerUnifiedTarget(self),
+    target: targets.length == 1 ? toServerUnifiedTarget(targets[0]) : undefined,
+    targets:
+      targets.length > 1 ? targets.map(toServerUnifiedTarget) : undefined,
+  }
+}
+
+const unifiedPayload = (
+  method: string,
+  id: string,
+  self: InternalUnifiedMethodTarget,
+  targets: InternalUnifiedMethodTarget[] = [],
+  extra = {}
+) => ({
+  jsonrpc: '2.0',
+  id,
+  method,
+  params: {
+    ...extra,
+    ...toServerUnifedParams(self, targets),
+  },
+})
+
+const withChannelsPayload = (
+  method: string,
+  channels: string[],
+  id: string,
+  self: InternalUnifiedMethodTarget,
+  targets: InternalUnifiedMethodTarget[]
+) => unifiedPayload(method, id, self, targets, { channels })
+
+export const UnifiedRequestMapper: Record<string, UnifiedResquestMapFunction> =
+  {
+    'video.member.audio_mute': (requestMessage, self, targets) =>
+      withChannelsPayload(
+        'call.mute',
+        ['audio'],
+        requestMessage.id,
+        self,
+        targets!
+      ),
+
+    'video.member.audio_unmute': (requestMessage, self, targets) =>
+      withChannelsPayload(
+        'call.unmute',
+        ['audio'],
+        requestMessage.id,
+        self,
+        targets!
+      ),
+
+    'video.member.video_mute': (requestMessage, self, targets) =>
+      withChannelsPayload(
+        'call.mute',
+        ['video'],
+        requestMessage.id,
+        self,
+        targets!
+      ),
+
+    'video.member.video_unmute': (requestMessage, self, targets) =>
+      withChannelsPayload(
+        'call.unmute',
+        ['video'],
+        requestMessage.id,
+        self,
+        targets!
+      ),
+
+    'video.member.deaf': (requestMessage, self, targets) =>
+      unifiedPayload('call.deaf', requestMessage.id, self, targets),
+
+    'video.member.undeaf': (requestMessage, self, targets) =>
+      unifiedPayload('call.undeaf', requestMessage.id, self, targets),
+
+    'video.list_available_layouts': (requestMessage, self) =>
+      unifiedPayload('call.layout.list', requestMessage, self),
+
+    'video.members.get': (requestMessage, self) =>
+      unifiedPayload('call.member.list', requestMessage, self),
+
+    'video.member.remove': (requestMessage, self, targets) =>
+      unifiedPayload('call.member.remove', requestMessage.id, self, targets),
+
+    'video.set_layout': (requestMessage, self, targets) => {
+      const extra = {
+        layout: Object.values(requestMessage.params.positions)[0],
+      }
+      return unifiedPayload(
+        'call.layout.set',
+        requestMessage.id,
+        self,
+        targets,
+        extra
+      )
+    },
+
+    'video.member.set_input_volume': (requestMessage, self, targets) => {
+      const { volume } = requestMessage.params
+      return unifiedPayload(
+        'call.microphone.volume.set',
+        requestMessage.id,
+        self,
+        targets,
+        { volume }
+      )
+    },
+
+    'video.member.set_output_volume': (requestMessage, self, targets) => {
+      const { volume } = requestMessage.params
+      return unifiedPayload(
+        'call.speaker.volume.set',
+        requestMessage.id,
+        self,
+        targets,
+        { volume }
+      )
+    },
+
+    'video.member.set_input_sensitivity': (requestMessage, self, targets) => {
+      const { vslue: sensitivity } = requestMessage.params
+      return unifiedPayload(
+        'call.microphone.sensitivity.set',
+        requestMessage.id,
+        self,
+        targets,
+        { sensitivity }
+      )
+    },
+  }

package/src/utils/aspectRatioListener.ts

@@ -0,0 +1,40 @@
+const VIDEO_SIZING_EVENTS = ['loadedmetadata', 'resize']
+
+export function aspectRatioListener({videoElement, paddingWrapper, fixInLandscapeOrientation = false, debugDivElementId = 'videoDimensionsDebug', samplingInterval = 0}: {videoElement: HTMLVideoElement, paddingWrapper: HTMLDivElement, fixInLandscapeOrientation: boolean, debugDivElementId?: string, samplingInterval?: number}) {
+    const buildHtmlContent = (event:string, width: number, height: number) => `Video dimensions on <strong>${event} event</strong>:</strong> ${width}x${height}px - fixInLandscapeOrientation: ${fixInLandscapeOrientation}`
+    const appendDebugInfo = (containerElement: HTMLElement, event:string) => {
+        const pEl = document.createElement('p')
+        pEl.innerHTML = buildHtmlContent(event, videoElement.videoWidth, videoElement.videoHeight);    
+        containerElement.appendChild(pEl);
+    }
+
+    let debugElement: HTMLElement|null;
+    try {
+        debugElement = document.getElementById(debugDivElementId);
+    } catch {}
+    
+    VIDEO_SIZING_EVENTS.forEach(event => videoElement.addEventListener(event, () => {
+            const paddingBottom = fixInLandscapeOrientation ? '56.25' : 
+                (videoElement.videoHeight / videoElement.videoWidth) * 100
+            paddingWrapper.style.paddingBottom = `${paddingBottom}%`
+            if(debugElement) {
+                appendDebugInfo(debugElement, event)
+            }
+        }));
+
+        if(samplingInterval > 0) {
+            setInterval(() => {
+                const paddingBottom = (videoElement.videoHeight / videoElement.videoWidth) * 100
+                paddingWrapper.style.paddingBottom = `${paddingBottom}%`
+                if(debugElement) {
+                    let statsElement = debugElement.querySelector('.timer-values')
+                    if(!statsElement) {
+                        statsElement = document.createElement('div');
+                        statsElement.className = 'timer-values'
+                        debugElement.appendChild(statsElement);
+                    }
+                    appendDebugInfo(debugElement, 'timer')
+                }
+            });            
+        }   
+}

package/src/utils/interfaces.ts

@@ -37,6 +37,7 @@ import type {
   VideoRoomDeviceDisconnectedEventNames,
   DeviceDisconnectedEventParams,
   VideoRoomDeviceEventNames,
+  InternalUnifiedMethodTarget,
 } from '@signalwire/core'
 import { INTERNAL_MEMBER_UPDATABLE_PROPS } from '@signalwire/core'
 import type { MediaEvent } from '@signalwire/webrtc'
@@ -197,6 +198,8 @@ export interface MemberCommandWithValueParams extends MemberCommandParams {
 export interface BaseRoomInterface {
   join(): Promise<unknown>
   leave(): Promise<unknown>
+  self?: InternalUnifiedMethodTarget
+  target?: InternalUnifiedMethodTarget
 }
 
 export interface LocalOverlay {

package/src/utils/makeQueryParamsUrl.ts

@@ -0,0 +1,14 @@
+/**
+ * Constructs a URL with query parameters.
+ *
+ * @param path The base path of the URL.
+ * @param queryParams An instance of URLSearchParams containing all query parameters.
+ * @returns The constructed URL with query parameters.
+ */
+export function makeQueryParamsUrls(
+  path: string,
+  queryParams: URLSearchParams
+): string {
+  const queryString = queryParams.toString()
+  return queryString ? `${path}?${queryString}` : path
+}

package/src/utils/paginatedResult.ts

@@ -0,0 +1,34 @@
+import { PaginatedResponse } from '@signalwire/core'
+import { CreateHttpClient } from '../fabric/createHttpClient'
+
+export function buildPaginatedResult<T>(
+  body: PaginatedResponse<T>,
+  client: CreateHttpClient
+) {
+  const anotherPage = async <T>(url: string) => {
+    const { body } = await client<PaginatedResponse<T>>(url)
+    return buildPaginatedResult(body, client)
+  }
+
+  return {
+    data: body.data,
+    self: async () => {
+      const { self } = body.links
+      return self ? anotherPage(self) : undefined
+    },
+    nextPage: async () => {
+      const { next } = body.links
+      return next ? anotherPage(next) : undefined
+    },
+    prevPage: async () => {
+      const { prev } = body.links
+      return prev ? anotherPage(prev) : undefined
+    },
+    firstPage: async () => {
+      const { first } = body.links
+      return first ? anotherPage(first) : undefined
+    },
+    hasNext: Boolean(body.links.next),
+    hasPrev: Boolean(body.links.prev),
+  }
+}

package/src/utils/videoElement.ts

@@ -183,6 +183,10 @@ const setVideoMediaTrack = ({
   })
 }
 
+/**
+ * @deprecated
+ * FIXME remove this in the future
+ */
 const createRootElementResizeObserver = ({
   video,
   rootElement,

package/src/video/videoMemberWorker.ts

@@ -0,0 +1,107 @@
+import {
+  InternalVideoMemberUpdatedEvent,
+  MapToPubSubShape,
+  MemberTalkingEventNames,
+  RoomSessionMember,
+  Rooms,
+  SagaIterator,
+  VideoMemberEventNames,
+  VideoMemberJoinedEvent,
+  VideoMemberLeftEvent,
+  VideoMemberTalkingEvent,
+  VideoMemberUpdatedEvent,
+  getLogger,
+  stripNamespacePrefix,
+} from '@signalwire/core'
+import { VideoWorkerParams } from './videoWorker'
+
+type VideoMemberEvents = MapToPubSubShape<
+  | VideoMemberJoinedEvent
+  | VideoMemberLeftEvent
+  | VideoMemberUpdatedEvent
+  | VideoMemberTalkingEvent
+  | InternalVideoMemberUpdatedEvent
+>
+
+export const videoMemberWorker = function* (
+  options: VideoWorkerParams<VideoMemberEvents>
+): SagaIterator {
+  getLogger().trace('videoMemberWorker started')
+  const {
+    instance: roomSession,
+    callSegments,
+    action: { type, payload },
+    instanceMap: { get, set, remove },
+  } = options
+
+  // For now, we are not storing the RoomSession object in the instance map
+
+  const memberId = payload.member?.id || payload.member?.member_id
+
+  let memberInstance = get<RoomSessionMember>(memberId!)
+  if (!memberInstance) {
+    memberInstance = Rooms.createRoomSessionMemberObject({
+      store: roomSession.store,
+      payload: payload as Rooms.RoomSessionMemberEventParams,
+    })
+  } else {
+    memberInstance.setPayload(payload as Rooms.RoomSessionMemberEventParams)
+  }
+  set<RoomSessionMember>(memberId!, memberInstance)
+
+  /**
+   * If the incoming event is for the self member
+   * Send the payload with a member id from the first call segment for a consistent member id
+   */
+  let newPayload = { ...payload }
+  const currentCallSegment = callSegments[callSegments.length - 1]
+  if (payload.member.member_id === currentCallSegment.memberId) {
+    // FIXME: We should emit the RoomSessionMember instance
+    // @ts-expect-error
+    newPayload = {
+      ...payload,
+      member: {
+        ...payload.member,
+        id: roomSession.callSegments[0].memberId,
+        member_id: roomSession.callSegments[0].memberId,
+      },
+    }
+  }
+
+  const event = stripNamespacePrefix(type) as VideoMemberEventNames
+
+  if (type.startsWith('video.member.updated.')) {
+    roomSession.emit(event, newPayload)
+  }
+
+  switch (type) {
+    case 'video.member.joined':
+    case 'video.member.updated':
+      roomSession.emit(event, newPayload)
+      break
+    case 'video.member.left':
+      roomSession.emit(event, newPayload)
+      remove<RoomSessionMember>(memberId!)
+      break
+    case 'video.member.talking':
+      roomSession.emit(event, newPayload)
+      if ('talking' in payload.member) {
+        const suffix = payload.member.talking ? 'started' : 'ended'
+        roomSession.emit(
+          `${event}.${suffix}` as MemberTalkingEventNames,
+          newPayload
+        )
+
+        // Keep for backwards compatibility
+        const deprecatedSuffix = payload.member.talking ? 'start' : 'stop'
+        roomSession.emit(
+          `${event}.${deprecatedSuffix}` as MemberTalkingEventNames,
+          newPayload
+        )
+      }
+      break
+    default:
+      break
+  }
+  getLogger().trace('videoMemberWorker ended')
+}

package/src/video/videoRoomWorker.ts

@@ -0,0 +1,103 @@
+import {
+  getLogger,
+  SagaIterator,
+  MapToPubSubShape,
+  Rooms,
+  RoomSessionMember,
+  VideoRoomEvent,
+  sagaEffects,
+  MemberPosition,
+  InternalMemberUpdatedEventNames,
+  InternalVideoMemberEntity,
+} from '@signalwire/core'
+import { VideoWorkerParams } from './videoWorker'
+import { videoMemberWorker } from './videoMemberWorker'
+
+export const videoRoomWorker = function* (
+  options: VideoWorkerParams<MapToPubSubShape<VideoRoomEvent>>
+): SagaIterator {
+  getLogger().trace('videoRoomWorker started')
+  const { action, ...memberPositionWorkerParams } = options
+  const { type, payload } = action
+  const {
+    instance: roomSession,
+    instanceMap: { get, set },
+  } = options
+
+  // For now, we are not storing the RoomSession object in the instance map
+
+  // Upsert member in the instance map
+  if ((payload.room_session?.members?.length || 0) > 0) {
+    ;(payload.room_session.members || []).forEach((member) => {
+      const memberId = member.id || member.member_id!
+      const roomSessionId =
+        payload.room_session.id || payload.room_session.room_session_id!
+
+      let memberInstance = get<RoomSessionMember>(memberId)
+      if (!memberInstance) {
+        memberInstance = Rooms.createRoomSessionMemberObject({
+          store: roomSession.store,
+          payload: {
+            room_id: payload.room_session.room_id,
+            room_session_id: roomSessionId,
+            member: member as InternalVideoMemberEntity & { talking: boolean },
+          },
+        })
+      } else {
+        memberInstance.setPayload({
+          room_id: payload.room_session.room_id,
+          room_session_id: roomSessionId,
+          member: member as InternalVideoMemberEntity & { talking: boolean },
+        })
+      }
+      set<RoomSessionMember>(memberId, memberInstance)
+    })
+  }
+
+  switch (type) {
+    case 'video.room.started': {
+      roomSession.emit('room.started', payload)
+      break
+    }
+    case 'video.room.updated': {
+      roomSession.emit('room.updated', payload)
+      break
+    }
+    case 'video.room.ended': {
+      roomSession.emit('room.ended', payload)
+      break
+    }
+    case 'video.room.subscribed': {
+      yield sagaEffects.spawn(MemberPosition.memberPositionWorker, {
+        ...memberPositionWorkerParams,
+        instance: roomSession,
+        initialState: payload,
+        dispatcher: function* (
+          subType: InternalMemberUpdatedEventNames,
+          subPayload
+        ) {
+          yield sagaEffects.fork(videoMemberWorker, {
+            ...options,
+            action: { type: subType, payload: subPayload },
+          })
+        },
+      })
+      for (const memberPayload of payload.room_session.members) {
+        //@ts-expect-error
+        yield sagaEffects.fork(videoMemberWorker, {
+          ...options,
+          action: {
+            type: 'video.member.joined',
+            payload: { member: memberPayload },
+          },
+        })
+      }
+      roomSession.emit('room.subscribed', payload)
+      break
+    }
+    default:
+      break
+  }
+
+  getLogger().trace('videoRoomWorker ended')
+}

package/src/video/videoWorker.ts

@@ -23,6 +23,8 @@ export type VideoWorkerParams<T> = SDKWorkerParams<RoomSessionConnection> & {
 export const videoWorker: SDKWorker<RoomSessionConnection> = function* (
   options
 ): SagaIterator {
+  getLogger().trace('videoWorker started')
+
   const { channels, instance: roomSession } = options
   const { swEventChannel } = channels
 
@@ -80,14 +82,17 @@ export const videoWorker: SDKWorker<RoomSessionConnection> = function* (
         break
     }
 
-    roomSession.emit(stripNamespacePrefix(type) as VideoAPIEventNames, payload)
+    const event = stripNamespacePrefix(type, 'video') as VideoAPIEventNames
+    roomSession.emit(event, payload)
   }
 
-  const isVideoEvent = (action: SDKActions) => action.type.startsWith('video.')
+  const isVideoOrCallEvent = (action: SDKActions) => {
+    return action.type.startsWith('video.') || action.type.startsWith('call.')
+  }
 
   while (true) {
     const action: MapToPubSubShape<VideoAPIEventParams> =
-      yield sagaEffects.take(swEventChannel, isVideoEvent)
+      yield sagaEffects.take(swEventChannel, isVideoOrCallEvent)
 
     yield sagaEffects.fork(worker, action)
   }