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

package/src/fabric/workers/callFabricWorker.ts

@@ -0,0 +1,121 @@
+import {
+  SDKActions,
+  SDKWorker,
+  SagaIterator,
+  getLogger,
+  sagaEffects,
+  VideoAction,
+  CallFabricAction,
+  SDKWorkerParams,
+  VideoMemberEventNames,
+  VideoRoomSessionEventNames,
+} from '@signalwire/core'
+import { CallFabricRoomSessionConnection } from '../CallFabricBaseRoomSession'
+import * as videoWorkers from '../../video/workers'
+import { callJoinWorker } from './callJoinWorker'
+import { callLeftWorker } from './callLeftWorker'
+import { callStateWorker } from './callStateWorker'
+
+export type CallFabricWorkerParams<T> =
+  SDKWorkerParams<CallFabricRoomSessionConnection> & {
+    action: T
+  }
+
+export const callFabricWorker: SDKWorker<CallFabricRoomSessionConnection> =
+  function* (options): SagaIterator {
+    getLogger().trace('callFabricWorker started')
+
+    const { channels, instance: roomSession } = options
+    const { swEventChannel } = channels
+
+    function* worker(action: VideoAction | CallFabricAction) {
+      const { type, payload } = action
+
+      switch (type) {
+        case 'call.joined': {
+          yield sagaEffects.fork(callJoinWorker, {
+            action,
+            ...options,
+          })
+          return
+        }
+        case 'call.left': {
+          yield sagaEffects.fork(callLeftWorker, {
+            action,
+            ...options,
+          })
+          return
+        }
+        case 'call.state': {
+          yield sagaEffects.fork(callStateWorker, {
+            action,
+            ...options,
+          })
+          return
+        }
+        case 'call.started':
+        case 'call.updated':
+        case 'call.ended': {
+          const action = type.split('.')[1]
+          const newEventName = `room.${action}` as VideoRoomSessionEventNames
+          roomSession.emit(newEventName, payload)
+          break
+        }
+        case 'member.joined':
+        case 'member.left':
+        case 'member.updated':
+        case 'member.talking': {
+          const updatedAction = {
+            ...action,
+            type: `video.${type}` as VideoMemberEventNames,
+          }
+          // @ts-expect-error
+          yield sagaEffects.fork(videoWorkers.videoMemberWorker, {
+            action: updatedAction,
+            ...options,
+          })
+          return
+        }
+        case 'layout.changed': {
+          const updatedAction = {
+            ...action,
+            type: `video.${type}` as 'video.layout.changed',
+          }
+          yield sagaEffects.put(swEventChannel, updatedAction)
+          break
+        }
+        case 'member.demoted':
+        case 'member.promoted': {
+          const updatedAction = {
+            ...action,
+            type: `video.${type}` as
+              | 'video.member.demoted'
+              | 'video.member.promoted',
+          }
+          yield sagaEffects.put(swEventChannel, updatedAction)
+          return
+        }
+        default:
+          break
+      }
+
+      // @ts-expect-error
+      roomSession.emit(type, payload)
+    }
+
+    const isVideoOrCallEvent = (action: SDKActions) => {
+      return (
+        action.type.startsWith('call.') ||
+        action.type.startsWith('member.') ||
+        action.type.startsWith('layout.')
+      )
+    }
+
+    while (true) {
+      const action = yield sagaEffects.take(swEventChannel, isVideoOrCallEvent)
+
+      yield sagaEffects.fork(worker, action)
+    }
+
+    getLogger().trace('callFabricWorker ended')
+  }

package/src/fabric/workers/callJoinWorker.ts

