@signalwire/js 3.29.2 → 4.0.0-beta.0

package/src/buildVideoElement.ts

@@ -1,290 +0,0 @@
-import {
-  FabricLayoutChangedEventParams,
-  VideoLayoutChangedEventParams,
-  getLogger,
-  uuid,
-} from '@signalwire/core'
-import {
-  buildVideo,
-  cleanupElement,
-  createRootElementResizeObserver,
-  makeLayoutChangedHandler,
-  setVideoMediaTrack,
-  waitForVideoReady,
-} from './utils/videoElement'
-import { addSDKPrefix } from './utils/roomSession'
-import { OverlayMap, LocalVideoOverlay } from './VideoOverlays'
-import {
-  FabricRoomSession,
-  isFabricRoomSession,
-} from './fabric/FabricRoomSession'
-import { VideoRoomSession, isVideoRoomSession } from './video/VideoRoomSession'
-
-export interface BuildVideoElementParams {
-  applyLocalVideoOverlay?: boolean
-  applyMemberOverlay?: boolean
-  mirrorLocalVideoOverlay?: boolean
-  room: FabricRoomSession | VideoRoomSession
-  rootElement?: HTMLElement
-}
-
-export interface BuildVideoElementReturnType {
-  element: HTMLElement
-  overlayMap: OverlayMap
-  localVideoOverlay: LocalVideoOverlay
-  unsubscribe(): void
-}
-
-export const buildVideoElement = async (
-  params: BuildVideoElementParams
-): Promise<BuildVideoElementReturnType> => {
-  try {
-    const {
-      room,
-      rootElement: element,
-      applyLocalVideoOverlay = true,
-      applyMemberOverlay = true,
-      mirrorLocalVideoOverlay = true,
-    } = params
-
-    let hasVideoTrack = false
-    const overlayMap: OverlayMap = new Map()
-    const id = uuid()
-
-    let rootElement: HTMLElement
-    if (element) {
-      rootElement = element
-    } else {
-      rootElement = document.createElement('div')
-      rootElement.id = `rootElement-${id}`
-    }
-
-    /**
-     * We used this `LocalVideoOverlay` class to interact with the localVideo
-     * overlay DOM element in here and in the `makeLayoutChangedHandler`.
-     */
-    const overlayId = addSDKPrefix(id)
-    const localVideoOverlay = new LocalVideoOverlay({
-      id: overlayId,
-      mirrorLocalVideoOverlay,
-      room,
-    })
-    if (applyLocalVideoOverlay) {
-      overlayMap.set(overlayId, localVideoOverlay)
-    }
-
-    const makeLayout = makeLayoutChangedHandler({
-      applyLocalVideoOverlay,
-      applyMemberOverlay,
-      overlayMap,
-      localVideoOverlay,
-      mirrorLocalVideoOverlay,
-      rootElement,
-    })
-
-    const processLayoutChanged = (params: any) => {
-      // @ts-expect-error
-      const hasVideoSender = room.peer?.hasVideoSender
-      if (hasVideoSender && room.localStream) {
-        makeLayout({
-          layout: params.layout,
-          localStream: room.localStream,
-          memberId: room.memberId,
-        })
-      } else {
-        getLogger().debug(
-          'No local video sender or local stream, hiding local video overlay',
-          hasVideoSender,
-          room.localStream
-        )
-        localVideoOverlay.hide()
-      }
-    }
-
-    const layoutChangedHandler = (
-      params: FabricLayoutChangedEventParams | VideoLayoutChangedEventParams
-    ) => {
-      getLogger().debug('Received layout.changed - videoTrack', hasVideoTrack)
-      if (hasVideoTrack) {
-        processLayoutChanged(params)
-        return
-      }
-    }
-
-    const processVideoTrack = async (track: MediaStreamTrack) => {
-      hasVideoTrack = true
-
-      await videoElementSetup({
-        applyLocalVideoOverlay,
-        applyMemberOverlay,
-        rootElement,
-        track,
-      })
-
-      const roomCurrentLayoutEvent = room.currentLayoutEvent
-      // If the `layout.changed` has already been received, process the layout
-      if (roomCurrentLayoutEvent) {
-        processLayoutChanged(roomCurrentLayoutEvent)
-      }
-    }
-
-    // If the remote video already exist, inject the remote stream to the video element
-    // @ts-expect-error
-    const videoTrack = room.peer?.remoteVideoTrack as MediaStreamTrack | null
-    if (videoTrack) {
-      await processVideoTrack(videoTrack)
-    }
-
-    // Handle the RTCPeer `track` event
-    const trackHandler = async function (event: RTCTrackEvent) {
-      if (event.track.kind === 'video') {
-        await processVideoTrack(event.track)
-      }
-    }
-
-    const unsubscribe = () => {
-      cleanupElement(rootElement)
-      overlayMap.clear() // Use "delete" rather than "clear" if we want to update the reference
-      room.overlayMap = overlayMap
-      if (isFabricRoomSession(room)) {
-        room.off('track', trackHandler)
-        room.off('layout.changed', layoutChangedHandler)
-        room.off('destroy', unsubscribe)
-      } else if (isVideoRoomSession(room)) {
-        room.off('track', trackHandler)
-        room.off('layout.changed', layoutChangedHandler)
-        room.off('destroy', unsubscribe)
-      }
-      localVideoOverlay.detachListeners()
-    }
-
-    /**
-     * Using `on` instead of `once` (or `off` within trackHandler) because
-     * there are cases (promote/demote) where we need to handle multiple `track`
-     * events and update the videoEl with the new track.
-     */
-    if (isFabricRoomSession(room)) {
-      room.on('track', trackHandler)
-      room.on('layout.changed', layoutChangedHandler)
-      room.once('destroy', unsubscribe)
-    } else if (isVideoRoomSession(room)) {
-      room.on('track', trackHandler)
-      room.on('layout.changed', layoutChangedHandler)
-      room.once('destroy', unsubscribe)
-    }
-
-    /**
-     * The room object is only being used to listen for events.
-     * The "buildVideoElement" function does not directly manipulate the room object in order to maintain immutability.
-     * Currently, we are overriding the following room properties in case the user calls "buildVideoElement" more than once.
-     * However, this can be moved out of here easily if we prefer not to override.
-     */
-    room.overlayMap = overlayMap
-    room.localVideoOverlay = localVideoOverlay
-
-    return { element: rootElement, overlayMap, localVideoOverlay, unsubscribe }
-  } catch (error) {
-    getLogger().error('Unable to build the video element')
-    throw error
-  }
-}
-
-interface VideoElementSetupWorkerParams {
-  rootElement: HTMLElement
-  track: MediaStreamTrack
-  applyLocalVideoOverlay?: boolean
-  applyMemberOverlay?: boolean
-}
-
-const videoElementSetup = async (options: VideoElementSetupWorkerParams) => {
-  try {
-    const { applyLocalVideoOverlay, applyMemberOverlay, track, rootElement } =
-      options
-
-    // Create a video element
-    const videoElement = buildVideo()
-
-    setVideoMediaTrack({ element: videoElement, track })
-
-    videoElement.style.width = '100%'
-    videoElement.style.maxHeight = '100%'
-
-    if (rootElement.querySelector('.mcuContent')) {
-      getLogger().debug('MCU Content already there')
-      return
-    }
-
-    const mcuWrapper = document.createElement('div')
-    mcuWrapper.style.position = 'absolute'
-    mcuWrapper.style.top = '0'
-    mcuWrapper.style.left = '0'
-    mcuWrapper.style.right = '0'
-    mcuWrapper.style.bottom = '0'
-    mcuWrapper.appendChild(videoElement)
-
-    const paddingWrapper = document.createElement('div')
-    paddingWrapper.classList.add('paddingWrapper')
-    paddingWrapper.style.paddingBottom = '56.25%' // (9 / 16) * 100
-    paddingWrapper.style.position = 'relative'
-    paddingWrapper.style.width = '100%'
-    paddingWrapper.appendChild(mcuWrapper)
-
-    let layersWrapper: HTMLDivElement | null = null
-
-    // If the both flags are false, no need to create the MCU
-    if (applyLocalVideoOverlay || applyMemberOverlay) {
-      layersWrapper = document.createElement('div')
-      layersWrapper.classList.add('mcuLayers')
-      layersWrapper.style.display = 'none'
-      paddingWrapper.appendChild(layersWrapper)
-    }
-
-    const relativeWrapper = document.createElement('div')
-    relativeWrapper.classList.add('mcuContent')
-    relativeWrapper.style.position = 'relative'
-    relativeWrapper.style.width = '100%'
-    relativeWrapper.style.height = '100%'
-    relativeWrapper.style.margin = '0 auto'
-    relativeWrapper.style.display = 'flex'
-    relativeWrapper.style.alignItems = 'center'
-    relativeWrapper.style.justifyContent = 'center'
-    relativeWrapper.appendChild(paddingWrapper)
-
-    rootElement.style.width = '100%'
-    rootElement.style.height = '100%'
-    rootElement.appendChild(relativeWrapper)
-
-    getLogger().debug('MCU readyState 1 >>', videoElement.readyState)
-    if (videoElement.readyState === HTMLMediaElement.HAVE_NOTHING) {
-      getLogger().debug('Wait for the MCU to be ready')
-      await waitForVideoReady({ element: videoElement })
-    }
-    getLogger().debug('MCU is ready..')
-
-    /**
-     * Listen for the rootElement and the videoElement size changes and update the paddingWrapper.
-     * The ResizeObserver and the video "resize" event make sure:
-     * - The video should always maintain the aspect ratio.
-     * - The video should not overflow the user passed rootElement.
-     * - The video should not be cropped.
-     */
-    const rootElementResizeObserver = createRootElementResizeObserver({
-      rootElement,
-      video: videoElement,
-      paddingWrapper,
-    })
-    rootElementResizeObserver.start()
-
-    track.addEventListener('ended', () => {
-      if (rootElementResizeObserver) {
-        rootElementResizeObserver.stop()
-      }
-    })
-
-    if (layersWrapper) {
-      layersWrapper.style.display = 'block'
-    }
-  } catch (error) {
-    getLogger().error('Handle video track error', error)
-  }
-}

