Compare commits

...

2 Commits

2 changed files with 34 additions and 10 deletions

View File

@ -63,6 +63,10 @@ body {
background-color: #0056b3; background-color: #0056b3;
} }
.PlaceholderItem {
animation: loading 1.5s infinite;
}
.PlaceholderItem > button, .PlaceholderItem > button,
.ParentDirectoryItem > button { .ParentDirectoryItem > button {
background-color: #4D4F5D; background-color: #4D4F5D;
@ -73,6 +77,15 @@ body {
} }
.PlaceholderItem > button { .PlaceholderItem > button {
height: calc(16px + 10px * 2); height: calc(18px + 10px * 2);
width: 6em; min-width: 4em;
}
@keyframes loading {
0%, 100% {
filter: brightness(80%);
}
50% {
filter: brightness(100%);
}
} }

View File

@ -68,16 +68,18 @@ function Contents(
}; };
if (item.is_dir) { if (item.is_dir) {
itemProps.onClick = () => { itemProps.onClick = item.isPlaceholder
const subCategory = getFileName(itemProps.url); ? () => {}
: () => {
const subCategory = getFileName(itemProps.url);
if (category !== '') category = `${category}/${subCategory}`; if (category !== '') category = `${category}/${subCategory}`;
else category = subCategory; else category = subCategory;
if (subCategory === '..') if (subCategory === '..')
category = category.split('/').slice(0, -2).join('/'); category = category.split('/').slice(0, -2).join('/');
setCategory(category); setCategory(category);
}; };
return <DirectoryItem {...itemProps} />; return <DirectoryItem {...itemProps} />;
} }
if (itemProps.url.endsWith('.mp4')) { if (itemProps.url.endsWith('.mp4')) {
@ -137,6 +139,14 @@ function getFileName(string: string): string {
} }
function getPlaceholderData(): galleryItemInfo[] { function getPlaceholderData(): galleryItemInfo[] {
const backDir = (): galleryItemInfo => {
return {
is_dir: true,
url: '..',
thumbnail_url: '',
isPlaceholder: true,
};
};
const placeholderDir = (): galleryItemInfo => { const placeholderDir = (): galleryItemInfo => {
return { return {
is_dir: true, is_dir: true,
@ -155,6 +165,7 @@ function getPlaceholderData(): galleryItemInfo[] {
}; };
return [ return [
backDir(),
placeholderDir(), placeholderDir(),
placeholderDir(), placeholderDir(),
placeholderImg(), placeholderImg(),