@@ -0,0 +1,90 @@
+import {
+  getLogger,
+  SagaIterator,
+  MapToPubSubShape,
+  CallJoinedEvent,
+  sagaEffects,
+  RoomSessionMember,
+  Rooms,
+  MemberPosition,
+  InternalMemberUpdatedEventNames,
+} from '@signalwire/core'
+import { CallFabricWorkerParams } from './callFabricWorker'
+import { createCallSegmentObject } from '../CallSegment'
+import { videoMemberWorker } from '../../video/videoMemberWorker'
+
+export const callJoinWorker = function* (
+  options: CallFabricWorkerParams<MapToPubSubShape<CallJoinedEvent>>
+): SagaIterator {
+  getLogger().trace('callJoinWorker started')
+  const { action, callSegments, instanceMap, instance: cfRoomSession } = options
+  const { payload } = action
+  const { get, set } = instanceMap
+
+  const memberInstances = payload.room_session.members?.map((member: any) => {
+    let memberInstance = get<RoomSessionMember>(member.member_id!)
+    if (!memberInstance) {
+      memberInstance = Rooms.createRoomSessionMemberObject({
+        store: cfRoomSession.store,
+        payload: {
+          room_id: payload.room_id,
+          room_session_id: payload.room_session_id,
+          member,
+        },
+      })
+    } else {
+      memberInstance.setPayload({
+        room_id: payload.room_id,
+        room_session_id: payload.room_session_id,
+        member: member,
+      })
+    }
+    set<RoomSessionMember>(member.member_id, memberInstance)
+    return memberInstance
+  })
+
+  const callSegmentInstance = createCallSegmentObject({
+    store: cfRoomSession.store,
+    payload: {
+      ...payload,
+      members: memberInstances!,
+    },
+  })
+  callSegments.push(callSegmentInstance)
+
+  cfRoomSession.runWorker('memberPositionWorker', {
+    worker: MemberPosition.memberPositionWorker,
+    ...options,
+    // @ts-expect-error
+    instance: cfRoomSession,
+    initialState: payload,
+    dispatcher: function* (
+      subType: InternalMemberUpdatedEventNames,
+      // @ts-expect-error
+      subPayload
+    ) {
+      yield sagaEffects.fork(videoMemberWorker, {
+        ...options,
+        action: { type: subType, payload: subPayload },
+      })
+    },
+  })
+
+  // FIXME: Why do we need to emit member.joined from here?
+  for (const memberPayload of payload.room_session.members || []) {
+    // @ts-expect-error
+    yield sagaEffects.fork(videoMemberWorker, {
+      ...options,
+      action: {
+        type: 'video.member.joined',
+        payload: { member: memberPayload },
+      },
+    })
+  }
+  cfRoomSession.emit('room.subscribed', payload)
+
+  // @ts-expect-error
+  cfRoomSession.emit('call.joined', payload)
+
+  getLogger().trace('callJoinWorker ended')
+}

package/src/fabric/workers/callLeftWorker.ts

@@ -0,0 +1,47 @@
+import {
+  getLogger,
+  SagaIterator,
+  MapToPubSubShape,
+  CallLeftEvent,
+  RoomSessionMember,
+  Rooms,
+} from '@signalwire/core'
+import { CallFabricWorkerParams } from './callFabricWorker'
+
+export const callLeftWorker = function* (
+  options: CallFabricWorkerParams<MapToPubSubShape<CallLeftEvent>>
+): SagaIterator {
+  getLogger().trace('callLeftWorker started')
+
+  const {
+    action: { payload },
+    instance: cfRoomSession,
+    callSegments,
+    instanceMap,
+  } = options
+
+  const { call_id, room_session_id } = payload
+
+  // Remove the call segment
+  const segmentToRemoveIndex = callSegments.findIndex(
+    (segment) => segment.callId == call_id
+  )
+  if (segmentToRemoveIndex >= 0) {
+    callSegments.splice(segmentToRemoveIndex, 1)
+  }
+
+  // Remove all the member instance where roomSessionId matches
+  instanceMap.getAll<RoomSessionMember>().forEach(([key, obj]) => {
+    if (
+      obj instanceof Rooms.RoomSessionMemberAPI &&
+      obj.roomSessionId === room_session_id
+    ) {
+      instanceMap.remove(key)
+    }
+  })
+
+  // @ts-expect-error
+  cfRoomSession.emit('call.left', payload)
+
+  getLogger().trace('callLeftWorker ended')
+}

