@signalwire/js 3.12.0 → 3.12.1

package/src/RoomSession.ts

@@ -1,10 +1,22 @@
-import { UserOptions, AssertSameType, getLogger } from '@signalwire/core'
+import {
+  UserOptions,
+  AssertSameType,
+  getLogger,
+  Authorization,
+} from '@signalwire/core'
 import { createClient } from './createClient'
-import type { MakeRoomOptions } from './Client'
 import { BaseRoomSession } from './BaseRoomSession'
-import { RoomSessionDocs } from './RoomSession.docs'
+import {
+  getJoinAudienceMediaParams,
+  isValidJoinAudienceMediaParams,
+} from './utils/roomSession'
+import type { MakeRoomOptions } from './Client'
+import type { RoomSessionDocs } from './RoomSession.docs'
+import type { RoomSessionJoinAudienceParams } from './utils/interfaces'
 
 const VIDEO_CONSTRAINTS: MediaTrackConstraints = {
+  width: { ideal: 1280, min: 320 },
+  height: { ideal: 720, min: 180 },
   aspectRatio: { ideal: 16 / 9 },
 }
 
@@ -149,8 +161,53 @@ export const RoomSession = function (roomOptions: RoomSessionOptions) {
     })
   }
 
+  const joinAudience = (params?: RoomSessionJoinAudienceParams) => {
+    return new Promise(async (resolve, reject) => {
+      try {
+        // @ts-expect-error
+        room.attachPreConnectWorkers()
+
+        const session = await client.connect()
+
+        // @ts-expect-error
+        const authState: Authorization = session._sessionAuthState
+        const mediaOptions = getJoinAudienceMediaParams({
+          authState,
+          ...params,
+        })
+
+        if (!isValidJoinAudienceMediaParams(mediaOptions)) {
+          await session.disconnect()
+          return reject(
+            new Error(
+              '[joinAudience] Either (or both) `audio` and `video` must be `true` when calling this method.'
+            )
+          )
+        }
+
+        // @ts-expect-error
+        room.updateMediaOptions(mediaOptions)
+
+        room.once('room.subscribed', (payload) => {
+          // @ts-expect-error
+          room.attachOnSubscribedWorkers(payload)
+          resolve(room)
+        })
+
+        await room.join()
+      } catch (error) {
+        getLogger().error('RoomSession JoinAudience', error)
+        // Disconnect the underlay client in case of media/signaling errors
+        client.disconnect()
+
+        reject(error)
+      }
+    })
+  }
+
   const interceptors = {
     join,
+    joinAudience,
   } as const
 
   return new Proxy<Omit<RoomSession, 'new'>>(room, {

package/src/features/mediaElements/mediaElementsSagas.ts

@@ -42,6 +42,8 @@ export const makeVideoElementSaga = ({
        * Instead of querying the `document`, let's use our `layerMap`.
        */
       const localOverlay: LocalOverlay = {
+        // Each `layout.changed` event will update `status`
+        status: 'hidden',
         get id() {
           return addSDKPrefix(room.memberId)
         },
@@ -67,6 +69,9 @@ export const makeVideoElementSaga = ({
           if (!this.domElement) {
             return getLogger().warn('Missing localOverlay to show')
           }
+          if (this.status === 'hidden') {
+            return getLogger().info('localOverlay not visible')
+          }
           this.domElement.style.opacity = '1'
         },
       }
@@ -161,6 +166,11 @@ export const makeAudioElementSaga = ({ speakerId }: { speakerId?: string }) => {
     instance: room,
     runSaga,
   }: CustomSagaParams<RoomSessionConnection>): SagaIterator {
+    if (typeof Audio === 'undefined') {
+      getLogger().warn('`Audio` is not supported on this environment.')
+      return
+    }
+
     try {
       const audioEl = new Audio()
       let audioTask: Task | undefined

package/src/utils/interfaces.ts

@@ -202,3 +202,8 @@ export interface RoomSessionDeviceMethods
 
 export interface RoomScreenShareMethods
   extends RoomMemberSelfMethodsInterface {}
+
+export interface RoomSessionJoinAudienceParams {
+  audio?: boolean
+  video?: boolean
+}

package/src/utils/roomSession.ts

@@ -0,0 +1,54 @@
+import { getLogger } from '@signalwire/core'
+import type { Authorization } from '@signalwire/core'
+import type { RoomSessionJoinAudienceParams } from './interfaces'
+
+// `joinAudience` utils
+const getJoinAudienceMediaParams = ({
+  authState,
+  audio = true,
+  video = true,
+}: RoomSessionJoinAudienceParams & {
+  authState: Authorization
+}) => {
+  const getMediaValue = ({
+    remote,
+    local,
+    kind,
+  }: {
+    remote?: boolean
+    local?: boolean
+    kind: 'audio' | 'video'
+  }) => {
+    if (!remote && local) {
+      getLogger().warn(
+        `[joinAudience] ${kind} is currently not allowed on this room.`
+      )
+    }
+
+    return !!(remote && local)
+  }
+
+  return {
+    audio: false,
+    video: false,
+    negotiateAudio: getMediaValue({
+      remote: authState.audio_allowed,
+      local: audio,
+      kind: 'audio',
+    }),
+    negotiateVideo: getMediaValue({
+      remote: authState.video_allowed,
+      local: video,
+      kind: 'video',
+    }),
+  }
+}
+
+const isValidJoinAudienceMediaParams = (
+  options: Record<string, boolean | undefined>
+) => {
+  // At least one value must be true
+  return Object.values(options).some(Boolean)
+}
+
+export { getJoinAudienceMediaParams, isValidJoinAudienceMediaParams }

package/src/utils/videoElement.ts

@@ -70,6 +70,7 @@ const _buildLayer = ({ location }: { location: InternalVideoLayoutLayer }) => {
 
 export interface LocalOverlay {
   readonly id: string
+  status: 'hidden' | 'visible'
   domElement: HTMLDivElement | undefined
   hide(): void
   show(): void
@@ -95,6 +96,8 @@ const makeLayoutChangedHandler =
       const location = layers.find(({ member_id }) => member_id === myMemberId)
 
       let myLayer = localOverlay.domElement
+      // Update localOverlay.status if a location has been found
+      localOverlay.status = location ? 'visible' : 'hidden'
       if (!location) {
         getLogger().debug('Location not found')
         if (myLayer) {