administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-02 01:05:20 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix: linting

Browse Source
This commit is contained in:
JohnMark Sill 2022-01-12 23:55:18 -06:00
parent 8e5ce8aad7
commit b8cf5e4aed
5 changed files with 50 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
web/src/components/LiveChip.jsx
View File

@ -1,15 +1,21 @@
import { h } from 'preact'; import { h } from 'preact';
export function LiveChip({ className }) { export function LiveChip({ className }) {
return ( return (
<div className={`inline relative px-2 py-1 rounded-full ${className}`} style={{ backgroundColor: "rgba(255, 255, 255, 0.1)" }}> <div
className={`inline relative px-2 py-1 rounded-full ${className}`}
style={{ backgroundColor: 'rgba(255, 255, 255, 0.1)' }}
>
<div className='relative inline-block w-3 h-3 mr-2'> <div className='relative inline-block w-3 h-3 mr-2'>
<span class="flex h-3 w-3"> <span class='flex h-3 w-3'>
<span class="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75" style={{ backgroundColor: "rgb(74 222 128)" }}></span> <span
<span class="relative inline-flex rounded-full h-3 w-3" style={{ backgroundColor: "rgb(74 222 128)" }}></span> class='animate-ping absolute inline-flex h-full w-full rounded-full opacity-75'
style={{ backgroundColor: 'rgb(74 222 128)' }}
></span>
<span class='relative inline-flex rounded-full h-3 w-3' style={{ backgroundColor: 'rgb(74 222 128)' }}></span>
</span> </span>
</div> </div>
<span>Live</span> <span>Live</span>
</div> </div>
) );
} }

32
web/src/components/Prompt.jsx
View File

@ -1,22 +1,22 @@
import { h, Fragment } from 'preact'; import { h } from 'preact';
import Button from './Button'; import Button from './Button';
import Heading from './Heading'; import Heading from './Heading';
import Dialog from './Dialog'; import Dialog from './Dialog';
export default function Prompt({ actions = [], title, text }) { export default function Prompt({ actions = [], title, text }) {
return ( return (
<Dialog> <Dialog>
<div className="p-4"> <div className='p-4'>
<Heading size="lg">{title}</Heading> <Heading size='lg'>{title}</Heading>
<p>{text}</p> <p>{text}</p>
</div> </div>
<div className="p-2 flex justify-start flex-row-reverse space-x-2"> <div className='p-2 flex justify-start flex-row-reverse space-x-2'>
{actions.map(({ color, text, onClick, ...props }, i) => ( {actions.map(({ color, text, onClick, ...props }, i) => (
<Button className="ml-2" color={color} key={i} onClick={onClick} type="text" {...props}> <Button className='ml-2' color={color} key={i} onClick={onClick} type='text' {...props}>
{text} {text}
</Button> </Button>
))} ))}
</div> </div>
</Dialog> </Dialog>
) );
} }

27
web/src/components/Tabs.jsx
View File

@ -1,34 +1,37 @@
import { h } from 'preact'; import { h } from 'preact';
import { useCallback, useState } from "preact/hooks"; import { useCallback, useState } from 'preact/hooks';
export function Tabs({ children, selectedIndex: selectedIndexProp, onChange, className }) { export function Tabs({ children, selectedIndex: selectedIndexProp, onChange, className }) {
const [selectedIndex, setSelectedIndex] = useState(selectedIndexProp); const [selectedIndex, setSelectedIndex] = useState(selectedIndexProp);
const handleSelected = (index) => () => { const handleSelected = useCallback(
setSelectedIndex(index); (index) => () => {
onChange && onChange(index) setSelectedIndex(index);
}; onChange && onChange(index);
},
[onChange]
);
const RenderChildren = useCallback(() => { const RenderChildren = useCallback(() => {
return children.map((child, i) => { return children.map((child, i) => {
child.props.selected = i == selectedIndex child.props.selected = i === selectedIndex;
child.props.onClick = handleSelected(i) child.props.onClick = handleSelected(i);
return child; return child;
}) });
}, [selectedIndex]) }, [selectedIndex, children, handleSelected]);
return ( return (
<div className={`flex ${className}`}> <div className={`flex ${className}`}>
<RenderChildren /> <RenderChildren />
</div> </div>
) );
} }
export function TextTab({ selected, text, onClick }) { export function TextTab({ selected, text, onClick }) {
const selectedStyle = selected ? 'text-black bg-white' : "text-white bg-transparent" const selectedStyle = selected ? 'text-black bg-white' : 'text-white bg-transparent';
return ( return (
<button onClick={onClick} className={`rounded-full px-4 py-2 ${selectedStyle}`}> <button onClick={onClick} className={`rounded-full px-4 py-2 ${selectedStyle}`}>
<span>{text}</span> <span>{text}</span>
</button> </button>
) );
} }

