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

(fix): recharts warnings
All checks were successful
/ deploy (push) Successful in 14m44s
Details

Browse source 
(fix): fullscreen popovers not showing
(qol): update todo
This commit is contained in:
Alois 2026-05-09 15:39:19 +02:00
commit bd1622d63a
9 changed files with 87 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

14
packages/call/src/components/buttons/invite.tsx
View file

@ -1,7 +1,8 @@
import { useEffect, useState } from "react";
import { Button, Popover, PopoverContent, PopoverTrigger } from "@tensamin/ui";
import Wrapper from "@tensamin/user/wrapper";
import { Mail } from "lucide-react";
import { sendCallInvite } from "../../store";
import { sendCallInvite, useCall } from "../../store";
import { log, toast } from "@tensamin/shared/log";
import { useSession } from "@tensamin/storage/session";
@ -13,6 +14,12 @@ export default function InviteButton({
iconSize?: number;
}) {
const { contacts } = useSession();
const screenRef = useCall((state) => state.screenRef);
const [portalContainer, setPortalContainer] = useState<HTMLElement>();
useEffect(() => {
setPortalContainer(screenRef?.current ?? undefined);
}, [screenRef]);
return (
<Popover>
@ -23,7 +30,10 @@ export default function InviteButton({
</Button>
}
/>
<PopoverContent className="flex w-40 flex-col gap-0.5 p-1!">
<PopoverContent
className="flex w-40 flex-col gap-0.5 p-1!"
portalProps={{ container: portalContainer }}
>
{contacts.map((contact) => (
<Wrapper
key={contact.user_id}

14
packages/call/src/components/buttons/screenshare.tsx
View file

@ -1,4 +1,4 @@
import { useState } from "react";
import { useEffect, useState } from "react";
import { Button, Popover, PopoverContent, PopoverTrigger } from "@tensamin/ui";
import { MonitorDot, ScreenShare } from "lucide-react";
import { toast } from "@tensamin/shared/log";
@ -14,9 +14,15 @@ export default function ScreenshareButton({
iconSize?: number;
}) {
const isScreensharing = useCall((state) => state.screenShareEnabled);
const screenRef = useCall((state) => state.screenRef);
const [portalContainer, setPortalContainer] = useState<HTMLElement>();
const [dialogOpen, setDialogOpen] = useState(false);
const [menuOpen, setMenuOpen] = useState(false);
useEffect(() => {
setPortalContainer(screenRef?.current ?? undefined);
}, [screenRef]);
async function startWebShare() {
try {
await setScreenShareEnabled(true, {
@ -66,7 +72,10 @@ export default function ScreenshareButton({
</Button>
}
/>
<PopoverContent className="flex w-40 flex-col gap-2">
<PopoverContent
className="flex w-40 flex-col gap-2"
portalProps={{ container: portalContainer }}
>
<Button
disabled={isScreensharing}
onClick={() => {
@ -101,6 +110,7 @@ export default function ScreenshareButton({
open={dialogOpen}
onOpenChange={setDialogOpen}
isScreensharing={isScreensharing}
portalContainer={portalContainer}
/>
)}
</>

7
packages/call/src/components/screenshareDialog.tsx
View file

@ -60,10 +60,12 @@ export default function ScreenShareDialog({
open,
onOpenChange,
isScreensharing,
portalContainer,
}: {
open: boolean;
onOpenChange: (open: boolean) => void;
isScreensharing: boolean;
portalContainer?: HTMLElement;
}) {
const {
getScreenShareCapabilities,
@ -191,7 +193,10 @@ export default function ScreenShareDialog({
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-3xl gap-0 overflow-hidden p-0">
<DialogContent
className="max-w-3xl gap-0 overflow-hidden p-0"
portalProps={{ container: portalContainer }}
>
<DialogHeader className="p-4 pb-3">
<DialogTitle>Share your screen</DialogTitle>
<DialogDescription>

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

@ -15,7 +15,7 @@ import MuteButton from "./buttons/mute";
import DeafButton from "./buttons/deaf";
import { Room, Track } from "livekit-client";
import { useEffect, useState } from "react";
import { ResponsiveContainer, AreaChart, Area } from "recharts";
import { AreaChart, Area } from "recharts";
import LeaveButton from "./buttons/leave";
export default function SidebarBox() {
@ -122,55 +122,44 @@ export function TinyPingGraph() {
}}
>
{data.length > 1 && (
<ResponsiveContainer
width="100%"
height="100%"
minWidth={0}
minHeight={24}
<AreaChart
width={96}
height={24}
data={data}
margin={{ top: 2, right: 0, bottom: 2, left: 0 }}
>
<AreaChart
data={data}
margin={{ top: 2, right: 0, bottom: 2, left: 0 }}
>
<defs>
<linearGradient
id="pingGradient"
x1="0"
y1="0"
x2="0"
y2="1"
>
<stop
offset="0%"
stopColor="currentColor"
stopOpacity={0.35}
/>
<stop
offset="70%"
stopColor="currentColor"
stopOpacity={0.08}
/>
<stop
offset="100%"
stopColor="currentColor"
stopOpacity={0}
/>
</linearGradient>
</defs>
<defs>
<linearGradient id="pingGradient" x1="0" y1="0" x2="0" y2="1">
<stop
offset="0%"
stopColor="currentColor"
stopOpacity={0.35}
/>
<stop
offset="70%"
stopColor="currentColor"
stopOpacity={0.08}
/>
<stop
offset="100%"
stopColor="currentColor"
stopOpacity={0}
/>
</linearGradient>
</defs>
<Area
type="monotone"
dataKey="ping"
stroke="currentColor"
strokeWidth={2}
fill="url(#pingGradient)"
fillOpacity={1}
dot={false}
activeDot={false}
isAnimationActive={false}
/>
</AreaChart>
</ResponsiveContainer>
<Area
type="monotone"
dataKey="ping"
stroke="currentColor"
strokeWidth={2}
fill="url(#pingGradient)"
fillOpacity={1}
dot={false}
activeDot={false}
isAnimationActive={false}
/>
</AreaChart>
)}
</div>
}