diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx index d59b5a3..79d9dbe 100644 --- a/src/components/Layout/Layout.tsx +++ b/src/components/Layout/Layout.tsx @@ -1,6 +1,4 @@ import './Layout.css'; -import Disclaimer from '../Disclaimer'; -import useDisclaimerState from '../../utils/useDisclaimerState'; import { useState } from 'react'; import Login from '../Login/Login'; import { useGlobalState } from '../../utils/globalState'; diff --git a/src/components/MasonryView/MasonryImage.tsx b/src/components/MasonryView/MasonryImage.tsx index 3f1ef32..af8e142 100644 --- a/src/components/MasonryView/MasonryImage.tsx +++ b/src/components/MasonryView/MasonryImage.tsx @@ -5,6 +5,8 @@ import useProfile from '../../ngine/hooks/useProfile'; import useNav from '../../utils/useNav'; import LazyLoad from 'react-lazy-load'; import uniq from 'lodash/uniq'; +import { timeDifference } from '../../utils/time'; +import { unixNow } from '../../ngine/time'; interface MasonryImageProps { image: NostrImage; @@ -39,6 +41,7 @@ const MasonryImage = ({ image, onClick, index }: MasonryImageProps) => { const description = image.content && image.content?.substring(0, 60) + (image.content.length > 60 ? ' ... ' : ' '); const showTags = useMemo(() => uniq(image.tags).slice(0, 5), [image.tags]); + const now = unixNow(); return ( @@ -79,7 +82,8 @@ const MasonryImage = ({ image, onClick, index }: MasonryImageProps) => { )} {(showAuthor || description || showTags.length > 0) && ( -
+
+
{image.timestamp && timeDifference(now, image.timestamp)}
{showAuthor && (
profileClick(image.author)}>{profile?.displayName || profile?.name} diff --git a/src/components/MasonryView/MasonryView.css b/src/components/MasonryView/MasonryView.css index e209a6d..fa0d51a 100644 --- a/src/components/MasonryView/MasonryView.css +++ b/src/components/MasonryView/MasonryView.css @@ -91,3 +91,13 @@ display: block; } } + +.mason-imagegrid .time { + position: absolute; + right: 0px; + top:0px; + color: #666; + padding-top: .5em; + background-color: #111; + padding-left: .4em; +} \ No newline at end of file diff --git a/src/utils/time.ts b/src/utils/time.ts new file mode 100644 index 0000000..a348590 --- /dev/null +++ b/src/utils/time.ts @@ -0,0 +1,26 @@ +export function timeDifference(current: number, previous: number) { + const sPerMinute = 60; + const sPerHour = sPerMinute * 60; + const sPerDay = sPerHour * 24; + const sPerMonth = sPerDay * 30; + const sPerYear = sPerDay * 365; + + const elapsed = current - previous; + + if (elapsed < 10) { + return 'now'; + } + if (elapsed < sPerMinute) { + return Math.round(elapsed) + ' s'; + } else if (elapsed < sPerHour) { + return Math.round(elapsed / sPerMinute) + ' m'; + } else if (elapsed < sPerDay) { + return Math.round(elapsed / sPerHour) + ' h'; + } else if (elapsed < sPerMonth) { + return Math.round(elapsed / sPerDay) + ' d'; + } else if (elapsed < sPerYear) { + return Math.round(elapsed / sPerMonth) + ' M'; + } else { + return Math.round(elapsed / sPerYear) + ' Y'; + } +}