35 lines
1.2 KiB
TypeScript
35 lines
1.2 KiB
TypeScript
import { Flex } from '@mantine/core';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { observer } from 'mobx-react-lite';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useParams } from 'react-router-dom';
|
|
import { frigateApi, frigateQueryKeys } from '../services/frigate.proxy/frigate.api';
|
|
import CenterLoader from '../shared/components/loaders/CenterLoader';
|
|
import Player from '../widgets/Player';
|
|
import CameraPageHeader from '../widgets/header/CameraPageHeader';
|
|
import RetryErrorPage from './RetryErrorPage';
|
|
|
|
const LiveCameraPage = () => {
|
|
const { t } = useTranslation()
|
|
let { id: cameraId } = useParams<'id'>()
|
|
if (!cameraId) throw Error('Camera id does not exist')
|
|
|
|
const { data: camera, isPending, isError, refetch } = useQuery({
|
|
queryKey: [frigateQueryKeys.getCameraWHost, cameraId],
|
|
queryFn: () => frigateApi.getCameraWHost(cameraId!)
|
|
})
|
|
|
|
if (isPending) return <CenterLoader />
|
|
|
|
if (isError) return <RetryErrorPage onRetry={refetch} />
|
|
|
|
|
|
return (
|
|
<Flex w='100%' h='100%' justify='center' align='center' direction='column'>
|
|
<CameraPageHeader camera={camera} editButton />
|
|
<Player camera={camera} />
|
|
</Flex>
|
|
);
|
|
}
|
|
|
|
export default observer(LiveCameraPage) |