Update to livekit-client v2 (#733)

.changeset/short-lions-rule.md

@@ -0,0 +1,6 @@
+---
+"@livekit/components-core": minor
+"@livekit/components-react": major
+---
+
+Update to livekit-client v2 - read the migration guide [here](https://docs.livekit.io/guides/migrate-from-v1/)https://docs.livekit.io/guides/migrate-from-v1/

docs/storybook/.storybook/lk-decorators/LayoutContext.tsx

@@ -38,7 +38,7 @@ const ContextWrapper = ({
       if (inFocus) {
         const participant = participants[0];
         if (participant) {
-          const track = participant.getTrack(Track.Source.Camera)!;
+          const track = participant.getTrackPublication(Track.Source.Camera)!;
           dispatch({
             msg: 'set_pin',
             trackReference: { participant, source: track.source, publication: track },

docs/storybook/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@livekit/components-react": "workspace:*",
     "@livekit/components-styles": "workspace:*",
-    "livekit-client": "^1.15.1",
+    "livekit-client": "^2.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/nextjs/package.json

@@ -11,18 +11,18 @@
   "dependencies": {
     "@livekit/components-react": "workspace:*",
     "@livekit/components-styles": "workspace:*",
-    "livekit-client": "^1.15.1",
-    "livekit-server-sdk": "^1.0.3",
-    "next": "^12.2.4",
+    "livekit-client": "^2.0.0",
+    "livekit-server-sdk": "^1.2.7",
+    "next": "^12.3.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/node": "^18.6.5",
-    "@types/react": "^18.0.17",
-    "@types/react-dom": "^18.0.6",
-    "eslint-config-next": "^12.2.4",
-    "source-map-loader": "^4.0.1",
-    "typescript": "5.0.4"
+    "@types/node": "^18.19.14",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.18",
+    "eslint-config-next": "^12.3.4",
+    "source-map-loader": "^4.0.2",
+    "typescript": "^5.3.3"
   }
 }

examples/nextjs/pages/prejoin.tsx

@@ -11,12 +11,8 @@ const PreJoinExample: NextPage = () => {
         defaults={{ e2ee: true, videoDeviceId: '' }}
         onSubmit={(values) => {
           values.audioDeviceId;
-          values.e2ee;
-          values.sharedPassphrase;
         }}
         onValidate={(values) => {
-          values.e2ee;
-          values.sharedPassphrase;
           return true;
         }}
       />

package.json

@@ -33,14 +33,14 @@
     "typescript": "5.1.6"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.26.0",
+    "@changesets/cli": "^2.27.1",
     "@livekit/changesets-changelog-github": "^0.0.4",
-    "@rushstack/heft": "^0.63.0",
+    "@rushstack/heft": "^0.63.6",
     "glob": "^8.1.0",
     "husky": "^8.0.3",
-    "nodemon": "^3.0.0",
-    "prettier": "^3.0.0",
-    "turbo": "^1.9.3",
+    "nodemon": "^3.0.3",
+    "prettier": "^3.2.5",
+    "turbo": "^1.12.2",
     "typescript": "5.2.2"
   },
   "engines": {

packages/core/etc/components-core.api.md

@@ -10,6 +10,7 @@ import { ConnectionQuality } from 'livekit-client';
 import { ConnectionState } from 'livekit-client';
 import createEmailRegExp from 'email-regex';
 import { DataPacket_Kind } from 'livekit-client';
+import type { DataPublishOptions } from 'livekit-client';
 import { LocalAudioTrack } from 'livekit-client';
 import type { LocalParticipant } from 'livekit-client';
 import { LocalVideoTrack } from 'livekit-client';
@@ -143,12 +144,6 @@ export function createUrlRegExp(options: RegExOptions): RegExp;
 // @public (undocumented)
 export const cssPrefix = "lk";
 
-// @public (undocumented)
-export type DataSendOptions = {
-    kind?: DataPacket_Kind;
-    destination?: string[];
-};
-
 // @public (undocumented)
 export const DataTopic: {
     readonly CHAT: "lk-chat-topic";
@@ -388,7 +383,7 @@ export type ScreenShareTrackMap = Array<{
 export function selectGridLayout(layouts: GridLayoutDefinition[], participantCount: number, width: number, height: number): GridLayoutDefinition;
 
 // @public
-export function sendMessage(localParticipant: LocalParticipant, payload: Uint8Array, topic?: string, options?: DataSendOptions): Promise<void>;
+export function sendMessage(localParticipant: LocalParticipant, payload: Uint8Array, options?: DataPublishOptions): Promise<void>;
 
 // @public (undocumented)
 export function setDifference<T>(setA: Set<T>, setB: Set<T>): Set<T>;
@@ -442,7 +437,7 @@ export function setupDataMessageHandler<T extends string>(room: Room, topic?: T
         from: RemoteParticipant | undefined;
     }>;
     isSendingObservable: Observable<boolean>;
-    send: (payload: Uint8Array, options?: DataSendOptions) => Promise<void>;
+    send: (payload: Uint8Array, options?: DataPublishOptions) => Promise<void>;
 };
 
 // @public (undocumented)

packages/core/package.json

@@ -41,16 +41,16 @@
     "rxjs": "7.8.1"
   },
   "peerDependencies": {
-    "livekit-client": "^1.15.1",
+    "livekit-client": "^2.0.0",
     "tslib": "^2.6.2"
   },
   "devDependencies": {
     "@livekit/components-styles": "workspace:*",
     "@microsoft/api-extractor": "^7.36.0",
-    "@size-limit/file": "^11.0.0",
-    "@size-limit/webpack": "^11.0.0",
+    "@size-limit/file": "^11.0.2",
+    "@size-limit/webpack": "^11.0.2",
     "eslint-config-lk-custom": "^0.1.1",
-    "size-limit": "^10.0.0",
+    "size-limit": "^11.0.2",
     "tsup": "^8.0.0",
     "typescript": "5.2.2",
     "vitest": "^0.34.0"

packages/core/src/components/chat.ts

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
 import type { Participant, Room } from 'livekit-client';
-import { DataPacket_Kind, RoomEvent } from 'livekit-client';
+import { RoomEvent } from 'livekit-client';
 import { BehaviorSubject, Subject, scan, map, takeUntil } from 'rxjs';
 import { DataTopic, sendMessage, setupDataMessageHandler } from '../observables/dataChannel';
 
@@ -111,8 +111,9 @@ export function setupChat(room: Room, options?: ChatOptions) {
     const encodedMsg = finalMessageEncoder(chatMessage);
     isSending$.next(true);
     try {
-      await sendMessage(room.localParticipant, encodedMsg, topic, {
-        kind: DataPacket_Kind.RELIABLE,
+      await sendMessage(room.localParticipant, encodedMsg, {
+        reliable: true,
+        topic,
       });
       messageSubject.next({
         payload: encodedMsg,
@@ -131,8 +132,9 @@ export function setupChat(room: Room, options?: ChatOptions) {
     const encodedMsg = finalMessageEncoder(chatMessage);
     isSending$.next(true);
     try {
-      await sendMessage(room.localParticipant, encodedMsg, updateTopic, {
-        kind: DataPacket_Kind.RELIABLE,
+      await sendMessage(room.localParticipant, encodedMsg, {
+        topic: updateTopic,
+        reliable: true,
       });
       messageSubject.next({
         payload: encodedMsg,

packages/core/src/components/mediaDeviceSelect.ts

@@ -41,9 +41,9 @@ export function setupDeviceSelector(
       }
       let targetTrack: LocalTrack | undefined = undefined;
       if (kind === 'audioinput')
-        targetTrack = room.localParticipant.getTrack(Track.Source.Microphone)?.track;
+        targetTrack = room.localParticipant.getTrackPublication(Track.Source.Microphone)?.track;
       else if (kind === 'videoinput') {
-        targetTrack = room.localParticipant.getTrack(Track.Source.Camera)?.track;
+        targetTrack = room.localParticipant.getTrackPublication(Track.Source.Camera)?.track;
       }
       const useDefault =
         (id === 'default' && !targetTrack) ||

packages/core/src/components/mediaToggle.ts

@@ -14,10 +14,10 @@ import { prefixClass } from '../styles-interface';
 export type CaptureOptionsBySource<T extends ToggleSource> = T extends Track.Source.Camera
   ? VideoCaptureOptions
   : T extends Track.Source.Microphone
-  ? AudioCaptureOptions
-  : T extends Track.Source.ScreenShare
-  ? ScreenShareCaptureOptions
-  : never;
+    ? AudioCaptureOptions
+    : T extends Track.Source.ScreenShare
+      ? ScreenShareCaptureOptions
+      : never;
 
 export type MediaToggleType<T extends ToggleSource> = {
   pendingObserver: Observable<boolean>;

packages/core/src/components/mediaTrack.ts

@@ -28,11 +28,13 @@ export function getTrackByIdentifier(options: TrackIdentifier) {
   } else {
     const { source, name, participant } = options;
     if (source && name) {
-      return participant.getTracks().find((pub) => pub.source === source && pub.trackName === name);
+      return participant
+        .getTrackPublications()
+        .find((pub) => pub.source === source && pub.trackName === name);
     } else if (name) {
-      return participant.getTrackByName(name);
+      return participant.getTrackPublicationByName(name);
     } else if (source) {
-      return participant.getTrack(source);
+      return participant.getTrackPublication(source);
     } else {
       throw new Error('At least one of source and name needs to be defined');
     }

packages/core/src/helper/url-regex.ts

@@ -23,13 +23,13 @@
 interface RegExOptions {
   /**
 		Only match an exact string. Useful with `RegExp#test` to check if a string is a URL.
-		@default false
+		@defaultValue false
 		*/
   readonly exact?: boolean;
 
   /**
 		Force URLs to start with a valid protocol or `www`. If set to `false` it'll match the TLD against a list of valid [TLDs](https://github.com/stephenmathieson/node-tlds).
-		@default false
+		@defaultValue false
     @deprecated This option will be removed in the next major version and has already no effect.
 		*/
   readonly strict?: boolean;

packages/core/src/observables/dataChannel.ts

@@ -1,5 +1,4 @@
-import type { LocalParticipant, Participant, Room } from 'livekit-client';
-import { DataPacket_Kind } from 'livekit-client';
+import type { DataPublishOptions, LocalParticipant, Participant, Room } from 'livekit-client';
 import type { Subscriber } from 'rxjs';
 import { Observable, filter, map } from 'rxjs';
 import { createDataObserver } from './room';
@@ -9,23 +8,18 @@ export const DataTopic = {
   CHAT_UPDATE: 'lk-chat-update-topic',
 } as const;
 
-export type DataSendOptions = {
-  kind?: DataPacket_Kind;
-  destination?: string[];
-};
-
 /** Publish data from the LocalParticipant. */
 export async function sendMessage(
   localParticipant: LocalParticipant,
   payload: Uint8Array,
-  topic?: string,
-  options: DataSendOptions = {},
+  options: DataPublishOptions = {},
 ) {
-  const { kind, destination } = options;
+  const { reliable, destinationIdentities, topic } = options;
 
-  await localParticipant.publishData(payload, kind ?? DataPacket_Kind.RELIABLE, {
-    destination,
+  await localParticipant.publishData(payload, {
+    destinationIdentities,
     topic,
+    reliable,
   });
 }
 
@@ -67,10 +61,10 @@ export function setupDataMessageHandler<T extends string>(
     isSendingSubscriber = subscriber;
   });
 
-  const send = async (payload: Uint8Array, options: DataSendOptions = {}) => {
+  const send = async (payload: Uint8Array, options: DataPublishOptions = {}) => {
     isSendingSubscriber.next(true);
     try {
-      await sendMessage(room.localParticipant, payload, topics[0], options);
+      await sendMessage(room.localParticipant, payload, { topic: topics[0], ...options });
     } finally {
       isSendingSubscriber.next(false);
     }

packages/core/src/observables/participant.ts

@@ -59,8 +59,8 @@ export function observeParticipantMedia<T extends Participant>(participant: T) {
   ).pipe(
     map((p) => {
       const { isMicrophoneEnabled, isCameraEnabled, isScreenShareEnabled } = p;
-      const microphoneTrack = p.getTrack(Track.Source.Microphone);
-      const cameraTrack = p.getTrack(Track.Source.Camera);
+      const microphoneTrack = p.getTrackPublication(Track.Source.Microphone);
+      const cameraTrack = p.getTrackPublication(Track.Source.Camera);
       const participantMedia: ParticipantMedia<T> = {
         isCameraEnabled,
         isMicrophoneEnabled,
@@ -153,12 +153,12 @@ export function mutedObserver(trackRef: TrackReferenceOrPlaceholder) {
     ParticipantEvent.LocalTrackUnpublished,
   ).pipe(
     map((participant) => {
-      const pub = trackRef.publication ?? participant.getTrack(trackRef.source);
+      const pub = trackRef.publication ?? participant.getTrackPublication(trackRef.source);
       return pub?.isMuted ?? true;
     }),
     startWith(
       trackRef.publication?.isMuted ??
-        trackRef.participant.getTrack(trackRef.source)?.isMuted ??
+        trackRef.participant.getTrackPublication(trackRef.source)?.isMuted ??
         true,
     ),
   );
@@ -183,7 +183,7 @@ export function connectedParticipantsObserver(
   const observable = new Observable<RemoteParticipant[]>((sub) => {
     subscriber = sub;
     return () => listener.unsubscribe();
-  }).pipe(startWith(Array.from(room.participants.values())));
+  }).pipe(startWith(Array.from(room.remoteParticipants.values())));
 
   const additionalRoomEvents = options.additionalRoomEvents ?? allParticipantRoomEvents;
 
@@ -196,11 +196,11 @@ export function connectedParticipantsObserver(
     ]),
   );
 
-  const listener = observeRoomEvents(room, ...roomEvents).subscribe(
-    (r) => subscriber?.next(Array.from(r.participants.values())),
+  const listener = observeRoomEvents(room, ...roomEvents).subscribe((r) =>
+    subscriber?.next(Array.from(r.remoteParticipants.values())),
   );
-  if (room.participants.size > 0) {
-    subscriber?.next(Array.from(room.participants.values()));
+  if (room.remoteParticipants.size > 0) {
+    subscriber?.next(Array.from(room.remoteParticipants.values()));
   }
   return observable;
 }

packages/core/src/observables/room.ts

@@ -93,7 +93,7 @@ export function screenShareObserver(room: Room) {
     let trackMap = screenShareTracks.find((tr) => tr.participant.identity === participant.identity);
     const getScreenShareTracks = (participant: Participant) => {
       return participant
-        .getTracks()
+        .getTrackPublications()
         .filter(
           (track) =>
             (track.source === Track.Source.ScreenShare ||
@@ -147,8 +147,8 @@ export function screenShareObserver(room: Room) {
   );
   setTimeout(() => {
     // TODO find way to avoid this timeout
-    for (const p of room.participants.values()) {
-      p.getTracks().forEach((track) => {
+    for (const p of room.remoteParticipants.values()) {
+      p.getTrackPublications().forEach((track) => {
         handleSub(track, p);
       });
     }

packages/core/src/observables/track.ts

@@ -57,13 +57,13 @@ function getTrackReferences(
   onlySubscribedTracks = true,
 ): { trackReferences: TrackReference[]; participants: Participant[] } {
   const localParticipant = room.localParticipant;
-  const allParticipants = [localParticipant, ...Array.from(room.participants.values())];
+  const allParticipants = [localParticipant, ...Array.from(room.remoteParticipants.values())];
   const trackReferences: TrackReference[] = [];
 
   allParticipants.forEach((participant) => {
     sources.forEach((source) => {
       const sourceReferences = Array.from<RemoteTrackPublication | LocalTrackPublication>(
-        participant.tracks.values(),
+        participant.trackPublications.values(),
       )
         .filter(
           (track) =>

packages/core/src/sorting/sort-participants.ts

@@ -34,8 +34,8 @@ export function sortParticipants(participants: Participant[]): Participant[] {
     }
 
     // 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;

packages/core/src/track-reference/test-utils.test.ts

@@ -1,6 +1,6 @@
 import { describe, test, expect, expectTypeOf } from 'vitest';
 import { mockTrackReferencePlaceholder, mockTrackReferenceSubscribed } from './test-utils';
-import { Participant, TrackPublication } from 'livekit-client';
+import type { Participant, TrackPublication } from 'livekit-client';
 import { Track } from 'livekit-client';
 import { getTrackReferenceId } from './track-reference.utils';