diff --git a/striker-ui/components/Display/Preview.tsx b/striker-ui/components/Display/Preview.tsx index 968a1258..89c5b53b 100644 --- a/striker-ui/components/Display/Preview.tsx +++ b/striker-ui/components/Display/Preview.tsx @@ -21,10 +21,11 @@ import IconButton, { IconButtonProps } from '../IconButton'; import { InnerPanel, InnerPanelHeader, Panel, PanelHeader } from '../Panels'; import Spinner from '../Spinner'; import { BodyText, HeaderText } from '../Text'; -import { last } from '../../lib/time'; +import { elapsed, last, now } from '../../lib/time'; type PreviewOptionalProps = { externalPreview?: string; + externalTimestamp?: number; headerEndAdornment?: ReactNode; isExternalLoading?: boolean; isExternalPreviewStale?: boolean; @@ -46,6 +47,7 @@ const PREVIEW_DEFAULT_PROPS: Required< > & Pick = { externalPreview: '', + externalTimestamp: 0, headerEndAdornment: null, isExternalLoading: false, isExternalPreviewStale: false, @@ -86,6 +88,7 @@ const PreviewPanelHeader: FC<{ const Preview: FC = ({ externalPreview = PREVIEW_DEFAULT_PROPS.externalPreview, + externalTimestamp = PREVIEW_DEFAULT_PROPS.externalTimestamp, headerEndAdornment, isExternalLoading = PREVIEW_DEFAULT_PROPS.isExternalLoading, isExternalPreviewStale = PREVIEW_DEFAULT_PROPS.isExternalPreviewStale, @@ -101,6 +104,7 @@ const Preview: FC = ({ const [isPreviewLoading, setIsPreviewLoading] = useState(true); const [isPreviewStale, setIsPreviewStale] = useState(false); const [preview, setPreview] = useState(''); + const [previewTimstamp, setPreviewTimestamp] = useState(0); const previewButtonContent = useMemo( () => @@ -117,9 +121,16 @@ const Preview: FC = ({ width: '100%', }} /> - {isPreviewStale && ( - Outdated - )} + {isPreviewStale && + ((sst: number) => { + const { unit, value } = elapsed(now() - sst); + + return ( + + Lost ~{value} {unit} ago + + ); + })(previewTimstamp)} ) : ( = ({ }} /> ), - [isPreviewStale, isUseInnerPanel, preview, serverState], + [isPreviewStale, isUseInnerPanel, preview, previewTimstamp, serverState], ); useEffect(() => { @@ -145,6 +156,7 @@ const Preview: FC = ({ const { screenshot, timestamp } = data; setPreview(screenshot); + setPreviewTimestamp(timestamp); setIsPreviewStale(!last(timestamp, 300)); } catch { setIsPreviewStale(true); @@ -154,11 +166,13 @@ const Preview: FC = ({ })(); } else if (!isExternalLoading) { setPreview(externalPreview); + setPreviewTimestamp(externalTimestamp); setIsPreviewStale(isExternalPreviewStale); setIsPreviewLoading(false); } }, [ externalPreview, + externalTimestamp, isExternalLoading, isExternalPreviewStale, isFetchPreview, diff --git a/striker-ui/pages/index.tsx b/striker-ui/pages/index.tsx index d990b888..af64bb03 100644 --- a/striker-ui/pages/index.tsx +++ b/striker-ui/pages/index.tsx @@ -23,6 +23,7 @@ type ServerListItem = ServerOverviewMetadata & { isScreenshotStale?: boolean; loading?: boolean; screenshot: string; + timestamp: number; }; const createServerPreviewContainer = ( @@ -54,9 +55,11 @@ const createServerPreviewContainer = ( serverName, serverState, serverUUID, + timestamp, }) => ( { ...serverOverview, loading: true, screenshot: previousScreenshot, + timestamp: 0, }; fetchJSON<{ screenshot: string; timestamp: number }>( @@ -169,6 +173,7 @@ const Dashboard: FC = () => { item.isScreenshotStale = !last(timestamp, 300); item.loading = false; item.screenshot = screenshot; + item.timestamp = timestamp; const allServersWithScreenshots = [...serverListItems];