feat: Add react hooks and room components

.github/workflows/native_build.yaml

@@ -1,104 +1,104 @@
 name: Test
 on:
  push:
- branches: [ main ]
+ branches: [main]
  paths-ignore:
  - '**.md'
  pull_request:
- branches: [ main ]
+ branches: [main]
  paths-ignore:
  - '**.md'
 
 jobs:
  android-compile:
  runs-on: ubuntu-latest
  steps:
- - uses: actions/checkout@v2
+  - uses: actions/checkout@v4
 
- - uses: actions/setup-node@v3
- with:
- node-version: '16.x'
- cache: 'yarn'
- cache-dependency-path: '**/yarn.lock'
+  - uses: actions/setup-node@v4
+  with:
+  node-version: '18.x'
+  cache: 'yarn'
+  cache-dependency-path: '**/yarn.lock'
 
- - uses: actions/cache@v2
- with:
- path: |
- ~/.npm
- ~/node_modules
- ~/ci/node_modules
- ~/.config/yarn/global
- key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
- restore-keys: |
- ${{ runner.os }}-node-
+  - uses: actions/cache@v2
+  with:
+  path: |
+  ~/.npm
+  ~/node_modules
+  ~/ci/node_modules
+  ~/.config/yarn/global
+  key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
+  restore-keys: |
+  ${{ runner.os }}-node-
 
- - name: Install Yarn
- run: |
- npm install -g yarn
+  - name: Install Yarn
+  run: |
+  npm install -g yarn
 
- - name: Yarn
- run: |
- yarn install
- cd ci
- yarn
+  - name: Yarn
+  run: |
+  yarn install
+  cd ci
+  yarn
 
- - name: Compile Android (Debug)
- working-directory: ./ci/android/
- run: ./gradlew assembleDebug
+  - name: Compile Android (Debug)
+  working-directory: ./ci/android/
+  run: ./gradlew assembleDebug
 
  ios-compile:
  runs-on: macos-latest
  steps:
- - uses: actions/checkout@v2
+  - uses: actions/checkout@v4
 
- - uses: actions/setup-node@v3
- with:
- node-version: '16.x'
- cache: 'yarn'
- cache-dependency-path: '**/yarn.lock'
+  - uses: actions/setup-node@v4
+  with:
+  node-version: '18.x'
+  cache: 'yarn'
+  cache-dependency-path: '**/yarn.lock'
 
- - uses: actions/cache@v2
- with:
- path: |
- ~/.npm
- ~/node_modules
- ~/ci/node_modules
- ~/.config/yarn/global
- key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
- restore-keys: |
- ${{ runner.os }}-node-
+  - uses: actions/cache@v2
+  with:
+  path: |
+  ~/.npm
+  ~/node_modules
+  ~/ci/node_modules
+  ~/.config/yarn/global
+  key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
+  restore-keys: |
+  ${{ runner.os }}-node-
 
- - name: Cache cocoapods
- uses: actions/cache@v2
- with:
- path: ./ci/ios/Pods
- key: ${{ runner.os }}-pods-${{ hashFiles('**/Podfile.lock') }}
- restore-keys: |
- ${{ runner.os }}-pods-
+  - name: Cache cocoapods
+  uses: actions/cache@v2
+  with:
+  path: ./ci/ios/Pods
+  key: ${{ runner.os }}-pods-${{ hashFiles('**/Podfile.lock') }}
+  restore-keys: |
+  ${{ runner.os }}-pods-
 
- - name: Install Yarn
- run: |
- npm install -g yarn
- yarn
+  - name: Install Yarn
+  run: |
+  npm install -g yarn
+  yarn
 
- - name: Yarn
- run: |
- yarn install
- cd ci/
- yarn
- cd ios/
- pod install
+  - name: Yarn
+  run: |
+  yarn install
+  cd ci/
+  yarn
+  cd ios/
+  pod install
 
- - name: Compile iOS
- working-directory: ./ci/ios/
- run: |
- set -o pipefail && \
- xcodebuild -workspace ci.xcworkspace/ \
- -scheme ci \
- -destination generic/platform=iOS \
- -configuration Debug \
- CODE_SIGN_IDENTITY="" \
- CODE_SIGNING_REQUIRED=NO \
- CODE_SIGN_ENTITLEMENTS="" \
- CODE_SIGNING_ALLOWED="NO" \
- clean build | xcpretty
+  - name: Compile iOS
+  working-directory: ./ci/ios/
+  run: |
+  set -o pipefail && \
+  xcodebuild -workspace ci.xcworkspace/ \
+  -scheme ci \
+  -destination generic/platform=iOS \
+  -configuration Debug \
+  CODE_SIGN_IDENTITY="" \
+  CODE_SIGNING_REQUIRED=NO \
+  CODE_SIGN_ENTITLEMENTS="" \
+  CODE_SIGNING_ALLOWED="NO" \
+  clean build | xcpretty

.github/workflows/test.yaml

@@ -1,46 +1,46 @@
 name: Test
 on:
  push:
- branches: [ main ]
+ branches: [main]
  paths-ignore:
  - '**.md'
  pull_request:
- branches: [ main ]
+ branches: [main]
  paths-ignore:
  - '**.md'
 
 jobs:
  test:
  runs-on: ubuntu-latest
  steps:
- - uses: actions/checkout@v2
+  - uses: actions/checkout@v4
 
- - uses: actions/setup-node@v2
- with:
- node-version: '16.x'
+  - uses: actions/setup-node@v4
+  with:
+  node-version: '18.x'
 
- - uses: actions/cache@v2
- with:
- path: |
- ~/.npm
- ~/.config/yarn/global
- key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
- restore-keys: |
- ${{ runner.os }}-node-
+  - uses: actions/cache@v2
+  with:
+  path: |
+  ~/.npm
+  ~/.config/yarn/global
+  key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
+  restore-keys: |
+  ${{ runner.os }}-node-
 
- - name: Install Yarn
- run: |
- npm install -g yarn
- yarn
+  - name: Install Yarn
+  run: |
+  npm install -g yarn
+  yarn
 
- - name: Typescript
- run: yarn typescript
+  - name: Typescript
+  run: yarn typescript
 
- - name: ESLint
- run: yarn lint
+  - name: ESLint
+  run: yarn lint
 
- - name: Run Tests
- run: yarn test
+  - name: Run Tests
+  run: yarn test
 
- - name: Validate docs
- run: yarn build-docs --treatWarningsAsErrors
+  - name: Validate docs
+  run: yarn build-docs --treatWarningsAsErrors

package.json

@@ -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",

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:https://<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>
+ )}
+ </>
+ );
+}