Create API to create gif from previews and show instead of still thumbnails (#9786)

* Start working on animation

* Change output file

* Create preview gif

* Show animated gif for event thumb

* Remove favorite

* Cleanup

web/src/pages/Live.tsx

@@ -1,11 +1,10 @@
-import { EventThumbnail } from "@/components/image/EventThumbnail";
+import { AnimatedEventThumbnail } from "@/components/image/AnimatedEventThumbnail";
 import LivePlayer from "@/components/player/LivePlayer";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { Event as FrigateEvent } from "@/types/event";
 import { FrigateConfig } from "@/types/frigateConfig";
-import axios from "axios";
-import { useCallback, useMemo } from "react";
+import { useMemo } from "react";
 import useSWR from "swr";
 
 function Live() {
@@ -13,7 +12,7 @@ function Live() {
 
   // recent events
 
-  const { data: allEvents, mutate: updateEvents } = useSWR<FrigateEvent[]>(
+  const { data: allEvents } = useSWR<FrigateEvent[]>(
     ["events", { limit: 10 }],
     { refreshInterval: 60000 }
   );
@@ -29,19 +28,6 @@ function Live() {
     return allEvents.filter((event) => event.start_time > cutoff);
   }, [allEvents]);
 
-  const onFavorite = useCallback(async (e: Event, event: FrigateEvent) => {
-    e.stopPropagation();
-    let response;
-    if (!event.retain_indefinitely) {
-      response = await axios.post(`events/${event.id}/retain`);
-    } else {
-      response = await axios.delete(`events/${event.id}/retain`);
-    }
-    if (response.status === 200) {
-      updateEvents();
-    }
-  }, []);
-
   // camera live views
 
   const cameras = useMemo(() => {
@@ -61,13 +47,7 @@ function Live() {
           <TooltipProvider>
             <div className="flex">
               {events.map((event) => {
-                return (
-                  <EventThumbnail
-                    key={event.id}
-                    event={event}
-                    onFavorite={onFavorite}
-                  />
-                );
+                return <AnimatedEventThumbnail key={event.id} event={event} />;
               })}
             </div>
           </TooltipProvider>