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

Cleanup playground

Browse Source
This commit is contained in:
Nicolas Mowen 2024-02-26 09:46:11 -07:00
parent 02ff6e80cb
commit d272536f25
3 changed files with 1 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/player/PreviewThumbnailPlayer.tsx
View File

@ -112,7 +112,7 @@ export default function PreviewThumbnailPlayer({
onClick={onClick}
>
{playingBack && (
<div className="absolute left-0 top-0 right-0 bottom-0 animate-in fade-in">
<div className="absolute left-0 top-0 right-0 bottom-0">
<PreviewContent
review={review}
relevantPreview={relevantPreview}

46
web/src/components/playground/TimelineScrubber.tsx
View File

@ -1,46 +0,0 @@
import useSWR from "swr";
import ActivityScrubber, { ScrubberItem } from "../scrubber/ActivityScrubber";
type TimelineScrubberProps = {
eventID: string;
};
function timelineEventsToScrubberItems(events: Timeline[]): ScrubberItem[] {
return events.map((event: Timeline, index: number) => ({
id: index,
content: event.class_type,
start: event.timestamp * 1000,
type: "box",
}));
}
function generateScrubberOptions(events: Timeline[]) {
const startTime = events[0].timestamp * 1000 - 10;
const endTime = events[events.length - 1].timestamp * 1000 + 10;
return { start: startTime, end: endTime };
}
function TimelineScrubber({ eventID }: TimelineScrubberProps) {
const { data: eventTimeline } = useSWR<Timeline[]>([
"timeline",
{
source_id: eventID,
},
]);
return (
<>
{eventTimeline && (
<>
<ActivityScrubber
items={timelineEventsToScrubberItems(eventTimeline)}
options={generateScrubberOptions(eventTimeline)}
/>
</>
)}
</>
);
}
export default TimelineScrubber;

45
web/src/pages/UIPlayground.tsx
View File

@ -1,14 +1,9 @@
import { useCallback, useMemo, useRef, useState } from "react";
import Heading from "@/components/ui/heading";
import ActivityScrubber, {
ScrubberItem,
} from "@/components/scrubber/ActivityScrubber";
import useSWR from "swr";
import { FrigateConfig } from "@/types/frigateConfig";
import { Event } from "@/types/event";
import ActivityIndicator from "@/components/ui/activity-indicator";
import { useApiHost } from "@/api";
import TimelineScrubber from "@/components/playground/TimelineScrubber";
import EventReviewTimeline from "@/components/timeline/EventReviewTimeline";
import { ReviewData, ReviewSegment, ReviewSeverity } from "@/types/review";
import { Button } from "@/components/ui/button";
@ -48,18 +43,6 @@ function ColorSwatch({ name, value }: { name: string; value: string }) {
);
}
function eventsToScrubberItems(events: Event[]): ScrubberItem[] {
const apiHost = useApiHost();
return events.map((event: Event) => ({
id: event.id,
content: `<div class="flex"><img class="" src="${apiHost}api/events/${event.id}/thumbnail.jpg" /><span>${event.label}</span></div>`,
start: new Date(event.start_time * 1000),
end: event.end_time ? new Date(event.end_time * 1000) : undefined,
type: "box",
}));
}
const generateRandomEvent = (): ReviewSegment => {
const start_time =
Math.floor(Date.now() / 1000) - 10800 - Math.random() * 60 * 60;
@ -98,17 +81,12 @@ const generateRandomEvent = (): ReviewSegment => {
function UIPlayground() {
const { data: config } = useSWR<FrigateConfig>("config");
const [timeline, setTimeline] = useState<string | undefined>(undefined);
const contentRef = useRef<HTMLDivElement>(null);
const [mockEvents, setMockEvents] = useState<ReviewSegment[]>([]);
const [handlebarTime, setHandlebarTime] = useState(
Math.floor(Date.now() / 1000) - 15 * 60
);
const onSelect = useCallback(({ items }: { items: string[] }) => {
setTimeline(items[0]);
}, []);
const recentTimestamp = useMemo(() => {
const now = new Date();
now.setMinutes(now.getMinutes() - 240);
@ -190,29 +168,6 @@ function UIPlayground() {
{!config && <ActivityIndicator />}
{config && (
<div>
{events && events.length > 0 && (
<>
<ActivityScrubber
items={eventsToScrubberItems(events)}
selectHandler={onSelect}
/>
</>
)}
</div>
)}
{config && (
<div>
{timeline && (
<>
<TimelineScrubber eventID={timeline} />
</>
)}
</div>
)}
<div ref={contentRef}>
<Heading as="h4" className="my-5">
Timeline