fix: Some display fixes
This commit is contained in:
parent
a9d6fe5834
commit
c7552d8e9e
@ -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" />
|
||||
|
@ -132,6 +132,7 @@ const DetailsView = ({ images, activeImageIdx, setActiveImageIdx }: DetailsViewP
|
||||
|
||||
if (!currentImage) return null;
|
||||
|
||||
// TODO unmute video through icon
|
||||
|
||||
return (
|
||||
<div className="details">
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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 && (
|
||||
|
@ -219,4 +219,9 @@
|
||||
.controls {
|
||||
top: 2em;
|
||||
}
|
||||
|
||||
.author-image {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user