package/src/cantina/VideoManager.test.ts

@@ -1,95 +0,0 @@
-import { configureFullStack } from '../testUtils'
-import { VideoManager, createVideoManagerObject } from '.'
-import { actions } from '@signalwire/core'
-
-describe('VideoManager namespace', () => {
-  let manager: VideoManager
-  let fullStack: ReturnType<typeof configureFullStack>
-
-  beforeEach(() => {
-    fullStack = configureFullStack()
-    fullStack.emitter.removeAllListeners()
-    manager = createVideoManagerObject({
-      store: fullStack.store,
-    })
-    // @ts-expect-error
-    manager.execute = jest.fn()
-  })
-
-  afterEach(() => {
-    fullStack.destroy()
-  })
-
-  it('should not call execute without subscribed events', () => {
-    manager.subscribe()
-    // @ts-expect-error
-    expect(manager.execute).not.toHaveBeenCalled()
-  })
-
-  it('should call execute with subscribed events', async () => {
-    manager.on('room.started', jest.fn)
-    await manager.subscribe()
-    // @ts-expect-error
-    expect(manager.execute).toHaveBeenCalledWith({
-      method: 'signalwire.subscribe',
-      params: {
-        event_channel: 'video-manager.rooms',
-        events: ['video-manager.room.started'],
-      },
-    })
-  })
-
-  describe('video-manager.room.started event', () => {
-    const firstRoom = JSON.parse(
-      `{"jsonrpc":"2.0","id":"81e61d45-b7e3-4096-8221-f5d86ff98134","method":"signalwire.event","params":{"event_type":"video-manager.room.started","event_channel":"video-manager.rooms","timestamp":1631692502.1308,"params":{"id":"room-id","project_id":"project-id","cantina_id":"12382c06-280c-460f-8db2-c138c77d23e7","name":"room-one","preview":"https://preview.image.url","last_snapshot":"https://preview.video.url","member_count":1,"recording":false,"locked":false,"room_type":"permanent","visibility":"normal","room_description":"mocked-room-description","join_button":"mocked-join-button","order_priority":1,"custom_alone":"alone","custom_canvas":"canvas","custom_empty":"empty room","custom_preview":"https://preview.custom.url","has_sms_from_number":false,"auto_open_nav":false,"my_roles":["visitor","attendee"],"event_channel":"rooms.9b3ef3aa-6047-42aa-8d9d-6fca54211a47"}}}`
-    )
-
-    it('should pass RoomSession object to the handler', (done) => {
-      manager.on('room.started', (room) => {
-        expect(room.id).toBe('room-id')
-        expect(room.name).toBe('room-one')
-        expect(room.memberCount).toBe(1)
-        done()
-      })
-      manager.subscribe().then(() => {
-        fullStack.session.dispatch(actions.socketMessageAction(firstRoom))
-      })
-    })
-  })
-
-  describe('video-manager.room.updated event', () => {
-    const firstRoom = JSON.parse(
-      `{"jsonrpc":"2.0","id":"81e61d45-b7e3-4096-8221-f5d86ff98134","method":"signalwire.event","params":{"event_type":"video-manager.room.started","event_channel":"video-manager.rooms","timestamp":1631692502.1308,"params":{"id":"room-id","project_id":"project-id","cantina_id":"12382c06-280c-460f-8db2-c138c77d23e7","name":"room-one","preview":"https://preview.image.url","last_snapshot":"https://preview.video.url","member_count":1,"recording":false,"locked":false,"room_type":"permanent","visibility":"normal","room_description":"mocked-room-description","join_button":"mocked-join-button","order_priority":1,"custom_alone":"alone","custom_canvas":"canvas","custom_empty":"empty room","custom_preview":"https://preview.custom.url","has_sms_from_number":false,"auto_open_nav":false,"my_roles":["visitor","attendee"],"event_channel":"rooms.9b3ef3aa-6047-42aa-8d9d-6fca54211a47"}}}`
-    )
-
-    it('should pass RoomSession object to the handler', (done) => {
-      manager.on('room.started', (room) => {
-        expect(room.id).toBe('room-id')
-        expect(room.name).toBe('room-one')
-        expect(room.memberCount).toBe(1)
-        done()
-      })
-      manager.subscribe().then(() => {
-        fullStack.session.dispatch(actions.socketMessageAction(firstRoom))
-      })
-    })
-  })
-
-  describe('video-manager.room.ended event', () => {
-    const firstRoom = JSON.parse(
-      `{"jsonrpc":"2.0","id":"81e61d45-b7e3-4096-8221-f5d86ff98134","method":"signalwire.event","params":{"event_type":"video-manager.room.ended","event_channel":"video-manager.rooms","timestamp":1631692502.1308,"params":{"id":"room-id","project_id":"project-id","cantina_id":"12382c06-280c-460f-8db2-c138c77d23e7","name":"room-one","preview":"https://preview.image.url","last_snapshot":"https://preview.video.url","member_count":1,"recording":false,"locked":false,"room_type":"permanent","visibility":"normal","room_description":"mocked-room-description","join_button":"mocked-join-button","order_priority":1,"custom_alone":"alone","custom_canvas":"canvas","custom_empty":"empty room","custom_preview":"https://preview.custom.url","has_sms_from_number":false,"auto_open_nav":false,"my_roles":["visitor","attendee"],"event_channel":"rooms.9b3ef3aa-6047-42aa-8d9d-6fca54211a47"}}}`
-    )
-
-    it('should pass RoomSession object to the handler', (done) => {
-      manager.on('room.ended', (room) => {
-        expect(room.id).toBe('room-id')
-        expect(room.name).toBe('room-one')
-        expect(room.memberCount).toBe(1)
-        done()
-      })
-      manager.subscribe().then(() => {
-        fullStack.session.dispatch(actions.socketMessageAction(firstRoom))
-      })
-    })
-  })
-})

