Initial push to new VMS-frontend repository
This commit is contained in:
Asgarsk
parent
9fc7a44c69
commit
ba9a32720e
@ -1,4 +1,4 @@
|
||||
FRIGATE_PROXY=http://localhost:4000
|
||||
OPENID_SERVER=https://your.server.com:443/realms/your-realm
|
||||
REALM=frigate-realm
|
||||
FRIGATE_PROXY=http://frigate-proxy:4000
|
||||
OPENID_SERVER=https://keycloak:8443
|
||||
CLIENT_ID=frontend-client
|
||||
REALM=frigate-realm
|
||||
@ -16,7 +16,7 @@ const AppBody = () => {
|
||||
{ link: routesPath.SETTINGS_PATH, label: t('header.settings'), admin: true },
|
||||
{ link: routesPath.RECORDINGS_PATH, label: t('header.recordings') },
|
||||
{ link: routesPath.EVENTS_PATH, label: t('header.events') },
|
||||
{ link: routesPath.HOSTS_PATH, label: t('header.hostsConfig'), admin: true },
|
||||
{ link: routesPath.HOSTS_PATH, label: t('header.sitesConfig'), admin: true },
|
||||
{ link: routesPath.ACCESS_PATH, label: t('header.acessSettings'), admin: true },
|
||||
]
|
||||
|
||||
@ -53,7 +53,7 @@ const AppBody = () => {
|
||||
|
||||
aside={
|
||||
!pathsWithRightSidebar.includes(location.pathname) ? <></> :
|
||||
<RightSideBar onChangeHidden={handleRightSidebarChange}/>
|
||||
<RightSideBar onChangeHidden={handleRightSidebarChange} />
|
||||
}
|
||||
>
|
||||
<AppRouter />
|
||||
|
||||
@ -18,6 +18,12 @@ const en = {
|
||||
selectStartTime: 'Select start time:',
|
||||
selectEndTime: 'Select end time:',
|
||||
startTimeBiggerThanEnd: 'Start time bigger than end time',
|
||||
confidenceThreshold: 'Confidence Threshold',
|
||||
objectTypeFilter: 'Object Type',
|
||||
selectObjectType: 'Select object types...',
|
||||
eventTypeFilter: 'Event Type',
|
||||
allEvents: 'All Events',
|
||||
aiDetectionOnly: 'AI Detection',
|
||||
},
|
||||
frigateConfigPage: {
|
||||
copyConfig: 'Copy Config',
|
||||
@ -70,10 +76,10 @@ const en = {
|
||||
memory: 'Memory %'
|
||||
},
|
||||
hostMenu: {
|
||||
editConfig: 'Редакт. конфиг.',
|
||||
restart: 'Перезагрузка',
|
||||
system: 'Система',
|
||||
storage: 'Хранилище',
|
||||
editConfig: 'Edit config',
|
||||
restart: 'Restart',
|
||||
system: 'System',
|
||||
storage: 'Storage',
|
||||
},
|
||||
|
||||
header: {
|
||||
@ -81,18 +87,25 @@ const en = {
|
||||
settings: 'Settings',
|
||||
recordings: 'Recordings',
|
||||
events: 'Events',
|
||||
hostsConfig: 'Frigate servers',
|
||||
sitesConfig: 'Sites',
|
||||
acessSettings: 'Access settings',
|
||||
},
|
||||
frigateHostTableTitles: {
|
||||
host: 'Хост',
|
||||
name: 'Имя хоста',
|
||||
url: 'Адрес',
|
||||
enabled: 'Включен',
|
||||
siteTableTitles: {
|
||||
siteName: 'Site Name',
|
||||
location: 'Physical Location',
|
||||
url: 'Frigate URL',
|
||||
enabled: 'Enabled',
|
||||
},
|
||||
frigateHostTablePlaceholders: {
|
||||
host: 'http://host.docker.internal:5000 or http://192.168.1.1:5000',
|
||||
name: 'YourFrigateHostName',
|
||||
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',
|
||||
@ -114,7 +127,7 @@ const en = {
|
||||
version: 'Version',
|
||||
uptime: 'Uptime',
|
||||
pleaseSelectRole: 'Please select Role',
|
||||
pleaseSelectHost: 'Please select Host',
|
||||
pleaseSelectSite: 'Please select Site',
|
||||
pleaseSelectCamera: 'Please select Camera',
|
||||
pleaseSelectDate: 'Please select Date',
|
||||
nothingHere: 'Nothing here',
|
||||
@ -131,7 +144,7 @@ const en = {
|
||||
events: 'Events',
|
||||
notHaveEvents: 'No events',
|
||||
notHaveEventsAtThatPeriod: 'Not have events at that period',
|
||||
selectHost: 'Select host',
|
||||
selectSite: 'Select site',
|
||||
selectCamera: 'Select Camera',
|
||||
selectRange: 'Select period',
|
||||
changeTheme: "Change theme",
|
||||
|
||||
@ -16,6 +16,12 @@ const ru = {
|
||||
selectStartTime: 'Выбери время начала:',
|
||||
selectEndTime: 'Выбери время окончания:',
|
||||
startTimeBiggerThanEnd: 'Время начала больше времени окончания',
|
||||
confidenceThreshold: 'Порог уверенности',
|
||||
objectTypeFilter: 'Тип объекта',
|
||||
selectObjectType: 'Выберите типы объектов...',
|
||||
eventTypeFilter: 'Тип события',
|
||||
allEvents: 'Все события',
|
||||
aiDetectionOnly: 'AI обнаружение',
|
||||
},
|
||||
frigateConfigPage: {
|
||||
copyConfig: 'Копировать Конфиг.',
|
||||
@ -78,18 +84,25 @@ const ru = {
|
||||
settings: 'Настройки',
|
||||
recordings: 'Записи',
|
||||
events: 'События',
|
||||
hostsConfig: 'Серверы Frigate',
|
||||
sitesConfig: 'Объекты',
|
||||
acessSettings: 'Настройка доступа',
|
||||
},
|
||||
frigateHostTableTitles: {
|
||||
host: 'Хост',
|
||||
name: 'Имя хоста',
|
||||
url: 'Адрес',
|
||||
siteTableTitles: {
|
||||
siteName: 'Название объекта',
|
||||
location: 'Физ. расположение',
|
||||
url: 'Frigate URL',
|
||||
enabled: 'Включен',
|
||||
},
|
||||
frigateHostTablePlaceholders: {
|
||||
host: 'http://host.docker.internal:5000 or http://192.168.1.1:5000',
|
||||
name: 'YourFrigateHostName',
|
||||
siteTablePlaceholders: {
|
||||
url: 'http://host.docker.internal:5000 or http://192.168.1.1:5000',
|
||||
name: 'Склад Северный',
|
||||
location: 'Здание А, Этаж 2',
|
||||
},
|
||||
siteStatus: {
|
||||
online: 'В сети',
|
||||
degraded: 'Частично',
|
||||
offline: 'Не в сети',
|
||||
camerasOnline: '{{online}}/{{total}} камер в сети',
|
||||
},
|
||||
player: {
|
||||
startVideo: 'Вкл. Видео',
|
||||
@ -111,7 +124,7 @@ const ru = {
|
||||
version: 'Версия',
|
||||
uptime: 'Время работы',
|
||||
pleaseSelectRole: 'Пожалуйста выберите роль',
|
||||
pleaseSelectHost: 'Пожалуйста выберите хост',
|
||||
pleaseSelectSite: 'Пожалуйста выберите объект',
|
||||
pleaseSelectCamera: 'Пожалуйста выберите камеру',
|
||||
pleaseSelectDate: 'Пожалуйста выберите дату',
|
||||
nothingHere: 'Ничего нет',
|
||||
@ -128,7 +141,7 @@ const ru = {
|
||||
events: 'События',
|
||||
notHaveEvents: 'Событий нет',
|
||||
notHaveEventsAtThatPeriod: 'Нет событий за этот период',
|
||||
selectHost: 'Выбери хост',
|
||||
selectSite: 'Выбери объект',
|
||||
selectCamera: 'Выбери камеру',
|
||||
selectRange: 'Выбери период',
|
||||
changeTheme: "Изменить тему",
|
||||
|
||||
@ -1,15 +1,16 @@
|
||||
import { Button, Center, Flex, Text } from '@mantine/core';
|
||||
import { Button, Center, Flex, Text, Divider, Paper, Title } from '@mantine/core';
|
||||
import { notifications } from '@mantine/notifications';
|
||||
import { IconAlertCircle, IconCircleCheck } from '@tabler/icons-react';
|
||||
import { useMutation, useQuery } from '@tanstack/react-query';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import { useState } from 'react';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { useAdminRole } from '../hooks/useAdminRole';
|
||||
import { frigateApi, frigateQueryKeys, mapHostToHostname, proxyApi } from '../services/frigate.proxy/frigate.api';
|
||||
import MaskSelect, { MaskItem, MaskType } from '../shared/components/filters/MaskSelect';
|
||||
import OverlayCogwheelLoader from '../shared/components/loaders/OverlayCogwheelLoader';
|
||||
import RetentionSettings from '../shared/components/RetentionSettings';
|
||||
import { Point, extractMaskNumber } from '../shared/utils/maskPoint';
|
||||
import CameraMaskDrawer from '../widgets/CameraMaskDrawer';
|
||||
import CameraPageHeader from '../widgets/header/CameraPageHeader';
|
||||
@ -22,6 +23,7 @@ const EditCameraPage = () => {
|
||||
if (!cameraId) throw Error(t('editCameraPage.cameraIdNotExist'))
|
||||
const [selectedMask, setSelectedMask] = useState<MaskItem>()
|
||||
const [points, setPoints] = useState<Point[]>()
|
||||
const [retentionDays, setRetentionDays] = useState<number>(0)
|
||||
|
||||
const { data: camera, isPending, isError, refetch } = useQuery({
|
||||
queryKey: [frigateQueryKeys.getCameraWHost, cameraId],
|
||||
@ -143,9 +145,45 @@ const EditCameraPage = () => {
|
||||
setPoints([])
|
||||
}
|
||||
|
||||
// Initialize retention days from camera config
|
||||
useEffect(() => {
|
||||
if (camera?.config?.record?.retain?.days !== undefined) {
|
||||
setRetentionDays(camera.config.record.retain.days)
|
||||
}
|
||||
}, [camera])
|
||||
|
||||
const handleRetentionChange = (days: number) => {
|
||||
setRetentionDays(days)
|
||||
// Note: Actual config update requires modifying the Frigate YAML config
|
||||
// This could be integrated with a save button that calls proxyApi.postHostConfig
|
||||
notifications.show({
|
||||
id: 'retention-changed',
|
||||
withCloseButton: true,
|
||||
autoClose: 3000,
|
||||
title: t('settings.retentionUpdated'),
|
||||
message: t('settings.retentionUpdatedMessage', { days }),
|
||||
color: 'blue',
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<Flex w='100%' h='100%' direction='column'>
|
||||
<CameraPageHeader camera={camera} configButton/>
|
||||
<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
|
||||
|
||||
@ -18,6 +18,9 @@ export const eventsQueryParams = {
|
||||
endDate: 'endDate',
|
||||
startTime: 'startTime',
|
||||
endTime: 'endTime',
|
||||
minScore: 'minScore',
|
||||
labels: 'labels',
|
||||
eventType: 'eventType',
|
||||
}
|
||||
|
||||
const EventsPage = () => {
|
||||
@ -34,14 +37,17 @@ const EventsPage = () => {
|
||||
const paramEndDate = searchParams.get(eventsQueryParams.endDate) || undefined
|
||||
const paramStartTime = searchParams.get(eventsQueryParams.startTime) || undefined
|
||||
const paramEndTime = searchParams.get(eventsQueryParams.endTime) || undefined
|
||||
eventsStore.loadFiltersFromPage(paramHostId, paramCameraId, paramStartDate, paramEndDate, paramStartTime, paramEndTime)
|
||||
const paramMinScore = searchParams.get(eventsQueryParams.minScore) || undefined
|
||||
const paramLabels = searchParams.get(eventsQueryParams.labels) || undefined
|
||||
const paramEventType = searchParams.get(eventsQueryParams.eventType) || undefined
|
||||
eventsStore.loadFiltersFromPage(paramHostId, paramCameraId, paramStartDate, paramEndDate, paramStartTime, paramEndTime, paramMinScore, paramLabels, paramEventType)
|
||||
return () => setRightChildren(null)
|
||||
}, [])
|
||||
|
||||
const { eventsStore } = useContext(Context)
|
||||
|
||||
|
||||
const { hostId, cameraId, period, startTime, endTime } = eventsStore.filters
|
||||
const { hostId, cameraId, period, startTime, endTime, minScore, labels, eventType } = eventsStore.filters
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
@ -73,6 +79,9 @@ const EventsPage = () => {
|
||||
period={[period[0], period[1]]}
|
||||
startTime={startTime}
|
||||
endTime={endTime}
|
||||
minScore={minScore}
|
||||
labels={labels}
|
||||
eventType={eventType}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { Flex, Grid } from '@mantine/core';
|
||||
import { Flex, Accordion } from '@mantine/core';
|
||||
import { IconSearch } from '@tabler/icons-react';
|
||||
import { useInfiniteQuery } from '@tanstack/react-query';
|
||||
import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import { ChangeEvent, useContext, useEffect, useRef, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
@ -10,15 +10,15 @@ import { Context } from '..';
|
||||
import { useDebounce } from '../hooks/useDebounce';
|
||||
import { useRealmUser } from '../hooks/useRealmUser';
|
||||
import { frigateApi, frigateQueryKeys } from '../services/frigate.proxy/frigate.api';
|
||||
import { GetCameraWHostWConfig } from '../services/frigate.proxy/frigate.schema';
|
||||
import { GetCameraWHostWConfig, GetFrigateHost } from '../services/frigate.proxy/frigate.schema';
|
||||
import ClearableTextInput from '../shared/components/inputs/ClearableTextInput';
|
||||
import CenteredCogwheelLoader from '../shared/components/loaders/CenteredCogwheelLoader';
|
||||
import CogwheelLoader from '../shared/components/loaders/CogwheelLoader';
|
||||
import { isProduction } from '../shared/env.const';
|
||||
import CameraCard from '../widgets/card/CameraCard';
|
||||
import MainFiltersRightSide from '../widgets/sidebars/MainFiltersRightSide';
|
||||
import { SideBarContext } from '../widgets/sidebars/SideBarContext';
|
||||
import RetryErrorPage from './RetryErrorPage';
|
||||
import SiteGroup from '../shared/components/SiteGroup';
|
||||
|
||||
export const mainPageParams = {
|
||||
hostId: 'hostId',
|
||||
@ -43,6 +43,11 @@ const MainPage = () => {
|
||||
|
||||
const pageSize = 20;
|
||||
|
||||
const { data: sitesData } = useQuery({
|
||||
queryKey: [frigateQueryKeys.getFrigateHosts],
|
||||
queryFn: frigateApi.getHosts
|
||||
})
|
||||
|
||||
const {
|
||||
data,
|
||||
isLoading,
|
||||
@ -55,7 +60,6 @@ const MainPage = () => {
|
||||
} = useInfiniteQuery<GetCameraWHostWConfig[]>({
|
||||
queryKey: [frigateQueryKeys.getCamerasWHost, selectedHostId, searchQuery, selectedTags],
|
||||
queryFn: ({ pageParam = 0 }) =>
|
||||
// Pass pagination parameters to the backend
|
||||
frigateApi.getCamerasWHost({
|
||||
name: searchQuery,
|
||||
frigateHostId: selectedHostId,
|
||||
@ -64,16 +68,13 @@ const MainPage = () => {
|
||||
limit: pageSize,
|
||||
}),
|
||||
getNextPageParam: (lastPage, pages) => {
|
||||
// If last page size is less than pageSize, no more pages
|
||||
if (lastPage.length < pageSize) return undefined;
|
||||
// Next page offset is pages.length * pageSize
|
||||
return pages.length * pageSize;
|
||||
},
|
||||
initialPageParam: 0,
|
||||
});
|
||||
|
||||
const cameras: GetCameraWHostWConfig[] = data?.pages.flat() || [];
|
||||
// const cameras: GetCameraWHostWConfig[] = [];
|
||||
|
||||
const [visibleCount, setVisibleCount] = useState(pageSize)
|
||||
|
||||
@ -84,10 +85,9 @@ const MainPage = () => {
|
||||
} else if (hasNextPage && !isFetchingNextPage) {
|
||||
loadTriggered.current = true;
|
||||
fetchNextPage().then(() => {
|
||||
// Add a small delay before resetting the flag
|
||||
setTimeout(() => {
|
||||
loadTriggered.current = false;
|
||||
}, 300); // delay in milliseconds; adjust as needed
|
||||
}, 300);
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -114,7 +114,6 @@ const MainPage = () => {
|
||||
return () => setRightChildren(null);
|
||||
}, []);
|
||||
|
||||
|
||||
const debouncedHandleSearchQuery = useDebounce((value: string) => {
|
||||
mainStore.setSearchQuery(value, navigate);
|
||||
}, 600);
|
||||
@ -125,14 +124,29 @@ const MainPage = () => {
|
||||
|
||||
if (isLoading) return <CenteredCogwheelLoader />;
|
||||
if (isError) return <RetryErrorPage onRetry={refetch} />
|
||||
if (!isProduction) console.log('MainPage rendered')
|
||||
|
||||
const enabledSites = sitesData?.filter(s => s.enabled) || []
|
||||
|
||||
// Group cameras by site
|
||||
const visibleCameras = cameras.slice(0, visibleCount)
|
||||
const groupedCameras: Record<string, GetCameraWHostWConfig[]> = {}
|
||||
|
||||
visibleCameras.forEach(camera => {
|
||||
const siteId = camera.frigateHost?.id
|
||||
if (siteId) {
|
||||
if (!groupedCameras[siteId]) groupedCameras[siteId] = []
|
||||
groupedCameras[siteId].push(camera)
|
||||
}
|
||||
})
|
||||
|
||||
// Determine initial expanded items (all sites with cameras)
|
||||
const initialExpanded = enabledSites
|
||||
.filter(site => groupedCameras[site.id]?.length > 0)
|
||||
.map(site => site.id)
|
||||
|
||||
return (
|
||||
<Flex direction='column' h='100%' w='100%' >
|
||||
<Flex w='100%'
|
||||
justify='center'
|
||||
>
|
||||
<Flex w='100%' justify='center'>
|
||||
<ClearableTextInput
|
||||
clearable
|
||||
maw={400}
|
||||
@ -143,14 +157,31 @@ const MainPage = () => {
|
||||
onChange={onInputChange}
|
||||
/>
|
||||
</Flex>
|
||||
<Flex justify='center' h='100%' direction='column' w='100%' >
|
||||
<Grid mt='sm' justify="center" mb='sm' align='stretch'>
|
||||
{cameras.slice(0, visibleCount).map(camera => (
|
||||
<CameraCard key={camera.id} camera={camera} />
|
||||
))}
|
||||
</Grid>
|
||||
{ isFetching && !isFetchingNextPage ? <CogwheelLoader /> : null}
|
||||
{/* trigger point. Rerender twice when enabled */}
|
||||
<Flex justify='center' h='100%' direction='column' w='100%' mt="md">
|
||||
<Accordion multiple defaultValue={initialExpanded} variant="separated">
|
||||
{enabledSites.map(site => {
|
||||
const siteCameras = groupedCameras[site.id] || []
|
||||
const onlineCount = siteCameras.filter(c => c.state !== false).length
|
||||
|
||||
// If we are filtering by host, only show that host
|
||||
if (selectedHostId && site.id !== selectedHostId) return null
|
||||
|
||||
// If we are searching and this site has no matching cameras, skip it?
|
||||
// User requirement says "Map through the list of Sites", so maybe show even if empty?
|
||||
// Usually, it's better to show if it has cameras or if no search is active.
|
||||
if (searchQuery && siteCameras.length === 0) return null
|
||||
|
||||
return (
|
||||
<SiteGroup
|
||||
key={site.id}
|
||||
site={site}
|
||||
cameras={siteCameras}
|
||||
onlineCount={onlineCount}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</Accordion>
|
||||
{isFetching && !isFetchingNextPage ? <CogwheelLoader /> : null}
|
||||
<div ref={ref} style={{ height: '50px' }} />
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
@ -6,6 +6,7 @@ import NotFound from './404';
|
||||
|
||||
export const playRecordPageQuery = {
|
||||
link: 'link',
|
||||
startTime: 'startTime',
|
||||
}
|
||||
|
||||
const PlayRecordPage = () => {
|
||||
@ -13,11 +14,15 @@ const PlayRecordPage = () => {
|
||||
const location = useLocation()
|
||||
const queryParams = new URLSearchParams(location.search)
|
||||
const paramLink = queryParams.get(playRecordPageQuery.link)
|
||||
const paramStartTime = queryParams.get(playRecordPageQuery.startTime)
|
||||
|
||||
// Parse startTime as Unix timestamp (seconds) and convert to video-relative offset if needed
|
||||
const initialSeekTime = paramStartTime ? parseFloat(paramStartTime) : undefined
|
||||
|
||||
if (!paramLink) return (<NotFound />)
|
||||
return (
|
||||
<Flex w='100%' h='100%' justify='center' align='center' direction='column'>
|
||||
<VideoPlayer videoUrl={paramLink} />
|
||||
<VideoPlayer videoUrl={paramLink} initialSeekTime={initialSeekTime} />
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
@ -28,6 +28,7 @@ export const getFrigateHostSchema = z.object({
|
||||
updateAt: z.string(),
|
||||
name: z.string(),
|
||||
host: z.string(),
|
||||
location: z.string().optional(),
|
||||
enabled: z.boolean(),
|
||||
state: z.boolean().nullable().optional()
|
||||
});
|
||||
|
||||
79
src/shared/components/RetentionSettings.tsx
Normal file
79
src/shared/components/RetentionSettings.tsx
Normal file
@ -0,0 +1,79 @@
|
||||
import { NumberInput, Text, Alert, Stack, Flex } from '@mantine/core';
|
||||
import { IconAlertTriangle } from '@tabler/icons-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
interface RetentionSettingsProps {
|
||||
/** Current retention days from camera config */
|
||||
currentDays: number;
|
||||
/** Callback when retention days change */
|
||||
onChange: (days: number) => void;
|
||||
/** Whether the input is disabled */
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Component for configuring camera recording retention period.
|
||||
* Displays a numeric input for days with optional storage warning.
|
||||
*/
|
||||
const RetentionSettings = ({
|
||||
currentDays,
|
||||
onChange,
|
||||
disabled = false,
|
||||
}: RetentionSettingsProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const handleChange = (value: number | string) => {
|
||||
const numValue = typeof value === 'string' ? parseInt(value, 10) : value;
|
||||
if (!isNaN(numValue) && numValue >= 0) {
|
||||
onChange(numValue);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Stack spacing="xs">
|
||||
<NumberInput
|
||||
label={t('settings.retentionPeriod')}
|
||||
description={t('settings.retentionDescription')}
|
||||
value={currentDays}
|
||||
onChange={handleChange}
|
||||
min={0}
|
||||
max={365}
|
||||
step={1}
|
||||
disabled={disabled}
|
||||
styles={{
|
||||
input: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
}}
|
||||
rightSection={
|
||||
<Text size="sm" color="dimmed" mr="md">
|
||||
{t('settings.days')}
|
||||
</Text>
|
||||
}
|
||||
rightSectionWidth={60}
|
||||
/>
|
||||
{currentDays > 30 && (
|
||||
<Alert
|
||||
icon={<IconAlertTriangle size={16} />}
|
||||
color="yellow"
|
||||
variant="light"
|
||||
title={t('settings.storageWarningTitle')}
|
||||
>
|
||||
{t('settings.storageWarning')}
|
||||
</Alert>
|
||||
)}
|
||||
{currentDays === 0 && (
|
||||
<Alert
|
||||
icon={<IconAlertTriangle size={16} />}
|
||||
color="red"
|
||||
variant="light"
|
||||
title={t('settings.noRetentionTitle')}
|
||||
>
|
||||
{t('settings.noRetentionWarning')}
|
||||
</Alert>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export default RetentionSettings;
|
||||
54
src/shared/components/SiteGroup.tsx
Normal file
54
src/shared/components/SiteGroup.tsx
Normal file
@ -0,0 +1,54 @@
|
||||
import { Accordion, Flex, Grid, Text, Group } from '@mantine/core';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { GetCameraWHostWConfig, GetFrigateHost } from '../../services/frigate.proxy/frigate.schema';
|
||||
import CameraCard from '../../widgets/card/CameraCard';
|
||||
import SiteStatusBadge from './SiteStatusBadge';
|
||||
|
||||
interface SiteGroupProps {
|
||||
site: GetFrigateHost;
|
||||
cameras: GetCameraWHostWConfig[];
|
||||
onlineCount: number;
|
||||
}
|
||||
|
||||
const SiteGroup = ({ site, cameras, onlineCount }: SiteGroupProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Accordion.Item value={site.id} sx={{ border: 'none' }}>
|
||||
<Accordion.Control>
|
||||
<Group position="apart">
|
||||
<Flex direction="column">
|
||||
<Text weight={700} size="lg">
|
||||
{site.name}
|
||||
</Text>
|
||||
{site.location && (
|
||||
<Text size="xs" color="dimmed">
|
||||
{site.location}
|
||||
</Text>
|
||||
)}
|
||||
</Flex>
|
||||
<SiteStatusBadge
|
||||
onlineCameras={onlineCount}
|
||||
totalCameras={cameras.length}
|
||||
isReachable={site.state !== false} // Assume true if null/undefined unless explicitly false
|
||||
/>
|
||||
</Group>
|
||||
</Accordion.Control>
|
||||
<Accordion.Panel>
|
||||
{cameras.length === 0 ? (
|
||||
<Text color="dimmed" align="center" py="md">
|
||||
{t('camersDoesNotExist')}
|
||||
</Text>
|
||||
) : (
|
||||
<Grid gutter="md">
|
||||
{cameras.map((camera) => (
|
||||
<CameraCard key={camera.id} camera={camera} />
|
||||
))}
|
||||
</Grid>
|
||||
)}
|
||||
</Accordion.Panel>
|
||||
</Accordion.Item>
|
||||
);
|
||||
};
|
||||
|
||||
export default SiteGroup;
|
||||
40
src/shared/components/SiteStatusBadge.tsx
Normal file
40
src/shared/components/SiteStatusBadge.tsx
Normal file
@ -0,0 +1,40 @@
|
||||
import { Badge, Tooltip } from '@mantine/core';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
interface SiteStatusBadgeProps {
|
||||
onlineCameras: number;
|
||||
totalCameras: number;
|
||||
isReachable: boolean;
|
||||
}
|
||||
|
||||
const SiteStatusBadge = ({ onlineCameras, totalCameras, isReachable }: SiteStatusBadgeProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
if (!isReachable) {
|
||||
return (
|
||||
<Badge color="red" variant="filled">
|
||||
{t('siteStatus.offline')}
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
|
||||
if (onlineCameras < totalCameras) {
|
||||
return (
|
||||
<Tooltip label={t('siteStatus.camerasOnline', { online: onlineCameras, total: totalCameras })}>
|
||||
<Badge color="yellow" variant="filled">
|
||||
{t('siteStatus.degraded')} ({onlineCameras}/{totalCameras})
|
||||
</Badge>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Tooltip label={t('siteStatus.camerasOnline', { online: onlineCameras, total: totalCameras })}>
|
||||
<Badge color="green" variant="filled">
|
||||
{t('siteStatus.online')} ({onlineCameras}/{totalCameras})
|
||||
</Badge>
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
||||
export default SiteStatusBadge;
|
||||
@ -24,6 +24,9 @@ interface EventsAccordionProps {
|
||||
hour?: string,
|
||||
camera: GetCameraWHostWConfig
|
||||
host: GetFrigateHost
|
||||
minScore?: number
|
||||
labels?: string[]
|
||||
eventType?: 'all' | 'motion' | 'ai_detection'
|
||||
}
|
||||
|
||||
/**
|
||||
@ -39,6 +42,9 @@ const EventsAccordion = ({
|
||||
hour,
|
||||
camera,
|
||||
host,
|
||||
minScore,
|
||||
labels,
|
||||
eventType,
|
||||
}: EventsAccordionProps) => {
|
||||
const { recordingsStore: recStore } = useContext(Context)
|
||||
const [openedItem, setOpenedItem] = useState<string>()
|
||||
@ -52,8 +58,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],
|
||||
queryFn: ({signal}) => {
|
||||
queryKey: [frigateQueryKeys.getEvents, host, camera, day, hour, startTime, endTime, minScore, labels, eventType],
|
||||
queryFn: ({ signal }) => {
|
||||
if (!isRequiredParams) return null
|
||||
let queryStartTime: number
|
||||
let queryEndTime: number
|
||||
@ -71,6 +77,8 @@ const EventsAccordion = ({
|
||||
before: queryEndTime,
|
||||
hasClip: true,
|
||||
includeThumnails: false,
|
||||
minScore: minScore,
|
||||
labels: labels,
|
||||
})
|
||||
if (parsed.success) {
|
||||
return proxyApi.getEvents(
|
||||
@ -114,6 +122,11 @@ const EventsAccordion = ({
|
||||
</Flex>
|
||||
)
|
||||
|
||||
// Client-side filtering for event type (Frigate API doesn't support this filter)
|
||||
const filteredData = eventType === 'ai_detection'
|
||||
? data.filter(event => event.data?.type === 'object')
|
||||
: data;
|
||||
|
||||
const handleOpenPlayer = (value: string | undefined) => {
|
||||
if (value !== recStore.playedItem) {
|
||||
setOpenedItem(value)
|
||||
@ -141,7 +154,7 @@ const EventsAccordion = ({
|
||||
value={openedItem}
|
||||
onChange={handleOpenItem}
|
||||
>
|
||||
{data.map(event => (
|
||||
{filteredData.map(event => (
|
||||
<EventsAccordionItem
|
||||
key={event.id}
|
||||
event={event}
|
||||
|
||||
@ -13,6 +13,7 @@ import { proxyApi } from '../../../services/frigate.proxy/frigate.api';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import BlobImage from '../images/BlobImage';
|
||||
import OnScreenImage from '../images/OnScreenImage';
|
||||
import BoundingBoxOverlay from '../images/BoundingBoxOverlay';
|
||||
|
||||
|
||||
interface EventsAccordionItemProps {
|
||||
@ -81,12 +82,18 @@ const EventsAccordionItem = ({
|
||||
<Accordion.Control key={event.id + 'Control'}>
|
||||
<Flex justify='space-between'>
|
||||
{!hostName ? <></> :
|
||||
<BoundingBoxOverlay
|
||||
box={event.data?.box}
|
||||
label={event.label}
|
||||
score={event.data?.score}
|
||||
>
|
||||
<OnScreenImage
|
||||
maw={200}
|
||||
mr='1rem'
|
||||
fit="contain"
|
||||
withPlaceholder
|
||||
src={proxyApi.eventThumbnailUrl(hostName, event.id)} />
|
||||
</BoundingBoxOverlay>
|
||||
}
|
||||
{eventLabel(event)}
|
||||
<Group>
|
||||
|
||||
32
src/shared/components/filters/EventTypeFilter.tsx
Normal file
32
src/shared/components/filters/EventTypeFilter.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
import { SegmentedControl, Stack, Text } from '@mantine/core';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
type EventType = 'all' | 'motion' | 'ai_detection';
|
||||
|
||||
interface EventTypeFilterProps {
|
||||
value?: EventType;
|
||||
onChange: (eventType: EventType) => void;
|
||||
}
|
||||
|
||||
const EventTypeFilter = ({ value = 'all', onChange }: EventTypeFilterProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const options = [
|
||||
{ value: 'all', label: t('eventsPage.allEvents') },
|
||||
{ value: 'ai_detection', label: t('eventsPage.aiDetectionOnly') },
|
||||
];
|
||||
|
||||
return (
|
||||
<Stack mt="md" gap="xs">
|
||||
<Text size="sm" fw={500}>{t('eventsPage.eventTypeFilter')}</Text>
|
||||
<SegmentedControl
|
||||
value={value}
|
||||
onChange={(val) => onChange(val as EventType)}
|
||||
data={options}
|
||||
fullWidth
|
||||
/>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export default EventTypeFilter;
|
||||
48
src/shared/components/filters/ObjectTypeFilter.tsx
Normal file
48
src/shared/components/filters/ObjectTypeFilter.tsx
Normal file
@ -0,0 +1,48 @@
|
||||
import { MultiSelect, Stack, Text } from '@mantine/core';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
// Common Frigate AI labels
|
||||
const OBJECT_TYPE_OPTIONS = [
|
||||
{ value: 'person', label: 'Person' },
|
||||
{ value: 'car', label: 'Car' },
|
||||
{ value: 'motorcycle', label: 'Motorcycle' },
|
||||
{ value: 'bicycle', label: 'Bicycle' },
|
||||
{ value: 'bus', label: 'Bus' },
|
||||
{ value: 'truck', label: 'Truck' },
|
||||
{ value: 'dog', label: 'Dog' },
|
||||
{ value: 'cat', label: 'Cat' },
|
||||
{ value: 'bird', label: 'Bird' },
|
||||
{ value: 'horse', label: 'Horse' },
|
||||
{ value: 'face', label: 'Face' },
|
||||
{ value: 'license_plate', label: 'License Plate' },
|
||||
{ value: 'package', label: 'Package' },
|
||||
];
|
||||
|
||||
interface ObjectTypeFilterProps {
|
||||
value?: string[];
|
||||
onChange: (labels: string[] | undefined) => void;
|
||||
}
|
||||
|
||||
const ObjectTypeFilter = ({ value, onChange }: ObjectTypeFilterProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const handleChange = (selected: string[]) => {
|
||||
onChange(selected.length > 0 ? selected : undefined);
|
||||
};
|
||||
|
||||
return (
|
||||
<Stack mt="md" gap="xs">
|
||||
<Text size="sm" fw={500}>{t('eventsPage.objectTypeFilter')}</Text>
|
||||
<MultiSelect
|
||||
data={OBJECT_TYPE_OPTIONS}
|
||||
value={value || []}
|
||||
onChange={handleChange}
|
||||
placeholder={t('eventsPage.selectObjectType')}
|
||||
searchable
|
||||
clearable
|
||||
/>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export default ObjectTypeFilter;
|
||||
@ -5,7 +5,7 @@ import { frigateApi, frigateQueryKeys } from '../../../services/frigate.proxy/fr
|
||||
import RetryError from '../RetryError';
|
||||
import OneSelectFilter, { OneSelectItem } from './OneSelectFilter';
|
||||
|
||||
interface HostSelectProps extends MantineStyleSystemProps {
|
||||
interface SiteSelectProps extends MantineStyleSystemProps {
|
||||
label?: string
|
||||
valueId?: string
|
||||
defaultId?: string
|
||||
@ -15,7 +15,7 @@ interface HostSelectProps extends MantineStyleSystemProps {
|
||||
onSuccess?: () => void
|
||||
}
|
||||
|
||||
const HostSelect = ({
|
||||
const SiteSelect = ({
|
||||
label,
|
||||
valueId,
|
||||
defaultId,
|
||||
@ -24,8 +24,8 @@ const HostSelect = ({
|
||||
onChange,
|
||||
onSuccess,
|
||||
...styleProps
|
||||
}: HostSelectProps) => {
|
||||
const { data: hosts, isError, isPending, isSuccess, refetch } = useQuery({
|
||||
}: SiteSelectProps) => {
|
||||
const { data: sites, isError, isPending, isSuccess, refetch } = useQuery({
|
||||
queryKey: [frigateQueryKeys.getFrigateHosts],
|
||||
queryFn: frigateApi.getHosts
|
||||
})
|
||||
@ -37,11 +37,11 @@ const HostSelect = ({
|
||||
if (isPending) return <Center><Loader /></Center>
|
||||
if (isError) return <RetryError onRetry={refetch} />
|
||||
|
||||
if (!hosts || hosts.length < 1) return null
|
||||
if (!sites || sites.length < 1) return null
|
||||
|
||||
const hostItems: OneSelectItem[] = hosts
|
||||
.filter(host => host.enabled)
|
||||
.map(host => ({ value: host.id, label: host.name }))
|
||||
const siteItems: OneSelectItem[] = sites
|
||||
.filter(site => site.enabled)
|
||||
.map(site => ({ value: site.id, label: site.name }))
|
||||
|
||||
const handleSelect = (value: string) => {
|
||||
if (onChange) onChange(value)
|
||||
@ -49,17 +49,17 @@ const HostSelect = ({
|
||||
|
||||
return (
|
||||
<OneSelectFilter
|
||||
id='frigate-hosts'
|
||||
id='frigate-sites'
|
||||
label={label}
|
||||
placeholder={placeholder}
|
||||
spaceBetween={spaceBetween ? spaceBetween : '1rem'}
|
||||
value={valueId || ''}
|
||||
defaultValue={defaultId || ''}
|
||||
data={hostItems}
|
||||
data={siteItems}
|
||||
onChange={handleSelect}
|
||||
{...styleProps}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default HostSelect;
|
||||
export default SiteSelect;
|
||||
122
src/shared/components/images/BoundingBoxOverlay.tsx
Normal file
122
src/shared/components/images/BoundingBoxOverlay.tsx
Normal file
@ -0,0 +1,122 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { Box } from '@mantine/core';
|
||||
|
||||
interface BoundingBoxOverlayProps {
|
||||
/** Bounding box coordinates [y_min, x_min, y_max, x_max] normalized 0-1 from Frigate */
|
||||
box?: number[];
|
||||
/** The label to display on the bounding box */
|
||||
label?: string;
|
||||
/** Confidence score (0-1) to display */
|
||||
score?: number;
|
||||
/** Color for the bounding box */
|
||||
color?: string;
|
||||
/** Children elements (e.g., the image) */
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
/**
|
||||
* Overlay component that renders a bounding box on top of its children.
|
||||
* Frigate provides normalized coordinates [y_min, x_min, y_max, x_max] in range 0-1.
|
||||
*/
|
||||
const BoundingBoxOverlay = ({
|
||||
box,
|
||||
label,
|
||||
score,
|
||||
color = '#00ff00',
|
||||
children,
|
||||
}: BoundingBoxOverlayProps) => {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
|
||||
|
||||
useEffect(() => {
|
||||
const updateDimensions = () => {
|
||||
if (containerRef.current) {
|
||||
const rect = containerRef.current.getBoundingClientRect();
|
||||
setDimensions({ width: rect.width, height: rect.height });
|
||||
}
|
||||
};
|
||||
|
||||
updateDimensions();
|
||||
window.addEventListener('resize', updateDimensions);
|
||||
|
||||
// Also observe for image loading
|
||||
const observer = new ResizeObserver(updateDimensions);
|
||||
if (containerRef.current) {
|
||||
observer.observe(containerRef.current);
|
||||
}
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', updateDimensions);
|
||||
observer.disconnect();
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Convert Frigate box format [y_min, x_min, y_max, x_max] to pixel coordinates
|
||||
const getBoxStyle = () => {
|
||||
if (!box || box.length < 4 || dimensions.width === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const [yMin, xMin, yMax, xMax] = box;
|
||||
|
||||
const left = xMin * dimensions.width;
|
||||
const top = yMin * dimensions.height;
|
||||
const width = (xMax - xMin) * dimensions.width;
|
||||
const height = (yMax - yMin) * dimensions.height;
|
||||
|
||||
return {
|
||||
left: `${left}px`,
|
||||
top: `${top}px`,
|
||||
width: `${width}px`,
|
||||
height: `${height}px`,
|
||||
};
|
||||
};
|
||||
|
||||
const boxStyle = getBoxStyle();
|
||||
const displayLabel = label ? `${label}${score ? ` ${(score * 100).toFixed(0)}%` : ''}` : '';
|
||||
|
||||
return (
|
||||
<Box
|
||||
ref={containerRef}
|
||||
style={{ position: 'relative', display: 'inline-block' }}
|
||||
>
|
||||
{children}
|
||||
{boxStyle && (
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
...boxStyle,
|
||||
border: `2px solid ${color}`,
|
||||
borderRadius: '2px',
|
||||
pointerEvents: 'none',
|
||||
boxSizing: 'border-box',
|
||||
}}
|
||||
/>
|
||||
{displayLabel && (
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: boxStyle.left,
|
||||
top: boxStyle.top,
|
||||
transform: 'translateY(-100%)',
|
||||
backgroundColor: color,
|
||||
color: '#000',
|
||||
padding: '2px 6px',
|
||||
fontSize: '11px',
|
||||
fontWeight: 600,
|
||||
borderRadius: '2px 2px 0 0',
|
||||
whiteSpace: 'nowrap',
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
>
|
||||
{displayLabel}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default BoundingBoxOverlay;
|
||||
60
src/shared/components/players/PlaybackSpeedControls.tsx
Normal file
60
src/shared/components/players/PlaybackSpeedControls.tsx
Normal file
@ -0,0 +1,60 @@
|
||||
import { Button, Group, Text } from '@mantine/core';
|
||||
import { IconPlayerPlay } from '@tabler/icons-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import videojs from 'video.js';
|
||||
|
||||
interface PlaybackSpeedControlsProps {
|
||||
playerRef: React.MutableRefObject<ReturnType<typeof videojs> | null>;
|
||||
currentSpeed: number;
|
||||
onSpeedChange: (speed: number) => void;
|
||||
}
|
||||
|
||||
const PLAYBACK_SPEEDS = [0.5, 1, 2, 4, 8, 16];
|
||||
|
||||
const PlaybackSpeedControls = ({
|
||||
playerRef,
|
||||
currentSpeed,
|
||||
onSpeedChange,
|
||||
}: PlaybackSpeedControlsProps) => {
|
||||
const { t } = useTranslation();
|
||||
const isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().includes('firefox');
|
||||
|
||||
const availableSpeeds = isFirefox
|
||||
? PLAYBACK_SPEEDS.filter(speed => speed <= 8)
|
||||
: PLAYBACK_SPEEDS;
|
||||
|
||||
const handleSpeedClick = (speed: number) => {
|
||||
if (playerRef.current) {
|
||||
playerRef.current.playbackRate(speed);
|
||||
onSpeedChange(speed);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Group spacing="xs" mt="sm" mb="sm">
|
||||
<Text size="sm" fw={500} mr="xs">
|
||||
<IconPlayerPlay size={14} style={{ verticalAlign: 'middle', marginRight: 4 }} />
|
||||
{t('player.speed')}:
|
||||
</Text>
|
||||
{availableSpeeds.map((speed) => (
|
||||
<Button
|
||||
key={speed}
|
||||
size="xs"
|
||||
variant={currentSpeed === speed ? 'filled' : 'outline'}
|
||||
onClick={() => handleSpeedClick(speed)}
|
||||
styles={{
|
||||
root: {
|
||||
minWidth: '48px',
|
||||
fontWeight: currentSpeed === speed ? 700 : 400,
|
||||
transition: 'all 0.2s ease',
|
||||
},
|
||||
}}
|
||||
>
|
||||
{speed}x
|
||||
</Button>
|
||||
))}
|
||||
</Group>
|
||||
);
|
||||
};
|
||||
|
||||
export default PlaybackSpeedControls;
|
||||
@ -1,19 +1,23 @@
|
||||
import React, { useRef, useEffect } from 'react';
|
||||
import React, { useRef, useEffect, useState } from 'react';
|
||||
import videojs from 'video.js';
|
||||
import Player from 'video.js/dist/types/player';
|
||||
import 'video.js/dist/video-js.css'
|
||||
import { isProduction } from '../../env.const';
|
||||
import { useKeycloak } from '@react-keycloak/web';
|
||||
import PlaybackSpeedControls from './PlaybackSpeedControls';
|
||||
|
||||
interface VideoPlayerProps {
|
||||
videoUrl: string
|
||||
videoUrl: string;
|
||||
showSpeedControls?: boolean;
|
||||
initialSeekTime?: number; // Unix timestamp or seconds offset to seek to on load
|
||||
}
|
||||
|
||||
const VideoPlayer = ({ videoUrl }: VideoPlayerProps) => {
|
||||
const VideoPlayer = ({ videoUrl, showSpeedControls = true, initialSeekTime }: VideoPlayerProps) => {
|
||||
const { keycloak } = useKeycloak()
|
||||
const executed = useRef(false)
|
||||
const videoRef = useRef<HTMLVideoElement>(null);
|
||||
const playerRef = useRef<Player | null>(null);
|
||||
const [currentSpeed, setCurrentSpeed] = useState(1);
|
||||
|
||||
useEffect(() => {
|
||||
if (!executed.current) {
|
||||
@ -56,6 +60,11 @@ const VideoPlayer = ({ videoUrl }: VideoPlayerProps) => {
|
||||
if (!isProduction) console.log('mount new player')
|
||||
playerRef.current = videojs(videoRef.current, { ...defaultOptions }, () => {
|
||||
if (!isProduction) console.log('player is ready')
|
||||
// Seek to initial time if specified (relative to video start)
|
||||
if (initialSeekTime !== undefined && playerRef.current) {
|
||||
playerRef.current.currentTime(initialSeekTime);
|
||||
if (!isProduction) console.log('Seeking to initial time:', initialSeekTime)
|
||||
}
|
||||
});
|
||||
}
|
||||
if (!isProduction) console.log('VideoPlayer rendered')
|
||||
@ -78,11 +87,25 @@ const VideoPlayer = ({ videoUrl }: VideoPlayerProps) => {
|
||||
}
|
||||
}, [videoUrl]);
|
||||
|
||||
const handleSpeedChange = (speed: number) => {
|
||||
setCurrentSpeed(speed);
|
||||
if (!isProduction) console.log('Playback speed changed to:', speed);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div data-vjs-player>
|
||||
{/* Setting an empty data-setup is required to override the default values and allow video to be fit the size of its parent */}
|
||||
<video ref={videoRef} className="small-player video-js vjs-default-skin" data-setup="{}" controls playsInline />
|
||||
</div>
|
||||
{showSpeedControls && (
|
||||
<PlaybackSpeedControls
|
||||
playerRef={playerRef as React.MutableRefObject<ReturnType<typeof videojs> | null>}
|
||||
currentSpeed={currentSpeed}
|
||||
onSpeedChange={handleSpeedChange}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -8,6 +8,9 @@ interface Filters {
|
||||
period?: [Date | null, Date | null]
|
||||
startTime?: string
|
||||
endTime?: string
|
||||
minScore?: number
|
||||
labels?: string[]
|
||||
eventType?: 'all' | 'motion' | 'ai_detection'
|
||||
}
|
||||
|
||||
export class EventsStore {
|
||||
@ -23,7 +26,10 @@ export class EventsStore {
|
||||
paramStartDate: string | undefined,
|
||||
paramEndDate: string | undefined,
|
||||
paramStartTime: string | undefined,
|
||||
paramEndTime: string | undefined) {
|
||||
paramEndTime: string | undefined,
|
||||
paramMinScore: string | undefined,
|
||||
paramLabels: string | undefined,
|
||||
paramEventType: string | undefined) {
|
||||
this.filters.hostId = paramHostId
|
||||
this.filters.cameraId = paramCameraId
|
||||
if (paramStartDate && paramEndDate) {
|
||||
@ -31,6 +37,20 @@ export class EventsStore {
|
||||
}
|
||||
this.filters.startTime = paramStartTime
|
||||
this.filters.endTime = paramEndTime
|
||||
if (paramMinScore) {
|
||||
const score = parseFloat(paramMinScore)
|
||||
if (!isNaN(score) && score >= 0 && score <= 1) {
|
||||
this.filters.minScore = score
|
||||
}
|
||||
}
|
||||
if (paramLabels) {
|
||||
this.filters.labels = paramLabels.split(',')
|
||||
}
|
||||
if (paramEventType === 'motion' || paramEventType === 'ai_detection') {
|
||||
this.filters.eventType = paramEventType
|
||||
} else {
|
||||
this.filters.eventType = 'all'
|
||||
}
|
||||
}
|
||||
|
||||
setHostId(hostId: string, navigate: (path: string, options?: NavigateOptions) => void) {
|
||||
@ -58,6 +78,21 @@ export class EventsStore {
|
||||
this.updateURL(navigate)
|
||||
}
|
||||
|
||||
setMinScore(minScore: number | undefined, navigate: (path: string, options?: NavigateOptions) => void) {
|
||||
this.filters.minScore = minScore
|
||||
this.updateURL(navigate)
|
||||
}
|
||||
|
||||
setLabels(labels: string[] | undefined, navigate: (path: string, options?: NavigateOptions) => void) {
|
||||
this.filters.labels = labels
|
||||
this.updateURL(navigate)
|
||||
}
|
||||
|
||||
setEventType(eventType: 'all' | 'motion' | 'ai_detection', navigate: (path: string, options?: NavigateOptions) => void) {
|
||||
this.filters.eventType = eventType
|
||||
this.updateURL(navigate)
|
||||
}
|
||||
|
||||
updateURL(navigate: (path: string, options?: NavigateOptions) => void) {
|
||||
const params = new URLSearchParams();
|
||||
if (this.filters.hostId) params.set(eventsQueryParams.hostId, this.filters.hostId);
|
||||
@ -74,6 +109,15 @@ export class EventsStore {
|
||||
|
||||
if (this.filters.startTime) params.set(eventsQueryParams.startTime, this.filters.startTime)
|
||||
if (this.filters.endTime) params.set(eventsQueryParams.endTime, this.filters.endTime)
|
||||
if (this.filters.minScore !== undefined && this.filters.minScore > 0) {
|
||||
params.set(eventsQueryParams.minScore, this.filters.minScore.toString())
|
||||
}
|
||||
if (this.filters.labels && this.filters.labels.length > 0) {
|
||||
params.set(eventsQueryParams.labels, this.filters.labels.join(','))
|
||||
}
|
||||
if (this.filters.eventType && this.filters.eventType !== 'all') {
|
||||
params.set(eventsQueryParams.eventType, this.filters.eventType)
|
||||
}
|
||||
|
||||
navigate(`?${params.toString()}`, { replace: true });
|
||||
}
|
||||
|
||||
@ -13,6 +13,9 @@ interface EventsBodyProps {
|
||||
period: [Date, Date],
|
||||
startTime?: string,
|
||||
endTime?: string,
|
||||
minScore?: number,
|
||||
labels?: string[],
|
||||
eventType?: 'all' | 'motion' | 'ai_detection',
|
||||
}
|
||||
|
||||
|
||||
@ -22,6 +25,9 @@ const EventsBody: FC<EventsBodyProps> = ({
|
||||
period,
|
||||
startTime,
|
||||
endTime,
|
||||
minScore,
|
||||
labels,
|
||||
eventType,
|
||||
}) => {
|
||||
|
||||
const startTimeUnix = dayTimeToUnixTime(period[0], startTime ? startTime : '00:00')
|
||||
@ -46,6 +52,9 @@ const EventsBody: FC<EventsBodyProps> = ({
|
||||
host={data.host}
|
||||
startTime={startTimeUnix}
|
||||
endTime={endTimeUnix}
|
||||
minScore={minScore}
|
||||
labels={labels}
|
||||
eventType={eventType}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
@ -48,9 +48,10 @@ const FrigateHostsTable = ({ data, showAddButton = false, saveCallback, changedC
|
||||
}
|
||||
|
||||
const headTitle = [
|
||||
{ propertyName: 'name', title: t('frigateHostTableTitles.host') },
|
||||
{ propertyName: 'host', title: t('frigateHostTableTitles.url') },
|
||||
{ propertyName: 'enabled', title: t('frigateHostTableTitles.enabled') },
|
||||
{ propertyName: 'name', title: t('siteTableTitles.siteName') },
|
||||
{ propertyName: 'location', title: t('siteTableTitles.location') },
|
||||
{ propertyName: 'host', title: t('siteTableTitles.url') },
|
||||
{ propertyName: 'enabled', title: t('siteTableTitles.enabled') },
|
||||
{ title: '', sorting: false },
|
||||
]
|
||||
|
||||
@ -100,6 +101,7 @@ const FrigateHostsTable = ({ data, showAddButton = false, saveCallback, changedC
|
||||
updateAt: '',
|
||||
host: '',
|
||||
name: '',
|
||||
location: '',
|
||||
enabled: true
|
||||
}
|
||||
setTableData([...tableData, newHost])
|
||||
@ -110,19 +112,27 @@ const FrigateHostsTable = ({ data, showAddButton = false, saveCallback, changedC
|
||||
<tr key={item.id}>
|
||||
<TextInputCell
|
||||
text={item.name}
|
||||
width='40%'
|
||||
width='25%'
|
||||
id={item.id}
|
||||
propertyName='name'
|
||||
onChange={handleTextChange}
|
||||
placeholder={t('frigateHostTablePlaceholders.name')}
|
||||
placeholder={t('siteTablePlaceholders.name')}
|
||||
/>
|
||||
<TextInputCell
|
||||
text={item.location || ''}
|
||||
width='25%'
|
||||
id={item.id}
|
||||
propertyName='location'
|
||||
onChange={handleTextChange}
|
||||
placeholder={t('siteTablePlaceholders.location')}
|
||||
/>
|
||||
<TextInputCell
|
||||
text={item.host}
|
||||
width='40%'
|
||||
width='30%'
|
||||
id={item.id}
|
||||
propertyName='host'
|
||||
onChange={handleTextChange}
|
||||
placeholder={t('frigateHostTablePlaceholders.host')}
|
||||
placeholder={t('siteTablePlaceholders.url')}
|
||||
/>
|
||||
<SwitchCell value={item.enabled} width='5%' id={item.id} propertyName='enabled' toggle={handleSwitchChange} />
|
||||
<StateCell id={item.id} width='5%' />
|
||||
|
||||
@ -1,12 +1,15 @@
|
||||
import { Slider, Text, Stack } from '@mantine/core';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import { useContext, useState } from 'react';
|
||||
import { useContext } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Context } from '../..';
|
||||
import CameraSelect from '../../shared/components/filters/CameraSelect';
|
||||
import DateRangeSelect from '../../shared/components/filters/DateRangeSelect';
|
||||
import HostSelect from '../../shared/components/filters/HostSelect';
|
||||
import SiteSelect from '../../shared/components/filters/SiteSelect';
|
||||
import TimePicker from '../../shared/components/filters/TimePicker';
|
||||
import ObjectTypeFilter from '../../shared/components/filters/ObjectTypeFilter';
|
||||
import EventTypeFilter from '../../shared/components/filters/EventTypeFilter';
|
||||
import { isProduction } from '../../shared/env.const';
|
||||
|
||||
|
||||
@ -42,6 +45,21 @@ const EventsRightFilters = () => {
|
||||
if (!isProduction) console.log('Selected end time: ', value)
|
||||
}
|
||||
|
||||
const handleMinScoreChange = (value: number) => {
|
||||
eventsStore.setMinScore(value > 0 ? value : undefined, navigate)
|
||||
if (!isProduction) console.log('Selected min score: ', value)
|
||||
}
|
||||
|
||||
const handleLabelsChange = (labels: string[] | undefined) => {
|
||||
eventsStore.setLabels(labels, navigate)
|
||||
if (!isProduction) console.log('Selected labels: ', labels)
|
||||
}
|
||||
|
||||
const handleEventTypeChange = (eventType: 'all' | 'motion' | 'ai_detection') => {
|
||||
eventsStore.setEventType(eventType, navigate)
|
||||
if (!isProduction) console.log('Selected event type: ', eventType)
|
||||
}
|
||||
|
||||
const validatedStartTime = () => {
|
||||
if (eventsStore.filters.startTime && eventsStore.filters.endTime) {
|
||||
if (eventsStore.filters.startTime > eventsStore.filters.endTime) {
|
||||
@ -53,8 +71,8 @@ const EventsRightFilters = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<HostSelect
|
||||
label={t('selectHost')}
|
||||
<SiteSelect
|
||||
label={t('selectSite')}
|
||||
valueId={eventsStore.filters.hostId}
|
||||
onChange={handleHostSelect}
|
||||
/>
|
||||
@ -86,6 +104,33 @@ const EventsRightFilters = () => {
|
||||
label={t('eventsPage.selectEndTime')}
|
||||
onChange={handleSelectEndTime}
|
||||
/>
|
||||
<Stack mt="md" gap="xs">
|
||||
<Text size="sm" fw={500}>{t('eventsPage.confidenceThreshold')}</Text>
|
||||
<Slider
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.05}
|
||||
value={eventsStore.filters.minScore ?? 0}
|
||||
onChange={handleMinScoreChange}
|
||||
marks={[
|
||||
{ value: 0, label: '0%' },
|
||||
{ value: 0.5, label: '50%' },
|
||||
{ value: 1, label: '100%' }
|
||||
]}
|
||||
label={(value) => `${(value * 100).toFixed(0)}%`}
|
||||
styles={{
|
||||
markLabel: { fontSize: '0.75rem' },
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
<ObjectTypeFilter
|
||||
value={eventsStore.filters.labels}
|
||||
onChange={handleLabelsChange}
|
||||
/>
|
||||
<EventTypeFilter
|
||||
value={eventsStore.filters.eventType}
|
||||
onChange={handleEventTypeChange}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
</>
|
||||
|
||||
@ -2,7 +2,7 @@ import { observer } from 'mobx-react-lite';
|
||||
import { useContext } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Context } from '../..';
|
||||
import HostSelect from '../../shared/components/filters/HostSelect';
|
||||
import SiteSelect from '../../shared/components/filters/SiteSelect';
|
||||
import UserTagsFilter from '../../shared/components/filters/UserTagsFilter';
|
||||
import { isProduction } from '../../shared/env.const';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
@ -27,8 +27,8 @@ const MainFiltersRightSide = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<HostSelect
|
||||
label={t('selectHost')}
|
||||
<SiteSelect
|
||||
label={t('selectSite')}
|
||||
valueId={hostId || undefined}
|
||||
defaultId={hostId || undefined}
|
||||
onChange={handleSelectHost}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user