Fix handling of thumbnail urls, so that original url is still linked on

the top of image.
This commit is contained in:
Sheldon Lee 2023-11-14 00:31:10 +08:00
parent a0b85dfbca
commit 9d3d3530ea

View File

@ -60,7 +60,9 @@ function getContents(
return getDir == item.is_dir;
})
.map((item: galleryItemInfo, index: number) => {
const url = item.thumbnail_url === null ? item.url : item.thumbnail_url;
const url = item.url;
const thumbnail_url =
item.thumbnail_url === null ? item.url : item.thumbnail_url;
let onClick = () => {};
if (item.is_dir) {
onClick = () => {
@ -73,27 +75,49 @@ function getContents(
setCategory(category);
};
return <DirectoryItem key={index} url={url} onClick={onClick} />;
return (
<DirectoryItem
key={index}
thumbnail_url={thumbnail_url}
url={url}
onClick={onClick}
/>
);
}
if (url.endsWith('.mp4')) {
return <VideoItem key={index} url={url} onClick={onClick} />;
return (
<VideoItem
key={index}
thumbnail_url={thumbnail_url}
url={url}
onClick={onClick}
/>
);
}
return <ImageItem key={index} url={url} onClick={onClick} />;
return (
<ImageItem
key={index}
thumbnail_url={thumbnail_url}
url={url}
onClick={onClick}
/>
);
});
}
interface galleryItem {
url: string;
thumbnail_url: string;
onClick: () => void;
}
function ImageItem({ url }: galleryItem) {
function ImageItem({ thumbnail_url, url }: galleryItem) {
return (
<div className="GalleryItem">
<a href={url} target="_blank">
{getFileName(url)}
</a>
<img src={url} loading="lazy" />
<img src={thumbnail_url} loading="lazy" />
</div>
);
}
@ -130,15 +154,19 @@ function getFileName(string: string): string {
}
function post(category: string, callback: (text: string) => void) {
fetch('http://localhost/photo-viewer-backend/php/get.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
category: category,
}),
})
fetch(
//'http://localhost/photo-viewer-backend/php/get.php',
'http://dundun.ddns.net/photo-viewer/photo-viewer-backend/php/get.php',
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
category: category,
}),
}
)
.then((response) => {
if (!response.ok) {
throw new Error('Network response was not ok');