refactor(toolbar): sliding toolbar (#33)

Author: BreadGenie

frontend/components.d.ts

@@ -31,9 +31,6 @@ declare module "vue" {
 			"./src/components/settings/DeviceSettingsTab.vue",
 		)["default"];
 		EmojiPicker: typeof import("./src/components/EmojiPicker.vue")["default"];
-		FloatingControls: typeof import(
-			"./src/components/FloatingControls.vue",
-		)["default"];
 		FloatingReactions: typeof import(
 			"./src/components/FloatingReactions.vue",
 		)["default"];
@@ -44,6 +41,9 @@ declare module "vue" {
 		KickParticipantDialog: typeof import(
 			"./src/components/KickParticipantDialog.vue",
 		)["default"];
+		LayoutSettingsTab: typeof import(
+			"./src/components/settings/LayoutSettingsTab.vue",
+		)["default"];
 		LobbyOverlay: typeof import("./src/components/LobbyOverlay.vue")["default"];
 		LucideAlertCircle: typeof import("~icons/lucide/alert-circle")["default"];
 		LucideAlertTriangle: typeof import(
@@ -101,6 +101,9 @@ declare module "vue" {
 		MeetingPreview: typeof import(
 			"./src/components/MeetingPreview.vue",
 		)["default"];
+		MeetingToolbar: typeof import(
+			"./src/components/MeetingToolbar.vue",
+		)["default"];
 		NamePill: typeof import("./src/components/NamePill.vue")["default"];
 		NotificationSettingsTab: typeof import(
 			"./src/components/settings/NotificationSettingsTab.vue",
@@ -118,6 +121,9 @@ declare module "vue" {
 		PeopleWaitingSection: typeof import(
 			"./src/components/PeopleWaitingSection.vue",
 		)["default"];
+		PreviewToolbar: typeof import(
+			"./src/components/PreviewToolbar.vue",
+		)["default"];
 		ReactionPicker: typeof import(
 			"./src/components/ReactionPicker.vue",
 		)["default"];

frontend/src/components/MeetingPreview.vue

@@ -48,12 +48,9 @@
 								</div>
 							</div>
 
-							<FloatingControls
-								:isPreview="true"
-								:isChatOpen="false"
+							<PreviewToolbar
 								:isMicOn="isMicOn"
 								:isCameraOn="isCameraOn"
-								:isScreenSharing="false"
 								:cameraPermissionGranted="cameraPermissionGranted"
 								:microphonePermissionGranted="microphonePermissionGranted"
 								@toggle-microphone="$emit('toggle-microphone')"
@@ -135,8 +132,8 @@
 <script setup>
 import { Button, FormControl, createResource, toast } from "frappe-ui";
 import { computed, inject, nextTick, onMounted, ref, watch } from "vue";
-import FloatingControls from "../components/FloatingControls.vue";
 import ParticipantAvatarGroup from "../components/ParticipantAvatarGroup.vue";
+import PreviewToolbar from "../components/PreviewToolbar.vue";
 import { useMeetingPreviewPresence } from "../composables/useMeetingPreviewPresence";
 import { session } from "../data/session";
 import FrappeMeetingLogo from "../icons/FrappeMeetingLogo.vue";

…tend/src/components/FloatingControls.vue …ontend/src/components/MeetingToolbar.vuefrontend/src/components/FloatingControls.vue renamed to frontend/src/components/MeetingToolbar.vue frontend/src/components/FloatingControls.vue renamed to frontend/src/components/MeetingToolbar.vue

@@ -1,27 +1,14 @@
 <template>
-	<Transition
-		enter-active-class="transition-all duration-300 ease-out"
-		enter-from-class="opacity-0 transform translate-y-4"
-		enter-to-class="opacity-100 transform translate-y-0"
-		:leave-active-class="
-			instantHide
-				? 'duration-0'
-				: 'transition-all duration-300 ease-in'
-		"
-		leave-from-class="opacity-100 transform translate-y-0"
-		:leave-to-class="
-			instantHide ? 'opacity-0' : 'opacity-0 transform translate-y-4'
-		"
+	<div
+		class="w-full overflow-hidden shrink-0 transition-[height,margin] duration-300 ease-in-out"
+		:style="{ height: toolbarHeight }"
 	>
 		<div
-			v-show="isVisible"
-			:class="[
-				'z-5 pointer-events-none w-auto max-w-3xl px-4 md:px-0 bottom-4 left-1/2 transform -translate-x-1/2',
-				isPreview ? 'absolute' : 'fixed',
-			]"
+			class="flex justify-center px-4 transition-transform duration-300 ease-in-out"
+			:class="isVisible ? 'translate-y-0' : 'translate-y-full'"
 		>
 			<div
-				class="flex items-center gap-3 px-6 py-3 bg-black/80 backdrop-blur-md rounded-full border border-white/10 shadow-xl pointer-events-auto transition-all duration-300 mx-auto"
+				class="flex items-center gap-3 px-6 py-3 bg-black/80 backdrop-blur-md rounded-full border border-white/10 shadow-xl pointer-events-auto transition-all duration-300"
 				@mouseenter="onMouseEnter"
 				@mouseleave="onMouseLeave"
 			>
@@ -62,7 +49,7 @@
 
 				<!-- Screen Share -->
 				<Button
-					v-if="!isPreview && canScreenShare()"
+					v-if="canScreenShare()"
 					@click="$emit('toggle-screen-share')"
 					variant="solid"
 					:theme="isScreenSharing ? 'orange' : 'gray'"
@@ -89,7 +76,6 @@
 				>
 					<template #trigger>
 						<Button
-							v-if="!isPreview"
 							variant="solid"
 							theme="gray"
 							size="2xl"
@@ -106,11 +92,8 @@
 					</template>
 				</ReactionPicker>
 
-				<!-- Raise Hand -->
-
-
 				<!-- Chat -->
-				<div v-if="!isPreview && !isMobile" class="relative">
+				<div v-if="!isMobile" class="relative">
 					<Button
 						@click="$emit('toggle-chat')"
 						variant="solid"
@@ -139,7 +122,7 @@
 				</div>
 
 				<!-- People -->
-				<div class="relative" v-if="!isPreview && !isMobile">
+				<div class="relative" v-if="!isMobile">
 					<Button
 						@click="$emit('toggle-people')"
 						variant="solid"
@@ -162,24 +145,8 @@
 					/>
 				</div>
 
-				<!-- Settings -->
-				<Button
-					v-if="isPreview && (cameraPermissionGranted || microphonePermissionGranted)"
-					@click="showSettingsDialog = true"
-					variant="solid"
-					theme="gray"
-					size="2xl"
-					class="!rounded-full p-0 !bg-opacity-90 hover:!bg-opacity-100 transition-all duration-200 hover:scale-105 active:scale-95"
-					title="Settings"
-				>
-					<template #icon>
-						<lucide-settings class="w-5 h-5 text-white" />
-					</template>
-				</Button>
-
 				<!-- More Options -->
 				<div
-					v-if="!isPreview"
 					class="relative"
 					ref="dropdownContainer"
 					@click="handleDropdownClick"
@@ -203,7 +170,6 @@
 
 				<!-- End Call -->
 				<Button
-					v-if="!isPreview"
 					@click="$emit('end-call')"
 					variant="solid"
 					theme="red"
@@ -217,28 +183,28 @@
 				</Button>
 			</div>
 		</div>
-	</Transition>
+	</div>
 
 	<MeetingInfoDialog
 		v-model="showMeetingInfoDialog"
 		:meetingId="meetingId"
 		:meetingTitle="meetingTitle"
 	/>
 
-
 	<SettingsDialog
 		v-model="showSettingsDialog"
 		:meetingId="meetingId"
-		:isPreview="isPreview"
+		:isPreview="false"
 		@device-changed="$emit('device-changed', $event)"
 	/>
 </template>
 
 <script setup>
 import { Button, Dropdown } from "frappe-ui";
-import { computed, onMounted, onUnmounted, ref, toRefs } from "vue";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import { useMeetingDoc } from "../composables/useMeetingDoc";
 import { useResponsiveGrid } from "../composables/useResponsiveGrid";
+import { autoHideToolbar } from "../data/mediaPreferences";
 import { canScreenShare } from "../utils/device";
 import MeetingInfoDialog from "./MeetingInfoDialog.vue";
 import ReactionPicker from "./ReactionPicker.vue";
@@ -281,10 +247,6 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
-	isPreview: {
-		type: Boolean,
-		default: false,
-	},
 	meetingId: {
 		type: String,
 		default: "",
@@ -313,8 +275,6 @@ if (props.meetingId) {
 	getMeetingDoc(props.meetingId);
 }
 
-const { isPreview } = toRefs(props);
-
 const emit = defineEmits([
 	"toggle-chat",
 	"toggle-people",
@@ -335,10 +295,6 @@ const moreOptions = computed(() => [
 	{
 		icon: "settings",
 		label: "Settings",
-		condition: () =>
-			props.cameraPermissionGranted ||
-			props.microphonePermissionGranted ||
-			!isPreview.value,
 		onClick: () => {
 			showSettingsDialog.value = true;
 			resetHideTimer();
@@ -359,38 +315,34 @@ const moreOptions = computed(() => [
 					label: "People",
 					onClick: () => {
 						emit("toggle-people");
-						instantHide.value = true;
 						isVisible.value = false;
-						setTimeout(() => {
-							instantHide.value = false;
-						}, 300);
 					},
 				},
 				{
 					icon: "message-square",
 					label: "Chat",
 					onClick: () => {
 						emit("toggle-chat");
-						instantHide.value = true;
 						isVisible.value = false;
-						setTimeout(() => {
-							instantHide.value = false;
-						}, 300);
 					},
 				},
 			]
 		: []),
 ]);
 
 const isVisible = ref(true);
-const instantHide = ref(false);
 const isHovering = ref(false);
 const isDropdownOpen = ref(false);
 const dropdownContainer = ref(null);
 const showMeetingInfoDialog = ref(false);
 const showSettingsDialog = ref(false);
 let hideTimeout = null;
 
+const TOOLBAR_VISIBLE_HEIGHT = "5.5rem";
+const toolbarHeight = computed(() =>
+	isVisible.value ? TOOLBAR_VISIBLE_HEIGHT : "0px",
+);
+
 const showControls = () => {
 	isVisible.value = true;
 	resetHideTimer();
@@ -399,7 +351,13 @@ const showControls = () => {
 const resetHideTimer = (force = false) => {
 	if (hideTimeout) {
 		clearTimeout(hideTimeout);
+		hideTimeout = null;
+	}
+
+	if (!autoHideToolbar.value) {
+		return;
 	}
+
 	if (
 		!force &&
 		(isDropdownOpen.value || isHovering.value || props.isReactionPickerOpen)
@@ -440,7 +398,6 @@ const handleShortcut = (event) => {
 };
 
 const handleDropdownClick = (event) => {
-	// for not hiding controls when clicked on dropdown
 	isDropdownOpen.value = !isDropdownOpen.value;
 
 	if (isDropdownOpen.value) {
@@ -478,6 +435,18 @@ const updateReactionPickerOpen = (value) => {
 	emit("update:isReactionPickerOpen", value);
 };
 
+watch(autoHideToolbar, (shouldAutoHide) => {
+	if (!shouldAutoHide) {
+		if (hideTimeout) {
+			clearTimeout(hideTimeout);
+			hideTimeout = null;
+		}
+		isVisible.value = true;
+	} else {
+		resetHideTimer();
+	}
+});
+
 onMounted(() => {
 	resetHideTimer();