refactor: realtime preview presence detection

frontend/components.d.ts

@@ -101,6 +101,9 @@ declare module "vue" {
 			"./src/components/MeetingPreview.vue",
 		)["default"];
 		NamePill: typeof import("./src/components/NamePill.vue")["default"];
+		ParticipantAvatarGroup: typeof import(
+			"./src/components/ParticipantAvatarGroup.vue",
+		)["default"];
 		ParticipantTile: typeof import(
 			"./src/components/ParticipantTile.vue",
 		)["default"];

frontend/src/components/MeetingPreview.vue

@@ -96,7 +96,7 @@
 									<span v-else class="text-gray-900"> Ready to join? </span>
 								</h2>
 
-								<div class="bg-gray-50 rounded-lg px-4 py-3 mb-4">
+								<div v-if="meetingTitle" class="bg-gray-50 rounded-lg px-4 py-3 mb-4">
 									<p class="text-lg font-medium text-gray-700 truncate">
 										{{ meetingTitle }}
 									</p>
@@ -122,20 +122,12 @@
 									</p>
 								</div>
 
-								<div
-									v-else-if="!isNaN(participantsCount)"
-									class="bg-blue-50 border border-blue-200 rounded-lg p-4"
-								>
-									<p class="text-sm text-blue-800">
-										<lucide-users class="w-4 h-4 inline mr-2" />
-										<span v-if="participantsCount > 0">
-											{{ getParticipantText(participantsCount) }}
-										</span>
-										<span v-else>
-											You'll be the first to join this meeting
-										</span>
-									</p>
-								</div>
+								<!-- Avatar group for current participants -->
+								<ParticipantAvatarGroup
+									:participants="participants"
+									:error="presenceError"
+									:maxDisplayed="3"
+								/>
 							</div>
 
 							<div class="space-y-3">
@@ -203,20 +195,12 @@
 </template>
 
 <script setup>
-import { frappeRequest } from "frappe-ui";
-import {
-	computed,
-	defineEmits,
-	defineProps,
-	inject,
-	onMounted,
-	onUnmounted,
-	ref,
-} from "vue";
+import { computed, defineEmits, defineProps, inject } from "vue";
 import FloatingControls from "../components/FloatingControls.vue";
-import MeetingAvatar from "../components/MeetingAvatar.vue";
-import { session } from "../data/session.js";
+import ParticipantAvatarGroup from "../components/ParticipantAvatarGroup.vue";
+import { useMeetingPreviewPresence } from "../composables/useMeetingPreviewPresence";
 import FrappeMeetingLogo from "../icons/FrappeMeetingLogo.vue";
