frontend/app/components/Call.js

"use client";

import Link from "next/link";
import { useCallback, useEffect, useState } from "react";
import Card from "../components/Card";
import { VideoCameraIcon, PaintBrushIcon } from "@heroicons/react/24/outline";
import Avatar from "../components/Avatar";
import CreateRoom from "../components/CreateRoom";
import { apiUrl } from "../utils";
import Join from "../components/Joining";
import { DailyVideo, useLocalSessionId } from "@daily-co/daily-react";

const STATE_IDLE = "idle";
const STATE_JOINING = "joining";
const STATE_JOINED = "joined";
const STATE_LEFT = "left";
const BOT_STATE_STARTING = "bot_starting";
const BOT_STATE_STARTED = "bot_started";

export default function Call() {
  const [callState, setCallState] = useState(STATE_IDLE);
  const [roomUrl, setRoomUrl] = useState();
  const [botState, setBotState] = useState(BOT_STATE_STARTING);
  const localSessionId = useLocalSessionId();

  const start = useCallback(async () => {
    const resp = await fetch(`${apiUrl}/start`, {
      method: "POST",
      mode: "cors",
      cache: "no-cache",
      credentials: "same-origin",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ room_url: roomUrl }),
    });

    const data = await resp.json();
  }, [roomUrl]);

  useEffect(() => {
    if (callState !== STATE_JOINED || botState === BOT_STATE_STARTED) return;
    start();
  }, [callState, botState, start]);

  if (callState === STATE_IDLE) {
    return (
      <CreateRoom
        onCreateRoom={(roomUrl) => {
          setRoomUrl(roomUrl);
          setCallState(STATE_JOINING);
        }}
      />
    );
  }

  if (callState === STATE_JOINING) {
    return <Join roomUrl={roomUrl} onJoin={() => setCallState(STATE_JOINED)} />;
  }

  // Main call loop
  return (
    <main className="container py-24">
      <div className="grid grid-cols-2 grid-flow-col gap-4">
        <div>
          <Card headerText="Local Webcam" HeaderIcon={VideoCameraIcon}>
            <div className="overflow-hidden bg-gray-50 sm:rounded-lg">
              <div className="aspect-video flex items-center justify-center">
                <DailyVideo automirror sessionId={localSessionId} />
              </div>
            </div>
          </Card>
          <div className="relative">Config - Resolution, Mbps, FPS</div>
        </div>
        <div>
          <Card headerText="Inference" HeaderIcon={PaintBrushIcon}>
            <div className="overflow-hidden bg-gray-50 sm:rounded-lg">
              <div className="aspect-video flex items-center justify-center">
                <Avatar />
              </div>
            </div>
          </Card>
        </div>
      </div>
    </main>
  );
}