feat: fullscreen

Author: BreadGenie

frontend/src/components/MeetingToolbar.vue

@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="w-full overflow-hidden shrink-0 transition-[height,margin] duration-300 ease-in-out"
+		class="w-full overflow-visible shrink-0 transition-[height,margin] duration-300 ease-in-out relative z-40"
 		:style="{ height: toolbarHeight }"
 	>
 		<div
@@ -151,7 +151,11 @@
 					ref="dropdownContainer"
 					@click="handleDropdownClick"
 				>
-					<Dropdown :options="moreOptions" placement="top">
+					<Dropdown
+						:options="moreOptions"
+						placement="top"
+						:portal-to="dropdownPortalTarget"
+					>
 						<template #default>
 							<Button
 								variant="solid"
@@ -259,6 +263,10 @@ const props = defineProps({
 		type: Object,
 		default: null,
 	},
+	isFullscreen: {
+		type: Boolean,
+		default: false,
+	},
 	cameraPermissionGranted: {
 		type: Boolean,
 		default: false,
@@ -282,6 +290,7 @@ const emit = defineEmits([
 	"toggle-microphone",
 	"toggle-camera",
 	"toggle-screen-share",
+	"toggle-fullscreen",
 	"toggle-raise-hand",
 	"end-call",
 	"device-changed",
@@ -290,6 +299,9 @@ const emit = defineEmits([
 
 const { windowWidth } = useResponsiveGrid();
 const isMobile = computed(() => windowWidth.value < 768);
+const dropdownPortalTarget = computed(() =>
+	props.isFullscreen ? "#meetingContainer" : "body",
+);
 
 const moreOptions = computed(() => [
 	{
@@ -308,6 +320,14 @@ const moreOptions = computed(() => [
 			resetHideTimer();
 		},
 	},
+	{
+		icon: props.isFullscreen ? "minimize" : "maximize",
+		label: props.isFullscreen ? "Exit full screen" : "Enter full screen",
+		onClick: () => {
+			emit("toggle-fullscreen");
+			resetHideTimer();
+		},
+	},
 	...(isMobile.value
 		? [
 				{

frontend/src/components/ReactionPicker.vue

@@ -4,13 +4,12 @@
 			<slot name="trigger" />
 		</PopoverTrigger>
 
-		<PopoverPortal>
-			<PopoverContent
-				:side="'top'"
-				:align="'center'"
-				:side-offset="12"
-				class="bg-black/90 rounded-2xl p-3 shadow-xl border border-white/10 max-w-sm w-full z-50"
-			>
+		<PopoverContent
+			:side="'top'"
+			:align="'center'"
+			:side-offset="12"
+			class="bg-black/90 rounded-2xl p-3 shadow-xl border border-white/10 max-w-sm w-full z-[70]"
+		>
 			<div class="text-center">
 				<div class="grid grid-cols-5 gap-3 mb-4">
 					<button
@@ -32,18 +31,12 @@
 					{{ isHandRaised ? "Lower Hand" : "Raise Hand" }}
 				</button>
 			</div>
-			</PopoverContent>
-		</PopoverPortal>
+		</PopoverContent>
 	</PopoverRoot>
 </template>
 
 <script setup>
-import {
-	PopoverContent,
-	PopoverPortal,
-	PopoverRoot,
-	PopoverTrigger,
-} from "reka-ui";
+import { PopoverContent, PopoverRoot, PopoverTrigger } from "reka-ui";
 
 const props = defineProps({
 	isOpen: {

frontend/src/pages/Meeting.vue

@@ -1,5 +1,10 @@
 <template>
-	<div class="h-[100dvh] bg-gray-900 flex flex-col" data-meeting-component>
+	<div
+		ref="meetingContainer"
+		class="h-[100dvh] bg-gray-900 flex flex-col"
+		data-meeting-component
+		id="meetingContainer"
+	>
 		<!-- Loading state -->
 		<div v-if="isConnecting" class="flex-1 flex items-center justify-center">
 			<div class="flex items-center justify-center text-white space-x-4">
@@ -65,6 +70,7 @@
 							:isMicOn="meetingState.isMicOn.value"
 							:isCameraOn="meetingState.isCameraOn.value"
 							:isScreenSharing="meetingState.isScreenSharing.value"
+							:isFullscreen="isFullscreen"
 							:isHandRaised="isHandRaised"
 							:isReactionPickerOpen="isReactionPickerOpen"
 							@update:isReactionPickerOpen="isReactionPickerOpen = $event"
@@ -79,6 +85,7 @@
 							@toggle-microphone="toggleMicrophone"
 							@toggle-camera="toggleCamera"
 							@toggle-screen-share="toggleScreenShare"
+							@toggle-fullscreen="toggleFullscreen"
 							@toggle-raise-hand="toggleRaiseHand"
 							@end-call="endCall"
 							@device-changed="handleDeviceChanged"
@@ -356,6 +363,8 @@ const lobbyUsersForNotifications = computed(() => {
 // Refs
 const chatNotificationQueue = ref(null);
 const isReactionPickerOpen = ref(false);
+const meetingContainer = ref(null);
+const isFullscreen = ref(false);
 
 // Methods
 const resetToPreview = () => {
@@ -574,6 +583,31 @@ const handleNotificationClick = () => {
 	}
 };
 
+const syncFullscreenState = () => {
+	isFullscreen.value = !!document.fullscreenElement;
+};
+
+const toggleFullscreen = async () => {
+	try {
+		if (!document.fullscreenElement) {
+			const targetElement = meetingContainer.value;
+
+			if (targetElement?.requestFullscreen) {
+				await targetElement.requestFullscreen();
+			}
+			return;
+		}
+
+		if (document.exitFullscreen) {
+			await document.exitFullscreen();
+		}
+	} catch (error) {
+		console.error("Failed to toggle fullscreen:", error);
+	} finally {
+		syncFullscreenState();
+	}
+};
+
 const setSinkIdOnVideoElements = async (sinkId) => {
 	// Set speaker output on all video elements
 	const videoElements = document.querySelectorAll("video");
@@ -663,6 +697,8 @@ const handleDeviceChanged = async (event) => {
 onMounted(async () => {
 	window.addEventListener("keydown", handleKeyDown);
 	window.addEventListener("keyup", handleKeyUp);
+	document.addEventListener("fullscreenchange", syncFullscreenState);
+	syncFullscreenState();
 
 	// Clear any stale error/connection state from previous navigations
 	if (typeof meetingState.resetConnectionState === "function") {
@@ -743,6 +779,7 @@ onMounted(async () => {
 onUnmounted(() => {
 	window.removeEventListener("keydown", handleKeyDown);
 	window.removeEventListener("keyup", handleKeyUp);
+	document.removeEventListener("fullscreenchange", syncFullscreenState);
 
 	// Cleanup will be handled by the meeting logic composable
 });