Improve track acquiring and handling in usePreviewTracks

.changeset/curvy-pens-judge.md

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

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/react/src/prefabs/PreJoin.tsx

@@ -21,6 +21,7 @@ import { ParticipantPlaceholder } from '../assets/images';
 import { useMediaDevices, usePersistentUserChoices } from '../hooks';
 import { useWarnAboutMissingStyles } from '../hooks/useWarnAboutMissingStyles';
 import { defaultUserChoices } from '@livekit/components-core';
+import { Mutex } from '../utils';
 
 /**
  * Props for the PreJoin component.
@@ -58,29 +59,33 @@ export function usePreviewTracks(
 ) {
   const [tracks, setTracks] = React.useState<LocalTrack[]>();
 
+  const trackLock = 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)]);
 

packages/react/src/utils.ts

@@ -71,3 +71,38 @@ export function useForwardedRef<T extends HTMLElement>(ref: React.ForwardedRef<T
 
   return innerRef;
 }
+
+export class Mutex {
+  private _locking: Promise<void>;
+
+  private _locks: number;
+
+  constructor() {
+    this._locking = Promise.resolve();
+    this._locks = 0;
+  }
+
+  isLocked() {
+    return this._locks > 0;
+  }
+
+  lock() {
+    this._locks += 1;
+
+    let unlockNext: () => void;
+
+    const willLock = new Promise<void>(
+      (resolve) =>
+        (unlockNext = () => {
+          this._locks -= 1;
+          resolve();
+        }),
+    );
+
+    const willUnlock = this._locking.then(() => unlockNext);
+
+    this._locking = this._locking.then(() => willLock);
+
+    return willUnlock;
+  }
+}