From 910a0fa309d5a8d287bce9aca13cf7e7f6ccc9f5 Mon Sep 17 00:00:00 2001
From: NlightN22 <oncharterliz@gmail.com>
Date: Sun, 1 Dec 2024 01:33:48 +0700
Subject: [PATCH] add download button

---
 src/locales/en.ts                             |  2 ++
 src/locales/ru.ts                             |  2 ++
 .../components/accordion/EventPanel.tsx       | 14 +++-----
 .../components/accordion/EventsAccordion.tsx  | 15 ++++++---
 .../components/buttons/DownloadButton.tsx     | 33 +++++++++++++++++++
 src/widgets/VideoDownloader.tsx               | 13 ++++----
 6 files changed, 59 insertions(+), 20 deletions(-)
 create mode 100644 src/shared/components/buttons/DownloadButton.tsx

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 = ({
                 <Flex direction='column' align='end' justify='center'>
                     {!hostName ? '' :
                         <Flex>
-                            <Button
-                                component="a"
-                                href={proxyApi.eventDownloadURL(hostName, event.id)}
-                                download
-                                variant="outline"
-                                leftIcon={<IconExternalLink size="0.9rem" />}>
-                                Download event
-                            </Button>
+                            <DownloadButton 
+                            link={proxyApi.eventDownloadURL(hostName, event.id)}
+                            />
                         </Flex>
                     }
                 </Flex>
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 <Center><Loader /></Center>
+    if (isPending) return <Flex w='100%' h='100%' direction='column' justify='center' align='center'><CogwheelLoader /></Flex>
     if (isError && retryCount >= MAX_RETRY_COUNT) {
         return (
-            <Center>
+            <Flex w='100%' h='100%' direction='column' justify='center' align='center'>
                 <Text>{t('maxRetries', { maxRetries: MAX_RETRY_COUNT })}</Text>
-            </Center>
+            </Flex>
         );
     }
     if (isError) return <RetryError onRetry={refetch} />
-    if (!data || data.length < 1) return <Center><Text>{t('notHaveEventsAtThatPeriod')}</Text></Center>
+    if (!data || data.length < 1) return (
+        <Flex w='100%' h='100%' direction='column' justify='center' align='center'>
+            <Text>{t('notHaveEventsAtThatPeriod')}</Text>
+        </Flex>
+    )
 
     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<DownloadButtonProps> = ({
+    link,
+    onClick
+}) => {
+
+    const handleOnClick = () => {
+        if (onClick) onClick()
+    }
+    return (
+        <Button
+            component="a"
+            href={link}
+            download
+            variant="outline"
+            leftIcon={<IconDownload size="0.9rem" />}
+            onClick={handleOnClick}
+        >
+            {t('download')}
+        </Button>
+    );
+};
+
+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<string>()
     const [link, setLink] = useState<string>()
@@ -138,17 +143,13 @@ const VideoDownloader = ({
 
     const preparingVideo = (
         <>
-            <Text>Preparing video...<Loader /></Text>
+            <Text>{t('preparingVideo')}<Loader /></Text>
         </>
     )
     if (createName) return preparingVideo
 
     return (
-        <Button
-            onClick={handleDownload}
-        >
-            Download
-        </Button>
+        <DownloadButton onClick={handleDownload}/>
     );
 };