@livekit/react-native 0.2.2

package/src/components/ViewPortDetector.tsx

@@ -0,0 +1,93 @@
+'use strict';
+
+import React, { Component } from 'react';
+import { View, ViewStyle } from 'react-native';
+
+export type Props = {
+  disabled?: boolean;
+  style?: ViewStyle;
+  onChange?: (isVisible: boolean) => void;
+  delay?: number;
+};
+
+/**
+ * Detects when this is in the viewport and visible.
+ *
+ * Will not fire visibility changes for zero width/height components.
+ */
+export default class ViewPortDetector extends Component<Props> {
+  private lastValue: boolean | null = null;
+  private interval: any | null = null;
+  private view: View | null = null;
+
+  constructor(props: Props) {
+    super(props);
+    this.state = { rectTop: 0, rectBottom: 0 };
+  }
+
+  componentDidMount() {
+    if (!this.props.disabled) {
+      this.startWatching();
+    }
+  }
+
+  componentWillUnmount() {
+    this.stopWatching();
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps: Props) {
+    if (nextProps.disabled) {
+      this.stopWatching();
+    } else {
+      this.lastValue = null;
+      this.startWatching();
+    }
+  }
+
+  private 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);
+  }
+
+  private stopWatching() {
+    this.interval = clearInterval(this.interval);
+  }
+
+  private checkInViewPort(width?: number, height?: number) {
+    let isVisible: boolean;
+    // Not visible if any of these are missing.
+    if (!width || !height) {
+      isVisible = false;
+    } else {
+      isVisible = true;
+    }
+
+    if (this.lastValue !== isVisible) {
+      this.lastValue = isVisible;
+      this.props.onChange?.(isVisible);
+    }
+  }
+
+  render() {
+    return (
+      <View
+        collapsable={false}
+        ref={(component) => {
+          this.view = component;
+        }}
+        {...this.props}
+      >
+        {this.props.children}
+      </View>
+    );
+  }
+}

package/src/index.tsx

@@ -0,0 +1,37 @@
+import { registerGlobals as webrtcRegisterGlobals } from 'react-native-webrtc';
+import { setupURLPolyfill } from 'react-native-url-polyfill';
+import AudioSession from './audio/AudioSession';
+import type { AudioConfiguration } from './audio/AudioSession';
+
+/**
+ * Registers the required globals needed for LiveKit to work.
+ *
+ * Must be called before using LiveKit.
+ */
+export function registerGlobals() {
+  webrtcRegisterGlobals();
+  setupURLPolyfill();
+  fixWebrtcAdapter();
+  shimPromiseAllSettled();
+}
+
+function fixWebrtcAdapter() {
+  // @ts-ignore
+  if (window?.navigator !== undefined) {
+    // @ts-ignore
+    const { navigator } = window;
+    if (navigator.userAgent === undefined) {
+      navigator.userAgent = navigator.product ?? 'Unknown';
+    }
+  }
+}
+
+function shimPromiseAllSettled() {
+  var allSettled = require('promise.allsettled');
+  allSettled.shim();
+}
+
+export * from './components/VideoView';
+export * from './useParticipant';
+export * from './useRoom';
+export { AudioSession, AudioConfiguration };

package/src/useParticipant.ts

