Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Edward
|
1a7786b458 | ||
 sheldonmlee
|
098777bb02 | ||
|
sheldonmlee
|
2c31cf8820 | ||
|
sheldonmlee
|
9d3d3530ea | ||
|
sheldonmlee
|
a0b85dfbca | ||
|
sheldonmlee
|
039c2948c4 | ||
|
sheldonmlee
|
a26dd9741a |
@@ -1,5 +1,6 @@
|
||||
{
|
||||
"name": "react-photo-viewer",
|
||||
"homepage": "https://dundun.ddns.net/photos",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
|
||||
-52
@@ -1,52 +0,0 @@
|
||||
<?php
|
||||
define("ROOT_URL", "http://localhost/react-photo-viewer/");
|
||||
define("RELATIVE_IMG", "../img/");
|
||||
define("ABSOLUTE_IMG", "img/");
|
||||
|
||||
main();
|
||||
|
||||
function main(): void {
|
||||
$data = json_decode(file_get_contents('php://input'), true);
|
||||
$array = [];
|
||||
|
||||
$category = $data["category"];
|
||||
$directory = RELATIVE_IMG.$category;
|
||||
if (!is_dir($directory)) return;
|
||||
foreach (scandir($directory) as $file) {
|
||||
if ($file === ".") continue;
|
||||
if ($category === "" && $file === "..") continue;
|
||||
|
||||
if ($category != "") $file = $category.'/'.$file;
|
||||
$is_dir = is_dir(RELATIVE_IMG.$file);
|
||||
if (!$is_dir && !is_valid_file_type($file)) continue;
|
||||
|
||||
$file_item = [];
|
||||
$file_item["is_dir"] = $is_dir;
|
||||
$file_item["url"] = ROOT_URL.ABSOLUTE_IMG.$file;
|
||||
array_push($array, $file_item);
|
||||
}
|
||||
echo json_encode($array);
|
||||
}
|
||||
|
||||
function is_valid_file_type(string $filename): bool {
|
||||
$file_extensions = [
|
||||
// Image extensions
|
||||
'jpg',
|
||||
'jpeg',
|
||||
'png',
|
||||
'gif',
|
||||
'tiff',
|
||||
'bmp',
|
||||
'webp',
|
||||
'svg',
|
||||
// Video extensions
|
||||
'mp4',
|
||||
];
|
||||
|
||||
foreach ($file_extensions as $file_extension) {
|
||||
if (str_ends_with($filename, $file_extension)) return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
?>
|
||||
|
||||
+1
-1
@@ -24,7 +24,7 @@
|
||||
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`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
<title>Photos</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
||||
+40
-8
@@ -1,7 +1,7 @@
|
||||
body {
|
||||
min-height: 100vh;
|
||||
background-color: #282c34;
|
||||
color: #B9B8D6;
|
||||
color: #b9b8d6;
|
||||
}
|
||||
|
||||
.Header {
|
||||
@@ -24,7 +24,7 @@ body {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
|
||||
background-color: #3B3E49;
|
||||
background-color: #3b3e49;
|
||||
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
margin: 0 0 1em 0;
|
||||
@@ -32,17 +32,21 @@ body {
|
||||
max-width: calc(100vw - 2em);
|
||||
}
|
||||
|
||||
.GalleryItem > p {
|
||||
margin: 0.5em;
|
||||
.GalleryItem > a {
|
||||
color: inherit;
|
||||
|
||||
margin: 0;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.GalleryItem > img, video {
|
||||
.GalleryItem > img,
|
||||
video {
|
||||
max-height: 80vh;
|
||||
}
|
||||
|
||||
.DirectoryItem > button {
|
||||
background-color: #44655D;
|
||||
color: #B9B8D6;
|
||||
background-color: #44655d;
|
||||
color: #b9b8d6;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
text-align: center;
|
||||
@@ -60,6 +64,34 @@ body {
|
||||
}
|
||||
|
||||
.ParentDirectoryItem > button {
|
||||
background-color: #4D4F5D;
|
||||
background-color: #4d4f5d;
|
||||
}
|
||||
|
||||
@media (min-width: 62em) {
|
||||
.GalleryItem {
|
||||
margin: 1em;
|
||||
border-radius: 1em;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.Contents {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: start;
|
||||
align-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.GalleryImg {
|
||||
object-fit: cover;
|
||||
width: 12em;
|
||||
height: 9em;
|
||||
}
|
||||
|
||||
.GalleryVid {
|
||||
object-fit: cover;
|
||||
width: 12em;
|
||||
height: 9em;
|
||||
}
|
||||
}
|
||||
|
||||
+50
-19
@@ -28,6 +28,7 @@ function App() {
|
||||
interface galleryItemInfo {
|
||||
is_dir: boolean;
|
||||
url: string;
|
||||
thumbnail_url: string;
|
||||
}
|
||||
|
||||
function getContents(
|
||||
@@ -60,6 +61,8 @@ function getContents(
|
||||
})
|
||||
.map((item: galleryItemInfo, index: number) => {
|
||||
const url = item.url;
|
||||
const thumbnail_url =
|
||||
item.thumbnail_url === null ? item.url : item.thumbnail_url;
|
||||
let onClick = () => {};
|
||||
if (item.is_dir) {
|
||||
onClick = () => {
|
||||
@@ -72,25 +75,48 @@ 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">
|
||||
<p>{getFileName(url)}</p>
|
||||
<img src={url} loading="lazy" />
|
||||
<a href={url} target="_blank">
|
||||
<img className="GalleryImg" src={thumbnail_url} loading="lazy" />
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -98,10 +124,11 @@ function ImageItem({ url }: galleryItem) {
|
||||
function VideoItem({ url }: galleryItem) {
|
||||
return (
|
||||
<div className="GalleryItem">
|
||||
<p>{getFileName(url)}</p>
|
||||
<video controls>
|
||||
<source src={url} type="video/mp4" />
|
||||
</video>
|
||||
<a href={url} target="_blank">
|
||||
<video controls>
|
||||
<source className="GalleryVid" src={url} type="video/mp4" />
|
||||
</video>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -125,15 +152,19 @@ function getFileName(string: string): string {
|
||||
}
|
||||
|
||||
function post(category: string, callback: (text: string) => void) {
|
||||
fetch('http://localhost/react-photo-viewer/php/get.php', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
category: category,
|
||||
}),
|
||||
})
|
||||
fetch(
|
||||
//'http://localhost/photo-viewer-backend/php/get.php',
|
||||
'https://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');
|
||||
|
||||
Reference in New Issue
Block a user