Spaces:
Sleeping
Sleeping
File size: 3,151 Bytes
35f4179 5b6371b 35f4179 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
"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>
);
}
|