108 lines
2.9 KiB
TypeScript
108 lines
2.9 KiB
TypeScript
import { useState } from "react";
|
|
import { Button, Popover, PopoverContent, PopoverTrigger } from "@tensamin/ui";
|
|
import { MonitorDot, ScreenShare } from "lucide-react";
|
|
import { toast } from "@tensamin/shared/log";
|
|
import { isTauri } from "@tauri-apps/api/core";
|
|
import { setScreenShareEnabled, useCall } from "../../store";
|
|
import ScreenShareDialog from "../screenshareDialog";
|
|
|
|
export default function ScreenshareButton({
|
|
className,
|
|
iconSize,
|
|
}: {
|
|
className?: string;
|
|
iconSize?: number;
|
|
}) {
|
|
const isScreensharing = useCall((state) => state.screenShareEnabled);
|
|
const [dialogOpen, setDialogOpen] = useState(false);
|
|
const [menuOpen, setMenuOpen] = useState(false);
|
|
|
|
async function startWebShare() {
|
|
try {
|
|
await setScreenShareEnabled(true, {
|
|
audio: true,
|
|
systemAudio: "include",
|
|
surfaceSwitching: "include",
|
|
video: true,
|
|
});
|
|
} catch (error) {
|
|
console.error("Failed to start web screen share", error);
|
|
toast(
|
|
"error",
|
|
error instanceof Error
|
|
? error.message
|
|
: "Failed to start screen sharing.",
|
|
);
|
|
}
|
|
}
|
|
|
|
async function stopShare() {
|
|
try {
|
|
await setScreenShareEnabled(false);
|
|
} catch (error) {
|
|
console.error("Failed to stop screen share", error);
|
|
toast("error", "Failed to stop screen sharing.");
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Popover onOpenChange={setMenuOpen} open={menuOpen}>
|
|
<PopoverTrigger
|
|
render={
|
|
<Button
|
|
variant={isScreensharing ? "subtleDefault" : "default"}
|
|
className={className}
|
|
>
|
|
{isScreensharing ? (
|
|
<MonitorDot
|
|
style={{ scale: (iconSize ? iconSize + 100 : 100) + "%" }}
|
|
/>
|
|
) : (
|
|
<ScreenShare
|
|
style={{ scale: (iconSize ? iconSize + 100 : 100) + "%" }}
|
|
/>
|
|
)}
|
|
</Button>
|
|
}
|
|
/>
|
|
<PopoverContent className="flex w-40 flex-col gap-2">
|
|
<Button
|
|
disabled={isScreensharing}
|
|
onClick={() => {
|
|
setMenuOpen(false);
|
|
|
|
if (isTauri()) {
|
|
setDialogOpen(true);
|
|
return;
|
|
}
|
|
|
|
void startWebShare();
|
|
}}
|
|
>
|
|
Start screenshare
|
|
</Button>
|
|
<Button
|
|
variant="destructive"
|
|
disabled={!isScreensharing}
|
|
onClick={() => {
|
|
setMenuOpen(false);
|
|
void stopShare();
|
|
}}
|
|
>
|
|
Stop screenshare
|
|
</Button>
|
|
<Button variant="outline">Change quality</Button>
|
|
</PopoverContent>
|
|
</Popover>
|
|
|
|
{isTauri() && (
|
|
<ScreenShareDialog
|
|
open={dialogOpen}
|
|
onOpenChange={setDialogOpen}
|
|
isScreensharing={isScreensharing}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|