(feat): good call progress, mandatory update due to ttp changes #3
19 changed files with 1056 additions and 108 deletions
|
|
@ -26,6 +26,7 @@
|
|||
"@tensamin/tauri": "workspace:*",
|
||||
"@tensamin/ttp": "workspace:*",
|
||||
"@tensamin/tauth": "workspace:*",
|
||||
"@tensamin/markdown": "workspace:*",
|
||||
"@tensamin/ui": "*",
|
||||
"@tensamin/user": "workspace:*",
|
||||
"@tensamin/notifications": "workspace:*",
|
||||
|
|
|
|||
|
|
@ -1,20 +1,58 @@
|
|||
import type { User } from "@tensamin/user/context";
|
||||
import { Avatar, AvatarImage, AvatarFallback } from "@tensamin/ui";
|
||||
import { reduceDisplay } from "./utils";
|
||||
import {
|
||||
Avatar,
|
||||
AvatarImage,
|
||||
AvatarFallback,
|
||||
Tooltip,
|
||||
TooltipTrigger,
|
||||
TooltipContent,
|
||||
} from "@tensamin/ui";
|
||||
import { Card, CardHeader } from "@tensamin/ui";
|
||||
import { Skeleton } from "@tensamin/ui";
|
||||
import { getStatusColor } from "@tensamin/shared/data";
|
||||
|
||||
export function Basic(props: { user: User }) {
|
||||
export function Basic({
|
||||
user,
|
||||
extra,
|
||||
}: {
|
||||
user: User;
|
||||
extra?: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<Card className="animate-in fade-in duration-300 rounded-2xl py-0 m-px">
|
||||
<CardHeader className="flex flex-row gap-2.5 items-center justify-start p-2">
|
||||
<Avatar>
|
||||
<AvatarImage src={props.user.avatar} />
|
||||
<AvatarFallback>{reduceDisplay(props.user.display)}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex flex-col gap-1 w-full items-start justify-center text-[15px]">
|
||||
<p>{props.user.display}</p>
|
||||
<div className="relative shrink-0 overflow-visible">
|
||||
<Avatar>
|
||||
<AvatarImage src={user.avatar} />
|
||||
<AvatarFallback>
|
||||
{user.display.slice(0, 2).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<Tooltip>
|
||||
<TooltipTrigger
|
||||
render={
|
||||
<div className="absolute -bottom-0.75 -right-0.75 z-10 flex h-4 w-4 items-center justify-center rounded-full bg-card">
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: getStatusColor(user.online_status),
|
||||
}}
|
||||
className="h-2.5 w-2.5 rounded-full"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<TooltipContent>
|
||||
{user.online_status
|
||||
.split("_")
|
||||
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
||||
.join(" ")}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 w-full items-start justify-center text-[15px]">
|
||||
<p>{user.display}</p>
|
||||
</div>
|
||||
<div className="pr-2">{extra}</div>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
/**
|
||||
* Executes reduceDisplay.
|
||||
* @param display Parameter display.
|
||||
* @returns unknown.
|
||||
*/
|
||||
export function reduceDisplay(display: string) {
|
||||
const words = display.split(" ");
|
||||
if (words.length === 1) {
|
||||
return display.slice(0, 2).toUpperCase();
|
||||
} else {
|
||||
return words[0].charAt(0).toUpperCase() + words[1].charAt(0).toUpperCase();
|
||||
}
|
||||
}
|
||||
|
|
@ -7,6 +7,26 @@ import {
|
|||
SidebarContent,
|
||||
SidebarFooter,
|
||||
useSidebar,
|
||||
DropdownMenu,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuLabel,
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
Input,
|
||||
DialogClose,
|
||||
Button,
|
||||
Label,
|
||||
Select,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
} from "@tensamin/ui";
|
||||
import { isTauri } from "@tauri-apps/api/core";
|
||||
import { useIsMobile } from "@tensamin/ui";
|
||||
|
|
@ -14,18 +34,168 @@ import { MobileNavbar } from "./navbar";
|
|||
|
||||
import SidebarBox from "@tensamin/call/sidebarBox";
|
||||
import { useShowMobileNavbar } from "@/routes/app/layout";
|
||||
/**
|
||||
* Renders the conversation sidebar with account summary and conversation list.
|
||||
* On mobile the sidebar is always kept in the DOM and hidden via CSS
|
||||
* (opacity + translateX) instead of being unmounted. This keeps the DOM and
|
||||
* React state alive while the drawer is closed, allowing the sidebar to open
|
||||
* instantly on subsequent toggles.
|
||||
* @returns Sidebar JSX.
|
||||
*/
|
||||
import { Ellipsis, Check } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import type { User } from "@tensamin/user/context";
|
||||
import type z from "zod";
|
||||
import { ttp } from "@tensamin/shared/data";
|
||||
import { useTTP } from "@tensamin/ttp";
|
||||
|
||||
type OnlineStatus = z.infer<
|
||||
typeof ttp.get_user_data.response.shape.online_status
|
||||
>;
|
||||
|
||||
const onlineStatusLabels: Record<OnlineStatus, string> = {
|
||||
user_online: "Online",
|
||||
user_offline: "Offline",
|
||||
user_dnd: "Do not disturb",
|
||||
user_idle: "Idle",
|
||||
user_wc: "Away",
|
||||
user_borked: "Borked",
|
||||
iota_offline: "Iota offline",
|
||||
iota_online: "Iota online",
|
||||
iota_borked: "Iota borked",
|
||||
};
|
||||
|
||||
function StatusDialog({
|
||||
user,
|
||||
open,
|
||||
onOpenChange,
|
||||
send,
|
||||
draftStatus,
|
||||
setDraftStatus,
|
||||
draftOnlineStatus,
|
||||
setDraftOnlineStatus,
|
||||
errorMessage,
|
||||
setErrorMessage,
|
||||
saveSucceeded,
|
||||
setSaveSucceeded,
|
||||
}: {
|
||||
user: User;
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
send: ReturnType<typeof useTTP>["send"];
|
||||
draftStatus: string;
|
||||
setDraftStatus: (value: string) => void;
|
||||
draftOnlineStatus: OnlineStatus;
|
||||
setDraftOnlineStatus: (value: OnlineStatus) => void;
|
||||
errorMessage: string;
|
||||
setErrorMessage: (value: string) => void;
|
||||
saveSucceeded: boolean;
|
||||
setSaveSucceeded: (value: boolean) => void;
|
||||
}) {
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
onOpenChange={(nextOpen) => {
|
||||
if (!nextOpen) {
|
||||
setDraftStatus(user.status ?? "");
|
||||
setDraftOnlineStatus(user.online_status);
|
||||
setErrorMessage("");
|
||||
setSaveSucceeded(false);
|
||||
}
|
||||
|
||||
onOpenChange(nextOpen);
|
||||
}}
|
||||
>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Update Status</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="user-status">Status message</Label>
|
||||
<Input
|
||||
id="user-status"
|
||||
placeholder="Getting snacks..."
|
||||
value={draftStatus}
|
||||
onChange={(e) => {
|
||||
setSaveSucceeded(false);
|
||||
setErrorMessage("");
|
||||
setDraftStatus(e.target.value);
|
||||
}}
|
||||
/>
|
||||
<Label htmlFor="user-online-status">Online status</Label>
|
||||
<Select
|
||||
value={draftOnlineStatus}
|
||||
onValueChange={(value) => {
|
||||
setSaveSucceeded(false);
|
||||
setErrorMessage("");
|
||||
setDraftOnlineStatus(value ?? "user_online");
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="w-full" id="user-online-status">
|
||||
<SelectValue placeholder="Online">
|
||||
{onlineStatusLabels[draftOnlineStatus]}
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent className="p-1">
|
||||
<SelectItem value="user_online">Online</SelectItem>
|
||||
<SelectItem value="user_offline">Offline</SelectItem>
|
||||
<SelectItem value="user_idle">Idle</SelectItem>
|
||||
<SelectItem value="user_dnd">Do not disturb</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
{errorMessage && (
|
||||
<p className="text-sm text-destructive">{errorMessage}</p>
|
||||
)}
|
||||
<DialogFooter>
|
||||
<DialogClose render={<Button variant="destructive">Cancel</Button>} />
|
||||
<Button
|
||||
onClick={async () => {
|
||||
const payload = {
|
||||
...(draftStatus && { status: draftStatus }),
|
||||
online_status: draftOnlineStatus,
|
||||
};
|
||||
|
||||
const validation =
|
||||
ttp.change_user_data.request.safeParse(payload);
|
||||
|
||||
if (!validation.success) {
|
||||
setSaveSucceeded(false);
|
||||
setErrorMessage(
|
||||
validation.error.issues[0]?.message ?? "Invalid status data",
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await send("change_user_data", validation.data);
|
||||
setSaveSucceeded(true);
|
||||
setErrorMessage("");
|
||||
} catch (err) {
|
||||
setSaveSucceeded(false);
|
||||
setErrorMessage("Failed to update status: " + err);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{saveSucceeded ? (
|
||||
<span className="inline-flex items-center gap-1.5">
|
||||
<Check className="size-4" />
|
||||
Saved
|
||||
</span>
|
||||
) : (
|
||||
"Save"
|
||||
)}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Sidebar() {
|
||||
const isMobile = useIsMobile();
|
||||
const showMobileNavbar = useShowMobileNavbar();
|
||||
const { openMobile, setOpenMobile } = useSidebar();
|
||||
const [draftStatus, setDraftStatus] = useState("");
|
||||
const [draftOnlineStatus, setDraftOnlineStatus] =
|
||||
useState<OnlineStatus>("user_online");
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const [statusErrorMessage, setStatusErrorMessage] = useState("");
|
||||
const [statusSaveSucceeded, setStatusSaveSucceeded] = useState(false);
|
||||
|
||||
const { send } = useTTP();
|
||||
|
||||
const content = (
|
||||
<>
|
||||
|
|
@ -39,7 +209,67 @@ export default function Sidebar() {
|
|||
<Wrapper
|
||||
loading={<Loading />}
|
||||
userId={"own"}
|
||||
component={(user) => <Basic user={user} />}
|
||||
component={(user) => (
|
||||
<>
|
||||
<Basic
|
||||
user={user}
|
||||
extra={
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger
|
||||
render={
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Open profile menu"
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
|
||||
>
|
||||
<Ellipsis />
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuLabel>Profile</DropdownMenuLabel>
|
||||
<DropdownMenuItem
|
||||
onClick={() => {
|
||||
setDraftStatus(user.status ?? "");
|
||||
setDraftOnlineStatus(user.online_status);
|
||||
setStatusErrorMessage("");
|
||||
setStatusSaveSucceeded(false);
|
||||
setDialogOpen(true);
|
||||
}}
|
||||
>
|
||||
Set Status
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
}
|
||||
/>
|
||||
<StatusDialog
|
||||
user={user}
|
||||
open={dialogOpen}
|
||||
onOpenChange={(nextOpen) => {
|
||||
if (!nextOpen) {
|
||||
setDraftStatus(user.status ?? "");
|
||||
setDraftOnlineStatus(user.online_status);
|
||||
setStatusErrorMessage("");
|
||||
setStatusSaveSucceeded(false);
|
||||
}
|
||||
|
||||
setDialogOpen(nextOpen);
|
||||
}}
|
||||
send={send}
|
||||
draftStatus={draftStatus}
|
||||
setDraftStatus={setDraftStatus}
|
||||
draftOnlineStatus={draftOnlineStatus}
|
||||
setDraftOnlineStatus={setDraftOnlineStatus}
|
||||
errorMessage={statusErrorMessage}
|
||||
setErrorMessage={setStatusErrorMessage}
|
||||
saveSucceeded={statusSaveSucceeded}
|
||||
setSaveSucceeded={setStatusSaveSucceeded}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="h-full">
|
||||
|
|
|
|||
|
|
@ -1,3 +1,211 @@
|
|||
import { useStorage } from "@tensamin/storage/context";
|
||||
import {
|
||||
Avatar,
|
||||
AvatarFallback,
|
||||
AvatarImage,
|
||||
Button,
|
||||
Input,
|
||||
} from "@tensamin/ui";
|
||||
import { useUser, type User } from "@tensamin/user/context";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import MDInput from "@tensamin/markdown/input";
|
||||
import { ttp } from "@tensamin/shared/data";
|
||||
import { useTTP } from "@tensamin/ttp";
|
||||
import { Check } from "lucide-react";
|
||||
|
||||
async function prepImage(
|
||||
file: File,
|
||||
size = 300,
|
||||
quality = 0.8,
|
||||
): Promise<string> {
|
||||
const bitmap = await createImageBitmap(file);
|
||||
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = size;
|
||||
canvas.height = size;
|
||||
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (!ctx) throw new Error("Could not get canvas context");
|
||||
|
||||
const scale = Math.max(size / bitmap.width, size / bitmap.height);
|
||||
const width = bitmap.width * scale;
|
||||
const height = bitmap.height * scale;
|
||||
const x = (size - width) / 2;
|
||||
const y = (size - height) / 2;
|
||||
|
||||
ctx.drawImage(bitmap, x, y, width, height);
|
||||
|
||||
return canvas.toDataURL("image/webp", quality);
|
||||
}
|
||||
|
||||
export default function Page() {
|
||||
return <div></div>;
|
||||
const { get } = useUser();
|
||||
const { load } = useStorage();
|
||||
const { send } = useTTP();
|
||||
const [currentUser, setCurrentUser] = useState<User | null>(null);
|
||||
const [draftUser, setDraftUser] = useState<Partial<User>>({});
|
||||
const [errorMessage, setErrorMessage] = useState("");
|
||||
const [saveSucceeded, setSaveSucceeded] = useState(false);
|
||||
const avatarUploadRef = useRef<HTMLInputElement>(null);
|
||||
const draftInitializedRef = useRef(false);
|
||||
const effectiveAvatar =
|
||||
draftUser.avatar === "none" ? undefined : draftUser.avatar;
|
||||
|
||||
const updateDraftUser = (
|
||||
updater: (previous: Partial<User>) => Partial<User>,
|
||||
) => {
|
||||
setSaveSucceeded(false);
|
||||
setErrorMessage("");
|
||||
setDraftUser(updater);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const fetchUser = async () => {
|
||||
const user = await get(await load("user_id"));
|
||||
setCurrentUser(user);
|
||||
};
|
||||
|
||||
fetchUser();
|
||||
}, [load, get]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!currentUser || draftInitializedRef.current) return;
|
||||
|
||||
setDraftUser(currentUser);
|
||||
draftInitializedRef.current = true;
|
||||
}, [currentUser]);
|
||||
|
||||
const handleAvatarUpload = async (file: File) => {
|
||||
const final = await prepImage(file);
|
||||
updateDraftUser((prev) => ({ ...prev, avatar: final }));
|
||||
if (avatarUploadRef.current) {
|
||||
avatarUploadRef.current.value = "";
|
||||
}
|
||||
};
|
||||
|
||||
return currentUser ? (
|
||||
<>
|
||||
<input
|
||||
ref={avatarUploadRef}
|
||||
hidden
|
||||
onChange={(e) =>
|
||||
e.target.files?.[0] && handleAvatarUpload(e.target.files[0])
|
||||
}
|
||||
type="file"
|
||||
/>
|
||||
<div className="flex flex-col gap-5 w-80">
|
||||
<div className="flex items-center gap-3">
|
||||
<Avatar className="size-14">
|
||||
<AvatarImage src={effectiveAvatar} />
|
||||
<AvatarFallback className="text-2xl">
|
||||
{draftUser.display?.slice(0, 2).toUpperCase() ||
|
||||
currentUser.display.slice(0, 2).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex flex-col gap-1">
|
||||
<p>Avatar</p>
|
||||
<div className="flex gap-1">
|
||||
<Button onClick={() => avatarUploadRef.current?.click()}>
|
||||
Upload avatar
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
updateDraftUser((prev) => {
|
||||
return { ...prev, avatar: "none" };
|
||||
});
|
||||
}}
|
||||
variant="destructive"
|
||||
disabled={effectiveAvatar === undefined}
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
GIFs are supported in decentralised mode or with Tensamin Premium
|
||||
<br />
|
||||
Maximum file size is 16mb.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Input
|
||||
className="w-full"
|
||||
onChange={(event) =>
|
||||
updateDraftUser((prev) => ({
|
||||
...prev,
|
||||
display: event.target.value,
|
||||
}))
|
||||
}
|
||||
placeholder="Display Name"
|
||||
value={draftUser.display || ""}
|
||||
/>
|
||||
<Input
|
||||
className="w-full"
|
||||
onChange={(event) =>
|
||||
updateDraftUser((prev) => ({
|
||||
...prev,
|
||||
username: event.target.value,
|
||||
}))
|
||||
}
|
||||
placeholder="Username"
|
||||
value={draftUser.username || ""}
|
||||
/>
|
||||
<MDInput
|
||||
styled
|
||||
paddingY="4px"
|
||||
paddingX="10px"
|
||||
fontSize=".875rem"
|
||||
placeholder="About Me"
|
||||
setValue={(value) =>
|
||||
updateDraftUser((prev) => ({ ...prev, about: value }))
|
||||
}
|
||||
value={draftUser.about || ""}
|
||||
/>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
const payload = {
|
||||
...draftUser,
|
||||
avatar:
|
||||
typeof draftUser.avatar === "string" &&
|
||||
draftUser.avatar.startsWith("data:")
|
||||
? (draftUser.avatar.split(",", 2)[1] ?? "")
|
||||
: draftUser.avatar,
|
||||
};
|
||||
|
||||
const validation = ttp.change_user_data.request.safeParse(payload);
|
||||
|
||||
if (!validation.success) {
|
||||
setSaveSucceeded(false);
|
||||
setErrorMessage(
|
||||
validation.error.issues[0]?.message ?? "Invalid profile data",
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await send("change_user_data", validation.data);
|
||||
setSaveSucceeded(true);
|
||||
setErrorMessage("");
|
||||
} catch (err) {
|
||||
setSaveSucceeded(false);
|
||||
setErrorMessage("Failed to update profile: " + err);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{saveSucceeded ? (
|
||||
<span className="inline-flex items-center gap-1.5">
|
||||
<Check className="size-4" />
|
||||
Saved
|
||||
</span>
|
||||
) : (
|
||||
"Save"
|
||||
)}
|
||||
</Button>
|
||||
{errorMessage && (
|
||||
<p className="text-sm text-destructive">{errorMessage}</p>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<p>Loading...</p>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
5
bun.lock
5
bun.lock
|
|
@ -55,6 +55,7 @@
|
|||
"@tensamin/call": "workspace:*",
|
||||
"@tensamin/chat": "workspace:*",
|
||||
"@tensamin/crypto": "workspace:*",
|
||||
"@tensamin/markdown": "workspace:*",
|
||||
"@tensamin/notifications": "workspace:*",
|
||||
"@tensamin/shared": "workspace:*",
|
||||
"@tensamin/storage": "workspace:*",
|
||||
|
|
@ -258,7 +259,7 @@
|
|||
},
|
||||
},
|
||||
"overrides": {
|
||||
"@tensamin/ttp-core": "https://git.methanium.net/tensamin/ttp/archive/0.0.17.tar.gz",
|
||||
"@tensamin/ttp-core": "https://git.methanium.net/tensamin/ttp/archive/0.0.19.tar.gz",
|
||||
"@tensamin/ui": "https://git.methanium.net/tensamin/ui/archive/0.0.34.tar.gz",
|
||||
},
|
||||
"packages": {
|
||||
|
|
@ -698,7 +699,7 @@
|
|||
|
||||
"@tensamin/ttp": ["@tensamin/ttp@workspace:packages/ttp"],
|
||||
|
||||
"@tensamin/ttp-core": ["@tensamin/ttp-core@https://git.methanium.net/tensamin/ttp/archive/0.0.17.tar.gz", { "dependencies": { "@eslint/js": "^10.0.1", "@typescript-eslint/parser": "^8.59.1", "@webtransport-bun/webtransport": "^0.3.0", "globals": "^17.5.0", "typescript": "^6.0.3", "typescript-eslint": "^8.59.1", "zod": "^4.4.1" } }, "sha512-smyx+04hSnWM1oyWJfJrRWmxu7OInwyHeIlaD1h3tUrkrSxiKWHl1qCmxVO1bC+cDwyUXhJ5HUnNCbx1aWx7Dg=="],
|
||||
"@tensamin/ttp-core": ["@tensamin/ttp-core@https://git.methanium.net/tensamin/ttp/archive/0.0.19.tar.gz", { "dependencies": { "@eslint/js": "^10.0.1", "@typescript-eslint/parser": "^8.59.1", "@webtransport-bun/webtransport": "^0.3.0", "globals": "^17.5.0", "typescript": "^6.0.3", "typescript-eslint": "^8.59.1", "zod": "^4.4.1" } }, "sha512-La9VqXqJFtzzsRQotXVp+3Vr6u8kj4mQ4wTlSIMRDxKFBnbCvtZyB3V/f8HiIlf7FlZ0Xg0suUUpnamvtcvs9w=="],
|
||||
|
||||
"@tensamin/ui": ["@tensamin/ui@https://git.methanium.net/tensamin/ui/archive/0.0.34.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-hp7rV0a0gfD/rNw9et+PqM1PPkgFC6/Z7eYfza6NIp/m+a8/r5Um+S/8tzBDCgZmQC9Y1sJsjesH7mXZz6Jmuw=="],
|
||||
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
},
|
||||
"overrides": {
|
||||
"@tensamin/ui": "https://git.methanium.net/tensamin/ui/archive/0.0.34.tar.gz",
|
||||
"@tensamin/ttp-core": "https://git.methanium.net/tensamin/ttp/archive/0.0.17.tar.gz"
|
||||
"@tensamin/ttp-core": "https://git.methanium.net/tensamin/ttp/archive/0.0.19.tar.gz"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tensamin/ttp-core": "*",
|
||||
|
|
|
|||
|
|
@ -18,10 +18,12 @@ export default function ScreenshareButton({
|
|||
className,
|
||||
iconSize,
|
||||
tooltip,
|
||||
defaultPortal,
|
||||
}: {
|
||||
className?: string;
|
||||
iconSize?: number;
|
||||
tooltip?: string;
|
||||
defaultPortal?: boolean;
|
||||
}) {
|
||||
const isScreensharing = useCall((state) => state.screenShareEnabled);
|
||||
const screenRef = useCall((state) => state.screenRef);
|
||||
|
|
@ -30,8 +32,9 @@ export default function ScreenshareButton({
|
|||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (defaultPortal) return;
|
||||
setPortalContainer(screenRef?.current ?? undefined);
|
||||
}, [screenRef]);
|
||||
}, [screenRef, defaultPortal]);
|
||||
|
||||
async function startWebShare() {
|
||||
try {
|
||||
|
|
@ -110,7 +113,9 @@ export default function ScreenshareButton({
|
|||
/>
|
||||
<PopoverContent
|
||||
className="flex w-40 flex-col gap-2"
|
||||
portalProps={{ container: portalContainer }}
|
||||
portalProps={{
|
||||
container: defaultPortal ? undefined : portalContainer,
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
disabled={isScreensharing}
|
||||
|
|
@ -141,7 +146,11 @@ export default function ScreenshareButton({
|
|||
</PopoverContent>
|
||||
</Popover>
|
||||
{tooltip && (
|
||||
<TooltipContent portalProps={{ container: portalContainer }}>
|
||||
<TooltipContent
|
||||
portalProps={{
|
||||
container: defaultPortal ? undefined : portalContainer,
|
||||
}}
|
||||
>
|
||||
{tooltip}
|
||||
</TooltipContent>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ import {
|
|||
import { Track, type Participant } from "livekit-client";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useUser, type User } from "@tensamin/user/context";
|
||||
import { useIsSpeaking } from "../../speakingIndicator";
|
||||
import VideoViewer from "../videoViewer";
|
||||
import { HeadphoneOff, MicOff, Monitor, Plus, Shield } from "lucide-react";
|
||||
|
||||
|
|
@ -103,6 +104,7 @@ export default function Base({
|
|||
const focusedParticipantId = useCall((state) => state.focusedParticipantId);
|
||||
const view = useCall((state) => state.view);
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
const isSpeaking = useIsSpeaking(user?.user_id ?? -1);
|
||||
const screenSharePublication = getTrackPublicationBySource(
|
||||
participant,
|
||||
Track.Source.ScreenShare,
|
||||
|
|
@ -150,12 +152,12 @@ export default function Base({
|
|||
|
||||
const onClick = () => {
|
||||
if (view === "grid") {
|
||||
focusParticipant(user.user_id);
|
||||
focusParticipant(user.user_id, type);
|
||||
} else {
|
||||
if (user.user_id === focusedParticipantId) {
|
||||
setCallView("grid");
|
||||
} else {
|
||||
focusParticipant(user.user_id);
|
||||
focusParticipant(user.user_id, type);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -211,9 +213,9 @@ export default function Base({
|
|||
</div>
|
||||
<div
|
||||
ref={currentCard}
|
||||
className={`z-10 bg-card absolute top-0 left-0 w-full h-full flex gap-2 items-center justify-center ${
|
||||
className={`transition-all duration-150 z-10 bg-card absolute top-0 left-0 w-full h-full flex gap-2 items-center justify-center ${
|
||||
flush ? "rounded-none" : "rounded-sm"
|
||||
}`}
|
||||
} ${type === "user" && isSpeaking ? "border-4 border-(--primary-foreground-alt)/75" : "border-0"}`}
|
||||
style={{ containerType: "size" }}
|
||||
>
|
||||
{/* Detect video / user and place here */}
|
||||
|
|
|
|||
|
|
@ -20,24 +20,18 @@ import LeaveButton from "./buttons/leave";
|
|||
|
||||
export default function SidebarBox() {
|
||||
const state = useCall((store) => store.state);
|
||||
const screenRef = useCall((store) => store.screenRef);
|
||||
const isMobile = useIsMobile();
|
||||
const [portalContainer, setPortalContainer] = useState<HTMLElement>();
|
||||
|
||||
useEffect(() => {
|
||||
setPortalContainer(screenRef?.current ?? undefined);
|
||||
}, [screenRef]);
|
||||
|
||||
return state === "closed" ? null : (
|
||||
<Card className="p-1.5 gap-2" hidden={isMobile}>
|
||||
<CardHeader className="p-0! pb-2! border-b-2">
|
||||
<ConnectionBar portalContainer={portalContainer} />
|
||||
<ConnectionBar />
|
||||
</CardHeader>
|
||||
<CardContent className="p-0! flex flex-col gap-1">
|
||||
<div className="flex justify-start gap-1">
|
||||
<MuteButton className="w-9 h-9" />
|
||||
<DeafButton className="w-9 h-9" />
|
||||
<ScreenshareButton className="w-9 h-9" />
|
||||
<ScreenshareButton className="w-9 h-9" defaultPortal />
|
||||
<LeaveButton className="w-9 h-9" />
|
||||
</div>
|
||||
</CardContent>
|
||||
|
|
@ -45,7 +39,7 @@ export default function SidebarBox() {
|
|||
);
|
||||
}
|
||||
|
||||
function ConnectionBar({ portalContainer }: { portalContainer?: HTMLElement }) {
|
||||
function ConnectionBar() {
|
||||
const state = useCall((store) => store.state);
|
||||
const isEncrypted = useCall((store) => store.isEncrypted);
|
||||
const callId = useCall((store) => store.callId);
|
||||
|
|
@ -68,7 +62,7 @@ function ConnectionBar({ portalContainer }: { portalContainer?: HTMLElement }) {
|
|||
{state === "closed" && "Closed"}
|
||||
{state === "closing" && "Closing"}
|
||||
|
||||
<TinyPingGraph portalContainer={portalContainer} />
|
||||
<TinyPingGraph />
|
||||
|
||||
{isEncrypted ? (
|
||||
<Lock color="var(--primary-foreground-alt)" />
|
||||
|
|
@ -78,18 +72,12 @@ function ConnectionBar({ portalContainer }: { portalContainer?: HTMLElement }) {
|
|||
</Button>
|
||||
}
|
||||
/>
|
||||
<TooltipContent portalProps={{ container: portalContainer }}>
|
||||
Click to open call page
|
||||
</TooltipContent>
|
||||
<TooltipContent>Click to open call page</TooltipContent>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
export function TinyPingGraph({
|
||||
portalContainer,
|
||||
}: {
|
||||
portalContainer?: HTMLElement;
|
||||
}) {
|
||||
export function TinyPingGraph() {
|
||||
const room = useCall((store) => store.room);
|
||||
|
||||
const [mapData, setMapData] = useState<Map<number, number>>(() => new Map());
|
||||
|
|
@ -176,7 +164,7 @@ export function TinyPingGraph({
|
|||
</div>
|
||||
}
|
||||
/>
|
||||
<TooltipContent portalProps={{ container: portalContainer }}>
|
||||
<TooltipContent>
|
||||
{data.length > 0 ? `${data.at(-1)?.ping} ms` : "Measuring ping..."}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
|
|
|
|||
252
packages/call/src/speakingIndicator.ts
Normal file
252
packages/call/src/speakingIndicator.ts
Normal file
|
|
@ -0,0 +1,252 @@
|
|||
import { log } from "@tensamin/shared/log";
|
||||
import { useCall } from "./store";
|
||||
|
||||
const SPEAKING_THRESHOLD = 0.01;
|
||||
const SPEAKING_HANGTIME_MS = 500;
|
||||
const ANALYSIS_INTERVAL_MS = 30;
|
||||
const FFT_SIZE = 256;
|
||||
|
||||
type AnalyserEntry = {
|
||||
source: MediaStreamAudioSourceNode;
|
||||
analyser: AnalyserNode;
|
||||
track: MediaStreamTrack;
|
||||
originalTrack?: MediaStreamTrack;
|
||||
lastSpeakingTime: number;
|
||||
isSpeaking: boolean;
|
||||
};
|
||||
|
||||
class SpeakingDetector {
|
||||
private audioContext: AudioContext | null = null;
|
||||
private entries = new Map<number, AnalyserEntry>();
|
||||
private intervalId: ReturnType<typeof setInterval> | null = null;
|
||||
private deaf = false;
|
||||
private gateThresholdStart = -50;
|
||||
private gateThresholdEnd = -40;
|
||||
private localParticipantId: number | null = null;
|
||||
private localMicGateClosed = false;
|
||||
|
||||
private ensureAudioContext(): AudioContext {
|
||||
if (!this.audioContext) {
|
||||
this.audioContext = new AudioContext();
|
||||
}
|
||||
if (this.audioContext.state === "suspended") {
|
||||
void this.audioContext.resume();
|
||||
}
|
||||
return this.audioContext;
|
||||
}
|
||||
|
||||
setLocalParticipantId(id: number) {
|
||||
this.localParticipantId = id;
|
||||
}
|
||||
|
||||
setGateThresholds(start: number, end: number) {
|
||||
this.gateThresholdStart = start;
|
||||
this.gateThresholdEnd = end;
|
||||
}
|
||||
|
||||
addTrack(
|
||||
participantId: number,
|
||||
track: MediaStreamTrack,
|
||||
originalTrack?: MediaStreamTrack,
|
||||
) {
|
||||
if (track.kind !== "audio") return;
|
||||
|
||||
this.removeParticipant(participantId);
|
||||
|
||||
const ctx = this.ensureAudioContext();
|
||||
const stream = new MediaStream([track]);
|
||||
const source = ctx.createMediaStreamSource(stream);
|
||||
const analyser = ctx.createAnalyser();
|
||||
analyser.fftSize = FFT_SIZE;
|
||||
source.connect(analyser);
|
||||
|
||||
this.entries.set(participantId, {
|
||||
source,
|
||||
analyser,
|
||||
track,
|
||||
originalTrack,
|
||||
lastSpeakingTime: 0,
|
||||
isSpeaking: false,
|
||||
});
|
||||
|
||||
if (!this.intervalId) {
|
||||
this.startLoop();
|
||||
}
|
||||
}
|
||||
|
||||
removeParticipant(participantId: number) {
|
||||
const entry = this.entries.get(participantId);
|
||||
if (!entry) return;
|
||||
|
||||
try {
|
||||
entry.source.disconnect();
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
this.entries.delete(participantId);
|
||||
|
||||
useCall.setState((state) => {
|
||||
if (!state.speakingParticipantIds.has(participantId)) return state;
|
||||
const next = new Set(state.speakingParticipantIds);
|
||||
next.delete(participantId);
|
||||
return { speakingParticipantIds: next };
|
||||
});
|
||||
|
||||
if (participantId === this.localParticipantId && this.localMicGateClosed) {
|
||||
this.muteLocalTrack(false);
|
||||
}
|
||||
}
|
||||
|
||||
setDeaf(deaf: boolean) {
|
||||
this.deaf = deaf;
|
||||
if (deaf) {
|
||||
for (const entry of this.entries.values()) {
|
||||
entry.isSpeaking = false;
|
||||
entry.lastSpeakingTime = 0;
|
||||
}
|
||||
useCall.setState({ speakingParticipantIds: new Set() });
|
||||
}
|
||||
}
|
||||
|
||||
private startLoop() {
|
||||
if (this.intervalId) return;
|
||||
this.intervalId = setInterval(() => this.analyse(), ANALYSIS_INTERVAL_MS);
|
||||
}
|
||||
|
||||
private stopLoop() {
|
||||
if (this.intervalId) {
|
||||
clearInterval(this.intervalId);
|
||||
this.intervalId = null;
|
||||
}
|
||||
}
|
||||
|
||||
private muteLocalTrack(muted: boolean) {
|
||||
const entry = this.localParticipantId
|
||||
? this.entries.get(this.localParticipantId)
|
||||
: undefined;
|
||||
const target = entry?.originalTrack ?? entry?.track;
|
||||
|
||||
if (target && target.enabled === muted) {
|
||||
target.enabled = !muted;
|
||||
}
|
||||
|
||||
this.localMicGateClosed = muted;
|
||||
useCall.setState({ micGated: muted });
|
||||
}
|
||||
|
||||
private applyNoiseGate(rms: number) {
|
||||
const db = 20 * Math.log10(Math.max(rms, 0.0001));
|
||||
|
||||
if (!this.localMicGateClosed && db < this.gateThresholdStart) {
|
||||
log(3, "noise gate", "purple", "closed");
|
||||
this.muteLocalTrack(true);
|
||||
} else if (this.localMicGateClosed && db > this.gateThresholdEnd) {
|
||||
log(3, "noise gate", "purple", "opened");
|
||||
this.muteLocalTrack(false);
|
||||
}
|
||||
}
|
||||
|
||||
private analyse() {
|
||||
if (this.deaf || this.entries.size === 0) return;
|
||||
|
||||
const now = Date.now();
|
||||
const changed = new Map<number, boolean>();
|
||||
|
||||
for (const [participantId, entry] of this.entries) {
|
||||
const { analyser, track } = entry;
|
||||
|
||||
if (track.muted || track.readyState === "ended" || !track.enabled) {
|
||||
if (entry.isSpeaking) {
|
||||
entry.isSpeaking = false;
|
||||
entry.lastSpeakingTime = 0;
|
||||
changed.set(participantId, false);
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
const bufferLength = analyser.frequencyBinCount;
|
||||
const dataArray = new Uint8Array(bufferLength);
|
||||
analyser.getByteTimeDomainData(dataArray);
|
||||
|
||||
let sum = 0;
|
||||
for (let i = 0; i < bufferLength; i++) {
|
||||
const sample = (dataArray[i] - 128) / 128.0;
|
||||
sum += sample * sample;
|
||||
}
|
||||
const rms = Math.sqrt(sum / bufferLength);
|
||||
|
||||
let nextIsSpeaking = entry.isSpeaking;
|
||||
if (rms > SPEAKING_THRESHOLD) {
|
||||
entry.lastSpeakingTime = now;
|
||||
nextIsSpeaking = true;
|
||||
} else if (now - entry.lastSpeakingTime > SPEAKING_HANGTIME_MS) {
|
||||
nextIsSpeaking = false;
|
||||
}
|
||||
|
||||
if (participantId === this.localParticipantId) {
|
||||
this.applyNoiseGate(rms);
|
||||
if (this.localMicGateClosed) {
|
||||
nextIsSpeaking = false;
|
||||
}
|
||||
}
|
||||
|
||||
if (nextIsSpeaking !== entry.isSpeaking) {
|
||||
entry.isSpeaking = nextIsSpeaking;
|
||||
changed.set(participantId, nextIsSpeaking);
|
||||
}
|
||||
}
|
||||
|
||||
if (changed.size > 0) {
|
||||
useCall.setState((state) => {
|
||||
let hasDiff = false;
|
||||
const next = new Set(state.speakingParticipantIds);
|
||||
for (const [id, speaking] of changed) {
|
||||
if (speaking) {
|
||||
if (!next.has(id)) {
|
||||
next.add(id);
|
||||
hasDiff = true;
|
||||
}
|
||||
} else {
|
||||
if (next.has(id)) {
|
||||
next.delete(id);
|
||||
hasDiff = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return hasDiff ? { speakingParticipantIds: next } : state;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
dispose() {
|
||||
this.stopLoop();
|
||||
for (const id of Array.from(this.entries.keys())) {
|
||||
this.removeParticipant(id);
|
||||
}
|
||||
this.entries.clear();
|
||||
if (this.audioContext) {
|
||||
void this.audioContext.close();
|
||||
this.audioContext = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let detectorInstance: SpeakingDetector | null = null;
|
||||
|
||||
export function getSpeakingDetector(): SpeakingDetector {
|
||||
if (!detectorInstance) {
|
||||
detectorInstance = new SpeakingDetector();
|
||||
}
|
||||
return detectorInstance;
|
||||
}
|
||||
|
||||
export function disposeSpeakingDetector(): void {
|
||||
if (detectorInstance) {
|
||||
detectorInstance.dispose();
|
||||
detectorInstance = null;
|
||||
}
|
||||
}
|
||||
|
||||
export function useIsSpeaking(participantId: number): boolean {
|
||||
return useCall((state) => state.speakingParticipantIds.has(participantId));
|
||||
}
|
||||
|
|
@ -11,6 +11,7 @@ import { DeepFilterNoiseFilterProcessor } from "deepfilternet3-noise-filter";
|
|||
import {
|
||||
ExternalE2EEKeyProvider,
|
||||
LocalAudioTrack,
|
||||
type LocalTrackPublication,
|
||||
type Participant,
|
||||
type RemoteParticipant,
|
||||
type RemoteTrackPublication,
|
||||
|
|
@ -28,6 +29,10 @@ import {
|
|||
createScreenShareController,
|
||||
type ScreenShareSession,
|
||||
} from "./screenshare";
|
||||
import {
|
||||
getSpeakingDetector,
|
||||
disposeSpeakingDetector,
|
||||
} from "./speakingIndicator";
|
||||
|
||||
// logging
|
||||
setLogExtension(
|
||||
|
|
@ -86,6 +91,7 @@ type CallStore = {
|
|||
screenShareEnabled: boolean;
|
||||
screenShareSession: ScreenShareSession | null;
|
||||
focusedParticipantId: number | null;
|
||||
focusedParticipantType: "user" | "stream" | null;
|
||||
usersInFocusedViewHidden: boolean;
|
||||
watchedStreamParticipantIds: number[];
|
||||
pendingWatchedParticipantIds: number[];
|
||||
|
|
@ -99,6 +105,8 @@ type CallStore = {
|
|||
keyProvider: ExternalE2EEKeyProvider;
|
||||
e2eeWorker: Worker;
|
||||
runtime: Runtime | null;
|
||||
speakingParticipantIds: Set<number>;
|
||||
micGated: boolean;
|
||||
};
|
||||
|
||||
const keyProvider = new ExternalE2EEKeyProvider();
|
||||
|
|
@ -152,7 +160,7 @@ function clearRemoteAudio() {
|
|||
}
|
||||
}
|
||||
|
||||
function getParticipantId(identity: string | undefined): number | null {
|
||||
export function getParticipantId(identity: string | undefined): number | null {
|
||||
if (!identity) {
|
||||
return null;
|
||||
}
|
||||
|
|
@ -199,7 +207,10 @@ function matchesRemoteTrackSelector(
|
|||
|
||||
function syncRemoteParticipantTrackSubscriptions(participantId: number) {
|
||||
for (const publication of getRemoteTrackPublications(participantId)) {
|
||||
publication.setSubscribed(publication.kind === Track.Kind.Audio);
|
||||
publication.setSubscribed(
|
||||
publication.kind === Track.Kind.Audio &&
|
||||
publication.source !== Track.Source.ScreenShareAudio,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -457,6 +468,8 @@ function syncScreenShareParticipants() {
|
|||
watchedStreamParticipantIds,
|
||||
pendingWatchedParticipantIds,
|
||||
focusedParticipantId,
|
||||
focusedParticipantType:
|
||||
focusedParticipantId == null ? null : state.focusedParticipantType,
|
||||
view:
|
||||
state.view === "focused" && focusedParticipantId == null
|
||||
? "grid"
|
||||
|
|
@ -614,6 +627,7 @@ export function startWatchingStream(participantId: number) {
|
|||
const trackReady = getScreenShareTrackForParticipant(participantId) != null;
|
||||
|
||||
setParticipantTrackSubscribed(participantId, Track.Source.ScreenShare);
|
||||
setParticipantTrackSubscribed(participantId, Track.Source.ScreenShareAudio);
|
||||
|
||||
useCall.setState((state) => ({
|
||||
watchedStreamParticipantIds: state.watchedStreamParticipantIds.includes(
|
||||
|
|
@ -627,6 +641,7 @@ export function startWatchingStream(participantId: number) {
|
|||
? state.pendingWatchedParticipantIds
|
||||
: [...state.pendingWatchedParticipantIds, participantId],
|
||||
focusedParticipantId: participantId,
|
||||
focusedParticipantType: "stream",
|
||||
}));
|
||||
}
|
||||
|
||||
|
|
@ -646,9 +661,13 @@ export function setParticipantTrackSubscribed(
|
|||
}
|
||||
|
||||
// Focus a participant in the main call view even when they are not sharing a screen.
|
||||
export function focusParticipant(participantId: number) {
|
||||
export function focusParticipant(
|
||||
participantId: number,
|
||||
type: "user" | "stream" = "user",
|
||||
) {
|
||||
useCall.setState({
|
||||
focusedParticipantId: participantId,
|
||||
focusedParticipantType: type,
|
||||
view: "focused",
|
||||
});
|
||||
}
|
||||
|
|
@ -656,6 +675,11 @@ export function focusParticipant(participantId: number) {
|
|||
// Stop tracking a participant's shared screen and clean up related UI state.
|
||||
export function stopWatchingStream(participantId: number) {
|
||||
setParticipantTrackSubscribed(participantId, Track.Source.ScreenShare, false);
|
||||
setParticipantTrackSubscribed(
|
||||
participantId,
|
||||
Track.Source.ScreenShareAudio,
|
||||
false,
|
||||
);
|
||||
|
||||
useCall.setState((state) => ({
|
||||
watchedStreamParticipantIds: state.watchedStreamParticipantIds.filter(
|
||||
|
|
@ -668,6 +692,10 @@ export function stopWatchingStream(participantId: number) {
|
|||
state.focusedParticipantId === participantId
|
||||
? null
|
||||
: state.focusedParticipantId,
|
||||
focusedParticipantType:
|
||||
state.focusedParticipantId === participantId
|
||||
? null
|
||||
: state.focusedParticipantType,
|
||||
view:
|
||||
state.view === "focused" && state.focusedParticipantId === participantId
|
||||
? "grid"
|
||||
|
|
@ -757,6 +785,7 @@ export async function connect(callId: string) {
|
|||
|
||||
// Tear down the active call session and return the store to a closed state.
|
||||
export async function disconnect() {
|
||||
disposeSpeakingDetector();
|
||||
await clearScreenSharePreview();
|
||||
|
||||
try {
|
||||
|
|
@ -782,10 +811,12 @@ export async function disconnect() {
|
|||
view: "preview",
|
||||
screenShareSession: null,
|
||||
focusedParticipantId: null,
|
||||
focusedParticipantType: null,
|
||||
usersInFocusedViewHidden: false,
|
||||
watchedStreamParticipantIds: [],
|
||||
pendingWatchedParticipantIds: [],
|
||||
activeScreenShareParticipantIds: [],
|
||||
micGated: false,
|
||||
});
|
||||
|
||||
room.remoteParticipants.forEach((participant) => {
|
||||
|
|
@ -879,6 +910,7 @@ export async function toggleDeaf() {
|
|||
deafened: nextDeaf ? "true" : "false",
|
||||
});
|
||||
|
||||
getSpeakingDetector().setDeaf(nextDeaf);
|
||||
useCall.setState({ deaf: nextDeaf });
|
||||
}
|
||||
|
||||
|
|
@ -940,6 +972,7 @@ export function resetCallState() {
|
|||
deaf: false,
|
||||
screenShareSession: null,
|
||||
focusedParticipantId: null,
|
||||
focusedParticipantType: null,
|
||||
usersInFocusedViewHidden: false,
|
||||
watchedStreamParticipantIds: [],
|
||||
pendingWatchedParticipantIds: [],
|
||||
|
|
@ -967,6 +1000,16 @@ async function ensureNoiseFilter(
|
|||
await microphoneTrack.setProcessor(noiseFilter).catch((err) => {
|
||||
log(1, "call", "red", "Failed to enable noise filter", err);
|
||||
});
|
||||
|
||||
const participantId = getParticipantId(room.localParticipant.identity);
|
||||
if (participantId != null) {
|
||||
const processedTrack = microphoneTrack.mediaStreamTrack;
|
||||
getSpeakingDetector().addTrack(
|
||||
participantId,
|
||||
processedTrack.clone(),
|
||||
processedTrack,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export const useCall = create<CallStore>(() => ({
|
||||
|
|
@ -982,6 +1025,7 @@ export const useCall = create<CallStore>(() => ({
|
|||
screenShareEnabled: room.localParticipant.isScreenShareEnabled,
|
||||
screenShareSession: null,
|
||||
focusedParticipantId: null,
|
||||
focusedParticipantType: null,
|
||||
usersInFocusedViewHidden: false,
|
||||
watchedStreamParticipantIds: [],
|
||||
pendingWatchedParticipantIds: [],
|
||||
|
|
@ -996,6 +1040,8 @@ export const useCall = create<CallStore>(() => ({
|
|||
keyProvider,
|
||||
e2eeWorker,
|
||||
runtime: null,
|
||||
speakingParticipantIds: new Set(),
|
||||
micGated: false,
|
||||
}));
|
||||
|
||||
// Register app-level call listeners and wire React dependencies into the store.
|
||||
|
|
@ -1016,7 +1062,7 @@ export function useInitializeCall() {
|
|||
new DeepFilterNoiseFilterProcessor({
|
||||
enabled: true,
|
||||
enableNoiseReduction: true,
|
||||
noiseReductionLevel: 80,
|
||||
noiseReductionLevel: 60,
|
||||
sampleRate: 48000,
|
||||
assetConfig: {
|
||||
cdnUrl: "/assets",
|
||||
|
|
@ -1137,10 +1183,46 @@ export function useInitializeCall() {
|
|||
|
||||
listenersRegistered.current = true;
|
||||
|
||||
const onConnected = () => {
|
||||
const onConnected = async () => {
|
||||
useCall.setState({ state: "open" });
|
||||
syncParticipantState();
|
||||
|
||||
const detector = getSpeakingDetector();
|
||||
const localParticipantId = getParticipantId(
|
||||
room.localParticipant.identity,
|
||||
);
|
||||
if (localParticipantId != null) {
|
||||
detector.setLocalParticipantId(localParticipantId);
|
||||
}
|
||||
|
||||
const [start, end] = await Promise.all([
|
||||
load("call_mute_range_start"),
|
||||
load("call_mute_range_end"),
|
||||
]);
|
||||
detector.setGateThresholds(start, end);
|
||||
|
||||
// Scan existing audio tracks for speaking detection
|
||||
for (const participant of getAllParticipants()) {
|
||||
const participantId = getParticipantId(participant.identity);
|
||||
if (participantId == null) continue;
|
||||
|
||||
for (const publication of participant.trackPublications.values()) {
|
||||
if (
|
||||
publication.kind === Track.Kind.Audio &&
|
||||
publication.source === Track.Source.Microphone &&
|
||||
publication.track
|
||||
) {
|
||||
const mediaTrack = publication.track.mediaStreamTrack;
|
||||
if (participant === room.localParticipant) {
|
||||
const clonedTrack = mediaTrack.clone();
|
||||
detector.addTrack(participantId, clonedTrack, mediaTrack);
|
||||
} else {
|
||||
detector.addTrack(participantId, mediaTrack);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const invitedUserId = useCall.getState().invitedUserId;
|
||||
|
||||
if (invitedUserId != null) {
|
||||
|
|
@ -1177,6 +1259,7 @@ export function useInitializeCall() {
|
|||
|
||||
if (participantId != null) {
|
||||
stopWatchingStream(participantId);
|
||||
getSpeakingDetector().removeParticipant(participantId);
|
||||
}
|
||||
|
||||
syncParticipantState();
|
||||
|
|
@ -1197,6 +1280,40 @@ export function useInitializeCall() {
|
|||
void ensureNoiseFilter(noiseFilter);
|
||||
};
|
||||
|
||||
const onLocalTrackPublished = (publication: LocalTrackPublication) => {
|
||||
if (
|
||||
publication.kind === Track.Kind.Audio &&
|
||||
publication.source === Track.Source.Microphone &&
|
||||
publication.track
|
||||
) {
|
||||
const participantId = getParticipantId(room.localParticipant.identity);
|
||||
if (participantId != null) {
|
||||
const originalTrack = publication.track.mediaStreamTrack;
|
||||
const clonedTrack = originalTrack.clone();
|
||||
getSpeakingDetector().addTrack(
|
||||
participantId,
|
||||
clonedTrack,
|
||||
originalTrack,
|
||||
);
|
||||
}
|
||||
}
|
||||
syncParticipantState();
|
||||
void ensureNoiseFilter(noiseFilter);
|
||||
};
|
||||
|
||||
const onLocalTrackUnpublished = (publication: LocalTrackPublication) => {
|
||||
if (
|
||||
publication.kind === Track.Kind.Audio &&
|
||||
publication.source === Track.Source.Microphone
|
||||
) {
|
||||
const participantId = getParticipantId(room.localParticipant.identity);
|
||||
if (participantId != null) {
|
||||
getSpeakingDetector().removeParticipant(participantId);
|
||||
}
|
||||
}
|
||||
syncParticipantState();
|
||||
};
|
||||
|
||||
const onTrackPublished = (
|
||||
publication: RemoteTrackPublication,
|
||||
participant: RemoteParticipant,
|
||||
|
|
@ -1204,7 +1321,10 @@ export function useInitializeCall() {
|
|||
const participantId = getParticipantId(participant.identity);
|
||||
|
||||
if (participantId != null) {
|
||||
if (publication.kind === Track.Kind.Audio) {
|
||||
if (
|
||||
publication.kind === Track.Kind.Audio &&
|
||||
publication.source !== Track.Source.ScreenShareAudio
|
||||
) {
|
||||
publication.setSubscribed(true);
|
||||
} else {
|
||||
publication.setSubscribed(false);
|
||||
|
|
@ -1214,9 +1334,21 @@ export function useInitializeCall() {
|
|||
onParticipantStateChange();
|
||||
};
|
||||
|
||||
const onTrackSubscribed = (track: RemoteTrack) => {
|
||||
const onTrackSubscribed = (
|
||||
track: RemoteTrack,
|
||||
publication: RemoteTrackPublication,
|
||||
participant: RemoteParticipant,
|
||||
) => {
|
||||
if (track.kind === "audio" && track.sid) {
|
||||
attachRemoteAudio(track.sid, track.attach());
|
||||
|
||||
const participantId = getParticipantId(participant.identity);
|
||||
if (
|
||||
participantId != null &&
|
||||
publication.source === Track.Source.Microphone
|
||||
) {
|
||||
getSpeakingDetector().addTrack(participantId, track.mediaStreamTrack);
|
||||
}
|
||||
}
|
||||
|
||||
syncParticipantState();
|
||||
|
|
@ -1224,15 +1356,22 @@ export function useInitializeCall() {
|
|||
|
||||
const onTrackUnsubscribed = (
|
||||
track: RemoteTrack,
|
||||
_publication: unknown,
|
||||
publication: RemoteTrackPublication,
|
||||
participant: Participant,
|
||||
) => {
|
||||
const participantId = getParticipantId(participant.identity);
|
||||
|
||||
if (track.kind === "audio" && track.sid) {
|
||||
track.detach();
|
||||
detachRemoteAudio(track.sid);
|
||||
}
|
||||
|
||||
const participantId = getParticipantId(participant.identity);
|
||||
if (
|
||||
participantId != null &&
|
||||
publication.source === Track.Source.Microphone
|
||||
) {
|
||||
getSpeakingDetector().removeParticipant(participantId);
|
||||
}
|
||||
}
|
||||
|
||||
if (
|
||||
participantId != null &&
|
||||
|
|
@ -1256,8 +1395,8 @@ export function useInitializeCall() {
|
|||
room.on(RoomEvent.ParticipantDisconnected, onParticipantDisconnected);
|
||||
room.on(RoomEvent.TrackMuted, onParticipantStateChange);
|
||||
room.on(RoomEvent.TrackUnmuted, onParticipantStateChange);
|
||||
room.on(RoomEvent.LocalTrackPublished, onParticipantStateChange);
|
||||
room.on(RoomEvent.LocalTrackUnpublished, onParticipantStateChange);
|
||||
room.on(RoomEvent.LocalTrackPublished, onLocalTrackPublished);
|
||||
room.on(RoomEvent.LocalTrackUnpublished, onLocalTrackUnpublished);
|
||||
room.on(RoomEvent.MediaDevicesError, onMediaDeviceFailure);
|
||||
room.on(RoomEvent.EncryptionError, onEncryptionError);
|
||||
room.on(RoomEvent.ConnectionStateChanged, onParticipantStateChange);
|
||||
|
|
@ -1277,8 +1416,8 @@ export function useInitializeCall() {
|
|||
room.off(RoomEvent.ParticipantDisconnected, onParticipantDisconnected);
|
||||
room.off(RoomEvent.TrackMuted, onParticipantStateChange);
|
||||
room.off(RoomEvent.TrackUnmuted, onParticipantStateChange);
|
||||
room.off(RoomEvent.LocalTrackPublished, onParticipantStateChange);
|
||||
room.off(RoomEvent.LocalTrackUnpublished, onParticipantStateChange);
|
||||
room.off(RoomEvent.LocalTrackPublished, onLocalTrackPublished);
|
||||
room.off(RoomEvent.LocalTrackUnpublished, onLocalTrackUnpublished);
|
||||
room.off(RoomEvent.MediaDevicesError, onMediaDeviceFailure);
|
||||
room.off(RoomEvent.EncryptionError, onEncryptionError);
|
||||
room.off(RoomEvent.ConnectionStateChanged, onParticipantStateChange);
|
||||
|
|
@ -1287,7 +1426,7 @@ export function useInitializeCall() {
|
|||
room.disconnect();
|
||||
e2eeWorker.terminate();
|
||||
};
|
||||
}, [noiseFilter]);
|
||||
}, [noiseFilter, load]);
|
||||
|
||||
// fetch call data for preview page
|
||||
useEffect(() => {
|
||||
|
|
|
|||
|
|
@ -16,6 +16,9 @@ export default function View() {
|
|||
const callIsFullscreen = useCall((state) => state.callIsFullscreen);
|
||||
|
||||
const focusedParticipantId = useCall((state) => state.focusedParticipantId);
|
||||
const focusedParticipantType = useCall(
|
||||
(state) => state.focusedParticipantType,
|
||||
);
|
||||
const activeScreenShareParticipantIds = useCall(
|
||||
(state) => state.activeScreenShareParticipantIds,
|
||||
);
|
||||
|
|
@ -157,6 +160,11 @@ export default function View() {
|
|||
const focusedParticipant = getParticipantById(focusedParticipantId);
|
||||
const focusedParticipantHasActiveScreenShare =
|
||||
activeScreenShareParticipantIdSet.has(focusedParticipantId);
|
||||
const focusedTileType: "user" | "stream" =
|
||||
focusedParticipantType === "stream" &&
|
||||
focusedParticipantHasActiveScreenShare
|
||||
? "stream"
|
||||
: "user";
|
||||
const isImmersiveFocusedView = callIsFullscreen && usersInFocusedViewHidden;
|
||||
|
||||
return (
|
||||
|
|
@ -179,7 +187,7 @@ export default function View() {
|
|||
<Base
|
||||
fill={isImmersiveFocusedView}
|
||||
flush={isImmersiveFocusedView || isFocusedTileFlush}
|
||||
type={focusedParticipantHasActiveScreenShare ? "stream" : "user"}
|
||||
type={focusedTileType}
|
||||
participant={focusedParticipant}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
- Speaking indicator
|
||||
- Overlay for stream modals
|
||||
- User modals
|
||||
- Bg based on avatar
|
||||
|
|
@ -11,3 +10,5 @@
|
|||
- Disconnect
|
||||
- Desktop-App screenshares
|
||||
- Context menus
|
||||
- Popout Window
|
||||
- If micGated=true & isSpeaking=false for 5 seconds show banner with mic detection
|
||||
|
|
|
|||
|
|
@ -97,6 +97,8 @@ export default function InputComponent({
|
|||
>
|
||||
<CardHeader className="relative p-0 flex flex-col">
|
||||
<Input
|
||||
paddingY="13px"
|
||||
paddingX="13px"
|
||||
placeholder="Send a message..."
|
||||
value={value}
|
||||
setValue={setValue}
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ import {
|
|||
indentWithTab,
|
||||
} from "@codemirror/commands";
|
||||
import { useEffect, useRef } from "react";
|
||||
import type { CSSProperties } from "react";
|
||||
|
||||
import { collectInlineRanges, ensureMarkdownStyles } from "./markdown";
|
||||
|
||||
|
|
@ -33,8 +34,36 @@ export type InputProps = {
|
|||
setValue: (value: string) => void;
|
||||
onSubmit?: () => void;
|
||||
invertEnterBehavior?: boolean;
|
||||
styled?: boolean;
|
||||
fontSize?: CSSProperties["fontSize"];
|
||||
paddingX?: CSSProperties["padding"];
|
||||
paddingY?: CSSProperties["padding"];
|
||||
className?: string;
|
||||
};
|
||||
|
||||
type InputStyle = CSSProperties & {
|
||||
"--tm-md-content-padding"?: string;
|
||||
};
|
||||
|
||||
function toCssLength(value: CSSProperties["padding"]): string | undefined {
|
||||
if (value === undefined) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return typeof value === "number" ? `${value}px` : value;
|
||||
}
|
||||
|
||||
function toCssPadding(
|
||||
vertical: CSSProperties["padding"],
|
||||
horizontal: CSSProperties["padding"],
|
||||
styled: boolean,
|
||||
): string {
|
||||
const defaultVertical = styled ? "0.25rem" : "0";
|
||||
const defaultHorizontal = styled ? "0.625rem" : "0";
|
||||
|
||||
return `${toCssLength(vertical) ?? defaultVertical} ${toCssLength(horizontal) ?? defaultHorizontal}`;
|
||||
}
|
||||
|
||||
type TokenRange = {
|
||||
from: number;
|
||||
to: number;
|
||||
|
|
@ -80,6 +109,10 @@ const markdownDecorations = ViewPlugin.fromClass(
|
|||
export default function Input(props: InputProps) {
|
||||
ensureMarkdownStyles();
|
||||
|
||||
const shellClassName = props.styled
|
||||
? "min-h-8 w-full min-w-0 rounded-lg border border-input bg-transparent text-base transition-colors outline-none placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
|
||||
: "";
|
||||
|
||||
const elementRef = useRef<HTMLDivElement | null>(null);
|
||||
const viewRef = useRef<EditorView | undefined>(undefined);
|
||||
const ignoreSyncRef = useRef(false);
|
||||
|
|
@ -143,7 +176,22 @@ export default function Input(props: InputProps) {
|
|||
});
|
||||
}, [props.value]);
|
||||
|
||||
return <div ref={elementRef} className="tm-md-root w-full" />;
|
||||
return (
|
||||
<div
|
||||
ref={elementRef}
|
||||
className={`tm-md-root ${shellClassName} ${props.className ?? ""}`}
|
||||
style={
|
||||
{
|
||||
fontSize: props.fontSize ?? "1rem",
|
||||
"--tm-md-content-padding": toCssPadding(
|
||||
props.paddingY,
|
||||
props.paddingX,
|
||||
Boolean(props.styled),
|
||||
),
|
||||
} as InputStyle
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -204,7 +252,7 @@ function createEditorExtensions(
|
|||
}),
|
||||
EditorView.theme({
|
||||
"&": {
|
||||
fontSize: "1rem",
|
||||
fontSize: "inherit",
|
||||
},
|
||||
"&.cm-editor": {
|
||||
width: "100%",
|
||||
|
|
|
|||
|
|
@ -665,12 +665,12 @@ export const markdownStyles = `
|
|||
.tm-md-table th { background: hsl(var(--muted)); font-weight: 600; }
|
||||
.tm-md-hr { margin: 0.55rem 0; }
|
||||
|
||||
.cm-editor.tm-md-editor { border-radius: 0.65rem; background: hsl(var(--card)); caret-color: var(--foreground); }
|
||||
.cm-editor.tm-md-editor { border-radius: inherit; background: transparent; caret-color: var(--foreground); }
|
||||
.cm-editor.tm-md-editor.cm-focused { outline: none; box-shadow: none; }
|
||||
.cm-editor.tm-md-editor .cm-scroller { font-family: inherit; line-height: 1.55; max-height: 30vh; overflow-y: auto; overflow-x: hidden; }
|
||||
.cm-editor.tm-md-editor .cm-content { caret-color: var(--foreground); }
|
||||
.cm-editor.tm-md-editor .cm-content { padding: 0.7rem 0.85rem; min-height: 2.75rem; }
|
||||
.cm-editor.tm-md-editor .cm-line { padding: 0 1px; color: hsl(var(--foreground)); }
|
||||
.cm-editor.tm-md-editor .cm-content { padding: var(--tm-md-content-padding, 0.25rem 0.625rem); min-height: 2rem; }
|
||||
.cm-editor.tm-md-editor .cm-line { padding: 0; color: hsl(var(--foreground)); }
|
||||
.cm-editor.tm-md-editor .tm-md-hidden-token { color: transparent; opacity: 0; font-size: inherit; }
|
||||
.cm-editor.tm-md-editor .tm-md-code-line { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; background: hsl(var(--muted)); border-radius: 0.3rem; }
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -48,6 +48,31 @@ export type Communities = z.infer<
|
|||
export type Calls = z.infer<typeof ttp.challenge_response.response.shape.calls>;
|
||||
|
||||
// TTP
|
||||
const user = z.object({
|
||||
about: z.string().max(255).optional(),
|
||||
avatar: z.string().optional(),
|
||||
display: z.string().min(1).max(15),
|
||||
iota_id: z.number(),
|
||||
omikron_connections: z.array(z.number()),
|
||||
omikron_id: z.number().optional(),
|
||||
online_status: z.enum([
|
||||
"user_offline",
|
||||
"user_online",
|
||||
"user_dnd",
|
||||
"user_idle",
|
||||
"user_wc",
|
||||
"user_borked",
|
||||
"iota_offline",
|
||||
"iota_online",
|
||||
"iota_borked",
|
||||
]),
|
||||
public_key: z.base64(),
|
||||
status: z.string().max(15).optional(),
|
||||
sub_end: z.number(),
|
||||
sub_level: z.number(),
|
||||
user_id: z.number(),
|
||||
username: z.string().min(1).max(15),
|
||||
});
|
||||
export const ttp = {
|
||||
identification: {
|
||||
request: z.object({
|
||||
|
|
@ -92,31 +117,11 @@ export const ttp = {
|
|||
request: z.object({
|
||||
user_id: z.number(),
|
||||
}),
|
||||
response: z.object({
|
||||
about: z.string().max(255).optional(),
|
||||
avatar: z.string().optional(),
|
||||
display: z.string().max(15),
|
||||
iota_id: z.number(),
|
||||
omikron_connections: z.array(z.number()),
|
||||
omikron_id: z.number().optional(),
|
||||
online_status: z.enum([
|
||||
"user_offline",
|
||||
"user_online",
|
||||
"user_dnd",
|
||||
"user_idle",
|
||||
"user_wc",
|
||||
"user_borked",
|
||||
"iota_offline",
|
||||
"iota_online",
|
||||
"iota_borked",
|
||||
]),
|
||||
public_key: z.base64(),
|
||||
status: z.string().max(15).optional(),
|
||||
sub_end: z.number(),
|
||||
sub_level: z.number(),
|
||||
user_id: z.number(),
|
||||
username: z.string().max(15),
|
||||
}),
|
||||
response: user,
|
||||
},
|
||||
change_user_data: {
|
||||
request: user.partial(),
|
||||
response: z.object({}),
|
||||
},
|
||||
ping: {
|
||||
request: z.object({
|
||||
|
|
@ -245,6 +250,8 @@ export interface Storage extends SettingsStorageDefaults {
|
|||
cached_contacts: Contacts;
|
||||
cached_communities: Communities;
|
||||
ttp_url: string;
|
||||
call_mute_range_start: number;
|
||||
call_mute_range_end: number;
|
||||
}
|
||||
|
||||
export const storageDefaults: Storage = {
|
||||
|
|
@ -278,4 +285,31 @@ export const storageDefaults: Storage = {
|
|||
cached_contacts: [],
|
||||
cached_communities: [],
|
||||
ttp_url: "https://tensamin.net:959",
|
||||
call_mute_range_start: -55,
|
||||
call_mute_range_end: -45,
|
||||
};
|
||||
|
||||
// User Status
|
||||
export function getStatusColor(
|
||||
status: z.infer<typeof ttp.get_user_data.response.shape.online_status>,
|
||||
) {
|
||||
switch (status) {
|
||||
case "user_online":
|
||||
return "#22c55e";
|
||||
case "iota_online":
|
||||
return "#22c55e";
|
||||
case "user_dnd":
|
||||
return "#ef4444";
|
||||
case "user_idle":
|
||||
return "#f59e0b";
|
||||
case "user_wc":
|
||||
return "#3b82f6";
|
||||
case "user_borked":
|
||||
case "iota_borked":
|
||||
return "#6b7280";
|
||||
case "user_offline":
|
||||
case "iota_offline":
|
||||
default:
|
||||
return "#9ca3af";
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ export default function UserProvider(props: { children: React.ReactNode }) {
|
|||
const user = {
|
||||
...userData.data,
|
||||
avatar: userData.data.avatar
|
||||
? `data:image/png;base64,${userData.data.avatar}`
|
||||
? `data:image/webp;base64,${atob(userData.data.avatar)}`
|
||||
: undefined,
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue