.env.docker

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

Dockerfile

@@ -1,7 +1,6 @@
 # syntax=docker/dockerfile:1
 # Build commands:
-# - $VERSION="0.2.1"
+# - $VERSION="0.1.9"
-# - 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.2.1",
+  "version": "0.1.8",
   "private": true,
   "dependencies": {
     "@cycjimmy/jsmpeg-player": "^6.0.5",
@@ -25,7 +25,6 @@
     "@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",
@@ -56,7 +55,6 @@
     "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.sitesConfig'), admin: true },
+        { link: routesPath.HOSTS_PATH, label: t('header.hostsConfig'), admin: true },
         { link: routesPath.ACCESS_PATH, label: t('header.acessSettings'), admin: true },
     ]
 
@@ -53,7 +53,7 @@ const AppBody = () => {
 
             aside={
                 !pathsWithRightSidebar.includes(location.pathname) ? <></> :
-                    <RightSideBar onChangeHidden={handleRightSidebarChange} />
+                    <RightSideBar onChangeHidden={handleRightSidebarChange}/>
             }
         >
             <AppRouter />

src/hooks/resize-observer.ts

@@ -1,69 +0,0 @@
-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 OverlayCogwheelLoader from './shared/components/loaders/OverlayCogwheelLoader';
+import CenterLoader from './shared/components/loaders/CenterLoader';
 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={<OverlayCogwheelLoader />}
+    LoadingComponent={<CenterLoader />}
     onEvent={eventLogger}
     onTokens={tokenLogger}
     initOptions={{

src/locales/en.ts

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

src/locales/ru.ts

@@ -11,17 +11,11 @@ const ru = {
         width: 'Ширина',
         height: 'Высота',
         points: 'Точки',
-    },
+    },    
     eventsPage: {
         selectStartTime: 'Выбери время начала:',
         selectEndTime: 'Выбери время окончания:',
         startTimeBiggerThanEnd: 'Время начала больше времени окончания',
-        confidenceThreshold: 'Порог уверенности',
-        objectTypeFilter: 'Тип объекта',
-        selectObjectType: 'Выберите типы объектов...',
-        eventTypeFilter: 'Тип события',
-        allEvents: 'Все события',
-        aiDetectionOnly: 'AI обнаружение',
     },
     frigateConfigPage: {
         copyConfig: 'Копировать Конфиг.',
@@ -84,25 +78,18 @@ const ru = {
         settings: 'Настройки',
         recordings: 'Записи',
         events: 'События',
-        sitesConfig: 'Объекты',
+        hostsConfig: 'Серверы Frigate',
         acessSettings: 'Настройка доступа',
     },
-    siteTableTitles: {
+    frigateHostTableTitles: {
-        siteName: 'Название объекта',
+        host: 'Хост',
-        location: 'Физ. расположение',
+        name: 'Имя хоста',
-        url: 'Frigate URL',
+        url: 'Адрес',
         enabled: 'Включен',
     },
-    siteTablePlaceholders: {
+    frigateHostTablePlaceholders: {
-        url: 'http://host.docker.internal:5000 or http://192.168.1.1:5000',
+        host: 'http://host.docker.internal:5000 or http://192.168.1.1:5000',
-        name: 'Склад Северный',
+        name: 'YourFrigateHostName',
-        location: 'Здание А, Этаж 2',
-    },
-    siteStatus: {
-        online: 'В сети',
-        degraded: 'Частично',
-        offline: 'Не в сети',
-        camerasOnline: '{{online}}/{{total}} камер в сети',
     },
     player: {
         startVideo: 'Вкл. Видео',
@@ -124,7 +111,7 @@ const ru = {
     version: 'Версия',
     uptime: 'Время работы',
     pleaseSelectRole: 'Пожалуйста выберите роль',
-    pleaseSelectSite: 'Пожалуйста выберите объект',
+    pleaseSelectHost: 'Пожалуйста выберите хост',
     pleaseSelectCamera: 'Пожалуйста выберите камеру',
     pleaseSelectDate: 'Пожалуйста выберите дату',
     nothingHere: 'Ничего нет',
@@ -141,7 +128,7 @@ const ru = {
     events: 'События',
     notHaveEvents: 'Событий нет',
     notHaveEventsAtThatPeriod: 'Нет событий за этот период',
-    selectSite: 'Выбери объект',
+    selectHost: 'Выбери хост',
     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 OverlayCogwheelLoader from '../shared/components/loaders/OverlayCogwheelLoader';
+import CenterLoader from '../shared/components/loaders/CenterLoader';
 import { dimensions } from '../shared/dimensions/dimensions';
 import { isProduction } from '../shared/env.const';
 import Forbidden from './403';
@@ -22,10 +22,13 @@ 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,16 +1,15 @@
-import { Button, Center, Flex, Text, Divider, Paper, Title } from '@mantine/core';
+import { Button, Center, Flex, Text } 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, useEffect } from 'react';
+import { useState } 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 OverlayCogwheelLoader from '../shared/components/loaders/OverlayCogwheelLoader';
+import CenterLoader from '../shared/components/loaders/CenterLoader';
-import RetentionSettings from '../shared/components/RetentionSettings';
 import { Point, extractMaskNumber } from '../shared/utils/maskPoint';
 import CameraMaskDrawer from '../widgets/CameraMaskDrawer';
 import CameraPageHeader from '../widgets/header/CameraPageHeader';
@@ -23,7 +22,6 @@ 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],
@@ -105,7 +103,7 @@ const EditCameraPage = () => {
 
     const { isAdmin, isLoading: adminLoading, isError: adminError } = useAdminRole()
 
-    if (isPending || adminLoading) return <OverlayCogwheelLoader />
+    if (isPending || adminLoading) return <CenterLoader />
     if (!isAdmin) return <Forbidden />
     if (isError || adminError) return <RetryErrorPage onRetry={refetch} />
 
@@ -145,45 +143,9 @@ 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 />
+            <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,9 +18,6 @@ export const eventsQueryParams = {
     endDate: 'endDate',
     startTime: 'startTime',
     endTime: 'endTime',
-    minScore: 'minScore',
-    labels: 'labels',
-    eventType: 'eventType',
 }
 
 const EventsPage = () => {
@@ -37,17 +34,14 @@ const EventsPage = () => {
         const paramEndDate = searchParams.get(eventsQueryParams.endDate) || undefined
         const paramStartTime = searchParams.get(eventsQueryParams.startTime) || undefined
         const paramEndTime = searchParams.get(eventsQueryParams.endTime) || undefined
-        const paramMinScore = searchParams.get(eventsQueryParams.minScore) || undefined
+        eventsStore.loadFiltersFromPage(paramHostId, paramCameraId, paramStartDate, paramEndDate, paramStartTime, paramEndTime)
-        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, minScore, labels, eventType } = eventsStore.filters
+    const { hostId, cameraId, period, startTime, endTime } = eventsStore.filters
 
     useEffect(() => {
 
@@ -79,9 +73,6 @@ 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 OverlayCogwheelLoader from '../shared/components/loaders/OverlayCogwheelLoader';
+import CenterLoader from '../shared/components/loaders/CenterLoader';
 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 <OverlayCogwheelLoader />
+    if (hostsPending || adminLoading) return <CenterLoader />
     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 OverlayCogwheelLoader from '../shared/components/loaders/OverlayCogwheelLoader';
+import CenterLoader from '../shared/components/loaders/CenterLoader';
 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 <OverlayCogwheelLoader />
+  if (configPending || adminLoading) return <CenterLoader />
 
   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 OverlayCogwheelLoader from '../shared/components/loaders/OverlayCogwheelLoader';
+import CenterLoader from '../shared/components/loaders/CenterLoader';
 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 <OverlayCogwheelLoader />
+    if (isPending) return <CenterLoader />
     if (isError) return <RetryErrorPage onRetry={refetch} />
     if (!isAdmin) return <Forbidden />
     if (!paramHostId || !data) return null

src/pages/LiveCameraPage.tsx

@@ -4,16 +4,13 @@ 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 OverlayCogwheelLoader from '../shared/components/loaders/OverlayCogwheelLoader';
+import CenterLoader from '../shared/components/loaders/CenterLoader';
 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')
 
@@ -22,20 +19,15 @@ const LiveCameraPage = () => {
         queryFn: () => frigateApi.getCameraWHost(cameraId!)
     })
 
-    if (isPending) return <CenteredCogwheelLoader />
+    if (isPending) return <CenterLoader />
 
     if (isError) return <RetryErrorPage onRetry={refetch} />
 
 
     return (
-        <Flex ref={containerRef} w='100%' h='100%' justify='center' align='center' direction='column'>
+        <Flex w='100%' h='100%' justify='center' align='center' direction='column'>
             <CameraPageHeader camera={camera} editButton />
-            <Player 
+            <Player camera={camera} />
-            camera={camera} 
-            useWebGL={true}
-            preferredLiveMode='jsmpeg'
-            containerRef={containerRef}
-            />
         </Flex>
     );
 }

src/pages/MainPage.tsx

@@ -1,6 +1,6 @@
-import { Flex, Accordion } from '@mantine/core';
+import { Flex, Grid } from '@mantine/core';
 import { IconSearch } from '@tabler/icons-react';
-import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
+import { useInfiniteQuery } from '@tanstack/react-query';
 import { observer } from 'mobx-react-lite';
 import { ChangeEvent, useContext, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -10,15 +10,14 @@ import { Context } from '..';
 import { useDebounce } from '../hooks/useDebounce';
 import { useRealmUser } from '../hooks/useRealmUser';
 import { frigateApi, frigateQueryKeys } from '../services/frigate.proxy/frigate.api';
-import { GetCameraWHostWConfig, GetFrigateHost } from '../services/frigate.proxy/frigate.schema';
+import { GetCameraWHostWConfig } 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',
@@ -43,11 +42,6 @@ const MainPage = () => {
 
     const pageSize = 20;
 
-    const { data: sitesData } = useQuery({
-        queryKey: [frigateQueryKeys.getFrigateHosts],
-        queryFn: frigateApi.getHosts
-    })
-
     const {
         data,
         isLoading,
@@ -60,6 +54,7 @@ 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,
@@ -68,13 +63,16 @@ 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)
 
@@ -85,10 +83,11 @@ const MainPage = () => {
             } else if (hasNextPage && !isFetchingNextPage) {
                 loadTriggered.current = true;
                 fetchNextPage().then(() => {
+                    // Add a small delay before resetting the flag
                     setTimeout(() => {
-                        loadTriggered.current = false;
+                      loadTriggered.current = false;
-                    }, 300);
+                    }, 300); // delay in milliseconds; adjust as needed
-                });
+                  });
             }
         }
     }, [inView, cameras, visibleCount, hasNextPage, isFetchingNextPage, isFetching, fetchNextPage])
@@ -114,6 +113,7 @@ const MainPage = () => {
         return () => setRightChildren(null);
     }, []);
 
+
     const debouncedHandleSearchQuery = useDebounce((value: string) => {
         mainStore.setSearchQuery(value, navigate);
     }, 600);
@@ -122,31 +122,16 @@ const MainPage = () => {
         debouncedHandleSearchQuery(event.currentTarget.value)
     }
 
-    if (isLoading) return <CenteredCogwheelLoader />;
+    if (isLoading) return <CogwheelLoader />;
     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%' justify='center'>
+            <Flex w='100%'
+                justify='center'
+            >
                 <ClearableTextInput
                     clearable
                     maw={400}
@@ -157,31 +142,14 @@ const MainPage = () => {
                     onChange={onInputChange}
                 />
             </Flex>
-            <Flex justify='center' h='100%' direction='column' w='100%' mt="md">
+            <Flex justify='center' h='100%' direction='column' w='100%' >
-                <Accordion multiple defaultValue={initialExpanded} variant="separated">
+                <Grid mt='sm' justify="center" mb='sm' align='stretch'>
-                    {enabledSites.map(site => {
+                    {cameras.slice(0, visibleCount).map(camera => (
-                        const siteCameras = groupedCameras[site.id] || []
+                        <CameraCard key={camera.id} camera={camera} />
-                        const onlineCount = siteCameras.filter(c => c.state !== false).length
+                    ))}
-
+                </Grid>
-                        // If we are filtering by host, only show that host
+                { isFetching && !isFetchingNextPage ? <CogwheelLoader /> : null}
-                        if (selectedHostId && site.id !== selectedHostId) return null
+                {/* trigger point. Rerender twice when enabled */}
-
-                        // 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}
                 <div ref={ref} style={{ height: '50px' }} />
             </Flex>
         </Flex>

src/pages/PlayRecordPage.tsx

@@ -6,7 +6,6 @@ import NotFound from './404';
 
 export const playRecordPageQuery = {
     link: 'link',
-    startTime: 'startTime',
 }
 
 const PlayRecordPage = () => {
@@ -14,15 +13,11 @@ 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} initialSeekTime={initialSeekTime} />
+            <VideoPlayer videoUrl={paramLink} />
         </Flex>
     );
 };

src/pages/SettingsPage.tsx

@@ -7,12 +7,11 @@ 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 OverlayCogwheelLoader from '../shared/components/loaders/OverlayCogwheelLoader';
+import CenterLoader from '../shared/components/loaders/CenterLoader';
 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()
@@ -38,11 +37,10 @@ const SettingsPage = () => {
     }
 
     if (!isAdmin) return <Forbidden />
-    if (adminLoading) return <OverlayCogwheelLoader />
+    if (adminLoading) return <CenterLoader />
 
     return (
         <Flex h='100%'>
-            <VersionTag />
             {!isMobile ?
                 < Space w='20%' />
                 : null

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

@@ -28,7 +28,6 @@ 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()
 });
@@ -132,7 +131,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, Menu, rem } from '@mantine/core';
+import { ActionIcon, Badge, Button, Menu, rem } from '@mantine/core';
 import { IconPlus } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
 import React from 'react';
-import { frigateApi, frigateQueryKeys } from '../../services/frigate.proxy/frigate.api';
+import { frigateQueryKeys, frigateApi } from '../../services/frigate.proxy/frigate.api';
-import CenteredCogwheelLoader from './loaders/CenteredCogwheelLoader';
+import CogwheelLoader from './loaders/CogwheelLoader';
 import RetryError from './RetryError';
 
 interface AddBadgeProps {
@@ -24,7 +24,7 @@ const AddBadge: React.FC<AddBadgeProps> = ({
         if (onClick) onClick(tagId)
     }
 
-    if (isPending) return <CenteredCogwheelLoader />
+    if (isPending) return <CogwheelLoader />
     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 CenteredCogwheelLoader from './loaders/CenteredCogwheelLoader';
+import CogwheelLoader from './loaders/CogwheelLoader';
 
 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, roleId],
+        queryKey: [frigateQueryKeys.getCamerasWHost],
         queryFn: () => frigateApi.getCamerasWHost()
     })
 
@@ -48,7 +48,7 @@ const CamerasTransferList = ({
     }, [cameras])
 
 
-    if (isPending) return <CenteredCogwheelLoader />
+    if (isPending) return <CogwheelLoader />
     if (isError || !cameras) return <RetryError onRetry={refetch} />
     if (cameras.length < 1) return <Text> {t('camersDoesNotExist')}</Text>
 

src/shared/components/RetentionSettings.tsx

@@ -1,79 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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, Flex, Text } from '@mantine/core';
+import { Accordion, Center, Flex, Loader, 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,9 +24,6 @@ interface EventsAccordionProps {
     hour?: string,
     camera: GetCameraWHostWConfig
     host: GetFrigateHost
-    minScore?: number
-    labels?: string[]
-    eventType?: 'all' | 'motion' | 'ai_detection'
 }
 
 /**
@@ -42,9 +39,6 @@ const EventsAccordion = ({
     hour,
     camera,
     host,
-    minScore,
-    labels,
-    eventType,
 }: EventsAccordionProps) => {
     const { recordingsStore: recStore } = useContext(Context)
     const [openedItem, setOpenedItem] = useState<string>()
@@ -58,8 +52,8 @@ 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, minScore, labels, eventType],
+        queryKey: [frigateQueryKeys.getEvents, host, camera, day, hour, startTime, endTime],
-        queryFn: ({ signal }) => {
+        queryFn: ({signal}) => {
             if (!isRequiredParams) return null
             let queryStartTime: number
             let queryEndTime: number
@@ -77,8 +71,6 @@ const EventsAccordion = ({
                 before: queryEndTime,
                 hasClip: true,
                 includeThumnails: false,
-                minScore: minScore,
-                labels: labels,
             })
             if (parsed.success) {
                 return proxyApi.getEvents(
@@ -107,7 +99,7 @@ const EventsAccordion = ({
         }
     })
 
-    if (isPending) return <CenteredCogwheelLoader />
+    if (isPending) return <Flex w='100%' h='100%' direction='column' justify='center' align='center'><CogwheelLoader /></Flex>
     if (isError && retryCount >= MAX_RETRY_COUNT) {
         return (
             <Flex w='100%' h='100%' direction='column' justify='center' align='center'>
@@ -122,11 +114,6 @@ 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)
@@ -154,7 +141,7 @@ const EventsAccordion = ({
             value={openedItem}
             onChange={handleOpenItem}
         >
-            {filteredData.map(event => (
+            {data.map(event => (
                 <EventsAccordionItem
                     key={event.id}
                     event={event}

src/shared/components/accordion/EventsAccordionItem.tsx

@@ -13,7 +13,6 @@ 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 {
@@ -82,18 +81,12 @@ const EventsAccordionItem = ({
             <Accordion.Control key={event.id + 'Control'}>
                 <Flex justify='space-between'>
                     {!hostName ? <></> :
-                        <BoundingBoxOverlay
+                        <OnScreenImage
-                            box={event.data?.box}
+                            maw={200}
-                            label={event.label}
+                            mr='1rem'
-                            score={event.data?.score}
+                            fit="contain"
-                        >
+                            withPlaceholder
-                            <OnScreenImage
+                            src={proxyApi.eventThumbnailUrl(hostName, event.id)} />
-                                maw={200}
-                                mr='1rem'
-                                fit="contain"
-                                withPlaceholder
-                                src={proxyApi.eventThumbnailUrl(hostName, event.id)} />
-                        </BoundingBoxOverlay>
                     }
                     {eventLabel(event)}
                     <Group>

src/shared/components/filters/EventTypeFilter.tsx

@@ -1,32 +0,0 @@
-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/HostSelect.tsx

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

src/shared/components/filters/ObjectTypeFilter.tsx

@@ -1,48 +0,0 @@
-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 CenteredCogwheelLoader from '../loaders/CenteredCogwheelLoader';
+import CogwheelLoader from '../loaders/CogwheelLoader';
 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 <CenteredCogwheelLoader />
+    if (isPending) return <CogwheelLoader />
     if (isError || !data) return <RetryError onRetry={refetch} />
 
     const rolesSelect: OneSelectItem[] = data.map(role => ({ value: role.id, label: role.name }))

src/shared/components/filters/UserTagsFilter.tsx

@@ -1,15 +1,16 @@
 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 {
@@ -132,7 +133,7 @@ const UserTagsFilter: React.FC<UserTagsFilterProps> = ({
         }
     }
 
-    if (isPending) return <CenteredCogwheelLoader />
+    if (isPending) return <CogwheelLoader />
     if (isError) return <RetryError onRetry={refetch} />
 
     const handleOnChange = (value: string[]) => {

src/shared/components/images/BoundingBoxOverlay.tsx

@@ -1,122 +0,0 @@
-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/CenterLoader.tsx

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

src/shared/components/loaders/CenteredCogwheelLoader.tsx

@@ -1,13 +0,0 @@
-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/players/JSMpegPlayer.tsx

@@ -1,252 +1,74 @@
 // @ts-ignore we know this doesn't have types
 import JSMpeg from "@cycjimmy/jsmpeg-player";
 import { useViewportSize } from "@mantine/hooks";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, 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 = {
-  url: string;
+  wsUrl: string;
-  camera: string
+  cameraHeight?: number,
-  className?: string;
+  cameraWidth?: number,
-  width: number;
-  height: number;
-  containerRef: React.MutableRefObject<HTMLDivElement | null>;
-  playbackEnabled: boolean;
-  useWebGL: boolean;
-  setStats?: (stats: PlayerStatsType) => void;
-  onPlaying?: () => void;
 };
 
 const JSMpegPlayer = (
   {
-    url,
+    wsUrl,
-    camera,
+    cameraWidth = 1200,
-    width,
+    cameraHeight = 800,
-    height,
-    className,
-    containerRef,
-    playbackEnabled,
-    useWebGL = false,
-    setStats,
-    onPlaying,
   }: JSMpegPlayerProps
 ) => {
-  const videoRef = useRef<HTMLDivElement>(null);
+  const { t } = useTranslation()
-  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const playerRef = useRef<HTMLDivElement>(null);
-  const internalContainerRef = useRef<HTMLDivElement | null>(null);
+  const [playerInitialized, setPlayerInitialized] = useState(false)
-  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 selectedContainerRef = useMemo(
+  const { height: maxHeight, width: maxWidth } = useViewportSize()
-    () => (containerRef.current ? containerRef : internalContainerRef),
-    // we know that these deps are correct
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [containerRef, containerRef.current, internalContainerRef],
-  );
 
-  const [{ width: containerWidth, height: containerHeight }] =
+  useEffect(() => {
-    useResizeObserver(selectedContainerRef);
+    const video = new JSMpeg.VideoElement(
+      playerRef.current,
+      wsUrl,
+      {},
+      { protocols: [], audio: false, videoBufferSize: 1024 * 1024 * 4 }
+    );
 
-  const stretch = true;
+    const toggleFullscreen = () => {
-  const aspectRatio = width / height;
+      const canvas = video.els.canvas;
-
+      if (!document.fullscreenElement && !(document as any).webkitFullscreenElement) { // Use bracket notation for webkit
-  const fitAspect = useMemo(
+        // Enter fullscreen
-    () => containerWidth / containerHeight,
+        if (canvas.requestFullscreen) {
-    [containerWidth, containerHeight],
+          canvas.requestFullscreen();
-  );
+        } else if ((canvas as any).webkitRequestFullScreen) { // Use bracket notation for webkit
-
+          (canvas as any).webkitRequestFullScreen();
-  const scaledHeight = useMemo(() => {
+        } else if (canvas.mozRequestFullScreen) {
-    if (selectedContainerRef?.current && width && height) {
+          canvas.mozRequestFullScreen();
-      const scaledHeight =
+        }
-        aspectRatio < (fitAspect ?? 0)
+      } else {
-          ? Math.floor(
+        // Exit fullscreen
-              Math.min(
+        if (document.exitFullscreen) {
-                containerHeight,
+          document.exitFullscreen();
-                selectedContainerRef.current?.clientHeight,
+        } else if ((document as any).webkitExitFullscreen) { // Use bracket notation for webkit
-              ),
+          (document as any).webkitExitFullscreen();
-            )
+        } else if ((document as any).mozCancelFullScreen) {
-          : aspectRatio >= fitAspect
+          (document as any).mozCancelFullScreen();
-            ? 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(() => {
+    video.els.canvas.addEventListener('dblclick', toggleFullscreen);
-    if (aspectRatio && scaledHeight) {
-      return Math.ceil(scaledHeight * aspectRatio);
-    }
-    return undefined;
-  }, [scaledHeight, aspectRatio]);
 
-  useEffect(() => {
+    return () => {
-    if (scaledWidth && scaledHeight) {
+      video.destroy();
-      setDimensionsReady(true);
+      video.els.canvas.removeEventListener('dblclick', toggleFullscreen);
-    }
+    };
-  }, [scaledWidth, scaledHeight]);
+  }, [wsUrl]);
-
-  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 () => {
-          if (statsIntervalRef.current) {
-            clearInterval(statsIntervalRef.current);
-            frameCount = 0;
-            statsIntervalRef.current = null;
-          }
-        };
-      }, 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
-      <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

@@ -1,60 +0,0 @@
-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,23 +1,19 @@
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useRef, useEffect } 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, showSpeedControls = true, initialSeekTime }: VideoPlayerProps) => {
+const VideoPlayer = ({ videoUrl }: 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) {
@@ -60,11 +56,6 @@ const VideoPlayer = ({ videoUrl, showSpeedControls = true, initialSeekTime }: Vi
         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')
@@ -87,24 +78,10 @@ const VideoPlayer = ({ videoUrl, showSpeedControls = true, initialSeekTime }: Vi
     }
   }, [videoUrl]);
 
-  const handleSpeedChange = (speed: number) => {
-    setCurrentSpeed(speed);
-    if (!isProduction) console.log('Playback speed changed to:', speed);
-  };
-
   return (
-    <div>
+    <div data-vjs-player>
-      <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 */}
-        {/* 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 />
-        <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,46 +1,25 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef } from "react";
-import { LivePlayerError, PlayerStatsType } from "../../../types/live";
 
 type WebRtcPlayerProps = {
-  camera: string;
-  wsURI: string;
   className?: string;
+  camera: string;
   playbackEnabled?: boolean;
-  audioEnabled?: boolean;
+  onPlaying?: () => void,
-  volume?: number;
+  wsUrl: string
-  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({
-  camera,
-  wsURI,
   className,
+  camera,
   playbackEnabled = true,
-  audioEnabled = false,
-  volume,
-  microphoneEnabled = false,
-  iOSCompatFullScreen = false,
-  pip = false,
-  getStats = false,
-  setStats,
   onPlaying,
-  onError,
+  wsUrl
 }: 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) {
@@ -48,7 +27,6 @@ export default function WebRtcPlayer({
       }
 
       const pc = new RTCPeerConnection({
-        bundlePolicy: "max-bundle",
         iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
       });
 
@@ -81,7 +59,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);
       }
@@ -89,12 +67,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 =
@@ -108,13 +86,12 @@ export default function WebRtcPlayer({
   }
 
   const connect = useCallback(
-    async (aPc: Promise<RTCPeerConnection | undefined>) => {
+    async (ws: WebSocket, aPc: Promise<RTCPeerConnection | undefined>) => {
       if (!aPc) {
         return;
       }
 
       pcRef.current = await aPc;
-      const ws = new WebSocket(wsURI);
 
       ws.addEventListener("open", () => {
         pcRef.current?.addEventListener("icecandidate", (ev) => {
@@ -150,7 +127,7 @@ export default function WebRtcPlayer({
         }
       });
     },
-    [wsURI],
+    []
   );
 
   useEffect(() => {
@@ -162,10 +139,13 @@ export default function WebRtcPlayer({
       return;
     }
 
-    const aPc = PeerConnection(
+    // const url = `$baseUrl{.replace(
-      microphoneEnabled ? "video+audio+microphone" : "video+audio",
+    //   /^http/,
-    );
+    //   "ws"
-    connect(aPc);
+    // )}live/webrtc/api/ws?src=${camera}`;
+    const ws = new WebSocket(wsUrl);
+    const aPc = PeerConnection("video+audio");
+    connect(ws, aPc);
 
     return () => {
       if (pcRef.current) {
@@ -173,174 +153,16 @@ 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={!audioEnabled}
+      muted
-      onLoadedData={handleLoadedData}
+      onLoadedData={onPlaying}
-      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,9 +8,6 @@ interface Filters {
     period?: [Date | null, Date | null]
     startTime?: string
     endTime?: string
-    minScore?: number
-    labels?: string[]
-    eventType?: 'all' | 'motion' | 'ai_detection'
 }
 
 export class EventsStore {
@@ -26,10 +23,7 @@ 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) {
@@ -37,20 +31,6 @@ 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) {
@@ -78,21 +58,6 @@ 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);
@@ -109,15 +74,6 @@ 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

@@ -1,6 +0,0 @@
-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,48 +1 @@
-export type LivePlayerMode = "webrtc" | "mse" | "jsmpeg" | "debug";
+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 OverlayCogwheelLoader from '../shared/components/loaders/OverlayCogwheelLoader';
+import CenterLoader from '../shared/components/loaders/CenterLoader';
 import RetryError from '../shared/components/RetryError';
 import { dayTimeToUnixTime } from '../shared/utils/dateUtil';
 
@@ -13,9 +13,6 @@ interface EventsBodyProps {
     period: [Date, Date],
     startTime?: string,
     endTime?: string,
-    minScore?: number,
-    labels?: string[],
-    eventType?: 'all' | 'motion' | 'ai_detection',
 }
 
 
@@ -25,9 +22,6 @@ const EventsBody: FC<EventsBodyProps> = ({
     period,
     startTime,
     endTime,
-    minScore,
-    labels,
-    eventType,
 }) => {
 
     const startTimeUnix = dayTimeToUnixTime(period[0], startTime ? startTime : '00:00')
@@ -42,7 +36,7 @@ const EventsBody: FC<EventsBodyProps> = ({
         }
     })
 
-    if (isPending) return <OverlayCogwheelLoader />
+    if (isPending) return <CenterLoader />
     if (isError) return <RetryError onRetry={refetch} />
     if (!data) return null
 
@@ -52,9 +46,6 @@ 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 CenteredCogwheelLoader from '../shared/components/loaders/CenteredCogwheelLoader';
+import CogwheelLoader from '../shared/components/loaders/CogwheelLoader';
+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 <CenteredCogwheelLoader />
+    if (isPending) return <CogwheelLoader />
     if (isError) return <RetryError onRetry={refetch} />
 
     return (

src/widgets/Player.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, 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,14 +6,11 @@ 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, PlayerStatsType } from '../types/live';
+import { LivePlayerMode } 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;
@@ -21,42 +18,20 @@ 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),
-      !showStillWithoutActivity ||
+    [activeMotion, activeTracking, windowVisible]
-      (windowVisible && (activeMotion || activeTracking)),
-    [activeMotion, activeTracking, showStillWithoutActivity, windowVisible],
   );
 
   // camera live state
@@ -77,12 +52,7 @@ const Player = ({
     }
   }, [cameraActive, liveReady, liveMode]);
 
-
+  if (!isProduction) console.log(`liveMode: `, liveMode)
-  const playerIsPlaying = useCallback(() => {
-    setLiveReady(true);
-  }, []);
-
-
   let player;
   if (liveMode === "webrtc") {
     player = (
@@ -91,7 +61,7 @@ const Player = ({
         camera={cameraConfig.live.stream_name}
         playbackEnabled={cameraActive}
         onPlaying={() => setLiveReady(true)}
-        wsURI={wsUrl}
+        wsUrl={wsUrl}
       />
     );
   } else if (liveMode === "mse") {
@@ -99,7 +69,7 @@ const Player = ({
       player = (
         <MSEPlayer
           className={`rounded-2xl h-full ${liveReady ? "" : "hidden"}`}
-          camera='Not yet implemented' // TODO implement MSE player with audio
+          camera='Not yet implemented' // TODO implement player
           playbackEnabled={cameraActive}
           onPlaying={() => setLiveReady(true)}
           wsUrl={wsUrl}
@@ -116,19 +86,9 @@ const Player = ({
   } else if (liveMode === "jsmpeg") {
     player = (
       <JSMpegPlayer
-        key={"jsmpeg_" + key}
+        wsUrl={wsUrl}
-        url={wsUrl}
+        cameraWidth={camera.config?.detect.width}
-        camera={camera.config.name}
+        cameraHeight={camera.config?.detect.height}
-        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 CenteredCogwheelLoader from '../shared/components/loaders/CenteredCogwheelLoader';
+import CogwheelLoader from '../shared/components/loaders/CogwheelLoader';
+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 <CenteredCogwheelLoader />
+    if (isPending) return <CogwheelLoader />
     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 { useQuery } from '@tanstack/react-query';
+import React, { Suspense, useContext } from 'react';
-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';
+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';
 
 
 const SelectedCameraList = () => {
@@ -27,7 +27,7 @@ const SelectedCameraList = () => {
         cameraRefetch()
     }
 
-    if (cameraPending) return <CenteredCogwheelLoader />
+    if (cameraPending) return <CenterLoader />
     if (cameraError) return <RetryErrorPage onRetry={handleRetry} />
 
     if (!camera || !camera?.frigateHost) return null

src/widgets/SelectedDayList.tsx

@@ -1,15 +1,15 @@
-import { Center, Flex, Text } from '@mantine/core';
 import { useQuery } from '@tanstack/react-query';
-import { observer } from 'mobx-react-lite';
+import React, { useContext, useState } from 'react';
-import { useContext, useState } from 'react';
-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';
+import { Context } from '..';
+import { Center, Flex, Text } from '@mantine/core';
+import RetryErrorPage from '../pages/RetryErrorPage';
+import CenterLoader from '../shared/components/loaders/CenterLoader';
+import { observer } from 'mobx-react-lite';
+import DayAccordion from '../shared/components/accordion/DayAccordion';
+import { isProduction } from '../shared/env.const';
+import { useTranslation } from 'react-i18next';
 
 interface SelectedDayListProps {
     day: Date
@@ -52,7 +52,7 @@ const SelectedDayList = ({
         if (recStore.filteredHost) refetch()
     }
 
-    if (isPending) return <CenteredCogwheelLoader />
+    if (isPending) return <CenterLoader />
 
     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 { observer } from 'mobx-react-lite';
+import { frigateQueryKeys, frigateApi } from '../services/frigate.proxy/frigate.api';
-import { Suspense, lazy, useContext, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import { Context } from '..';
+import CenterLoader from '../shared/components/loaders/CenterLoader';
 import RetryErrorPage from '../pages/RetryErrorPage';
-import { frigateApi, frigateQueryKeys } from '../services/frigate.proxy/frigate.api';
+import { observer } from 'mobx-react-lite';
-import CenteredCogwheelLoader from '../shared/components/loaders/CenteredCogwheelLoader';
+import { useTranslation } from 'react-i18next';
 const CameraAccordion = lazy(() => import('../shared/components/accordion/CameraAccordion'));
 
 interface SelectedHostListProps {
@@ -38,7 +38,7 @@ const SelectedHostList = ({
         if (recStore.filteredHost) hostRefetch()
     }
 
-    if (hostPending) return <CenteredCogwheelLoader />
+    if (hostPending) return <CenterLoader />
     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 { useTranslation } from 'react-i18next';
-import { v4 as uuidv4 } from 'uuid';
 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 CogwheelLoader from '../../shared/components/loaders/CogwheelLoader';
 import RetryError from '../../shared/components/RetryError';
-import SortedTh from '../../shared/components/table.aps/SortedTh';
+import { Center, Flex, Table, Text } from '@mantine/core';
-import { formatMBytes } from '../../shared/utils/data.size';
-import { sortByKey } from '../../shared/utils/sort.array';
 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 { formatMBytes } from '../../shared/utils/data.size';
 
 
 export interface StorageItem {
@@ -69,7 +69,7 @@ const FrigateStorageStateTable: React.FC<TableProps> = ({
         setSortedName(headName)
     }
 
-    if (isPending) return <CenteredCogwheelLoader />
+    if (isPending) return <CogwheelLoader />
     if (isError) return <RetryError onRetry={refetch} />
     if (!tableData ) return <Center><Text>{t('errors.emptyResponse')}</Text></Center>
 

src/widgets/hosts.table/FrigateHostsTable.tsx

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

src/widgets/sidebars/EventsRightFilters.tsx

@@ -1,15 +1,12 @@
-import { Slider, Text, Stack } from '@mantine/core';
 import { observer } from 'mobx-react-lite';
-import { useContext } from 'react';
+import { useContext, useState } 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 SiteSelect from '../../shared/components/filters/SiteSelect';
+import HostSelect from '../../shared/components/filters/HostSelect';
 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';
 
 
@@ -45,21 +42,6 @@ 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) {
@@ -71,8 +53,8 @@ const EventsRightFilters = () => {
 
     return (
         <>
-            <SiteSelect
+            <HostSelect
-                label={t('selectSite')}
+                label={t('selectHost')}
                 valueId={eventsStore.filters.hostId}
                 onChange={handleHostSelect}
             />
@@ -104,33 +86,6 @@ 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 SiteSelect from '../../shared/components/filters/SiteSelect';
+import HostSelect from '../../shared/components/filters/HostSelect';
 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 (
         <>
-            <SiteSelect
+            <HostSelect
-                label={t('selectSite')}
+                label={t('selectHost')}
                 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,11 +3768,6 @@ 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"
@@ -9866,11 +9861,6 @@ 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"