frontend/app/components/App.js

"use client";

import {
  DailyVideo,
  useAppMessage,
  useLocalSessionId,
  useParticipantIds,
} from "@daily-co/daily-react";
import { ActionIcon, LoadingOverlay } from "@mantine/core";
import {
  IconDoorExit,
  IconInfoSquareRoundedFilled,
  IconLayoutSidebarRightCollapse,
  IconLayoutSidebarRightExpand,
} from "@tabler/icons-react";
import { useCallback, useState } from "react";
import Card from "./Card";
import Controls from "./Controls";
import { HUDItem } from "./HUDItem";
import { TrayButton } from "./TrayButton";

export default function App({ onLeave }) {
  const [panelHidden, setPanelHidden] = useState(false);
  const localSessionId = useLocalSessionId();
  const participantIds = useParticipantIds({ filter: "remote" });
  const [params, setParams] = useState();
  const sendAppMessage = useAppMessage({
    onAppMessage: useCallback((ev) => setParams(JSON.parse(ev.data)), []),
  });

  return (
    <div className="flex flex-col min-h-screen">
      <div
        className={`flex-1 grid ${
          panelHidden ? "grid-cols-[0px_1fr]" : "grid-cols-[460px_1fr]"
        }`}
      >
        <aside className="overflow-y-auto max-h-screen border-r border-zinc-200 bg-white">
          <Controls
            remoteParams={params}
            onData={(data) => sendAppMessage(data, "*")}
          />
        </aside>
        <div className="max-h-screen bg-zinc-100 flex items-center justify-center relative">
          <header className="flex flex-row justify-between px-3 absolute top-3 w-full">
            <ActionIcon
              size="lg"
              className="rounded-md bg-zinc-200 hover:bg-indigo-500 hover:text-indigo-50 text-zinc-500 transition-colors duration-300"
              onClick={() => setPanelHidden(!panelHidden)}
            >
              {panelHidden ? (
                <IconLayoutSidebarRightCollapse size={20} stroke={2} />
              ) : (
                <IconLayoutSidebarRightExpand size={20} stroke={2} />
              )}
            </ActionIcon>
            <div className="flex flex-row gap-2">
              <HUDItem label="Expiry" value="3:00" />
              <HUDItem label="FPS" value="0" />
            </div>
          </header>

          <main className="w-full h-full flex flex-col max-w-lg xl:max-w-2xl 2xl:max-w-full 2xl:flex-row items-center justify-center p-6 gap-3">
            <Card>
              <DailyVideo automirror sessionId={localSessionId} />
            </Card>
            <Card>
              {participantIds.length ? (
                <DailyVideo sessionId={participantIds[0]} />
              ) : (
                <LoadingOverlay
                  visible={true}
                  zIndex={1000}
                  className="bg-zinc-300"
                />
              )}
            </Card>
          </main>

          <footer className="absolute flex flex-row gap-2 bottom-3 right-3">
            <TrayButton Icon={IconInfoSquareRoundedFilled}>About</TrayButton>
            <TrayButton red Icon={IconDoorExit} onClick={() => onLeave()}>
              Leave
            </TrayButton>
          </footer>
        </div>
      </div>
    </div>
  );
}