@livekit/react-native 2.0.2 → 2.1.0-0

package/lib/typescript/components/LiveKitRoom.d.ts

@@ -0,0 +1,90 @@
+import { FeatureFlags } from '@livekit/components-react';
+import type { AudioCaptureOptions, RoomConnectOptions, RoomOptions, ScreenShareCaptureOptions, VideoCaptureOptions } from 'livekit-client';
+import type { MediaDeviceFailure, Room } from 'livekit-client';
+import * as React from 'react';
+/** @public */
+export interface LiveKitRoomProps {
+    /**
+     * URL to the LiveKit server.
+     * For example: `wss://<domain>.livekit.cloud`
+     * To simplify the implementation, `undefined` is also accepted as an intermediate value, but only with a valid string url can the connection be established.
+     */
+    serverUrl: string | undefined;
+    /**
+     * A user specific access token for a client to authenticate to the room.
+     * This token is necessary to establish a connection to the room.
+     * To simplify the implementation, `undefined` is also accepted as an intermediate value, but only with a valid string token can the connection be established.
+     *
+     * @see https://docs.livekit.io/cloud/project-management/keys-and-tokens/#generating-access-tokens
+     */
+    token: string | undefined;
+    /**
+     * Publish audio immediately after connecting to your LiveKit room.
+     * @defaultValue `false`
+     * @see https://docs.livekit.io/client-sdk-js/interfaces/AudioCaptureOptions.html
+     */
+    audio?: AudioCaptureOptions | boolean;
+    /**
+     * Publish video immediately after connecting to your LiveKit room.
+     * @defaultValue `false`
+     * @see https://docs.livekit.io/client-sdk-js/interfaces/VideoCaptureOptions.html
+     */
+    video?: VideoCaptureOptions | boolean;
+    /**
+     * Publish screen share immediately after connecting to your LiveKit room.
+     * @defaultValue `false`
+     * @see https://docs.livekit.io/client-sdk-js/interfaces/ScreenShareCaptureOptions.html
+     */
+    screen?: ScreenShareCaptureOptions | boolean;
+    /**
+     * If set to true a connection to LiveKit room is initiated.
+     * @defaultValue `false`
+     */
+    connect?: boolean;
+    /**
+     * Options for when creating a new room.
+     * When you pass your own room instance to this component, these options have no effect.
+     * Instead, set the options directly in the room instance.
+     *
+     * @see https://docs.livekit.io/client-sdk-js/interfaces/RoomOptions.html
+     */
+    options?: RoomOptions;
+    /**
+     * Define options how to connect to the LiveKit server.
+     *
+     * @see https://docs.livekit.io/client-sdk-js/interfaces/RoomConnectOptions.html
+     */
+    connectOptions?: RoomConnectOptions;
+    onConnected?: () => void;
+    onDisconnected?: () => void;
+    onError?: (error: Error) => void;
+    onMediaDeviceFailure?: (failure?: MediaDeviceFailure) => void;
+    onEncryptionError?: (error: Error) => void;
+    /**
+     * Optional room instance.
+     * By passing your own room instance you overwrite the `options` parameter,
+     * make sure to set the options directly on the room instance itself.
+     */
+    room?: Room;
+    simulateParticipants?: number | undefined;
+    /** @experimental */
+    featureFlags?: FeatureFlags | undefined;
+}
+/**
+ * The `LiveKitRoom` component provides the room context to all its child components.
+ * It is generally the starting point of your LiveKit app and the root of the LiveKit component tree.
+ * It provides the room state as a React context to all child components, so you don't have to pass it yourself.
+ *
+ * @example
+ * ```tsx
+ * <LiveKitRoom
+ *  token='<livekit-token>'
+ *  serverUrl='<url-to-livekit-server>'
+ *  connect={true}
+ * >
+ *     ...
+ * </LiveKitRoom>
+ * ```
+ * @public
+ */
+export declare function LiveKitRoom(props: React.PropsWithChildren<LiveKitRoomProps>): React.JSX.Element;

package/lib/typescript/components/VideoTrack.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { ViewStyle } from 'react-native';
+import type { TrackReference } from '@livekit/components-react';
+export declare type VideoTrackProps = {
+    trackRef: TrackReference | undefined;
+    style?: ViewStyle;
+    objectFit?: 'cover' | 'contain' | undefined;
+    mirror?: boolean;
+    zOrder?: number;
+};
+export declare const VideoTrack: ({ style, trackRef, objectFit, zOrder, mirror, }: VideoTrackProps) => React.JSX.Element;