@@ -0,0 +1,144 @@
+import {
+  ConnectionQuality,
+  LocalParticipant,
+  Participant,
+  ParticipantEvent,
+  Track,
+  TrackPublication,
+} from 'livekit-client';
+import { useEffect, useState } from 'react';
+
+export interface ParticipantState {
+  isSpeaking: boolean;
+  connectionQuality: ConnectionQuality;
+  isLocal: boolean;
+  metadata?: string;
+  publications: TrackPublication[];
+  subscribedTracks: TrackPublication[];
+  cameraPublication?: TrackPublication;
+  microphonePublication?: TrackPublication;
+  screenSharePublication?: TrackPublication;
+}
+
+export function useParticipant(participant: Participant): ParticipantState {
+  const [isAudioMuted, setAudioMuted] = useState(false);
+  const [, setVideoMuted] = useState(false);
+  const [connectionQuality, setConnectionQuality] = useState<ConnectionQuality>(
+    participant.connectionQuality
+  );
+  const [isSpeaking, setSpeaking] = useState(false);
+  const [metadata, setMetadata] = useState<string>();
+  const [publications, setPublications] = useState<TrackPublication[]>([]);
+  const [subscribedTracks, setSubscribedTracks] = useState<TrackPublication[]>(
+    []
+  );
+
+  const [cameraPublication, setCameraPublication] = useState(
+    participant.getTrack(Track.Source.Camera)
+  );
+  const [microphonePublication, setMicrophonePublication] = useState(
+    participant.getTrack(Track.Source.Microphone)
+  );
+  const [screenSharePublication, setScreenSharePublication] = useState(
+    participant.getTrack(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));
+      setSubscribedTracks(
+        Array.from(participant.tracks.values()).filter((pub) => {
+          return pub.isSubscribed && pub.track !== undefined;
+        })
+      );
+    };
+    const onMuted = (pub: TrackPublication) => {
+      if (pub.kind === Track.Kind.Audio) {
+        setAudioMuted(true);
+      } else if (pub.kind === Track.Kind.Video) {
+        setVideoMuted(true);
+      }
+    };
+    const onUnmuted = (pub: TrackPublication) => {
+      if (pub.kind === Track.Kind.Audio) {
+        setAudioMuted(false);
+      } else if (pub.kind === Track.Kind.Video) {
+        setVideoMuted(false);
+      }
+    };
+    const onMetadataChanged = () => {
+      if (participant.metadata) {
+        setMetadata(participant.metadata);
+      }
+    };
+    const onIsSpeakingChanged = () => {
+      setSpeaking(participant.isSpeaking);
+    };
+    const onConnectionQualityUpdate = () => {
+      setConnectionQuality(participant.connectionQuality);
+    };
+
+    // register listeners
+    participant
+      .on(ParticipantEvent.TrackMuted, onMuted)
+      .on(ParticipantEvent.TrackUnmuted, onUnmuted)
+      .on(ParticipantEvent.ParticipantMetadataChanged, onMetadataChanged)
+      .on(ParticipantEvent.IsSpeakingChanged, onIsSpeakingChanged)
+      .on(ParticipantEvent.TrackPublished, onPublicationsChanged)
+      .on(ParticipantEvent.TrackUnpublished, onPublicationsChanged)
+      .on(ParticipantEvent.TrackSubscribed, onPublicationsChanged)
+      .on(ParticipantEvent.TrackUnsubscribed, onPublicationsChanged)
+      .on(ParticipantEvent.LocalTrackPublished, onPublicationsChanged)
+      .on(ParticipantEvent.LocalTrackUnpublished, onPublicationsChanged)
+      .on(ParticipantEvent.ConnectionQualityChanged, onConnectionQualityUpdate);
+
+    // set initial state
+    onMetadataChanged();
+    onIsSpeakingChanged();
+    onPublicationsChanged();
+
+    return () => {
+      // cleanup
+      participant
+        .off(ParticipantEvent.TrackMuted, onMuted)
+        .off(ParticipantEvent.TrackUnmuted, onUnmuted)
+        .off(ParticipantEvent.ParticipantMetadataChanged, onMetadataChanged)
+        .off(ParticipantEvent.IsSpeakingChanged, onIsSpeakingChanged)
+        .off(ParticipantEvent.TrackPublished, onPublicationsChanged)
+        .off(ParticipantEvent.TrackUnpublished, onPublicationsChanged)
+        .off(ParticipantEvent.TrackSubscribed, onPublicationsChanged)
+        .off(ParticipantEvent.TrackUnsubscribed, onPublicationsChanged)
+        .off(ParticipantEvent.LocalTrackPublished, onPublicationsChanged)
+        .off(ParticipantEvent.LocalTrackUnpublished, onPublicationsChanged)
+        .off(
+          ParticipantEvent.ConnectionQualityChanged,
+          onConnectionQualityUpdate
+        );
+    };
+  }, [participant]);
+
+  let muted: boolean | undefined;
+  participant.audioTracks.forEach((pub) => {
+    muted = pub.isMuted;
+  });
+  if (muted === undefined) {
+    muted = true;
+  }
+  if (isAudioMuted !== muted) {
+    setAudioMuted(muted);
+  }
+
+  return {
+    isLocal: participant instanceof LocalParticipant,
+    isSpeaking,
+    connectionQuality,
+    publications,
+    subscribedTracks,
+    cameraPublication,
+    microphonePublication,
+    screenSharePublication,
+    metadata,
+  };
+}

package/src/useRoom.ts