package/src/fabric/workers/callStateWorker.ts

@@ -0,0 +1,39 @@
+import {
+  getLogger,
+  SagaIterator,
+  MapToPubSubShape,
+  CallStateEvent,
+} from '@signalwire/core'
+import { CallFabricWorkerParams } from './callFabricWorker'
+
+export const callStateWorker = function* (
+  options: CallFabricWorkerParams<MapToPubSubShape<CallStateEvent>>
+): SagaIterator {
+  getLogger().trace('callStateWorker started')
+
+  const {
+    instance: cfRoomSession,
+    action: { payload },
+    callSegments,
+  } = options
+
+  switch (payload.call_state) {
+    case 'ended': {
+      // @ts-expect-error
+      cfRoomSession.emit('call.state', payload)
+      // Perfrom the SDK cleanup if callSegments are empty and state is 'destroy'
+      // @ts-expect-error
+      if (callSegments.length < 1 && cfRoomSession.state === 'destroy') {
+        console.log('>> destroy')
+        cfRoomSession.destroy()
+      }
+      break
+    }
+    default:
+      // @ts-expect-error
+      cfRoomSession.emit('call.state', payload)
+      break
+  }
+
+  getLogger().trace('callStateWorker ended')
+}

package/src/fabric/workers/conversationWorker.ts

@@ -0,0 +1,41 @@
+import {
+  getLogger,
+  sagaEffects,
+  SagaIterator,
+  SDKWorker,
+  SDKActions,
+  MapToPubSubShape,
+  ConversationEvent,
+} from '@signalwire/core'
+import { Conversation } from '../Conversation'
+import { Client } from '../Client'
+
+interface ConversationWorkerInitialState {
+  conversation: Conversation
+}
+
+export const conversationWorker: SDKWorker<Client> = function* (
+  options
+): SagaIterator {
+  getLogger().debug('conversationWorker started')
+  const {
+    channels: { swEventChannel },
+    initialState,
+  } = options
+
+  const { conversation } = initialState as ConversationWorkerInitialState
+
+  const isConversationEvent = (action: SDKActions) => {
+    return action.type === 'conversation.message'
+  }
+
+  while (true) {
+    const action: MapToPubSubShape<ConversationEvent> = yield sagaEffects.take(
+      swEventChannel,
+      isConversationEvent
+    )
+    conversation.handleEvent(action.payload)
+  }
+
+  getLogger().trace('conversationWorker ended')
+}

package/src/fabric/workers/index.ts

@@ -0,0 +1,5 @@
+export * from './wsClientWorker'
+export * from './conversationWorker'
+export * from './unifiedTargetWorker'
+export * from './unifiedEventsWatcher'
+export * from './callFabricWorker'

package/src/fabric/workers/mappers/unifiedEventsMapper.ts

