@livekit/react-native 0.2.2

package/lib/typescript/audio/AudioSession.d.ts

@@ -0,0 +1,88 @@
+/**
+ * Configuration for the underlying AudioSession.
+ *
+ * ----
+ * Android specific options:
+ *
+ * * preferredOutputList - The preferred order in which to automatically select an audio output.
+ *   This is ignored when an output is manually selected with {@link AudioSession.selectAudioOutput}.
+ *
+ *   By default, the order is set to:
+ *   1. `"speaker"`
+ *   2. `"earpiece"`
+ *   3. `"headset"`
+ *   4. `"bluetooth"`
+ *
+ * ----
+ * iOS
+ *
+ * * defaultOutput - The default preferred output to use when a wired headset or bluetooth output is unavailable.
+ *
+ *   By default, this is set to `"speaker"`
+ */
+export declare type AudioConfiguration = {
+    android: {
+        preferredOutputList: ('speaker' | 'earpiece' | 'headset' | 'bluetooth')[];
+    };
+    ios: {
+        defaultOutput: 'speaker' | 'earpiece';
+    };
+};
+export default class AudioSession {
+    /**
+     * Applies the provided audio configuration to the underlying AudioSession.
+     *
+     * Must be called prior to connecting to a Room for the configuration to apply correctly.
+     */
+    static configureAudio: (config: AudioConfiguration) => Promise<void>;
+    /**
+     * Starts an AudioSession.
+     */
+    static startAudioSession: () => Promise<void>;
+    /**
+     * Stops the existing AudioSession.
+     */
+    static stopAudioSession: () => Promise<void>;
+    /**
+     * Gets the available audio outputs for use with {@link selectAudioOutput}.
+     *
+     * {@link startAudioSession} must be called prior to using this method.
+     *
+     * For Android, will return if available:
+     * * "speaker"
+     * * "earpiece"
+     * * "headset"
+     * * "bluetooth"
+     *
+     * Note: For applications targeting SDK versions over 30, the runtime BLUETOOTH_CONNECT
+     * permission must be requested to send audio to bluetooth headsets.
+     *
+     * ----
+     *
+     * For iOS, due to OS limitations, the only available types are:
+     * * "default" - Use default iOS audio routing
+     * * "force_speaker" - Force audio output through speaker
+     *
+     * See also {@link showAudioRoutePicker} to display a route picker that
+     * can choose between other audio devices (i.e. headset/bluetooth/airplay),
+     * or use a library like `react-native-avroutepicker` for a native platform
+     * control.
+     *
+     * @returns the available audio output types
+     */
+    static getAudioOutputs: () => Promise<string[]>;
+    /**
+     * Select the provided audio output if available.
+     *
+     * {@link startAudioSession} must be called prior to using this method.
+     *
+     * @param deviceId A deviceId retrieved from {@link getAudioOutputs}
+     */
+    static selectAudioOutput: (deviceId: string) => Promise<void>;
+    /**
+     * iOS only, requires iOS 11+.
+     *
+     * Displays an AVRoutePickerView for the user to choose their audio output.
+     */
+    static showAudioRoutePicker: () => Promise<void>;
+}

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

@@ -0,0 +1,10 @@
+import { ViewStyle } from 'react-native';
+import { VideoTrack } from 'livekit-client';
+export declare type Props = {
+    videoTrack?: VideoTrack | undefined;
+    style?: ViewStyle;
+    objectFit?: 'cover' | 'contain' | undefined;
+    mirror?: boolean;
+    zOrder?: number;
+};
+export declare const VideoView: ({ style, videoTrack, objectFit, zOrder, mirror, }: Props) => JSX.Element;

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

@@ -0,0 +1,26 @@
+import { Component } from 'react';
+import { ViewStyle } from 'react-native';
+export declare 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;
+    private interval;
+    private view;
+    constructor(props: Props);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    UNSAFE_componentWillReceiveProps(nextProps: Props): void;
+    private startWatching;
+    private stopWatching;
+    private checkInViewPort;
+    render(): JSX.Element;
+}

package/lib/typescript/index.d.ts

@@ -0,0 +1,12 @@
+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 declare function registerGlobals(): void;
+export * from './components/VideoView';
+export * from './useParticipant';
+export * from './useRoom';
+export { AudioSession, AudioConfiguration };

package/lib/typescript/useParticipant.d.ts

@@ -0,0 +1,13 @@
+import { ConnectionQuality, Participant, TrackPublication } from 'livekit-client';
+export interface ParticipantState {
+    isSpeaking: boolean;
+    connectionQuality: ConnectionQuality;
+    isLocal: boolean;
+    metadata?: string;
+    publications: TrackPublication[];
+    subscribedTracks: TrackPublication[];
+    cameraPublication?: TrackPublication;
+    microphonePublication?: TrackPublication;
+    screenSharePublication?: TrackPublication;
+}
+export declare function useParticipant(participant: Participant): ParticipantState;

package/lib/typescript/useRoom.d.ts

