@signalwire/js 3.29.2 → 4.0.0-beta.1

package/src/utils/roomSession.ts

@@ -1,85 +0,0 @@
-import { getLogger } from '@signalwire/core'
-import type { VideoAuthorization } from '@signalwire/core'
-import type { BaseRoomSessionJoinParams } from './interfaces'
-
-type GetJoinMediaParamsOptions = BaseRoomSessionJoinParams & {
-  authorization: VideoAuthorization
-}
-/**
- * getJoinMediaParams returns whether the Join method must send/recv
- * audio and video.
- * Based on values on the Auth block (media allowed and join_as type)
- * it matches the user's preferences and return an object that tells
- * if the negotiation has to include sendrecv/sendonly or recvonly
- * for audio and video.
- */
-export const getJoinMediaParams = (options: GetJoinMediaParamsOptions) => {
-  const {
-    authorization,
-    audio = true,
-    video = true,
-    sendAudio,
-    sendVideo,
-    receiveAudio,
-    receiveVideo,
-  } = options
-  getLogger().debug('getJoinMediaParams options', { ...options })
-  const { audio_allowed, video_allowed, join_as } = authorization
-  // Fallback to 'member' in case of null/undefined
-  const joinAs = join_as ?? 'member'
-  const canSend = joinAs === 'member'
-
-  const canSendAudio = canSend && audio_allowed === 'both'
-  const canSendVideo = canSend && video_allowed === 'both'
-  const canReceiveAudio = audio_allowed !== 'none'
-  const canReceiveVideo = video_allowed !== 'none'
-
-  const reqToSendAudio = Boolean(sendAudio ?? audio)
-  const reqToSendVideo = Boolean(sendVideo ?? video)
-  const reqToReceiveAudio = Boolean(receiveAudio ?? audio)
-  const reqToReceiveVideo = Boolean(receiveVideo ?? video)
-
-  if (!canSendAudio && reqToSendAudio) {
-    getLogger().info(
-      'Not allowed to send audio on this room. Default values will be used.'
-    )
-  }
-  if (!canSendVideo && reqToSendVideo) {
-    getLogger().info(
-      'Not allowed to send video on this room. Default values will be used.'
-    )
-  }
-  if (!canReceiveAudio && reqToReceiveAudio) {
-    getLogger().info(
-      'Not allowed to receive video from the room. Default values will be used.'
-    )
-  }
-  if (!canReceiveVideo && reqToReceiveVideo) {
-    getLogger().info(
-      'Not allowed to receive video from the room. Default values will be used.'
-    )
-  }
-  return {
-    mustSendAudio: canSendAudio && reqToSendAudio,
-    mustSendVideo: canSendVideo && reqToSendVideo,
-    mustRecvAudio: canReceiveAudio && reqToReceiveAudio,
-    mustRecvVideo: canReceiveVideo && reqToReceiveVideo,
-  }
-}
-
-export const checkMediaParams = (
-  options: Record<string, boolean | undefined>
-) => {
-  // At least one value must be true
-  return Object.values(options).some(Boolean)
-}
-
-export const SDK_PREFIX = 'sw-sdk-'
-export const addSDKPrefix = (id: string) => {
-  return `${SDK_PREFIX}${id}`
-}
-
-export const OVERLAY_PREFIX = 'sw-overlay-'
-export const addOverlayPrefix = (id: string) => {
-  return `${OVERLAY_PREFIX}${id}`
-}

package/src/utils/storage.test.ts

@@ -1,24 +0,0 @@
-import { sessionStorageManager } from './storage'
-
-describe('sessionStorageManager', () => {
-  it('should return expected keys', () => {
-    const token =
-      'eyJ0eXBiOiJWUlQiLCJjaCI6InJlbGF5LnNpZ25hbHdpcmUuY29tIiwiYWxnIjoiPOE1MTIifQ.eyJpYXQiOjE2ODg0NjE3MDMsImp0aSI6IjA1YWZkODczLTI4MGUtNDYzNC1iNmQzLWMwMzk4YzE2NGVlMSIsInN1YiI6IjRiN2FlNzhhLWQwMmUtNDg4OS1hNjNiLTA4YjE1NmQ1OTE2ZSIsInUiOiJqZXN0IiwiamEiOiJtZW1iZXIiLCJyIjoidGVhbS10ZXN0IiwicyI6W10sImFjciI6dHJ1ZSwibWEiOiJhbGwiLCJtdGEiOnt9LCJybXRhIjp7fX0.r1JWiEckaids8mm9ESUraCuXWc6Ysa6qMMmuNzRiOf94PO8VwoL_gIr1LDopDtffk-EFUUB4ZsOl8gK-u-qU7A'
-    const manager = sessionStorageManager(token)
-    expect(manager).toStrictEqual({
-      authStateKey: 'as-team-test',
-      protocolKey: 'pt-team-test',
-      callIdKey: 'ci-team-test',
-    })
-  })
-
-  it('should return falsy values', () => {
-    const token = 'foo'
-    const manager = sessionStorageManager(token)
-    expect(manager).toStrictEqual({
-      authStateKey: false,
-      protocolKey: false,
-      callIdKey: false,
-    })
-  })
-})

