Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-07-12 13:47:14 +02:00
Code Issues Projects Releases Wiki Activity

Show / Download Exported recordings UI (#7171)

Browse Source 
* Start with getting list of exports

* List downloadable exports in export page

* Fix downloading

* use swr instead of effect
This commit is contained in:
Nicolas Mowen 2023-07-15 14:13:53 -06:00 committed by GitHub
parent 8e584cf844
commit 07155b1fa9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 101 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
web/src/routes/Export.jsx
View File

@ -3,9 +3,13 @@ import { useState } from 'preact/hooks';
import useSWR from 'swr';
import Button from '../components/Button';
import axios from 'axios';
import { baseUrl } from '../api/baseUrl';
import { Fragment } from 'preact';
import ActivityIndicator from '../components/ActivityIndicator';
export default function Export() {
const { data: config } = useSWR('config');
const { data: exports } = useSWR('exports/', (url) => axios({ baseURL: baseUrl, url }).then((res) => res.data));
const [camera, setCamera] = useState('select');
const [playback, setPlayback] = useState('select');
@ -64,6 +68,8 @@ export default function Export() {
<div className={`max-h-20 ${message.error ? 'text-red-500' : 'text-green-500'}`}>{message.text}</div>
)}
<div className="xl:flex justify-between">
<div>
<div>
<select
className="me-2 cursor-pointer rounded dark:bg-slate-800"
@ -124,7 +130,43 @@ export default function Export() {
onChange={(e) => setEndTime(e.target.value)}
/>
</div>
<Button onClick={() => onHandleExport()}>Submit</Button>
<Button className="my-4" onClick={() => onHandleExport()}>
Submit
</Button>
</div>
{exports && (
<div className="p-4 bg-gray-800 xl:w-1/2">
<Heading size="md">Exports</Heading>
<Exports exports={exports} />
</div>
)}
</div>
</div>
);
}
function Exports({ exports }) {
return (
<Fragment>
{exports.map((item) => (
<div className="my-4 p-4 bg-gray-700" key={item.name}>
{item.name.startsWith('in_progress') ? (
<div className="flex justify-start text-center items-center">
<div>
<ActivityIndicator size="sm" />
</div>
<div className="px-2">{item.name.substring(12, item.name.length - 4)}</div>
</div>
) : (
<div className="flex justify-start items-center">
<a className="text-blue-500 hover:underline" href={`${baseUrl}exports/${item.name}`} download>
{item.name.substring(0, item.name.length - 4)}
</a>
</div>
)}
</div>
))}
</Fragment>
);
}