@@ -0,0 +1,54 @@
+import { PubSubAction, MappableObject, mapObject } from '@signalwire/core'
+
+const EVENT_MAPPINGS: Record<string, string[]> = {
+  // 'call.state': [
+  // 'call.state.[call_state]',
+  // 'video.room.[call_state]',
+  // 'video.room.[call_state(created:started)]',
+  // ],
+  // 'call.play': ['call.play.[state]'],
+  // 'call.collect': ['call.collect.[collect_state]'],
+  // 'call.connect': ['call.connect.[connect_state]'],
+  'call.joined': ['video.room.subscribed'],
+  'call.audience_count': ['video.room.audience_count'],
+  'call.denoise': ['call.denoise'],
+  // 'call.detect': ['call.detect.[detect_state]'],
+  'call.dial': ['call.dial.[dial_state]'],
+  'call.send_digits': ['call.send_digits', 'video.room.send_digits'], //TODO double check
+  'call.refer': ['calling.call.refer'],
+  'call.received': ['call.received'],
+  // 'call.fax': ['call.fax.[fax_state]'],
+  // 'call.hold': ['call.hold.[fax_state]'],
+  // 'call.prompt': ['call.prompt.[prompt_state]'],
+  'call.started': ['video.room.started'],
+  'call.subscribed': ['video.room.subscribed'],
+  'call.updated': ['video.room.updated'],
+  'call.ended': ['video.room.ended'],
+  'member.joined': ['video.member.joined'],
+  'member.left': ['video.member.left'],
+  'member.updated': ['video.member.updated'],
+  'member.talking': ['video.member.talking'],
+  'member.promoted': ['video.member.promoted'],
+  'member.demoted': ['video.member.demoted'],
+  'layout.changed': ['video.layout.changed'],
+  'call.recording': ['video.room.recording.[recording_state]'],
+  'call.playback': ['video.room.playback.[playback_state]'],
+  'call.outbound_stream.started': ['video.stream.started'],
+  'call.outbound_stream.ended': ['video.stream.ended'],
+}
+
+export function fromUnifiedEvent(action: MappableObject): PubSubAction[] {
+  const { type } = action
+
+  if (!Object.keys(EVENT_MAPPINGS).includes(type)) {
+    return []
+  }
+
+  const mapDefinitions = EVENT_MAPPINGS[type]
+  const allNewActions = mapDefinitions.map((eventTemplate) =>
+    mapObject(eventTemplate, action)
+  )
+
+  //@ts-expect-error
+  return allNewActions.filter((obj?) => !!obj)
+}

package/src/fabric/workers/unifiedEventsWatcher.ts

@@ -0,0 +1,75 @@
+import {
+  MapToPubSubShape,
+  SDKActions,
+  SDKWorker,
+  SagaIterator,
+  VideoAPIEventParams,
+  getLogger,
+  sagaEffects,
+  SDKWorkerParams,
+  SwEventChannel,
+  PubSubAction,
+  isMappableObject,
+} from '@signalwire/core'
+import { RoomSessionConnection } from '../../BaseRoomSession'
+import { fromUnifiedEvent } from './mappers/unifiedEventsMapper'
+// import { unifiedTargetWorker } from './unifiedTargetWorker'
+
+export type VideoWorkerParams<T> = SDKWorkerParams<RoomSessionConnection> & {
+  action: T
+}
+
+function* eventMapperWorker({
+  action,
+  swEventChannel,
+}: {
+  action: PubSubAction
+  swEventChannel: SwEventChannel
+}) {
+  if (isMappableObject(action)) {
+    const mappedActions = fromUnifiedEvent(action)
+    for (const mappedAction of mappedActions) {
+      // @ts-expect-error
+      yield sagaEffects.put(swEventChannel, mappedAction)
+    }
+  }
+}
+
+export const unifiedEventsWatcher: SDKWorker<RoomSessionConnection> =
+  function* (options): SagaIterator {
+    const {
+      channels: { swEventChannel },
+    } = options
+
+    getLogger().debug('unifiedEventsWatcher started')
+
+    function* worker(action: any) {
+      yield sagaEffects.fork(eventMapperWorker, {
+        ...options,
+        action,
+        swEventChannel,
+      })
+
+      // // @ts-expect-error FIX ME
+      // yield sagaEffects.fork(unifiedTargetWorker, {
+      //   ...options,
+      //   action,
+      // })
+    }
+
+    const isUnifiedEvent = (action: SDKActions) =>
+      action.type.startsWith('member') ||
+      action.type.startsWith('layout') ||
+      action.type.startsWith('call')
+
+    while (true) {
+      const action: MapToPubSubShape<VideoAPIEventParams> =
+        yield sagaEffects.take(swEventChannel, isUnifiedEvent)
+
+      getLogger().debug('UnifiedEventsWatcher action:', action)
+
+      yield sagaEffects.fork(worker, action)
+    }
+
+    getLogger().trace('unifiedEventsWatcher ended')
+  }

