florian/slidestr
1
1
Fork 0
Code Issues 6 Pull Requests Packages Projects Releases Wiki Activity

fix: Some display fixes

Browse Source
This commit is contained in:
florian 2023-09-11 18:33:38 +02:00
parent a9d6fe5834
commit c7552d8e9e
6 changed files with 41 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/slidestr.svg" />
<link rel="manifest" href="manifest.json" />
<link rel="manifest" href="/manifest.json" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<title>slidestr.net</title>
<link href="/fonts/outfit/outfit.css" rel="stylesheet" />

1
src/components/GridView/DetailsView.tsx
View File

@ -132,6 +132,7 @@ const DetailsView = ({ images, activeImageIdx, setActiveImageIdx }: DetailsViewP
if (!currentImage) return null;
// TODO unmute video through icon
return (
<div className="details">

27
src/components/GridView/GridImage.tsx
View File

@ -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<HTMLImageElement> {
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 ? (
<video
className={`image ${loaded ? 'show' : ''}`}
data-node-id={image.noteId}
key={image.url}
controls={false}
autoPlay={false}
onClick={onClick}
src={image.url + '#t=0.1'}
playsInline
onLoad={() => setLoaded(true)}
></video>
) : (
<img
data-node-id={image.noteId}
onError={(e: SyntheticEvent<HTMLImageElement>) => {
@ -18,8 +33,8 @@ const GridImage = ({ image, ...props }: GridImageProps) => {
onLoad={() => setLoaded(true)}
loading="lazy"
key={image.url}
onClick={onClick}
src={createImgProxyUrl(image.url)}
{...props}
></img>
);
};

15
src/components/GridView/GridView.css
View File

@ -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));
}
}

15
src/components/GridView/index.tsx
View File

@ -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}
<div className="imagegrid">
{sortedImages.map((image, idx) =>
isVideo(image.url) ? (
<video
className="image"
data-node-id={image.noteId}
key={image.url}
src={image.url}
controls
preload="none"
/>
) : (
<GridImage key={image.url} image={image} onClick={() => setActiveImageIdx(idx)}></GridImage>
)
)}
</div>
{activeProfile && (

5
src/components/SlideShow.css
View File

@ -219,4 +219,9 @@
.controls {
top: 2em;
}
.author-image {
width: 48px;
height: 48px;
}
}