fix: Some display fixes
This commit is contained in:
parent
a9d6fe5834
commit
c7552d8e9e
@ -3,7 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/slidestr.svg" />
|
<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" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
||||||
<title>slidestr.net</title>
|
<title>slidestr.net</title>
|
||||||
<link href="/fonts/outfit/outfit.css" rel="stylesheet" />
|
<link href="/fonts/outfit/outfit.css" rel="stylesheet" />
|
||||||
|
@ -132,6 +132,7 @@ const DetailsView = ({ images, activeImageIdx, setActiveImageIdx }: DetailsViewP
|
|||||||
|
|
||||||
if (!currentImage) return null;
|
if (!currentImage) return null;
|
||||||
|
|
||||||
|
// TODO unmute video through icon
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="details">
|
<div className="details">
|
||||||
|
@ -1,14 +1,29 @@
|
|||||||
import { SyntheticEvent, useState } from 'react';
|
import { MouseEventHandler, SyntheticEvent, useState } from 'react';
|
||||||
import { NostrImage, createImgProxyUrl } from '../nostrImageDownload';
|
import { NostrImage, createImgProxyUrl, isVideo } from '../nostrImageDownload';
|
||||||
|
|
||||||
interface GridImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
|
interface GridImageProps {
|
||||||
image: NostrImage;
|
image: NostrImage;
|
||||||
|
onClick?: MouseEventHandler | undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
const GridImage = ({ image, ...props }: GridImageProps) => {
|
const GridImage = ({ image, onClick }: GridImageProps) => {
|
||||||
const [loaded, setLoaded] = useState(false);
|
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
|
<img
|
||||||
data-node-id={image.noteId}
|
data-node-id={image.noteId}
|
||||||
onError={(e: SyntheticEvent<HTMLImageElement>) => {
|
onError={(e: SyntheticEvent<HTMLImageElement>) => {
|
||||||
@ -18,8 +33,8 @@ const GridImage = ({ image, ...props }: GridImageProps) => {
|
|||||||
onLoad={() => setLoaded(true)}
|
onLoad={() => setLoaded(true)}
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
key={image.url}
|
key={image.url}
|
||||||
|
onClick={onClick}
|
||||||
src={createImgProxyUrl(image.url)}
|
src={createImgProxyUrl(image.url)}
|
||||||
{...props}
|
|
||||||
></img>
|
></img>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -18,7 +18,7 @@
|
|||||||
|
|
||||||
.imagegrid {
|
.imagegrid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
grid-template-columns: repeat( auto-fill, minmax(200px, 1fr));
|
||||||
grid-gap: 1rem;
|
grid-gap: 1rem;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
@ -26,7 +26,7 @@
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.imagegrid .image {
|
.imagegrid img.image {
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
@ -35,6 +35,15 @@
|
|||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.imagegrid video.image {
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
width: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
height: 200px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.imagegrid .image.show {
|
.imagegrid .image.show {
|
||||||
animation-duration: 0.5s;
|
animation-duration: 0.5s;
|
||||||
animation-timing-function: ease-in;
|
animation-timing-function: ease-in;
|
||||||
@ -44,7 +53,7 @@
|
|||||||
|
|
||||||
@media screen and (max-width: 600px) {
|
@media screen and (max-width: 600px) {
|
||||||
.imagegrid {
|
.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(
|
const sortedImages = useMemo(
|
||||||
() =>
|
() =>
|
||||||
images
|
images.sort((a, b) => (b.timestamp && a.timestamp ? b.timestamp - a.timestamp : 0)), // sort by timestamp descending
|
||||||
.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, settings] // settings is not used here, but we need to include it to trigger a re-render when it changes
|
[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}
|
) : null}
|
||||||
<div className="imagegrid">
|
<div className="imagegrid">
|
||||||
{sortedImages.map((image, idx) =>
|
{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>
|
<GridImage key={image.url} image={image} onClick={() => setActiveImageIdx(idx)}></GridImage>
|
||||||
)
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{activeProfile && (
|
{activeProfile && (
|
||||||
|
@ -219,4 +219,9 @@
|
|||||||
.controls {
|
.controls {
|
||||||
top: 2em;
|
top: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.author-image {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user