Infer default controls from permissions (#13)

Author: lukasIO

app/page.tsx

@@ -6,7 +6,6 @@ import { RoomAudioRenderer, RoomContext, StartAudio } from '@livekit/components-
 import { toastAlert } from '@/components/alert-toast';
 import SessionView from '@/components/session-view';
 import { Toaster } from '@/components/ui/sonner';
-import { toastAlert } from '@/components/warning-toast';
 import { Welcome } from '@/components/welcome';
 import useConnectionDetails from '@/hooks/useConnectionDetails';
 

components/livekit/agent-control-bar/hooks/use-agent-control-bar.ts

@@ -6,6 +6,7 @@ import {
   usePersistentUserChoices,
   useRoomContext,
 } from '@livekit/components-react';
+import { usePublishPermissions } from './use-publish-permissions';
 
 export interface UseAgentControlBarProps {
   controls?: {
@@ -26,14 +27,10 @@ export function useAgentControlBar({
 }: UseAgentControlBarProps) {
   const visibleControls = {
     leave: true,
-    microphone: true,
-    screenShare: true,
-    chat: true,
-    camera: true,
     ...controls,
   };
-  const localPermissions = useLocalParticipantPermissions();
   const { microphoneTrack, localParticipant } = useLocalParticipant();
+  const publishPermissions = usePublishPermissions();
   const room = useRoomContext();
 
   const micTrackRef = React.useMemo(() => {
@@ -44,11 +41,10 @@ export function useAgentControlBar({
     };
   }, [localParticipant, microphoneTrack]);
 
-  if (!localPermissions) {
-    visibleControls.microphone = false;
-  } else {
-    visibleControls.microphone ??= localPermissions.canPublish;
-  }
+  visibleControls.microphone ??= publishPermissions.microphone;
+  visibleControls.screenShare ??= publishPermissions.screenShare;
+  visibleControls.camera ??= publishPermissions.camera;
+  visibleControls.chat ??= publishPermissions.data;
 
   const { saveAudioInputEnabled, saveAudioInputDeviceId } = usePersistentUserChoices({
     preventSave: !saveUserChoices,

components/livekit/agent-control-bar/hooks/use-publish-permissions.ts

@@ -0,0 +1,42 @@
+import { Track } from 'livekit-client';
+import { useLocalParticipantPermissions } from '@livekit/components-react';
+
+const trackSourceToProtocol = (source: Track.Source) => {
+  // NOTE: this mapping avoids importing the protocol package as that leads to a significant bundle size increase
+  switch (source) {
+    case Track.Source.Camera:
+      return 1;
+    case Track.Source.Microphone:
+      return 2;
+    case Track.Source.ScreenShare:
+      return 3;
+    default:
+      return 0;
+  }
+};
+
+export interface PublishPermissions {
+  camera: boolean;
+  microphone: boolean;
+  screenShare: boolean;
+  data: boolean;
+}
+
+export function usePublishPermissions(): PublishPermissions {
+  const localPermissions = useLocalParticipantPermissions();
+
+  const canPublishSource = (source: Track.Source) => {
+    return (
+      !!localPermissions?.canPublish &&
+      (localPermissions.canPublishSources.length === 0 ||
+        localPermissions.canPublishSources.includes(trackSourceToProtocol(source)))
+    );
+  };
+
+  return {
+    camera: canPublishSource(Track.Source.Camera),
+    microphone: canPublishSource(Track.Source.Microphone),
+    screenShare: canPublishSource(Track.Source.ScreenShare),
+    data: localPermissions?.canPublishData ?? false,
+  };
+}