Initial push to new VMS-frontend repository

add resize observer from frigate

.env.docker

@@ -1,4 +1,4 @@
-FRIGATE_PROXY=http://localhost:4000
+FRIGATE_PROXY=http://frigate-proxy:4000
-OPENID_SERVER=https://your.server.com:443/realms/your-realm
+OPENID_SERVER=https://keycloak:8443
-REALM=frigate-realm
 CLIENT_ID=frontend-client
+REALM=frigate-realm

Dockerfile

@@ -1,6 +1,7 @@
 # syntax=docker/dockerfile:1
 # Build commands:
-# - $VERSION="0.1.9"
+# - $VERSION="0.2.1"
+# - npx update-browserslist-db@latest
 # - rm build -r -Force ; rm ./node_modules/.cache/babel-loader -r -Force ; yarn build
 # - docker build --pull --rm -t oncharterliz/multi-frigate:latest -t oncharterliz/multi-frigate:$VERSION "."
 # - docker save -o ./release/multi-frigate.$VERSION.tar oncharterliz/multi-frigate:$VERSION

package.json

@@ -1,6 +1,6 @@
 {
   "name": "multi-frigate",
-  "version": "0.1.8",
+  "version": "0.2.1",
   "private": true,
   "dependencies": {
     "@cycjimmy/jsmpeg-player": "^6.0.5",
@@ -25,6 +25,7 @@
     "@types/validator": "^13.7.17",
     "axios": "^1.4.0",
     "bson-objectid": "^2.0.4",
+    "clsx": "^2.1.1",
     "cookies-next": "^4.1.1",
     "cpr": "^3.0.1",
     "date-fns": "^3.3.1",
@@ -55,6 +56,7 @@
     "react-scripts": "5.0.1",
     "react-use-websocket": "^4.7.0",
     "strftime": "0.10.1",
+    "tailwind-merge": "^3.0.1",
     "typescript": "^4.4.2",
     "validator": "^13.9.0",
     "video.js": "^8.10.0",

src/AppBody.tsx

@@ -16,7 +16,7 @@ const AppBody = () => {
         { link: routesPath.SETTINGS_PATH, label: t('header.settings'), admin: true },
         { link: routesPath.RECORDINGS_PATH, label: t('header.recordings') },
         { link: routesPath.EVENTS_PATH, label: t('header.events') },
-        { link: routesPath.HOSTS_PATH, label: t('header.hostsConfig'), admin: true },
+        { link: routesPath.HOSTS_PATH, label: t('header.sitesConfig'), admin: true },
         { link: routesPath.ACCESS_PATH, label: t('header.acessSettings'), admin: true },
     ]
 

src/hooks/resize-observer.ts

@@ -0,0 +1,69 @@
+import { MutableRefObject, useEffect, useMemo, useState } from "react";
+
+type RefType = MutableRefObject<Element | null> | Window;
+
+export function useResizeObserver(...refs: RefType[]) {
+  const [dimensions, setDimensions] = useState<
+    { width: number; height: number; x: number; y: number }[]
+  >(
+    new Array(refs.length).fill({
+      width: 0,
+      height: 0,
+      x: -Infinity,
+      y: -Infinity,
+    }),
+  );
+  const resizeObserver = useMemo(
+    () =>
+      new ResizeObserver((entries) => {
+        window.requestAnimationFrame(() => {
+          setDimensions((prevDimensions) => {
+            const newDimensions = entries.map((entry) => entry.contentRect);
+            if (
+              JSON.stringify(prevDimensions) !== JSON.stringify(newDimensions)
+            ) {
+              return newDimensions;
+            }
+            return prevDimensions;
+          });
+        });
+      }),
+    [],
+  );
+
+  useEffect(() => {
+    refs.forEach((ref) => {
+      if (ref instanceof Window) {
+        resizeObserver.observe(document.body);
+      } else if (ref.current) {
+        resizeObserver.observe(ref.current);
+      }
+    });
+
+    return () => {
+      refs.forEach((ref) => {
+        if (ref instanceof Window) {
+          resizeObserver.unobserve(document.body);
+        } else if (ref.current) {
+          resizeObserver.unobserve(ref.current);
+        }
+      });
+    };
+  }, [refs, resizeObserver]);
+
+  if (dimensions.length == refs.length) {
+    return dimensions;
+  } else {
+    const items = [...dimensions];
+    for (let i = dimensions.length; i < refs.length; i++) {
+      items.push({
+        width: 0,
+        height: 0,
+        x: -Infinity,
+        y: -Infinity,
+      });
+    }
+
+    return items;
+  }
+}

src/index.tsx

@@ -6,7 +6,7 @@ import App from './App';
 import reportWebVitals from './reportWebVitals';
 import './services/i18n';
 import keycloakInstance from './services/keycloak-config';
-import CenterLoader from './shared/components/loaders/CenterLoader';
+import OverlayCogwheelLoader from './shared/components/loaders/OverlayCogwheelLoader';
 import RootStore from './shared/stores/root.store';
 import { isProduction } from './shared/env.const';
 import { ErrorBoundary } from 'react-error-boundary';
@@ -32,7 +32,7 @@ const tokenLogger = (tokens: any) => {
 root.render(
   <ReactKeycloakProvider
     authClient={keycloakInstance}
-    LoadingComponent={<CenterLoader />}
+    LoadingComponent={<OverlayCogwheelLoader />}
     onEvent={eventLogger}
     onTokens={tokenLogger}
     initOptions={{

src/locales/en.ts

@@ -18,6 +18,12 @@ const en = {
         selectStartTime: 'Select start time:',
         selectEndTime: 'Select end time:',
         startTimeBiggerThanEnd: 'Start time bigger than end time',
+        confidenceThreshold: 'Confidence Threshold',
+        objectTypeFilter: 'Object Type',
+        selectObjectType: 'Select object types...',
+        eventTypeFilter: 'Event Type',
+        allEvents: 'All Events',
+        aiDetectionOnly: 'AI Detection',
     },
     frigateConfigPage: {
         copyConfig: 'Copy Config',
@@ -70,10 +76,10 @@ const en = {
         memory: 'Memory %'
     },
     hostMenu: {
-        editConfig: 'Редакт. конфиг.',
+        editConfig: 'Edit config',
-        restart: 'Перезагрузка',
+        restart: 'Restart',
-        system: 'Система',
+        system: 'System',
-        storage: 'Хранилище',
+        storage: 'Storage',
     },
 
     header: {
@@ -81,18 +87,25 @@ const en = {
         settings: 'Settings',
         recordings: 'Recordings',
         events: 'Events',
-        hostsConfig: 'Frigate servers',
+        sitesConfig: 'Sites',
         acessSettings: 'Access settings',
     },
-    frigateHostTableTitles: {
+    siteTableTitles: {
-        host: 'Хост',
+        siteName: 'Site Name',
-        name: 'Имя хоста',
+        location: 'Physical Location',
-        url: 'Адрес',
+        url: 'Frigate URL',
-        enabled: 'Включен',
+        enabled: 'Enabled',
     },
-    frigateHostTablePlaceholders: {
+    siteTablePlaceholders: {
-        host: 'http://host.docker.internal:5000 or http://192.168.1.1:5000',
+        url: 'http://host.docker.internal:5000 or http://192.168.1.1:5000',
-        name: 'YourFrigateHostName',
+        name: 'Warehouse North',
+        location: 'Building A, Floor 2',
+    },
+    siteStatus: {
+        online: 'Online',
+        degraded: 'Degraded',
+        offline: 'Offline',
+        camerasOnline: '{{online}}/{{total}} cameras online',
     },
     player: {
         startVideo: 'Enable Video',
@@ -114,7 +127,7 @@ const en = {
     version: 'Version',
     uptime: 'Uptime',
     pleaseSelectRole: 'Please select Role',
-    pleaseSelectHost: 'Please select Host',
+    pleaseSelectSite: 'Please select Site',
     pleaseSelectCamera: 'Please select Camera',
     pleaseSelectDate: 'Please select Date',
     nothingHere: 'Nothing here',
@@ -131,7 +144,7 @@ const en = {
     events: 'Events',
     notHaveEvents: 'No events',
     notHaveEventsAtThatPeriod: 'Not have events at that period',
-    selectHost: 'Select host',
+    selectSite: 'Select site',
     selectCamera: 'Select Camera',
     selectRange: 'Select period',
     changeTheme: "Change theme",

src/locales/ru.ts

@@ -16,6 +16,12 @@ const ru = {
         selectStartTime: 'Выбери время начала:',
         selectEndTime: 'Выбери время окончания:',
         startTimeBiggerThanEnd: 'Время начала больше времени окончания',
+        confidenceThreshold: 'Порог уверенности',
+        objectTypeFilter: 'Тип объекта',
+        selectObjectType: 'Выберите типы объектов...',
+        eventTypeFilter: 'Тип события',
+        allEvents: 'Все события',
+        aiDetectionOnly: 'AI обнаружение',
     },
     frigateConfigPage: {
         copyConfig: 'Копировать Конфиг.',
@@ -78,18 +84,25 @@ const ru = {
         settings: 'Настройки',
         recordings: 'Записи',
         events: 'События',
-        hostsConfig: 'Серверы Frigate',
+        sitesConfig: 'Объекты',
         acessSettings: 'Настройка доступа',
     },
-    frigateHostTableTitles: {
+    siteTableTitles: {
-        host: 'Хост',
+        siteName: 'Название объекта',
-        name: 'Имя хоста',
+        location: 'Физ. расположение',
-        url: 'Адрес',
+        url: 'Frigate URL',
         enabled: 'Включен',
     },
-    frigateHostTablePlaceholders: {
+    siteTablePlaceholders: {
-        host: 'http://host.docker.internal:5000 or http://192.168.1.1:5000',
+        url: 'http://host.docker.internal:5000 or http://192.168.1.1:5000',
-        name: 'YourFrigateHostName',
+        name: 'Склад Северный',
+        location: 'Здание А, Этаж 2',
+    },
+    siteStatus: {
+        online: 'В сети',
+        degraded: 'Частично',
+        offline: 'Не в сети',
+        camerasOnline: '{{online}}/{{total}} камер в сети',
     },
     player: {
         startVideo: 'Вкл. Видео',
@@ -111,7 +124,7 @@ const ru = {
     version: 'Версия',
     uptime: 'Время работы',
     pleaseSelectRole: 'Пожалуйста выберите роль',
-    pleaseSelectHost: 'Пожалуйста выберите хост',
+    pleaseSelectSite: 'Пожалуйста выберите объект',
     pleaseSelectCamera: 'Пожалуйста выберите камеру',
     pleaseSelectDate: 'Пожалуйста выберите дату',
     nothingHere: 'Ничего нет',
@@ -128,7 +141,7 @@ const ru = {
     events: 'События',
     notHaveEvents: 'Событий нет',
     notHaveEventsAtThatPeriod: 'Нет событий за этот период',
-    selectHost: 'Выбери хост',
+    selectSite: 'Выбери объект',
     selectCamera: 'Выбери камеру',
     selectRange: 'Выбери период',
     changeTheme: "Изменить тему",

src/pages/AccessSettingsPage.tsx

@@ -8,7 +8,7 @@ import { useAdminRole } from '../hooks/useAdminRole';
 import { frigateApi, frigateQueryKeys } from '../services/frigate.proxy/frigate.api';
 import CamerasTransferList from '../shared/components/CamerasTransferList';
 import RoleSelectFilter from '../shared/components/filters/RoleSelectFilter';
-import CenterLoader from '../shared/components/loaders/CenterLoader';
+import OverlayCogwheelLoader from '../shared/components/loaders/OverlayCogwheelLoader';
 import { dimensions } from '../shared/dimensions/dimensions';
 import { isProduction } from '../shared/env.const';
 import Forbidden from './403';
@@ -22,13 +22,10 @@ const AccessSettings = () => {
     })
     const { isAdmin, isLoading: adminLoading, isError: adminError } = useAdminRole()
 
-
-
     const isMobile = useMediaQuery(dimensions.mobileSize)
     const [roleId, setRoleId] = useState<string>()
 
-
+    if (isPending || adminLoading) return <OverlayCogwheelLoader />
-    if (isPending || adminLoading) return <CenterLoader />
     if (isError || adminError || !data) return <RetryErrorPage onRetry={refetch} />
     if (!isAdmin) return <Forbidden />
 

src/pages/EditCameraPage.tsx

@@ -1,15 +1,16 @@
-import { Button, Center, Flex, Text } from '@mantine/core';
+import { Button, Center, Flex, Text, Divider, Paper, Title } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 import { IconAlertCircle, IconCircleCheck } from '@tabler/icons-react';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { observer } from 'mobx-react-lite';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import { useAdminRole } from '../hooks/useAdminRole';
 import { frigateApi, frigateQueryKeys, mapHostToHostname, proxyApi } from '../services/frigate.proxy/frigate.api';
 import MaskSelect, { MaskItem, MaskType } from '../shared/components/filters/MaskSelect';
-import CenterLoader from '../shared/components/loaders/CenterLoader';
+import OverlayCogwheelLoader from '../shared/components/loaders/OverlayCogwheelLoader';
+import RetentionSettings from '../shared/components/RetentionSettings';
 import { Point, extractMaskNumber } from '../shared/utils/maskPoint';
 import CameraMaskDrawer from '../widgets/CameraMaskDrawer';
 import CameraPageHeader from '../widgets/header/CameraPageHeader';
@@ -22,6 +23,7 @@ const EditCameraPage = () => {
     if (!cameraId) throw Error(t('editCameraPage.cameraIdNotExist'))
     const [selectedMask, setSelectedMask] = useState<MaskItem>()
     const [points, setPoints] = useState<Point[]>()
+    const [retentionDays, setRetentionDays] = useState<number>(0)
 
     const { data: camera, isPending, isError, refetch } = useQuery({
         queryKey: [frigateQueryKeys.getCameraWHost, cameraId],
@@ -103,7 +105,7 @@ const EditCameraPage = () => {
 
     const { isAdmin, isLoading: adminLoading, isError: adminError } = useAdminRole()
 
-    if (isPending || adminLoading) return <CenterLoader />
+    if (isPending || adminLoading) return <OverlayCogwheelLoader />
     if (!isAdmin) return <Forbidden />
     if (isError || adminError) return <RetryErrorPage onRetry={refetch} />
 
@@ -143,9 +145,45 @@ const EditCameraPage = () => {
         setPoints([])
     }
 
+    // Initialize retention days from camera config
+    useEffect(() => {
+        if (camera?.config?.record?.retain?.days !== undefined) {
+            setRetentionDays(camera.config.record.retain.days)
+        }
+    }, [camera])
+
+    const handleRetentionChange = (days: number) => {
+        setRetentionDays(days)
+        // Note: Actual config update requires modifying the Frigate YAML config
+        // This could be integrated with a save button that calls proxyApi.postHostConfig
+        notifications.show({
+            id: 'retention-changed',
+            withCloseButton: true,
+            autoClose: 3000,
+            title: t('settings.retentionUpdated'),
+            message: t('settings.retentionUpdatedMessage', { days }),
+            color: 'blue',
+        })
+    }
+
     return (
         <Flex w='100%' h='100%' direction='column'>
             <CameraPageHeader camera={camera} configButton />
+
+            {/* Retention Settings Section */}
+            <Paper shadow="xs" p="md" mb="lg" mx="md" withBorder>
+                <Title order={4} mb="sm">{t('settings.recordingRetention')}</Title>
+                <RetentionSettings
+                    currentDays={retentionDays}
+                    onChange={handleRetentionChange}
+                />
+                <Text size="xs" color="dimmed" mt="xs">
+                    {t('settings.retentionNote')}
+                </Text>
+            </Paper>
+
+            <Divider my="md" label={t('editCameraPage.maskSettings')} labelPosition="center" />
+
             {!camera.config ? null :
                 <Flex w='100%' justify='center' mb='1rem'>
                     <MaskSelect

src/pages/EventsPage.tsx

@@ -18,6 +18,9 @@ export const eventsQueryParams = {
     endDate: 'endDate',
     startTime: 'startTime',
     endTime: 'endTime',
+    minScore: 'minScore',
+    labels: 'labels',
+    eventType: 'eventType',
 }
 
 const EventsPage = () => {
@@ -34,14 +37,17 @@ const EventsPage = () => {
         const paramEndDate = searchParams.get(eventsQueryParams.endDate) || undefined
         const paramStartTime = searchParams.get(eventsQueryParams.startTime) || undefined
         const paramEndTime = searchParams.get(eventsQueryParams.endTime) || undefined
-        eventsStore.loadFiltersFromPage(paramHostId, paramCameraId, paramStartDate, paramEndDate, paramStartTime, paramEndTime)
+        const paramMinScore = searchParams.get(eventsQueryParams.minScore) || undefined
+        const paramLabels = searchParams.get(eventsQueryParams.labels) || undefined
+        const paramEventType = searchParams.get(eventsQueryParams.eventType) || undefined
+        eventsStore.loadFiltersFromPage(paramHostId, paramCameraId, paramStartDate, paramEndDate, paramStartTime, paramEndTime, paramMinScore, paramLabels, paramEventType)
         return () => setRightChildren(null)
     }, [])
 
     const { eventsStore } = useContext(Context)
 
 
-    const { hostId, cameraId, period, startTime, endTime } = eventsStore.filters
+    const { hostId, cameraId, period, startTime, endTime, minScore, labels, eventType } = eventsStore.filters
 
     useEffect(() => {
 
@@ -73,6 +79,9 @@ const EventsPage = () => {
                 period={[period[0], period[1]]}
                 startTime={startTime}
                 endTime={endTime}
+                minScore={minScore}
+                labels={labels}
+                eventType={eventType}
             />
         )
     }

src/pages/FrigateHostsPage.tsx

@@ -8,7 +8,7 @@ import { useTranslation } from 'react-i18next';
 import { useAdminRole } from '../hooks/useAdminRole';
 import { frigateApi, frigateQueryKeys } from '../services/frigate.proxy/frigate.api';
 import { GetFrigateHost, deleteFrigateHostSchema, putFrigateHostSchema } from '../services/frigate.proxy/frigate.schema';
-import CenterLoader from '../shared/components/loaders/CenterLoader';
+import OverlayCogwheelLoader from '../shared/components/loaders/OverlayCogwheelLoader';
 import { isProduction } from '../shared/env.const';
 import FrigateHostsTable from '../widgets/hosts.table/FrigateHostsTable';
 import Forbidden from './403';
@@ -88,7 +88,7 @@ const FrigateHostsPage = () => {
         if (data) setPageData([...data])
     }
 
-    if (hostsPending || adminLoading) return <CenterLoader />
+    if (hostsPending || adminLoading) return <OverlayCogwheelLoader />
     if (!isAdmin) return <Forbidden />
     if (hostsError || adminError) return <RetryErrorPage />
     if (!pageData) return <Text>Empty server response</Text>

src/pages/HostConfigPage.tsx

@@ -13,7 +13,7 @@ import { useLocation, useParams } from 'react-router-dom';
 import { useAdminRole } from '../hooks/useAdminRole';
 import { frigateApi, frigateQueryKeys, mapHostToHostname, proxyApi } from '../services/frigate.proxy/frigate.api';
 import { GetFrigateHost } from '../services/frigate.proxy/frigate.schema';
-import CenterLoader from '../shared/components/loaders/CenterLoader';
+import OverlayCogwheelLoader from '../shared/components/loaders/OverlayCogwheelLoader';
 import { isProduction } from '../shared/env.const';
 import { SaveOption } from '../types/saveConfig';
 import Forbidden from './403';
@@ -148,7 +148,7 @@ const HostConfigPage = () => {
       saveConfig({ saveOption: saveOption, config: editorRef.current.getValue() })
     }, [editorRef])
 
-  if (configPending || adminLoading) return <CenterLoader />
+  if (configPending || adminLoading) return <OverlayCogwheelLoader />
 
   if (configError) return <RetryErrorPage onRetry={refetch} />
   if (!isAdmin) return <Forbidden />

src/pages/HostSystemPage.tsx

@@ -8,7 +8,7 @@ import { useParams } from 'react-router-dom';
 import { useAdminRole } from '../hooks/useAdminRole';
 import { frigateApi, frigateQueryKeys, mapHostToHostname, proxyApi } from '../services/frigate.proxy/frigate.api';
 import { GetFrigateHost } from '../services/frigate.proxy/frigate.schema';
-import CenterLoader from '../shared/components/loaders/CenterLoader';
+import OverlayCogwheelLoader from '../shared/components/loaders/OverlayCogwheelLoader';
 import DetectorsStat from '../shared/components/stats/DetectorsStat';
 import GpuStat from '../shared/components/stats/GpuStat';
 import StorageRingStat from '../shared/components/stats/StorageRingStat';
@@ -72,7 +72,7 @@ const HostSystemPage = () => {
         });
     }, [data]);
 
-    if (isPending) return <CenterLoader />
+    if (isPending) return <OverlayCogwheelLoader />
     if (isError) return <RetryErrorPage onRetry={refetch} />
     if (!isAdmin) return <Forbidden />
     if (!paramHostId || !data) return null

src/pages/LiveCameraPage.tsx

@@ -4,13 +4,16 @@ import { observer } from 'mobx-react-lite';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import { frigateApi, frigateQueryKeys } from '../services/frigate.proxy/frigate.api';
-import CenterLoader from '../shared/components/loaders/CenterLoader';
+import OverlayCogwheelLoader from '../shared/components/loaders/OverlayCogwheelLoader';
 import Player from '../widgets/Player';
 import CameraPageHeader from '../widgets/header/CameraPageHeader';
 import RetryErrorPage from './RetryErrorPage';
+import { LegacyRef, useRef } from 'react';
+import CenteredCogwheelLoader from '../shared/components/loaders/CenteredCogwheelLoader';
 
 const LiveCameraPage = () => {
     const { t } = useTranslation()
+    const containerRef = useRef<HTMLDivElement | null>(null)
     let { id: cameraId } = useParams<'id'>()
     if (!cameraId) throw Error('Camera id does not exist')
 
@@ -19,15 +22,20 @@ const LiveCameraPage = () => {
         queryFn: () => frigateApi.getCameraWHost(cameraId!)
     })
 
-    if (isPending) return <CenterLoader />
+    if (isPending) return <CenteredCogwheelLoader />
 
     if (isError) return <RetryErrorPage onRetry={refetch} />
 
 
     return (
-        <Flex w='100%' h='100%' justify='center' align='center' direction='column'>
+        <Flex ref={containerRef} w='100%' h='100%' justify='center' align='center' direction='column'>
             <CameraPageHeader camera={camera} editButton />
-            <Player camera={camera} />
+            <Player 
+            camera={camera} 
+            useWebGL={true}
+            preferredLiveMode='jsmpeg'
+            containerRef={containerRef}
+            />
         </Flex>
     );
 }

src/pages/MainPage.tsx

@@ -1,6 +1,6 @@
-import { Flex, Grid } from '@mantine/core';
+import { Flex, Accordion } from '@mantine/core';
 import { IconSearch } from '@tabler/icons-react';
-import { useInfiniteQuery } from '@tanstack/react-query';
+import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
 import { observer } from 'mobx-react-lite';
 import { ChangeEvent, useContext, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -10,14 +10,15 @@ import { Context } from '..';
 import { useDebounce } from '../hooks/useDebounce';
 import { useRealmUser } from '../hooks/useRealmUser';
 import { frigateApi, frigateQueryKeys } from '../services/frigate.proxy/frigate.api';
-import { GetCameraWHostWConfig } from '../services/frigate.proxy/frigate.schema';
+import { GetCameraWHostWConfig, GetFrigateHost } from '../services/frigate.proxy/frigate.schema';
 import ClearableTextInput from '../shared/components/inputs/ClearableTextInput';
+import CenteredCogwheelLoader from '../shared/components/loaders/CenteredCogwheelLoader';
 import CogwheelLoader from '../shared/components/loaders/CogwheelLoader';
 import { isProduction } from '../shared/env.const';
-import CameraCard from '../widgets/card/CameraCard';
 import MainFiltersRightSide from '../widgets/sidebars/MainFiltersRightSide';
 import { SideBarContext } from '../widgets/sidebars/SideBarContext';
 import RetryErrorPage from './RetryErrorPage';
+import SiteGroup from '../shared/components/SiteGroup';
 
 export const mainPageParams = {
     hostId: 'hostId',
@@ -42,6 +43,11 @@ const MainPage = () => {
 
     const pageSize = 20;
 
+    const { data: sitesData } = useQuery({
+        queryKey: [frigateQueryKeys.getFrigateHosts],
+        queryFn: frigateApi.getHosts
+    })
+
     const {
         data,
         isLoading,
@@ -54,7 +60,6 @@ const MainPage = () => {
     } = useInfiniteQuery<GetCameraWHostWConfig[]>({
         queryKey: [frigateQueryKeys.getCamerasWHost, selectedHostId, searchQuery, selectedTags],
         queryFn: ({ pageParam = 0 }) =>
-            // Pass pagination parameters to the backend
             frigateApi.getCamerasWHost({
                 name: searchQuery,
                 frigateHostId: selectedHostId,
@@ -63,16 +68,13 @@ const MainPage = () => {
                 limit: pageSize,
             }),
         getNextPageParam: (lastPage, pages) => {
-            // If last page size is less than pageSize, no more pages
             if (lastPage.length < pageSize) return undefined;
-            // Next page offset is pages.length * pageSize
             return pages.length * pageSize;
         },
         initialPageParam: 0,
     });
 
     const cameras: GetCameraWHostWConfig[] = data?.pages.flat() || [];
-    // const cameras: GetCameraWHostWConfig[] = [];
 
     const [visibleCount, setVisibleCount] = useState(pageSize)
 
@@ -83,10 +85,9 @@ const MainPage = () => {
             } else if (hasNextPage && !isFetchingNextPage) {
                 loadTriggered.current = true;
                 fetchNextPage().then(() => {
-                    // Add a small delay before resetting the flag
                     setTimeout(() => {
                         loadTriggered.current = false;
-                    }, 300); // delay in milliseconds; adjust as needed
+                    }, 300);
                 });
             }
         }
@@ -113,7 +114,6 @@ const MainPage = () => {
         return () => setRightChildren(null);
     }, []);
 
-
     const debouncedHandleSearchQuery = useDebounce((value: string) => {
         mainStore.setSearchQuery(value, navigate);
     }, 600);
@@ -122,16 +122,31 @@ const MainPage = () => {
         debouncedHandleSearchQuery(event.currentTarget.value)
     }
 
-    if (isLoading) return <CogwheelLoader />;
+    if (isLoading) return <CenteredCogwheelLoader />;
     if (isError) return <RetryErrorPage onRetry={refetch} />
-    if (!isProduction) console.log('MainPage rendered')
 
+    const enabledSites = sitesData?.filter(s => s.enabled) || []
+
+    // Group cameras by site
+    const visibleCameras = cameras.slice(0, visibleCount)
+    const groupedCameras: Record<string, GetCameraWHostWConfig[]> = {}
+
+    visibleCameras.forEach(camera => {
+        const siteId = camera.frigateHost?.id
+        if (siteId) {
+            if (!groupedCameras[siteId]) groupedCameras[siteId] = []
+            groupedCameras[siteId].push(camera)
+        }
+    })
+
+    // Determine initial expanded items (all sites with cameras)
+    const initialExpanded = enabledSites
+        .filter(site => groupedCameras[site.id]?.length > 0)
+        .map(site => site.id)
 
     return (
         <Flex direction='column' h='100%' w='100%' >
-            <Flex w='100%'
+            <Flex w='100%' justify='center'>
-                justify='center'
-            >
                 <ClearableTextInput
                     clearable
                     maw={400}
@@ -142,14 +157,31 @@ const MainPage = () => {
                     onChange={onInputChange}
                 />
             </Flex>
-            <Flex justify='center' h='100%' direction='column' w='100%' >
+            <Flex justify='center' h='100%' direction='column' w='100%' mt="md">
-                <Grid mt='sm' justify="center" mb='sm' align='stretch'>
+                <Accordion multiple defaultValue={initialExpanded} variant="separated">
-                    {cameras.slice(0, visibleCount).map(camera => (
+                    {enabledSites.map(site => {
-                        <CameraCard key={camera.id} camera={camera} />
+                        const siteCameras = groupedCameras[site.id] || []
-                    ))}
+                        const onlineCount = siteCameras.filter(c => c.state !== false).length
-                </Grid>
+
+                        // If we are filtering by host, only show that host
+                        if (selectedHostId && site.id !== selectedHostId) return null
+
+                        // If we are searching and this site has no matching cameras, skip it?
+                        // User requirement says "Map through the list of Sites", so maybe show even if empty?
+                        // Usually, it's better to show if it has cameras or if no search is active.
+                        if (searchQuery && siteCameras.length === 0) return null
+
+                        return (
+                            <SiteGroup
+                                key={site.id}
+                                site={site}
+                                cameras={siteCameras}
+                                onlineCount={onlineCount}
+                            />
+                        )
+                    })}
+                </Accordion>
                 {isFetching && !isFetchingNextPage ? <CogwheelLoader /> : null}
-                {/* trigger point. Rerender twice when enabled */}
                 <div ref={ref} style={{ height: '50px' }} />
             </Flex>
         </Flex>

src/pages/PlayRecordPage.tsx

@@ -6,6 +6,7 @@ import NotFound from './404';
 
 export const playRecordPageQuery = {
     link: 'link',
+    startTime: 'startTime',
 }
 
 const PlayRecordPage = () => {
@@ -13,11 +14,15 @@ const PlayRecordPage = () => {
     const location = useLocation()
     const queryParams = new URLSearchParams(location.search)
     const paramLink = queryParams.get(playRecordPageQuery.link)
+    const paramStartTime = queryParams.get(playRecordPageQuery.startTime)
+
+    // Parse startTime as Unix timestamp (seconds) and convert to video-relative offset if needed
+    const initialSeekTime = paramStartTime ? parseFloat(paramStartTime) : undefined
 
     if (!paramLink) return (<NotFound />)
     return (
         <Flex w='100%' h='100%' justify='center' align='center' direction='column'>
-            <VideoPlayer videoUrl={paramLink} />
+            <VideoPlayer videoUrl={paramLink} initialSeekTime={initialSeekTime} />
         </Flex>
     );
 };

src/pages/SettingsPage.tsx

@@ -7,11 +7,12 @@ import { useTranslation } from 'react-i18next';
 import { useAdminRole } from '../hooks/useAdminRole';
 import { frigateApi, frigateQueryKeys } from '../services/frigate.proxy/frigate.api';
 import { GetRole } from '../services/frigate.proxy/frigate.schema';
-import CenterLoader from '../shared/components/loaders/CenterLoader';
+import OverlayCogwheelLoader from '../shared/components/loaders/OverlayCogwheelLoader';
 import { dimensions } from '../shared/dimensions/dimensions';
 import OIDPSettingsForm from '../widgets/OIDPSettingsForm';
 import RolesSettingsForm from '../widgets/RolesSettingsForm';
 import Forbidden from './403';
+import VersionTag from '../shared/components/VersionTag';
 
 const SettingsPage = () => {
     const { t } = useTranslation()
@@ -37,10 +38,11 @@ const SettingsPage = () => {
     }
 
     if (!isAdmin) return <Forbidden />
-    if (adminLoading) return <CenterLoader />
+    if (adminLoading) return <OverlayCogwheelLoader />
 
     return (
         <Flex h='100%'>
+            <VersionTag />
             {!isMobile ?
                 < Space w='20%' />
                 : null

src/services/frigate.proxy/frigate.schema.ts

@@ -28,6 +28,7 @@ export const getFrigateHostSchema = z.object({
     updateAt: z.string(),
     name: z.string(),
     host: z.string(),
+    location: z.string().optional(),
     enabled: z.boolean(),
     state: z.boolean().nullable().optional()
 });
@@ -131,7 +132,7 @@ export type GetFrigateHost = z.infer<typeof getFrigateHostSchema>
 export type GetFrigateHostWConfig = GetFrigateHost & { config: FrigateConfig }
 export type GetCamera = z.infer<typeof getCameraSchema>
 export type GetCameraWHost = z.infer<typeof getCameraWithHostSchema>
-export type GetCameraWHostWConfig = GetCameraWHost & { config?: CameraConfig }
+export type GetCameraWHostWConfig = GetCameraWHost & { config: CameraConfig }
 export type PutFrigateHost = z.infer<typeof putFrigateHostSchema>
 export type DeleteFrigateHost = z.infer<typeof deleteFrigateHostSchema>
 export type GetRole = z.infer<typeof getRoleSchema>

src/shared/components/AddBadge.tsx

@@ -1,9 +1,9 @@
-import { ActionIcon, Badge, Button, Menu, rem } from '@mantine/core';
+import { ActionIcon, Badge, Menu, rem } from '@mantine/core';
 import { IconPlus } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
 import React from 'react';
-import { frigateQueryKeys, frigateApi } from '../../services/frigate.proxy/frigate.api';
+import { frigateApi, frigateQueryKeys } from '../../services/frigate.proxy/frigate.api';
-import CogwheelLoader from './loaders/CogwheelLoader';
+import CenteredCogwheelLoader from './loaders/CenteredCogwheelLoader';
 import RetryError from './RetryError';
 
 interface AddBadgeProps {
@@ -24,7 +24,7 @@ const AddBadge: React.FC<AddBadgeProps> = ({
         if (onClick) onClick(tagId)
     }
 
-    if (isPending) return <CogwheelLoader />
+    if (isPending) return <CenteredCogwheelLoader />
     if (isError) return <RetryError onRetry={refetch} />
 
     if (!data || data.length < 1) return (

src/shared/components/CamerasTransferList.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { frigateApi, frigateQueryKeys } from '../../services/frigate.proxy/frigate.api';
 import { isProduction } from '../env.const';
 import RetryError from './RetryError';
-import CogwheelLoader from './loaders/CogwheelLoader';
+import CenteredCogwheelLoader from './loaders/CenteredCogwheelLoader';
 
 interface CamerasTransferListProps {
     roleId: string
@@ -17,7 +17,7 @@ const CamerasTransferList = ({
     const { t } = useTranslation()
     const queryClient = useQueryClient()
     const { data: cameras, isPending, isError, refetch } = useQuery({
-        queryKey: [frigateQueryKeys.getCamerasWHost],
+        queryKey: [frigateQueryKeys.getCamerasWHost, roleId],
         queryFn: () => frigateApi.getCamerasWHost()
     })
 
@@ -48,7 +48,7 @@ const CamerasTransferList = ({
     }, [cameras])
 
 
-    if (isPending) return <CogwheelLoader />
+    if (isPending) return <CenteredCogwheelLoader />
     if (isError || !cameras) return <RetryError onRetry={refetch} />
     if (cameras.length < 1) return <Text> {t('camersDoesNotExist')}</Text>
 

src/shared/components/RetentionSettings.tsx

@@ -0,0 +1,79 @@
+import { NumberInput, Text, Alert, Stack, Flex } from '@mantine/core';
+import { IconAlertTriangle } from '@tabler/icons-react';
+import { useTranslation } from 'react-i18next';
+
+interface RetentionSettingsProps {
+    /** Current retention days from camera config */
+    currentDays: number;
+    /** Callback when retention days change */
+    onChange: (days: number) => void;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+}
+
+/**
+ * Component for configuring camera recording retention period.
+ * Displays a numeric input for days with optional storage warning.
+ */
+const RetentionSettings = ({
+    currentDays,
+    onChange,
+    disabled = false,
+}: RetentionSettingsProps) => {
+    const { t } = useTranslation();
+
+    const handleChange = (value: number | string) => {
+        const numValue = typeof value === 'string' ? parseInt(value, 10) : value;
+        if (!isNaN(numValue) && numValue >= 0) {
+            onChange(numValue);
+        }
+    };
+
+    return (
+        <Stack spacing="xs">
+            <NumberInput
+                label={t('settings.retentionPeriod')}
+                description={t('settings.retentionDescription')}
+                value={currentDays}
+                onChange={handleChange}
+                min={0}
+                max={365}
+                step={1}
+                disabled={disabled}
+                styles={{
+                    input: {
+                        fontWeight: 500,
+                    },
+                }}
+                rightSection={
+                    <Text size="sm" color="dimmed" mr="md">
+                        {t('settings.days')}
+                    </Text>
+                }
+                rightSectionWidth={60}
+            />
+            {currentDays > 30 && (
+                <Alert
+                    icon={<IconAlertTriangle size={16} />}
+                    color="yellow"
+                    variant="light"
+                    title={t('settings.storageWarningTitle')}
+                >
+                    {t('settings.storageWarning')}
+                </Alert>
+            )}
+            {currentDays === 0 && (
+                <Alert
+                    icon={<IconAlertTriangle size={16} />}
+                    color="red"
+                    variant="light"
+                    title={t('settings.noRetentionTitle')}
+                >
+                    {t('settings.noRetentionWarning')}
+                </Alert>
+            )}
+        </Stack>
+    );
+};
+
+export default RetentionSettings;

src/shared/components/SiteGroup.tsx

@@ -0,0 +1,54 @@
+import { Accordion, Flex, Grid, Text, Group } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { GetCameraWHostWConfig, GetFrigateHost } from '../../services/frigate.proxy/frigate.schema';
+import CameraCard from '../../widgets/card/CameraCard';
+import SiteStatusBadge from './SiteStatusBadge';
+
+interface SiteGroupProps {
+    site: GetFrigateHost;
+    cameras: GetCameraWHostWConfig[];
+    onlineCount: number;
+}
+
+const SiteGroup = ({ site, cameras, onlineCount }: SiteGroupProps) => {
+    const { t } = useTranslation();
+
+    return (
+        <Accordion.Item value={site.id} sx={{ border: 'none' }}>
+            <Accordion.Control>
+                <Group position="apart">
+                    <Flex direction="column">
+                        <Text weight={700} size="lg">
+                            {site.name}
+                        </Text>
+                        {site.location && (
+                            <Text size="xs" color="dimmed">
+                                {site.location}
+                            </Text>
+                        )}
+                    </Flex>
+                    <SiteStatusBadge
+                        onlineCameras={onlineCount}
+                        totalCameras={cameras.length}
+                        isReachable={site.state !== false} // Assume true if null/undefined unless explicitly false
+                    />
+                </Group>
+            </Accordion.Control>
+            <Accordion.Panel>
+                {cameras.length === 0 ? (
+                    <Text color="dimmed" align="center" py="md">
+                        {t('camersDoesNotExist')}
+                    </Text>
+                ) : (
+                    <Grid gutter="md">
+                        {cameras.map((camera) => (
+                            <CameraCard key={camera.id} camera={camera} />
+                        ))}
+                    </Grid>
+                )}
+            </Accordion.Panel>
+        </Accordion.Item>
+    );
+};
+
+export default SiteGroup;

src/shared/components/SiteStatusBadge.tsx

@@ -0,0 +1,40 @@
+import { Badge, Tooltip } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+
+interface SiteStatusBadgeProps {
+    onlineCameras: number;
+    totalCameras: number;
+    isReachable: boolean;
+}
+
+const SiteStatusBadge = ({ onlineCameras, totalCameras, isReachable }: SiteStatusBadgeProps) => {
+    const { t } = useTranslation();
+
+    if (!isReachable) {
+        return (
+            <Badge color="red" variant="filled">
+                {t('siteStatus.offline')}
+            </Badge>
+        );
+    }
+
+    if (onlineCameras < totalCameras) {
+        return (
+            <Tooltip label={t('siteStatus.camerasOnline', { online: onlineCameras, total: totalCameras })}>
+                <Badge color="yellow" variant="filled">
+                    {t('siteStatus.degraded')} ({onlineCameras}/{totalCameras})
+                </Badge>
+            </Tooltip>
+        );
+    }
+
+    return (
+        <Tooltip label={t('siteStatus.camerasOnline', { online: onlineCameras, total: totalCameras })}>
+            <Badge color="green" variant="filled">
+                {t('siteStatus.online')} ({onlineCameras}/{totalCameras})
+            </Badge>
+        </Tooltip>
+    );
+};
+
+export default SiteStatusBadge;

src/shared/components/VersionTag.tsx

@@ -0,0 +1,24 @@
+import { Badge, Flex } from '@mantine/core';
+import React from 'react';
+
+import packageJson from '../../../package.json';
+
+const VersionTag = () => {
+    return (
+        <Flex
+        direction='column'
+        align='end'
+        >
+            <Badge
+                mt='0.2rem'
+                mr='0.3rem'
+                variant="outline"
+                pr={3}
+            >
+                v.{packageJson.version}
+            </Badge>
+        </Flex>
+    );
+};
+
+export default VersionTag;

src/shared/components/accordion/EventsAccordion.tsx

@@ -1,4 +1,4 @@
-import { Accordion, Center, Flex, Loader, Text } from '@mantine/core';
+import { Accordion, Flex, Text } from '@mantine/core';
 import { useQuery } from '@tanstack/react-query';
 import { observer } from 'mobx-react-lite';
 import { useContext, useState } from 'react';
@@ -7,9 +7,9 @@ import { Context } from '../../..';
 import { frigateQueryKeys, mapHostToHostname, proxyApi } from '../../../services/frigate.proxy/frigate.api';
 import { GetCameraWHostWConfig, GetFrigateHost, getEventsQuerySchema } from '../../../services/frigate.proxy/frigate.schema';
 import { getUnixTime } from '../../utils/dateUtil';
+import CenteredCogwheelLoader from '../loaders/CenteredCogwheelLoader';
 import RetryError from '../RetryError';
 import EventsAccordionItem from './EventsAccordionItem';
-import CogwheelLoader from '../loaders/CogwheelLoader';
 
 /**
  * @param day frigate format, e.g day: 2024-02-23
@@ -24,6 +24,9 @@ interface EventsAccordionProps {
     hour?: string,
     camera: GetCameraWHostWConfig
     host: GetFrigateHost
+    minScore?: number
+    labels?: string[]
+    eventType?: 'all' | 'motion' | 'ai_detection'
 }
 
 /**
@@ -39,6 +42,9 @@ const EventsAccordion = ({
     hour,
     camera,
     host,
+    minScore,
+    labels,
+    eventType,
 }: EventsAccordionProps) => {
     const { recordingsStore: recStore } = useContext(Context)
     const [openedItem, setOpenedItem] = useState<string>()
@@ -52,7 +58,7 @@ const EventsAccordion = ({
     const isRequiredParams = (host && camera) || !(day && hour) || !(startTime && endTime)
 
     const { data, isPending, isError, refetch } = useQuery({
-        queryKey: [frigateQueryKeys.getEvents, host, camera, day, hour, startTime, endTime],
+        queryKey: [frigateQueryKeys.getEvents, host, camera, day, hour, startTime, endTime, minScore, labels, eventType],
         queryFn: ({ signal }) => {
             if (!isRequiredParams) return null
             let queryStartTime: number
@@ -71,6 +77,8 @@ const EventsAccordion = ({
                 before: queryEndTime,
                 hasClip: true,
                 includeThumnails: false,
+                minScore: minScore,
+                labels: labels,
             })
             if (parsed.success) {
                 return proxyApi.getEvents(
@@ -99,7 +107,7 @@ const EventsAccordion = ({
         }
     })
 
-    if (isPending) return <Flex w='100%' h='100%' direction='column' justify='center' align='center'><CogwheelLoader /></Flex>
+    if (isPending) return <CenteredCogwheelLoader />
     if (isError && retryCount >= MAX_RETRY_COUNT) {
         return (
             <Flex w='100%' h='100%' direction='column' justify='center' align='center'>
@@ -114,6 +122,11 @@ const EventsAccordion = ({
         </Flex>
     )
 
+    // Client-side filtering for event type (Frigate API doesn't support this filter)
+    const filteredData = eventType === 'ai_detection'
+        ? data.filter(event => event.data?.type === 'object')
+        : data;
+
     const handleOpenPlayer = (value: string | undefined) => {
         if (value !== recStore.playedItem) {
             setOpenedItem(value)
@@ -141,7 +154,7 @@ const EventsAccordion = ({
             value={openedItem}
             onChange={handleOpenItem}
         >
-            {data.map(event => (
+            {filteredData.map(event => (
                 <EventsAccordionItem
                     key={event.id}
                     event={event}

src/shared/components/accordion/EventsAccordionItem.tsx

@@ -13,6 +13,7 @@ import { proxyApi } from '../../../services/frigate.proxy/frigate.api';
 import { useTranslation } from 'react-i18next';
 import BlobImage from '../images/BlobImage';
 import OnScreenImage from '../images/OnScreenImage';
+import BoundingBoxOverlay from '../images/BoundingBoxOverlay';
 
 
 interface EventsAccordionItemProps {
@@ -81,12 +82,18 @@ const EventsAccordionItem = ({
             <Accordion.Control key={event.id + 'Control'}>
                 <Flex justify='space-between'>
                     {!hostName ? <></> :
+                        <BoundingBoxOverlay
+                            box={event.data?.box}
+                            label={event.label}
+                            score={event.data?.score}
+                        >
                             <OnScreenImage
                                 maw={200}
                                 mr='1rem'
                                 fit="contain"
                                 withPlaceholder
                                 src={proxyApi.eventThumbnailUrl(hostName, event.id)} />
+                        </BoundingBoxOverlay>
                     }
                     {eventLabel(event)}
                     <Group>

src/shared/components/filters/EventTypeFilter.tsx

@@ -0,0 +1,32 @@
+import { SegmentedControl, Stack, Text } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+
+type EventType = 'all' | 'motion' | 'ai_detection';
+
+interface EventTypeFilterProps {
+    value?: EventType;
+    onChange: (eventType: EventType) => void;
+}
+
+const EventTypeFilter = ({ value = 'all', onChange }: EventTypeFilterProps) => {
+    const { t } = useTranslation();
+
+    const options = [
+        { value: 'all', label: t('eventsPage.allEvents') },
+        { value: 'ai_detection', label: t('eventsPage.aiDetectionOnly') },
+    ];
+
+    return (
+        <Stack mt="md" gap="xs">
+            <Text size="sm" fw={500}>{t('eventsPage.eventTypeFilter')}</Text>
+            <SegmentedControl
+                value={value}
+                onChange={(val) => onChange(val as EventType)}
+                data={options}
+                fullWidth
+            />
+        </Stack>
+    );
+};
+
+export default EventTypeFilter;

src/shared/components/filters/ObjectTypeFilter.tsx

@@ -0,0 +1,48 @@
+import { MultiSelect, Stack, Text } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+
+// Common Frigate AI labels
+const OBJECT_TYPE_OPTIONS = [
+    { value: 'person', label: 'Person' },
+    { value: 'car', label: 'Car' },
+    { value: 'motorcycle', label: 'Motorcycle' },
+    { value: 'bicycle', label: 'Bicycle' },
+    { value: 'bus', label: 'Bus' },
+    { value: 'truck', label: 'Truck' },
+    { value: 'dog', label: 'Dog' },
+    { value: 'cat', label: 'Cat' },
+    { value: 'bird', label: 'Bird' },
+    { value: 'horse', label: 'Horse' },
+    { value: 'face', label: 'Face' },
+    { value: 'license_plate', label: 'License Plate' },
+    { value: 'package', label: 'Package' },
+];
+
+interface ObjectTypeFilterProps {
+    value?: string[];
+    onChange: (labels: string[] | undefined) => void;
+}
+
+const ObjectTypeFilter = ({ value, onChange }: ObjectTypeFilterProps) => {
+    const { t } = useTranslation();
+
+    const handleChange = (selected: string[]) => {
+        onChange(selected.length > 0 ? selected : undefined);
+    };
+
+    return (
+        <Stack mt="md" gap="xs">
+            <Text size="sm" fw={500}>{t('eventsPage.objectTypeFilter')}</Text>
+            <MultiSelect
+                data={OBJECT_TYPE_OPTIONS}
+                value={value || []}
+                onChange={handleChange}
+                placeholder={t('eventsPage.selectObjectType')}
+                searchable
+                clearable
+            />
+        </Stack>
+    );
+};
+
+export default ObjectTypeFilter;

src/shared/components/filters/RoleSelectFilter.tsx

@@ -3,7 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 import { useState } from 'react';
 import { frigateApi, frigateQueryKeys } from '../../../services/frigate.proxy/frigate.api';
 import RetryError from '../RetryError';
-import CogwheelLoader from '../loaders/CogwheelLoader';
+import CenteredCogwheelLoader from '../loaders/CenteredCogwheelLoader';
 import { OneSelectItem } from './OneSelectFilter';
 
 interface RoleSelectFilterProps extends Omit<SelectProps, 'data'> {
@@ -21,7 +21,7 @@ const RoleSelectFilter: React.FC<RoleSelectFilterProps> = ({
         queryFn: frigateApi.getRoles
     })
 
-    if (isPending) return <CogwheelLoader />
+    if (isPending) return <CenteredCogwheelLoader />
     if (isError || !data) return <RetryError onRetry={refetch} />
 
     const rolesSelect: OneSelectItem[] = data.map(role => ({ value: role.id, label: role.name }))

src/shared/components/filters/SiteSelect.tsx

@@ -5,7 +5,7 @@ import { frigateApi, frigateQueryKeys } from '../../../services/frigate.proxy/fr
 import RetryError from '../RetryError';
 import OneSelectFilter, { OneSelectItem } from './OneSelectFilter';
 
-interface HostSelectProps extends MantineStyleSystemProps {
+interface SiteSelectProps extends MantineStyleSystemProps {
     label?: string
     valueId?: string
     defaultId?: string
@@ -15,7 +15,7 @@ interface HostSelectProps extends MantineStyleSystemProps {
     onSuccess?: () => void
 }
 
-const HostSelect = ({
+const SiteSelect = ({
     label,
     valueId,
     defaultId,
@@ -24,8 +24,8 @@ const HostSelect = ({
     onChange,
     onSuccess,
     ...styleProps
-}: HostSelectProps) => {
+}: SiteSelectProps) => {
-    const { data: hosts, isError, isPending, isSuccess, refetch } = useQuery({
+    const { data: sites, isError, isPending, isSuccess, refetch } = useQuery({
         queryKey: [frigateQueryKeys.getFrigateHosts],
         queryFn: frigateApi.getHosts
     })
@@ -37,11 +37,11 @@ const HostSelect = ({
     if (isPending) return <Center><Loader /></Center>
     if (isError) return <RetryError onRetry={refetch} />
 
-    if (!hosts || hosts.length < 1) return null
+    if (!sites || sites.length < 1) return null
 
-    const hostItems: OneSelectItem[] = hosts
+    const siteItems: OneSelectItem[] = sites
-        .filter(host => host.enabled)
+        .filter(site => site.enabled)
-        .map(host => ({ value: host.id, label: host.name }))
+        .map(site => ({ value: site.id, label: site.name }))
 
     const handleSelect = (value: string) => {
         if (onChange) onChange(value)
@@ -49,17 +49,17 @@ const HostSelect = ({
 
     return (
         <OneSelectFilter
-            id='frigate-hosts'
+            id='frigate-sites'
             label={label}
             placeholder={placeholder}
             spaceBetween={spaceBetween ? spaceBetween : '1rem'}
             value={valueId || ''}
             defaultValue={defaultId || ''}
-            data={hostItems}
+            data={siteItems}
             onChange={handleSelect}
             {...styleProps}
         />
     );
 };
 
-export default HostSelect;
+export default SiteSelect;

src/shared/components/filters/UserTagsFilter.tsx

@@ -1,16 +1,15 @@
 import { SelectItem } from '@mantine/core';
-import { t } from 'i18next';
-import { useEffect, useState } from 'react';
-import { z } from 'zod';
-import CreatableMultiSelect from './CreatableMultiSelect';
-import { useTranslation } from 'react-i18next';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { frigateApi, frigateQueryKeys } from '../../../services/frigate.proxy/frigate.api';
-import RetryError from '../RetryError';
-import CogwheelLoader from '../loaders/CogwheelLoader';
-import { mapUserTagsToSelectItems, PutUserTag } from '../../../types/tags';
 import { notifications } from '@mantine/notifications';
 import { IconAlertCircle } from '@tabler/icons-react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import { frigateApi, frigateQueryKeys } from '../../../services/frigate.proxy/frigate.api';
+import { mapUserTagsToSelectItems, PutUserTag } from '../../../types/tags';
+import RetryError from '../RetryError';
+import CenteredCogwheelLoader from '../loaders/CenteredCogwheelLoader';
+import CreatableMultiSelect from './CreatableMultiSelect';
 
 
 interface UserTagsFilterProps {
@@ -133,7 +132,7 @@ const UserTagsFilter: React.FC<UserTagsFilterProps> = ({
         }
     }
 
-    if (isPending) return <CogwheelLoader />
+    if (isPending) return <CenteredCogwheelLoader />
     if (isError) return <RetryError onRetry={refetch} />
 
     const handleOnChange = (value: string[]) => {

src/shared/components/images/BoundingBoxOverlay.tsx

@@ -0,0 +1,122 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Box } from '@mantine/core';
+
+interface BoundingBoxOverlayProps {
+    /** Bounding box coordinates [y_min, x_min, y_max, x_max] normalized 0-1 from Frigate */
+    box?: number[];
+    /** The label to display on the bounding box */
+    label?: string;
+    /** Confidence score (0-1) to display */
+    score?: number;
+    /** Color for the bounding box */
+    color?: string;
+    /** Children elements (e.g., the image) */
+    children: React.ReactNode;
+}
+
+/**
+ * Overlay component that renders a bounding box on top of its children.
+ * Frigate provides normalized coordinates [y_min, x_min, y_max, x_max] in range 0-1.
+ */
+const BoundingBoxOverlay = ({
+    box,
+    label,
+    score,
+    color = '#00ff00',
+    children,
+}: BoundingBoxOverlayProps) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+
+    useEffect(() => {
+        const updateDimensions = () => {
+            if (containerRef.current) {
+                const rect = containerRef.current.getBoundingClientRect();
+                setDimensions({ width: rect.width, height: rect.height });
+            }
+        };
+
+        updateDimensions();
+        window.addEventListener('resize', updateDimensions);
+
+        // Also observe for image loading
+        const observer = new ResizeObserver(updateDimensions);
+        if (containerRef.current) {
+            observer.observe(containerRef.current);
+        }
+
+        return () => {
+            window.removeEventListener('resize', updateDimensions);
+            observer.disconnect();
+        };
+    }, []);
+
+    // Convert Frigate box format [y_min, x_min, y_max, x_max] to pixel coordinates
+    const getBoxStyle = () => {
+        if (!box || box.length < 4 || dimensions.width === 0) {
+            return null;
+        }
+
+        const [yMin, xMin, yMax, xMax] = box;
+
+        const left = xMin * dimensions.width;
+        const top = yMin * dimensions.height;
+        const width = (xMax - xMin) * dimensions.width;
+        const height = (yMax - yMin) * dimensions.height;
+
+        return {
+            left: `${left}px`,
+            top: `${top}px`,
+            width: `${width}px`,
+            height: `${height}px`,
+        };
+    };
+
+    const boxStyle = getBoxStyle();
+    const displayLabel = label ? `${label}${score ? ` ${(score * 100).toFixed(0)}%` : ''}` : '';
+
+    return (
+        <Box
+            ref={containerRef}
+            style={{ position: 'relative', display: 'inline-block' }}
+        >
+            {children}
+            {boxStyle && (
+                <>
+                    <div
+                        style={{
+                            position: 'absolute',
+                            ...boxStyle,
+                            border: `2px solid ${color}`,
+                            borderRadius: '2px',
+                            pointerEvents: 'none',
+                            boxSizing: 'border-box',
+                        }}
+                    />
+                    {displayLabel && (
+                        <div
+                            style={{
+                                position: 'absolute',
+                                left: boxStyle.left,
+                                top: boxStyle.top,
+                                transform: 'translateY(-100%)',
+                                backgroundColor: color,
+                                color: '#000',
+                                padding: '2px 6px',
+                                fontSize: '11px',
+                                fontWeight: 600,
+                                borderRadius: '2px 2px 0 0',
+                                whiteSpace: 'nowrap',
+                                pointerEvents: 'none',
+                            }}
+                        >
+                            {displayLabel}
+                        </div>
+                    )}
+                </>
+            )}
+        </Box>
+    );
+};
+
+export default BoundingBoxOverlay;

src/shared/components/loaders/CenteredCogwheelLoader.tsx

@@ -0,0 +1,13 @@
+import { Flex } from '@mantine/core';
+import React from 'react';
+import CogwheelLoader from './CogwheelLoader';
+
+const CenteredCogwheelLoader = () => {
+    return (
+        <Flex w='100%' h='100%' direction='column' justify='center' align='center'>
+            <CogwheelLoader />
+        </Flex>
+    )
+};
+
+export default CenteredCogwheelLoader;

src/shared/components/loaders/OverlayCogwheelLoader.tsx

@@ -2,8 +2,8 @@ import { DEFAULT_THEME, Loader, LoadingOverlay } from '@mantine/core';
 import React from 'react';
 import СogwheelSVG from '../svg/CogwheelSVG';
 
-const CenterLoader = () => {
+const OverlayCogwheelLoader = () => {
     return <LoadingOverlay loader={СogwheelSVG} visible />;
 };
 
-export default CenterLoader;
+export default OverlayCogwheelLoader;

src/shared/components/players/JSMpegPlayer.tsx

@@ -1,74 +1,252 @@
 // @ts-ignore we know this doesn't have types
 import JSMpeg from "@cycjimmy/jsmpeg-player";
 import { useViewportSize } from "@mantine/hooks";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { cn } from "../../utils/class.merge";
+import { PlayerStatsType } from "../../../types/live";
+import { isProduction } from "../../env.const";
+import { useResizeObserver } from "../../../hooks/resize-observer";
 
 type JSMpegPlayerProps = {
-  wsUrl: string;
+  url: string;
-  cameraHeight?: number,
+  camera: string
-  cameraWidth?: number,
+  className?: string;
+  width: number;
+  height: number;
+  containerRef: React.MutableRefObject<HTMLDivElement | null>;
+  playbackEnabled: boolean;
+  useWebGL: boolean;
+  setStats?: (stats: PlayerStatsType) => void;
+  onPlaying?: () => void;
 };
 
 const JSMpegPlayer = (
   {
-    wsUrl,
+    url,
-    cameraWidth = 1200,
+    camera,
-    cameraHeight = 800,
+    width,
+    height,
+    className,
+    containerRef,
+    playbackEnabled,
+    useWebGL = false,
+    setStats,
+    onPlaying,
   }: JSMpegPlayerProps
 ) => {
-  const { t } = useTranslation()
+  const videoRef = useRef<HTMLDivElement>(null);
-  const playerRef = useRef<HTMLDivElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const [playerInitialized, setPlayerInitialized] = useState(false)
+  const internalContainerRef = useRef<HTMLDivElement | null>(null);
+  const onPlayingRef = useRef(onPlaying);
+  const [showCanvas, setShowCanvas] = useState(false);
+  const [hasData, setHasData] = useState(false);
+  const hasDataRef = useRef(hasData);
+  const [dimensionsReady, setDimensionsReady] = useState(false);
+  const bytesReceivedRef = useRef(0);
+  const lastTimestampRef = useRef(Date.now());
+  const statsIntervalRef = useRef<NodeJS.Timeout | null>(null);
 
-  const { height: maxHeight, width: maxWidth } = useViewportSize()
+  const selectedContainerRef = useMemo(
-
+    () => (containerRef.current ? containerRef : internalContainerRef),
-  useEffect(() => {
+    // we know that these deps are correct
-    const video = new JSMpeg.VideoElement(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
-      playerRef.current,
+    [containerRef, containerRef.current, internalContainerRef],
-      wsUrl,
-      {},
-      { protocols: [], audio: false, videoBufferSize: 1024 * 1024 * 4 }
   );
 
-    const toggleFullscreen = () => {
+  const [{ width: containerWidth, height: containerHeight }] =
-      const canvas = video.els.canvas;
+    useResizeObserver(selectedContainerRef);
-      if (!document.fullscreenElement && !(document as any).webkitFullscreenElement) { // Use bracket notation for webkit
-        // Enter fullscreen
-        if (canvas.requestFullscreen) {
-          canvas.requestFullscreen();
-        } else if ((canvas as any).webkitRequestFullScreen) { // Use bracket notation for webkit
-          (canvas as any).webkitRequestFullScreen();
-        } else if (canvas.mozRequestFullScreen) {
-          canvas.mozRequestFullScreen();
-        }
-      } else {
-        // Exit fullscreen
-        if (document.exitFullscreen) {
-          document.exitFullscreen();
-        } else if ((document as any).webkitExitFullscreen) { // Use bracket notation for webkit
-          (document as any).webkitExitFullscreen();
-        } else if ((document as any).mozCancelFullScreen) {
-          (document as any).mozCancelFullScreen();
-        }
-      }
-    };
 
-    video.els.canvas.addEventListener('dblclick', toggleFullscreen);
+  const stretch = true;
+  const aspectRatio = width / height;
+
+  const fitAspect = useMemo(
+    () => containerWidth / containerHeight,
+    [containerWidth, containerHeight],
+  );
+
+  const scaledHeight = useMemo(() => {
+    if (selectedContainerRef?.current && width && height) {
+      const scaledHeight =
+        aspectRatio < (fitAspect ?? 0)
+          ? Math.floor(
+              Math.min(
+                containerHeight,
+                selectedContainerRef.current?.clientHeight,
+              ),
+            )
+          : aspectRatio >= fitAspect
+            ? Math.floor(containerWidth / aspectRatio)
+            : Math.floor(containerWidth / aspectRatio) / 1.5;
+      const finalHeight = stretch
+        ? scaledHeight
+        : Math.min(scaledHeight, height);
+
+      if (finalHeight > 0) {
+        return finalHeight;
+      }
+    }
+    return undefined;
+  }, [
+    aspectRatio,
+    containerWidth,
+    containerHeight,
+    fitAspect,
+    height,
+    width,
+    stretch,
+    selectedContainerRef,
+  ]);
+
+  const scaledWidth = useMemo(() => {
+    if (aspectRatio && scaledHeight) {
+      return Math.ceil(scaledHeight * aspectRatio);
+    }
+    return undefined;
+  }, [scaledHeight, aspectRatio]);
+
+  useEffect(() => {
+    if (scaledWidth && scaledHeight) {
+      setDimensionsReady(true);
+    }
+  }, [scaledWidth, scaledHeight]);
+
+  useEffect(() => {
+    onPlayingRef.current = onPlaying;
+  }, [onPlaying]);
+
+  useEffect(() => {
+    if (!selectedContainerRef?.current || !url) {
+      return;
+    }
+
+    const videoWrapper = videoRef.current;
+    const canvas = canvasRef.current;
+    let videoElement: JSMpeg.VideoElement | null = null;
+
+    let frameCount = 0;
+
+    setHasData(false);
+
+    if (videoWrapper && playbackEnabled) {
+      // Delayed init to avoid issues with react strict mode
+      const initPlayer = setTimeout(() => {
+        videoElement = new JSMpeg.VideoElement(
+          videoWrapper,
+          url,
+          { canvas: canvas },
+          {
+            protocols: [],
+            audio: false,
+            disableGl: !useWebGL,
+            disableWebAssembly: !useWebGL,
+            videoBufferSize: 1024 * 1024 * 4,
+            onVideoDecode: () => {
+              if (!hasDataRef.current) {
+                setHasData(true);
+                onPlayingRef.current?.();
+              }
+              frameCount++;
+            },
+          },
+        );
+
+        // Set up WebSocket message handler
+        if (
+          videoElement.player &&
+          videoElement.player.source &&
+          videoElement.player.source.socket
+        ) {
+          const socket = videoElement.player.source.socket;
+          socket.addEventListener("message", (event: MessageEvent) => {
+            if (event.data instanceof ArrayBuffer) {
+              bytesReceivedRef.current += event.data.byteLength;
+            }
+          });
+        }
+
+        // Update stats every second
+        statsIntervalRef.current = setInterval(() => {
+          const currentTimestamp = Date.now();
+          const timeDiff = (currentTimestamp - lastTimestampRef.current) / 1000; // in seconds
+          const bitrate = (bytesReceivedRef.current * 8) / timeDiff / 1000; // in kbps
+
+          setStats?.({
+            streamType: "jsmpeg",
+            bandwidth: Math.round(bitrate),
+            totalFrames: frameCount,
+            latency: undefined,
+            droppedFrames: undefined,
+            decodedFrames: undefined,
+            droppedFrameRate: undefined,
+          });
+
+          bytesReceivedRef.current = 0;
+          lastTimestampRef.current = currentTimestamp;
+        }, 1000);
 
         return () => {
-      video.destroy();
+          if (statsIntervalRef.current) {
-      video.els.canvas.removeEventListener('dblclick', toggleFullscreen);
+            clearInterval(statsIntervalRef.current);
+            frameCount = 0;
+            statsIntervalRef.current = null;
+          }
         };
-  }, [wsUrl]);
+      }, 0);
+
+      return () => {
+        clearTimeout(initPlayer);
+        if (statsIntervalRef.current) {
+          clearInterval(statsIntervalRef.current);
+          statsIntervalRef.current = null;
+        }
+        if (videoElement) {
+          try {
+            // this causes issues in react strict mode
+            // https://stackoverflow.com/questions/76822128/issue-with-cycjimmy-jsmpeg-player-in-react-18-cannot-read-properties-of-null-o
+            videoElement.destroy();
+            // eslint-disable-next-line no-empty
+          } catch (e) {}
+        }
+      };
+    }
+    // we know that these deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [playbackEnabled, url]);
+
+  useEffect(() => {
+    setShowCanvas(hasData && dimensionsReady);
+  }, [hasData, dimensionsReady]);
+
+  useEffect(() => {
+    hasDataRef.current = hasData;
+  }, [hasData]);
 
   return (
+    <div className={cn(className, !containerRef.current && "size-full")}>
       <div
-      ref={playerRef}
+        className="internal-jsmpeg-container size-full"
-      key={wsUrl}
+        ref={internalContainerRef}
-      title={t('player.doubleClickToFullHint')}
+      >
-      style={{ width: cameraWidth, height: cameraHeight, maxWidth: maxWidth, maxHeight: maxHeight - 100, }} />
+        <div
-  )
+          ref={videoRef}
-};
+          className={cn(
+            "jsmpeg flex h-full w-auto items-center justify-center",
+            !showCanvas && "hidden",
+          )}
+        >
+          <canvas
+            ref={canvasRef}
+            className="rounded-lg md:rounded-2xl"
+            style={{
+              width: scaledWidth,
+              height: scaledHeight,
+            }}
+          ></canvas>
+        </div>
+      </div>
+    </div>
+  );
+}
 
 export default JSMpegPlayer

src/shared/components/players/PlaybackSpeedControls.tsx

@@ -0,0 +1,60 @@
+import { Button, Group, Text } from '@mantine/core';
+import { IconPlayerPlay } from '@tabler/icons-react';
+import { useTranslation } from 'react-i18next';
+import videojs from 'video.js';
+
+interface PlaybackSpeedControlsProps {
+    playerRef: React.MutableRefObject<ReturnType<typeof videojs> | null>;
+    currentSpeed: number;
+    onSpeedChange: (speed: number) => void;
+}
+
+const PLAYBACK_SPEEDS = [0.5, 1, 2, 4, 8, 16];
+
+const PlaybackSpeedControls = ({
+    playerRef,
+    currentSpeed,
+    onSpeedChange,
+}: PlaybackSpeedControlsProps) => {
+    const { t } = useTranslation();
+    const isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().includes('firefox');
+
+    const availableSpeeds = isFirefox
+        ? PLAYBACK_SPEEDS.filter(speed => speed <= 8)
+        : PLAYBACK_SPEEDS;
+
+    const handleSpeedClick = (speed: number) => {
+        if (playerRef.current) {
+            playerRef.current.playbackRate(speed);
+            onSpeedChange(speed);
+        }
+    };
+
+    return (
+        <Group spacing="xs" mt="sm" mb="sm">
+            <Text size="sm" fw={500} mr="xs">
+                <IconPlayerPlay size={14} style={{ verticalAlign: 'middle', marginRight: 4 }} />
+                {t('player.speed')}:
+            </Text>
+            {availableSpeeds.map((speed) => (
+                <Button
+                    key={speed}
+                    size="xs"
+                    variant={currentSpeed === speed ? 'filled' : 'outline'}
+                    onClick={() => handleSpeedClick(speed)}
+                    styles={{
+                        root: {
+                            minWidth: '48px',
+                            fontWeight: currentSpeed === speed ? 700 : 400,
+                            transition: 'all 0.2s ease',
+                        },
+                    }}
+                >
+                    {speed}x
+                </Button>
+            ))}
+        </Group>
+    );
+};
+
+export default PlaybackSpeedControls;

src/shared/components/players/VideoPlayer.tsx

@@ -1,19 +1,23 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import videojs from 'video.js';
 import Player from 'video.js/dist/types/player';
 import 'video.js/dist/video-js.css'
 import { isProduction } from '../../env.const';
 import { useKeycloak } from '@react-keycloak/web';
+import PlaybackSpeedControls from './PlaybackSpeedControls';
 
 interface VideoPlayerProps {
-  videoUrl: string
+  videoUrl: string;
+  showSpeedControls?: boolean;
+  initialSeekTime?: number; // Unix timestamp or seconds offset to seek to on load
 }
 
-const VideoPlayer = ({ videoUrl }: VideoPlayerProps) => {
+const VideoPlayer = ({ videoUrl, showSpeedControls = true, initialSeekTime }: VideoPlayerProps) => {
   const { keycloak } = useKeycloak()
   const executed = useRef(false)
   const videoRef = useRef<HTMLVideoElement>(null);
   const playerRef = useRef<Player | null>(null);
+  const [currentSpeed, setCurrentSpeed] = useState(1);
 
   useEffect(() => {
     if (!executed.current) {
@@ -56,6 +60,11 @@ const VideoPlayer = ({ videoUrl }: VideoPlayerProps) => {
         if (!isProduction) console.log('mount new player')
         playerRef.current = videojs(videoRef.current, { ...defaultOptions }, () => {
           if (!isProduction) console.log('player is ready')
+          // Seek to initial time if specified (relative to video start)
+          if (initialSeekTime !== undefined && playerRef.current) {
+            playerRef.current.currentTime(initialSeekTime);
+            if (!isProduction) console.log('Seeking to initial time:', initialSeekTime)
+          }
         });
       }
       if (!isProduction) console.log('VideoPlayer rendered')
@@ -78,11 +87,25 @@ const VideoPlayer = ({ videoUrl }: VideoPlayerProps) => {
     }
   }, [videoUrl]);
 
+  const handleSpeedChange = (speed: number) => {
+    setCurrentSpeed(speed);
+    if (!isProduction) console.log('Playback speed changed to:', speed);
+  };
+
   return (
+    <div>
       <div data-vjs-player>
         {/* Setting an empty data-setup is required to override the default values and allow video to be fit the size of its parent */}
         <video ref={videoRef} className="small-player video-js vjs-default-skin" data-setup="{}" controls playsInline />
       </div>
+      {showSpeedControls && (
+        <PlaybackSpeedControls
+          playerRef={playerRef as React.MutableRefObject<ReturnType<typeof videojs> | null>}
+          currentSpeed={currentSpeed}
+          onSpeedChange={handleSpeedChange}
+        />
+      )}
+    </div>
   );
 };
 

src/shared/components/players/WebRTCPlayer.tsx

@@ -1,25 +1,46 @@
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { LivePlayerError, PlayerStatsType } from "../../../types/live";
 
 type WebRtcPlayerProps = {
-  className?: string;
   camera: string;
+  wsURI: string;
+  className?: string;
   playbackEnabled?: boolean;
-  onPlaying?: () => void,
+  audioEnabled?: boolean;
-  wsUrl: string
+  volume?: number;
+  microphoneEnabled?: boolean;
+  iOSCompatFullScreen?: boolean; // ios doesn't support fullscreen divs so we must support the video element
+  pip?: boolean;
+  getStats?: boolean;
+  setStats?: (stats: PlayerStatsType) => void;
+  onPlaying?: () => void;
+  onError?: (error: LivePlayerError) => void;
+
 };
 
 export default function WebRtcPlayer({
-  className,
   camera,
+  wsURI,
+  className,
   playbackEnabled = true,
+  audioEnabled = false,
+  volume,
+  microphoneEnabled = false,
+  iOSCompatFullScreen = false,
+  pip = false,
+  getStats = false,
+  setStats,
   onPlaying,
-  wsUrl
+  onError,
 }: WebRtcPlayerProps) {
   // camera states
 
   const pcRef = useRef<RTCPeerConnection | undefined>();
   const videoRef = useRef<HTMLVideoElement | null>(null);
 
+  const [bufferTimeout, setBufferTimeout] = useState<NodeJS.Timeout>();
+  const videoLoadTimeoutRef = useRef<NodeJS.Timeout>();
+
   const PeerConnection = useCallback(
     async (media: string) => {
       if (!videoRef.current) {
@@ -27,6 +48,7 @@ export default function WebRtcPlayer({
       }
 
       const pc = new RTCPeerConnection({
+        bundlePolicy: "max-bundle",
         iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
       });
 
@@ -59,7 +81,7 @@ export default function WebRtcPlayer({
           .filter((kind) => media.indexOf(kind) >= 0)
           .map(
             (kind) =>
-              pc.addTransceiver(kind, { direction: "recvonly" }).receiver.track
+              pc.addTransceiver(kind, { direction: "recvonly" }).receiver.track,
           );
         localTracks.push(...tracks);
       }
@@ -67,12 +89,12 @@ export default function WebRtcPlayer({
       videoRef.current.srcObject = new MediaStream(localTracks);
       return pc;
     },
-    [videoRef]
+    [videoRef],
   );
 
   async function getMediaTracks(
     media: string,
-    constraints: MediaStreamConstraints
+    constraints: MediaStreamConstraints,
   ) {
     try {
       const stream =
@@ -86,12 +108,13 @@ export default function WebRtcPlayer({
   }
 
   const connect = useCallback(
-    async (ws: WebSocket, aPc: Promise<RTCPeerConnection | undefined>) => {
+    async (aPc: Promise<RTCPeerConnection | undefined>) => {
       if (!aPc) {
         return;
       }
 
       pcRef.current = await aPc;
+      const ws = new WebSocket(wsURI);
 
       ws.addEventListener("open", () => {
         pcRef.current?.addEventListener("icecandidate", (ev) => {
@@ -127,7 +150,7 @@ export default function WebRtcPlayer({
         }
       });
     },
-    []
+    [wsURI],
   );
 
   useEffect(() => {
@@ -139,13 +162,10 @@ export default function WebRtcPlayer({
       return;
     }
 
-    // const url = `$baseUrl{.replace(
+    const aPc = PeerConnection(
-    //   /^http/,
+      microphoneEnabled ? "video+audio+microphone" : "video+audio",
-    //   "ws"
+    );
-    // )}live/webrtc/api/ws?src=${camera}`;
+    connect(aPc);
-    const ws = new WebSocket(wsUrl);
-    const aPc = PeerConnection("video+audio");
-    connect(ws, aPc);
 
     return () => {
       if (pcRef.current) {
@@ -153,16 +173,174 @@ export default function WebRtcPlayer({
         pcRef.current = undefined;
       }
     };
-  }, [camera, connect, PeerConnection, pcRef, videoRef, playbackEnabled, wsUrl]);
+  }, [
+    camera,
+    wsURI,
+    connect,
+    PeerConnection,
+    pcRef,
+    videoRef,
+    playbackEnabled,
+    microphoneEnabled,
+  ]);
+
+  // ios compat
+
+  const [iOSCompatControls, setiOSCompatControls] = useState(false);
+
+  useEffect(() => {
+    if (!videoRef.current || !pip) {
+      return;
+    }
+
+    videoRef.current.requestPictureInPicture();
+  }, [pip, videoRef]);
+
+  // control volume
+
+  useEffect(() => {
+    if (!videoRef.current || volume == undefined) {
+      return;
+    }
+
+    videoRef.current.volume = volume;
+  }, [volume, videoRef]);
+
+  useEffect(() => {
+    videoLoadTimeoutRef.current = setTimeout(() => {
+      onError?.("stalled");
+    }, 5000);
+
+    return () => {
+      if (videoLoadTimeoutRef.current) {
+        clearTimeout(videoLoadTimeoutRef.current);
+      }
+    };
+    // we know that these deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleLoadedData = () => {
+    if (videoLoadTimeoutRef.current) {
+      clearTimeout(videoLoadTimeoutRef.current);
+    }
+    onPlaying?.();
+  };
+
+  useEffect(() => {
+    if (!pcRef.current || !getStats) return;
+
+    let lastBytesReceived = 0;
+    let lastTimestamp = 0;
+
+    const interval = setInterval(async () => {
+      if (pcRef.current && videoRef.current && !videoRef.current.paused) {
+        const report = await pcRef.current.getStats();
+        let bytesReceived = 0;
+        let timestamp = 0;
+        let roundTripTime = 0;
+        let framesReceived = 0;
+        let framesDropped = 0;
+        let framesDecoded = 0;
+
+        report.forEach((stat) => {
+          if (stat.type === "inbound-rtp" && stat.kind === "video") {
+            bytesReceived = stat.bytesReceived;
+            timestamp = stat.timestamp;
+            framesReceived = stat.framesReceived;
+            framesDropped = stat.framesDropped;
+            framesDecoded = stat.framesDecoded;
+          }
+          if (stat.type === "candidate-pair" && stat.state === "succeeded") {
+            roundTripTime = stat.currentRoundTripTime;
+          }
+        });
+
+        const timeDiff = (timestamp - lastTimestamp) / 1000; // in seconds
+        const bitrate =
+          timeDiff > 0
+            ? (bytesReceived - lastBytesReceived) / timeDiff / 1000
+            : 0; // in kbps
+
+        setStats?.({
+          streamType: "WebRTC",
+          bandwidth: Math.round(bitrate),
+          latency: roundTripTime,
+          totalFrames: framesReceived,
+          droppedFrames: framesDropped,
+          decodedFrames: framesDecoded,
+          droppedFrameRate:
+            framesReceived > 0 ? (framesDropped / framesReceived) * 100 : 0,
+        });
+
+        lastBytesReceived = bytesReceived;
+        lastTimestamp = timestamp;
+      }
+    }, 1000);
+
+    return () => {
+      clearInterval(interval);
+      setStats?.({
+        streamType: "-",
+        bandwidth: 0,
+        latency: undefined,
+        totalFrames: 0,
+        droppedFrames: undefined,
+        decodedFrames: 0,
+        droppedFrameRate: 0,
+      });
+    };
+    // we need to listen on the value of the ref
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pcRef, pcRef.current, getStats]);
 
   return (
     <video
       ref={videoRef}
       className={className}
+      controls={iOSCompatControls}
       autoPlay
       playsInline
-      muted
+      muted={!audioEnabled}
-      onLoadedData={onPlaying}
+      onLoadedData={handleLoadedData}
+      onProgress={
+        onError != undefined
+          ? () => {
+              if (videoRef.current?.paused) {
+                return;
+              }
+
+              if (bufferTimeout) {
+                clearTimeout(bufferTimeout);
+                setBufferTimeout(undefined);
+              }
+
+              setBufferTimeout(
+                setTimeout(() => {
+                  if (
+                    document.visibilityState === "visible" &&
+                    pcRef.current != undefined
+                  ) {
+                    onError("stalled");
+                  }
+                }, 3000),
+              );
+            }
+          : undefined
+      }
+      onClick={
+        iOSCompatFullScreen
+          ? () => setiOSCompatControls(!iOSCompatControls)
+          : undefined
+      }
+      onError={(e) => {
+        if (
+          // @ts-expect-error code does exist
+          e.target.error.code == MediaError.MEDIA_ERR_NETWORK
+        ) {
+          onError?.("startup");
+        }
+      }}
     />
   );
 }

src/shared/stores/events.store.ts

@@ -8,6 +8,9 @@ interface Filters {
     period?: [Date | null, Date | null]
     startTime?: string
     endTime?: string
+    minScore?: number
+    labels?: string[]
+    eventType?: 'all' | 'motion' | 'ai_detection'
 }
 
 export class EventsStore {
@@ -23,7 +26,10 @@ export class EventsStore {
         paramStartDate: string | undefined,
         paramEndDate: string | undefined,
         paramStartTime: string | undefined,
-        paramEndTime: string | undefined) {
+        paramEndTime: string | undefined,
+        paramMinScore: string | undefined,
+        paramLabels: string | undefined,
+        paramEventType: string | undefined) {
         this.filters.hostId = paramHostId
         this.filters.cameraId = paramCameraId
         if (paramStartDate && paramEndDate) {
@@ -31,6 +37,20 @@ export class EventsStore {
         }
         this.filters.startTime = paramStartTime
         this.filters.endTime = paramEndTime
+        if (paramMinScore) {
+            const score = parseFloat(paramMinScore)
+            if (!isNaN(score) && score >= 0 && score <= 1) {
+                this.filters.minScore = score
+            }
+        }
+        if (paramLabels) {
+            this.filters.labels = paramLabels.split(',')
+        }
+        if (paramEventType === 'motion' || paramEventType === 'ai_detection') {
+            this.filters.eventType = paramEventType
+        } else {
+            this.filters.eventType = 'all'
+        }
     }
 
     setHostId(hostId: string, navigate: (path: string, options?: NavigateOptions) => void) {
@@ -58,6 +78,21 @@ export class EventsStore {
         this.updateURL(navigate)
     }
 
+    setMinScore(minScore: number | undefined, navigate: (path: string, options?: NavigateOptions) => void) {
+        this.filters.minScore = minScore
+        this.updateURL(navigate)
+    }
+
+    setLabels(labels: string[] | undefined, navigate: (path: string, options?: NavigateOptions) => void) {
+        this.filters.labels = labels
+        this.updateURL(navigate)
+    }
+
+    setEventType(eventType: 'all' | 'motion' | 'ai_detection', navigate: (path: string, options?: NavigateOptions) => void) {
+        this.filters.eventType = eventType
+        this.updateURL(navigate)
+    }
+
     updateURL(navigate: (path: string, options?: NavigateOptions) => void) {
         const params = new URLSearchParams();
         if (this.filters.hostId) params.set(eventsQueryParams.hostId, this.filters.hostId);
@@ -74,6 +109,15 @@ export class EventsStore {
 
         if (this.filters.startTime) params.set(eventsQueryParams.startTime, this.filters.startTime)
         if (this.filters.endTime) params.set(eventsQueryParams.endTime, this.filters.endTime)
+        if (this.filters.minScore !== undefined && this.filters.minScore > 0) {
+            params.set(eventsQueryParams.minScore, this.filters.minScore.toString())
+        }
+        if (this.filters.labels && this.filters.labels.length > 0) {
+            params.set(eventsQueryParams.labels, this.filters.labels.join(','))
+        }
+        if (this.filters.eventType && this.filters.eventType !== 'all') {
+            params.set(eventsQueryParams.eventType, this.filters.eventType)
+        }
 
         navigate(`?${params.toString()}`, { replace: true });
     }

src/shared/utils/class.merge.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

src/types/live.ts

@@ -1 +1,48 @@
 export type LivePlayerMode = "webrtc" | "mse" | "jsmpeg" | "debug";
+export type VideoResolutionType = {
+  width: number;
+  height: number;
+};
+
+type LiveProducerMetadata = {
+  type: string;
+  url: string;
+  remote_addr: string;
+  user_agent: string;
+  sdp: string;
+  medias?: string[];
+  receivers?: string[];
+  recv: number;
+};
+
+type LiveConsumerMetadata = {
+  type: string;
+  url: string;
+  remote_addr: string;
+  user_agent: string;
+  sdp: string;
+  medias?: string[];
+  senders?: string[];
+  send: number;
+};
+
+export type LiveStreamMetadata = {
+  producers: LiveProducerMetadata[];
+  consumers: LiveConsumerMetadata[];
+};
+
+export type LivePlayerError = "stalled" | "startup" | "mse-decode";
+
+export type AudioState = Record<string, boolean>;
+export type StatsState = Record<string, boolean>;
+export type VolumeState = Record<string, number>;
+
+export type PlayerStatsType = {
+  streamType: string;
+  bandwidth: number;
+  latency: number | undefined;
+  totalFrames: number;
+  droppedFrames: number | undefined;
+  decodedFrames: number | undefined;
+  droppedFrameRate: number | undefined;
+};

src/widgets/EventsBody.tsx

@@ -3,7 +3,7 @@ import { observer } from 'mobx-react-lite';
 import { FC } from 'react';
 import { frigateApi, frigateQueryKeys } from '../services/frigate.proxy/frigate.api';
 import EventsAccordion from '../shared/components/accordion/EventsAccordion';
-import CenterLoader from '../shared/components/loaders/CenterLoader';
+import OverlayCogwheelLoader from '../shared/components/loaders/OverlayCogwheelLoader';
 import RetryError from '../shared/components/RetryError';
 import { dayTimeToUnixTime } from '../shared/utils/dateUtil';
 
@@ -13,6 +13,9 @@ interface EventsBodyProps {
     period: [Date, Date],
     startTime?: string,
     endTime?: string,
+    minScore?: number,
+    labels?: string[],
+    eventType?: 'all' | 'motion' | 'ai_detection',
 }
 
 
@@ -22,6 +25,9 @@ const EventsBody: FC<EventsBodyProps> = ({
     period,
     startTime,
     endTime,
+    minScore,
+    labels,
+    eventType,
 }) => {
 
     const startTimeUnix = dayTimeToUnixTime(period[0], startTime ? startTime : '00:00')
@@ -36,7 +42,7 @@ const EventsBody: FC<EventsBodyProps> = ({
         }
     })
 
-    if (isPending) return <CenterLoader />
+    if (isPending) return <OverlayCogwheelLoader />
     if (isError) return <RetryError onRetry={refetch} />
     if (!data) return null
 
@@ -46,6 +52,9 @@ const EventsBody: FC<EventsBodyProps> = ({
             host={data.host}
             startTime={startTimeUnix}
             endTime={endTimeUnix}
+            minScore={minScore}
+            labels={labels}
+            eventType={eventType}
         />
     )
 };

src/widgets/OIDPSettingsForm.tsx

@@ -1,16 +1,16 @@
+import { Button, Flex } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 import { IconAlertCircle, IconCircleCheck } from '@tabler/icons-react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { v4 } from 'uuid';
 import { frigateApi, frigateQueryKeys } from '../services/frigate.proxy/frigate.api';
 import { OIDPConfig } from '../services/frigate.proxy/frigate.schema';
 import RetryError from '../shared/components/RetryError';
 import { FloatingLabelInput } from '../shared/components/inputs/FloatingLabelInput';
-import CogwheelLoader from '../shared/components/loaders/CogwheelLoader';
+import CenteredCogwheelLoader from '../shared/components/loaders/CenteredCogwheelLoader';
-import { Flex, Button } from '@mantine/core';
 import { isProduction } from '../shared/env.const';
-import { useEffect, useState } from 'react';
 
 interface OIDPSettingsFormProps {
     isConfigValid?: (valid: boolean) => void
@@ -101,7 +101,7 @@ const OIDPSettingsForm: React.FC<OIDPSettingsFormProps> = ({
         if (data) setConfig(data)
     }
 
-    if (isPending) return <CogwheelLoader />
+    if (isPending) return <CenteredCogwheelLoader />
     if (isError) return <RetryError onRetry={refetch} />
 
     return (

src/widgets/Player.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import useCameraActivity from '../hooks/use-camera-activity';
 import useCameraLiveMode from '../hooks/use-camera-live-mode';
 import { proxyApi } from '../services/frigate.proxy/frigate.api';
@@ -6,11 +6,14 @@ import { GetCameraWHostWConfig } from '../services/frigate.proxy/frigate.schema'
 import JSMpegPlayer from '../shared/components/players/JSMpegPlayer';
 import MSEPlayer from '../shared/components/players/MsePlayer';
 import WebRtcPlayer from '../shared/components/players/WebRTCPlayer';
-import { LivePlayerMode } from '../types/live';
+import { LivePlayerMode, PlayerStatsType } from '../types/live';
 import { isProduction } from '../shared/env.const';
 
 type LivePlayerProps = {
   camera: GetCameraWHostWConfig;
+  cameraRef?: (ref: HTMLDivElement | null) => void;
+  useWebGL: boolean;
+  containerRef?: React.MutableRefObject<HTMLDivElement | null>;
   preferredLiveMode?: LivePlayerMode;
   showStillWithoutActivity?: boolean;
   windowVisible?: boolean;
@@ -18,20 +21,42 @@ type LivePlayerProps = {
 
 const Player = ({
   camera,
+  cameraRef = undefined,
+  useWebGL = false,
+  showStillWithoutActivity = true,
+  containerRef,
   preferredLiveMode,
   windowVisible = true,
 }: LivePlayerProps) => {
+  const internalContainerRef = useRef<HTMLDivElement | null>(null);
+
+  // stats
+
+  const [stats, setStats] = useState<PlayerStatsType>({
+    streamType: "-",
+    bandwidth: 0, // in kbps
+    latency: undefined, // in seconds
+    totalFrames: 0,
+    droppedFrames: undefined,
+    decodedFrames: 0,
+    droppedFrameRate: 0, // percentage
+  });
 
   const hostNameWPort = camera.frigateHost ? new URL(camera.frigateHost.host).host : ''
   const wsUrl = proxyApi.cameraWsURL(hostNameWPort, camera.name)
   const cameraConfig = camera.config!
 
+  const [key, setKey] = useState(0);
+
+
   const { activeMotion, activeTracking } =
     useCameraActivity(cameraConfig);
 
   const cameraActive = useMemo(
-    () => windowVisible && (activeMotion || activeTracking),
+    () =>
-    [activeMotion, activeTracking, windowVisible]
+      !showStillWithoutActivity ||
+      (windowVisible && (activeMotion || activeTracking)),
+    [activeMotion, activeTracking, showStillWithoutActivity, windowVisible],
   );
 
   // camera live state
@@ -52,7 +77,12 @@ const Player = ({
     }
   }, [cameraActive, liveReady, liveMode]);
 
-  if (!isProduction) console.log(`liveMode: `, liveMode)
+
+  const playerIsPlaying = useCallback(() => {
+    setLiveReady(true);
+  }, []);
+
+
   let player;
   if (liveMode === "webrtc") {
     player = (
@@ -61,7 +91,7 @@ const Player = ({
         camera={cameraConfig.live.stream_name}
         playbackEnabled={cameraActive}
         onPlaying={() => setLiveReady(true)}
-        wsUrl={wsUrl}
+        wsURI={wsUrl}
       />
     );
   } else if (liveMode === "mse") {
@@ -69,7 +99,7 @@ const Player = ({
       player = (
         <MSEPlayer
           className={`rounded-2xl h-full ${liveReady ? "" : "hidden"}`}
-          camera='Not yet implemented' // TODO implement player
+          camera='Not yet implemented' // TODO implement MSE player with audio
           playbackEnabled={cameraActive}
           onPlaying={() => setLiveReady(true)}
           wsUrl={wsUrl}
@@ -86,9 +116,19 @@ const Player = ({
   } else if (liveMode === "jsmpeg") {
     player = (
       <JSMpegPlayer
-        wsUrl={wsUrl}
+        key={"jsmpeg_" + key}
-        cameraWidth={camera.config?.detect.width}
+        url={wsUrl}
-        cameraHeight={camera.config?.detect.height}
+        camera={camera.config.name}
+        className="flex justify-center overflow-hidden rounded-lg md:rounded-2xl"
+        width={camera.config.detect.width}
+        height={camera.config.detect.height}
+        playbackEnabled={
+          showStillWithoutActivity
+        }
+        containerRef={containerRef ?? internalContainerRef}
+        useWebGL={useWebGL}
+        setStats={setStats}
+        onPlaying={playerIsPlaying}
       />
     );
   }

src/widgets/RolesSettingsForm.tsx

@@ -1,16 +1,16 @@
+import { Button, Flex, Text } from '@mantine/core';
+import { notifications } from '@mantine/notifications';
+import { IconAlertCircle, IconCircleCheck } from '@tabler/icons-react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { v4 } from 'uuid';
 import { frigateApi, frigateQueryKeys } from '../services/frigate.proxy/frigate.api';
+import { GetRole } from '../services/frigate.proxy/frigate.schema';
 import RetryError from '../shared/components/RetryError';
 import RoleSelectFilter from '../shared/components/filters/RoleSelectFilter';
-import CogwheelLoader from '../shared/components/loaders/CogwheelLoader';
+import CenteredCogwheelLoader from '../shared/components/loaders/CenteredCogwheelLoader';
-import { GetRole } from '../services/frigate.proxy/frigate.schema';
 import { isProduction } from '../shared/env.const';
-import { Flex, Button, Text } from '@mantine/core';
-import { notifications } from '@mantine/notifications';
-import { IconCircleCheck, IconAlertCircle } from '@tabler/icons-react';
-import { v4 } from 'uuid';
 
 interface Roles {
     adminRole?: {
@@ -174,7 +174,7 @@ const RolesSettingsForm: React.FC<RolesSettingsFormProps> = ({
         if (!isProduction) console.log('Roles:', roles)
     }, [roles])
 
-    if (isPending) return <CogwheelLoader />
+    if (isPending) return <CenteredCogwheelLoader />
     if (isError) return <RetryError onRetry={refetch} />
     if (allRoles.length < 1) return (
         <>

src/widgets/SelectedCameraList.tsx

@@ -1,12 +1,12 @@
 import { Flex, Text } from '@mantine/core';
-import React, { Suspense, useContext } from 'react';
-import CameraAccordion from '../shared/components/accordion/CameraAccordion';
 import { useQuery } from '@tanstack/react-query';
-import { Context } from '..';
-import { frigateQueryKeys, frigateApi } from '../services/frigate.proxy/frigate.api';
-import RetryErrorPage from '../pages/RetryErrorPage';
-import CenterLoader from '../shared/components/loaders/CenterLoader';
 import { observer } from 'mobx-react-lite';
+import { Suspense, useContext } from 'react';
+import { Context } from '..';
+import RetryErrorPage from '../pages/RetryErrorPage';
+import { frigateApi, frigateQueryKeys } from '../services/frigate.proxy/frigate.api';
+import CameraAccordion from '../shared/components/accordion/CameraAccordion';
+import CenteredCogwheelLoader from '../shared/components/loaders/CenteredCogwheelLoader';
 
 
 const SelectedCameraList = () => {
@@ -27,7 +27,7 @@ const SelectedCameraList = () => {
         cameraRefetch()
     }
 
-    if (cameraPending) return <CenterLoader />
+    if (cameraPending) return <CenteredCogwheelLoader />
     if (cameraError) return <RetryErrorPage onRetry={handleRetry} />
 
     if (!camera || !camera?.frigateHost) return null

src/widgets/SelectedDayList.tsx

@@ -1,15 +1,15 @@
-import { useQuery } from '@tanstack/react-query';
-import React, { useContext, useState } from 'react';
-import { frigateQueryKeys, mapHostToHostname, proxyApi } from '../services/frigate.proxy/frigate.api';
-import { dateToQueryString, getResolvedTimeZone } from '../shared/utils/dateUtil';
-import { Context } from '..';
 import { Center, Flex, Text } from '@mantine/core';
-import RetryErrorPage from '../pages/RetryErrorPage';
+import { useQuery } from '@tanstack/react-query';
-import CenterLoader from '../shared/components/loaders/CenterLoader';
 import { observer } from 'mobx-react-lite';
-import DayAccordion from '../shared/components/accordion/DayAccordion';
+import { useContext, useState } from 'react';
-import { isProduction } from '../shared/env.const';
 import { useTranslation } from 'react-i18next';
+import { Context } from '..';
+import RetryErrorPage from '../pages/RetryErrorPage';
+import { frigateQueryKeys, mapHostToHostname, proxyApi } from '../services/frigate.proxy/frigate.api';
+import DayAccordion from '../shared/components/accordion/DayAccordion';
+import CenteredCogwheelLoader from '../shared/components/loaders/CenteredCogwheelLoader';
+import { isProduction } from '../shared/env.const';
+import { dateToQueryString, getResolvedTimeZone } from '../shared/utils/dateUtil';
 
 interface SelectedDayListProps {
     day: Date
@@ -52,7 +52,7 @@ const SelectedDayList = ({
         if (recStore.filteredHost) refetch()
     }
 
-    if (isPending) return <CenterLoader />
+    if (isPending) return <CenteredCogwheelLoader />
 
     if (isError && retryCount >= MAX_RETRY_COUNT) {
         return (

src/widgets/SelectedHostList.tsx

@@ -1,12 +1,12 @@
 import { Accordion, Flex, Text } from '@mantine/core';
-import React, { Suspense, lazy, useContext, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import { frigateQueryKeys, frigateApi } from '../services/frigate.proxy/frigate.api';
-import { Context } from '..';
-import CenterLoader from '../shared/components/loaders/CenterLoader';
-import RetryErrorPage from '../pages/RetryErrorPage';
 import { observer } from 'mobx-react-lite';
+import { Suspense, lazy, useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Context } from '..';
+import RetryErrorPage from '../pages/RetryErrorPage';
+import { frigateApi, frigateQueryKeys } from '../services/frigate.proxy/frigate.api';
+import CenteredCogwheelLoader from '../shared/components/loaders/CenteredCogwheelLoader';
 const CameraAccordion = lazy(() => import('../shared/components/accordion/CameraAccordion'));
 
 interface SelectedHostListProps {
@@ -38,7 +38,7 @@ const SelectedHostList = ({
         if (recStore.filteredHost) hostRefetch()
     }
 
-    if (hostPending) return <CenterLoader />
+    if (hostPending) return <CenteredCogwheelLoader />
     if (hostError) return <RetryErrorPage onRetry={handleRetry} />
 
     if (!camerasQuery || camerasQuery.length < 1) return null

src/widgets/camera.stat.table/FrigateStorageStateTable.tsx

@@ -1,16 +1,16 @@
+import { Center, Table, Text } from '@mantine/core';
 import { useQuery } from '@tanstack/react-query';
 import React, { useCallback, useEffect, useState } from 'react';
-import { frigateQueryKeys, mapHostToHostname, proxyApi } from '../../services/frigate.proxy/frigate.api';
-import { GetFrigateHost } from '../../services/frigate.proxy/frigate.schema';
-import CogwheelLoader from '../../shared/components/loaders/CogwheelLoader';
-import RetryError from '../../shared/components/RetryError';
-import { Center, Flex, Table, Text } from '@mantine/core';
-import { TableHead } from '../../types/table';
-import SortedTh from '../../shared/components/table.aps/SortedTh';
 import { useTranslation } from 'react-i18next';
 import { v4 as uuidv4 } from 'uuid';
-import { sortByKey } from '../../shared/utils/sort.array';
+import { frigateQueryKeys, mapHostToHostname, proxyApi } from '../../services/frigate.proxy/frigate.api';
+import { GetFrigateHost } from '../../services/frigate.proxy/frigate.schema';
+import CenteredCogwheelLoader from '../../shared/components/loaders/CenteredCogwheelLoader';
+import RetryError from '../../shared/components/RetryError';
+import SortedTh from '../../shared/components/table.aps/SortedTh';
 import { formatMBytes } from '../../shared/utils/data.size';
+import { sortByKey } from '../../shared/utils/sort.array';
+import { TableHead } from '../../types/table';
 
 
 export interface StorageItem {
@@ -69,7 +69,7 @@ const FrigateStorageStateTable: React.FC<TableProps> = ({
         setSortedName(headName)
     }
 
-    if (isPending) return <CogwheelLoader />
+    if (isPending) return <CenteredCogwheelLoader />
     if (isError) return <RetryError onRetry={refetch} />
     if (!tableData ) return <Center><Text>{t('errors.emptyResponse')}</Text></Center>
 

src/widgets/hosts.table/FrigateHostsTable.tsx

@@ -48,9 +48,10 @@ const FrigateHostsTable = ({ data, showAddButton = false, saveCallback, changedC
     }
 
     const headTitle = [
-        { propertyName: 'name', title: t('frigateHostTableTitles.host') },
+        { propertyName: 'name', title: t('siteTableTitles.siteName') },
-        { propertyName: 'host', title: t('frigateHostTableTitles.url') },
+        { propertyName: 'location', title: t('siteTableTitles.location') },
-        { propertyName: 'enabled', title: t('frigateHostTableTitles.enabled') },
+        { propertyName: 'host', title: t('siteTableTitles.url') },
+        { propertyName: 'enabled', title: t('siteTableTitles.enabled') },
         { title: '', sorting: false },
     ]
 
@@ -100,6 +101,7 @@ const FrigateHostsTable = ({ data, showAddButton = false, saveCallback, changedC
             updateAt: '',
             host: '',
             name: '',
+            location: '',
             enabled: true
         }
         setTableData([...tableData, newHost])
@@ -110,19 +112,27 @@ const FrigateHostsTable = ({ data, showAddButton = false, saveCallback, changedC
             <tr key={item.id}>
                 <TextInputCell
                     text={item.name}
-                    width='40%'
+                    width='25%'
                     id={item.id}
                     propertyName='name'
                     onChange={handleTextChange}
-                    placeholder={t('frigateHostTablePlaceholders.name')}
+                    placeholder={t('siteTablePlaceholders.name')}
+                />
+                <TextInputCell
+                    text={item.location || ''}
+                    width='25%'
+                    id={item.id}
+                    propertyName='location'
+                    onChange={handleTextChange}
+                    placeholder={t('siteTablePlaceholders.location')}
                 />
                 <TextInputCell
                     text={item.host}
-                    width='40%'
+                    width='30%'
                     id={item.id}
                     propertyName='host'
                     onChange={handleTextChange}
-                    placeholder={t('frigateHostTablePlaceholders.host')}
+                    placeholder={t('siteTablePlaceholders.url')}
                 />
                 <SwitchCell value={item.enabled} width='5%' id={item.id} propertyName='enabled' toggle={handleSwitchChange} />
                 <StateCell id={item.id} width='5%' />

src/widgets/sidebars/EventsRightFilters.tsx

@@ -1,12 +1,15 @@
+import { Slider, Text, Stack } from '@mantine/core';
 import { observer } from 'mobx-react-lite';
-import { useContext, useState } from 'react';
+import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { Context } from '../..';
 import CameraSelect from '../../shared/components/filters/CameraSelect';
 import DateRangeSelect from '../../shared/components/filters/DateRangeSelect';
-import HostSelect from '../../shared/components/filters/HostSelect';
+import SiteSelect from '../../shared/components/filters/SiteSelect';
 import TimePicker from '../../shared/components/filters/TimePicker';
+import ObjectTypeFilter from '../../shared/components/filters/ObjectTypeFilter';
+import EventTypeFilter from '../../shared/components/filters/EventTypeFilter';
 import { isProduction } from '../../shared/env.const';
 
 
@@ -42,6 +45,21 @@ const EventsRightFilters = () => {
         if (!isProduction) console.log('Selected end time: ', value)
     }
 
+    const handleMinScoreChange = (value: number) => {
+        eventsStore.setMinScore(value > 0 ? value : undefined, navigate)
+        if (!isProduction) console.log('Selected min score: ', value)
+    }
+
+    const handleLabelsChange = (labels: string[] | undefined) => {
+        eventsStore.setLabels(labels, navigate)
+        if (!isProduction) console.log('Selected labels: ', labels)
+    }
+
+    const handleEventTypeChange = (eventType: 'all' | 'motion' | 'ai_detection') => {
+        eventsStore.setEventType(eventType, navigate)
+        if (!isProduction) console.log('Selected event type: ', eventType)
+    }
+
     const validatedStartTime = () => {
         if (eventsStore.filters.startTime && eventsStore.filters.endTime) {
             if (eventsStore.filters.startTime > eventsStore.filters.endTime) {
@@ -53,8 +71,8 @@ const EventsRightFilters = () => {
 
     return (
         <>
-            <HostSelect
+            <SiteSelect
-                label={t('selectHost')}
+                label={t('selectSite')}
                 valueId={eventsStore.filters.hostId}
                 onChange={handleHostSelect}
             />
@@ -86,6 +104,33 @@ const EventsRightFilters = () => {
                         label={t('eventsPage.selectEndTime')}
                         onChange={handleSelectEndTime}
                     />
+                    <Stack mt="md" gap="xs">
+                        <Text size="sm" fw={500}>{t('eventsPage.confidenceThreshold')}</Text>
+                        <Slider
+                            min={0}
+                            max={1}
+                            step={0.05}
+                            value={eventsStore.filters.minScore ?? 0}
+                            onChange={handleMinScoreChange}
+                            marks={[
+                                { value: 0, label: '0%' },
+                                { value: 0.5, label: '50%' },
+                                { value: 1, label: '100%' }
+                            ]}
+                            label={(value) => `${(value * 100).toFixed(0)}%`}
+                            styles={{
+                                markLabel: { fontSize: '0.75rem' },
+                            }}
+                        />
+                    </Stack>
+                    <ObjectTypeFilter
+                        value={eventsStore.filters.labels}
+                        onChange={handleLabelsChange}
+                    />
+                    <EventTypeFilter
+                        value={eventsStore.filters.eventType}
+                        onChange={handleEventTypeChange}
+                    />
                 </>
             }
         </>

src/widgets/sidebars/MainFiltersRightSide.tsx

@@ -2,7 +2,7 @@ import { observer } from 'mobx-react-lite';
 import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Context } from '../..';
-import HostSelect from '../../shared/components/filters/HostSelect';
+import SiteSelect from '../../shared/components/filters/SiteSelect';
 import UserTagsFilter from '../../shared/components/filters/UserTagsFilter';
 import { isProduction } from '../../shared/env.const';
 import { useNavigate } from 'react-router-dom';
@@ -27,8 +27,8 @@ const MainFiltersRightSide = () => {
 
     return (
         <>
-            <HostSelect
+            <SiteSelect
-                label={t('selectHost')}
+                label={t('selectSite')}
                 valueId={hostId || undefined}
                 defaultId={hostId || undefined}
                 onChange={handleSelectHost}

tsconfig.json

@@ -18,7 +18,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
   },
   "include": [
     "src",

yarn.lock

@@ -3768,6 +3768,11 @@ clsx@1.1.1:
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
   integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
 
+clsx@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -9861,6 +9866,11 @@ tabbable@^6.0.1:
   resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
   integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
 
+tailwind-merge@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-3.0.1.tgz#0f0189966511ebcd63ef98d9eaf5607beb0d59d3"
+  integrity sha512-AvzE8FmSoXC7nC+oU5GlQJbip2UO7tmOhOfQyOmPhrStOGXHU08j8mZEHZ4BmCqY5dWTCo4ClWkNyRNx1wpT0g==
+
 tailwindcss@^3.0.2:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.1.tgz#f512ca5d1dd4c9503c7d3d28a968f1ad8f5c839d"