package/src/fabric/workers/unifiedTargetWorker.ts

@@ -0,0 +1,96 @@
+import {
+  getLogger,
+  sagaEffects,
+  SagaIterator,
+  InternalUnifiedMethodTarget,
+  SDKWorker,
+} from '@signalwire/core'
+import { BaseConnection } from '@signalwire/webrtc'
+import { isUnifedJWTSession } from '../../UnifiedJWTSession'
+import { createClient } from '../../createClient'
+import { WSClientWorkerHooks } from './wsClientWorker'
+
+function getTarget(event: any): InternalUnifiedMethodTarget | undefined {
+  const { member_id } = event
+
+  if (!member_id) return undefined
+
+  const member = event.room_session.members.find(
+    (m: any) => m.member_id == member_id
+  )
+  return member
+    ? {
+        memberId: member.member_id,
+        callId: member.call_id,
+        nodeId: member.node_id,
+      }
+    : undefined
+}
+
+const segmentWatcher: SDKWorker<
+  ReturnType<typeof createClient<BaseConnection<any>>>,
+  WSClientWorkerHooks & { callId: string }
+> = function* (options) {
+  const {
+    channels: { swEventChannel },
+    callId,
+    getSession,
+  } = options
+  getLogger().debug('call watcher started from call: ${callId}')
+
+  function isSegmentEvent(action: any) {
+    //we track segments by callId not segmentId
+    return action.payload.call_id == callId
+  }
+
+  function* handleCallEvent(action: any) {
+    const session = getSession()
+    getLogger().debug('segment event handler', action)
+    if (action.type === 'call.left') {
+      if (isUnifedJWTSession(session)) {
+        session.popCallInstanceRef()
+        return true; // stop this segements watcher
+      }
+    }
+    return false
+  }
+
+  while (true) {
+    const action: any = yield sagaEffects.take(swEventChannel, isSegmentEvent)
+    const shouldStop =  yield sagaEffects.call(handleCallEvent, action)
+    if(shouldStop) break;
+  }
+
+  getLogger().debug(`call watcher ended for call: ${callId}`)
+}
+
+export const unifiedTargetWorker: SDKWorker<any> = function* (
+  options: any
+): SagaIterator {
+  const { getSession, action } = options
+  const logger = getLogger()
+  logger.debug('unifiedTargetWorker started', action)
+
+  if (action.type !== 'call.joined') return
+  const callId = action.payload.call_id
+  const session = getSession()
+
+  if (isUnifedJWTSession(session)) {
+    const target = getTarget(action.payload)
+    if (!!target) {
+      session.pushCallInstanceRef(target)
+      yield sagaEffects.spawn(segmentWatcher, {
+        ...options,
+        callId,
+      })
+    } else {
+      getLogger().warn(
+        'No target found in a call.joined event, call stack compromised'
+      )
+    }
+  } else {
+    logger.warn('unifiedEventsWatcher is runnif in a non UnifedSession')
+  }
+
+  getLogger().debug('unifiedTargetWorker stoped')
+}

package/src/fabric/{WSClientWorker.ts → workers/wsClientWorker.ts}

@@ -6,12 +6,10 @@ import {
   SDKActions,
   MapToPubSubShape,
   SDKWorkerHooks,
-  // VideoMemberJoinedEvent,
-  // componentSelectors,
-  // componentActions,
+  WebRTCMessageParams,
 } from '@signalwire/core'
-import { createClient } from '../createClient'
 import type { BaseConnection } from '@signalwire/webrtc'
+import { createClient } from '../../createClient'
 
 type WSClientWorkerOnDone = () => void
 type WSClientWorkerOnFail = (args: { error: Error }) => void
