diff --git a/index.html b/index.html
index 53997c1..6a8b245 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
diff --git a/src/components/GridView/GridImage.tsx b/src/components/GridView/GridImage.tsx
index ab8134a..9f61c36 100644
--- a/src/components/GridView/GridImage.tsx
+++ b/src/components/GridView/GridImage.tsx
@@ -1,14 +1,29 @@
-import { SyntheticEvent, useState } from 'react';
-import { NostrImage, createImgProxyUrl } from '../nostrImageDownload';
+import { MouseEventHandler, SyntheticEvent, useState } from 'react';
+import { NostrImage, createImgProxyUrl, isVideo } from '../nostrImageDownload';
-interface GridImageProps extends React.ImgHTMLAttributes
{
+interface GridImageProps {
image: NostrImage;
+ onClick?: MouseEventHandler | undefined;
}
-const GridImage = ({ image, ...props }: GridImageProps) => {
+const GridImage = ({ image, onClick }: GridImageProps) => {
const [loaded, setLoaded] = useState(false);
- return (
+ const mediaIsVideo = isVideo(image.url);
+
+ return mediaIsVideo ? (
+
+ ) : (
) => {
@@ -18,8 +33,8 @@ const GridImage = ({ image, ...props }: GridImageProps) => {
onLoad={() => setLoaded(true)}
loading="lazy"
key={image.url}
+ onClick={onClick}
src={createImgProxyUrl(image.url)}
- {...props}
>
);
};
diff --git a/src/components/GridView/GridView.css b/src/components/GridView/GridView.css
index 32b9c1c..cba0560 100644
--- a/src/components/GridView/GridView.css
+++ b/src/components/GridView/GridView.css
@@ -18,7 +18,7 @@
.imagegrid {
display: grid;
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+ grid-template-columns: repeat( auto-fill, minmax(200px, 1fr));
grid-gap: 1rem;
padding: 1rem;
width: 100vw;
@@ -26,7 +26,7 @@
box-sizing: border-box;
}
-.imagegrid .image {
+.imagegrid img.image {
border-radius: 0.5rem;
width: 100%;
object-fit: cover;
@@ -35,6 +35,15 @@
visibility: hidden;
}
+.imagegrid video.image {
+ border-radius: 0.5rem;
+ width: 100%;
+ object-fit: cover;
+ height: 200px;
+ cursor: pointer;
+}
+
+
.imagegrid .image.show {
animation-duration: 0.5s;
animation-timing-function: ease-in;
@@ -44,7 +53,7 @@
@media screen and (max-width: 600px) {
.imagegrid {
- grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
}
diff --git a/src/components/GridView/index.tsx b/src/components/GridView/index.tsx
index c61a7ad..7e15b7e 100644
--- a/src/components/GridView/index.tsx
+++ b/src/components/GridView/index.tsx
@@ -19,9 +19,7 @@ const GridView = ({ settings, images }: GridViewProps) => {
const sortedImages = useMemo(
() =>
- images
- .filter(i => !isVideo(i.url)) // TODO: filter out video for now, since we don't have a good way to display them
- .sort((a, b) => (b.timestamp && a.timestamp ? b.timestamp - a.timestamp : 0)), // sort by timestamp descending
+ images.sort((a, b) => (b.timestamp && a.timestamp ? b.timestamp - a.timestamp : 0)), // sort by timestamp descending
[images, settings] // settings is not used here, but we need to include it to trigger a re-render when it changes
);
@@ -72,18 +70,7 @@ const GridView = ({ settings, images }: GridViewProps) => {
) : null}
{sortedImages.map((image, idx) =>
- isVideo(image.url) ? (
-
- ) : (
setActiveImageIdx(idx)}>
- )
)}
{activeProfile && (
diff --git a/src/components/SlideShow.css b/src/components/SlideShow.css
index fe9dd96..def4cd6 100644
--- a/src/components/SlideShow.css
+++ b/src/components/SlideShow.css
@@ -219,4 +219,9 @@
.controls {
top: 2em;
}
+
+ .author-image {
+ width: 48px;
+ height: 48px;
+ }
}