28091d732a
- Updated ActionsSidebarWrapper to accept a ref for improved positioning. - Enhanced SessionUsersPanel with new props for participant management, including mute and disable video functionalities. - Added vertical positioning option to ActionsPopover for better alignment. - Modified QRCodePopup and SharePopup to include a second argument in setPopup for type differentiation. - Refactored ControlButton and Tooltip components for improved accessibility and styling. - Updated UserCamera to integrate ActionsPopover for participant controls, enhancing user interaction. - Improved PopoverWrapper to handle dynamic positioning based on parent element. - Adjusted UserDevicesControls for better layout consistency and responsiveness. - Enhanced popup management in the popupStore to track popup types.
55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
import clsx from "clsx";
|
|
import Warning from "../indicators/Warning";
|
|
import Tooltip from "./Tooltip";
|
|
|
|
interface ControlButtonProps
|
|
extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
size: "small" | "large";
|
|
icon: React.ReactNode;
|
|
}
|
|
|
|
function ControlButton({
|
|
size,
|
|
icon,
|
|
className,
|
|
disabled,
|
|
onClick,
|
|
...props
|
|
}: ControlButtonProps) {
|
|
return (
|
|
<button
|
|
onClick={onClick}
|
|
disabled={disabled}
|
|
{...props}
|
|
className={clsx(
|
|
"backdrop-blur-[10px]a relative rounded-full transition-colors cursor-pointer outline-none disabled:!cursor-default",
|
|
size === "large"
|
|
? "2xl:p-[0.833vw] p-3 bg-[#FFFFFF]/15 hover:bg-[#FFFFFF]/25"
|
|
: "2xl:p-[0.417vw] p-[6px] bg-[#141414]/15 hover:bg-[#141414]/25",
|
|
className
|
|
)}
|
|
>
|
|
<div
|
|
className={clsx(
|
|
"text-white",
|
|
size === "large"
|
|
? "2xl:size-[1.111vw] size-4"
|
|
: "2xl:size-[0.833vw] size-3"
|
|
)}
|
|
>
|
|
{icon}
|
|
</div>
|
|
{disabled && size === "large" && (
|
|
<Tooltip
|
|
label="Нет доступа"
|
|
className="absolute 2xl:-top-[0.139vw] 2xl:-right-[0.139vw] -top-0.5 -right-0.5"
|
|
>
|
|
<Warning type="critical" className="text-white" />
|
|
</Tooltip>
|
|
)}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
export default ControlButton;
|