Merge branch 'dev' of https://github.com/hawkeye217/frigate into lost-object-zoom

web/__test__/handlers.js

@@ -86,4 +86,19 @@ export const handlers = [
       ])
     );
   }),
+  rest.get(`api/labels`, (req, res, ctx) => {
+    return res(
+      ctx.status(200),
+      ctx.json([
+        'person',
+        'car',
+      ])
+    );
+  }),
+  rest.get(`api/go2rtc`, (req, res, ctx) => {
+    return res(
+      ctx.status(200),
+      ctx.json({"config_path":"/dev/shm/go2rtc.yaml","host":"frigate.yourdomain.local","rtsp":{"listen":"0.0.0.0:8554","default_query":"mp4","PacketSize":0},"version":"1.7.1"})
+    );
+  }),
 ];

web/package.json

@@ -24,6 +24,7 @@
     "preact-router": "^4.1.0",
     "react": "npm:@preact/compat@^17.1.2",
     "react-dom": "npm:@preact/compat@^17.1.2",
+    "react-use-websocket": "^3.0.0",
     "strftime": "^0.10.1",
     "swr": "^1.3.0",
     "video.js": "^8.5.2",
@@ -48,6 +49,7 @@
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-vitest-globals": "^1.4.0",
     "fake-indexeddb": "^4.0.1",
+    "jest-websocket-mock": "^2.5.0",
     "jsdom": "^22.0.0",
     "msw": "^1.2.1",
     "postcss": "^8.4.29",

web/src/api/__tests__/ws.test.jsx

@@ -1,10 +1,12 @@
+/* eslint-disable jest/no-disabled-tests */
 import { h } from 'preact';
-import { WS, WsProvider, useWs } from '../ws';
+import { WS as frigateWS, WsProvider, useWs } from '../ws';
 import { useCallback, useContext } from 'preact/hooks';
 import { fireEvent, render, screen } from 'testing-library';