package/lib/typescript/components/VideoView.d.ts

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import { ViewStyle } from 'react-native';
 import { VideoTrack } from 'livekit-client';
+/**
+ * @deprecated use `VideoTrack` and `VideoTrackProps` instead.
+ */
 export declare type Props = {
     videoTrack?: VideoTrack | undefined;
     style?: ViewStyle;
@@ -8,4 +11,7 @@ export declare type Props = {
     mirror?: boolean;
     zOrder?: number;
 };
+/**
+ * @deprecated use `VideoTrack` and `VideoTrackProps` instead.
+ */
 export declare const VideoView: ({ style, videoTrack, objectFit, zOrder, mirror, }: Props) => React.JSX.Element;

package/lib/typescript/hooks.d.ts

@@ -0,0 +1,2 @@
+export { useConnectionState, useDataChannel, useIsSpeaking, useLocalParticipant, UseLocalParticipantOptions, useLocalParticipantPermissions, useParticipantInfo, UseParticipantInfoOptions, useParticipants, UseParticipantsOptions, useRemoteParticipants, UseRemoteParticipantOptions, useRemoteParticipant, UseRemoteParticipantsOptions, useSpeakingParticipants, useSortedParticipants, useChat, useIsEncrypted, useIsMuted, useParticipantTracks, useLiveKitRoom, RoomContext, useRoomContext, ParticipantContext, useParticipantContext, TrackRefContext, useTrackRefContext, useTracks, UseTracksOptions, TrackReference, TrackReferenceOrPlaceholder, isTrackReference, useEnsureTrackRef, useTrackMutedIndicator, useVisualStableUpdate, UseVisualStableUpdateOptions, } from '@livekit/components-react';
+export { ReceivedDataMessage } from '@livekit/components-core';

package/lib/typescript/index.d.ts

@@ -8,6 +8,9 @@ import type { LogLevel, SetLogLevelOptions } from './logger';
  * Must be called before using LiveKit.
  */
 export declare function registerGlobals(): void;
+export * from './hooks';
+export * from './components/LiveKitRoom';
+export * from './components/VideoTrack';
 export * from './components/VideoView';
 export * from './useParticipant';
 export * from './useRoom';

package/lib/typescript/useParticipant.d.ts

@@ -1,4 +1,5 @@
 import { ConnectionQuality, Participant, TrackPublication } from 'livekit-client';
+/** @deprecated use `useRemoteParticipant` or `useLocalParticipant` instead */
 export interface ParticipantState {
     isSpeaking: boolean;
     connectionQuality: ConnectionQuality;
@@ -10,4 +11,5 @@ export interface ParticipantState {
     microphonePublication?: TrackPublication;
     screenSharePublication?: TrackPublication;
 }
+/** @deprecated use `useRemoteParticipant` or `useLocalParticipant` instead */
 export declare function useParticipant(participant: Participant): ParticipantState;

package/lib/typescript/useRoom.d.ts

@@ -8,6 +8,7 @@ export interface RoomState {
 export interface RoomOptions {
     sortParticipants?: (participants: Participant[]) => void;
 }
+/** @deprecated wrap your components in a <LiveKitRoom> component instead and use more granular hooks to track state you're interested in */
 export declare function useRoom(room: Room, options?: RoomOptions): RoomState;
 /**
  * Default sort for participants, it'll order participants by:

package/livekit-react-native.podspec

@@ -19,4 +19,9 @@ Pod::Spec.new do |s|
 
   s.dependency "React-Core"
   s.dependency "livekit-react-native-webrtc"
+
+  # Swift/Objective-C compatibility
+  s.pod_target_xcconfig = {
+    'DEFINES_MODULE' => 'YES'
+  }
 end

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livekit/react-native",
-  "version": "2.0.2",
+  "version": "2.1.0-0",
   "description": "LiveKit for React Native",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -42,6 +42,7 @@
     "android"
   ],
   "dependencies": {
+    "@livekit/components-react": "^2.0.6",
     "array.prototype.at": "^1.1.1",
     "fastestsmallesttextencoderdecoder": "^1.0.22",
     "livekit-client": "^2.0.0",

package/src/components/LiveKitRoom.tsx

@@ -0,0 +1,118 @@
+import {
+  FeatureFlags,
+  LKFeatureContext,
+  RoomContext,
+  useLiveKitRoom,
+} from '@livekit/components-react';
+import type {
+  AudioCaptureOptions,
+  RoomConnectOptions,
+  RoomOptions,
+  ScreenShareCaptureOptions,
+  VideoCaptureOptions,
+} from 'livekit-client';
+import type { MediaDeviceFailure, Room } from 'livekit-client';
+import * as React from 'react';
+
+/** @public */
+export interface LiveKitRoomProps {
+  /**
+   * URL to the LiveKit server.
+   * For example: `wss://<domain>.livekit.cloud`
+   * To simplify the implementation, `undefined` is also accepted as an intermediate value, but only with a valid string url can the connection be established.
+   */
+  serverUrl: string | undefined;
+  /**
+   * A user specific access token for a client to authenticate to the room.
+   * This token is necessary to establish a connection to the room.
+   * To simplify the implementation, `undefined` is also accepted as an intermediate value, but only with a valid string token can the connection be established.
+   *
+   * @see https://docs.livekit.io/cloud/project-management/keys-and-tokens/#generating-access-tokens
+   */
+  token: string | undefined;
+  /**
+   * Publish audio immediately after connecting to your LiveKit room.
+   * @defaultValue `false`
+   * @see https://docs.livekit.io/client-sdk-js/interfaces/AudioCaptureOptions.html
+   */
+  audio?: AudioCaptureOptions | boolean;
+  /**
+   * Publish video immediately after connecting to your LiveKit room.
+   * @defaultValue `false`
+   * @see https://docs.livekit.io/client-sdk-js/interfaces/VideoCaptureOptions.html
+   */
+  video?: VideoCaptureOptions | boolean;
+  /**
+   * Publish screen share immediately after connecting to your LiveKit room.
+   * @defaultValue `false`
+   * @see https://docs.livekit.io/client-sdk-js/interfaces/ScreenShareCaptureOptions.html
+   */
+  screen?: ScreenShareCaptureOptions | boolean;
+  /**
+   * If set to true a connection to LiveKit room is initiated.
+   * @defaultValue `false`
+   */
+  connect?: boolean;
+  /**
+   * Options for when creating a new room.
+   * When you pass your own room instance to this component, these options have no effect.
+   * Instead, set the options directly in the room instance.
+   *
+   * @see https://docs.livekit.io/client-sdk-js/interfaces/RoomOptions.html
+   */
+  options?: RoomOptions;
+  /**
+   * Define options how to connect to the LiveKit server.
+   *
+   * @see https://docs.livekit.io/client-sdk-js/interfaces/RoomConnectOptions.html
+   */
+  connectOptions?: RoomConnectOptions;
+  onConnected?: () => void;
+  onDisconnected?: () => void;
+  onError?: (error: Error) => void;
+  onMediaDeviceFailure?: (failure?: MediaDeviceFailure) => void;
+  onEncryptionError?: (error: Error) => void;
+  /**
+   * Optional room instance.
+   * By passing your own room instance you overwrite the `options` parameter,
+   * make sure to set the options directly on the room instance itself.
+   */
+  room?: Room;
+
+  simulateParticipants?: number | undefined;
+
+  /** @experimental */
+  featureFlags?: FeatureFlags | undefined;
+}
+
+/**
+ * The `LiveKitRoom` component provides the room context to all its child components.
+ * It is generally the starting point of your LiveKit app and the root of the LiveKit component tree.
+ * It provides the room state as a React context to all child components, so you don't have to pass it yourself.
+ *
+ * @example
+ * ```tsx
+ * <LiveKitRoom
+ *  token='<livekit-token>'
+ *  serverUrl='<url-to-livekit-server>'
+ *  connect={true}
+ * >
+ *     ...
+ * </LiveKitRoom>
+ * ```
+ * @public
+ */
+export function LiveKitRoom(props: React.PropsWithChildren<LiveKitRoomProps>) {
+  const { room } = useLiveKitRoom(props);
+  return (
+    <>
+      {room && (
+        <RoomContext.Provider value={room}>
+          <LKFeatureContext.Provider value={props.featureFlags}>
+            {props.children}
+          </LKFeatureContext.Provider>
+        </RoomContext.Provider>
+      )}
+    </>
+  );
+}

package/src/components/VideoTrack.tsx

@@ -0,0 +1,150 @@
+import * as React from 'react';
+
+import { LayoutChangeEvent, StyleSheet, View, ViewStyle } from 'react-native';
+import {
+  ElementInfo,
+  LocalVideoTrack,
+  Track,
+  TrackEvent,
+} from 'livekit-client';
+import { RTCView } from '@livekit/react-native-webrtc';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { RemoteVideoTrack } from 'livekit-client';
+import ViewPortDetector from './ViewPortDetector';
+import type { TrackReference } from '@livekit/components-react';
+
+export type VideoTrackProps = {
+  trackRef: TrackReference | undefined;
+  style?: ViewStyle;
+  objectFit?: 'cover' | 'contain' | undefined;
+  mirror?: boolean;
+  zOrder?: number;
+};
+
+export const VideoTrack = ({
+  style = {},
+  trackRef,
+  objectFit = 'cover',
+  zOrder,
+  mirror,
+}: VideoTrackProps) => {
+  const [elementInfo] = useState(() => {
+    let info = new VideoTrackElementInfo();
+    info.id = trackRef?.publication?.trackSid;
+    return info;
+  });
+
+  const layoutOnChange = useCallback(
+    (event: LayoutChangeEvent) => elementInfo.onLayout(event),
+    [elementInfo]
+  );
+  const visibilityOnChange = useCallback(
+    (isVisible: boolean) => elementInfo.onVisibility(isVisible),
+    [elementInfo]
+  );
+
+  const videoTrack = trackRef?.publication.track;
+
+  const shouldObserveVisibility = useMemo(() => {
+    return (
+      videoTrack instanceof RemoteVideoTrack && videoTrack.isAdaptiveStream
+    );
+  }, [videoTrack]);
+
+  const [mediaStream, setMediaStream] = useState(videoTrack?.mediaStream);
+  useEffect(() => {
+    setMediaStream(videoTrack?.mediaStream);
+    if (videoTrack instanceof LocalVideoTrack) {
+      const onRestarted = (track: Track | null) => {
+        setMediaStream(track?.mediaStream);
+      };
+      videoTrack.on(TrackEvent.Restarted, onRestarted);
+
+      return () => {
+        videoTrack.off(TrackEvent.Restarted, onRestarted);
+      };
+    } else {
+      return () => {};
+    }
+  }, [videoTrack]);
+
+  useEffect(() => {
+    if (videoTrack instanceof RemoteVideoTrack && videoTrack.isAdaptiveStream) {
+      videoTrack?.observeElementInfo(elementInfo);
+      return () => {
+        videoTrack?.stopObservingElementInfo(elementInfo);
+      };
+    } else {
+      return () => {};
+    }
+  }, [videoTrack, elementInfo]);
+
+  return (
+    <View style={{ ...style, ...styles.container }} onLayout={layoutOnChange}>
+      <ViewPortDetector
+        onChange={visibilityOnChange}
+        style={styles.videoTrack}
+        disabled={!shouldObserveVisibility}
+        propKey={videoTrack}
+      >
+        <RTCView
+          style={styles.videoTrack}
+          streamURL={mediaStream?.toURL() ?? ''}
+          objectFit={objectFit}
+          zOrder={zOrder}
+          mirror={mirror}
+        />
+      </ViewPortDetector>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {},
+  videoTrack: {
+    flex: 1,
+    width: '100%',
+  },
+});
+
+class VideoTrackElementInfo implements ElementInfo {
+  element: object = {};
+  something?: any;
+  id?: string;
+  _width = 0;
+  _height = 0;
+  _observing = false;
+  visible: boolean = true;
+  visibilityChangedAt: number | undefined;
+  pictureInPicture = false;
+  handleResize?: (() => void) | undefined;
+  handleVisibilityChanged?: (() => void) | undefined;
+  width = () => this._width;
+  height = () => this._height;
+
+  observe(): void {
+    this._observing = true;
+  }
+  stopObserving(): void {
+    this._observing = false;
+  }
+
+  onLayout(event: LayoutChangeEvent) {
+    let { width, height } = event.nativeEvent.layout;
+    this._width = width;
+    this._height = height;
+
+    if (this._observing) {
+      this.handleResize?.();
+    }
+  }
+  onVisibility(isVisible: boolean) {
+    if (this.visible !== isVisible) {
+      this.visible = isVisible;
+      this.visibilityChangedAt = Date.now();
+      if (this._observing) {
+        this.handleVisibilityChanged?.();
+      }
+    }
+  }
+}

package/src/components/VideoView.tsx

@@ -13,6 +13,9 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { RemoteVideoTrack } from 'livekit-client';
 import ViewPortDetector from './ViewPortDetector';
 
+/**
+ * @deprecated use `VideoTrack` and `VideoTrackProps` instead.
+ */
 export type Props = {
   videoTrack?: VideoTrack | undefined;
   style?: ViewStyle;
@@ -21,6 +24,9 @@ export type Props = {
   zOrder?: number;
 };
 
+/**
+ * @deprecated use `VideoTrack` and `VideoTrackProps` instead.
+ */
 export const VideoView = ({
   style = {},
   videoTrack,

package/src/hooks.ts

@@ -0,0 +1,40 @@
+export {
+  useConnectionState,
+  useDataChannel,
+  useIsSpeaking,
+  useLocalParticipant,
+  UseLocalParticipantOptions,
+  useLocalParticipantPermissions,
+  useParticipantInfo,
+  UseParticipantInfoOptions,
+  useParticipants,
+  UseParticipantsOptions,
+  useRemoteParticipants,
+  UseRemoteParticipantOptions,
+  useRemoteParticipant,
+  UseRemoteParticipantsOptions,
+  useSpeakingParticipants,
+  useSortedParticipants,
+  useChat,
+  useIsEncrypted,
+  useIsMuted,
+  useParticipantTracks,
+  useLiveKitRoom,
+  RoomContext,
+  useRoomContext,
+  ParticipantContext,
+  useParticipantContext,
+  TrackRefContext,
+  useTrackRefContext,
+  useTracks,
+  UseTracksOptions,
+  TrackReference,
+  TrackReferenceOrPlaceholder,
+  isTrackReference,
+  useEnsureTrackRef,
+  useTrackMutedIndicator,
+  useVisualStableUpdate,
+  UseVisualStableUpdateOptions,
+} from '@livekit/components-react';
+
+export { ReceivedDataMessage } from '@livekit/components-core';

package/src/index.tsx

@@ -74,10 +74,12 @@ function shimIterator() {
   var shim = require('well-known-symbols/Symbol.iterator/shim');
   shim();
 }
-
-export * from './components/VideoView';
-export * from './useParticipant';
-export * from './useRoom';
+export * from './hooks';
+export * from './components/LiveKitRoom';
+export * from './components/VideoTrack';
+export * from './components/VideoView'; // deprecated
+export * from './useParticipant'; // deprecated
+export * from './useRoom'; // deprecated
 export * from './logger';
 export * from './audio/AudioManager';
 

package/src/useParticipant.ts

@@ -8,6 +8,7 @@ import {
 } from 'livekit-client';
 import { useEffect, useState } from 'react';
 
+/** @deprecated use `useRemoteParticipant` or `useLocalParticipant` instead */
 export interface ParticipantState {
   isSpeaking: boolean;
   connectionQuality: ConnectionQuality;
@@ -19,7 +20,7 @@ export interface ParticipantState {
   microphonePublication?: TrackPublication;
   screenSharePublication?: TrackPublication;
 }
-
+/** @deprecated use `useRemoteParticipant` or `useLocalParticipant` instead */
 export function useParticipant(participant: Participant): ParticipantState {
   const [isAudioMuted, setAudioMuted] = useState(false);
   const [, setVideoMuted] = useState(false);

package/src/useRoom.ts

@@ -23,6 +23,7 @@ export interface RoomOptions {
   sortParticipants?: (participants: Participant[]) => void;
 }
 
+/** @deprecated wrap your components in a <LiveKitRoom> component instead and use more granular hooks to track state you're interested in */
 export function useRoom(room: Room, options?: RoomOptions): RoomState {
   const [error] = useState<Error>();
   const [participants, setParticipants] = useState<Participant[]>([]);

package/android/local.properties

@@ -1,8 +0,0 @@
-## This file must *NOT* be checked into Version Control Systems,
-# as it contains information specific to your local configuration.
-#
-# Location of the SDK. This is only used by Gradle.
-# For customization when using a Version Control System, please read the
-# header note.
-#Mon Jan 23 20:31:14 JST 2023
-sdk.dir=/Users/davidliu/Library/Android/sdk

package/ios/LivekitReactNative.xcodeproj/project.xcworkspace/contents.xcworkspacedata

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<Workspace
-   version = "1.0">
-   <FileRef
-      location = "self:">
-   </FileRef>
-</Workspace>

package/ios/LivekitReactNative.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
-<plist version="1.0">
-<dict>
-	<key>IDEDidComputeMac32BitWarning</key>
-	<true/>
-</dict>
-</plist>

package/ios/LivekitReactNative.xcodeproj/xcuserdata/davidliu.xcuserdatad/xcschemes/xcschememanagement.plist

@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
-<plist version="1.0">
-<dict>
-	<key>SchemeUserState</key>
-	<dict>
-		<key>LivekitReactNative.xcscheme_^#shared#^_</key>
-		<dict>
-			<key>orderHint</key>
-			<integer>0</integer>
-		</dict>
-	</dict>
-</dict>
-</plist>