merge with main

.changeset/chilly-fireants-exist.md

@@ -0,0 +1,6 @@
+---
+'@signalwire/core': patch
+'@signalwire/js': patch
+---
+
+CF SDK: Maintain the session connection state

.changeset/warm-lions-wink.md

@@ -0,0 +1,8 @@
+---
+'@signalwire/realtime-api': patch
+'@signalwire/webrtc': patch
+'@signalwire/core': patch
+'@signalwire/js': patch
+---
+
+Introduce dedicated types for Video and Fabric SDKs

.github/workflows/realtime-api-staging.yml

@@ -18,7 +18,7 @@ jobs:
       fail-fast: false # Continue other jobs if one fails
       matrix:
         node-version: [18.x]
-        test_command: ['dev:rtonly', 'dev:playwright']
+        test_command: ['dev:rtonly']
     steps:
       - uses: actions/checkout@v4
       - name: Install deps

internal/e2e-js/fixtures.ts

@@ -1,4 +1,3 @@
-import type { Video } from '@signalwire/js'
 import { PageWithWsInspector, intercepWsTraffic } from 'playwrigth-ws-inspector'
 import { test as baseTest, expect, type Page } from '@playwright/test'
 import {
@@ -9,7 +8,9 @@ import {
   createSWMLAppResource,
   createVideoRoomResource,
   deleteResource,
+  disconnectClient,
   enablePageLogs,
+  leaveRoom,
 } from './utils'
 
 type CustomPage = Page & {
@@ -52,40 +53,29 @@ const test = baseTest.extend<CustomFixture>({
       // @ts-expect-error
       return page
     }
-    await use(maker)
-
-    console.log('Cleaning up pages..')
-
-    /**
-     * If we have a __roomObj in the page means we tested the VideoAPI
-     * so we must leave the room.
-     * Invoke `.leave()` only if we have a valid `roomSessionId`.
-     * Then double check the SDK elements got properly removed from the DOM.
-     */
-    const results = await Promise.all(
-      context.pages().map((page) => {
-        return page.evaluate(async () => {
-          // @ts-expect-error
-          const roomObj: Video.RoomSession = window._roomObj
-          console.log('Fixture roomObj', roomObj, roomObj?.roomSessionId)
-          if (roomObj && roomObj.roomSessionId) {
-            console.log('Fixture has room', roomObj.roomSessionId)
-            await roomObj.leave()
-          }
 
-          return {
-            videos: Array.from(document.querySelectorAll('video')).length,
-            rootEl:
-              document.getElementById('rootElement')?.childElementCount ?? 0,
-          }
-        })
+    try {
+      await use(maker)
+    } finally {
+      console.log('Cleaning up pages..')
+      /**
+       * If we have a __roomObj in the page means we tested the Video/Fabric APIs
+       * so we must leave the room.
+       * Invoke `.leave()` only if we have a valid `roomSessionId`.
+       * Then double check the SDK elements got properly removed from the DOM.
+       */
+      const results = await Promise.all(context.pages().map(leaveRoom))
+      results.forEach((row) => {
+        expect(row.videos).toBe(0)
+        expect(row.rootEl).toBe(0)
       })
-    )
 
-    results.forEach((row) => {
-      expect(row.videos).toBe(0)
-      expect(row.rootEl).toBe(0)
-    })
+      /**
+       * The Call Fabric SDK does not destory the client when the call is finished.
+       * Make sure we cleanup the client as well.
+       */
+      await Promise.all(context.pages().map(disconnectClient))
+    }
   },
   createCustomVanillaPage: async ({ context }, use) => {
     const maker = async (options: { name: string }): Promise<Page> => {
@@ -118,18 +108,22 @@ const test = baseTest.extend<CustomFixture>({
       },
       resources,
     }
-    await use(resource)
 
-    // Clean up resources after use
-    const deleteResources = resources.map(async (resource) => {
-      try {
-        await deleteResource(resource.id)
-        console.log('>> Resource deleted successfully:', resource.id)
-      } catch (error) {
-        console.error('>> Failed to delete resource:', resource.id, error)
-      }
-    })
-    await Promise.allSettled(deleteResources)
+    try {
+      await use(resource)
+    } finally {
+      console.log('Cleaning up resources..')
+      // Clean up resources after use
+      const deleteResources = resources.map(async (resource) => {
+        try {
+          await deleteResource(resource.id)
+          console.log('Resource deleted successfully:', resource.id)
+        } catch (error) {
+          console.error('Failed to delete resource:', resource.id, error)
+        }
+      })
+      await Promise.allSettled(deleteResources)
+    }
   },
 })
 

internal/e2e-js/playwright.config.ts

@@ -47,7 +47,7 @@ const callfabricTests = [
 ]
 const videoElementTests = [
   'buildVideoWithVideoSdk.spec.ts',
-  'buildVideoWithCFSdk.spec.ts',
+  'buildVideoWithFabricSdk.spec.ts',
 ]
 const v2WebRTC = ['v2WebrtcFromRest.spec.ts', 'webrtcCalling.spec.ts']
 

internal/e2e-js/tests/buildVideoWithCFSdk.spec.ts → internal/e2e-js/tests/buildVideoWithFabricSdk.spec.ts

@@ -1,7 +1,7 @@
 import {
   OverlayMap,
   LocalVideoOverlay,
-  CallFabricRoomSession,
+  FabricRoomSession,
 } from '@signalwire/js'
 import { test, expect, Page } from '../fixtures'
 import {
@@ -407,7 +407,7 @@ test.describe('buildVideoElement with CallFabric SDK', () => {
       const [memberOneElement, memberTwoElement] = await pageOne.evaluate(
         ({ memberOneId, memberTwoId }) => {
           // @ts-expect-error
-          const room: CallFabricRoomSession = window._roomObj
+          const room: FabricRoomSession = window._roomObj
 
           return [
             room.getMemberOverlay(memberOneId),

internal/e2e-js/tests/buildVideoWithVideoSdk.spec.ts

@@ -1,4 +1,4 @@
-import { OverlayMap, LocalVideoOverlay } from '@signalwire/js'
+import { OverlayMap, LocalVideoOverlay, VideoRoomSession } from '@signalwire/js'
 import { test, expect, Page } from '../fixtures'
 import {
   SERVER_URL,
@@ -418,7 +418,7 @@ test.describe('buildVideoElement with Video SDK', () => {
       const [memberOneElement, memberTwoElement] = await pageOne.evaluate(
         ({ memberOneId, memberTwoId }) => {
           // @ts-expect-error
-          const room: CallFabricRoomSession = window._roomObj
+          const room: VideoRoomSession = window._roomObj
 
           return [
             room.getMemberOverlay(memberOneId),

internal/e2e-js/tests/callfabric/address.spec.ts

@@ -1,3 +1,4 @@
+import { SignalWireClient } from '@signalwire/js'
 import { test, expect } from '../../fixtures'
 import { SERVER_URL, createCFClient } from '../../utils'
 
@@ -13,7 +14,7 @@ test.describe('Addresses', () => {
     const { addressById, addressByName, addressToCompare } =
       await page.evaluate(async () => {
         // @ts-expect-error
-        const client = window._client
+        const client: SignalWireClient = window._client
 
         const response = await client.address.getAddresses()
         const addressToCompare = response.data[1]
@@ -42,7 +43,7 @@ test.describe('Addresses', () => {
 
     const isCorrectlySorted = await page.evaluate(async () => {
       // @ts-expect-error
-      const client = window._client
+      const client: SignalWireClient = window._client
 
       const response = await client.address.getAddresses({
         type: 'room',
@@ -62,10 +63,10 @@ test.describe('Addresses', () => {
       }
 
       return isSorted(
-        // @ts-expect-error
         response.data.map((addr) => {
-          console.log(addr.name) 
-          return addr.name})
+          console.log(addr.name)
+          return addr.name
+        })
       )
     })
 
@@ -102,7 +103,7 @@ test.describe('Addresses', () => {
 
     const isCorrectlySorted = await page.evaluate(async () => {
       // @ts-expect-error
-      const client = window._client
+      const client: SignalWireClient = window._client
 
       const response = await client.address.getAddresses({
         type: 'room',
@@ -122,10 +123,10 @@ test.describe('Addresses', () => {
       }
 
       return isSorted(
-        // @ts-expect-error
         response.data.map((addr) => {
-          console.log(addr.name) 
-          return addr.name})
+          console.log(addr.name)
+          return addr.name
+        })
       )
     })