(feat): add ability to hide users in focused call view

(feat): add small avatars with tooltips instead of usernames in the top bar in calls
(fix): a lot of layout issues
(qol): update todo

packages/call/src/components/actions.tsx

@@ -6,18 +6,22 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@tensamin/ui";
+import { useEffect, useState } from "react";
 import MuteButton from "./buttons/mute";
 import DeafButton from "./buttons/deaf";
 import ScreenshareButton from "./buttons/screenshare";
 import LeaveButton from "./buttons/leave";
 import {
   setCallIsPopout,
+  setUsersInFocusedViewHidden,
   stopWatchingFocusedStream,
   triggerCallLayoutCalculation,
   useCall,
 } from "../store";
 import InviteButton from "./buttons/invite";
 import {
+  ChevronDown,
+  ChevronUp,
   Maximize,
   Minimize,
   SquareArrowOutDownLeft,
@@ -37,9 +41,15 @@ export default function Actions() {
     focusedParticipantId != null &&
     watchedStreamParticipantIds.includes(focusedParticipantId);
 
+  // Fullscreen stuff
   const callIsPopout = useCall((state) => state.callIsPopout);
   const callIsFullscreen = useCall((state) => state.callIsFullscreen);
   const screenRef = useCall((state) => state.screenRef);
+  const [portalContainer, setPortalContainer] = useState<HTMLElement>();
+
+  useEffect(() => {
+    setPortalContainer(screenRef?.current ?? undefined);
+  }, [screenRef]);
 
   const toggleFullscreen = async () => {
     if (callIsFullscreen) {
@@ -51,18 +61,93 @@ export default function Actions() {
     triggerCallLayoutCalculation();
   };
 
+  // Hide users in focused view
+  const usersInFocusedViewHidden = useCall(
+    (state) => state.usersInFocusedViewHidden,
+  );
+
   return (
     <div className="w-full flex justify-between items-center">
-      <div className="w-30" />
+      <div className="w-30 flex justify-start">
+        {view === "focused" && (
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <Button
+                  onClick={() =>
+                    setUsersInFocusedViewHidden(!usersInFocusedViewHidden)
+                  }
+                  variant="link"
+                  className="w-11 h-11 p-0! ml-3 text-foreground"
+                >
+                  {usersInFocusedViewHidden ? (
+                    <ChevronUp className="size-6" />
+                  ) : (
+                    <ChevronDown className="size-6" />
+                  )}
+                </Button>
+              }
+            />
+            <TooltipContent portalProps={{ container: portalContainer }}>
+              Hide users
+            </TooltipContent>
+          </Tooltip>
+        )}
+      </div>
       <Card className="p-1.75">
         <CardContent className="p-0! flex gap-1.75">
-          <MuteButton className={sharedClasses} iconSize={sharedIconSize} />
-          <DeafButton className={sharedClasses} iconSize={sharedIconSize} />
-          <ScreenshareButton
-            className={sharedClasses}
-            iconSize={sharedIconSize}
-          />
-          <InviteButton className={sharedClasses} iconSize={sharedIconSize} />
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <MuteButton
+                  className={sharedClasses}
+                  iconSize={sharedIconSize}
+                />
+              }
+            />
+            <TooltipContent portalProps={{ container: portalContainer }}>
+              Mute
+            </TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <DeafButton
+                  className={sharedClasses}
+                  iconSize={sharedIconSize}
+                />
+              }
+            />
+            <TooltipContent portalProps={{ container: portalContainer }}>
+              Deafen
+            </TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <ScreenshareButton
+                  className={sharedClasses}
+                  iconSize={sharedIconSize}
+                />
+              }
+            />
+            <TooltipContent portalProps={{ container: portalContainer }}>
+              Screenshare
+            </TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <InviteButton
+                  className={sharedClasses}
+                  iconSize={sharedIconSize}
+                />
+              }
+            />
+            <TooltipContent portalProps={{ container: portalContainer }}>
+              Invite
+            </TooltipContent>
+          </Tooltip>
           {isWatchingFocusedStream ? (
             <Button
               className="h-10"
@@ -93,7 +178,9 @@ export default function Actions() {
               </Button>
             }
           />
-          <TooltipContent>Popout</TooltipContent>
+          <TooltipContent portalProps={{ container: portalContainer }}>
+            Popout
+          </TooltipContent>
         </Tooltip>
         <Tooltip>
           <TooltipTrigger
@@ -113,7 +200,9 @@ export default function Actions() {
               </Button>
             }
           />
-          <TooltipContent>Fullscreen</TooltipContent>
+          <TooltipContent portalProps={{ container: portalContainer }}>
+            Fullscreen
+          </TooltipContent>
         </Tooltip>
       </div>
     </div>

packages/call/src/components/modals/base.tsx

@@ -90,10 +90,12 @@ function Overlay({
 export default function Base({
   participant,
   type,
+  fill = false,
   flush = false,
 }: {
   participant: Participant | undefined;
   type: "user" | "stream";
+  fill?: boolean;
   flush?: boolean;
 }) {
   const { get } = useUser();
@@ -170,9 +172,9 @@ export default function Base({
         render={
           <div
             onClick={onClick}
-            className={`relative aspect-video w-full border-2 ${
-              flush ? "rounded-none border-x-0" : "rounded-md"
-            }`}
+            className={`relative w-full ${fill ? "h-full border-0" : "aspect-video border-2"} ${
+              flush || fill ? "rounded-none" : "rounded-md"
+            } ${flush && !fill ? "border-x-0" : ""}`}
           >
             <div className="z-20 absolute bottom-0 left-0 w-full h-full flex justify-start items-end p-2">
               <>
@@ -219,6 +221,7 @@ export default function Base({
               {type === "stream" &&
                 (showStream ? (
                   <VideoViewer
+                    fill={fill}
                     flush={flush}
                     participantId={participant.identity}
                     publication={screenSharePublication}

packages/call/src/components/sidebarBox.tsx

@@ -20,12 +20,18 @@ import LeaveButton from "./buttons/leave";
 
 export default function SidebarBox() {
   const state = useCall((store) => store.state);
+  const screenRef = useCall((store) => store.screenRef);
   const isMobile = useIsMobile();
+  const [portalContainer, setPortalContainer] = useState<HTMLElement>();
+
+  useEffect(() => {
+    setPortalContainer(screenRef?.current ?? undefined);
+  }, [screenRef]);
 
   return state === "closed" ? null : (
     <Card className="p-1.5 gap-2" hidden={isMobile}>
       <CardHeader className="p-0! pb-2! border-b-2">
-        <ConnectionBar />
+        <ConnectionBar portalContainer={portalContainer} />
       </CardHeader>
       <CardContent className="p-0! flex flex-col gap-1">
         <div className="flex justify-start gap-1">
@@ -39,7 +45,11 @@ export default function SidebarBox() {
   );
 }
 
-function ConnectionBar() {
+function ConnectionBar({
+  portalContainer,
+}: {
+  portalContainer?: HTMLElement;
+}) {
   const state = useCall((store) => store.state);
   const isEncrypted = useCall((store) => store.isEncrypted);
   const callId = useCall((store) => store.callId);
@@ -62,7 +72,7 @@ function ConnectionBar() {
             {state === "closed" && "Closed"}
             {state === "closing" && "Closing"}
 
-            <TinyPingGraph />
+            <TinyPingGraph portalContainer={portalContainer} />
 
             {isEncrypted ? (
               <Lock color="var(--primary-foreground-alt)" />
@@ -72,12 +82,18 @@ function ConnectionBar() {
           </Button>
         }
       />
-      <TooltipContent>Click to open call page</TooltipContent>
+      <TooltipContent portalProps={{ container: portalContainer }}>
+        Click to open call page
+      </TooltipContent>
     </Tooltip>
   );
 }
 
-export function TinyPingGraph() {
+export function TinyPingGraph({
+  portalContainer,
+}: {
+  portalContainer?: HTMLElement;
+}) {
   const room = useCall((store) => store.room);
 
   const [mapData, setMapData] = useState<Map<number, number>>(() => new Map());
@@ -164,7 +180,7 @@ export function TinyPingGraph() {
           </div>
         }
       />
-      <TooltipContent>
+      <TooltipContent portalProps={{ container: portalContainer }}>
         {data.length > 0 ? `${data.at(-1)?.ping} ms` : "Measuring ping..."}
       </TooltipContent>
     </Tooltip>

packages/call/src/components/top.tsx

@@ -1,11 +1,26 @@
 import { useUser, type User } from "@tensamin/user/context";
 import { useCall } from "../store";
 import { useEffect, useState } from "react";
+import { useStorage } from "@tensamin/storage/context";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@tensamin/ui";
 
 export default function TopBar() {
   const { get } = useUser();
+  const { load } = useStorage();
   const room = useCall((state) => state.room);
-  const view = useCall((state) => state.view);
+  const screenRef = useCall((state) => state.screenRef);
+  const [portalContainer, setPortalContainer] = useState<HTMLElement>();
+
+  useEffect(() => {
+    setPortalContainer(screenRef?.current ?? undefined);
+  }, [screenRef]);
 
   const userIds = Array.from(
     room.remoteParticipants.values(),
@@ -25,34 +40,58 @@ export default function TopBar() {
     const ids = userIdsKey === "" ? [] : userIdsKey.split(",").map(Number);
 
     void Promise.all(ids.map((id) => get(id)))
-      .then((users) => {
+      .then(async (users) => {
         if (!active) {
           return;
         }
 
-        setUsers(users);
+        const ownId = await load("user_id");
+        const ownUser = await get(ownId);
+
+        setUsers([ownUser, ...users]);
       })
-      .catch(() => {
+      .catch(async () => {
         if (!active) {
           return;
         }
 
-        setUsers([]);
+        const ownId = await load("user_id");
+        const ownUser = await get(ownId);
+
+        setUsers([ownUser]);
       });
 
     return () => {
       active = false;
     };
-  }, [get, userIdsKey]);
+  }, [get, userIdsKey, load]);
 
   return (
     <div className="w-full flex justify-between h-12">
-      <div className="flex gap-1">
+      <div className="flex gap-1 m-3 ml-7">
         {users.map((user) => (
-          <div key={user.user_id}>{user.display}</div>
+          <div key={user.user_id} className="-ml-4">
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <Avatar className="size-7">
+                    <AvatarImage />
+                    <AvatarFallback className="text-xs">
+                      {user.display.slice(0, 2).toUpperCase()}
+                    </AvatarFallback>
+                  </Avatar>
+                }
+              />
+              <TooltipContent
+                side="bottom"
+                portalProps={{ container: portalContainer }}
+              >
+                {user.display}
+              </TooltipContent>
+            </Tooltip>
+          </div>
         ))}
       </div>
-      {view}
     </div>
   );
 }

packages/call/src/components/videoViewer.tsx

@@ -6,11 +6,13 @@ import { Loader2 } from "lucide-react";
 
 export default function VideoViewer({
   className,
+  fill = false,
   flush = false,
   publication,
   participantId,
 }: {
   className?: string;
+  fill?: boolean;
   flush?: boolean;
   publication: TrackPublication;
   participantId: string;
@@ -28,7 +30,7 @@ export default function VideoViewer({
     <VideoTrack
       trackRef={trackRef}
       className={cn(
-        "w-full h-full aspect-video bg-black",
+        fill ? "w-full h-full bg-black" : "w-full h-full aspect-video bg-black",
         flush ? "rounded-none" : "rounded-md",
         className,
       )}