diff --git a/src/locales/en.ts b/src/locales/en.ts
index 114eeac..a8aaed4 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -104,6 +104,8 @@ const en = {
doubleClickToFullHint: 'Double click for fullscreen',
rating: 'Rating',
},
+ preparingVideo: 'Preparing video...',
+ download: 'Download',
maxRetries: 'Error: Unable to fetch data after {{maxRetries}} retries. Please try again later or change period to smaller.',
config: 'Config',
create: 'Create',
diff --git a/src/locales/ru.ts b/src/locales/ru.ts
index af8a565..10c3ea5 100644
--- a/src/locales/ru.ts
+++ b/src/locales/ru.ts
@@ -101,6 +101,8 @@ const ru = {
doubleClickToFullHint: 'Двойное нажатие мышью для полноэкранного просмотра',
rating: 'Рейтинг',
},
+ preparingVideo: 'Подготовка видео...',
+ download: 'Скачать',
maxRetries: 'Ошибка: невозможно получить данные после {{maxRetries}} попыток. Пожалуйста попробуйте позже или поменяйте период на меньший.',
config: 'Конфиг.',
create: 'Создать',
diff --git a/src/shared/components/accordion/EventPanel.tsx b/src/shared/components/accordion/EventPanel.tsx
index 2af92f2..28de107 100644
--- a/src/shared/components/accordion/EventPanel.tsx
+++ b/src/shared/components/accordion/EventPanel.tsx
@@ -1,10 +1,11 @@
import { Button, Flex, Group, Text } from '@mantine/core';
-import { IconExternalLink } from '@tabler/icons-react';
+import { IconDownload } from '@tabler/icons-react';
import { useTranslation } from 'react-i18next';
import { proxyApi } from '../../../services/frigate.proxy/frigate.api';
import { EventFrigate } from '../../../types/event';
import { getDurationFromTimestamps, unixTimeToDate } from '../../utils/dateUtil';
import VideoPlayer from '../players/VideoPlayer';
+import DownloadButton from '../buttons/DownloadButton';
interface EventPanelProps {
event: EventFrigate
@@ -46,14 +47,9 @@ const EventPanel = ({
{!hostName ? '' :
- }>
- Download event
-
+
}
diff --git a/src/shared/components/accordion/EventsAccordion.tsx b/src/shared/components/accordion/EventsAccordion.tsx
index ee101ac..d4d80ca 100644
--- a/src/shared/components/accordion/EventsAccordion.tsx
+++ b/src/shared/components/accordion/EventsAccordion.tsx
@@ -1,4 +1,4 @@
-import { Accordion, Center, Loader, 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';
@@ -9,6 +9,7 @@ import { GetCameraWHostWConfig, GetFrigateHost, getEventsQuerySchema } from '../
import { getUnixTime } from '../../utils/dateUtil';
import RetryError from '../RetryError';
import EventsAccordionItem from './EventsAccordionItem';
+import CogwheelLoader from '../loaders/CogwheelLoader';
/**
* @param day frigate format, e.g day: 2024-02-23
@@ -97,16 +98,20 @@ const EventsAccordion = ({
}
})
- if (isPending) return
+ if (isPending) return
if (isError && retryCount >= MAX_RETRY_COUNT) {
return (
-
+
{t('maxRetries', { maxRetries: MAX_RETRY_COUNT })}
-
+
);
}
if (isError) return
- if (!data || data.length < 1) return {t('notHaveEventsAtThatPeriod')}
+ if (!data || data.length < 1) return (
+
+ {t('notHaveEventsAtThatPeriod')}
+
+ )
const handleOpenPlayer = (value: string | undefined) => {
if (value !== recStore.playedItem) {
diff --git a/src/shared/components/buttons/DownloadButton.tsx b/src/shared/components/buttons/DownloadButton.tsx
new file mode 100644
index 0000000..c7b4343
--- /dev/null
+++ b/src/shared/components/buttons/DownloadButton.tsx
@@ -0,0 +1,33 @@
+import { Button } from '@mantine/core';
+import { IconDownload } from '@tabler/icons-react';
+import { t } from 'i18next';
+import { FC } from 'react';
+
+interface DownloadButtonProps {
+ link?: string
+ onClick?(): void
+}
+
+const DownloadButton: FC = ({
+ link,
+ onClick
+}) => {
+
+ const handleOnClick = () => {
+ if (onClick) onClick()
+ }
+ return (
+ }
+ onClick={handleOnClick}
+ >
+ {t('download')}
+
+ );
+};
+
+export default DownloadButton;
\ No newline at end of file
diff --git a/src/widgets/VideoDownloader.tsx b/src/widgets/VideoDownloader.tsx
index 026d2d9..43a22aa 100644
--- a/src/widgets/VideoDownloader.tsx
+++ b/src/widgets/VideoDownloader.tsx
@@ -6,6 +6,8 @@ import { useEffect, useState } from 'react';
import { proxyApi } from '../services/frigate.proxy/frigate.api';
import RetryError from '../shared/components/RetryError';
import { formatFileTimestamps } from '../shared/utils/dateUtil';
+import { useTranslation } from 'react-i18next';
+import DownloadButton from '../shared/components/buttons/DownloadButton';
interface VideoDownloaderProps {
cameraName: string
@@ -20,6 +22,9 @@ const VideoDownloader = ({
startUnixTime,
endUnixTime,
}: VideoDownloaderProps) => {
+
+ const { t } = useTranslation()
+
const maxVideoTime = 70 * 60
const [createName, setCreateName] = useState()
const [link, setLink] = useState()
@@ -138,17 +143,13 @@ const VideoDownloader = ({
const preparingVideo = (
<>
- Preparing video...
+ {t('preparingVideo')}
>
)
if (createName) return preparingVideo
return (
-
+
);
};