Skip to content

Connection status for store-azure-web-pubsub #29

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Mar 11, 2025
Merged

Connection status for store-azure-web-pubsub #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1df63af
chore: initial commit
jesusmpc Mar 11, 2025
ef4f333
chore: improvement on connection status
jesusmpc Mar 11, 2025
bf92eeb
chore: update dependencies
jesusmpc Mar 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 32 additions & 11 deletions code/components/room-components/connection-status.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,20 +9,41 @@ type ConnectionStatusProps = {
weaveConnectionStatus: string;
};

export const ConnectionStatus = ({ weaveConnectionStatus }: Readonly<ConnectionStatusProps>) => {
export const ConnectionStatus = ({
weaveConnectionStatus,
}: Readonly<ConnectionStatusProps>) => {
console.log(weaveConnectionStatus);

return (
<div className="flex gap-[1px] bg-light-border-3 rounded-full">
<div className="flex">
<div
className={cn("bg-light-background-1 px-2 py-2 flex justify-center items-center rounded-full", {
["bg-mint-200 text-light-content-1"]: weaveConnectionStatus === WEAVE_STORE_WEBSOCKETS_CONNECTION_STATUS.CONNECTED,
["bg-water-200 text-light-content-1"]: weaveConnectionStatus === WEAVE_STORE_WEBSOCKETS_CONNECTION_STATUS.CONNECTING,
["bg-cherry-200 text-light-content-1"]:
weaveConnectionStatus === WEAVE_STORE_WEBSOCKETS_CONNECTION_STATUS.DISCONNECTED,
})}
className={cn(
"bg-light-background-1 p-2 flex justify-center items-center rounded-full",
{
["bg-emerald-200 text-black"]:
weaveConnectionStatus ===
WEAVE_STORE_WEBSOCKETS_CONNECTION_STATUS.CONNECTED,
["bg-sky-300 text-white"]:
weaveConnectionStatus ===
WEAVE_STORE_WEBSOCKETS_CONNECTION_STATUS.CONNECTING,
["bg-rose-300 text-white"]:
weaveConnectionStatus ===
WEAVE_STORE_WEBSOCKETS_CONNECTION_STATUS.DISCONNECTED,
}
)}
>
{weaveConnectionStatus === WEAVE_STORE_WEBSOCKETS_CONNECTION_STATUS.CONNECTED && <Cloud size={16} />}
{weaveConnectionStatus === WEAVE_STORE_WEBSOCKETS_CONNECTION_STATUS.CONNECTING && <CloudCog size={16} />}
{weaveConnectionStatus === WEAVE_STORE_WEBSOCKETS_CONNECTION_STATUS.DISCONNECTED && <CloudAlert size={16} />}
{weaveConnectionStatus ===
WEAVE_STORE_WEBSOCKETS_CONNECTION_STATUS.CONNECTED && (
<Cloud size={20} />
)}
{weaveConnectionStatus ===
WEAVE_STORE_WEBSOCKETS_CONNECTION_STATUS.CONNECTING && (
<CloudCog size={20} />
)}
{weaveConnectionStatus ===
WEAVE_STORE_WEBSOCKETS_CONNECTION_STATUS.DISCONNECTED && (
<CloudAlert size={20} />
)}
</div>
</div>
);
Expand Down
46 changes: 33 additions & 13 deletions code/components/room-components/overlay/room-information-overlay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
"use client";

import React from "react";
import { cn } from "@/lib/utils";
import { useRouter } from "next/navigation";
import { useWeave } from "@inditextech/weavejs-react";
import { useCollaborationRoom } from "@/store/store";
Expand All @@ -13,7 +14,13 @@ import {
} from "@/components/ui/dropdown-menu";

import { Logo } from "@/components/utils/logo";
import { Image as ImageIcon, FileText, Ellipsis, LogOut } from "lucide-react";
import {
Image as ImageIcon,
FileText,
LogOut,
ChevronDown,
ChevronUp,
} from "lucide-react";
import { WeaveExportStageActionParams } from "@inditextech/weavejs-sdk";
import { ConnectionStatus } from "../connection-status";

Expand All @@ -25,6 +32,8 @@ export function RoomInformationOverlay() {

const room = useCollaborationRoom((state) => state.room);

const [menuOpen, setMenuOpen] = React.useState(false);

const handleExportToImage = React.useCallback(() => {
if (instance) {
instance.triggerAction<WeaveExportStageActionParams>("exportStageTool", {
Expand Down Expand Up @@ -53,22 +62,31 @@ export function RoomInformationOverlay() {

return (
<div className="absolute top-2 left-2 flex gap-1 justify-center items-center">
<div className="p-1 pl-3 bg-white border border-zinc-200 shadow-xs flex justify-start items-center gap-2">
<div className="p-2 px-3 bg-white border border-zinc-200 shadow-xs flex justify-start items-center gap-2">
<Logo kind="small" />
<div className="w-[1px] h-4 mx-2 bg-zinc-200"></div>
<ConnectionStatus weaveConnectionStatus={weaveConnectionStatus} />
<div className="flex justify-start items-center font-noto-sans-mono text-foreground !normal-case min-h-[32px] pr-2">
{room}
</div>
<DropdownMenu>
<DropdownMenuTrigger className="rounded-none cursor-pointer p-2 hover:bg-zinc-200 focus:outline-none">
<Ellipsis className="rounded-none" />
<div className="w-[1px] h-5 mx-1 bg-zinc-200"></div>
<DropdownMenu onOpenChange={(open) => setMenuOpen(open)}>
<DropdownMenuTrigger
className={cn(
"rounded-none cursor-pointer p-2 px-3 hover:bg-accent focus:outline-none",
{
["bg-accent"]: menuOpen,
["bg-white"]: !menuOpen,
}
)}
>
<div className="flex justify-start items-center gap-2 font-noto-sans-mono text-foreground !normal-case min-h-[32px]">
<div className="font-noto-sans text-xl font-extralight">
{room}
</div>
{menuOpen ? <ChevronUp /> : <ChevronDown />}
</div>
</DropdownMenuTrigger>
<DropdownMenuContent
align="start"
side="right"
alignOffset={-4}
sideOffset={8}
side="bottom"
alignOffset={0}
sideOffset={4}
className="font-noto-sans-mono rounded-none"
>
<DropdownMenuItem
Expand All @@ -93,6 +111,8 @@ export function RoomInformationOverlay() {
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<div className="w-[1px] h-5 mx-1 bg-zinc-200"></div>
<ConnectionStatus weaveConnectionStatus={weaveConnectionStatus} />
</div>
</div>
);
Expand Down
4 changes: 2 additions & 2 deletions code/components/room-components/toolbar/toolbar-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,9 @@ export function ToolbarButton({
<TooltipTrigger asChild>
<button
className={cn(
"pointer-events-auto cursor-pointer hover:bg-zinc-200 px-2 py-2 flex justify-center items-center",
"pointer-events-auto cursor-pointer hover:bg-accent px-2 py-2 flex justify-center items-center",
{
["bg-zinc-200"]: active,
["bg-accent"]: active,
["pointer-events-none cursor-default opacity-50"]: disabled,
}
)}
Expand Down
21 changes: 14 additions & 7 deletions code/components/utils/logo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,24 +4,31 @@ import logoSrc from "@/assets/images/logo.png";
import { cn } from "@/lib/utils";

type LogoProps = {
kind?: "large" | "small",
variant?: "no-text" | "text",
kind?: "large" | "small";
variant?: "no-text" | "text";
};

export function Logo({ kind = "large", variant = "text" }: Readonly<LogoProps>) {
export function Logo({
kind = "large",
variant = "text",
}: Readonly<LogoProps>) {
return (
<div className="p-0 bg-transparent flex justify-start items-center gap-2">
<Image
src={logoSrc}
width={kind === "large" ? 64 : 24}
height={kind === "large" ? 64 : 24}
width={kind === "large" ? 64 : 32}
height={kind === "large" ? 64 : 32}
className={cn(`object-cover`, {
["w-11 h-11"]: kind === "large",
["w-6 h-6"]: kind === "small",
["w-8 h-8"]: kind === "small",
})}
alt="Weave.js logo"
/>
{ variant === "text" && <div className="font-noto-sans-mono text-muted-foreground !normal-case">Weave.js</div>}
{variant === "text" && (
<div className="font-noto-sans-mono text-muted-foreground !normal-case">
Weave.js
</div>
)}
</div>
);
}
Loading