@@ -0,0 +1,163 @@
+import {
+  AudioTrack,
+  ConnectionState,
+  LocalParticipant,
+  Participant,
+  RemoteTrack,
+  Room,
+  RoomEvent,
+  Track,
+} from 'livekit-client';
+import { useEffect, useState } from 'react';
+
+export interface RoomState {
+  room?: Room;
+  /* all participants in the room, including the local participant. */
+  participants: Participant[];
+  /* all subscribed audio tracks in the room, not including local participant. */
+  audioTracks: AudioTrack[];
+  error?: Error;
+}
+
+export interface RoomOptions {
+  sortParticipants?: (participants: Participant[]) => void;
+}
+
+export function useRoom(room: Room, options?: RoomOptions): RoomState {
+  const [error] = useState<Error>();
+  const [participants, setParticipants] = useState<Participant[]>([]);
+  const [audioTracks, setAudioTracks] = useState<AudioTrack[]>([]);
+
+  const sortFunc = options?.sortParticipants ?? sortParticipants;
+
+  useEffect(() => {
+    const onParticipantsChanged = () => {
+      const remotes = Array.from(room.participants.values());
+      const newParticipants: Participant[] = [room.localParticipant];
+      newParticipants.push(...remotes);
+      sortFunc(newParticipants, room.localParticipant);
+      setParticipants(newParticipants);
+    };
+    const onSubscribedTrackChanged = (track?: RemoteTrack) => {
+      // ordering may have changed, re-sort
+      onParticipantsChanged();
+      if (track && track.kind !== Track.Kind.Audio) {
+        return;
+      }
+      const tracks: AudioTrack[] = [];
+      room.participants.forEach((p) => {
+        p.audioTracks.forEach((pub) => {
+          if (pub.audioTrack) {
+            tracks.push(pub.audioTrack);
+          }
+        });
+      });
+      setAudioTracks(tracks);
+    };
+
+    const onConnectionStateChanged = (state: ConnectionState) => {
+      if (state === ConnectionState.Connected) {
+        onParticipantsChanged();
+      }
+    };
+
+    room.once(RoomEvent.Disconnected, () => {
+      room
+        .off(RoomEvent.ParticipantConnected, onParticipantsChanged)
+        .off(RoomEvent.ParticipantDisconnected, onParticipantsChanged)
+        .off(RoomEvent.ActiveSpeakersChanged, onParticipantsChanged)
+        .off(RoomEvent.TrackSubscribed, onSubscribedTrackChanged)
+        .off(RoomEvent.TrackUnsubscribed, onSubscribedTrackChanged)
+        .off(RoomEvent.LocalTrackPublished, onParticipantsChanged)
+        .off(RoomEvent.LocalTrackUnpublished, onParticipantsChanged)
+        .off(RoomEvent.AudioPlaybackStatusChanged, onParticipantsChanged)
+        .off(RoomEvent.ConnectionStateChanged, onConnectionStateChanged);
+    });
+    room
+      .on(RoomEvent.ConnectionStateChanged, onConnectionStateChanged)
+      .on(RoomEvent.Reconnected, onParticipantsChanged)
+      .on(RoomEvent.ParticipantConnected, onParticipantsChanged)
+      .on(RoomEvent.ParticipantDisconnected, onParticipantsChanged)
+      .on(RoomEvent.ActiveSpeakersChanged, onParticipantsChanged)
+      .on(RoomEvent.TrackSubscribed, onSubscribedTrackChanged)
+      .on(RoomEvent.TrackUnsubscribed, onSubscribedTrackChanged)
+      .on(RoomEvent.LocalTrackPublished, onParticipantsChanged)
+      .on(RoomEvent.LocalTrackUnpublished, onParticipantsChanged)
+      // trigger a state change by re-sorting participants
+      .on(RoomEvent.AudioPlaybackStatusChanged, onParticipantsChanged);
+
+    onSubscribedTrackChanged();
+
+    return () => {
+      room.disconnect();
+    };
+  }, [room, sortFunc]);
+
+  return {
+    error,
+    participants,
+    audioTracks,
+  };
+}
+
+/**
+ * Default sort for participants, it'll order participants by:
+ * 1. dominant speaker (speaker with the loudest audio level)
+ * 2. local participant
+ * 3. other speakers that are recently active
+ * 4. participants with video on
+ * 5. by joinedAt
+ */
+export function sortParticipants(
+  participants: Participant[],
+  localParticipant?: LocalParticipant
+) {
+  participants.sort((a, b) => {
+    // loudest speaker first
+    if (a.isSpeaking && b.isSpeaking) {
+      return b.audioLevel - a.audioLevel;
+    }
+
+    // speaker goes first
+    if (a.isSpeaking !== b.isSpeaking) {
+      if (a.isSpeaking) {
+        return -1;
+      } else {
+        return 1;
+      }
+    }
+
+    // last active speaker first
+    if (a.lastSpokeAt !== b.lastSpokeAt) {
+      const aLast = a.lastSpokeAt?.getTime() ?? 0;
+      const bLast = b.lastSpokeAt?.getTime() ?? 0;
+      return bLast - aLast;
+    }
+
+    // video on
+    const aVideo = a.videoTracks.size > 0;
+    const bVideo = b.videoTracks.size > 0;
+    if (aVideo !== bVideo) {
+      if (aVideo) {
+        return -1;
+      } else {
+        return 1;
+      }
+    }
+
+    // joinedAt
+    return (a.joinedAt?.getTime() ?? 0) - (b.joinedAt?.getTime() ?? 0);
+  });
+
+  if (localParticipant) {
+    const localIdx = participants.indexOf(localParticipant);
+    if (localIdx >= 0) {
+      participants.splice(localIdx, 1);
+      if (participants.length > 0) {
+        participants.splice(1, 0, localParticipant);
+      } else {
+        participants.push(localParticipant);
+      }
+    }
+  }
+}