Compare commits

..

No commits in common. "f3d7c7abf27ad14f5dcf30d47af42596efd6e7b8" and "8a1b52749bcfc723439d768cbe38427da8465cc0" have entirely different histories.

4 changed files with 57 additions and 96 deletions

View File

@ -38,8 +38,7 @@ body {
overflow: clip; overflow: clip;
} }
.GalleryItem > img, .GalleryItem > img, video {
.GalleryItem > video {
object-fit: contain; object-fit: contain;
max-height: 80vh; max-height: 80vh;
} }
@ -63,16 +62,7 @@ body {
background-color: #0056b3; background-color: #0056b3;
} }
.PlaceholderItem > button,
.ParentDirectoryItem > button { .ParentDirectoryItem > button {
background-color: #4D4F5D; background-color: #4D4F5D;
} }
.PlaceholderItem > a {
height: 1em;
}
.PlaceholderItem > button {
height: calc(16px + 10px * 2);
width: 6em;
}

View File

@ -1,3 +1,4 @@
import React from 'react';
import './App.css'; import './App.css';
import Gallery from './Gallery/index'; import Gallery from './Gallery/index';

View File

@ -1,30 +1,24 @@
import React from 'react'; import React from 'react';
import '../App.css'; import '../App.css';
import placeholderPng from './placeholder.png';
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
function Gallery() { function Gallery() {
const [data, setData] = useState<galleryItemInfo[]>([]); const [data, setData] = useState('');
const [category, setCategory] = useState(''); const [category, setCategory] = useState('');
useEffect(() => { useEffect(() => {
post(category, (data: galleryItemInfo[]) => { post(category, (json: string) => {
setData(data); setData(json);
});
}); });
}, [category]);
const updateCategory = (category: string) => {
setData(getPlaceholderData);
setCategory(category);
};
return ( return (
<div className="Gallery"> <div className="Gallery">
<div className="Header"> <div className="Header">
{Contents(data, true, category, updateCategory)} {getContents(data, true, category, setCategory)}
</div> </div>
<div className="Contents"> <div className="Contents">
{Contents(data, false, category, updateCategory)} {getContents(data, false, category, setCategory)}
</div> </div>
</div> </div>
); );
@ -34,25 +28,32 @@ interface galleryItemInfo {
is_dir: boolean; is_dir: boolean;
url: string; url: string;
thumbnail_url: string; thumbnail_url: string;
isPlaceholder: boolean;
} }
function Contents( function getContents(
data: galleryItemInfo[], data: string,
getDir: boolean, getDir: boolean,
category: string, category: string,
setCategory: (category: string) => void setCategory: (category: string) => void
) { ) {
if (data === null) return; if (data === '') return;
return data let obj = null;
.sort((a: galleryItemInfo, b: galleryItemInfo): number => { try {
obj = JSON.parse(data);
} catch (error: unknown) {
if (!(error instanceof SyntaxError)) {
throw new Error(error as unknown as undefined);
}
return data;
}
return obj
.sort((a: galleryItemInfo, b: galleryItemInfo) => {
if (a.is_dir && b.is_dir) return 0; if (a.is_dir && b.is_dir) return 0;
if (a.is_dir && !b.is_dir) return -1; if (a.is_dir && !b.is_dir) return -1;
if (!a.is_dir && b.is_dir) return 1; if (!a.is_dir && b.is_dir) return 1;
if (!a.is_dir && !b.is_dir) return 0; if (!a.is_dir && !b.is_dir) return 0;
return 0;
}) })
.filter((item: galleryItemInfo) => { .filter((item: galleryItemInfo) => {
return getDir == item.is_dir; return getDir == item.is_dir;
@ -64,7 +65,6 @@ function Contents(
thumbnail_url: thumbnail_url:
item.thumbnail_url === null ? item.url : item.thumbnail_url, item.thumbnail_url === null ? item.url : item.thumbnail_url,
onClick: () => {}, onClick: () => {},
isPlaceholder: item.isPlaceholder,
}; };
if (item.is_dir) { if (item.is_dir) {
@ -91,13 +91,11 @@ interface galleryItem {
url: string; url: string;
thumbnail_url: string; thumbnail_url: string;
onClick: () => void; onClick: () => void;
isPlaceholder: boolean;
} }
function ImageItem({ thumbnail_url, url, isPlaceholder }: galleryItem) { function ImageItem({ thumbnail_url, url }: galleryItem) {
const placeholderClass = isPlaceholder ? 'PlaceholderItem' : '';
return ( return (
<div className={`GalleryItem ${placeholderClass}`}> <div className="GalleryItem">
<a href={url} target="_blank"> <a href={url} target="_blank">
{getFileName(url)} {getFileName(url)}
</a> </a>
@ -119,15 +117,16 @@ function VideoItem({ url }: galleryItem) {
); );
} }
function DirectoryItem({ url, onClick, isPlaceholder }: galleryItem) { function DirectoryItem({ url, onClick }: galleryItem) {
let buttonText = getFileName(url); let buttonText = getFileName(url);
const isBackButton = buttonText === '..'; const isBackButton = buttonText === '..';
const placeholderClass = isPlaceholder ? 'PlaceholderItem' : ''; buttonText = isBackButton ? 'Back' : `Category: ${buttonText}`;
buttonText = isBackButton ? 'Back' : `${buttonText}`;
const backButtonClass = isBackButton ? 'ParentDirectoryItem' : ''; const backButtonClass = isBackButton ? 'ParentDirectoryItem' : '';
return ( return (
<div className={`DirectoryItem ${backButtonClass} ${placeholderClass}`}> <div className={`DirectoryItem ${backButtonClass}`}>
<button onClick={onClick}>{buttonText}</button> <button className="DirectoryItem" onClick={onClick}>
{buttonText}
</button>
</div> </div>
); );
} }
@ -136,40 +135,10 @@ function getFileName(string: string): string {
return string.split('/').at(-1) as unknown as string; return string.split('/').at(-1) as unknown as string;
} }
function getPlaceholderData(): galleryItemInfo[] { function post(category: string, callback: (text: string) => void) {
const placeholderDir = (): galleryItemInfo => { fetch(
return { 'http://localhost/photo-viewer-backend/php/get.php',
is_dir: true, //'https://dundun.ddns.net/photo-viewer/photo-viewer-backend/php/get.php',
url: '',
thumbnail_url: '',
isPlaceholder: true,
};
};
const placeholderImg = (): galleryItemInfo => {
return {
is_dir: false,
url: '',
thumbnail_url: `${placeholderPng}`,
isPlaceholder: true,
};
};
return [
placeholderDir(),
placeholderDir(),
placeholderImg(),
placeholderImg(),
placeholderImg(),
];
}
async function post(
category: string,
setDataCallback: (data: galleryItemInfo[]) => void
) {
try {
const response = await 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: {
@ -179,19 +148,20 @@ async function post(
category: category, category: category,
}), }),
} }
); )
setDataCallback(await response.json()); .then((response) => {
} catch (error) { if (!response.ok) {
console.error('Error fetching data: ', error); throw new Error('Network response was not ok');
setDataCallback([
{
is_dir: false,
url: 'error_fetching',
thumbnail_url: '',
isPlaceholder: false,
},
]);
} }
return response;
})
.then((response) => response.text())
.then((data) => {
callback(data as unknown as string);
})
.catch((error) => {
console.error('There was a problem with the fetch operation:', error);
});
} }
export default Gallery; export default Gallery;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.2 KiB