@@ -0,0 +1,20 @@
+import { AudioTrack, LocalParticipant, Participant, Room } from 'livekit-client';
+export interface RoomState {
+    room?: Room;
+    participants: Participant[];
+    audioTracks: AudioTrack[];
+    error?: Error;
+}
+export interface RoomOptions {
+    sortParticipants?: (participants: Participant[]) => void;
+}
+export declare function useRoom(room: Room, options?: RoomOptions): RoomState;
+/**
+ * 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 declare function sortParticipants(participants: Participant[], localParticipant?: LocalParticipant): void;

package/livekit-react-native.podspec

@@ -0,0 +1,22 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "livekit-react-native"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => "10.0" }
+  s.source       = { :git => "https://github.com/livekit/client-sdk-react-native.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm}"
+
+  s.framework    = 'AVFAudio'
+
+  s.dependency "React-Core"
+  s.dependency "react-native-webrtc"
+end

package/package.json

@@ -0,0 +1,157 @@
+{
+  "name": "@livekit/react-native",
+  "version": "0.2.2",
+  "description": "LiveKit for React Native",
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "livekit-react-native.podspec",
+    "!lib/typescript/example",
+    "!android/build",
+    "!android/.gradle",
+    "!android/.idea",
+    "!ios/build",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__"
+  ],
+  "repository": "https://github.com/livekit/client-sdk-react-native",
+  "author": "LiveKit <dl@livekit.io> (https://livekit.io/)",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/livekit/client-sdk-react-native/issues"
+  },
+  "homepage": "https://github.com/livekit/client-sdk-react-native#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "dependencies": {
+    "livekit-client": "^1.6.0",
+    "promise.allsettled": "^1.0.5",
+    "react-native-url-polyfill": "^1.3.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.10",
+    "@babel/preset-env": "^7.1.6",
+    "@babel/runtime": "^7.12.5",
+    "@commitlint/config-conventional": "^16.2.1",
+    "@react-native-community/eslint-config": "^3.1.0",
+    "@release-it/conventional-changelog": "^4.2.0",
+    "@types/jest": "^26.0.0",
+    "@types/react": "^17.0.0",
+    "@types/react-native": "0.66.16",
+    "@types/react-native-webrtc": "^1.75.5",
+    "commitlint": "^16.2.1",
+    "eslint": "^8.23.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "husky": "^7.0.4",
+    "jest": "^27.5.1",
+    "pod-install": "^0.1.0",
+    "prettier": "^2.5.1",
+    "react": "18.0.0",
+    "react-native": "0.69.5",
+    "react-native-builder-bob": "^0.18.2",
+    "release-it": "^14.2.2",
+    "typedoc": "^0.23.14",
+    "typescript": "^4.8.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-webrtc": "^106.0.0"
+  },
+  "scripts": {
+    "test": "jest",
+    "build-docs": "typedoc",
+    "typescript": "tsc --noEmit",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "prepare": "bob build",
+    "release": "release-it",
+    "example": "yarn --cwd example",
+    "pods": "cd example && pod-install --quiet",
+    "bootstrap": "yarn example && yarn && yarn pods"
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": "angular"
+      }
+    }
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@react-native-community",
+      "prettier"
+    ],
+    "rules": {
+      "prettier/prettier": [
+        "error",
+        {
+          "quoteProps": "consistent",
+          "singleQuote": true,
+          "tabWidth": 2,
+          "trailingComma": "es5",
+          "useTabs": false
+        }
+      ]
+    }
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  }
+}

package/src/audio/AudioSession.ts

@@ -0,0 +1,132 @@
+import { NativeModules, Platform } from 'react-native';
+const LINKING_ERROR =
+  `The package 'livekit-react-native' doesn't seem to be linked. Make sure: \n\n` +
+  Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
+  '- You rebuilt the app after installing the package\n' +
+  '- You are not using Expo managed workflow\n';
+
+const LivekitReactNative = NativeModules.LivekitReactNative
+  ? NativeModules.LivekitReactNative
+  : new Proxy(
+      {},
+      {
+        get() {
+          throw new Error(LINKING_ERROR);
+        },
+      }
+    );
+
+/**
+ * Configuration for the underlying AudioSession.
+ *
+ * ----
+ * Android specific options:
+ *
+ * * preferredOutputList - The preferred order in which to automatically select an audio output.
+ *   This is ignored when an output is manually selected with {@link AudioSession.selectAudioOutput}.
+ *
+ *   By default, the order is set to:
+ *   1. `"speaker"`
+ *   2. `"earpiece"`
+ *   3. `"headset"`
+ *   4. `"bluetooth"`
+ *
+ * ----
+ * iOS
+ *
+ * * defaultOutput - The default preferred output to use when a wired headset or bluetooth output is unavailable.
+ *
+ *   By default, this is set to `"speaker"`
+ */
+export type AudioConfiguration = {
+  android: {
+    preferredOutputList: ('speaker' | 'earpiece' | 'headset' | 'bluetooth')[];
+  };
+  ios: {
+    defaultOutput: 'speaker' | 'earpiece';
+  };
+};
+
+export default class AudioSession {
+  /**
+   * Applies the provided audio configuration to the underlying AudioSession.
+   *
+   * Must be called prior to connecting to a Room for the configuration to apply correctly.
+   */
+  static configureAudio = async (config: AudioConfiguration) => {
+    await LivekitReactNative.configureAudio(config);
+  };
+
+  /**
+   * Starts an AudioSession.
+   */
+  static startAudioSession = async () => {
+    await LivekitReactNative.startAudioSession();
+  };
+
+  /**
+   * Stops the existing AudioSession.
+   */
+  static stopAudioSession = async () => {
+    await LivekitReactNative.stopAudioSession();
+  };
+
+  /**
+   * Gets the available audio outputs for use with {@link selectAudioOutput}.
+   *
+   * {@link startAudioSession} must be called prior to using this method.
+   *
+   * For Android, will return if available:
+   * * "speaker"
+   * * "earpiece"
+   * * "headset"
+   * * "bluetooth"
+   *
+   * Note: For applications targeting SDK versions over 30, the runtime BLUETOOTH_CONNECT
+   * permission must be requested to send audio to bluetooth headsets.
+   *
+   * ----
+   *
+   * For iOS, due to OS limitations, the only available types are:
+   * * "default" - Use default iOS audio routing
+   * * "force_speaker" - Force audio output through speaker
+   *
+   * See also {@link showAudioRoutePicker} to display a route picker that
+   * can choose between other audio devices (i.e. headset/bluetooth/airplay),
+   * or use a library like `react-native-avroutepicker` for a native platform
+   * control.
+   *
+   * @returns the available audio output types
+   */
+  static getAudioOutputs = async (): Promise<string[]> => {
+    if (Platform.OS === 'ios') {
+      return ['default', 'force_speaker'];
+    } else if (Platform.OS === 'android') {
+      return (await LivekitReactNative.getAudioOutputs()) as string[];
+    } else {
+      return [];
+    }
+  };
+
+  /**
+   * Select the provided audio output if available.
+   *
+   * {@link startAudioSession} must be called prior to using this method.
+   *
+   * @param deviceId A deviceId retrieved from {@link getAudioOutputs}
+   */
+  static selectAudioOutput = async (deviceId: string) => {
+    await LivekitReactNative.selectAudioOutput(deviceId);
+  };
+
+  /**
+   * iOS only, requires iOS 11+.
+   *
+   * Displays an AVRoutePickerView for the user to choose their audio output.
+   */
+  static showAudioRoutePicker = async () => {
+    if (Platform.OS === 'ios') {
+      await LivekitReactNative.showAudioRoutePicker();
+    }
+  };
+}

