Fix issue with join_video/audio_muted and local streams + type fixes

.changeset/poor-pumpkins-relate.md

@@ -0,0 +1,7 @@
+---
+'@signalwire/core': patch
+'@signalwire/js': patch
+'@signalwire/realtime-api': patch
+---
+
+Fix issue with local streams for when the user joined with audio/video muted. Update typings to match the BE

packages/core/src/types/videoMember.ts

@@ -26,7 +26,6 @@ export const INTERNAL_MEMBER_UPDATABLE_PROPS = {
  input_volume: 1,
  output_volume: 1,
  input_sensitivity: 1,
- meta: {},
 }
 export type InternalVideoMemberUpdatableProps =
  typeof INTERNAL_MEMBER_UPDATABLE_PROPS
@@ -65,7 +64,7 @@ type VideoMemberUpdatableProps = AssertSameType<
  * essentially muted) to 100 (highest sensitivity). */
  inputSensitivity: number
  /** Metadata associated to this member. */
- meta: Record<string, unknown>
+ meta?: Record<string, unknown>
  }
 >
 

packages/core/src/types/videoRoomSession.ts

@@ -65,7 +65,9 @@ export interface VideoRoomSessionContract {
  /** Current layout name used in the room. */
  layoutName: string
  /** Metadata associated to this room session. */
- meta: Record<string, unknown>
+ meta?: Record<string, unknown>
+ /** List of members that are part of this room session */
+ members?: InternalVideoMemberEntity[]
 
  audioMute(params?: MemberCommandParams): Rooms.AudioMuteMember
  audioUnmute(params?: MemberCommandParams): Rooms.AudioUnmuteMember

packages/js/src/features/mediaElements/mediaElementsSagas.ts

@@ -88,6 +88,33 @@ export const makeVideoElementSaga = ({
  }
  })
 
+ /**
+ * If the user joins with `join_video_muted: true` or
+ * `join_audio_muted: true` we'll stop the streams
+ * right away.
+ */
+ room.once('room.subscribed', (params) => {
+ const member = params.room_session.members?.find(
+ (m) => m.id === room.memberId
+ )
+
+ if (member?.audio_muted) {
+ try {
+ room.stopOutboundAudio()
+ } catch (error) {
+ getLogger().error('Error handling audio_muted', error)
+ }
+ }
+
+ if (member?.video_muted) {
+ try {
+ room.stopOutboundVideo()
+ } catch (error) {
+ getLogger().error('Error handling video_muted', error)
+ }
+ }
+ })
+
  room.on('member.updated.video_muted', (params) => {
  try {
  const { member } = params

packages/js/src/utils/videoElement.ts

@@ -132,9 +132,8 @@ const makeLayoutChangedHandler =
  /**
  * Show myLayer only if the localStream has a valid video track
  */
- if (localStream.getVideoTracks().length > 0) {
- myLayer.style.opacity = '1'
- }
+ const hasVideo = localStream.getVideoTracks().length > 0
+ myLayer.style.opacity = hasVideo ? '1' : '0'
  myLayer.style.top = top
  myLayer.style.left = left
  myLayer.style.width = width

packages/realtime-api/src/video/RoomSession.ts

@@ -586,9 +586,9 @@ export interface RoomSession
  extends AssertSameType<RoomSessionMain, RoomSessionDocs> {}
 
 export type RoomSessionUpdated = EntityUpdated<RoomSession>
-export interface RoomSessionFullState extends RoomSession {
+export interface RoomSessionFullState extends Omit<RoomSession, "members"> {
  /** List of members that are part of this room session */
- members: RoomSessionMember[]
+ members?: RoomSessionMember[]
 }
 
 class RoomSessionConsumer extends BaseConsumer<RealTimeRoomApiEvents> {