From b943a6f1286c170f5d7692fe811ec1c5a4daf103 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 16 Oct 2024 09:36:28 -0500
Subject: [PATCH] Add time ago to explore summary view on desktop

---
 web/src/views/explore/ExploreView.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/web/src/views/explore/ExploreView.tsx b/web/src/views/explore/ExploreView.tsx
index e2c8e63bc..3a0b9cc7b 100644
--- a/web/src/views/explore/ExploreView.tsx
+++ b/web/src/views/explore/ExploreView.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useMemo } from "react";
-import { isIOS, isMobileOnly, isSafari } from "react-device-detect";
+import { isDesktop, isIOS, isMobileOnly, isSafari } from "react-device-detect";
 import useSWR from "swr";
 import { useApiHost } from "@/api";
 import { cn } from "@/lib/utils";
@@ -17,6 +17,7 @@ import useImageLoaded from "@/hooks/use-image-loaded";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { useEventUpdate } from "@/api/ws";
 import { isEqual } from "lodash";
+import TimeAgo from "@/components/dynamic/TimeAgo";
 
 type ExploreViewProps = {
   searchDetail: SearchResult | undefined;
@@ -197,6 +198,7 @@ function ExploreThumbnailImage({
         className="absolute inset-0"
         imgLoaded={imgLoaded}
       />
+
       <img
         ref={imgRef}
         className={cn(
@@ -218,6 +220,17 @@ function ExploreThumbnailImage({
           onImgLoad();
         }}
       />
+      {isDesktop && (
+        <div className="absolute bottom-1 right-1 z-10 rounded-lg bg-black/50 px-2 py-1 text-xs text-white">
+          {event.end_time ? (
+            <TimeAgo time={event.start_time * 1000} dense />
+          ) : (
+            <div>
+              <ActivityIndicator size={10} />
+            </div>
+          )}
+        </div>
+      )}
     </>
   );
 }