Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Edward
|
1a7786b458 | ||
 sheldonmlee
|
098777bb02 | ||
|
sheldonmlee
|
2c31cf8820 | ||
|
sheldonmlee
|
9d3d3530ea |
@@ -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": {
|
||||||
|
|||||||
+1
-1
@@ -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>
|
||||||
|
|||||||
+36
-7
@@ -1,7 +1,7 @@
|
|||||||
body {
|
body {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background-color: #282c34;
|
background-color: #282c34;
|
||||||
color: #B9B8D6;
|
color: #b9b8d6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.Header {
|
.Header {
|
||||||
@@ -24,7 +24,7 @@ body {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
background-color: #3B3E49;
|
background-color: #3b3e49;
|
||||||
|
|
||||||
border-radius: 10px 10px 0px 0px;
|
border-radius: 10px 10px 0px 0px;
|
||||||
margin: 0 0 1em 0;
|
margin: 0 0 1em 0;
|
||||||
@@ -35,17 +35,18 @@ body {
|
|||||||
.GalleryItem > a {
|
.GalleryItem > a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
||||||
margin: 0.5em;
|
margin: 0;
|
||||||
overflow: clip;
|
overflow: clip;
|
||||||
}
|
}
|
||||||
|
|
||||||
.GalleryItem > img, video {
|
.GalleryItem > img,
|
||||||
|
video {
|
||||||
max-height: 80vh;
|
max-height: 80vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.DirectoryItem > button {
|
.DirectoryItem > button {
|
||||||
background-color: #44655D;
|
background-color: #44655d;
|
||||||
color: #B9B8D6;
|
color: #b9b8d6;
|
||||||
border: none;
|
border: none;
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -63,6 +64,34 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ParentDirectoryItem > button {
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
+46
-20
@@ -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,48 @@ 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)}
|
<img className="GalleryImg" src={thumbnail_url} loading="lazy" />
|
||||||
</a>
|
</a>
|
||||||
<img src={url} loading="lazy" />
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -102,11 +125,10 @@ function VideoItem({ url }: galleryItem) {
|
|||||||
return (
|
return (
|
||||||
<div className="GalleryItem">
|
<div className="GalleryItem">
|
||||||
<a href={url} target="_blank">
|
<a href={url} target="_blank">
|
||||||
{getFileName(url)}
|
<video controls>
|
||||||
|
<source className="GalleryVid" src={url} type="video/mp4" />
|
||||||
|
</video>
|
||||||
</a>
|
</a>
|
||||||
<video controls>
|
|
||||||
<source src={url} type="video/mp4" />
|
|
||||||
</video>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -130,15 +152,19 @@ 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(
|
||||||
method: 'POST',
|
//'http://localhost/photo-viewer-backend/php/get.php',
|
||||||
headers: {
|
'https://dundun.ddns.net/photo-viewer/photo-viewer-backend/php/get.php',
|
||||||
'Content-Type': 'application/json',
|
{
|
||||||
},
|
method: 'POST',
|
||||||
body: JSON.stringify({
|
headers: {
|
||||||
category: category,
|
'Content-Type': 'application/json',
|
||||||
}),
|
},
|
||||||
})
|
body: JSON.stringify({
|
||||||
|
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');
|
||||||
|
|||||||
Reference in New Issue
Block a user