feat: co-hosts

frontend/components.d.ts

@@ -54,6 +54,9 @@ declare module "vue" {
 		LucideHand: typeof import("~icons/lucide/hand")["default"];
 		LucideHome: typeof import("~icons/lucide/home")["default"];
 		LucideLoader: typeof import("~icons/lucide/loader")["default"];
+		LucideMessageCircle: typeof import(
+			"~icons/lucide/message-circle",
+		)["default"];
 		LucideMessageSquare: typeof import(
 			"~icons/lucide/message-square",
 		)["default"];

frontend/src/components/FloatingControls.vue

@@ -316,15 +316,19 @@ const props = defineProps({
 	},
 });
 
-const { getMeetingDoc, isCurrentUserHost: isHost } = useMeetingDoc();
+const {
+	getMeetingDoc,
+	isCurrentUserHost: isHost,
+	isCurrentUserCohost: isCohost,
+} = useMeetingDoc();
 
 if (props.meetingId) {
 	getMeetingDoc(props.meetingId);
 }
 
 const { isPreview } = toRefs(props);
 
-const isCurrentUserHost = computed(() => isHost.value);
+const isCurrentUserHost = computed(() => isHost.value || isCohost.value);
 
 const emit = defineEmits([
 	"toggle-chat",

frontend/src/components/PeoplePanel.vue

@@ -58,6 +58,7 @@
 							@muteParticipant="handleMuteParticipant"
 							@kickParticipant="handleKickParticipant"
 							@lowerHand="handleLowerHand"
+							@promoteToCohost="handlePromoteToCohost"
 						/>
 					</div>
 
@@ -117,6 +118,7 @@ interface Props {
 	isMicOn: boolean;
 	isCameraOn: boolean;
 	creatorUserId: string;
+	coHosts: string[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -126,13 +128,15 @@ const props = withDefaults(defineProps<Props>(), {
 	isMicOn: false,
 	isCameraOn: false,
 	creatorUserId: "",
+	coHosts: () => [],
 });
 
 const emit = defineEmits<{
 	close: [];
 	muteParticipant: [participantId: string];
 	kickParticipant: [participantId: string, ban: boolean];
 	lowerHand: [participantId: string];
+	promoteToCohost: [participantId: string];
 	approveLobbyUser: [participantId: string];
 	approveAllLobbyUsers: [participantIds: string[]];
 	rejectLobbyUser: [participantId: string];
@@ -141,6 +145,13 @@ const emit = defineEmits<{
 const searchQuery = ref<string>("");
 
 const isCreator = computed(() => {
+	return (
+		props.currentUser.user_id === props.creatorUserId ||
+		props.coHosts.includes(props.currentUser.user_id || "")
+	);
+});
+
+const isHost = computed(() => {
 	return props.currentUser.user_id === props.creatorUserId;
 });
 
@@ -224,6 +235,7 @@ const allVisibleParticipants = computed(() => {
 			isCurrentUser: true,
 			isHost: isCreator.value,
 			canControlParticipant: false,
+			canPromoteToCohost: false,
 		});
 	}
 
@@ -232,8 +244,15 @@ const allVisibleParticipants = computed(() => {
 			user_id: participant.user_id,
 			participantData: participant,
 			isCurrentUser: false,
-			isHost: participant.user_id === props.creatorUserId,
-			canControlParticipant: isCreator.value,
+			isHost:
+				participant.user_id === props.creatorUserId ||
+				props.coHosts.includes(participant.user_id),
+			canControlParticipant:
+				isCreator.value && participant.user_id !== props.creatorUserId,
+			canPromoteToCohost:
+				isHost.value &&
+				!participant.is_guest &&
+				!props.coHosts.includes(participant.user_id),
 			is_guest: participant.is_guest || false,
 		});
 	}
@@ -268,6 +287,10 @@ const handleLowerHand = (participantId: string) => {
 	emit("lowerHand", participantId);
 };
 
+const handlePromoteToCohost = (participantId: string) => {
+	emit("promoteToCohost", participantId);
+};
+
 const handleApproveLobbyUser = (participantId: string) => {
 	emit("approveLobbyUser", participantId);
 };

frontend/src/components/PeopleParticipantTile.vue

@@ -111,18 +111,21 @@ interface Props {
 	isCurrentUser?: boolean;
 	isHost?: boolean;
 	canControlParticipant?: boolean;
+	canPromoteToCohost?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
 	isCurrentUser: false,
 	isHost: false,
 	canControlParticipant: false,
+	canPromoteToCohost: false,
 });
 
 const emit = defineEmits<{
 	muteParticipant: [participantId: string];
 	kickParticipant: [participantId: string, ban: boolean];
 	lowerHand: [participantId: string];
+	promoteToCohost: [participantId: string];
 }>();
 
 const { stream } = useAudioStream(props.participant.user_id);
@@ -157,6 +160,12 @@ const hostOptions = computed(() => {
 			condition: () => isHandRaised.value,
 			onClick: () => emit("lowerHand", props.participant.user_id),
 		},
+		{
+			icon: "user-plus",
+			label: "Promote to Co-host",
+			condition: () => props.canPromoteToCohost,
+			onClick: () => emit("promoteToCohost", props.participant.user_id),
+		},
 		{
 			icon: "user-x",
 			label: "Remove",

frontend/src/composables/useMeetingDoc.ts

@@ -8,6 +8,7 @@ interface MeetingDocument {
 	owner?: string;
 	title?: string;
 	name?: string;
+	co_hosts?: { user: string }[];
 }
 
 interface DocumentResource {
@@ -27,6 +28,8 @@ interface UseMeetingDocReturn {
 	isCurrentUserHost: ComputedRef<boolean>;
 	meetingType: ComputedRef<string>;
 	allowGuest: ComputedRef<boolean>;
+	meetingCoHosts: ComputedRef<string[]>;
+	isCurrentUserCohost: ComputedRef<boolean>;
 }
 
 const meetingDoc: Ref<DocumentResource | null> = ref(null);
@@ -74,6 +77,18 @@ export function useMeetingDoc(): UseMeetingDocReturn {
 		return Boolean(currentUserId && ownerId && currentUserId === ownerId);
 	});
 
+	const meetingCoHosts = computed((): string[] => {
+		const doc = meetingDoc.value?.doc;
+		if (!doc?.co_hosts) return [];
+		return doc.co_hosts.map((row: { user: string }) => row.user);
+	});
+
+	const isCurrentUserCohost = computed((): boolean => {
+		const currentUserId = session.user?.sessionUser;
+		const coHosts = meetingCoHosts.value;
+		return Boolean(currentUserId && coHosts && coHosts.includes(currentUserId));
+	});
+
 	const meetingType = computed((): string => {
 		return meetingDoc.value?.doc?.meeting_type || "open";
 	});
@@ -89,6 +104,8 @@ export function useMeetingDoc(): UseMeetingDocReturn {
 		meetingTitle,
 		meetingOwner,
 		isCurrentUserHost,
+		meetingCoHosts,
+		isCurrentUserCohost,
 		meetingType,
 		allowGuest,
 	};

frontend/src/composables/useMeetingLogic.js

@@ -1333,6 +1333,24 @@ export function useMeetingLogic(meetingState, meetingId, options = {}) {
 			}
 		});
 
+		socket.on("meeting_user_approved", (data) => {
+			if (data.meeting === meetingId) {
+				meetingState.lobbyUsers.value = (
+					meetingState.lobbyUsers.value || []
+				).filter((u) => u.userId !== data.user);
+				console.log(`User ${data.user} was approved by ${data.approved_by}`);
+			}
+		});
+
+		socket.on("meeting_user_rejected", (data) => {
+			if (data.meeting === meetingId) {
+				meetingState.lobbyUsers.value = (
+					meetingState.lobbyUsers.value || []
+				).filter((u) => u.userId !== data.user);
+				console.log(`User ${data.user} was rejected by ${data.rejected_by}`);
+			}
+		});
+
 		realtimeListenersSetup.value = true;
 	};
 

frontend/src/pages/Meeting.vue

@@ -92,10 +92,12 @@
 								:isMicOn="meetingState.isMicOn.value"
 								:isCameraOn="meetingState.isCameraOn.value"
 								:creatorUserId="creatorUserId"
+								:coHosts="meetingCoHosts"
 								@close="togglePeople"
 								@muteParticipant="handleMuteParticipant"
 								@kickParticipant="handleKickParticipant"
 								@lowerHand="handleLowerHand"
+								@promoteToCohost="handlePromoteToCohost"
 								@approveLobbyUser="handleApproveLobbyUser"
 								@approveAllLobbyUsers="handleApproveAllLobbyUsers"
 								@rejectLobbyUser="handleRejectLobbyUser"
@@ -207,8 +209,13 @@ const socket = useSocket();
 // Lobby user notification tracking
 const notifiedLobbyUsers = ref(new Set());
 
-const { getMeetingDoc, meetingTitle, meetingOwner, isCurrentUserHost } =
-	useMeetingDoc();
+const {
+	getMeetingDoc,
+	meetingTitle,
+	meetingOwner,
+	isCurrentUserHost,
+	meetingCoHosts,
+} = useMeetingDoc();
 
 const meetingDoc = getMeetingDoc(meetingId.value);
 
@@ -510,6 +517,30 @@ const handleLowerHand = async (participantId) => {
 	}
 };
 
+const handlePromoteToCohost = async (participantId) => {
+	try {
+		console.log("Promoting participant to co-host:", participantId);
+
+		const response = await frappeRequest({
+			url: "meet.api.meeting.promote_to_cohost",
+			params: {
+				meeting_id: route.params.meetingId,
+				user_id: participantId,
+			},
+		});
+
+		if (response.success) {
+			toast.success("User promoted to co-host");
+			await meetingDoc.reload();
+		} else {
+			toast.error(response.error || "Failed to promote user to co-host");
+		}
+	} catch (error) {
+		console.error("Failed to promote participant to co-host:", error);
+		toast.error("Failed to promote user to co-host");
+	}
+};
+
 const handleApproveLobbyUser = async (participantId) => {
 	try {
 		console.log("Approving lobby user:", participantId);