8
web/src/components/Timeline.jsx
View File

@ -57,7 +57,7 @@ export default function Timeline({ events, offset, currentIndex, onChange }) {
} else { } else {
setScrollActive(true); setScrollActive(true);
} }
}, [offset]); }, [offset, currentEvent, timelineContainerRef]);
useEffect(() => { useEffect(() => {
if (currentIndex !== undefined && currentIndex !== currentEvent.index) { if (currentIndex !== undefined && currentIndex !== currentEvent.index) {
@ -71,7 +71,7 @@ export default function Timeline({ events, offset, currentIndex, onChange }) {
}); });
timelineContainerRef.current.scroll({ left: event.positionX - timelineOffset, behavior: 'smooth' }); timelineContainerRef.current.scroll({ left: event.positionX - timelineOffset, behavior: 'smooth' });
} }
}, [currentIndex]); }, [currentIndex, timelineContainerRef, timeline, currentEvent]);
const checkMarkerForEvent = (markerTime) => { const checkMarkerForEvent = (markerTime) => {
if (!scrollActive) { if (!scrollActive) {
@ -119,7 +119,7 @@ export default function Timeline({ events, offset, currentIndex, onChange }) {
useEffect(() => { useEffect(() => {
onChange && onChange(currentEvent); onChange && onChange(currentEvent);
}, [currentEvent]); }, [onChange, currentEvent]);
const RenderTimeline = useCallback(() => { const RenderTimeline = useCallback(() => {
if (timeline && timeline.length > 0) { if (timeline && timeline.length > 0) {
@ -151,7 +151,7 @@ export default function Timeline({ events, offset, currentIndex, onChange }) {
</div> </div>
); );
} }
}, [timeline]); }, [timeline, timelineOffset]);
return ( return (
<div className='relative flex-grow-1'> <div className='relative flex-grow-1'>

13
web/src/routes/Camera_V2.jsx
View File

@ -1,21 +1,14 @@
import { h, Fragment, render } from 'preact'; import { h, Fragment } from 'preact';
import AutoUpdatingCameraImage from '../components/AutoUpdatingCameraImage'; import AutoUpdatingCameraImage from '../components/AutoUpdatingCameraImage';
import JSMpegPlayer from '../components/JSMpegPlayer'; import JSMpegPlayer from '../components/JSMpegPlayer';
import Heading from '../components/Heading'; import Heading from '../components/Heading';
import Link from '../components/Link'; import Link from '../components/Link';
import Switch from '../components/Switch'; import Switch from '../components/Switch';
import { usePersistence } from '../context'; import { usePersistence } from '../context';
import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks'; import { useCallback, useEffect, useMemo, useState } from 'preact/hooks';
import { useApiHost, useConfig, useEvents } from '../api'; import { useConfig } from '../api';
import { Tabs, TextTab } from '../components/Tabs'; import { Tabs, TextTab } from '../components/Tabs';
import Timeline from '../components/Timeline';
import { LiveChip } from '../components/LiveChip'; import { LiveChip } from '../components/LiveChip';
import { HistoryHeader } from './HistoryHeader';
import { longToDate } from '../utils/dateUtil';
import { useSearchString } from '../hooks/useSearchString';
import { Previous } from '../icons/Previous';
import { Play } from '../icons/Play';
import { Next } from '../icons/Next';
import HistoryViewer from '../components/HistoryViewer'; import HistoryViewer from '../components/HistoryViewer';
const emptyObject = Object.freeze({}); const emptyObject = Object.freeze({});