7fac7febcf
* Public File Sharing This implements public file sharing (read-only) with and without passwords (#57). It also fixes a problem with filenames including special characters like `#` not working properly (#71). You can share a directory or a single file, by using the new share icon on the right of the directories/files, and click on it to manage an existing file share (setting a new password, or deleting the file share). There is some other minor cleanup and other copy updates in the README. Closes #57 Fixes #71 * Hide UI elements when sharing isn't allowed
73 lines
2.6 KiB
TypeScript
73 lines
2.6 KiB
TypeScript
import { DirectoryFile } from '/lib/types.ts';
|
|
import { PHOTO_IMAGE_EXTENSIONS, PHOTO_VIDEO_EXTENSIONS } from '/lib/utils/photos.ts';
|
|
|
|
interface ListPhotosProps {
|
|
files: DirectoryFile[];
|
|
}
|
|
|
|
export default function ListPhotos(
|
|
{
|
|
files,
|
|
}: ListPhotosProps,
|
|
) {
|
|
return (
|
|
<section class='mx-auto max-w-7xl my-8'>
|
|
{files.length === 0
|
|
? (
|
|
<article class='px-6 py-4 font-normal text-center w-full'>
|
|
<div class='font-medium text-slate-400 text-md'>No photos to show</div>
|
|
</article>
|
|
)
|
|
: (
|
|
<section class='w-full grid grid-cols-2 md:grid-cols-3 gap-4'>
|
|
{files.map((file) => {
|
|
const lowercaseFileName = file.file_name.toLowerCase();
|
|
const extensionName = lowercaseFileName.split('.').pop() || '';
|
|
|
|
const isImage = PHOTO_IMAGE_EXTENSIONS.some((extension) => extension === extensionName);
|
|
const isVideo = PHOTO_VIDEO_EXTENSIONS.some((extension) => extension === extensionName);
|
|
|
|
return (
|
|
<article class='hover:opacity-70'>
|
|
<a
|
|
href={`/files/open/${encodeURIComponent(file.file_name)}?path=${
|
|
encodeURIComponent(file.parent_path)
|
|
}`}
|
|
class='flex items-center'
|
|
target='_blank'
|
|
rel='noopener noreferrer'
|
|
>
|
|
{isVideo
|
|
? (
|
|
<video class='h-auto max-w-full rounded-md' title={file.file_name}>
|
|
<source
|
|
src={`/files/open/${encodeURIComponent(file.file_name)}?path=${
|
|
encodeURIComponent(file.parent_path)
|
|
}`}
|
|
type={`video/${extensionName}`}
|
|
/>
|
|
</video>
|
|
)
|
|
: null}
|
|
{isImage
|
|
? (
|
|
<img
|
|
src={`/photos/thumbnail/${encodeURIComponent(file.file_name)}?path=${
|
|
encodeURIComponent(file.parent_path)
|
|
}`}
|
|
class='h-auto max-w-full rounded-md'
|
|
alt={file.file_name}
|
|
title={file.file_name}
|
|
/>
|
|
)
|
|
: null}
|
|
</a>
|
|
</article>
|
|
);
|
|
})}
|
|
</section>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|