mirror of
https://github.com/blakeblackshear/frigate.git
synced 2025-10-27 10:52:11 +01:00
Revamp mobile UI (#10103)
* Simplify nav components * Allow ability to choose live layout on mobile * Combine event views * Undo vite * Fix autoplay * Remove import * Show filters on mobile view * Spacing * Don't separate properties
This commit is contained in:
Nicolas Mowen
GitHub
parent
622e9741c0
commit
fd24007618
@ -1,9 +1,7 @@
|
||||
import Providers from "@/context/providers";
|
||||
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
||||
import { useState } from "react";
|
||||
import Wrapper from "@/components/Wrapper";
|
||||
import Sidebar from "@/components/Sidebar";
|
||||
import Header from "@/components/Header";
|
||||
import Sidebar from "@/components/navigation/Sidebar";
|
||||
import Live from "@/pages/Live";
|
||||
import Export from "@/pages/Export";
|
||||
import Storage from "@/pages/Storage";
|
||||
@ -14,27 +12,22 @@ import NoMatch from "@/pages/NoMatch";
|
||||
import Settings from "@/pages/Settings";
|
||||
import UIPlayground from "./pages/UIPlayground";
|
||||
import Events from "./pages/Events";
|
||||
import { isDesktop } from "react-device-detect";
|
||||
import { isDesktop, isMobile } from "react-device-detect";
|
||||
import Statusbar from "./components/Statusbar";
|
||||
import Bottombar from "./components/navigation/Bottombar";
|
||||
|
||||
function App() {
|
||||
const [sheetOpen, setSheetOpen] = useState(false);
|
||||
|
||||
const toggleNavbar = () => {
|
||||
setSheetOpen((prev) => !prev);
|
||||
};
|
||||
|
||||
return (
|
||||
<Providers>
|
||||
<BrowserRouter>
|
||||
<Wrapper>
|
||||
<Header onToggleNavbar={toggleNavbar} />
|
||||
<div className="w-full h-full pt-2 overflow-hidden">
|
||||
<Sidebar sheetOpen={sheetOpen} setSheetOpen={setSheetOpen} />
|
||||
{isDesktop && <Sidebar />}
|
||||
{isDesktop && <Statusbar />}
|
||||
{isMobile && <Bottombar />}
|
||||
<div
|
||||
id="pageRoot"
|
||||
className="absolute left-0 md:left-16 top-16 md:top-2 right-0 bottom-0 md:bottom-8 overflow-hidden"
|
||||
className="absolute left-0 md:left-16 top-2 right-0 bottom-16 md:bottom-8 overflow-hidden"
|
||||
>
|
||||
<Routes>
|
||||
<Route path="/" element={<Live />} />
|
||||
|
||||
@ -1,63 +0,0 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import Logo from "@/components/Logo";
|
||||
import { LuMenu } from "react-icons/lu";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ENV } from "@/env";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import { navbarLinks } from "@/pages/site-navigation";
|
||||
import SettingsNavItems from "./settings/SettingsNavItems";
|
||||
|
||||
type HeaderProps = {
|
||||
onToggleNavbar: () => void;
|
||||
};
|
||||
|
||||
function HeaderNavigation() {
|
||||
return (
|
||||
<div className="hidden md:flex">
|
||||
{navbarLinks.map((item) => {
|
||||
let shouldRender = item.dev ? ENV !== "production" : true;
|
||||
return (
|
||||
shouldRender && (
|
||||
<NavLink
|
||||
key={item.id}
|
||||
to={item.url}
|
||||
className={({ isActive }) =>
|
||||
`my-2 py-3 px-4 text-muted-foreground flex flex-row items-center text-center rounded-lg gap-2 hover:bg-border ${
|
||||
isActive ? "font-bold bg-popover text-popover-foreground" : ""
|
||||
}`
|
||||
}
|
||||
>
|
||||
<div className="text-sm">{item.title}</div>
|
||||
</NavLink>
|
||||
)
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Header({ onToggleNavbar }: HeaderProps) {
|
||||
return (
|
||||
<div className="flex gap-10 lg:gap-20 justify-between pt-2 mb-2 border-b-[1px] px-4 items-center md:hidden">
|
||||
<div className="flex gap-4 items-center flex-shrink-0 m-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="md:hidden"
|
||||
onClick={onToggleNavbar}
|
||||
>
|
||||
<LuMenu />
|
||||
</Button>
|
||||
<Link to="/">
|
||||
<div className="flex flex-row items-center">
|
||||
<Logo className="w-10 mr-5" />
|
||||
</div>
|
||||
</Link>
|
||||
<HeaderNavigation />
|
||||
</div>
|
||||
<SettingsNavItems className="flex flex-shrink-0 md:gap-2" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Header;
|
||||
@ -1,95 +0,0 @@
|
||||
import { IconType } from "react-icons";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import { Sheet, SheetContent } from "@/components/ui/sheet";
|
||||
import Logo from "./Logo";
|
||||
import { ENV } from "@/env";
|
||||
import { navbarLinks } from "@/pages/site-navigation";
|
||||
import SettingsNavItems from "./settings/SettingsNavItems";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
|
||||
function Sidebar({
|
||||
sheetOpen,
|
||||
setSheetOpen,
|
||||
}: {
|
||||
sheetOpen: boolean;
|
||||
setSheetOpen: (open: boolean) => void;
|
||||
}) {
|
||||
const sidebar = (
|
||||
<aside className="w-[52px] z-10 h-screen sticky top-0 overflow-y-auto scrollbar-hidden py-4 flex flex-col justify-between">
|
||||
<span tabIndex={0} className="sr-only" />
|
||||
<div className="w-full flex flex-col gap-0 items-center">
|
||||
<Logo className="w-8 h-8 mb-6" />
|
||||
{navbarLinks.map((item) => (
|
||||
<SidebarItem
|
||||
key={item.id}
|
||||
Icon={item.icon}
|
||||
title={item.title}
|
||||
url={item.url}
|
||||
dev={item.dev}
|
||||
onClick={() => setSheetOpen(false)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<SettingsNavItems className="hidden md:flex flex-col items-center mb-8" />
|
||||
</aside>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="hidden md:block">{sidebar}</div>
|
||||
<Sheet
|
||||
open={sheetOpen}
|
||||
modal={false}
|
||||
onOpenChange={() => setSheetOpen(false)}
|
||||
>
|
||||
<SheetContent side="left" className="w-[90px]">
|
||||
<div className="w-full flex flex-row justify-center"></div>
|
||||
{sidebar}
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
type SidebarItemProps = {
|
||||
Icon: IconType;
|
||||
title: string;
|
||||
url: string;
|
||||
dev?: boolean;
|
||||
onClick?: () => void;
|
||||
};
|
||||
|
||||
function SidebarItem({ Icon, title, url, dev, onClick }: SidebarItemProps) {
|
||||
const shouldRender = dev ? ENV !== "production" : true;
|
||||
|
||||
return (
|
||||
shouldRender && (
|
||||
<Tooltip>
|
||||
<NavLink
|
||||
to={url}
|
||||
onClick={onClick}
|
||||
className={({ isActive }) =>
|
||||
`mx-[10px] mb-6 flex flex-col justify-center items-center rounded-lg ${
|
||||
isActive
|
||||
? "font-bold text-primary-foreground bg-primary"
|
||||
: "text-muted-foreground bg-muted"
|
||||
}`
|
||||
}
|
||||
>
|
||||
<TooltipTrigger>
|
||||
<Icon className="w-5 h-5 m-[6px]" />
|
||||
</TooltipTrigger>
|
||||
</NavLink>
|
||||
<TooltipContent side="right">
|
||||
<p>{title}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default Sidebar;
|
||||
@ -15,6 +15,7 @@ import { Calendar } from "../ui/calendar";
|
||||
import { ReviewFilter } from "@/types/review";
|
||||
import { getEndOfDayTimestamp } from "@/utils/dateUtil";
|
||||
import { useFormattedTimestamp } from "@/hooks/use-date-utils";
|
||||
import { isMobile } from "react-device-detect";
|
||||
|
||||
const ATTRIBUTES = ["amazon", "face", "fedex", "license_plate", "ups"];
|
||||
|
||||
@ -122,11 +123,17 @@ function CamerasFilterButton({
|
||||
}}
|
||||
>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button className="mx-1 capitalize" variant="secondary">
|
||||
<LuVideo className=" mr-[10px]" />
|
||||
{selectedCameras == undefined
|
||||
? "All Cameras"
|
||||
: `${selectedCameras.length} Cameras`}
|
||||
<Button
|
||||
size={isMobile ? "sm" : "default"}
|
||||
className="mx-1 capitalize"
|
||||
variant="secondary"
|
||||
>
|
||||
<LuVideo className="md:mr-[10px]" />
|
||||
<div className="hidden md:block">
|
||||
{selectedCameras == undefined
|
||||
? "All Cameras"
|
||||
: `${selectedCameras.length} Cameras`}
|
||||
</div>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
@ -205,9 +212,15 @@ function CalendarFilterButton({
|
||||
}}
|
||||
>
|
||||
<PopoverTrigger asChild>
|
||||
<Button className="mx-1" variant="secondary">
|
||||
<LuCalendar className=" mr-[10px]" />
|
||||
{day == undefined ? "Last 24 Hours" : selectedDate}
|
||||
<Button
|
||||
size={isMobile ? "sm" : "default"}
|
||||
className="mx-1"
|
||||
variant="secondary"
|
||||
>
|
||||
<LuCalendar className="md:mr-[10px]" />
|
||||
<div className="hidden md:block">
|
||||
{day == undefined ? "Last 24 Hours" : selectedDate}
|
||||
</div>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent>
|
||||
@ -241,9 +254,13 @@ function GeneralFilterButton({
|
||||
return (
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button className="mx-1" variant="secondary">
|
||||
<LuFilter className=" mr-[10px]" />
|
||||
Filter
|
||||
<Button
|
||||
size={isMobile ? "sm" : "default"}
|
||||
className="mx-1"
|
||||
variant="secondary"
|
||||
>
|
||||
<LuFilter className="md:mr-[10px]" />
|
||||
<div className="hidden md:block">Filter</div>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent side="left" asChild>
|
||||
|
||||
26
web/src/components/navigation/Bottombar.tsx
Normal file
26
web/src/components/navigation/Bottombar.tsx
Normal file
@ -0,0 +1,26 @@
|
||||
import { navbarLinks } from "@/pages/site-navigation";
|
||||
import NavItem from "./NavItem";
|
||||
import SettingsNavItems from "../settings/SettingsNavItems";
|
||||
|
||||
function Bottombar() {
|
||||
return (
|
||||
<div className="absolute h-16 left-4 bottom-0 right-4 flex flex-row items-center justify-between">
|
||||
{navbarLinks.map((item) => (
|
||||
<NavItem
|
||||
className=""
|
||||
variant="secondary"
|
||||
key={item.id}
|
||||
Icon={item.icon}
|
||||
title={item.title}
|
||||
url={item.url}
|
||||
dev={item.dev}
|
||||
/>
|
||||
))}
|
||||
<SettingsNavItems className="flex flex-shrink-0 justify-between gap-4" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
//
|
||||
|
||||
export default Bottombar;
|
||||
64
web/src/components/navigation/NavItem.tsx
Normal file
64
web/src/components/navigation/NavItem.tsx
Normal file
@ -0,0 +1,64 @@
|
||||
import { IconType } from "react-icons";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import { ENV } from "@/env";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
|
||||
const variants = {
|
||||
primary: {
|
||||
active: "font-bold text-primary-foreground bg-primary",
|
||||
inactive: "text-muted-foreground bg-muted",
|
||||
},
|
||||
secondary: {
|
||||
active: "font-bold text-primary",
|
||||
inactive: "text-muted-foreground",
|
||||
},
|
||||
};
|
||||
|
||||
type NavItemProps = {
|
||||
className: string;
|
||||
variant?: "primary" | "secondary";
|
||||
Icon: IconType;
|
||||
title: string;
|
||||
url: string;
|
||||
dev?: boolean;
|
||||
onClick?: () => void;
|
||||
};
|
||||
|
||||
export default function NavItem({
|
||||
className,
|
||||
variant = "primary",
|
||||
Icon,
|
||||
title,
|
||||
url,
|
||||
dev,
|
||||
onClick,
|
||||
}: NavItemProps) {
|
||||
const shouldRender = dev ? ENV !== "production" : true;
|
||||
|
||||
return (
|
||||
shouldRender && (
|
||||
<Tooltip>
|
||||
<NavLink
|
||||
to={url}
|
||||
onClick={onClick}
|
||||
className={({ isActive }) =>
|
||||
`${className} flex flex-col justify-center items-center rounded-lg ${
|
||||
variants[variant][isActive ? "active" : "inactive"]
|
||||
}`
|
||||
}
|
||||
>
|
||||
<TooltipTrigger>
|
||||
<Icon className="w-5 h-5 m-[6px]" />
|
||||
</TooltipTrigger>
|
||||
</NavLink>
|
||||
<TooltipContent side="right">
|
||||
<p>{title}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
)
|
||||
);
|
||||
}
|
||||
28
web/src/components/navigation/Sidebar.tsx
Normal file
28
web/src/components/navigation/Sidebar.tsx
Normal file
@ -0,0 +1,28 @@
|
||||
import Logo from "../Logo";
|
||||
import { navbarLinks } from "@/pages/site-navigation";
|
||||
import SettingsNavItems from "../settings/SettingsNavItems";
|
||||
import NavItem from "./NavItem";
|
||||
|
||||
function Sidebar() {
|
||||
return (
|
||||
<aside className="w-[52px] z-10 h-screen sticky top-0 overflow-y-auto scrollbar-hidden py-4 flex flex-col justify-between">
|
||||
<span tabIndex={0} className="sr-only" />
|
||||
<div className="w-full flex flex-col gap-0 items-center">
|
||||
<Logo className="w-8 h-8 mb-6" />
|
||||
{navbarLinks.map((item) => (
|
||||
<NavItem
|
||||
className="mx-[10px] mb-6"
|
||||
key={item.id}
|
||||
Icon={item.icon}
|
||||
title={item.title}
|
||||
url={item.url}
|
||||
dev={item.dev}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<SettingsNavItems className="hidden md:flex flex-col items-center mb-8" />
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
export default Sidebar;
|
||||
@ -12,6 +12,7 @@ import useCameraActivity from "@/hooks/use-camera-activity";
|
||||
import { useRecordingsState } from "@/api/ws";
|
||||
import { LivePlayerMode } from "@/types/live";
|
||||
import useCameraLiveMode from "@/hooks/use-camera-live-mode";
|
||||
import { isDesktop } from "react-device-detect";
|
||||
|
||||
type LivePlayerProps = {
|
||||
className?: string;
|
||||
@ -153,7 +154,7 @@ export default function LivePlayer({
|
||||
className={`bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500`}
|
||||
>
|
||||
<MdLeakAdd className="w-4 h-4 text-motion" />
|
||||
<div className="ml-1 text-white text-xs">Motion</div>
|
||||
<div className="hidden md:block ml-1 text-white text-xs">Motion</div>
|
||||
</Chip>
|
||||
|
||||
{cameraConfig.audio.enabled_in_config && (
|
||||
@ -162,19 +163,21 @@ export default function LivePlayer({
|
||||
className={`bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500`}
|
||||
>
|
||||
<BsSoundwave className="w-4 h-4 text-audio" />
|
||||
<div className="ml-1 text-white text-xs">Sound</div>
|
||||
<div className="hidden md:block ml-1 text-white text-xs">Sound</div>
|
||||
</Chip>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Chip className="absolute right-2 top-2 bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500">
|
||||
{recording == "ON" && (
|
||||
<MdCircle className="w-2 h-2 drop-shadow-md shadow-danger text-danger" />
|
||||
)}
|
||||
<div className="ml-1 capitalize text-white text-xs">
|
||||
{cameraConfig.name.replaceAll("_", " ")}
|
||||
</div>
|
||||
</Chip>
|
||||
{isDesktop && (
|
||||
<Chip className="absolute right-2 top-2 bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500">
|
||||
{recording == "ON" && (
|
||||
<MdCircle className="w-2 h-2 drop-shadow-md shadow-danger text-danger" />
|
||||
)}
|
||||
<div className="ml-1 capitalize text-white text-xs">
|
||||
{cameraConfig.name.replaceAll("_", " ")}
|
||||
</div>
|
||||
</Chip>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,12 +1,10 @@
|
||||
import useApiFilter from "@/hooks/use-api-filter";
|
||||
import useOverlayState from "@/hooks/use-overlay-state";
|
||||
import { ReviewFilter, ReviewSegment, ReviewSeverity } from "@/types/review";
|
||||
import DesktopEventView from "@/views/events/DesktopEventView";
|
||||
import DesktopRecordingView from "@/views/events/DesktopRecordingView";
|
||||
import MobileEventView from "@/views/events/MobileEventView";
|
||||
import EventView from "@/views/events/EventView";
|
||||
import axios from "axios";
|
||||
import { useCallback, useMemo, useState } from "react";
|
||||
import { isMobile } from "react-device-detect";
|
||||
import useSWR from "swr";
|
||||
import useSWRInfinite from "swr/infinite";
|
||||
|
||||
@ -209,24 +207,8 @@ export default function Events() {
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
if (isMobile) {
|
||||
return (
|
||||
<MobileEventView
|
||||
reviewPages={reviewPages}
|
||||
relevantPreviews={allPreviews}
|
||||
reachedEnd={isDone}
|
||||
isValidating={isValidating}
|
||||
severity={severity}
|
||||
setSeverity={setSeverity}
|
||||
loadNextPage={onLoadNextPage}
|
||||
markItemAsReviewed={markItemAsReviewed}
|
||||
pullLatestData={reloadData}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<DesktopEventView
|
||||
<EventView
|
||||
reviewPages={reviewPages}
|
||||
relevantPreviews={allPreviews}
|
||||
timeRange={selectedTimeRange}
|
||||
|
||||
@ -1,17 +1,26 @@
|
||||
import { useFrigateEvents } from "@/api/ws";
|
||||
import Logo from "@/components/Logo";
|
||||
import { AnimatedEventThumbnail } from "@/components/image/AnimatedEventThumbnail";
|
||||
import LivePlayer from "@/components/player/LivePlayer";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
|
||||
import { TooltipProvider } from "@/components/ui/tooltip";
|
||||
import { Event as FrigateEvent } from "@/types/event";
|
||||
import { FrigateConfig } from "@/types/frigateConfig";
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { isSafari } from "react-device-detect";
|
||||
import { isDesktop, isMobile, isSafari } from "react-device-detect";
|
||||
import { CiGrid2H, CiGrid31 } from "react-icons/ci";
|
||||
import useSWR from "swr";
|
||||
|
||||
function Live() {
|
||||
const { data: config } = useSWR<FrigateConfig>("config");
|
||||
|
||||
// layout
|
||||
|
||||
const [layout, setLayout] = useState<"grid" | "list">(
|
||||
isDesktop ? "grid" : "list"
|
||||
);
|
||||
|
||||
// recent events
|
||||
const { payload: eventUpdate } = useFrigateEvents();
|
||||
const { data: allEvents, mutate: updateEvents } = useSWR<FrigateEvent[]>([
|
||||
@ -80,6 +89,31 @@ function Live() {
|
||||
|
||||
return (
|
||||
<div className="w-full h-full overflow-y-scroll px-2">
|
||||
{isMobile && (
|
||||
<div className="relative h-9 flex items-center justify-between">
|
||||
<Logo className="absolute inset-y-0 inset-x-1/2 -translate-x-1/2 h-8" />
|
||||
<div />
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
className={layout == "grid" ? "text-blue-600 bg-blue-200" : ""}
|
||||
size="xs"
|
||||
variant="secondary"
|
||||
onClick={() => setLayout("grid")}
|
||||
>
|
||||
<CiGrid31 className="m-1" />
|
||||
</Button>
|
||||
<Button
|
||||
className={layout == "list" ? "text-blue-600 bg-blue-200" : ""}
|
||||
size="xs"
|
||||
variant="secondary"
|
||||
onClick={() => setLayout("list")}
|
||||
>
|
||||
<CiGrid2H className="m-1" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{events && events.length > 0 && (
|
||||
<ScrollArea>
|
||||
<TooltipProvider>
|
||||
@ -93,21 +127,23 @@ function Live() {
|
||||
</ScrollArea>
|
||||
)}
|
||||
|
||||
<div className="mt-4 md:grid md:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4 gap-4">
|
||||
<div
|
||||
className={`mt-4 grid ${layout == "grid" ? "grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4" : ""} gap-2 md:gap-4`}
|
||||
>
|
||||
{cameras.map((camera) => {
|
||||
let grow;
|
||||
let aspectRatio = camera.detect.width / camera.detect.height;
|
||||
if (aspectRatio > 2) {
|
||||
grow = "md:col-span-2 aspect-wide";
|
||||
grow = `${layout == "grid" ? "col-span-2" : ""} aspect-wide`;
|
||||
} else if (aspectRatio < 1) {
|
||||
grow = `md:row-span-2 aspect-tall md:h-full`;
|
||||
grow = `${layout == "grid" ? "row-span-2 aspect-tall md:h-full" : ""} aspect-tall`;
|
||||
} else {
|
||||
grow = "aspect-video";
|
||||
}
|
||||
return (
|
||||
<LivePlayer
|
||||
key={camera.name}
|
||||
className={`mb-2 md:mb-0 rounded-2xl bg-black ${grow}`}
|
||||
className={`rounded-2xl bg-black ${grow}`}
|
||||
windowVisible={windowVisible}
|
||||
cameraConfig={camera}
|
||||
preferredLiveMode={isSafari ? "webrtc" : "mse"}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import Logo from "@/components/Logo";
|
||||
import NewReviewData from "@/components/dynamic/NewReviewData";
|
||||
import ReviewFilterGroup from "@/components/filter/ReviewFilterGroup";
|
||||
import PreviewThumbnailPlayer from "@/components/player/PreviewThumbnailPlayer";
|
||||
@ -8,11 +9,12 @@ import { useEventUtils } from "@/hooks/use-event-utils";
|
||||
import { FrigateConfig } from "@/types/frigateConfig";
|
||||
import { ReviewFilter, ReviewSegment, ReviewSeverity } from "@/types/review";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { isDesktop, isMobile } from "react-device-detect";
|
||||
import { LuFolderCheck } from "react-icons/lu";
|
||||
import { MdCircle } from "react-icons/md";
|
||||
import useSWR from "swr";
|
||||
|
||||
type DesktopEventViewProps = {
|
||||
type EventViewProps = {
|
||||
reviewPages?: ReviewSegment[][];
|
||||
relevantPreviews?: Preview[];
|
||||
timeRange: { before: number; after: number };
|
||||
@ -27,7 +29,7 @@ type DesktopEventViewProps = {
|
||||
pullLatestData: () => void;
|
||||
updateFilter: (filter: ReviewFilter) => void;
|
||||
};
|
||||
export default function DesktopEventView({
|
||||
export default function EventView({
|
||||
reviewPages,
|
||||
relevantPreviews,
|
||||
timeRange,
|
||||
@ -41,7 +43,7 @@ export default function DesktopEventView({
|
||||
onSelectReview,
|
||||
pullLatestData,
|
||||
updateFilter,
|
||||
}: DesktopEventViewProps) {
|
||||
}: EventViewProps) {
|
||||
const { data: config } = useSWR<FrigateConfig>("config");
|
||||
const contentRef = useRef<HTMLDivElement | null>(null);
|
||||
const segmentDuration = 60;
|
||||
@ -127,10 +129,6 @@ export default function DesktopEventView({
|
||||
const [minimap, setMinimap] = useState<string[]>([]);
|
||||
const minimapObserver = useRef<IntersectionObserver | null>();
|
||||
useEffect(() => {
|
||||
if (!contentRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
const visibleTimestamps = new Set<string>();
|
||||
minimapObserver.current = new IntersectionObserver(
|
||||
(entries) => {
|
||||
@ -150,7 +148,7 @@ export default function DesktopEventView({
|
||||
setMinimap([...visibleTimestamps]);
|
||||
});
|
||||
},
|
||||
{ root: contentRef.current, threshold: 0.1 }
|
||||
{ root: contentRef.current, threshold: isDesktop ? 0.1 : 0.5 }
|
||||
);
|
||||
|
||||
return () => {
|
||||
@ -169,12 +167,12 @@ export default function DesktopEventView({
|
||||
// no op
|
||||
}
|
||||
},
|
||||
[minimapObserver.current]
|
||||
[minimapObserver]
|
||||
);
|
||||
const minimapBounds = useMemo(() => {
|
||||
const data = {
|
||||
start: Math.floor(Date.now() / 1000) - 35 * 60,
|
||||
end: Math.floor(Date.now() / 1000) - 21 * 60,
|
||||
start: 0,
|
||||
end: 0,
|
||||
};
|
||||
const list = minimap.sort();
|
||||
|
||||
@ -192,7 +190,8 @@ export default function DesktopEventView({
|
||||
|
||||
return (
|
||||
<div className="flex flex-col w-full h-full">
|
||||
<div className="flex justify-between mb-2">
|
||||
<div className="relative flex justify-between mb-2">
|
||||
<Logo className="absolute inset-y-0 inset-x-1/2 -translate-x-1/2 h-8" />
|
||||
<ToggleGroup
|
||||
type="single"
|
||||
defaultValue="alert"
|
||||
@ -206,8 +205,8 @@ export default function DesktopEventView({
|
||||
value="alert"
|
||||
aria-label="Select alerts"
|
||||
>
|
||||
<MdCircle className="w-2 h-2 mr-[10px] text-severity_alert" />
|
||||
Alerts
|
||||
<MdCircle className="w-2 h-2 md:mr-[10px] text-severity_alert" />
|
||||
<div className="hidden md:block">Alerts</div>
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem
|
||||
className={`px-3 py-4 rounded-2xl ${
|
||||
@ -216,8 +215,8 @@ export default function DesktopEventView({
|
||||
value="detection"
|
||||
aria-label="Select detections"
|
||||
>
|
||||
<MdCircle className="w-2 h-2 mr-[10px] text-severity_detection" />
|
||||
Detections
|
||||
<MdCircle className="w-2 h-2 md:mr-[10px] text-severity_detection" />
|
||||
<div className="hidden md:block">Detections</div>
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem
|
||||
className={`px-3 py-4 rounded-2xl ${
|
||||
@ -226,8 +225,8 @@ export default function DesktopEventView({
|
||||
value="significant_motion"
|
||||
aria-label="Select motion"
|
||||
>
|
||||
<MdCircle className="w-2 h-2 mr-[10px] text-severity_motion" />
|
||||
Motion
|
||||
<MdCircle className="w-2 h-2 md:mr-[10px] text-severity_motion" />
|
||||
<div className="hidden md:block">Motion</div>
|
||||
</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
<ReviewFilterGroup filter={filter} onUpdateFilter={updateFilter} />
|
||||
@ -276,7 +275,7 @@ export default function DesktopEventView({
|
||||
data-segment-start={
|
||||
alignDateToTimeline(value.start_time) - segmentDuration
|
||||
}
|
||||
className="outline outline-offset-1 outline-0 rounded-lg shadow-none transition-all duration-500"
|
||||
className="outline outline-offset-1 outline-0 rounded-lg shadow-none transition-all duration-500 my-1 md:my-0"
|
||||
>
|
||||
<div className="aspect-video rounded-lg overflow-hidden">
|
||||
<PreviewThumbnailPlayer
|
||||
@ -284,6 +283,9 @@ export default function DesktopEventView({
|
||||
relevantPreview={relevantPreview}
|
||||
setReviewed={markItemAsReviewed}
|
||||
onClick={onSelectReview}
|
||||
autoPlayback={
|
||||
isMobile && minimapBounds.end == value.start_time
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
{lastRow && !reachedEnd && <ActivityIndicator />}
|
||||
@ -295,7 +297,7 @@ export default function DesktopEventView({
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="md:w-[100px] mt-2 overflow-y-auto no-scrollbar">
|
||||
<div className="w-[44px] md:w-[100px] mt-2 overflow-y-auto no-scrollbar">
|
||||
<EventReviewTimeline
|
||||
segmentDuration={segmentDuration}
|
||||
timestampSpread={15}
|
||||
@ -1,248 +0,0 @@
|
||||
import NewReviewData from "@/components/dynamic/NewReviewData";
|
||||
import PreviewThumbnailPlayer from "@/components/player/PreviewThumbnailPlayer";
|
||||
import ActivityIndicator from "@/components/ui/activity-indicator";
|
||||
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
|
||||
import { FrigateConfig } from "@/types/frigateConfig";
|
||||
import { ReviewSegment, ReviewSeverity } from "@/types/review";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { MdCircle } from "react-icons/md";
|
||||
import useSWR from "swr";
|
||||
|
||||
type MobileEventViewProps = {
|
||||
reviewPages?: ReviewSegment[][];
|
||||
relevantPreviews?: Preview[];
|
||||
reachedEnd: boolean;
|
||||
isValidating: boolean;
|
||||
severity: ReviewSeverity;
|
||||
setSeverity: (severity: ReviewSeverity) => void;
|
||||
loadNextPage: () => void;
|
||||
markItemAsReviewed: (reviewId: string) => void;
|
||||
pullLatestData: () => void;
|
||||
};
|
||||
export default function MobileEventView({
|
||||
reviewPages,
|
||||
relevantPreviews,
|
||||
reachedEnd,
|
||||
isValidating,
|
||||
severity,
|
||||
setSeverity,
|
||||
loadNextPage,
|
||||
markItemAsReviewed,
|
||||
pullLatestData,
|
||||
}: MobileEventViewProps) {
|
||||
const { data: config } = useSWR<FrigateConfig>("config");
|
||||
const contentRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
// review paging
|
||||
|
||||
const reviewItems = useMemo(() => {
|
||||
const all: ReviewSegment[] = [];
|
||||
const alerts: ReviewSegment[] = [];
|
||||
const detections: ReviewSegment[] = [];
|
||||
const motion: ReviewSegment[] = [];
|
||||
|
||||
reviewPages?.forEach((page) => {
|
||||
page.forEach((segment) => {
|
||||
all.push(segment);
|
||||
|
||||
switch (segment.severity) {
|
||||
case "alert":
|
||||
alerts.push(segment);
|
||||
break;
|
||||
case "detection":
|
||||
detections.push(segment);
|
||||
break;
|
||||
default:
|
||||
motion.push(segment);
|
||||
break;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
all: all,
|
||||
alert: alerts,
|
||||
detection: detections,
|
||||
significant_motion: motion,
|
||||
};
|
||||
}, [reviewPages]);
|
||||
|
||||
const currentItems = useMemo(() => {
|
||||
const current = reviewItems[severity];
|
||||
|
||||
if (!current || current.length == 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return current;
|
||||
}, [reviewItems, severity]);
|
||||
|
||||
// review interaction
|
||||
|
||||
const pagingObserver = useRef<IntersectionObserver | null>();
|
||||
const lastReviewRef = useCallback(
|
||||
(node: HTMLElement | null) => {
|
||||
if (isValidating) return;
|
||||
if (pagingObserver.current) pagingObserver.current.disconnect();
|
||||
try {
|
||||
pagingObserver.current = new IntersectionObserver((entries) => {
|
||||
if (entries[0].isIntersecting && !reachedEnd) {
|
||||
loadNextPage();
|
||||
}
|
||||
});
|
||||
if (node) pagingObserver.current.observe(node);
|
||||
} catch (e) {
|
||||
// no op
|
||||
}
|
||||
},
|
||||
[isValidating, reachedEnd]
|
||||
);
|
||||
|
||||
const [minimap, setMinimap] = useState<string[]>([]);
|
||||
const minimapObserver = useRef<IntersectionObserver | null>();
|
||||
useEffect(() => {
|
||||
const visibleTimestamps = new Set<string>();
|
||||
minimapObserver.current = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
const start = (entry.target as HTMLElement).dataset.start;
|
||||
|
||||
if (!start) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (entry.isIntersecting) {
|
||||
visibleTimestamps.add(start);
|
||||
} else {
|
||||
visibleTimestamps.delete(start);
|
||||
}
|
||||
|
||||
setMinimap([...visibleTimestamps]);
|
||||
});
|
||||
},
|
||||
{ threshold: 0.5 }
|
||||
);
|
||||
|
||||
return () => {
|
||||
minimapObserver.current?.disconnect();
|
||||
};
|
||||
}, []);
|
||||
const minimapRef = useCallback(
|
||||
(node: HTMLElement | null) => {
|
||||
if (!minimapObserver.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
if (node) minimapObserver.current.observe(node);
|
||||
} catch (e) {
|
||||
// no op
|
||||
}
|
||||
},
|
||||
[minimapObserver.current]
|
||||
);
|
||||
const minimapBounds = useMemo(() => {
|
||||
const data = {
|
||||
start: 0,
|
||||
end: 0,
|
||||
};
|
||||
const list = minimap.sort();
|
||||
|
||||
if (list.length > 0) {
|
||||
data.end = parseFloat(list.at(-1)!!);
|
||||
data.start = parseFloat(list[0]);
|
||||
}
|
||||
|
||||
return data;
|
||||
}, [minimap]);
|
||||
|
||||
if (!config) {
|
||||
return <ActivityIndicator />;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<ToggleGroup
|
||||
type="single"
|
||||
defaultValue="alert"
|
||||
size="sm"
|
||||
onValueChange={(value: ReviewSeverity) => setSeverity(value)}
|
||||
>
|
||||
<ToggleGroupItem
|
||||
className={`px-3 py-4 rounded-2xl ${
|
||||
severity == "alert" ? "" : "text-gray-500"
|
||||
}`}
|
||||
value="alert"
|
||||
aria-label="Select alerts"
|
||||
>
|
||||
<MdCircle className="w-2 h-2 mr-[10px] text-severity_alert" />
|
||||
Alerts
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem
|
||||
className={`px-3 py-4 rounded-2xl ${
|
||||
severity == "detection" ? "" : "text-gray-500"
|
||||
}`}
|
||||
value="detection"
|
||||
aria-label="Select detections"
|
||||
>
|
||||
<MdCircle className="w-2 h-2 mr-[10px] text-severity_detection" />
|
||||
Detections
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem
|
||||
className={`px-3 py-4 rounded-2xl ${
|
||||
severity == "significant_motion" ? "" : "text-gray-500"
|
||||
}`}
|
||||
value="significant_motion"
|
||||
aria-label="Select motion"
|
||||
>
|
||||
<MdCircle className="w-2 h-2 mr-[10px] text-severity_motion" />
|
||||
Motion
|
||||
</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
|
||||
<NewReviewData
|
||||
className="absolute w-full z-30"
|
||||
contentRef={contentRef}
|
||||
severity={severity}
|
||||
pullLatestData={pullLatestData}
|
||||
/>
|
||||
|
||||
<div
|
||||
ref={contentRef}
|
||||
className="w-full h-full grid grid-cols-1 sm:grid-cols-2 mt-2 gap-2 overflow-y-auto"
|
||||
>
|
||||
{currentItems ? (
|
||||
currentItems.map((value, segIdx) => {
|
||||
const lastRow = segIdx == currentItems.length - 1;
|
||||
const relevantPreview = Object.values(relevantPreviews || []).find(
|
||||
(preview) =>
|
||||
preview.camera == value.camera &&
|
||||
preview.start < value.start_time &&
|
||||
preview.end > value.end_time
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={value.id}
|
||||
ref={lastRow ? lastReviewRef : minimapRef}
|
||||
data-start={value.start_time}
|
||||
>
|
||||
<div className="w-full aspect-video rounded-lg overflow-hidden">
|
||||
<PreviewThumbnailPlayer
|
||||
review={value}
|
||||
relevantPreview={relevantPreview}
|
||||
autoPlayback={minimapBounds.end == value.start_time}
|
||||
setReviewed={markItemAsReviewed}
|
||||
/>
|
||||
</div>
|
||||
{lastRow && !reachedEnd && <ActivityIndicator />}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<div ref={lastReviewRef} />
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user