+import MeetingAvatar from "./MeetingAvatar.vue";
 
 const props = defineProps({
 	meetingId: { type: String, required: true },
@@ -226,6 +210,10 @@ const meetingState = inject("meetingState");
 const setLocalVideoRef = inject("setLocalVideoRef");
 const meetingTitle = inject("meetingTitle");
 
+const { participants, error: presenceError } = useMeetingPreviewPresence(
+	props.meetingId,
+);
+
 const isCameraOn = computed(() => meetingState.isCameraOn.value);
 const isMicOn = computed(() => meetingState.isMicOn.value);
 const currentUser = computed(() => meetingState.currentUser.value);
@@ -254,66 +242,7 @@ const emit = defineEmits([
 	"device-changed",
 ]);
 
-const participantsCount = ref(0);
-let pollInterval = null;
-const sfuConnection = ref(null);
-
-const buildSFUBaseUrl = (result) => {
-	return `${result.sfu_url}${result.sfu_url.startsWith("http://") ? `:${result.sfu_port}` : ""}`;
-};
-
-const fetchParticipants = async () => {
-	try {
-		if (!session.isLoggedIn) return;
-
-		if (!sfuConnection.value) {
-			const result = await frappeRequest({
-				url: "sae.api.meeting.get_sfu_connection_details",
-				params: { meeting_id: props.meetingId },
-			});
-
-			if (!result?.success) {
-				throw new Error(result?.error || "Failed to get SFU details");
-			}
-
-			sfuConnection.value = buildSFUBaseUrl(result);
-		}
-
-		const roomsResponse = await fetch(`${sfuConnection.value}/rooms`);
-		const roomsData = await roomsResponse.json();
-
-		const ourRoom = roomsData.rooms.find((room) => room.id === props.meetingId);
-		participantsCount.value = ourRoom ? ourRoom.peerCount : 0;
-	} catch (err) {
-		console.warn("Could not fetch participants count:", err?.message || err);
-		try {
-			if (!err?.message || /failed|network|fetch/i.test(err.message)) {
-				sfuConnection.value = null;
-			}
-		} catch (_) {}
-	}
-};
-
-onMounted(() => {
-	fetchParticipants();
-	pollInterval = setInterval(fetchParticipants, 10000);
-});
-
-onUnmounted(() => {
-	if (pollInterval) {
-		clearInterval(pollInterval);
-		pollInterval = null;
-	}
-});
-
 const currentUserName = computed(
 	() => currentUser.value?.full_name || currentUser.value?.name || "You",
 );
-
-const getParticipantText = (count) => {
-	if (count === 1) {
-		return "1 user in the call";
-	}
-	return `${count} users in the call`;
-};
 </script>

frontend/src/components/ParticipantAvatarGroup.vue

@@ -0,0 +1,107 @@
+<template>
+	<div class="p-4">
+		<div v-if="error" class="bg-red-50 border border-red-200 rounded-lg p-4">
+			<p class="text-sm text-red-800">
+				<lucide-alert-circle class="w-4 h-4 inline mr-2" />
+				{{ error }}
+			</p>
+		</div>
+		<div v-else-if="participants.length > 0" class="flex flex-col items-center">
+			<div class="relative flex mx-auto">
+				<div
+					v-for="(participant, index) in displayedParticipants"
+					:key="participant.user_id"
+					:class="[
+						'relative',
+						index > 0 ? '-ml-2' : ''
+					]"
+					:style="{ zIndex: displayedParticipants.length - index }"
+				>
+					<div class="ring-2 ring-white rounded-full h-10">
+						<Avatar
+							:image="participant.avatar_url"
+							:label="getInitials(participant.full_name)"
+							size="2xl"
+							shape="circle"
+						/>
+					</div>
+				</div>
+				<div
+					v-if="extraCount > 0"
+					class="relative -ml-2"
+					:style="{ zIndex: 0 }"
+				>
+					<div class="ring-2 ring-white rounded-full h-10 w-10 bg-surface-gray-2 flex items-center justify-center text-ink-gray-5 text-base font-semibold">
+						+{{ extraCount }}
+					</div>
+				</div>
+			</div>
+			<div class="mt-4 text-base text-ink-gray-7">
+				<span v-if="displayedParticipants.length > 0">
+					{{ formattedNames }}
+				</span>
+				<span v-if="extraCount > 0">
+					{{ displayedParticipants.length > 0 ? ' and ' : '' }}{{ extraCount }} other{{ extraCount > 1 ? 's' : '' }}
+				</span>
+				<span v-if="displayedParticipants.length > 0">
+					{{ displayedParticipants.length > 1 ? ' are' : ' is' }}
+				</span>
+				in the meeting
+			</div>
+		</div>
+		<div v-else>
+			<p class="text-base text-ink-gray-7">
+				You'll be the first to join this meeting
+			</p>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { Avatar } from "frappe-ui";
+import { computed } from "vue";
+
+interface Participant {
+	user_id: string;
+	full_name: string;
+	avatar_url?: string;
+}
+
+interface Props {
+	participants: Participant[];
+	error: string | null;
+	maxDisplayed: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	participants: () => [],
+	error: "",
+	maxDisplayed: 3,
+});
+
+const displayedParticipants = computed(() =>
+	props.participants.slice(0, props.maxDisplayed),
+);
+
+const extraCount = computed(() =>
+	Math.max(0, props.participants.length - props.maxDisplayed),
+);
+
+const formattedNames = computed((): string => {
+	const names = displayedParticipants.value.map((p) => p.full_name);
+	if (names.length === 0) return "";
+	if (names.length === 1) return names[0];
+	if (names.length === 2) return `${names[0]} and ${names[1]}`;
+	if (names.length === 3) return `${names[0]}, ${names[1]} and ${names[2]}`;
+	return names.join(", ");
+});
+
+const getInitials = (name: string): string => {
+	if (!name) return "?";
+	return name
+		.split(" ")
+		.map((part) => part.charAt(0).toUpperCase())
+		.slice(0, 2)
+		.join("");
+};
+</script>