tensamin/client
Watch
6
0
Fork
You've already forked client
 0
Code Issues Pull requests 3 Projects Releases 2 Packages Wiki Activity Actions

(feat): add basic voice buttons

Browse source
This commit is contained in:
Alois 2026-04-28 19:55:30 +02:00
commit 246163486c
8 changed files with 99 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

28
packages/call/src/components/sidebarBox.tsx
View file

@ -1,4 +1,4 @@
import { Lock, LockOpen } from "lucide-react";
import { Expand, Lock, LockOpen } from "lucide-react";
import { useCall } from "../context";
import {
Button,
@ -11,14 +11,17 @@ import {
Tooltip,
TooltipContent,
TooltipTrigger,
useIsMobile,
} from "@tensamin/ui";
import { LeaveIcon } from "@livekit/components-react";
import ScreenshareButton from "./buttons/screenshare";
export default function SidebarBox() {
const { state, room, disconnect } = useCall();
const { state, room, disconnect, openCallPage, callId } = useCall();
const isMobile = useIsMobile();
return state === "closed" ? null : (
<Card className="p-1.5 gap-1">
<Card className="p-1.5 gap-1" hidden={isMobile}>
<CardHeader className="p-0!">
<ConnectionBar
state={state}
@ -28,7 +31,11 @@ export default function SidebarBox() {
}
/>
</CardHeader>
<CardContent className="p-0! flex justify-end">
<CardContent className="p-0! flex justify-end gap-1">
<Button className="w-9 h-9" onClick={() => openCallPage(callId || "")}>
<Expand />
</Button>
<ScreenshareButton className="w-9 h-9" />
<Button
size="lg"
className="w-9 h-9"
@ -56,18 +63,11 @@ function ConnectionBar({
<Button
size="lg"
variant={
state === "open"
? encrypted
? "subtleDefault"
: "destructive"
: state === "closed" ||
state === "closing" ||
state === "connecting"
? "outline"
: "outline"
state === "open" && encrypted ? "subtleDefault" : "destructive"
}
className="flex justify-between items-center"
>
{state === "encrypting" && "Encrypting..."}
{state === "connecting" && "Connecting..."}
{state === "open" && "Connected"}
{state === "closed" && "Closed"}
@ -77,7 +77,7 @@ function ConnectionBar({
<TooltipTrigger
render={
encrypted ? (
<Lock color="var(--primary-foreground)" />
<Lock color="var(--primary-foreground-alt)" />
) : (
<LockOpen color="var(--destructive)" />
)