package/src/utils/storage.ts

@@ -1,37 +0,0 @@
-import jwtDecode from 'jwt-decode'
-import { getLogger } from '@signalwire/core'
-
-/**
- * Note: ready to support RN with a "storage.native.ts" file.
- */
-export const getStorage = () => {
-  if (window && window.sessionStorage) {
-    return window.sessionStorage
-  }
-  return undefined
-}
-
-export const sessionStorageManager = (token: string) => {
-  let roomName: string = ''
-  try {
-    const jwtPayload = jwtDecode<{ r: string; ja: string }>(token)
-    roomName = jwtPayload?.r ?? ''
-  } catch (e) {
-    try {
-      const jwtPayload = jwtDecode<{ typ: string}>(token, {header: true})
-      roomName = jwtPayload.typ || ''
-    } catch {
-      if (process.env.NODE_ENV !== 'production') {
-        getLogger().error('[sessionStorageManager] error decoding JWT', token)
-      }
-      roomName = ''
-    }
-  }
-
-  const valid = Boolean(roomName)
-  return {
-    authStateKey: valid && `as-${roomName}`,
-    protocolKey: valid && `pt-${roomName}`,
-    callIdKey: valid && `ci-${roomName}`,
-  }
-}

package/src/utils/videoElement.ts

@@ -1,342 +0,0 @@
-import {
-  getLogger,
-  InternalVideoLayoutLayer,
-  InternalVideoLayout,
-  debounce,
-  uuid,
-} from '@signalwire/core'
-import { OverlayMap, LocalVideoOverlay, UserOverlay } from '../VideoOverlays'
-import { addOverlayPrefix } from './roomSession'
-
-const buildVideo = () => {
-  const video = document.createElement('video')
-  video.muted = true
-  video.autoplay = true
-  video.playsInline = true
-
-  /**
-   * Local and Remote video elements should never be paused
-   * and Safari/Firefox pause the video (ie: enabling PiP, switch cameras etc)
-   * We try to force it to keep playing.
-   */
-  video.addEventListener('pause', () => {
-    video.play().catch((error) => {
-      getLogger().error('Video Element Paused', video, error)
-    })
-  })
-
-  return video
-}
-
-const waitForVideoReady = ({ element }: { element: HTMLVideoElement }) => {
-  return new Promise<void>((resolve) => {
-    element.addEventListener('canplay', function listener() {
-      element.removeEventListener('canplay', listener)
-      resolve()
-    })
-    element.addEventListener('resize', function listener() {
-      element.removeEventListener('resize', listener)
-      resolve()
-    })
-  })
-}
-
-const _getLocationStyles = ({
-  x,
-  y,
-  width,
-  height,
-}: InternalVideoLayoutLayer) => {
-  return {
-    top: `${y}%`,
-    left: `${x}%`,
-    width: `${width}%`,
-    height: `${height}%`,
-  }
-}
-
-const _buildLayer = ({ location }: { location: InternalVideoLayoutLayer }) => {
-  const { top, left, width, height } = _getLocationStyles(location)
-  const layer = document.createElement('div')
-  layer.style.position = 'absolute'
-  layer.style.overflow = 'hidden'
-  layer.style.top = top
-  layer.style.left = left
-  layer.style.width = width
-  layer.style.height = height
-
-  return layer
-}
-
-const _updateLayer = ({
-  location,
-  element,
-}: {
-  location: InternalVideoLayoutLayer
-  element: HTMLElement
-}) => {
-  const { top, left, width, height } = _getLocationStyles(location)
-  element.style.top = top
-  element.style.left = left
-  element.style.width = width
-  element.style.height = height
-
-  return element
-}
-
-interface MakeLayoutChangedHandlerParams {
-  applyLocalVideoOverlay?: boolean
-  applyMemberOverlay?: boolean
-  overlayMap: OverlayMap
-  localVideoOverlay: LocalVideoOverlay
-  mirrorLocalVideoOverlay?: boolean
-  rootElement: HTMLElement
-}
-
-interface LayoutChangedHandlerParams {
-  layout: InternalVideoLayout
-  memberId: string
-  localStream: MediaStream
-}
-
-const makeLayoutChangedHandler = (params: MakeLayoutChangedHandlerParams) => {
-  const {
-    applyLocalVideoOverlay,
-    applyMemberOverlay,
-    overlayMap,
-    localVideoOverlay,
-    mirrorLocalVideoOverlay,
-    rootElement,
-  } = params
-
-  return async (params: LayoutChangedHandlerParams) => {
-    getLogger().debug('Process layout.changed')
-    try {
-      const { layout, memberId, localStream } = params
-      const { layers = [] } = layout
-      const mcuLayers = rootElement.querySelector('.mcuLayers')
-
-      // To handle the DOM updates in batch
-      const fragment = document.createDocumentFragment()
-      const currentOverlayIds = new Set()
-
-      // Make local video overlay for the self member
-      if (applyLocalVideoOverlay) {
-        const location = layers.find(({ member_id }) => member_id === memberId)
-        const overlayId = localVideoOverlay.id // LocalVideoOverlay ID is already unique
-        let myLayerEl = localVideoOverlay.domElement
-        currentOverlayIds.add(overlayId)
-
-        if (!location) {
-          getLogger().warn('Local video overlay location not found', memberId)
-          localVideoOverlay.status = 'hidden'
-          if (myLayerEl) {
-            // Should we remove it from the DOM and the OverlayMap?
-            localVideoOverlay.hide()
-          }
-        } else {
-          if (myLayerEl) {
-            getLogger().debug('Update local video overlay')
-            _updateLayer({ location, element: myLayerEl })
-          } else {
-            getLogger().debug('Build local video overlay')
-            myLayerEl = _buildLayer({ location })
-            myLayerEl.id = overlayId
-
-            const localVideo = buildVideo()
-            localVideo.srcObject = localStream
-            localVideo.disablePictureInPicture = true
-            localVideo.style.width = '100%'
-            localVideo.style.height = '100%'
-            localVideo.style.pointerEvents = 'none'
-            localVideo.style.objectFit = 'cover'
-
-            myLayerEl.appendChild(localVideo)
-            localVideoOverlay.domElement = myLayerEl
-
-            // Mirror the local video if user has requested it
-            if (mirrorLocalVideoOverlay) {
-              localVideoOverlay.setMirror()
-            }
-          }
-
-          // Show local overlay element only if the localStream has a valid video track
-          const hasVideo =
-            localStream
-              .getVideoTracks()
-              .filter((t) => t.enabled && t.readyState === 'live').length > 0
-          if (hasVideo && location.visible) {
-            localVideoOverlay.setMediaStream(localStream)
-            localVideoOverlay.show()
-          } else {
-            localVideoOverlay.hide()
-          }
-
-          // Append the local video overlay to the fragment
-          fragment.appendChild(myLayerEl)
-        }
-      }
-
-      // Make overlay for all members (including a self member)
-      if (applyMemberOverlay) {
-        layers.forEach((location) => {
-          const memberIdInLocation = location.member_id
-          if (!memberIdInLocation) return
-
-          const overlayId = addOverlayPrefix(memberIdInLocation)
-          currentOverlayIds.add(overlayId)
-
-          let overlay = overlayMap.get(overlayId)
-
-          if (overlay && overlay.domElement) {
-            // If the overlay already exists, modify its styles
-            getLogger().debug('Update an overlay for', memberIdInLocation)
-            _updateLayer({ location, element: overlay.domElement })
-          } else {
-            // If the overlay doesn't exist, create a new overlay
-            getLogger().debug('Build an overlay for', memberIdInLocation)
-            overlay = new UserOverlay({ id: overlayId })
-            overlayMap.set(overlayId, overlay)
-
-            const newLayer = _buildLayer({ location })
-            newLayer.id = `${overlayId}-${uuid()}` // Unique DOM ID since user is allowed to build multiple video elements
-
-            overlay.domElement = newLayer
-          }
-
-          if (!location.visible) {
-            overlay.hide()
-          } else {
-            overlay.show()
-          }
-
-          // Append the overlay element to the fragment
-          fragment.appendChild(overlay.domElement)
-        })
-      }
-
-      // Remove overlays that are no longer present
-      overlayMap.forEach((overlay, overlayId) => {
-        if (!currentOverlayIds.has(overlayId)) {
-          if (overlay.domElement && overlay.domElement.parentNode) {
-            overlay.domElement.parentNode.removeChild(overlay.domElement)
-          }
-          overlayMap.delete(overlayId)
-        }
-      })
-
-      // Replace mcuLayers content in batch with the fragment
-      if (mcuLayers) {
-        mcuLayers.innerHTML = ''
-        mcuLayers.appendChild(fragment)
-      }
-    } catch (error) {
-      getLogger().error('Layout Changed Error', error)
-    }
-  }
-}
-
-const cleanupElement = (rootElement: HTMLElement) => {
-  while (rootElement.firstChild) {
-    rootElement.removeChild(rootElement.firstChild)
-  }
-}
-
-const setVideoMediaTrack = ({
-  track,
-  element,
-}: {
-  track: MediaStreamTrack
-  element: HTMLVideoElement
-}) => {
-  element.srcObject = new MediaStream([track])
-
-  track.addEventListener('ended', () => {
-    element.srcObject = null
-    element.remove()
-  })
-}
-
-const createRootElementResizeObserver = ({
-  video,
-  rootElement,
-  paddingWrapper,
-}: {
-  video: HTMLVideoElement
-  rootElement: HTMLElement
-  paddingWrapper: HTMLDivElement
-}) => {
-  const computePaddingWrapperWidth = (width: number, height: number) => {
-    const nativeVideoRatio = video.videoWidth / video.videoHeight
-    const rootElementRatio = width / height
-    if (nativeVideoRatio > rootElementRatio) {
-      return '100%'
-    } else {
-      return `${height * nativeVideoRatio}px`
-    }
-  }
-
-  // Debounce to avoid multiple calls
-  const update = debounce(
-    ({ width, height }: { width: number; height: number }) => {
-      const maxPaddingBottom = (video.videoHeight / video.videoWidth) * 100
-      if (paddingWrapper) {
-        const pb = (height / width) * 100
-        paddingWrapper.style.paddingBottom = `${
-          pb > maxPaddingBottom ? maxPaddingBottom : pb
-        }%`
-        paddingWrapper.style.width = computePaddingWrapperWidth(width, height)
-      }
-    },
-    100
-  )
-
-  const observer = new ResizeObserver((entries) => {
-    entries.forEach((entry) => {
-      if (entry.contentBoxSize) {
-        // Firefox implements `contentBoxSize` as a single content rect, rather than an array
-        const { inlineSize, blockSize } = Array.isArray(entry.contentBoxSize)
-          ? entry.contentBoxSize[0]
-          : entry.contentBoxSize
-        update({ width: inlineSize, height: blockSize })
-      } else if (entry.contentRect) {
-        update({
-          width: entry.contentRect.width,
-          height: entry.contentRect.height,
-        })
-      }
-    })
-  })
-
-  /**
-   * When the intrinsic dimensions of the video changes, the root element resize may or may not trigger.
-   * For example; remote stream from the server changes dimensions from 16/9 (Landscape) to 9/16 (Portrait) mode.
-   * For this reason we need to listen for the 'resize' event on the video element.
-   */
-  const onVideoResize = () => {
-    const width = rootElement.clientWidth
-    const height = rootElement.clientHeight
-    update({ width, height })
-  }
-
-  return {
-    start: () => {
-      observer.observe(rootElement)
-      video.addEventListener('resize', onVideoResize)
-    },
-    stop: () => {
-      observer.disconnect()
-      video.removeEventListener('resize', onVideoResize)
-    },
-  }
-}
-
-export {
-  buildVideo,
-  cleanupElement,
-  makeLayoutChangedHandler,
-  setVideoMediaTrack,
-  waitForVideoReady,
-  createRootElementResizeObserver,
-  LocalVideoOverlay,
-}

package/src/video/RoomSession.test.ts

@@ -1,31 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import { RoomSession, UNSAFE_PROP_ACCESS } from './RoomSession'
-
-describe('RoomSession Object', () => {
-  it('should control which properties the user can access before connecting the room.', async () => {
-    const roomSession = new RoomSession({
-      token: '<some-token>',
-    })
-
-    expect(() => roomSession.active).not.toThrow()
-    expect(() => roomSession.memberId).not.toThrow()
-    expect(() => roomSession.join()).not.toThrow()
-    UNSAFE_PROP_ACCESS.map((prop) => {
-      // @ts-expect-error
-      expect(() => roomSession[prop]).toThrow()
-    })
-
-    // @ts-expect-error
-    roomSession.state = 'active'
-
-    expect(() => roomSession.active).not.toThrow()
-    expect(() => roomSession.memberId).not.toThrow()
-    expect(() => roomSession.join()).not.toThrow()
-    UNSAFE_PROP_ACCESS.map((prop) => {
-      // @ts-expect-error
-      expect(() => roomSession[prop]).not.toThrow()
-    })
-  })
-})