80 lines
3.3 KiB
TypeScript
80 lines
3.3 KiB
TypeScript
import { PhoneMissed, Signal } from "lucide-react";
|
|
import { useServerChannelsStore } from "~/stores/server-channels-store";
|
|
import { useServerListStore } from "~/stores/server-list-store";
|
|
import { useUsersStore } from "~/stores/users-store";
|
|
import { useVoiceStateStore } from "~/stores/voice-state-store";
|
|
import { ThemeToggle } from "../theme/theme-toggle";
|
|
import { Button } from "../ui/button";
|
|
import { Separator } from "../ui/separator";
|
|
import UserAvatar from "../user-avatar";
|
|
import { OnlineStatus } from "./online-status";
|
|
import { SettingsButton } from "./settings-button";
|
|
|
|
function VoiceStatus({
|
|
voiceState
|
|
}: { voiceState: { serverId: string; channelId: string } }) {
|
|
// const webrtcState = useWebRTCStore(state => state.status)
|
|
|
|
const leaveVoiceChannel = () => {
|
|
useVoiceStateStore.getState().leaveVoiceChannel()
|
|
}
|
|
|
|
const channel = useServerChannelsStore(state => state.channels[voiceState.serverId]?.[voiceState.channelId])
|
|
const server = useServerListStore(state => state.servers[voiceState.serverId])
|
|
|
|
return (
|
|
<div className="gap-1 flex justify-between items-center ">
|
|
<div className="flex items-center gap-2 text-green-500">
|
|
<Signal className="size-5" />
|
|
<div className="truncate max-w-60 text-sm">
|
|
{channel?.name || "Unknown channel"} / {server?.name}
|
|
</div>
|
|
</div>
|
|
|
|
<Button variant="secondary" size="none" onClick={leaveVoiceChannel}>
|
|
<PhoneMissed className="size-5 m-1.5" />
|
|
</Button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function UserStatus() {
|
|
const user = useUsersStore(state => state.getCurrentUser()!)
|
|
const voiceState = useVoiceStateStore(state => state.activeChannel)
|
|
|
|
return (
|
|
<div className="outline-1 outline-none border border-input p-2 h-full rounded-xl flex flex-col gap-2">
|
|
{voiceState && <>
|
|
<VoiceStatus voiceState={voiceState} />
|
|
<Separator />
|
|
</>
|
|
}
|
|
<div className="flex justify-between items-center gap-2">
|
|
<div className="grow flex flex-row gap-2">
|
|
<OnlineStatus status="online">
|
|
<UserAvatar user={user} className="size-10" />
|
|
</OnlineStatus>
|
|
|
|
<div className="flex flex-col text-sm justify-center">
|
|
<div className="truncate max-w-30">
|
|
{user?.displayName || user?.username || "Unknown user"}
|
|
</div>
|
|
<span className="text-muted-foreground text-xs">@{user?.username}</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="flex flex-row-reverse gap-2 items-center">
|
|
<SettingsButton />
|
|
<ThemeToggle />
|
|
{/* <Button variant="secondary" size="none">
|
|
<Headphones className="size-5 m-1.5" />
|
|
</Button> */}
|
|
{/* <Button variant="secondary" size="none">
|
|
<Mic className="size-5 m-1.5" />
|
|
</Button> */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |