diff --git a/web/src/components/dynamic/CameraFeatureToggle.tsx b/web/src/components/dynamic/CameraFeatureToggle.tsx
index a3a674c64..f183601a5 100644
--- a/web/src/components/dynamic/CameraFeatureToggle.tsx
+++ b/web/src/components/dynamic/CameraFeatureToggle.tsx
@@ -8,18 +8,18 @@ import { isDesktop } from "react-device-detect";
const variants = {
primary: {
- active: "font-bold text-primary-foreground bg-selected",
- inactive: "text-secondary-foreground bg-secondary",
+ active: "font-bold text-white bg-selected rounded-lg",
+ inactive: "text-secondary-foreground bg-secondary rounded-lg",
},
- secondary: {
- active: "font-bold text-primary",
- inactive: "text-secondary-foreground",
+ overlay: {
+ active: "font-bold text-white bg-selected rounded-full",
+ inactive: "text-primary-white rounded-full bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500",
},
};
type CameraFeatureToggleProps = {
className?: string;
- variant?: "primary" | "secondary";
+ variant?: "primary" | "overlay";
isActive: boolean;
Icon: IconType;
title: string;
@@ -37,7 +37,7 @@ export default function CameraFeatureToggle({
const content = (
diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
index b59fd0f4e..bbea49497 100644
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@@ -37,6 +37,7 @@ import {
FaAngleLeft,
FaAngleRight,
FaAngleUp,
+ FaCompress,
FaExpand,
} from "react-icons/fa";
import { GiSpeaker, GiSpeakerOff } from "react-icons/gi";
@@ -99,20 +100,20 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
const growClassName = useMemo(() => {
const aspect = camera.detect.width / camera.detect.height;
- if (fullscreen) {
- if (aspect > 16 / 9) {
- return "absolute inset-x-0 top-[50%] -translate-y-[50%]";
- } else {
- return "absolute inset-y-0 left-[50%] -translate-x-[50%]";
- }
- }
-
if (isMobile) {
if (isPortrait) {
return "absolute left-2 right-2 top-[50%] -translate-y-[50%]";
} else {
return "absolute top-2 bottom-2 left-[50%] -translate-x-[50%]";
}
+ }
+
+ if (fullscreen) {
+ if (aspect > 16 / 9) {
+ return "absolute inset-x-0 top-[50%] -translate-y-[50%]";
+ } else {
+ return "absolute inset-y-0 left-[50%] -translate-x-[50%]";
+ }
} else if (aspect > 2) {
return "absolute left-2 right-2 top-[50%] -translate-y-[50%]";
} else {
@@ -132,7 +133,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
@@ -154,9 +155,10 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
>
{
if (fullscreen) {
document.exitFullscreen();
@@ -167,6 +169,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
/>