package/src/components/VideoView.tsx

@@ -0,0 +1,143 @@
+import * as React from 'react';
+
+import {
+  LayoutChangeEvent,
+  PixelRatio,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native';
+import {
+  ElementInfo,
+  LocalVideoTrack,
+  Track,
+  TrackEvent,
+  VideoTrack,
+} from 'livekit-client';
+import { RTCView } from 'react-native-webrtc';
+import { useEffect, useState } from 'react';
+import { RemoteVideoTrack } from 'livekit-client';
+import ViewPortDetector from './ViewPortDetector';
+
+export type Props = {
+  videoTrack?: VideoTrack | undefined;
+  style?: ViewStyle;
+  objectFit?: 'cover' | 'contain' | undefined;
+  mirror?: boolean;
+  zOrder?: number;
+};
+
+export const VideoView = ({
+  style = {},
+  videoTrack,
+  objectFit = 'cover',
+  zOrder,
+  mirror,
+}: Props) => {
+  const [elementInfo] = useState(() => {
+    let info = new VideoViewElementInfo();
+    info.id = videoTrack?.sid;
+    info.something = videoTrack;
+    return info;
+  });
+
+  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={(event) => {
+        elementInfo.onLayout(event);
+      }}
+    >
+      <ViewPortDetector
+        onChange={(isVisible: boolean) => elementInfo.onVisibility(isVisible)}
+        style={styles.videoView}
+      >
+        <RTCView
+          style={styles.videoView}
+          streamURL={mediaStream?.toURL() ?? ''}
+          objectFit={objectFit}
+          zOrder={zOrder}
+          mirror={mirror}
+        />
+      </ViewPortDetector>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {},
+  videoView: {
+    flex: 1,
+    width: '100%',
+  },
+});
+
+class VideoViewElementInfo implements ElementInfo {
+  element: object = {};
+  something?: any;
+  id?: string;
+  _width = 0;
+  _height = 0;
+  _observing = false;
+  visible: boolean = true;
+  visibilityChangedAt: number | undefined;
+  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;
+    const pixelRatio = PixelRatio.get();
+    this._width = width * pixelRatio;
+    this._height = height * pixelRatio;
+
+    if (this._observing) {
+      this.handleResize?.();
+    }
+  }
+  onVisibility(isVisible: boolean) {
+    if (this.visible !== isVisible) {
+      this.visible = isVisible;
+      this.visibilityChangedAt = Date.now();
+      if (this._observing) {
+        this.handleVisibilityChanged?.();
+      }
+    }
+  }
+}