diff --git a/web/src/components/overlay/MobileCameraDrawer.tsx b/web/src/components/overlay/MobileCameraDrawer.tsx index a0d2ad0e9..d4d318fcf 100644 --- a/web/src/components/overlay/MobileCameraDrawer.tsx +++ b/web/src/components/overlay/MobileCameraDrawer.tsx @@ -2,6 +2,7 @@ import { useState } from "react"; import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer"; import { Button } from "../ui/button"; import { FaVideo } from "react-icons/fa"; +import { isMobile } from "react-device-detect"; type MobileCameraDrawerProps = { allCameras: string[]; @@ -15,6 +16,10 @@ export default function MobileCameraDrawer({ }: MobileCameraDrawerProps) { const [cameraDrawer, setCameraDrawer] = useState(false); + if (!isMobile) { + return; + } + return ( diff --git a/web/src/components/overlay/MobileReviewSettingsDrawer.tsx b/web/src/components/overlay/MobileReviewSettingsDrawer.tsx index 51e872b0b..8f6a3232f 100644 --- a/web/src/components/overlay/MobileReviewSettingsDrawer.tsx +++ b/web/src/components/overlay/MobileReviewSettingsDrawer.tsx @@ -15,6 +15,7 @@ import { FrigateConfig } from "@/types/frigateConfig"; import { toast } from "sonner"; import axios from "axios"; import SaveExportOverlay from "./SaveExportOverlay"; +import { isMobile } from "react-device-detect"; const ATTRIBUTES = ["amazon", "face", "fedex", "license_plate", "ups"]; type DrawerMode = "none" | "select" | "export" | "calendar" | "filter"; @@ -114,6 +115,10 @@ export default function MobileReviewSettingsDrawer({ filter?.labels, ); + if (!isMobile) { + return; + } + let content; if (drawerMode == "select") { content = ( diff --git a/web/src/components/overlay/MobileTimelineDrawer.tsx b/web/src/components/overlay/MobileTimelineDrawer.tsx index cd815f915..98a969bc3 100644 --- a/web/src/components/overlay/MobileTimelineDrawer.tsx +++ b/web/src/components/overlay/MobileTimelineDrawer.tsx @@ -3,6 +3,7 @@ import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer"; import { Button } from "../ui/button"; import { FaFlag } from "react-icons/fa"; import { TimelineType } from "@/types/timeline"; +import { isMobile } from "react-device-detect"; type MobileTimelineDrawerProps = { selected: TimelineType; @@ -14,6 +15,10 @@ export default function MobileTimelineDrawer({ }: MobileTimelineDrawerProps) { const [drawer, setDrawer] = useState(false); + if (!isMobile) { + return; + } + return ( diff --git a/web/src/views/events/RecordingView.tsx b/web/src/views/events/RecordingView.tsx index c04d80640..f51e96273 100644 --- a/web/src/views/events/RecordingView.tsx +++ b/web/src/views/events/RecordingView.tsx @@ -238,16 +238,14 @@ export function RecordingView({ {isDesktop && "Back"}
- {isMobile && ( - { - setPlaybackStart(currentTime); - setMainCamera(cam); - }} - /> - )} + { + setPlaybackStart(currentTime); + setMainCamera(cam); + }} + /> {isDesktop && ( )} - {isMobile && ( - - )} +