package/src/cantina/VideoManager.ts

@@ -1,72 +0,0 @@
-import {
-  BaseComponentOptions,
-  VideoManagerRoomEventNames,
-  connect,
-  ConsumerContract,
-  validateEventsToSubscribe,
-  EventEmitter,
-  BaseConsumer,
-  ToExternalJSONResult,
-  VideoManagerRoomEventParams,
-  InternalVideoManagerRoomEntity,
-  RoomsSubscribed,
-} from '@signalwire/core'
-import { videoManagerWorker } from './workers'
-
-/** @internal */
-export type VideoManagerEvents = Record<
-  VideoManagerRoomEventNames,
-  (room: ToExternalJSONResult<VideoManagerRoomEventParams>) => void
-> &
-  Record<
-    RoomsSubscribed,
-    (room: {
-      rooms: ToExternalJSONResult<InternalVideoManagerRoomEntity>[]
-    }) => void
-  >
-
-/** @internal */
-export interface VideoManager extends ConsumerContract<VideoManagerEvents> {}
-
-/** @internal */
-export class VideoManagerAPI extends BaseConsumer<VideoManagerEvents> {
-  constructor(options: BaseComponentOptions) {
-    super(options)
-
-    this.runWorker('videoManagerWorker', {
-      worker: videoManagerWorker,
-    })
-  }
-
-  /** @internal */
-  protected override getSubscriptions() {
-    const eventNamesWithPrefix = this.eventNames().map(
-      (event) => `video-manager.${event}`
-    ) as EventEmitter.EventNames<VideoManagerEvents>[]
-    return validateEventsToSubscribe(eventNamesWithPrefix)
-  }
-}
-
-export const createVideoManagerObject = (params: BaseComponentOptions) => {
-  const manager = connect<VideoManagerEvents, VideoManagerAPI, VideoManager>({
-    store: params.store,
-    Component: VideoManagerAPI,
-  })(params)
-
-  const proxy = new Proxy<VideoManager>(manager, {
-    get(
-      target: VideoManager,
-      property: string | symbol,
-      receiver: ProxyHandler<VideoManager>
-    ) {
-      if (property === '_eventsNamespace') {
-        return ''
-      } else if (property === 'eventChannel') {
-        return 'video-manager.rooms'
-      }
-
-      return Reflect.get(target, property, receiver)
-    },
-  })
-  return proxy
-}

