From c7552d8e9e8ae7a9c0ae0c3ae56b35efd034431a Mon Sep 17 00:00:00 2001 From: florian <> Date: Mon, 11 Sep 2023 18:33:38 +0200 Subject: [PATCH] fix: Some display fixes --- index.html | 2 +- src/components/GridView/DetailsView.tsx | 1 + src/components/GridView/GridImage.tsx | 27 +++++++++++++++++++------ src/components/GridView/GridView.css | 15 +++++++++++--- src/components/GridView/index.tsx | 15 +------------- src/components/SlideShow.css | 5 +++++ 6 files changed, 41 insertions(+), 24 deletions(-) diff --git a/index.html b/index.html index 53997c1..6a8b245 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - + slidestr.net diff --git a/src/components/GridView/DetailsView.tsx b/src/components/GridView/DetailsView.tsx index 1bf6811..e90c8ed 100644 --- a/src/components/GridView/DetailsView.tsx +++ b/src/components/GridView/DetailsView.tsx @@ -132,6 +132,7 @@ const DetailsView = ({ images, activeImageIdx, setActiveImageIdx }: DetailsViewP if (!currentImage) return null; + // TODO unmute video through icon return (
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) ? ( -
{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; + } }