Cleanup playground

web/src/components/player/PreviewThumbnailPlayer.tsx

@@ -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}

web/src/components/playground/TimelineScrubber.tsx

@@ -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;

web/src/pages/UIPlayground.tsx

@@ -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