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

Implement use of thumbnails if available, and open original image if

Browse Source 
file name clicked
This commit is contained in:
Sheldon Lee 2023-11-13 02:10:10 +08:00
parent 039c2948c4
commit a0b85dfbca
2 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/App.css
View File

@ -32,8 +32,11 @@ body {
max-width: calc(100vw - 2em); max-width: calc(100vw - 2em);
} }
.GalleryItem > p { .GalleryItem > a {
color: inherit;
margin: 0.5em; margin: 0.5em;
overflow: clip;
} }
.GalleryItem > img, video { .GalleryItem > img, video {

13
src/App.tsx
View File

@ -28,6 +28,7 @@ function App() {
interface galleryItemInfo { interface galleryItemInfo {
is_dir: boolean; is_dir: boolean;
url: string; url: string;
thumbnail_url: string;
} }
function getContents( function getContents(
@ -59,7 +60,7 @@ 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.url; const url = item.thumbnail_url === null ? item.url : item.thumbnail_url;
let onClick = () => {}; let onClick = () => {};
if (item.is_dir) { if (item.is_dir) {
onClick = () => { onClick = () => {
@ -89,7 +90,9 @@ interface galleryItem {
function ImageItem({ url }: galleryItem) { function ImageItem({ url }: galleryItem) {
return ( return (
<div className="GalleryItem"> <div className="GalleryItem">
<p>{getFileName(url)}</p> <a href={url} target="_blank">
{getFileName(url)}
</a>
<img src={url} loading="lazy" /> <img src={url} loading="lazy" />
</div> </div>
); );
@ -98,7 +101,9 @@ function ImageItem({ url }: galleryItem) {
function VideoItem({ url }: galleryItem) { function VideoItem({ url }: galleryItem) {
return ( return (
<div className="GalleryItem"> <div className="GalleryItem">
<p>{getFileName(url)}</p> <a href={url} target="_blank">
{getFileName(url)}
</a>
<video controls> <video controls>
<source src={url} type="video/mp4" /> <source src={url} type="video/mp4" />
</video> </video>
@ -125,7 +130,7 @@ function getFileName(string: string): string {
} }
function post(category: string, callback: (text: string) => void) { function post(category: string, callback: (text: string) => void) {
fetch('http://localhost/react-photo-viewer/php/get.php', { fetch('http://localhost/photo-viewer-backend/php/get.php', {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',