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

4
bun.lock
View file

@ -242,7 +242,7 @@
},
"overrides": {
"@tensamin/ttp-core": "https://git.methanium.net/tensamin/ttp/archive/0.0.12.tar.gz",
"@tensamin/ui": "https://git.methanium.net/tensamin/ui/archive/0.0.29.tar.gz",
"@tensamin/ui": "https://git.methanium.net/tensamin/ui/archive/0.0.30.tar.gz",
},
"packages": {
"@antfu/ni": ["@antfu/ni@25.0.0", "", { "dependencies": { "ansis": "^4.0.0", "fzf": "^0.5.2", "package-manager-detector": "^1.3.0", "tinyexec": "^1.0.1" }, "bin": { "na": "bin/na.mjs", "ni": "bin/ni.mjs", "nr": "bin/nr.mjs", "nci": "bin/nci.mjs", "nlx": "bin/nlx.mjs", "nun": "bin/nun.mjs", "nup": "bin/nup.mjs" } }, "sha512-9q/yCljni37pkMr4sPrI3G4jqdIk074+iukc5aFJl7kmDCCsiJrbZ6zKxnES1Gwg+i9RcDZwvktl23puGslmvA=="],
@ -695,7 +695,7 @@
"@tensamin/ttp-core": ["@tensamin/ttp-core@https://git.methanium.net/tensamin/ttp/archive/0.0.12.tar.gz", { "dependencies": { "@eslint/js": "^10.0.1", "@typescript-eslint/parser": "^8.58.1", "@webtransport-bun/webtransport": "^0.3.0", "globals": "^17.5.0", "typescript": "^6.0.2", "typescript-eslint": "^8.58.1", "zod": "^4.3.6" } }, "sha512-YdwOocPnNMoE0N/yqksJM9JizkhmNv7q8sc7JMI/TOKM/0wDlQqHLqJBMd7fAGkGLCSx+DKx5z8SJbrA9YlzVg=="],
"@tensamin/ui": ["@tensamin/ui@https://git.methanium.net/tensamin/ui/archive/0.0.29.tar.gz", { "dependencies": { "@base-ui/react": "^1.3.0", "@fontsource-variable/inter": "^5.2.6", "@tauri-apps/api": "^2", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "^1.1.1", "date-fns": "^4.1.0", "embla-carousel-react": "^8.6.0", "input-otp": "^1.4.2", "lucide-react": "^1.8.0", "next-themes": "^0.4.6", "react-day-picker": "^9.14.0", "react-resizable-panels": "^4.10.0", "recharts": "3.8.0", "shadcn": "^3.5.0", "sonner": "^2.0.7", "tailwind-merge": "^3.5.0", "tw-animate-css": "^1.3.0", "vaul": "^1.1.2" }, "peerDependencies": { "react": "^19.2.0", "react-dom": "^19.2.0" } }, "sha512-z83adnQtOLCr8ceVaUXZ7F7Hn/TrqsyqJM8hivhQxOX4OUNFaCBrbmfDpIK6OmtjRF/AnjqBNRua8FXAhJN35A=="],
"@tensamin/ui": ["@tensamin/ui@https://git.methanium.net/tensamin/ui/archive/0.0.30.tar.gz", { "dependencies": { "@base-ui/react": "^1.3.0", "@fontsource-variable/inter": "^5.2.6", "@tauri-apps/api": "^2", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "^1.1.1", "date-fns": "^4.1.0", "embla-carousel-react": "^8.6.0", "input-otp": "^1.4.2", "lucide-react": "^1.8.0", "next-themes": "^0.4.6", "react-day-picker": "^9.14.0", "react-resizable-panels": "^4.10.0", "recharts": "3.8.0", "shadcn": "^3.5.0", "sonner": "^2.0.7", "tailwind-merge": "^3.5.0", "tw-animate-css": "^1.3.0", "vaul": "^1.1.2" }, "peerDependencies": { "react": "^19.2.0", "react-dom": "^19.2.0" } }, "sha512-Eh/ko+4x4gF/25JyB38PNN2n/UVUIR6yxxZTpyZPx4maL00992pGmFt62kb1ejJQoooEpEfSo/ALtQDF5cjdoA=="],
"@tensamin/user": ["@tensamin/user@workspace:packages/user"],

4
licenses/THIRD_PARTY_NOTICES.md
View file

@ -180,11 +180,11 @@ Generated from bun.lock and installed packages in workspace node_modules folders
- Folder: `licenses/@tensamin_ttp-core@0.0.12`
- Source package dir: `packages/ttp/node_modules/@tensamin/ttp-core`
## @tensamin/ui@0.0.26
## @tensamin/ui@0.0.30
- License: UNKNOWN
- Included files: none found
- Folder: `licenses/@tensamin_ui@0.0.26`
- Folder: `licenses/@tensamin_ui@0.0.30`
- Source package dir: `apps/tauri/node_modules/@tensamin/ui`
## @types/node@25.6.0

10
licenses/sbom.cyclonedx.json
View file

@ -3,7 +3,7 @@
"specVersion": "1.5",
"version": 1,
"metadata": {
"timestamp": "2026-04-19T14:27:01.395Z",
"timestamp": "2026-04-28T17:49:46.479Z",
"tools": [
{
"vendor": "OpenAI",
@ -633,15 +633,15 @@
},
{
"type": "library",
"bomRef": "pkg:npm/%40tensamin/ui@0.0.26",
"bomRef": "pkg:npm/%40tensamin/ui@0.0.30",
"name": "@tensamin/ui",
"version": "0.0.26",
"purl": "pkg:npm/%40tensamin/ui@0.0.26",
"version": "0.0.30",
"purl": "pkg:npm/%40tensamin/ui@0.0.30",
"externalReferences": [],
"properties": [
{
"name": "local:licenseFolder",
"value": "licenses/@tensamin_ui@0.0.26"
"value": "licenses/@tensamin_ui@0.0.30"
},
{
"name": "local:sourcePackageDir",

6
licenses/third-party-credits.json
View file

@ -1,5 +1,5 @@
{
"generatedAt": "2026-04-19T14:27:01.394Z",
"generatedAt": "2026-04-28T17:49:46.477Z",
"packageCount": 57,
"packages": [
{
@ -253,13 +253,13 @@
},
{
"name": "@tensamin/ui",
"version": "0.0.26",
"version": "0.0.30",
"license": "UNKNOWN",
"homepage": null,
"repository": null,
"description": null,
"files": [],
"licenseFolder": "licenses/@tensamin_ui@0.0.26",
"licenseFolder": "licenses/@tensamin_ui@0.0.30",
"sourcePackageDir": "apps/tauri/node_modules/@tensamin/ui"
},
{

2
package.json
View file

@ -37,7 +37,7 @@
"jsonc-parser": "^3.3.1"
},
"overrides": {
"@tensamin/ui": "https://git.methanium.net/tensamin/ui/archive/0.0.29.tar.gz",
"@tensamin/ui": "https://git.methanium.net/tensamin/ui/archive/0.0.30.tar.gz",
"@tensamin/ttp-core": "https://git.methanium.net/tensamin/ttp/archive/0.0.12.tar.gz"
},
"dependencies": {

44
packages/call/src/components/buttons/screenshare.tsx Normal file
View file

@ -0,0 +1,44 @@
import { Button, Popover, PopoverContent, PopoverTrigger } from "@tensamin/ui";
import { MonitorDot, ScreenShare } from "lucide-react";
import { useCall } from "../../context";
export default function ScreenshareButton({
className,
}: {
className?: string;
}) {
const { room } = useCall();
const isScreensharing = room.localParticipant.isScreenShareEnabled;
return (
<Popover>
<PopoverTrigger
render={
<Button
variant={isScreensharing ? "secondary" : "default"}
className={className}
>
{isScreensharing ? <MonitorDot /> : <ScreenShare />}
</Button>
}
/>
<PopoverContent className="w-auto flex flex-col gap-2">
<Button
disabled={isScreensharing}
onClick={() => room.localParticipant.setScreenShareEnabled(true)}
>
Start
</Button>
<Button
variant="destructive"
disabled={!isScreensharing}
onClick={() => room.localParticipant.setScreenShareEnabled(false)}
>
Stop
</Button>
<Button>idk</Button>
</PopoverContent>
</Popover>
);
}

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)" />
)

48
packages/call/src/context.tsx
View file

@ -1,6 +1,6 @@
import { createContext, useContext, useEffect, useMemo, useState } from "react";
import { log, toast } from "@tensamin/shared/log";
import { useNavigate } from "@tanstack/react-router";
import { useLocation, useNavigate } from "@tanstack/react-router";
import { useTTP } from "@tensamin/ttp";
import z from "zod";
import { ttp } from "@tensamin/shared/data";
@ -20,12 +20,16 @@ export default function Provider(props: { children: React.ReactNode }) {
const { getSharedSecret, decryptText } = useCrypto();
const { load } = useStorage();
const { get } = useUser();
const location = useLocation();
const search = new URLSearchParams(location.searchStr);
const [state, setState] = useState<
"closed" | "closing" | "connecting" | "open" | "encrypting"
>("closed");
const [callId, setCallId] = useState<string | null>(null);
const [callId, setCallId] = useState<string | null>(
location.pathname.startsWith("/call") ? search.get("id") : null,
);
const [callSecret, setCallSecret] = useState<string | null>(null);
const [livekitToken, setLivekitToken] = useState<string | null>(null);
@ -40,9 +44,8 @@ export default function Provider(props: { children: React.ReactNode }) {
};
async function connect(callId: string) {
setState("connecting");
setState("encrypting");
setCallId(callId);
setCallSecret(callSecret);
setLivekitToken(await getCallToken(callId));
log(2, "call", "purple", "Connecting to call", { callId, callSecret });
}
@ -74,23 +77,29 @@ export default function Provider(props: { children: React.ReactNode }) {
await get(userId).then((res) => res.public_key),
);
const decryptedSecret = await decryptText(sharedSecret, callSecret);
await keyProvider.setKey(decryptedSecret);
await room.setE2EEEnabled(true);
setCallSecret(decryptedSecret);
setState("connecting");
} catch (err) {
log(1, "call", "red", "Failed getting call secret", err);
disconnect();
}
} else {
setCallSecret(crypto.randomUUID());
const random = crypto.randomUUID();
await keyProvider.setKey(random);
await room.setE2EEEnabled(true);
setCallSecret(random);
setState("connecting");
}
try {
// check if user is already in call
// connect to call
connect(callId || crypto.randomUUID());
const finalId = callId || crypto.randomUUID();
connect(finalId);
setView("grid");
// navigate to call page
navigate({ to: "/call", search: { userId: userId, callId: callId } });
openCallPage(finalId);
} catch (err) {
log(1, "call", "red", "Failed to join call [navbar level]", err);
}
@ -107,6 +116,9 @@ export default function Provider(props: { children: React.ReactNode }) {
typeof ttp.call_data.response
> | null>(null);
const openCallPage = (callId: string) =>
navigate({ to: "/call", search: { id: callId } });
// Get current call information for preview view
useEffect(() => {
if (view !== "preview" || !callId) return;
@ -134,22 +146,15 @@ export default function Provider(props: { children: React.ReactNode }) {
const [room] = useState(
() =>
new Room({
dynacast: true,
adaptiveStream: true,
encryption: {
keyProvider,
worker: e2eeWorker,
},
loggerName: "call",
}),
);
useEffect(() => {
async function enableStuff() {
await keyProvider.setKey(callSecret || "");
await room.setE2EEEnabled(true);
}
enableStuff();
}, [callSecret, keyProvider, room]);
return (
<context.Provider
value={{
@ -158,7 +163,9 @@ export default function Provider(props: { children: React.ReactNode }) {
setView,
room,
connect,
callId,
openCallPage,
disconnect,
joinCall,
currentCallData,
@ -239,11 +246,12 @@ type contextType = {
state: "closed" | "closing" | "connecting" | "open" | "encrypting";
view: "preview" | "focused" | "grid";
setView: (view: "preview" | "focused" | "grid") => void;
connect: (callId: string, callSecret: string) => void;
disconnect: () => void;
joinCall: (userId: number, callSecret?: string, callId?: string) => void;
currentCallData: z.infer<typeof ttp.call_data.response> | null;
room: Room;
openCallPage: (callId: string) => Promise<void>;
callId: string | null;
};
export function useCall(): contextType {