@livekit/react-native 1.4.3 → 2.0.2

package/src/audio/AudioManager.ts

@@ -1,6 +1,6 @@
 import { useState, useEffect, useMemo } from 'react';
 import { Platform } from 'react-native';
-import { RoomEvent, type Room } from 'livekit-client';
+import { RoomEvent, Room } from 'livekit-client';
 import AudioSession, {
   getDefaultAppleAudioConfigurationForMode,
   type AppleAudioConfiguration,
@@ -31,14 +31,25 @@ export function useIOSAudioManagement(
     [localTrackCount, remoteTrackCount]
   );
 
+  useEffect(() => {
+    let recalculateTrackCounts = () => {
+      setLocalTrackCount(getLocalAudioTrackCount(room));
+      setRemoteTrackCount(getRemoteAudioTrackCount(room));
+    };
+
+    recalculateTrackCounts();
+
+    room.on(RoomEvent.Connected, recalculateTrackCounts);
+
+    return () => {
+      room.off(RoomEvent.Connected, recalculateTrackCounts);
+    };
+  }, [room]);
   useEffect(() => {
     if (Platform.OS !== 'ios') {
       return () => {};
     }
 
-    setLocalTrackCount(getLocalAudioTrackCount(room));
-    setRemoteTrackCount(getRemoteAudioTrackCount(room));
-
     let onLocalPublished = () => {
       setLocalTrackCount(localTrackCount + 1);
     };
@@ -85,7 +96,6 @@ export function useIOSAudioManagement(
     let configFunc =
       onConfigureNativeAudio ?? getDefaultAppleAudioConfigurationForMode;
     let audioConfig = configFunc(trackState, preferSpeakerOutput);
-
     AudioSession.setAppleAudioConfiguration(audioConfig);
   }, [trackState, onConfigureNativeAudio, preferSpeakerOutput]);
 }
@@ -106,13 +116,13 @@ function computeAudioTrackState(
 }
 
 function getLocalAudioTrackCount(room: Room): number {
-  return room.localParticipant.audioTracks.entries.length;
+  return room.localParticipant.audioTrackPublications.size;
 }
 
 function getRemoteAudioTrackCount(room: Room): number {
   var audioTracks = 0;
-  room.participants.forEach((participant) => {
-    audioTracks += participant.audioTracks.entries.length;
+  room.remoteParticipants.forEach((participant) => {
+    audioTracks += participant.audioTrackPublications.size;
   });
 
   return audioTracks;

package/src/audio/AudioSession.ts

@@ -36,6 +36,8 @@ const LivekitReactNative = NativeModules.LivekitReactNative
  *
  *   See {@link AndroidAudioTypePresets} for pre-configured values.
  *
+ *   NOTE: If `audioTypeOptions` is set, this must also be reflected in your android MainApplication setup.
+ *
  * ----
  * iOS
  *

package/src/components/VideoView.tsx

@@ -9,7 +9,7 @@ import {
   VideoTrack,
 } from 'livekit-client';
 import { RTCView } from '@livekit/react-native-webrtc';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { RemoteVideoTrack } from 'livekit-client';
 import ViewPortDetector from './ViewPortDetector';
 
@@ -35,6 +35,20 @@ export const VideoView = ({
     return info;
   });
 
+  const layoutOnChange = useCallback(
+    (event: LayoutChangeEvent) => elementInfo.onLayout(event),
+    [elementInfo]
+  );
+  const visibilityOnChange = useCallback(
+    (isVisible: boolean) => elementInfo.onVisibility(isVisible),
+    [elementInfo]
+  );
+  const shouldObserveVisibility = useMemo(() => {
+    return (
+      videoTrack instanceof RemoteVideoTrack && videoTrack.isAdaptiveStream
+    );
+  }, [videoTrack]);
+
   const [mediaStream, setMediaStream] = useState(videoTrack?.mediaStream);
   useEffect(() => {
     setMediaStream(videoTrack?.mediaStream);
@@ -64,22 +78,15 @@ export const VideoView = ({
   }, [videoTrack, elementInfo]);
 
   return (
-    <View
-      style={{ ...style, ...styles.container }}
-      onLayout={(event) => {
-        elementInfo.onLayout(event);
-      }}
-    >
+    <View style={{ ...style, ...styles.container }} onLayout={layoutOnChange}>
       <ViewPortDetector
-        onChange={(isVisible: boolean) => elementInfo.onVisibility(isVisible)}
+        onChange={visibilityOnChange}
         style={styles.videoView}
+        disabled={!shouldObserveVisibility}
+        propKey={videoTrack}
       >
         <RTCView
-          // eslint-disable-next-line react-native/no-inline-styles
-          style={{
-            flex: 1,
-            width: '100%',
-          }}
+          style={styles.videoView}
           streamURL={mediaStream?.toURL() ?? ''}
           objectFit={objectFit}
           zOrder={zOrder}

package/src/components/ViewPortDetector.tsx

@@ -1,15 +1,61 @@
 'use strict';
 
 import React, { Component, PropsWithChildren } from 'react';
-import { View, ViewStyle } from 'react-native';
+import {
+  AppState,
+  AppStateStatus,
+  NativeEventSubscription,
+  View,
+  ViewStyle,
+} from 'react-native';
+
+const DEFAULT_DELAY = 1000;
 
 export type Props = {
   disabled?: boolean;
   style?: ViewStyle;
   onChange?: (isVisible: boolean) => void;
   delay?: number;
+  propKey?: any;
 };
 
+class TimeoutHandler {
+  private handlerRef: { id: any } = { id: -1 };
+
+  get handler(): any {
+    return this.handlerRef.id;
+  }
+  set handler(n: any) {
+    this.handlerRef.id = n;
+  }
+
+  clear() {
+    clearTimeout(this.handlerRef.id as any);
+  }
+}
+
+function setIntervalWithTimeout(
+  callback: (clear: () => void) => any,
+  intervalMs: number,
+  handleWrapper = new TimeoutHandler()
+): TimeoutHandler {
+  let cleared = false;
+
+  const timeout = () => {
+    handleWrapper.handler = setTimeout(() => {
+      callback(() => {
+        cleared = true;
+        handleWrapper.clear();
+      });
+      if (!cleared) {
+        timeout();
+      }
+    }, intervalMs);
+  };
+  timeout();
+  return handleWrapper;
+}
+
 /**
  * Detects when this is in the viewport and visible.
  *
@@ -19,8 +65,10 @@ export default class ViewPortDetector extends Component<
   PropsWithChildren<Props>
 > {
   private lastValue: boolean | null = null;
-  private interval: any | null = null;
+  private interval: TimeoutHandler | null = null;
   private view: View | null = null;
+  private lastAppStateActive = false;
+  private appStateSubscription: NativeEventSubscription | null = null;
 
   constructor(props: Props) {
     super(props);
@@ -28,43 +76,84 @@ export default class ViewPortDetector extends Component<
   }
 
   componentDidMount() {
-    if (!this.props.disabled) {
+    this.lastAppStateActive = AppState.currentState === 'active';
+    this.appStateSubscription = AppState.addEventListener(
+      'change',
+      this.handleAppStateChange
+    );
+    if (this.hasValidTimeout(this.props.disabled, this.props.delay)) {
       this.startWatching();
     }
   }
 
   componentWillUnmount() {
+    this.appStateSubscription?.remove();
+    this.appStateSubscription = null;
     this.stopWatching();
   }
 
+  hasValidTimeout = (disabled?: boolean, delay?: number): boolean => {
+    let disabledValue = disabled ?? false;
+    let delayValue = delay ?? DEFAULT_DELAY;
+    return (
+      AppState.currentState === 'active' && !disabledValue && delayValue > 0
+    );
+  };
+
   UNSAFE_componentWillReceiveProps(nextProps: Props) {
-    if (nextProps.disabled) {
+    if (!this.hasValidTimeout(nextProps.disabled, nextProps.delay)) {
       this.stopWatching();
     } else {
-      this.lastValue = null;
+      if (this.props.propKey !== nextProps.propKey) {
+        this.lastValue = null;
+      }
       this.startWatching();
     }
   }
+  handleAppStateChange = (nextAppState: AppStateStatus) => {
+    let nextAppStateActive = nextAppState === 'active';
+    if (this.lastAppStateActive !== nextAppStateActive) {
+      this.checkVisibility();
+    }
+    this.lastAppStateActive = nextAppStateActive;
 
-  private startWatching() {
+    if (!this.hasValidTimeout(this.props.disabled, this.props.delay)) {
+      this.stopWatching();
+    } else {
+      this.startWatching();
+    }
+  };
+
+  startWatching = () => {
     if (this.interval) {
       return;
     }
-    this.interval = setInterval(() => {
-      if (!this.view) {
-        return;
-      }
-      this.view.measure((_x, _y, width, height, _pageX, _pageY) => {
-        this.checkInViewPort(width, height);
-      });
-    }, this.props.delay || 100);
-  }
+    this.interval = setIntervalWithTimeout(
+      this.checkVisibility,
+      this.props.delay || DEFAULT_DELAY
+    );
+  };
 
-  private stopWatching() {
-    this.interval = clearInterval(this.interval);
-  }
+  stopWatching = () => {
+    this.interval?.clear();
+    this.interval = null;
+  };
 
-  private checkInViewPort(width?: number, height?: number) {
+  checkVisibility = () => {
+    if (!this.view) {
+      return;
+    }
+
+    if (AppState.currentState !== 'active') {
+      this.updateVisibility(false);
+      return;
+    }
+
+    this.view.measure((_x, _y, width, height, _pageX, _pageY) => {
+      this.checkInViewPort(width, height);
+    });
+  };
+  checkInViewPort = (width?: number, height?: number) => {
     let isVisible: boolean;
     // Not visible if any of these are missing.
     if (!width || !height) {
@@ -72,13 +161,15 @@ export default class ViewPortDetector extends Component<
     } else {
       isVisible = true;
     }
+    this.updateVisibility(isVisible);
+  };
 
+  updateVisibility = (isVisible: boolean) => {
     if (this.lastValue !== isVisible) {
       this.lastValue = isVisible;
       this.props.onChange?.(isVisible);
     }
-  }
-
+  };
   render() {
     return (
       <View

package/src/useParticipant.ts

@@ -34,22 +34,28 @@ export function useParticipant(participant: Participant): ParticipantState {
   );
 
   const [cameraPublication, setCameraPublication] = useState(
-    participant.getTrack(Track.Source.Camera)
+    participant.getTrackPublication(Track.Source.Camera)
   );
   const [microphonePublication, setMicrophonePublication] = useState(
-    participant.getTrack(Track.Source.Microphone)
+    participant.getTrackPublication(Track.Source.Microphone)
   );
   const [screenSharePublication, setScreenSharePublication] = useState(
-    participant.getTrack(Track.Source.ScreenShare)
+    participant.getTrackPublication(Track.Source.ScreenShare)
   );
   useEffect(() => {
     const onPublicationsChanged = () => {
-      setPublications(Array.from(participant.tracks.values()));
-      setCameraPublication(participant.getTrack(Track.Source.Camera));
-      setMicrophonePublication(participant.getTrack(Track.Source.Microphone));
-      setScreenSharePublication(participant.getTrack(Track.Source.ScreenShare));
+      setPublications(Array.from(participant.trackPublications.values()));
+      setCameraPublication(
+        participant.getTrackPublication(Track.Source.Camera)
+      );
+      setMicrophonePublication(
+        participant.getTrackPublication(Track.Source.Microphone)
+      );
+      setScreenSharePublication(
+        participant.getTrackPublication(Track.Source.ScreenShare)
+      );
       setSubscribedTracks(
-        Array.from(participant.tracks.values()).filter((pub) => {
+        Array.from(participant.trackPublications.values()).filter((pub) => {
           return pub.isSubscribed && pub.track !== undefined;
         })
       );
@@ -120,7 +126,7 @@ export function useParticipant(participant: Participant): ParticipantState {
   }, [participant]);
 
   let muted: boolean | undefined;
-  participant.audioTracks.forEach((pub) => {
+  participant.audioTrackPublications.forEach((pub) => {
     muted = pub.isMuted;
   });
   if (muted === undefined) {

package/src/useRoom.ts

@@ -32,7 +32,7 @@ export function useRoom(room: Room, options?: RoomOptions): RoomState {
 
   useEffect(() => {
     const onParticipantsChanged = () => {
-      const remotes = Array.from(room.participants.values());
+      const remotes = Array.from(room.remoteParticipants.values());
       const newParticipants: Participant[] = [room.localParticipant];
       newParticipants.push(...remotes);
       sortFunc(newParticipants, room.localParticipant);
@@ -45,8 +45,8 @@ export function useRoom(room: Room, options?: RoomOptions): RoomState {
         return;
       }
       const tracks: AudioTrack[] = [];
-      room.participants.forEach((p) => {
-        p.audioTracks.forEach((pub) => {
+      room.remoteParticipants.forEach((p) => {
+        p.audioTrackPublications.forEach((pub) => {
           if (pub.audioTrack) {
             tracks.push(pub.audioTrack);
           }
@@ -135,8 +135,8 @@ export function sortParticipants(
     }
 
     // video on
-    const aVideo = a.videoTracks.size > 0;
-    const bVideo = b.videoTracks.size > 0;
+    const aVideo = a.videoTrackPublications.size > 0;
+    const bVideo = b.videoTrackPublications.size > 0;
     if (aVideo !== bVideo) {
       if (aVideo) {
         return -1;