Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Edward
|
1a7786b458 | ||
 sheldonmlee
|
098777bb02 | ||
|
sheldonmlee
|
2c31cf8820 | ||
|
sheldonmlee
|
9d3d3530ea |
@@ -1,5 +1,6 @@
|
||||
{
|
||||
"name": "react-photo-viewer",
|
||||
"homepage": "https://dundun.ddns.net/photos",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
|
||||
+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>
|
||||
|
||||
+36
-7
@@ -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;
|
||||
@@ -35,17 +35,18 @@ body {
|
||||
.GalleryItem > a {
|
||||
color: inherit;
|
||||
|
||||
margin: 0.5em;
|
||||
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;
|
||||
@@ -63,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;
|
||||
}
|
||||
}
|
||||
|
||||
+38
-12
@@ -60,7 +60,9 @@ function getContents(
|
||||
return getDir == item.is_dir;
|
||||
})
|
||||
.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 = () => {};
|
||||
if (item.is_dir) {
|
||||
onClick = () => {
|
||||
@@ -73,27 +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">
|
||||
<a href={url} target="_blank">
|
||||
{getFileName(url)}
|
||||
<img className="GalleryImg" src={thumbnail_url} loading="lazy" />
|
||||
</a>
|
||||
<img src={url} loading="lazy" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -102,11 +125,10 @@ function VideoItem({ url }: galleryItem) {
|
||||
return (
|
||||
<div className="GalleryItem">
|
||||
<a href={url} target="_blank">
|
||||
{getFileName(url)}
|
||||
</a>
|
||||
<video controls>
|
||||
<source src={url} type="video/mp4" />
|
||||
<source className="GalleryVid" src={url} type="video/mp4" />
|
||||
</video>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -130,7 +152,10 @@ function getFileName(string: string): string {
|
||||
}
|
||||
|
||||
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',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
@@ -138,7 +163,8 @@ function post(category: string, callback: (text: string) => void) {
|
||||
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