frontend/app/components/Joining.js

"use client";

import { useDaily } from "@daily-co/daily-react";
import { useEffect } from "react";

export default function Join({ roomUrl, onJoin }) {
  const daily = useDaily();

  useEffect(() => {
    daily.join({ url: roomUrl, startAudioOff: true, audioSource: false });

    onJoin();
  });

  return (
    <div className="bg-white shadow sm:rounded-lg max-w-xl mx-auto">
      <div className="px-4 py-5 sm:p-6">
        <h3 className="text-base font-semibold leading-6 text-gray-900">
          Joining...
        </h3>
      </div>
    </div>
  );
}