call state implemented

frontend/app/components/App.js

@@ -0,0 +1,90 @@
+"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(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>
+  );
+}

frontend/app/components/Call.js

@@ -1,17 +1,11 @@
 "use client";
 
-import {
-  DailyVideo,
-  useAppMessage,
-  useLocalSessionId,
-  useParticipantIds,
-} from "@daily-co/daily-react";
+import { useDaily } from "@daily-co/daily-react";
 import { useCallback, useEffect, useState } from "react";
-import Avatar from "../components/Avatar";
-import Card from "../components/Card";
 import CreateRoom from "../components/CreateRoom";
 import Join from "../components/Joining";
 import { apiUrl } from "../utils";
+import App from "./App";
 
 const STATE_IDLE = "idle";
 const STATE_JOINING = "joining";
@@ -21,16 +15,14 @@ const BOT_STATE_STARTING = "bot_starting";
 const BOT_STATE_STARTED = "bot_started";
 
 export default function Call() {
+  const daily = useDaily();
   const [callState, setCallState] = useState(STATE_IDLE);
   const [roomUrl, setRoomUrl] = useState();
   const [botState, setBotState] = useState(BOT_STATE_STARTING);
-  const [params, setParams] = useState({});
 
-  const localSessionId = useLocalSessionId();
-  const participantIds = useParticipantIds({ filter: "remote" });
-  const sendAppMessage = useAppMessage({
-    onAppMessage: useCallback((ev) => setParams(ev.data), []),
-  });
+  function leave() {
+    setCallState(STATE_LEFT), daily.leave();
+  }
 
   const start = useCallback(async () => {
     if (!process.env.NEXT_PUBLIC_DISABLE_LOCAL_AGENT) return;
@@ -70,58 +62,9 @@ export default function Call() {
     return <Join roomUrl={roomUrl} onJoin={() => setCallState(STATE_JOINED)} />;
   }
 
+  if (callState === STATE_LEFT) {
+    return <div>Left</div>;
+  }
   // Main call loop
-  return (
-    <main className="container py-12">
-      <div className="grid grid-cols-2 grid-flow-col gap-12">
-        <div>
-          <Card headerText="Local Webcam">
-            <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">
-            <div>
-              <label
-                htmlFor="comment"
-                className="block text-sm font-medium leading-6 text-gray-900"
-              >
-                Add your comment
-              </label>
-              <div className="mt-2">
-                <textarea
-                  rows={4}
-                  name="comment"
-                  id="comment"
-                  className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                  defaultValue={params.prompt || ""}
-                />
-              </div>
-            </div>
-            Config - Resolution, Mbps, FPS
-            <button
-              onClick={() => sendAppMessage({ prompt: "Big ol' car" }, "*")}
-            >
-              Send test app message
-            </button>
-          </div>
-        </div>
-        <div>
-          <Card headerText="Inference">
-            <div className="overflow-hidden bg-gray-50 sm:rounded-lg">
-              <div className="aspect-video flex items-center justify-center">
-                {participantIds.length ? (
-                  <DailyVideo sessionId={participantIds[0]} />
-                ) : (
-                  <Avatar />
-                )}
-              </div>
-            </div>
-          </Card>
-        </div>
-      </div>
-    </main>
-  );
+  return <App onLeave={() => leave()} />;
 }

frontend/app/components/Controls.js

@@ -3,6 +3,7 @@
 import {
   Accordion,
   ActionIcon,
+  LoadingOverlay,
   SegmentedControl,
   Textarea,
 } from "@mantine/core";
@@ -21,7 +22,7 @@ import SelectInput from "./SelectInput";
 import SlideInput from "./SliderInput";
 import TextInput from "./TextInput";
 
-export const Controls = React.memo(() => {
+export const Controls = React.memo(({ remoteParams, onData }) => {
   const form = useForm({
     initialValues: {
       positivePrompt: "some kind of prompt",
@@ -35,17 +36,36 @@ export const Controls = React.memo(() => {
 
   const debounce = useDebounce();
 
-  const handleChange = (event) => {
-    console.log(event);
+  const handleChange = (v) => {
+    onData(v);
   };
 
+  useEffect(() => {
+    if (remoteParams) return;
+  }, [remoteParams]);
+
   useEffect(() => {
     if (!form) return;
     form.isDirty() && debounce(() => handleChange(form.values), 500);
   }, [form, debounce]);
 
   return (
-    <div className="flex flex-col gap-4">
+    <div className="relative flex flex-col gap-4">
+      {!remoteParams && (
+        <LoadingOverlay
+          visible={true}
+          zIndex={1000}
+          overlayProps={{ blur: 2 }}
+          loaderProps={{
+            children: (
+              <div className="animate-pulse font-medium">
+                Waiting for bot to join...
+              </div>
+            ),
+          }}
+          className="h-screen"
+        />
+      )}
       <Accordion
         defaultValue="prompt"
         classNames={{

frontend/app/components/TrayButton.js

@@ -8,7 +8,7 @@ const RED_COLORS =
   "bg-rose-700 text-rose-100 hover:text-rose-50 hover:bg-rose-600";
 const RED_ICON_COLORS = "text-rose-300 group-hover:text-rose-200";
 
-export const TrayButton = ({ Icon, red = false, children }) => (
+export const TrayButton = ({ Icon, red = false, children, ...other }) => (
   <Button
     size="md"
     radius="xl"
@@ -24,6 +24,7 @@ export const TrayButton = ({ Icon, red = false, children }) => (
         } transition-colors duration-300`}
       />
     }
+    {...other}
   >
     {children}
   </Button>

frontend/app/page.js

@@ -4,6 +4,7 @@ import Daily from "@daily-co/daily-js";
 import { DailyProvider } from "@daily-co/daily-react";
 
 import { useEffect, useState } from "react";
+
 import Call from "./components/Call";
 
 export default function Home() {
@@ -17,11 +18,7 @@ export default function Home() {
 
   return (
     <DailyProvider callObject={daily}>
-      <div className="container flex align-center min-h-screen">
-        <div className="self-center w-full">
-          <Call />
-        </div>
-      </div>
+      <Call />
     </DailyProvider>
   );
 }

frontend/app/utils.js

@@ -5,17 +5,3 @@ export const apiUrl =
       `${window.location.protocol === "https:" ? "https" : "http"}://${
         window.location.host
       }`;
-
-export function debounce(func, wait) {
-  let timeout;
-
-  return function executedFunction(...args) {
-    const later = () => {
-      clearTimeout(timeout);
-      func(...args);
-    };
-
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-  };
-}