fix(room join): room join waiting queue improvement (#5072)

* Rebase

* Waiting queue improvement

* Change mp3

* Reduce step time

* Remove audio from assets path config

* Fix typos

* Improve comments

* Put delay on toast and sound

* Add mp3 loader to esbuild prod configs

* Serve mp3 from public assets

* Add relative url

app/javascript/components/rooms/room/join/RoomJoin.jsx

@@ -100,15 +100,43 @@ export default function RoomJoin() {
     }
   }, [roomStatusAPI.isSuccess]);
 
+  // Play a sound and displays a toast when the meeting starts if the user was in a waiting queue
+  const notifyMeetingStarted = () => {
+    const audio = new Audio(`${process.env.RELATIVE_URL_ROOT}/audios/notify.mp3`);
+    audio.play()
+      .catch((err) => {
+        console.error(err);
+      });
+    toast.success(t('toast.success.room.meeting_started'));
+  };
+
+  // Returns a random delay between 2 and 5 seconds, in increments of 250 ms
+  // The delay is to let the BBB server settle before attempting to join the meeting
+  // The randomness is to prevent multiple users from joining the meeting at the same time
+  const joinDelay = () => {
+    const min = 4000;
+    const max = 7000;
+    const step = 250;
+
+    // Calculate the number of possible steps within the given range
+    const numSteps = (max - min) / step;
+
+    // Generate a random integer from 0 to numSteps (inclusive)
+    const randomStep = Math.floor(Math.random() * (numSteps + 1));
+
+    // Calculate and return the random delay
+    return min + (randomStep * step);
+  };
+
   useEffect(() => {
     // Meeting started:
     //  When meeting starts this logic will be fired, indicating the event to waiting users (through a toast) for UX matter.
     //  Logging the event for debugging purposes and refetching the join logic with the user's given input (name & codes).
-    //  With a delay of 7s to give reasonable time for the meeting to fully start on the BBB server.
     if (hasStarted) {
-      toast.success(t('toast.success.room.meeting_started'));
-      console.info(`Attempting to join the room(friendly_id): ${friendlyId} meeting in 7s.`);
-      setTimeout(methods.handleSubmit(handleJoin), 7000); // TODO: Amir - Improve this race condition handling by the backend.
+      console.info(`Attempting to join the room(friendly_id): ${friendlyId} meeting.`);
+      const delay = joinDelay();
+      setTimeout(notifyMeetingStarted, delay - 1000);
+      setTimeout(methods.handleSubmit(handleJoin), delay); // TODO: Amir - Improve this race condition handling by the backend.
       reset();// Resetting the Join component.
     }
   }, [hasStarted]);