@@ -21,30 +19,28 @@ export type WSClientWorkerHooks = SDKWorkerHooks<
   WSClientWorkerOnFail
 >
 
-export const WSClientWorker: SDKWorker<
+export const wsClientWorker: SDKWorker<
   ReturnType<typeof createClient<BaseConnection<any>>>,
   WSClientWorkerHooks
 > = function* (options): SagaIterator {
-  getLogger().debug('WSClientWorker started')
-  const { channels, instance } = options
+  getLogger().trace('wsClientWorker started')
+  const { channels, initialState } = options
   const { swEventChannel } = channels
-  getLogger().debug('WSClientWorker instance', instance)
+  const { buildInboundCall } = initialState
+
   while (true) {
-    const action: MapToPubSubShape<any> = yield sagaEffects.take(
-      swEventChannel,
-      (action: SDKActions) => {
-        getLogger().debug('WSClientWorker action', action)
+    const action: MapToPubSubShape<WebRTCMessageParams> =
+      yield sagaEffects.take(swEventChannel, (action: SDKActions) => {
         if (action.type === 'webrtc.message') {
           return action.payload.method === 'verto.invite'
         }
         return false
-      }
-    )
-    getLogger().debug('Build new call to answer', action)
+      })
+    getLogger().debug('Receiving a new call over WebSocket', action)
 
-    // TODO: invoke WSClient function to build and answer the invite
-    // instance.buildInboundCall(action)
+    // Invoke WSClient function to build and answer the invite
+    buildInboundCall(action.payload.params)
   }
 
-  getLogger().trace('WSClientWorker ended')
+  getLogger().trace('wsClientWorker ended')
 }

package/src/features/mediaElements/mediaElementsSagas.ts

@@ -15,11 +15,11 @@ import {
   waitForVideoReady,
   LocalOverlay,
   addSDKPrefix,
-  createRootElementResizeObserver,
 } from '../../utils/videoElement'
 import { setAudioMediaTrack } from '../../utils/audioElement'
 import { audioSetSpeakerAction } from '../actions'
 import type { RoomSessionConnection } from '../../BaseRoomSession'
+import { aspectRatioListener } from '../../utils/aspectRatioListener'
 
 export const makeVideoElementSaga = ({
   rootElement,
@@ -354,7 +354,7 @@ function* videoElementSetupWorker({
 
     element.style.width = '100%'
     element.style.maxHeight = '100%'
-
+    
     if (!applyLocalVideoOverlay) {
       rootElement.appendChild(element)
       return
@@ -374,11 +374,16 @@ function* videoElementSetupWorker({
 
     const paddingWrapper = document.createElement('div')
     paddingWrapper.classList.add('paddingWrapper')
-    paddingWrapper.style.paddingBottom = '56.25%'
     paddingWrapper.style.position = 'relative'
     paddingWrapper.style.width = '100%'
     paddingWrapper.appendChild(mcuWrapper)
 
+    //for less then 3 participants video call, the video aspect ratio can change
+    aspectRatioListener({
+      videoElement: element, 
+      paddingWrapper, 
+      fixInLandscapeOrientation: rootElement.classList.contains('landscape-only') });
+
     const layersWrapper = document.createElement('div')
     layersWrapper.classList.add('mcuLayers')
     layersWrapper.style.display = 'none'
@@ -406,19 +411,8 @@ function* videoElementSetupWorker({
     }
     getLogger().debug('MCU is ready..')
 
-    const rootElementResizeObserver = createRootElementResizeObserver({
-      rootElement,
-      video: element,
-      paddingWrapper,
-    })
-    rootElementResizeObserver.start()
-    track.addEventListener('ended', () => {
-      if (rootElementResizeObserver) {
-        rootElementResizeObserver.stop()
-      }
-    })
-
     layersWrapper.style.display = 'block'
+
   } catch (error) {
     getLogger().error('Handle video track error', error)
   }