sheldonmlee/photo-viewer-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: sheldonmlee:a0b85dfbcafacaaf25f5c5730f90c922fcd35716
Branches Tags
sheldonmlee:master
sheldonmlee:edward-cssification
..
compare: sheldonmlee:098777bb020dba30ed245eae9bb06676a2b14775
Branches Tags
sheldonmlee:master
sheldonmlee:edward-cssification

3 Commits
a0b85dfbca ... 098777bb02

Author SHA1 Message Date
Sheldon Lee
098777bb02 Use hosted backend 2023-11-14 03:51:09 +08:00
Sheldon Lee
2c31cf8820 Change title to Photos 2023-11-14 00:32:09 +08:00
Sheldon Lee
9d3d3530ea Fix handling of thumbnail urls, so that original url is still linked on 
the top of image.
 2023-11-14 00:31:10 +08:00
3 changed files with 45 additions and 16 deletions
Show Stats Expand all files Collapse all files

1
package.json
View File

@ -1,5 +1,6 @@
{ {
"name": "react-photo-viewer", "name": "react-photo-viewer",
"homepage": "https://dundun.ddns.net/photos",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {

2
public/index.html
View File

@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>Photos</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

44
src/App.tsx
View File

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