fix(react-client): await pending addTrack to fix track ops race

Author: Critteros

packages/react-client/src/hooks/internal/useTrackManager.ts

@@ -26,6 +26,7 @@ export const useTrackManager = ({
   logger,
 }: TrackManagerConfig): TrackManager => {
   const currentTrackIdRef = useRef<string | null>(null);
+  const connectionPromiseRef = useRef<Promise<string> | null>(null);
 
   const {
     startDevice,
@@ -38,7 +39,10 @@ export const useTrackManager = ({
     selectDevice: _selectDevice,
   } = deviceManager;
 
-  const getCurrentTrackId = useCallback(() => {
+  const getCurrentTrackId = useCallback(async () => {
+    if (connectionPromiseRef.current) {
+      await connectionPromiseRef.current;
+    }
     const refTrackId = currentTrackIdRef.current;
     if (!refTrackId) return null;
     const currentTrack = getRemoteOrLocalTrack(tsClient, refTrackId);
@@ -53,7 +57,7 @@ export const useTrackManager = ({
       const [newTrack, error] = result;
       if (error) return error;
 
-      const currentTrackId = getCurrentTrackId();
+      const currentTrackId = await getCurrentTrackId();
       if (!currentTrackId) return;
 
       await tsClient.replaceTrack(currentTrackId, newTrack);
@@ -65,7 +69,7 @@ export const useTrackManager = ({
     async (middleware: TrackMiddleware) => {
       const processedTrack = await applyMiddleware(middleware);
 
-      const currentTrackId = getCurrentTrackId();
+      const currentTrackId = await getCurrentTrackId();
       if (!currentTrackId) return;
 
       await tsClient.replaceTrack(currentTrackId, processedTrack);
@@ -91,8 +95,9 @@ export const useTrackManager = ({
       const [maxBandwidth, simulcastConfig] = getConfigAndBandwidthFromProps(props.sentQualities, bandwidthLimits);
 
       try {
-        const remoteTrackId = await tsClient.addTrack(track, trackMetadata, simulcastConfig, maxBandwidth);
-
+        const addTrackJob = tsClient.addTrack(track, trackMetadata, simulcastConfig, maxBandwidth);
+        connectionPromiseRef.current = addTrackJob;
+        const remoteTrackId = await addTrackJob;
         currentTrackIdRef.current = remoteTrackId;
       } catch (err) {
         if (err instanceof TrackTypeError) {
@@ -127,7 +132,7 @@ export const useTrackManager = ({
    * @see {@link TrackManager#toggleMute} for more details.
    */
   const toggleMute = useCallback(async () => {
-    const currentTrackId = getCurrentTrackId();
+    const currentTrackId = await getCurrentTrackId();
     const isTrackCurrentlyEnabled = Boolean(deviceTrack?.enabled);
     if (!currentTrackId) {
       logger.warn("Toggling mute is only possible while connected to a room.");
@@ -147,11 +152,11 @@ export const useTrackManager = ({
    * @see {@link TrackManager#toggleDevice} for more details.
    */
   const toggleDevice = useCallback(async () => {
-    const currentTrackId = getCurrentTrackId();
+    const currentTrackId = await getCurrentTrackId();
     if (deviceTrack) {
       stopDevice();
       if (currentTrackId) {
-        pauseStreaming(currentTrackId);
+        await pauseStreaming(currentTrackId);
       }
     } else {
       const [newTrack, error] = await startDevice();