@signalwire/js 3.6.0-dev.202111170816.f436d5f.0 → 3.7.0

package/src/createClient.test.ts

@@ -0,0 +1,116 @@
+import WS from 'jest-websocket-mock'
+import { AuthError } from '@signalwire/core'
+import { createClient } from './createClient'
+
+describe('createClient', () => {
+  const host = 'ws://localhost:1234'
+  const token = '<jwt>'
+  const authError = {
+    code: -32002,
+    message:
+      'Authentication service failed with status ProtocolError, 401 Unauthorized: {}',
+  }
+
+  let server: WS
+  let consoleMock: jest.SpyInstance
+  beforeEach(async () => {
+    consoleMock = jest
+      .spyOn(global.console, 'error')
+      .mockImplementation(() => {})
+
+    server = new WS(host)
+    server.on('connection', (socket) => {
+      socket.on('message', (data: any) => {
+        const parsedData = JSON.parse(data)
+
+        if (
+          parsedData.method === 'signalwire.connect' &&
+          parsedData.params.authentication.jwt_token === '<invalid-token>'
+        ) {
+          socket.send(
+            JSON.stringify({
+              jsonrpc: '2.0',
+              id: parsedData.id,
+              error: authError,
+            })
+          )
+        }
+
+        socket.send(
+          JSON.stringify({
+            jsonrpc: '2.0',
+            id: parsedData.id,
+            result: {},
+          })
+        )
+      })
+    })
+  })
+
+  afterEach(() => {
+    consoleMock.mockRestore()
+    WS.clean()
+  })
+
+  it('should throw an error when invalid credentials are provided', async () => {
+    expect.assertions(1)
+
+    const client = createClient({
+      host,
+      token: '<invalid-token>',
+    })
+
+    try {
+      await client.connect()
+    } catch (e) {
+      expect(e).toBeInstanceOf(AuthError)
+    }
+  })
+
+  it('should resolve `connect()` when the client is authorized', async () => {
+    expect.assertions(1)
+
+    const client = createClient({
+      host,
+      token,
+    })
+
+    // @ts-expect-error
+    client._waitUntilSessionAuthorized().then((c) => {
+      expect(c).toEqual(client)
+    })
+
+    await client.connect()
+  })
+
+  it('should automatically resolve (without hitting the network) when calling `.connect()` if the session was already authorized', async () => {
+    const h = 'ws://localhost:2222'
+    const s = new WS(h)
+
+    let messageHandler
+    s.on('connection', (socket) => {
+      messageHandler = jest.fn((data: any) => {
+        const parsedData = JSON.parse(data)
+
+        socket.send(
+          JSON.stringify({
+            jsonrpc: '2.0',
+            id: parsedData.id,
+            result: {},
+          })
+        )
+      })
+
+      socket.on('message', messageHandler)
+    })
+
+    const client = createClient({
+      host: h,
+      token,
+    })
+
+    await Promise.all([client.connect(), client.connect(), client.connect()])
+
+    expect(messageHandler).toHaveBeenCalledTimes(1)
+  })
+})

package/src/createClient.ts

@@ -16,30 +16,10 @@ import { JWTSession } from './JWTSession'
  * Create a client
  *
  * @example
- * With autoConnect true the client is ready to be used.
  * ```js
  * try {
- *   const client = await Video.createClient({
- *     token: '<YourToken>',
- *   })
- *
- *   // Your client is already connected..
- * } catch (error) {
- *   console.error('Auth Error', error)
- * }
- * ```
- *
- * @example
- * With autoConnect false you can attach additional handlers.
- * ```js
- * try {
- *   const client = await Video.createClient({
+ *   const client = Video.createClient({
  *     token: '<YourJWT>',
- *     autoConnect: false,
- *   })
- *
- *   client.on('socket.closed', () => {
- *     // The WebSocket connection is closed
  *   })
  *
  *   await client.connect()
@@ -69,7 +49,6 @@ export const createClient = <RoomSessionType>(userOptions: UserOptions) => {
     componentListeners: {
       errors: 'onError',
       responses: 'onSuccess',
-      id: 'onClientSubscribed',
     },
   })(baseUserOptions)
 

package/src/index.ts

@@ -96,3 +96,6 @@ export type {
   RoomSessionObjectEventsHandlerMap as RoomObjectEventsHandlerMap,
   RoomSessionObjectEvents as RoomObjectEvents,
 } from './utils/interfaces'
+
+/** @internal */
+export * as __sw__Chat from './chat'

package/src/utils/constants.ts

@@ -10,8 +10,8 @@ export const ROOM_COMPONENT_LISTENERS = {
 
 export const SCREENSHARE_AUDIO_CONSTRAINTS: MediaTrackConstraints = {
   echoCancellation: false,
-  // @ts-expect-error
   noiseSuppression: false,
   autoGainControl: false,
+  // @ts-expect-error
   googAutoGainControl: false,
 }

package/src/utils/videoElement.ts

@@ -4,6 +4,10 @@ import {
   InternalVideoLayout,
 } from '@signalwire/core'
 
+const _addSDKPrefix = (input: string) => {
+  return `sw-sdk-${input}`
+}
+
 const buildVideo = () => {
   const video = document.createElement('video')
   video.muted = true
@@ -81,19 +85,22 @@ const makeLayoutChangedHandler =
   async ({ layout, myMemberId, localStream }: LayoutChangedHandlerParams) => {
     try {
       const { layers = [] } = layout
-      const layer = layers.find(({ member_id }) => member_id === myMemberId)
+      const location = layers.find(({ member_id }) => member_id === myMemberId)
+
+      const myLayerKey = _addSDKPrefix(myMemberId)
+      let myLayer = layerMap.get(myLayerKey)
+      if (!location) {
+        if (myLayer) {
+          getLogger().debug('Current layer not visible')
+          myLayer.style.display = 'none'
+        }
 
-      if (!layer) {
-        return getLogger().debug(
-          'Current Layer Not Found',
-          JSON.stringify(layout)
-        )
+        return
       }
 
-      let myLayer = layerMap.get(myMemberId)
       if (!myLayer) {
-        myLayer = await _buildLayer({ element, location: layer })
-        myLayer.id = myMemberId
+        myLayer = await _buildLayer({ element, location })
+        myLayer.id = myLayerKey
 
         const localVideo = buildVideo()
         localVideo.srcObject = localStream
@@ -103,16 +110,17 @@ const makeLayoutChangedHandler =
         myLayer.appendChild(localVideo)
 
         const mcuLayers = rootElement.querySelector('.mcuLayers')
-        const exists = document.getElementById(myMemberId)
+        const exists = document.getElementById(myLayerKey)
         if (mcuLayers && !exists) {
           mcuLayers.appendChild(myLayer)
-          layerMap.set(myMemberId, myLayer)
+          layerMap.set(myLayerKey, myLayer)
         }
 
         return
       }
 
-      const { top, left, width, height } = _getLocationStyles(layer)
+      const { top, left, width, height } = _getLocationStyles(location)
+      myLayer.style.display = 'block'
       myLayer.style.top = top
       myLayer.style.left = left
       myLayer.style.width = width
@@ -124,7 +132,7 @@ const makeLayoutChangedHandler =
 
 const makeDisplayChangeFn = (display: 'block' | 'none') => {
   return (domId: string) => {
-    const el = document.getElementById(domId)
+    const el = document.getElementById(_addSDKPrefix(domId))
     if (el) {
       el.style.display = display
     }