Improve track acquiring and handling in usePreviewTracks (#830)

.changeset/curvy-pens-judge.md

@@ -0,0 +1,5 @@
+---
+"@livekit/components-react": patch
+---
+
+Improve track acquiring and handling in usePreviewTracks

.changeset/many-geese-jump.md

@@ -0,0 +1,6 @@
+---
+"@livekit/components-core": minor
+"@livekit/components-react": minor
+---
+
+Require livekit-client ^2.1.0 peer dependency

docs/storybook/package.json

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

examples/nextjs/package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@livekit/components-react": "workspace:*",
     "@livekit/components-styles": "workspace:*",
-    "livekit-client": "^2.0.10",
+    "livekit-client": "^2.1.0",
     "livekit-server-sdk": "^1.2.7",
     "next": "^12.3.4",
     "react": "^18.2.0",

examples/nextjs/pages/prejoin.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { PreJoin, setLogLevel } from '@livekit/components-react';
 import type { NextPage } from 'next';

packages/core/package.json

@@ -41,7 +41,7 @@
     "rxjs": "7.8.1"
   },
   "peerDependencies": {
-    "livekit-client": "^2.0.10",
+    "livekit-client": "^2.1.0",
     "@livekit/protocol": "^1.12.0",
     "tslib": "^2.6.2"
   },

packages/react/package.json

@@ -53,7 +53,7 @@
     "usehooks-ts": "2.16.0"
   },
   "peerDependencies": {
-    "livekit-client": "^2.0.10",
+    "livekit-client": "^2.1.0",
     "@livekit/protocol": "^1.12.0",
     "react": ">=18",
     "react-dom": ">=18",

packages/react/src/prefabs/PreJoin.tsx

@@ -11,6 +11,7 @@ import {
   facingModeFromLocalTrack,
   Track,
   VideoPresets,
+  Mutex,
 } from 'livekit-client';
 import * as React from 'react';
 import { MediaDeviceMenu } from './MediaDeviceMenu';
@@ -58,29 +59,33 @@ export function usePreviewTracks(
 ) {
   const [tracks, setTracks] = React.useState<LocalTrack[]>();
 
+  const trackLock = React.useMemo(() => new Mutex(), []);
+
   React.useEffect(() => {
-    let trackPromise: Promise<LocalTrack[]> | undefined = undefined;
     let needsCleanup = false;
-    if (options.audio || options.video) {
-      trackPromise = createLocalTracks(options);
-      trackPromise
-        .then((tracks) => {
-          if (needsCleanup) {
-            tracks.forEach((tr) => tr.stop());
-          } else {
-            setTracks(tracks);
-          }
-        })
-        .catch(onError);
-    }
+    trackLock.lock().then((unlock) => {
+      tracks?.forEach((track) => {
+        track.stop();
+      });
+      if (options.audio || options.video) {
+        createLocalTracks(options)
+          .then((tracks) => {
+            if (needsCleanup) {
+              tracks.forEach((tr) => tr.stop());
+            } else {
+              setTracks(tracks);
+            }
+          })
+          .catch((e) => (onError ? onError(e) : log.error(e)))
+          .finally(unlock);
+      }
+    });
 
     return () => {
       needsCleanup = true;
-      trackPromise?.then((tracks) =>
-        tracks.forEach((track) => {
-          track.stop();
-        }),
-      );
+      tracks?.forEach((track) => {
+        track.stop();
+      });
     };
   }, [JSON.stringify(options)]);