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 }) {
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'>
<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 class="relative inline-flex rounded-full h-3 w-3" style={{ backgroundColor: "rgb(74 222 128)" }}></span>
<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 class='relative inline-flex rounded-full h-3 w-3' style={{ backgroundColor: 'rgb(74 222 128)' }}></span>
</span>
</div>
<span>Live</span>
</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 Heading from './Heading';
import Dialog from './Dialog';
export default function Prompt({ actions = [], title, text }) {
return (
<Dialog>
<div className="p-4">
<Heading size="lg">{title}</Heading>
<p>{text}</p>
</div>
<div className="p-2 flex justify-start flex-row-reverse space-x-2">
{actions.map(({ color, text, onClick, ...props }, i) => (
<Button className="ml-2" color={color} key={i} onClick={onClick} type="text" {...props}>
{text}
</Button>
))}
</div>
</Dialog>
)
return (
<Dialog>
<div className='p-4'>
<Heading size='lg'>{title}</Heading>
<p>{text}</p>
</div>
<div className='p-2 flex justify-start flex-row-reverse space-x-2'>
{actions.map(({ color, text, onClick, ...props }, i) => (
<Button className='ml-2' color={color} key={i} onClick={onClick} type='text' {...props}>
{text}
</Button>
))}
</div>
</Dialog>
);
}

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

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

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

@ -57,7 +57,7 @@ export default function Timeline({ events, offset, currentIndex, onChange }) {
} else {
setScrollActive(true);
}
}, [offset]);
}, [offset, currentEvent, timelineContainerRef]);
useEffect(() => {
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' });
}
}, [currentIndex]);
}, [currentIndex, timelineContainerRef, timeline, currentEvent]);
const checkMarkerForEvent = (markerTime) => {
if (!scrollActive) {
@ -119,7 +119,7 @@ export default function Timeline({ events, offset, currentIndex, onChange }) {
useEffect(() => {
onChange && onChange(currentEvent);
}, [currentEvent]);
}, [onChange, currentEvent]);
const RenderTimeline = useCallback(() => {
if (timeline && timeline.length > 0) {
@ -151,7 +151,7 @@ export default function Timeline({ events, offset, currentIndex, onChange }) {
</div>
);
}
}, [timeline]);
}, [timeline, timelineOffset]);
return (
<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 JSMpegPlayer from '../components/JSMpegPlayer';
import Heading from '../components/Heading';
import Link from '../components/Link';
import Switch from '../components/Switch';
import { usePersistence } from '../context';
import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';
import { useApiHost, useConfig, useEvents } from '../api';
import { useCallback, useEffect, useMemo, useState } from 'preact/hooks';
import { useConfig } from '../api';
import { Tabs, TextTab } from '../components/Tabs';
import Timeline from '../components/Timeline';
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';
const emptyObject = Object.freeze({});