package/src/cantina/index.ts

@@ -1 +0,0 @@
-export * from './VideoManager'

package/src/cantina/workers/index.ts

@@ -1 +0,0 @@
-export * from './videoManagerWorker'

package/src/cantina/workers/videoManagerRoomWorker.ts

@@ -1,28 +0,0 @@
-import {
-  getLogger,
-  SagaIterator,
-  MapToPubSubShape,
-  VideoManagerRoomEvent,
-  toExternalJSON,
-  VideoManagerRoomEventNames,
-  stripNamespacePrefix,
-} from '@signalwire/core'
-import { VideoManagerWorkerParams } from './videoManagerWorker'
-
-export const videoManagerRoomWorker = function* (
-  options: VideoManagerWorkerParams<MapToPubSubShape<VideoManagerRoomEvent>>
-): SagaIterator {
-  getLogger().trace('videoManagerRoomWorker started')
-  const {
-    instance: client,
-    action: { type, payload },
-  } = options
-
-  // For now we expose the transformed payload and not a RoomSession
-  client.emit(
-    stripNamespacePrefix(type) as VideoManagerRoomEventNames,
-    toExternalJSON(payload)
-  )
-
-  getLogger().trace('videoManagerRoomWorker ended')
-}

package/src/cantina/workers/videoManagerRoomsWorker.ts

