(feat): add admin indicator

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

@@ -1,21 +1,24 @@
-// show speaking ring
-
 import {
   ContextMenu,
   ContextMenuContent,
   ContextMenuItem,
   ContextMenuTrigger,
 } from "@tensamin/ui";
-import { focusParticipant, setCallView, useCall } from "../../store";
+import {
+  focusParticipant,
+  getParsedParticipantMetadata,
+  setCallView,
+  useCall,
+} from "../../store";
 import { Track, type Participant } from "livekit-client";
 import { useEffect, useState } from "react";
 import { useUser, type User } from "@tensamin/user/context";
 import VideoViewer from "../videoViewer";
-import { Loader2, MicOff, Monitor } from "lucide-react";
+import { Loader2, MicOff, Monitor, Shield } from "lucide-react";
 
 function TransparentButton({ children }: { children: React.ReactNode }) {
   return (
-    <div className="h-6 px-1.5 bg-black/80 rounded-sm flex items-center justify-center">
+    <div className="h-6 px-1.5 bg-black/40 backdrop-blur-xs border rounded-sm flex items-center justify-center">
       {children}
     </div>
   );
@@ -30,8 +33,12 @@ function Overlay({
   user: User;
   participant: Participant;
 }) {
+  const { isAdmin } = getParsedParticipantMetadata(user.user_id) || {
+    isAdmin: false,
+  };
+
   return (
-    <div className="w-full h-auto flex items-center gap-2">
+    <div className="w-full h-auto flex items-center gap-1">
       {type === "user" && (
         <>
           {!participant.isMicrophoneEnabled && (
@@ -39,6 +46,11 @@ function Overlay({
               <MicOff className="size-3.5" />
             </TransparentButton>
           )}
+          {isAdmin && (
+            <TransparentButton>
+              <Shield className="size-3.5" />
+            </TransparentButton>
+          )}
         </>
       )}
       {type === "stream" && (
@@ -130,9 +142,10 @@ export default function Base({
             }`}
           >
             <div className="z-20 absolute bottom-0 left-0 w-full h-full flex justify-start items-end p-2">
-              {view === "grid" && (
+              {view === "grid" ||
+              (view === "focused" && user.user_id !== focusedParticipantId) ? (
                 <Overlay type={type} user={user} participant={participant} />
-              )}
+              ) : null}
             </div>
             <div
               className={`z-10 bg-card absolute top-0 left-0 w-full h-full flex items-center justify-center ${

packages/call/src/store.tsx

@@ -70,6 +70,10 @@ type Runtime = {
   getUser: GetUserFn;
 };
 
+type ParticipantMetadata = {
+  isAdmin: boolean;
+};
+
 type CallStore = {
   state: CallState;
   view: CallView;
@@ -86,6 +90,7 @@ type CallStore = {
   watchedStreamParticipantIds: number[];
   pendingWatchedParticipantIds: number[];
   activeScreenShareParticipantIds: number[];
+  parsedParticipantMetadataById: Record<number, ParticipantMetadata>;
   isEncrypted: boolean;
   room: Room;
   keyProvider: ExternalE2EEKeyProvider;
@@ -181,6 +186,51 @@ function hasParticipant(participantId: number) {
   );
 }
 
+function parseParticipantMetadata(
+  metadata: string | undefined,
+): ParticipantMetadata | undefined {
+  if (!metadata) {
+    return undefined;
+  }
+
+  try {
+    return JSON.parse(metadata);
+  } catch {
+    return undefined;
+  }
+}
+
+function getParsedParticipantMetadataById(): Record<
+  number,
+  ParticipantMetadata
+> {
+  return Object.fromEntries(
+    getAllParticipants()
+      .map((participant) => {
+        const participantId = getParticipantId(participant.identity);
+
+        if (participantId == null) {
+          return null;
+        }
+
+        return [
+          participantId,
+          parseParticipantMetadata(participant.metadata),
+        ] as const;
+      })
+      .filter(
+        (entry): entry is readonly [number, ParticipantMetadata] =>
+          entry != null,
+      ),
+  );
+}
+
+function syncParsedParticipantMetadata() {
+  useCall.setState({
+    parsedParticipantMetadataById: getParsedParticipantMetadataById(),
+  });
+}
+
 function syncScreenShareParticipants() {
   const activeScreenShareParticipantIds = getActiveScreenShareParticipantIds();
   const state = useCall.getState();
@@ -231,6 +281,13 @@ export function syncParticipantState() {
   });
 
   syncScreenShareParticipants();
+  syncParsedParticipantMetadata();
+}
+
+export function getParsedParticipantMetadata(
+  participantId: number,
+): ParticipantMetadata | undefined {
+  return useCall.getState().parsedParticipantMetadataById[participantId];
 }
 
 // set state functions
@@ -468,6 +525,7 @@ export async function disconnect() {
     watchedStreamParticipantIds: [],
     pendingWatchedParticipantIds: [],
     activeScreenShareParticipantIds: [],
+    parsedParticipantMetadataById: {},
   });
 
   room.remoteParticipants.forEach((participant) => {
@@ -611,6 +669,7 @@ export function resetCallState() {
     watchedStreamParticipantIds: [],
     pendingWatchedParticipantIds: [],
     activeScreenShareParticipantIds: [],
+    parsedParticipantMetadataById: {},
   });
 
   syncParticipantState();
@@ -652,6 +711,7 @@ export const useCall = create<CallStore>(() => ({
   watchedStreamParticipantIds: [],
   pendingWatchedParticipantIds: [],
   activeScreenShareParticipantIds: [],
+  parsedParticipantMetadataById: {},
   isEncrypted:
     room.localParticipant.isE2EEEnabled && room.localParticipant.isEncrypted,
   room,