fix(web): currentConf minimized card controller

api/lib/telescope/mutations/confs.ex

@@ -77,7 +77,7 @@ defmodule Telescope.Mutations.Confs do
 
     if(
       length(conf.people_preview_list) < 8 or
-        not is_nil(Enum.find(conf.people_preview_list, &(&1.id === user_id)))
+        is_nil(Enum.find(conf.people_preview_list, &(&1.id === user_id)))
     ) do
       list =
         [

apps/web/src/app/c/[slug]/page.tsx

@@ -1,10 +1,12 @@
+import { MainLayout } from "@spek/ui";
+import { Metadata, ResolvingMetadata } from "next";
+
 import { baseUrl } from "@/utils/constants";
 import { defaultQueryFn } from "@/utils/defaultQueryFn";
-import { Metadata, ResolvingMetadata } from "next";
 import { CommunityPageController } from "./controller";
-import { MainLayout } from "@spek/ui";
 import { LeftPanel } from "@/components/Panels";
 import { WaitForWsAndAuth } from "@/components/auth/WaitForWsAndAuth";
+import { RightBlock } from "@/components/RightBlock";
 
 type Props = {
   params: { slug: string };
@@ -47,7 +49,7 @@ export async function generateMetadata(
 export default async function CommunityPage({ params }: Props) {
   return (
     <WaitForWsAndAuth>
-      <MainLayout leftPanel={<LeftPanel />}>
+      <MainLayout leftPanel={<LeftPanel />} rightPanel={<RightBlock />}>
         <CommunityPageController slug={params.slug} />
       </MainLayout>
     </WaitForWsAndAuth>

apps/web/src/components/RightBlock.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { useCurrentConfIdStore } from "@/stores/useCurentConfIdStore";
+import React from "react";
+import { MinimizedRoomCardController } from "./room/MinimizedRoomCardController";
+
+export const RightBlock: React.FC = () => {
+  const { currentConfId } = useCurrentConfIdStore();
+
+  return (
+    <div>
+      {currentConfId ? (
+        <MinimizedRoomCardController confId={currentConfId} />
+      ) : null}
+    </div>
+  );
+};

apps/web/src/components/room/MinimizedRoomCard.tsx

@@ -0,0 +1,74 @@
+import { Button, Icon } from "@spek/ui";
+
+interface MinimizedRoomCardProps {
+  onFullScreenClick: () => void;
+  leaveLoading?: boolean;
+  room: {
+    name: string;
+    descriptioin: string;
+    me: {
+      isSpeaker: boolean;
+      isMuted: boolean;
+      isDeafened: boolean;
+      switchMuted: () => void;
+      switchDeafened: () => void;
+      leave: () => void;
+    };
+  };
+}
+
+export const MinimizedRoomCard: React.FC<MinimizedRoomCardProps> = ({
+  onFullScreenClick,
+  room,
+  leaveLoading,
+}) => {
+  return (
+    <div
+      className="bg-primary-900 border border-accent rounded-lg p-4 gap-4 grid max-w-md w-full"
+      data-testid="minimized-room-card"
+    >
+      <div className="gap-1 grid">
+        <h4 className="text-primary-100 break-all overflow-hidden">
+          {room.name}
+        </h4>
+        <p className="text-primary-300 overflow-ellipsis overflow-hidden w-auto">
+          {room.descriptioin}
+        </p>
+      </div>
+      <div className="flex  flex-row">
+        <div className="grid grid-cols-3 gap-2">
+          <div
+            onClick={room.me.switchMuted}
+            className={room.me.isMuted ? "cursor-pointer" : ""}
+          >
+            {room.me.isMuted ? <Icon name="mic-off" /> : <Icon name="mic" />}
+          </div>
+
+          <div
+            onClick={room.me.switchDeafened}
+            className={room.me.isDeafened ? "cursor-pointer" : ""}
+          >
+            {room.me.isDeafened ? (
+              <Icon name="volume-x" />
+            ) : (
+              <Icon name="volume-2" />
+            )}
+          </div>
+
+          <div onClick={onFullScreenClick} className="cursor-pointer">
+            <Icon name="expand" />
+          </div>
+        </div>
+        <Button
+          transition
+          loading={leaveLoading}
+          className="flex-grow ml-4"
+          onClick={room.me.leave}
+          color="destructive"
+        >
+          Leave
+        </Button>
+      </div>
+    </div>
+  );
+};

apps/web/src/components/room/MinimizedRoomCardController.tsx

@@ -0,0 +1,63 @@
+"use client";
+import { useRouter } from "next/navigation";
+
+import { useConn } from "@/hooks/useConn";
+import { MinimizedRoomCard } from "./MinimizedRoomCard";
+import { useMuteStore } from "@/stores/useMuteStore";
+import { useDeafStore } from "@/stores/useDeafStore";
+import { useSetMute } from "@/hooks/useSetMute";
+import { useSetDeafen } from "@/hooks/useSetDeafen";
+import { useLeaveConf } from "@/hooks/useLeaveConf";
+import { useTypeSafeQuery } from "@/hooks/useTypeSafeQuery";
+
+interface Props {
+  confId: string;
+}
+
+export const MinimizedRoomCardController: React.FC<Props> = ({ confId }) => {
+  const { user } = useConn();
+  const { muted } = useMuteStore();
+  const { deafened } = useDeafStore();
+  const setMute = useSetMute();
+  const setDeafen = useSetDeafen();
+  const { isLoading, leaveConf } = useLeaveConf();
+  const { push } = useRouter();
+  const { isLoading: joinLoading, data } = useTypeSafeQuery(
+    ["joinConfAndGetInfo", confId],
+    {},
+    [confId]
+  );
+
+  if (joinLoading || !data) {
+    return null;
+  }
+
+  if ("error" in data) {
+    return <div>{data.error}</div>;
+  }
+
+  return (
+    <>
+      {user ? (
+        <div className="w-full">
+          <MinimizedRoomCard
+            onFullScreenClick={() => push(`/conf/${data.conf.id}`)}
+            leaveLoading={isLoading}
+            room={{
+              me: {
+                isDeafened: deafened,
+                isMuted: muted,
+                leave: () => leaveConf(),
+                isSpeaker: true,
+                switchDeafened: () => setDeafen(!deafened),
+                switchMuted: () => setMute(!muted),
+              },
+              name: data?.conf.name,
+              descriptioin: data?.conf.description,
+            }}
+          />
+        </div>
+      ) : null}
+    </>
+  );
+};

apps/web/src/webrtc/components/AudioRender.tsx

@@ -77,7 +77,7 @@ export const AudioRender: React.FC = () => {
                   setAudioRef(k, a);
                   audioRefs.current.push([k, a]);
                   a.srcObject = new MediaStream([consumer.track]);
-                  //   prevent modal from showing up more than once in a single render cycle
+                  // prevent modal from showing up more than once in a single render cycle
                   const notAllowedErrorContent =
                     notAllowedErrorCountRef.current;
                   a.play().catch((err) => {