@@ -1,34 +0,0 @@
-import {
-  getLogger,
-  SagaIterator,
-  MapToPubSubShape,
-  VideoManagerRoomsSubscribedEvent,
-  toExternalJSON,
-  VideoManagerRoomEventNames,
-  stripNamespacePrefix,
-} from '@signalwire/core'
-import { VideoManagerWorkerParams } from './videoManagerWorker'
-
-export const videoManagerRoomsWorker = function* (
-  options: VideoManagerWorkerParams<
-    MapToPubSubShape<VideoManagerRoomsSubscribedEvent>
-  >
-): SagaIterator {
-  getLogger().trace('videoManagerRoomsWorker started')
-  const {
-    instance: client,
-    action: { type, payload },
-  } = options
-
-  // For now we expose the transformed payload and not a RoomSession
-  const modPayload = {
-    rooms: payload.rooms.map((row) => toExternalJSON(row)),
-  }
-  client.emit(
-    stripNamespacePrefix(type) as VideoManagerRoomEventNames,
-    // @ts-expect-error
-    modPayload
-  )
-
-  getLogger().trace('videoManagerRoomsWorker ended')
-}

package/src/cantina/workers/videoManagerWorker.ts

@@ -1,64 +0,0 @@
-import { getLogger, sagaEffects } from '@signalwire/core'
-import type {
-  SagaIterator,
-  MapToPubSubShape,
-  VideoManagerEvent,
-  SDKWorker,
-  SDKActions,
-  SDKWorkerParams,
-} from '@signalwire/core'
-import type { VideoManager } from '../VideoManager'
-import { videoManagerRoomsWorker } from './videoManagerRoomsWorker'
-import { videoManagerRoomWorker } from './videoManagerRoomWorker'
-
-export type VideoManagerWorkerParams<T> = SDKWorkerParams<VideoManager> & {
-  action: T
-}
-
-export const videoManagerWorker: SDKWorker<VideoManager> = function* (
-  options
-): SagaIterator {
-  getLogger().trace('videoManagerWorker started')
-  const {
-    channels: { swEventChannel },
-  } = options
-
-  function* worker(action: MapToPubSubShape<VideoManagerEvent>) {
-    const { type } = action
-
-    switch (type) {
-      case 'video-manager.rooms.subscribed':
-        yield sagaEffects.fork(videoManagerRoomsWorker, {
-          action,
-          ...options,
-        })
-        break
-      case 'video-manager.room.added':
-      case 'video-manager.room.deleted':
-      case 'video-manager.room.ended':
-      case 'video-manager.room.started':
-      case 'video-manager.room.updated':
-        yield sagaEffects.fork(videoManagerRoomWorker, {
-          action,
-          ...options,
-        })
-        break
-      default:
-        getLogger().warn(`Unknown video-manager event: "${type}"`)
-        break
-    }
-  }
-
-  while (true) {
-    const action: MapToPubSubShape<VideoManagerEvent> = yield sagaEffects.take(
-      swEventChannel,
-      (action: SDKActions) => {
-        return action.type.startsWith('video-manager.')
-      }
-    )
-
-    yield sagaEffects.fork(worker, action)
-  }
-
-  getLogger().trace('videoManagerWorker ended')
-}