Compare commits
No commits in common. "ba9a32720e18701075559a2c6e45cd7c5818f1b2" and "affe29fa10d28c98b9bc9db87fad18e4112a6bf1" have entirely different histories.
ba9a32720e
...
affe29fa10
@ -1,4 +1,4 @@
|
||||
FRIGATE_PROXY=http://frigate-proxy:4000
|
||||
OPENID_SERVER=https://keycloak:8443
|
||||
CLIENT_ID=frontend-client
|
||||
REALM=frigate-realm
|
||||
FRIGATE_PROXY=http://localhost:4000
|
||||
OPENID_SERVER=https://your.server.com:443/realms/your-realm
|
||||
REALM=frigate-realm
|
||||
CLIENT_ID=frontend-client
|
||||
@ -1,7 +1,6 @@
|
||||
# syntax=docker/dockerfile:1
|
||||
# Build commands:
|
||||
# - $VERSION="0.2.1"
|
||||
# - npx update-browserslist-db@latest
|
||||
# - $VERSION="0.1.9"
|
||||
# - 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
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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 />
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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={{
|
||||
|
||||
@ -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',
|
||||
restart: 'Restart',
|
||||
system: 'System',
|
||||
storage: 'Storage',
|
||||
editConfig: 'Редакт. конфиг.',
|
||||
restart: 'Перезагрузка',
|
||||
system: 'Система',
|
||||
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: {
|
||||
siteName: 'Site Name',
|
||||
location: 'Physical Location',
|
||||
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',
|
||||
frigateHostTablePlaceholders: {
|
||||
host: 'http://host.docker.internal:5000 or http://192.168.1.1:5000',
|
||||
name: 'YourFrigateHostName',
|
||||
},
|
||||
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",
|
||||
|
||||
@ -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: {
|
||||
siteName: 'Название объекта',
|
||||
location: 'Физ. расположение',
|
||||
url: 'Frigate URL',
|
||||
frigateHostTableTitles: {
|
||||
host: 'Хост',
|
||||
name: 'Имя хоста',
|
||||
url: 'Адрес',
|
||||
enabled: 'Включен',
|
||||
},
|
||||
siteTablePlaceholders: {
|
||||
url: 'http://host.docker.internal:5000 or http://192.168.1.1:5000',
|
||||
name: 'Склад Северный',
|
||||
location: 'Здание А, Этаж 2',
|
||||
},
|
||||
siteStatus: {
|
||||
online: 'В сети',
|
||||
degraded: 'Частично',
|
||||
offline: 'Не в сети',
|
||||
camerasOnline: '{{online}}/{{total}} камер в сети',
|
||||
frigateHostTablePlaceholders: {
|
||||
host: 'http://host.docker.internal:5000 or http://192.168.1.1:5000',
|
||||
name: 'YourFrigateHostName',
|
||||
},
|
||||
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: "Изменить тему",
|
||||
|
||||
@ -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 />
|
||||
|
||||
|
||||
@ -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 RetentionSettings from '../shared/components/RetentionSettings';
|
||||
import CenterLoader from '../shared/components/loaders/CenterLoader';
|
||||
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 />
|
||||
|
||||
{/* 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" />
|
||||
|
||||
<CameraPageHeader camera={camera} configButton/>
|
||||
{!camera.config ? null :
|
||||
<Flex w='100%' justify='center' mb='1rem'>
|
||||
<MaskSelect
|
||||
|
||||
@ -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
|
||||
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)
|
||||
eventsStore.loadFiltersFromPage(paramHostId, paramCameraId, paramStartDate, paramEndDate, paramStartTime, paramEndTime)
|
||||
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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 />
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
camera={camera}
|
||||
useWebGL={true}
|
||||
preferredLiveMode='jsmpeg'
|
||||
containerRef={containerRef}
|
||||
/>
|
||||
<Player camera={camera} />
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}, 300);
|
||||
});
|
||||
loadTriggered.current = false;
|
||||
}, 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">
|
||||
<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}
|
||||
<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 */}
|
||||
<div ref={ref} style={{ height: '50px' }} />
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 CenteredCogwheelLoader from './loaders/CenteredCogwheelLoader';
|
||||
import { frigateQueryKeys, frigateApi } from '../../services/frigate.proxy/frigate.api';
|
||||
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 (
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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;
|
||||
@ -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;
|
||||
@ -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;
|
||||
@ -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;
|
||||
@ -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],
|
||||
queryFn: ({ signal }) => {
|
||||
queryKey: [frigateQueryKeys.getEvents, host, camera, day, hour, startTime, endTime],
|
||||
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}
|
||||
|
||||
@ -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
|
||||
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>
|
||||
<OnScreenImage
|
||||
maw={200}
|
||||
mr='1rem'
|
||||
fit="contain"
|
||||
withPlaceholder
|
||||
src={proxyApi.eventThumbnailUrl(hostName, event.id)} />
|
||||
}
|
||||
{eventLabel(event)}
|
||||
<Group>
|
||||
|
||||
@ -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;
|
||||
@ -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) => {
|
||||
const { data: sites, isError, isPending, isSuccess, refetch } = useQuery({
|
||||
}: HostSelectProps) => {
|
||||
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
|
||||
.filter(site => site.enabled)
|
||||
.map(site => ({ value: site.id, label: site.name }))
|
||||
const hostItems: OneSelectItem[] = hosts
|
||||
.filter(host => host.enabled)
|
||||
.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;
|
||||
@ -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;
|
||||
@ -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 }))
|
||||
|
||||
@ -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[]) => {
|
||||
|
||||
@ -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;
|
||||
@ -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;
|
||||
@ -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;
|
||||
@ -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;
|
||||
camera: string
|
||||
className?: string;
|
||||
width: number;
|
||||
height: number;
|
||||
containerRef: React.MutableRefObject<HTMLDivElement | null>;
|
||||
playbackEnabled: boolean;
|
||||
useWebGL: boolean;
|
||||
setStats?: (stats: PlayerStatsType) => void;
|
||||
onPlaying?: () => void;
|
||||
wsUrl: string;
|
||||
cameraHeight?: number,
|
||||
cameraWidth?: number,
|
||||
};
|
||||
|
||||
const JSMpegPlayer = (
|
||||
{
|
||||
url,
|
||||
camera,
|
||||
width,
|
||||
height,
|
||||
className,
|
||||
containerRef,
|
||||
playbackEnabled,
|
||||
useWebGL = false,
|
||||
setStats,
|
||||
onPlaying,
|
||||
wsUrl,
|
||||
cameraWidth = 1200,
|
||||
cameraHeight = 800,
|
||||
}: JSMpegPlayerProps
|
||||
) => {
|
||||
const videoRef = useRef<HTMLDivElement>(null);
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const internalContainerRef = useRef<HTMLDivElement | null>(null);
|
||||
const onPlayingRef = useRef(onPlaying);
|
||||
const [showCanvas, setShowCanvas] = useState(false);
|
||||
const [hasData, setHasData] = useState(false);
|
||||
const hasDataRef = useRef(hasData);
|
||||
const [dimensionsReady, setDimensionsReady] = useState(false);
|
||||
const bytesReceivedRef = useRef(0);
|
||||
const lastTimestampRef = useRef(Date.now());
|
||||
const statsIntervalRef = useRef<NodeJS.Timeout | null>(null);
|
||||
const { t } = useTranslation()
|
||||
const playerRef = useRef<HTMLDivElement>(null);
|
||||
const [playerInitialized, setPlayerInitialized] = useState(false)
|
||||
|
||||
const selectedContainerRef = useMemo(
|
||||
() => (containerRef.current ? containerRef : internalContainerRef),
|
||||
// we know that these deps are correct
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[containerRef, containerRef.current, internalContainerRef],
|
||||
);
|
||||
const { height: maxHeight, width: maxWidth } = useViewportSize()
|
||||
|
||||
const [{ width: containerWidth, height: containerHeight }] =
|
||||
useResizeObserver(selectedContainerRef);
|
||||
useEffect(() => {
|
||||
const video = new JSMpeg.VideoElement(
|
||||
playerRef.current,
|
||||
wsUrl,
|
||||
{},
|
||||
{ protocols: [], audio: false, videoBufferSize: 1024 * 1024 * 4 }
|
||||
);
|
||||
|
||||
const stretch = true;
|
||||
const aspectRatio = width / height;
|
||||
|
||||
const fitAspect = useMemo(
|
||||
() => containerWidth / containerHeight,
|
||||
[containerWidth, containerHeight],
|
||||
);
|
||||
|
||||
const scaledHeight = useMemo(() => {
|
||||
if (selectedContainerRef?.current && width && height) {
|
||||
const scaledHeight =
|
||||
aspectRatio < (fitAspect ?? 0)
|
||||
? Math.floor(
|
||||
Math.min(
|
||||
containerHeight,
|
||||
selectedContainerRef.current?.clientHeight,
|
||||
),
|
||||
)
|
||||
: aspectRatio >= fitAspect
|
||||
? Math.floor(containerWidth / aspectRatio)
|
||||
: Math.floor(containerWidth / aspectRatio) / 1.5;
|
||||
const finalHeight = stretch
|
||||
? scaledHeight
|
||||
: Math.min(scaledHeight, height);
|
||||
|
||||
if (finalHeight > 0) {
|
||||
return finalHeight;
|
||||
const toggleFullscreen = () => {
|
||||
const canvas = video.els.canvas;
|
||||
if (!document.fullscreenElement && !(document as any).webkitFullscreenElement) { // Use bracket notation for webkit
|
||||
// Enter fullscreen
|
||||
if (canvas.requestFullscreen) {
|
||||
canvas.requestFullscreen();
|
||||
} else if ((canvas as any).webkitRequestFullScreen) { // Use bracket notation for webkit
|
||||
(canvas as any).webkitRequestFullScreen();
|
||||
} else if (canvas.mozRequestFullScreen) {
|
||||
canvas.mozRequestFullScreen();
|
||||
}
|
||||
} else {
|
||||
// Exit fullscreen
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
} else if ((document as any).webkitExitFullscreen) { // Use bracket notation for webkit
|
||||
(document as any).webkitExitFullscreen();
|
||||
} else if ((document as any).mozCancelFullScreen) {
|
||||
(document as any).mozCancelFullScreen();
|
||||
}
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
}, [
|
||||
aspectRatio,
|
||||
containerWidth,
|
||||
containerHeight,
|
||||
fitAspect,
|
||||
height,
|
||||
width,
|
||||
stretch,
|
||||
selectedContainerRef,
|
||||
]);
|
||||
};
|
||||
|
||||
const scaledWidth = useMemo(() => {
|
||||
if (aspectRatio && scaledHeight) {
|
||||
return Math.ceil(scaledHeight * aspectRatio);
|
||||
}
|
||||
return undefined;
|
||||
}, [scaledHeight, aspectRatio]);
|
||||
video.els.canvas.addEventListener('dblclick', toggleFullscreen);
|
||||
|
||||
useEffect(() => {
|
||||
if (scaledWidth && scaledHeight) {
|
||||
setDimensionsReady(true);
|
||||
}
|
||||
}, [scaledWidth, scaledHeight]);
|
||||
|
||||
useEffect(() => {
|
||||
onPlayingRef.current = onPlaying;
|
||||
}, [onPlaying]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedContainerRef?.current || !url) {
|
||||
return;
|
||||
}
|
||||
|
||||
const videoWrapper = videoRef.current;
|
||||
const canvas = canvasRef.current;
|
||||
let videoElement: JSMpeg.VideoElement | null = null;
|
||||
|
||||
let frameCount = 0;
|
||||
|
||||
setHasData(false);
|
||||
|
||||
if (videoWrapper && playbackEnabled) {
|
||||
// Delayed init to avoid issues with react strict mode
|
||||
const initPlayer = setTimeout(() => {
|
||||
videoElement = new JSMpeg.VideoElement(
|
||||
videoWrapper,
|
||||
url,
|
||||
{ canvas: canvas },
|
||||
{
|
||||
protocols: [],
|
||||
audio: false,
|
||||
disableGl: !useWebGL,
|
||||
disableWebAssembly: !useWebGL,
|
||||
videoBufferSize: 1024 * 1024 * 4,
|
||||
onVideoDecode: () => {
|
||||
if (!hasDataRef.current) {
|
||||
setHasData(true);
|
||||
onPlayingRef.current?.();
|
||||
}
|
||||
frameCount++;
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
// Set up WebSocket message handler
|
||||
if (
|
||||
videoElement.player &&
|
||||
videoElement.player.source &&
|
||||
videoElement.player.source.socket
|
||||
) {
|
||||
const socket = videoElement.player.source.socket;
|
||||
socket.addEventListener("message", (event: MessageEvent) => {
|
||||
if (event.data instanceof ArrayBuffer) {
|
||||
bytesReceivedRef.current += event.data.byteLength;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Update stats every second
|
||||
statsIntervalRef.current = setInterval(() => {
|
||||
const currentTimestamp = Date.now();
|
||||
const timeDiff = (currentTimestamp - lastTimestampRef.current) / 1000; // in seconds
|
||||
const bitrate = (bytesReceivedRef.current * 8) / timeDiff / 1000; // in kbps
|
||||
|
||||
setStats?.({
|
||||
streamType: "jsmpeg",
|
||||
bandwidth: Math.round(bitrate),
|
||||
totalFrames: frameCount,
|
||||
latency: undefined,
|
||||
droppedFrames: undefined,
|
||||
decodedFrames: undefined,
|
||||
droppedFrameRate: undefined,
|
||||
});
|
||||
|
||||
bytesReceivedRef.current = 0;
|
||||
lastTimestampRef.current = currentTimestamp;
|
||||
}, 1000);
|
||||
|
||||
return () => {
|
||||
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 () => {
|
||||
video.destroy();
|
||||
video.els.canvas.removeEventListener('dblclick', toggleFullscreen);
|
||||
};
|
||||
}, [wsUrl]);
|
||||
|
||||
return (
|
||||
<div className={cn(className, !containerRef.current && "size-full")}>
|
||||
<div
|
||||
className="internal-jsmpeg-container size-full"
|
||||
ref={internalContainerRef}
|
||||
>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
<div
|
||||
ref={playerRef}
|
||||
key={wsUrl}
|
||||
title={t('player.doubleClickToFullHint')}
|
||||
style={{ width: cameraWidth, height: cameraHeight, maxWidth: maxWidth, maxHeight: maxHeight - 100, }} />
|
||||
)
|
||||
};
|
||||
|
||||
export default JSMpegPlayer
|
||||
@ -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;
|
||||
@ -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;
|
||||
showSpeedControls?: boolean;
|
||||
initialSeekTime?: number; // Unix timestamp or seconds offset to seek to on load
|
||||
videoUrl: string
|
||||
}
|
||||
|
||||
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>
|
||||
{/* 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 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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,46 +1,25 @@
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { LivePlayerError, PlayerStatsType } from "../../../types/live";
|
||||
import { useCallback, useEffect, useRef } from "react";
|
||||
|
||||
type WebRtcPlayerProps = {
|
||||
camera: string;
|
||||
wsURI: string;
|
||||
className?: string;
|
||||
camera: string;
|
||||
playbackEnabled?: boolean;
|
||||
audioEnabled?: boolean;
|
||||
volume?: number;
|
||||
microphoneEnabled?: boolean;
|
||||
iOSCompatFullScreen?: boolean; // ios doesn't support fullscreen divs so we must support the video element
|
||||
pip?: boolean;
|
||||
getStats?: boolean;
|
||||
setStats?: (stats: PlayerStatsType) => void;
|
||||
onPlaying?: () => void;
|
||||
onError?: (error: LivePlayerError) => void;
|
||||
|
||||
onPlaying?: () => void,
|
||||
wsUrl: string
|
||||
};
|
||||
|
||||
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(
|
||||
microphoneEnabled ? "video+audio+microphone" : "video+audio",
|
||||
);
|
||||
connect(aPc);
|
||||
// const url = `$baseUrl{.replace(
|
||||
// /^http/,
|
||||
// "ws"
|
||||
// )}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,
|
||||
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]);
|
||||
}, [camera, connect, PeerConnection, pcRef, videoRef, playbackEnabled, wsUrl]);
|
||||
|
||||
return (
|
||||
<video
|
||||
ref={videoRef}
|
||||
className={className}
|
||||
controls={iOSCompatControls}
|
||||
autoPlay
|
||||
playsInline
|
||||
muted={!audioEnabled}
|
||||
onLoadedData={handleLoadedData}
|
||||
onProgress={
|
||||
onError != undefined
|
||||
? () => {
|
||||
if (videoRef.current?.paused) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (bufferTimeout) {
|
||||
clearTimeout(bufferTimeout);
|
||||
setBufferTimeout(undefined);
|
||||
}
|
||||
|
||||
setBufferTimeout(
|
||||
setTimeout(() => {
|
||||
if (
|
||||
document.visibilityState === "visible" &&
|
||||
pcRef.current != undefined
|
||||
) {
|
||||
onError("stalled");
|
||||
}
|
||||
}, 3000),
|
||||
);
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
onClick={
|
||||
iOSCompatFullScreen
|
||||
? () => setiOSCompatControls(!iOSCompatControls)
|
||||
: undefined
|
||||
}
|
||||
onError={(e) => {
|
||||
if (
|
||||
// @ts-expect-error code does exist
|
||||
e.target.error.code == MediaError.MEDIA_ERR_NETWORK
|
||||
) {
|
||||
onError?.("startup");
|
||||
}
|
||||
}}
|
||||
muted
|
||||
onLoadedData={onPlaying}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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,
|
||||
paramMinScore: string | undefined,
|
||||
paramLabels: string | undefined,
|
||||
paramEventType: string | undefined) {
|
||||
paramEndTime: 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 });
|
||||
}
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
import { type ClassValue, clsx } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
@ -1,48 +1 @@
|
||||
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;
|
||||
};
|
||||
export type LivePlayerMode = "webrtc" | "mse" | "jsmpeg" | "debug";
|
||||
@ -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}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
@ -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 (
|
||||
|
||||
@ -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(
|
||||
() =>
|
||||
!showStillWithoutActivity ||
|
||||
(windowVisible && (activeMotion || activeTracking)),
|
||||
[activeMotion, activeTracking, showStillWithoutActivity, windowVisible],
|
||||
() => windowVisible && (activeMotion || activeTracking),
|
||||
[activeMotion, activeTracking, windowVisible]
|
||||
);
|
||||
|
||||
// camera live state
|
||||
@ -77,12 +52,7 @@ const Player = ({
|
||||
}
|
||||
}, [cameraActive, liveReady, liveMode]);
|
||||
|
||||
|
||||
const playerIsPlaying = useCallback(() => {
|
||||
setLiveReady(true);
|
||||
}, []);
|
||||
|
||||
|
||||
if (!isProduction) console.log(`liveMode: `, liveMode)
|
||||
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}
|
||||
url={wsUrl}
|
||||
camera={camera.config.name}
|
||||
className="flex justify-center overflow-hidden rounded-lg md:rounded-2xl"
|
||||
width={camera.config.detect.width}
|
||||
height={camera.config.detect.height}
|
||||
playbackEnabled={
|
||||
showStillWithoutActivity
|
||||
}
|
||||
containerRef={containerRef ?? internalContainerRef}
|
||||
useWebGL={useWebGL}
|
||||
setStats={setStats}
|
||||
onPlaying={playerIsPlaying}
|
||||
wsUrl={wsUrl}
|
||||
cameraWidth={camera.config?.detect.width}
|
||||
cameraHeight={camera.config?.detect.height}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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 (
|
||||
<>
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import { Flex, Text } from '@mantine/core';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
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 React, { Suspense, useContext } from 'react';
|
||||
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
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
import { Center, Flex, Text } from '@mantine/core';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import { useContext, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Context } from '..';
|
||||
import RetryErrorPage from '../pages/RetryErrorPage';
|
||||
import React, { useContext, useState } from 'react';
|
||||
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 (
|
||||
|
||||
@ -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 { Suspense, lazy, useContext, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { frigateQueryKeys, frigateApi } from '../services/frigate.proxy/frigate.api';
|
||||
import { Context } from '..';
|
||||
import CenterLoader from '../shared/components/loaders/CenterLoader';
|
||||
import RetryErrorPage from '../pages/RetryErrorPage';
|
||||
import { frigateApi, frigateQueryKeys } from '../services/frigate.proxy/frigate.api';
|
||||
import CenteredCogwheelLoader from '../shared/components/loaders/CenteredCogwheelLoader';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
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
|
||||
|
||||
@ -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 { formatMBytes } from '../../shared/utils/data.size';
|
||||
import { sortByKey } from '../../shared/utils/sort.array';
|
||||
import { Center, Flex, Table, Text } from '@mantine/core';
|
||||
import { TableHead } from '../../types/table';
|
||||
import SortedTh from '../../shared/components/table.aps/SortedTh';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import { sortByKey } from '../../shared/utils/sort.array';
|
||||
import { 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>
|
||||
|
||||
|
||||
@ -48,10 +48,9 @@ const FrigateHostsTable = ({ data, showAddButton = false, saveCallback, changedC
|
||||
}
|
||||
|
||||
const headTitle = [
|
||||
{ propertyName: 'name', title: t('siteTableTitles.siteName') },
|
||||
{ propertyName: 'location', title: t('siteTableTitles.location') },
|
||||
{ propertyName: 'host', title: t('siteTableTitles.url') },
|
||||
{ propertyName: 'enabled', title: t('siteTableTitles.enabled') },
|
||||
{ propertyName: 'name', title: t('frigateHostTableTitles.host') },
|
||||
{ propertyName: 'host', title: t('frigateHostTableTitles.url') },
|
||||
{ propertyName: 'enabled', title: t('frigateHostTableTitles.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')}
|
||||
/>
|
||||
<TextInputCell
|
||||
text={item.location || ''}
|
||||
width='25%'
|
||||
id={item.id}
|
||||
propertyName='location'
|
||||
onChange={handleTextChange}
|
||||
placeholder={t('siteTablePlaceholders.location')}
|
||||
placeholder={t('frigateHostTablePlaceholders.name')}
|
||||
/>
|
||||
<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', }}>
|
||||
|
||||
@ -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
|
||||
label={t('selectSite')}
|
||||
<HostSelect
|
||||
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}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
</>
|
||||
|
||||
@ -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
|
||||
label={t('selectSite')}
|
||||
<HostSelect
|
||||
label={t('selectHost')}
|
||||
valueId={hostId || undefined}
|
||||
defaultId={hostId || undefined}
|
||||
onChange={handleSelectHost}
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": [
|
||||
"src",
|
||||
|
||||
10
yarn.lock
10
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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user