+import { WS } from 'jest-websocket-mock';
 
 function Test() {
-  const { state } = useContext(WS);
+  const { state } = useContext(frigateWS);
   return state.__connected ? (
     <div data-testid="data">
       {Object.keys(state).map((key) => (
@@ -19,44 +21,32 @@ function Test() {
 const TEST_URL = 'ws://test-foo:1234/ws';
 
 describe('WsProvider', () => {
-  let createWebsocket, wsClient;
+  let wsClient, wsServer;
-  beforeEach(() => {
+  beforeEach(async () => {
     wsClient = {
       close: vi.fn(),
       send: vi.fn(),
     };
-    createWebsocket = vi.fn((url) => {
+    wsServer = new WS(TEST_URL);
-      wsClient.args = [url];
-      return new Proxy(
-        {},
-        {
-          get(_target, prop, _receiver) {
-            return wsClient[prop];
-          },
-          set(_target, prop, value) {
-            wsClient[prop] = typeof value === 'function' ? vi.fn(value) : value;
-            if (prop === 'onopen') {
-              wsClient[prop]();
-            }
-            return true;
-          },
-        }
-      );
-    });
   });
 
-  test('connects to the ws server', async () => {
+  afterEach(() => {
+    WS.clean();
+  });
+
+  test.skip('connects to the ws server', async () => {
     render(
-      <WsProvider config={mockConfig} createWebsocket={createWebsocket} wsUrl={TEST_URL}>
+      <WsProvider config={mockConfig} wsUrl={TEST_URL}>
         <Test />
       </WsProvider>
     );
+    await wsServer.connected;
     await screen.findByTestId('data');
     expect(wsClient.args).toEqual([TEST_URL]);
     expect(screen.getByTestId('__connected')).toHaveTextContent('true');
   });
 
-  test('receives data through useWs', async () => {
+  test.skip('receives data through useWs', async () => {
     function Test() {
       const {
         value: { payload, retain },
@@ -71,16 +61,17 @@ describe('WsProvider', () => {
     }
 
     const { rerender } = render(
-      <WsProvider config={mockConfig} createWebsocket={createWebsocket} wsUrl={TEST_URL}>
+      <WsProvider config={mockConfig} wsUrl={TEST_URL}>
         <Test />
       </WsProvider>
     );
+    await wsServer.connected;
     await screen.findByTestId('payload');
     wsClient.onmessage({
       data: JSON.stringify({ topic: 'tacos', payload: JSON.stringify({ yes: true }), retain: false }),
     });
     rerender(
-      <WsProvider config={mockConfig} createWebsocket={createWebsocket} wsUrl={TEST_URL}>
+      <WsProvider config={mockConfig} wsUrl={TEST_URL}>
         <Test />
       </WsProvider>
     );
@@ -88,7 +79,7 @@ describe('WsProvider', () => {
     expect(screen.getByTestId('retain')).toHaveTextContent('false');
   });
 
-  test('can send values through useWs', async () => {
+  test.skip('can send values through useWs', async () => {
     function Test() {
       const { send, connected } = useWs('tacos');
       const handleClick = useCallback(() => {
@@ -98,10 +89,11 @@ describe('WsProvider', () => {
     }
 
     render(
-      <WsProvider config={mockConfig} createWebsocket={createWebsocket} wsUrl={TEST_URL}>
+      <WsProvider config={mockConfig} wsUrl={TEST_URL}>
         <Test />
       </WsProvider>
     );
+    await wsServer.connected;
     await screen.findByRole('button');
     fireEvent.click(screen.getByRole('button'));
     await expect(wsClient.send).toHaveBeenCalledWith(
@@ -109,19 +101,32 @@ describe('WsProvider', () => {
     );
   });
 
-  test('prefills the recordings/detect/snapshots state from config', async () => {
+  test.skip('prefills the recordings/detect/snapshots state from config', async () => {
     vi.spyOn(Date, 'now').mockReturnValue(123456);
     const config = {
       cameras: {
-        front: { name: 'front', detect: { enabled: true }, record: { enabled: false }, snapshots: { enabled: true }, audio: { enabled: false } },
+        front: {
-        side: { name: 'side', detect: { enabled: false }, record: { enabled: false }, snapshots: { enabled: false }, audio: { enabled: false } },
+          name: 'front',
+          detect: { enabled: true },
+          record: { enabled: false },
+          snapshots: { enabled: true },
+          audio: { enabled: false },
+        },
+        side: {
+          name: 'side',
+          detect: { enabled: false },
+          record: { enabled: false },
+          snapshots: { enabled: false },
+          audio: { enabled: false },
+        },
       },
     };
     render(
-      <WsProvider config={config} createWebsocket={createWebsocket} wsUrl={TEST_URL}>
+      <WsProvider config={config} wsUrl={TEST_URL}>
         <Test />
       </WsProvider>
     );
+    await wsServer.connected;
     await screen.findByTestId('data');
     expect(screen.getByTestId('front/detect/state')).toHaveTextContent(
       '{"lastUpdate":123456,"payload":"ON","retain":false}'

web/src/api/ws.jsx

@@ -1,12 +1,11 @@
 import { h, createContext } from 'preact';
 import { baseUrl } from './baseUrl';
 import { produce } from 'immer';
-import { useCallback, useContext, useEffect, useRef, useReducer } from 'preact/hooks';
+import { useCallback, useContext, useEffect, useReducer } from 'preact/hooks';
+import useWebSocket, { ReadyState } from 'react-use-websocket';
 
 const initialState = Object.freeze({ __connected: false });
-export const WS = createContext({ state: initialState, connection: null });
+export const WS = createContext({ state: initialState, readyState: null, sendJsonMessage: () => {} });
-
-const defaultCreateWebsocket = (url) => new WebSocket(url);
 
 function reducer(state, { topic, payload, retain }) {
   switch (topic) {
@@ -33,11 +32,18 @@ function reducer(state, { topic, payload, retain }) {
 export function WsProvider({
   config,
   children,
-  createWebsocket = defaultCreateWebsocket,
   wsUrl = `${baseUrl.replace(/^http/, 'ws')}ws`,
 }) {
   const [state, dispatch] = useReducer(reducer, initialState);
-  const wsRef = useRef();
+
+  const { sendJsonMessage, readyState } = useWebSocket(wsUrl, {
+
+    onMessage: (event) => {
+      dispatch(JSON.parse(event.data));
+    },
+    onOpen: () => dispatch({ topic: '__CLIENT_CONNECTED' }),
+    shouldReconnect: () => true,
+  });
 
   useEffect(() => {
     Object.keys(config.cameras).forEach((camera) => {
@@ -49,46 +55,25 @@ export function WsProvider({
     });
   }, [config]);
 
-  useEffect(
+  return <WS.Provider value={{ state, readyState, sendJsonMessage }}>{children}</WS.Provider>;
-    () => {
-      const ws = createWebsocket(wsUrl);
-      ws.onopen = () => {
-        dispatch({ topic: '__CLIENT_CONNECTED' });
-      };
-
-      ws.onmessage = (event) => {
-        dispatch(JSON.parse(event.data));
-      };
-
-      wsRef.current = ws;
-
-      return () => {
-        ws.close(3000, 'Provider destroyed');
-      };
-    },
-    // Forces reconnecting
-    [state.__reconnectAttempts, wsUrl] // eslint-disable-line react-hooks/exhaustive-deps
-  );
-
-  return <WS.Provider value={{ state, ws: wsRef.current }}>{children}</WS.Provider>;
 }
 
 export function useWs(watchTopic, publishTopic) {
-  const { state, ws } = useContext(WS);
+  const { state, readyState, sendJsonMessage } = useContext(WS);
 
   const value = state[watchTopic] || { payload: null };
 
   const send = useCallback(
     (payload, retain = false) => {
-      ws.send(
+      if (readyState === ReadyState.OPEN) {
-        JSON.stringify({
+        sendJsonMessage({
           topic: publishTopic || watchTopic,
-          payload: typeof payload !== 'string' ? JSON.stringify(payload) : payload,
+          payload,
           retain,
-        })
+        });
-      );
+      }
     },
-    [ws, watchTopic, publishTopic]
+    [sendJsonMessage, readyState, watchTopic, publishTopic]
   );
 
   return { value, send, connected: state.__connected };

web/src/components/TimelineSummary.jsx

@@ -81,7 +81,7 @@ export default function TimelineSummary({ event, onFrameSelected }) {
   return (
     <div className="flex flex-col">
       <div className="h-14 flex justify-center">
-        <div className="sm:w-1 md:w-1/4 flex flex-row flex-nowrap justify-between overflow-auto">
+        <div className="flex flex-row flex-nowrap justify-between overflow-auto">
           {eventTimeline.map((item, index) => (
             <Button
               key={index}

web/src/context/__tests__/index.test.jsx

@@ -101,9 +101,7 @@ describe('DarkMode', () => {
 });
 
 describe('usePersistence', () => {
-
   test('returns a defaultValue initially', async () => {
-
     function Component() {
       const [value, , loaded] = usePersistence('tacos', 'my-default');
       return (
@@ -132,7 +130,8 @@ describe('usePersistence', () => {
     `);
   });
 
-  test('updates with the previously-persisted value', async () => {
+  // eslint-disable-next-line jest/no-disabled-tests
+  test.skip('updates with the previously-persisted value', async () => {
     setData('tacos', 'are delicious');
 
     function Component() {

web/src/routes/Events.jsx

@@ -31,6 +31,9 @@ import Timepicker from '../components/TimePicker';
 import TimelineSummary from '../components/TimelineSummary';
 import TimelineEventOverlay from '../components/TimelineEventOverlay';
 import { Score } from '../icons/Score';
+import { About } from '../icons/About';
+import MenuIcon from '../icons/Menu';
+import { MenuOpen } from '../icons/MenuOpen';
 
 const API_LIMIT = 25;
 
@@ -91,13 +94,15 @@ export default function Events({ path, ...props }) {
     showDeleteFavorite: false,
   });
 
+  const [showInProgress, setShowInProgress] = useState(true);
+
   const eventsFetcher = useCallback(
     (path, params) => {
       if (searchParams.event) {
         path = `${path}/${searchParams.event}`;
         return axios.get(path).then((res) => [res.data]);
       }
-      params = { ...params, include_thumbnails: 0, limit: API_LIMIT };
+      params = { ...params, in_progress: 0, include_thumbnails: 0, limit: API_LIMIT };
       return axios.get(path, { params }).then((res) => res.data);
     },
     [searchParams]
@@ -116,6 +121,7 @@ export default function Events({ path, ...props }) {
     [searchParams]
   );
 
+  const { data: ongoingEvents } = useSWR(['events', { in_progress: 1, include_thumbnails: 0 }]);
   const { data: eventPages, mutate, size, setSize, isValidating } = useSWRInfinite(getKey, eventsFetcher);
 
   const { data: allLabels } = useSWR(['labels']);
@@ -238,6 +244,7 @@ export default function Events({ path, ...props }) {
 
   const handleSelectDateRange = useCallback(
     (dates) => {
+      setShowInProgress(false);
       setSearchParams({ ...searchParams, before: dates.before, after: dates.after });
       setState({ ...state, showDatePicker: false });
     },
@@ -253,6 +260,7 @@ export default function Events({ path, ...props }) {
 
   const onFilter = useCallback(
     (name, value) => {
+      setShowInProgress(false);
       const updatedParams = { ...searchParams, [name]: value };
       setSearchParams(updatedParams);
       const queryString = Object.keys(updatedParams)
@@ -604,192 +612,98 @@ export default function Events({ path, ...props }) {
         </Dialog>
       )}
       <div className="space-y-2">
+        {ongoingEvents ? (
+          <div>
+            <div className="flex">
+              <Heading className="py-4" size="sm">
+                Ongoing Events
+              </Heading>
+              <Button
+                className="rounded-full"
+                type="text"
+                color="gray"
+                aria-label="Events for currently tracked objects. Recordings are only saved based on your retain settings. See the recording docs for more info."
+              >
+                <About className="w-5" />
+              </Button>
+              <Button
+                className="rounded-full ml-auto"
+                type="iconOnly"
+                color="blue"
+                onClick={() => setShowInProgress(!showInProgress)}
+              >
+                {showInProgress ? <MenuOpen className="w-6" /> : <MenuIcon className="w-6" />}
+              </Button>
+            </div>
+            {showInProgress &&
+              ongoingEvents.map((event, _) => {
+                return (
+                  <Event
+                    className="my-2"
+                    key={event.id}
+                    config={config}
+                    event={event}
+                    eventDetailType={eventDetailType}
+                    eventOverlay={eventOverlay}
+                    viewEvent={viewEvent}
+                    setViewEvent={setViewEvent}
+                    uploading={uploading}
+                    handleEventDetailTabChange={handleEventDetailTabChange}
+                    onEventFrameSelected={onEventFrameSelected}
+                    onDelete={onDelete}
+                    onDispose={() => {
+                      this.player = null;
+                    }}
+                    onDownloadClick={onDownloadClick}
+                    onReady={(player) => {
+                      this.player = player;
+                      this.player.on('playing', () => {
+                        setEventOverlay(undefined);
+                      });
+                    }}
+                    onSave={onSave}
+                    showSubmitToPlus={showSubmitToPlus}
+                  />
+                );
+              })}
+          </div>
+        ) : null}
+        <Heading className="py-4" size="sm">
+          Past Events
+        </Heading>
         {eventPages ? (
           eventPages.map((page, i) => {
             const lastPage = eventPages.length === i + 1;
             return page.map((event, j) => {
               const lastEvent = lastPage && page.length === j + 1;
               return (
-                <Fragment key={event.id}>
+                <Event
-                  <div
+                  key={event.id}
-                    ref={lastEvent ? lastEventRef : false}
+                  config={config}
-                    className="flex bg-slate-100 dark:bg-slate-800 rounded cursor-pointer min-w-[330px]"
+                  event={event}
-                    onClick={() => (viewEvent === event.id ? setViewEvent(null) : setViewEvent(event.id))}
+                  eventDetailType={eventDetailType}
-                  >
+                  eventOverlay={eventOverlay}
-                    <div
+                  viewEvent={viewEvent}
-                      className="relative rounded-l flex-initial min-w-[125px] h-[125px] bg-contain bg-no-repeat bg-center"
+                  setViewEvent={setViewEvent}
-                      style={{
+                  lastEvent={lastEvent}
-                        'background-image': `url(${apiHost}api/events/${event.id}/thumbnail.jpg)`,
+                  lastEventRef={lastEventRef}
-                      }}
+                  uploading={uploading}
-                    >
+                  handleEventDetailTabChange={handleEventDetailTabChange}
-                      <StarRecording
+                  onEventFrameSelected={onEventFrameSelected}
-                        className="h-6 w-6 text-yellow-300 absolute top-1 right-1 cursor-pointer"
+                  onDelete={onDelete}
-                        onClick={(e) => onSave(e, event.id, !event.retain_indefinitely)}
+                  onDispose={() => {
-                        fill={event.retain_indefinitely ? 'currentColor' : 'none'}
+                    this.player = null;
-                      />
+                  }}
-                      {event.end_time ? null : (
+                  onDownloadClick={onDownloadClick}
-                        <div className="bg-slate-300 dark:bg-slate-700 absolute bottom-0 text-center w-full uppercase text-sm rounded-bl">
+                  onReady={(player) => {
-                          In progress
+                    this.player = player;
-                        </div>
+                    this.player.on('playing', () => {
-                      )}
+                      setEventOverlay(undefined);
-                    </div>
+                    });
-                    <div className="m-2 flex grow">
+                  }}
-                      <div className="flex flex-col grow">
+                  onSave={onSave}
-                        <div className="capitalize text-lg font-bold">
+                  showSubmitToPlus={showSubmitToPlus}
-                          {event.label.replaceAll('_', ' ')}
+                />
-                          {event.sub_label ? `: ${event.sub_label.replaceAll('_', ' ')}` : null}
-                        </div>
-
-                        <div className="text-sm flex">
-                          <Clock className="h-5 w-5 mr-2 inline" />
-                          {formatUnixTimestampToDateTime(event.start_time, { ...config.ui })}
-                          <div className="hidden md:inline">
-                            <span className="m-1">-</span>
-                            <TimeAgo time={event.start_time * 1000} dense />
-                          </div>
-                          <div className="hidden md:inline">
-                            <span className="m-1" />( {getDurationFromTimestamps(event.start_time, event.end_time)} )
-                          </div>
-                        </div>
-                        <div className="capitalize text-sm flex align-center mt-1">
-                          <Camera className="h-5 w-5 mr-2 inline" />
-                          {event.camera.replaceAll('_', ' ')}
-                        </div>
-                        {event.zones.length ? (
-                          <div className="capitalize  text-sm flex align-center">
-                            <Zone className="w-5 h-5 mr-2 inline" />
-                            {event.zones.join(', ').replaceAll('_', ' ')}
-                          </div>
-                        ) : null}
-                        <div className="capitalize  text-sm flex align-center">
-                          <Score className="w-5 h-5 mr-2 inline" />
-                          {(event?.data?.top_score || event.top_score || 0) == 0
-                            ? null
-                            : `${event.label}: ${((event?.data?.top_score || event.top_score) * 100).toFixed(0)}%`}
-                          {(event?.data?.sub_label_score || 0) == 0
-                            ? null
-                            : `, ${event.sub_label}: ${(event?.data?.sub_label_score * 100).toFixed(0)}%`}
-                        </div>
-                      </div>
-                      <div class="hidden sm:flex flex-col justify-end mr-2">
-                        {event.end_time && event.has_snapshot && (event?.data?.type || 'object') == 'object' && (
-                          <Fragment>
-                            {event.plus_id ? (
-                              <div className="uppercase text-xs underline">
-                                <Link
-                                  href={`https://plus.frigate.video/dashboard/edit-image/?id=${event.plus_id}`}
-                                  target="_blank"
-                                  rel="nofollow"
-                                >
-                                  Edit in Frigate+
-                                </Link>
-                              </div>
-                            ) : (
-                              <Button
-                                color="gray"
-                                disabled={uploading.includes(event.id)}
-                                onClick={(e) =>
-                                  showSubmitToPlus(event.id, event.label, event?.data?.box || event.box, e)
-                                }
-                              >
-                                {uploading.includes(event.id) ? 'Uploading...' : 'Send to Frigate+'}
-                              </Button>
-                            )}
-                          </Fragment>
-                        )}
-                      </div>
-                      <div class="flex flex-col">
-                        <Delete
-                          className="h-6 w-6 cursor-pointer"
-                          stroke="#f87171"
-                          onClick={(e) => onDelete(e, event.id, event.retain_indefinitely)}
-                        />
-
-                        <Download
-                          className="h-6 w-6 mt-auto"
-                          stroke={event.has_clip || event.has_snapshot ? '#3b82f6' : '#cbd5e1'}
-                          onClick={(e) => onDownloadClick(e, event)}
-                        />
-                      </div>
-                    </div>
-                  </div>
-                  {viewEvent !== event.id ? null : (
-                    <div className="space-y-4">
-                      <div className="mx-auto max-w-7xl">
-                        <div className="flex justify-center w-full py-2">
-                          <Tabs
-                            selectedIndex={event.has_clip && eventDetailType == 'clip' ? 0 : 1}
-                            onChange={handleEventDetailTabChange}
-                            className="justify"
-                          >
-                            <TextTab text="Clip" disabled={!event.has_clip} />
-                            <TextTab text={event.has_snapshot ? 'Snapshot' : 'Thumbnail'} />
-                          </Tabs>
-                        </div>
-
-                        <div>
-                          {eventDetailType == 'clip' && event.has_clip ? (
-                            <div>
-                              <TimelineSummary
-                                event={event}
-                                onFrameSelected={(frame, seekSeconds) =>
-                                  onEventFrameSelected(event, frame, seekSeconds)
-                                }
-                              />
-                              <div>
-                                <VideoPlayer
-                                  options={{
-                                    preload: 'auto',
-                                    autoplay: true,
-                                    sources: [
-                                      {
-                                        src: `${apiHost}vod/event/${event.id}/master.m3u8`,
-                                        type: 'application/vnd.apple.mpegurl',
-                                      },
-                                    ],
-                                  }}
-                                  seekOptions={{ forward: 10, backward: 5 }}
-                                  onReady={(player) => {
-                                    this.player = player;
-                                    this.player.on('playing', () => {
-                                      setEventOverlay(undefined);
-                                    });
-                                  }}
-                                  onDispose={() => {
-                                    this.player = null;
-                                  }}
-                                >
-                                  {eventOverlay ? (
-                                    <TimelineEventOverlay
-                                      eventOverlay={eventOverlay}
-                                      cameraConfig={config.cameras[event.camera]}
-                                    />
-                                  ) : null}
-                                </VideoPlayer>
-                              </div>
-                            </div>
-                          ) : null}
-
-                          {eventDetailType == 'image' || !event.has_clip ? (
-                            <div className="flex justify-center">
-                              <img
-                                className="flex-grow-0"
-                                src={
-                                  event.has_snapshot
-                                    ? `${apiHost}api/events/${event.id}/snapshot.jpg`
-                                    : `${apiHost}api/events/${event.id}/thumbnail.jpg`
-                                }
-                                alt={`${event.label} at ${((event?.data?.top_score || event.top_score) * 100).toFixed(
-                                  0
-                                )}% confidence`}
-                              />
-                            </div>
-                          ) : null}
-                        </div>
-                      </div>
-                    </div>
-                  )}
-                </Fragment>
               );
             });
           })
@@ -801,3 +715,195 @@ export default function Events({ path, ...props }) {
     </div>
   );
 }
+
+function Event({
+  className = '',
+  config,
+  event,
+  eventDetailType,
+  eventOverlay,
+  viewEvent,
+  setViewEvent,
+  lastEvent,
+  lastEventRef,
+  uploading,
+  handleEventDetailTabChange,
+  onEventFrameSelected,
+  onDelete,
+  onDispose,
+  onDownloadClick,
+  onReady,
+  onSave,
+  showSubmitToPlus,
+}) {
+  const apiHost = useApiHost();
+
+  return (
+    <div className={className}>
+      <div
+        ref={lastEvent ? lastEventRef : false}
+        className="flex bg-slate-100 dark:bg-slate-800 rounded cursor-pointer min-w-[330px]"
+        onClick={() => (viewEvent === event.id ? setViewEvent(null) : setViewEvent(event.id))}
+      >
+        <div
+          className="relative rounded-l flex-initial min-w-[125px] h-[125px] bg-contain bg-no-repeat bg-center"
+          style={{
+            'background-image': `url(${apiHost}api/events/${event.id}/thumbnail.jpg)`,
+          }}
+        >
+          <StarRecording
+            className="h-6 w-6 text-yellow-300 absolute top-1 right-1 cursor-pointer"
+            onClick={(e) => onSave(e, event.id, !event.retain_indefinitely)}
+            fill={event.retain_indefinitely ? 'currentColor' : 'none'}
+          />
+          {event.end_time ? null : (
+            <div className="bg-slate-300 dark:bg-slate-700 absolute bottom-0 text-center w-full uppercase text-sm rounded-bl">
+              In progress
+            </div>
+          )}
+        </div>
+        <div className="m-2 flex grow">
+          <div className="flex flex-col grow">
+            <div className="capitalize text-lg font-bold">
+              {event.label.replaceAll('_', ' ')}
+              {event.sub_label ? `: ${event.sub_label.replaceAll('_', ' ')}` : null}
+            </div>
+
+            <div className="text-sm flex">
+              <Clock className="h-5 w-5 mr-2 inline" />
+              {formatUnixTimestampToDateTime(event.start_time, { ...config.ui })}
+              <div className="hidden md:inline">
+                <span className="m-1">-</span>
+                <TimeAgo time={event.start_time * 1000} dense />
+              </div>
+              <div className="hidden md:inline">
+                <span className="m-1" />( {getDurationFromTimestamps(event.start_time, event.end_time)} )
+              </div>
+            </div>
+            <div className="capitalize text-sm flex align-center mt-1">
+              <Camera className="h-5 w-5 mr-2 inline" />
+              {event.camera.replaceAll('_', ' ')}
+            </div>
+            {event.zones.length ? (
+              <div className="capitalize  text-sm flex align-center">
+                <Zone className="w-5 h-5 mr-2 inline" />
+                {event.zones.join(', ').replaceAll('_', ' ')}
+              </div>
+            ) : null}
+            <div className="capitalize  text-sm flex align-center">
+              <Score className="w-5 h-5 mr-2 inline" />
+              {(event?.data?.top_score || event.top_score || 0) == 0
+                ? null
+                : `${event.label}: ${((event?.data?.top_score || event.top_score) * 100).toFixed(0)}%`}
+              {(event?.data?.sub_label_score || 0) == 0
+                ? null
+                : `, ${event.sub_label}: ${(event?.data?.sub_label_score * 100).toFixed(0)}%`}
+            </div>
+          </div>
+          <div class="hidden sm:flex flex-col justify-end mr-2">
+            {event.end_time && event.has_snapshot && (event?.data?.type || 'object') == 'object' && (
+              <Fragment>
+                {event.plus_id ? (
+                  <div className="uppercase text-xs underline">
+                    <Link
+                      href={`https://plus.frigate.video/dashboard/edit-image/?id=${event.plus_id}`}
+                      target="_blank"
+                      rel="nofollow"
+                    >
+                      Edit in Frigate+
+                    </Link>
+                  </div>
+                ) : (
+                  <Button
+                    color="gray"
+                    disabled={uploading.includes(event.id)}
+                    onClick={(e) => showSubmitToPlus(event.id, event.label, event?.data?.box || event.box, e)}
+                  >
+                    {uploading.includes(event.id) ? 'Uploading...' : 'Send to Frigate+'}
+                  </Button>
+                )}
+              </Fragment>
+            )}
+          </div>
+          <div class="flex flex-col">
+            <Delete
+              className="h-6 w-6 cursor-pointer"
+              stroke="#f87171"
+              onClick={(e) => onDelete(e, event.id, event.retain_indefinitely)}
+            />
+
+            <Download
+              className="h-6 w-6 mt-auto"
+              stroke={event.has_clip || event.has_snapshot ? '#3b82f6' : '#cbd5e1'}
+              onClick={(e) => onDownloadClick(e, event)}
+            />
+          </div>
+        </div>
+      </div>
+      {viewEvent !== event.id ? null : (
+        <div className="space-y-4">
+          <div className="mx-auto max-w-7xl">
+            <div className="flex justify-center w-full py-2">
+              <Tabs
+                selectedIndex={event.has_clip && eventDetailType == 'clip' ? 0 : 1}
+                onChange={handleEventDetailTabChange}
+                className="justify"
+              >
+                <TextTab text="Clip" disabled={!event.has_clip} />
+                <TextTab text={event.has_snapshot ? 'Snapshot' : 'Thumbnail'} />
+              </Tabs>
+            </div>
+
+            <div>
+              {eventDetailType == 'clip' && event.has_clip ? (
+                <div>
+                  <TimelineSummary
+                    event={event}
+                    onFrameSelected={(frame, seekSeconds) => onEventFrameSelected(event, frame, seekSeconds)}
+                  />
+                  <div>
+                    <VideoPlayer
+                      options={{
+                        preload: 'auto',
+                        autoplay: true,
+                        sources: [
+                          {
+                            src: `${apiHost}vod/event/${event.id}/master.m3u8`,
+                            type: 'application/vnd.apple.mpegurl',
+                          },
+                        ],
+                      }}
+                      seekOptions={{ forward: 10, backward: 5 }}
+                      onReady={onReady}
+                      onDispose={onDispose}
+                    >
+                      {eventOverlay ? (
+                        <TimelineEventOverlay eventOverlay={eventOverlay} cameraConfig={config.cameras[event.camera]} />
+                      ) : null}
+                    </VideoPlayer>
+                  </div>
+                </div>
+              ) : null}
+
+              {eventDetailType == 'image' || !event.has_clip ? (
+                <div className="flex justify-center">
+                  <img
+                    className="flex-grow-0"
+                    src={
+                      event.has_snapshot
+                        ? `${apiHost}api/events/${event.id}/snapshot.jpg`
+                        : `${apiHost}api/events/${event.id}/thumbnail.jpg`
+                    }
+                    alt={`${event.label} at ${((event?.data?.top_score || event.top_score) * 100).toFixed(
+                      0
+                    )}% confidence`}
+                  />
+                </div>
+              ) : null}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

web/src/routes/__tests__/Cameras.test.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable jest/no-disabled-tests */
 import { h } from 'preact';
 import * as CameraImage from '../../components/CameraImage';
 import * as Hooks from '../../hooks';
@@ -17,7 +18,7 @@ describe('Cameras Route', () => {
     expect(screen.queryByLabelText('Loading…')).toBeInTheDocument();
   });
 
-  test('shows cameras', async () => {
+  test.skip('shows cameras', async () => {
     render(<Cameras />);
 
     await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading…'));
@@ -29,7 +30,7 @@ describe('Cameras Route', () => {
     expect(screen.queryByText('side').closest('a')).toHaveAttribute('href', '/cameras/side');
   });
 
-  test('shows recordings link', async () => {
+  test.skip('shows recordings link', async () => {
     render(<Cameras />);
 
     await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading…'));
@@ -37,7 +38,7 @@ describe('Cameras Route', () => {
     expect(screen.queryAllByText('Recordings')).toHaveLength(2);
   });
 
-  test('buttons toggle detect, clips, and snapshots', async () => {
+  test.skip('buttons toggle detect, clips, and snapshots', async () => {
     const sendDetect = vi.fn();
     const sendRecordings = vi.fn();
     const sendSnapshots = vi.fn();

web/src/routes/__tests__/Events.test.jsx

@@ -10,7 +10,8 @@ describe('Events Route', () => {
     expect(screen.queryByLabelText('Loading…')).toBeInTheDocument();
   });
 
-  test('does not show ActivityIndicator after loaded', async () => {
+  // eslint-disable-next-line jest/no-disabled-tests
+  test.skip('does not show ActivityIndicator after loaded', async () => {
     render(<Events limit={5} path="/events" />);
 
     await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading…'));

web/src/routes/__tests__/Recording.test.jsx

@@ -17,9 +17,8 @@ describe('Recording Route', () => {
     expect(screen.queryByLabelText('Loading…')).toBeInTheDocument();
   });
 
-
+  // eslint-disable-next-line jest/no-disabled-tests
-
+  test.skip('shows no recordings warning', async () => {
-  test('shows no recordings warning', async () => {
     render(<Cameras />);
 
     await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading…'));